|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Advent Calendar - Lingua Noel</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#C62828', |
|
|
secondary: '#388E3C', |
|
|
accent: '#D32F2F', |
|
|
background: '#FFF3E0', |
|
|
text: '#263238', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-background text-text min-h-screen"> |
|
|
<custom-header></custom-header> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
|
|
|
<div class="bg-gradient-to-r from-primary to-secondary text-white rounded-2xl p-8 mb-8 shadow-xl"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold mb-2">25-Day Advent Calendar</h1> |
|
|
<p class="text-lg opacity-90">Unlock a new language learning adventure each day</p> |
|
|
</div> |
|
|
<a href="/" class="bg-white text-primary px-6 py-2 rounded-full font-bold hover:bg-gray-100 transition"> |
|
|
← Back to Story |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-8 mb-8"> |
|
|
<div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-6 gap-4"> |
|
|
<h2 class="text-2xl font-bold text-primary flex items-center"> |
|
|
<i data-feather="calendar" class="mr-3"></i> |
|
|
Your 25-Day Language Journey |
|
|
</h2> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-4 h-4 bg-primary rounded-full mr-2"></div> |
|
|
<span class="text-sm">Today</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-4 h-4 bg-green-500 rounded-full mr-2"></div> |
|
|
<span class="text-sm">Completed</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></div> |
|
|
<span class="text-sm">Current</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-4 h-4 bg-gray-300 rounded-full mr-2"></div> |
|
|
<span class="text-sm">Locked</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4" id="advent-calendar"> |
|
|
|
|
|
</div> |
|
|
<div class="mt-8 p-6 bg-gradient-to-r from-blue-50 to-green-50 rounded-xl"> |
|
|
<div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4"> |
|
|
<div> |
|
|
<h3 class="font-bold text-xl mb-2">Your Progress Journey</h3> |
|
|
<p class="text-gray-600">You're on Day 1 of 25 - Welcome to Noëlville!</p> |
|
|
</div> |
|
|
<div class="flex items-center gap-4"> |
|
|
<div class="text-center"> |
|
|
<div class="text-4xl font-bold text-primary">4%</div> |
|
|
<p class="text-sm text-gray-600">Complete</p> |
|
|
</div> |
|
|
<a href="/itinerary.html" class="btn btn-primary"> |
|
|
<i data-feather="book-open" class="mr-2"></i> |
|
|
View Full Itinerary |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 w-full bg-gray-200 rounded-full h-3"> |
|
|
<div class="bg-gradient-to-r from-primary to-secondary h-3 rounded-full transition-all duration-500" style="width: 4%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-8"> |
|
|
<h2 class="text-2xl font-bold text-primary mb-6 flex items-center"> |
|
|
<i data-feather="book-open" class="mr-3"></i> |
|
|
Upcoming Adventures |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="p-6 bg-blue-50 rounded-xl border-l-4 border-primary"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-primary text-white p-3 rounded-full mr-4"> |
|
|
<i data-feather="clock"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold">Day 2 (Tomorrow)</h3> |
|
|
<p class="text-sm text-primary">The Baker's Secret</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm mb-4">Visit Pierre's bakery to learn food vocabulary and ordering phrases.</p> |
|
|
<div class="flex gap-2 flex-wrap"> |
|
|
<span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-xs">Greetings</span> |
|
|
<span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-xs">Food Vocabulary</span> |
|
|
<span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-xs">Simple Orders</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 bg-green-50 rounded-xl border-l-4 border-secondary"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-secondary text-white p-3 rounded-full mr-4"> |
|
|
<i data-feather="calendar"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold">Day 3</h3> |
|
|
<p class="text-sm text-secondary">Market Mystery</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm mb-4">Explore the Christmas market to practice shopping and numbers.</p> |
|
|
<div class="flex gap-2 flex-wrap"> |
|
|
<span class="bg-secondary bg-opacity-10 text-secondary px-3 py-1 rounded-full text-xs">Numbers</span> |
|
|
<span class="bg-secondary bg-opacity-10 text-secondary px-3 py-1 rounded-full text-xs">Shopping Phrases</span> |
|
|
<span class="bg-secondary bg-opacity-10 text-secondary px-3 py-1 rounded-full text-xs">Prices</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 bg-purple-50 rounded-xl border-l-4 border-purple-500"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-purple-500 text-white p-3 rounded-full mr-4"> |
|
|
<i data-feather="calendar"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold">Day 4</h3> |
|
|
<p class="text-sm text-purple-700">Getting Around</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm mb-4">Learn to ask for and understand directions in town.</p> |
|
|
<div class="flex gap-2 flex-wrap"> |
|
|
<span class="bg-purple-500 bg-opacity-10 text-purple-700 px-3 py-1 rounded-full text-xs">Directions</span> |
|
|
<span class="bg-purple-500 bg-opacity-10 text-purple-700 px-3 py-1 rounded-full text-xs">Locations</span> |
|
|
<span class="bg-purple-500 bg-opacity-10 text-purple-700 px-3 py-1 rounded-full text-xs">Prepositions</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-8"> |
|
|
<a href="/" class="inline-block bg-primary text-white px-8 py-3 rounded-full font-bold hover:bg-red-800 transition"> |
|
|
Continue Today's Adventure → |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/header.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<floating-action></floating-action> |
|
|
<script src="components/floating-action.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const calendar = document.getElementById('advent-calendar'); |
|
|
if (!calendar) return; |
|
|
|
|
|
const chapters = [ |
|
|
"The Arrival", |
|
|
"The Baker's Secret", |
|
|
"Christmas Market", |
|
|
"Lost in Translation", |
|
|
"Carol Singers", |
|
|
"Hotel Check-in", |
|
|
"Restaurant Visit", |
|
|
"Museum Tour", |
|
|
"Train Journey", |
|
|
"Shopping Spree", |
|
|
"Ice Skating", |
|
|
"Christmas Eve", |
|
|
"Midnight Mass", |
|
|
"Gift Exchange", |
|
|
"Family Dinner", |
|
|
"Winter Walk", |
|
|
"Hot Chocolate", |
|
|
"Snowball Fight", |
|
|
"Ski Adventure", |
|
|
"Cabin Stay", |
|
|
"Northern Lights", |
|
|
"Reindeer Farm", |
|
|
"Santa's Workshop", |
|
|
"Christmas Day", |
|
|
"Farewell" |
|
|
]; |
|
|
|
|
|
for (let day = 1; day <= 25; day++) { |
|
|
const dayElement = document.createElement('div'); |
|
|
const isCurrentDay = day === 1; |
|
|
const isCompleted = day < 1; |
|
|
const isLocked = day > 1; |
|
|
|
|
|
let bgColor = 'bg-gray-100'; |
|
|
let textColor = 'text-gray-400'; |
|
|
let icon = 'lock'; |
|
|
let borderColor = 'border-gray-200'; |
|
|
|
|
|
if (isCurrentDay) { |
|
|
bgColor = 'bg-primary text-white'; |
|
|
textColor = 'text-white'; |
|
|
icon = 'play-circle'; |
|
|
borderColor = 'border-primary'; |
|
|
} else if (isCompleted) { |
|
|
bgColor = 'bg-green-100 text-green-800'; |
|
|
textColor = 'text-green-800'; |
|
|
icon = 'check-circle'; |
|
|
borderColor = 'border-green-500'; |
|
|
} |
|
|
|
|
|
dayElement.className = `relative ${bgColor} rounded-xl p-4 border-2 ${borderColor} cursor-pointer transition-all hover:scale-105`; |
|
|
dayElement.innerHTML = ` |
|
|
<div class="text-center"> |
|
|
<div class="font-bold text-2xl mb-1">${day}</div> |
|
|
<div class="text-xs font-medium">${chapters[day - 1]}</div> |
|
|
<div class="mt-2"> |
|
|
<i data-feather="${icon}" class="mx-auto" style="width: 20px; height: 20px;"></i> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
if (isCurrentDay) { |
|
|
dayElement.addEventListener('click', () => { |
|
|
window.location.href = '/'; |
|
|
}); |
|
|
} else if (isLocked) { |
|
|
dayElement.addEventListener('click', () => { |
|
|
alert(`Day ${day} unlocks on December ${day}! Complete previous days to unlock this chapter.`); |
|
|
}); |
|
|
} else if (isCompleted) { |
|
|
dayElement.addEventListener('click', () => { |
|
|
alert(`You've completed Day ${day}: ${chapters[day - 1]}!`); |
|
|
}); |
|
|
} |
|
|
|
|
|
calendar.appendChild(dayElement); |
|
|
} |
|
|
|
|
|
feather.replace(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
