|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Lingua Noel - Mobile Adventure</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#C62828', |
|
|
secondary: '#388E3C', |
|
|
accent: '#D32F2F', |
|
|
background: '#FFF3E0', |
|
|
text: '#263238', |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'] |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-background font-sans"> |
|
|
|
|
|
<div id="app" class="relative min-h-screen overflow-hidden"> |
|
|
|
|
|
<div id="home-view" class="view active"> |
|
|
|
|
|
<div class="town-background relative h-screen"> |
|
|
|
|
|
<div id="snow-overlay" class="absolute inset-0 pointer-events-none"></div> |
|
|
|
|
|
|
|
|
<div class="character absolute bottom-0 left-1/2 transform -translate-x-1/2 w-24 h-32"> |
|
|
<img src="http://static.photos/people/320x240/50" alt="Adventurer" class="w-full h-full object-contain"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-32 left-0 right-0 flex justify-around px-4"> |
|
|
<button class="location-btn bg-red-100 p-3 rounded-full shadow-lg" data-location="bakery"> |
|
|
<img src="http://static.photos/food/200x200/10" alt="Bakery" class="w-12 h-12 rounded-full object-cover"> |
|
|
</button> |
|
|
<button class="location-btn bg-green-100 p-3 rounded-full shadow-lg" data-location="market"> |
|
|
<img src="http://static.photos/retail/200x200/15" alt="Market" class="w-12 h-12 rounded-full object-cover"> |
|
|
</button> |
|
|
<button class="location-btn bg-blue-100 p-3 rounded-full shadow-lg" data-location="hotel"> |
|
|
<img src="http://static.photos/workspace/200x200/20" alt="Hotel" class="w-12 h-12 rounded-full object-cover"> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute top-4 right-4 bg-white bg-opacity-90 rounded-full p-3 shadow-lg"> |
|
|
<div class="text-center"> |
|
|
<div class="text-xl font-bold text-primary">Day <span id="current-day">1</span>/25</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="story-panel"> |
|
|
<div class="bg-white bg-opacity-90 rounded-t-2xl p-4 shadow-lg"> |
|
|
<h2 class="text-lg font-bold text-primary mb-1" id="chapter-title">Chapter 1: The Arrival</h2> |
|
|
<p class="text-sm text-gray-700 mb-2" id="story-text"> |
|
|
You've just arrived in Noëlville! An elderly man approaches: "<span class="font-bold text-secondary">Bienvenue!</span>" |
|
|
</p> |
|
|
<div class="flex gap-2"> |
|
|
<button class="btn btn-primary flex-1 text-sm py-2" id="continue-story"> |
|
|
Continue |
|
|
</button> |
|
|
<button class="btn btn-secondary flex-1 text-sm py-2" id="ask-question"> |
|
|
Help |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="bakery-view" class="view hidden"> |
|
|
<div class="location-view bg-red-50"> |
|
|
<div class="h-40 bg-red-200 relative"> |
|
|
<img src="http://static.photos/food/640x360/10" alt="Bakery" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h2 class="text-xl font-bold text-primary">Pierre's Bakery</h2> |
|
|
<p class="text-sm mb-4">Learn food vocabulary and ordering phrases</p> |
|
|
<button class="btn btn-primary w-full mb-2" data-lesson="food">Start Lesson</button> |
|
|
<button class="btn btn-outline w-full" data-back>Back to Town</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around p-2"> |
|
|
<button class="nav-btn active" data-view="home"> |
|
|
<i data-feather="home"></i> |
|
|
<span class="text-xs">Town</span> |
|
|
</button> |
|
|
<button class="nav-btn" data-view="vocabulary"> |
|
|
<i data-feather="book"></i> |
|
|
<span class="text-xs">Vocabulary</span> |
|
|
</button> |
|
|
<button class="nav-btn" data-view="characters"> |
|
|
<i data-feather="users"></i> |
|
|
<span class="text-xs">People</span> |
|
|
</button> |
|
|
<button class="nav-btn" data-view="progress"> |
|
|
<i data-feather="award"></i> |
|
|
<span class="text-xs">Progress</span> |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
