<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Bible Verse</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 16px;
}
.verse-container {
background: #191919;
border-radius: 12px;
padding: 32px 28px;
max-width: 500px;
width: 100%;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-left: 3px solid #39FF14;
position: relative;
overflow: hidden;
}
.verse-container:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(57, 255, 20, 0.15);
}
.verse-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #39FF14 0%, transparent 100%);
}
.loading {
color: #888;
text-align: center;
font-size: 14px;
}
.verse-text {
color: #ffffff;
font-size: 18px;
line-height: 1.7;
margin-bottom: 20px;
font-weight: 400;
letter-spacing: 0.3px;
}
.verse-reference {
color: #888;
font-size: 14px;
font-weight: 500;
text-align: right;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.refresh-hint {
color: #555;
font-size: 11px;
text-align: center;
margin-top: 16px;
opacity: 0;
transition: opacity 0.3s ease;
}
.verse-container:hover .refresh-hint {
opacity: 1;
}
.error {
color: #ff4444;
text-align: center;
font-size: 14px;
}
@media (max-width: 480px) {
.verse-container {
padding: 24px 20px;
}
.verse-text {
font-size: 16px;
}
.verse-reference {
font-size: 13px;
}
}
</style>
</head>
<body>
<div class="verse-container" id="verseContainer">
<div class="loading" id="loading">Loading verse...</div>
<div id="verseContent" style="display: none;">
<div class="verse-text" id="verseText"></div>
<div class="verse-reference" id="verseReference"></div>
<div class="refresh-hint">Click to refresh</div>
</div>
<div class="error" id="error" style="display: none;"></div>
</div>
<script>
const verseContainer = document.getElementById('verseContainer');
const loading = document.getElementById('loading');
const verseContent = document.getElementById('verseContent');
const verseText = document.getElementById('verseText');
const verseReference = document.getElementById('verseReference');
const errorDiv = document.getElementById('error');
// List of popular verses for fallback and variety
const popularVerses = [
'John 3:16', 'Philippians 4:13', 'Jeremiah 29:11', 'Proverbs 3:5-6',
'Romans 8:28', 'Isaiah 41:10', 'Matthew 6:33', 'Psalm 23:1',
'Proverbs 16:3', 'Matthew 11:28', '2 Corinthians 5:7', 'Psalm 46:1',
'Romans 12:2', 'Joshua 1:9', 'Psalm 27:1', 'Isaiah 40:31',
'Ephesians 2:8-9', 'Galatians 5:22-23', '1 Corinthians 13:4-7'
];
function getRandomVerse() {
return popularVerses[Math.floor(Math.random() * popularVerses.length)];
}
async function fetchVerse() {
loading.style.display = 'block';
verseContent.style.display = 'none';
errorDiv.style.display = 'none';
try {
const verseRef = getRandomVerse();
const response = await fetch(`https://bible-api.com/${verseRef}`);
if (!response.ok) throw new Error('Failed to fetch verse');
const data = await response.json();
verseText.textContent = data.text.trim();
verseReference.textContent = data.reference;
loading.style.display = 'none';
verseContent.style.display = 'block';
} catch (error) {
loading.style.display = 'none';
errorDiv.textContent = 'Unable to load verse. Click to retry.';
errorDiv.style.display = 'block';
console.error('Error fetching verse:', error);
}
}
verseContainer.addEventListener('click', fetchVerse);
// Load verse on page load
fetchVerse();
</script>
</body>
</html>