Hugging Face's logo

Spaces:
duuinh
/
lingua-noel-ai-language-learning-chat
Running

App Files Community
duuinh commited on
Commit
ae84176
路
verified 路
1 Parent(s): e3f5a6d

I want it to be a one-page application. It's designed for mobile first so we don't need a footer. I want is to be more visual, not only text.

Browse files
Files changed (3) hide show
  1. index.html +95 -255
  2. script.js +92 -53
  3. style.css +67 -3
index.html CHANGED
@@ -3,286 +3,126 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Lingua Noel - 25-Day Language Adventure</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <link rel="stylesheet" href="style.css">
 
11
  <script>
12
- tailwind.config = {
13
- theme: {
14
- extend: {
15
- colors: {
16
- primary: '#C62828',
17
- secondary: '#388E3C',
18
- accent: '#D32F2F',
19
- background: '#FFF3E0',
20
- text: '#263238',
 
 
 
 
 
21
  }
22
- }
23
  }
24
- }
25
  </script>
26
  </head>
27
- <body class="min-h-screen bg-background">
28
- <custom-header></custom-header>
29
- <main class="relative">
30
- <!-- Virtual Town Background -->
31
- <div class="town-background">
32
- <!-- Snow overlay -->
33
- <div id="snow-overlay" class="absolute inset-0 pointer-events-none"></div>
34
-
35
- <!-- Town elements will be positioned here -->
36
- <div class="town-container relative h-screen">
37
- <!-- Day counter floating in top right -->
38
- <div class="absolute top-4 right-4 bg-white bg-opacity-90 rounded-full p-4 shadow-lg z-10">
39
- <div class="text-center">
40
- <div class="text-3xl font-bold text-primary">Day <span id="current-day">1</span>/25</div>
41
- <p class="text-xs text-gray-600">Advent Calendar</p>
42
- </div>
43
- </div>
44
 
45
- <!-- Town buildings and interactive elements -->
46
- <div class="absolute bottom-0 left-0 right-0 h-2/3">
47
- <!-- Bakery -->
48
- <div class="building bakery absolute left-1/4 bottom-0 w-40 h-64 bg-red-100 rounded-t-lg border-2 border-red-300 cursor-pointer transform hover:scale-105 transition" onclick="visitLocation('bakery')">
49
- <div class="roof bg-red-500 h-8 rounded-t-lg"></div>
50
- <div class="sign text-xs font-bold bg-white p-1 text-center -mt-2">La Boulangerie</div>
51
- </div>
52
-
53
- <!-- Market -->
54
- <div class="building market absolute left-1/2 bottom-0 w-48 h-72 bg-green-100 rounded-t-lg border-2 border-green-300 cursor-pointer transform hover:scale-105 transition" onclick="visitLocation('market')">
55
- <div class="roof bg-green-600 h-10 rounded-t-lg"></div>
56
- <div class="sign text-xs font-bold bg-white p-1 text-center -mt-2">March茅 de No毛l</div>
57
- </div>
58
-
59
- <!-- Hotel -->
60
- <div class="building hotel absolute right-1/4 bottom-0 w-44 h-80 bg-blue-100 rounded-t-lg border-2 border-blue-300 cursor-pointer transform hover:scale-105 transition" onclick="visitLocation('hotel')">
61
- <div class="roof bg-blue-500 h-12 rounded-t-lg"></div>
62
- <div class="sign text-xs font-bold bg-white p-1 text-center -mt-2">H么tel de Ville</div>
63
- </div>
64
  </div>
65
 
66
- <!-- Character animations -->
67
- <div class="character absolute bottom-20 left-1/4 w-12 h-16 bg-yellow-100 rounded-t-full animate-bounce">
68
- <div class="head w-8 h-8 bg-yellow-200 rounded-full mx-auto -mt-4"></div>
 
 
 
 
 
 
 
 
69
  </div>
70
 
71
- <!-- Story panel -->
72
- <div class="story-panel absolute bottom-4 left-4 right-4 bg-white bg-opacity-90 rounded-lg shadow-lg p-4 max-w-2xl mx-auto border-t-4 border-primary">
73
- <h2 class="text-xl font-bold text-primary mb-2" id="chapter-title">Chapter 1: The Arrival</h2>
74
- <p class="text-gray-700" id="story-text">
75
- You've just arrived in the charming French town of No毛lville. As you step off the train, the scent of chestnuts fills the air. An elderly man approaches you with a smile and says: "<span class="font-bold text-secondary">Bienvenue 脿 No毛lville!</span>" (Welcome to No毛lville!). This begins your 25-day language immersion adventure.
76
- </p>
77
- <div class="mt-4 flex gap-2">
78
- <button class="btn btn-primary" id="continue-story">
79
- <i data-feather="play-circle" class="mr-2"></i> Continue
80
- </button>
81
- <button class="btn btn-secondary" id="ask-question">
82
- <i data-feather="help-circle" class="mr-2"></i> Help
83
- </button>
84
  </div>
85
  </div>
86
- </div>
87
- </div>
88
- <div class="grid gap-6 md:grid-cols-3">
89
- <!-- Left Column: Story & Chat -->
90
- <div class="md:col-span-2">
91
- <div class="card overflow-hidden">
92
- <!-- Story Container -->
93
- <div class="bg-secondary text-white p-4">
94
- <div class="flex items-center justify-between">
95
- <h2 class="text-2xl font-bold flex items-center">
96
- <i data-feather="book-open" class="mr-3"></i>
97
- Today's Story Chapter
98
- </h2>
99
- <span class="bg-white text-secondary px-4 py-1 rounded-full font-bold" id="chapter-title">Chapter 1: The Arrival</span>
100
- </div>
101
- </div>
102
- <div class="p-4">
103
- <div class="mb-4">
104
- <div class="flex flex-col sm:flex-row gap-4 mb-4">
105
- <img src="http://static.photos/travel/640x360/101" alt="European Town" class="w-16 h-16 sm:w-24 sm:h-24 rounded-full object-cover border-2 border-primary">
106
- <div>
107
- <h3 class="text-xl font-bold text-primary">Welcome to No毛lville!</h3>
108
- <p class="text-gray-700 mt-2" id="story-text">
109
- You've just arrived in the charming French town of No毛lville. As you step off the train, the scent of chestnuts fills the air. An elderly man approaches you with a smile and says: "<span class="font-bold text-secondary">Bienvenue 脿 No毛lville!</span>" (Welcome to No毛lville!). This begins your 25-day language immersion adventure.
110
- </p>
111
- </div>
112
- </div>
113
- <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 my-4">
114
- <div class="flex">
115
- <i data-feather="alert-circle" class="text-yellow-500 mr-3"></i>
116
- <div>
117
- <p class="font-bold text-yellow-700">Today's Mission</p>
118
- <p id="daily-mission">Learn basic greetings and introduce yourself to three townspeople.</p>
119
- </div>
120
- </div>
121
- </div>
122
  </div>
123
- <!-- Interactive Chat -->
124
- <div class="border border-divider rounded-lg p-4">
125
- <h4 class="font-semibold text-gray-700 mb-3 flex items-center gap-2">
126
- <i data-feather="message-square"></i>
127
- <span>Interactive Story Chat</span>
128
- </h4>
129
- <div class="h-48 overflow-y-auto mb-4 p-2 bg-gray-50 rounded-lg" id="story-chat">
130
- <!-- Messages will be inserted here -->
131
- <div class="flex items-start space-x-3 mb-4">
132
- <div class="bg-primary rounded-full p-2">
133
- <i data-feather="user" class="text-white"></i>
134
- </div>
135
- <div class="bg-gray-100 rounded-2xl px-4 py-2 max-w-xs">
136
- <p class="font-medium">Bonjour! Je m'appelle [Your Name].</p>
137
- <p class="text-xs text-gray-500 mt-1">You said</p>
138
- </div>
139
- </div>
140
- <div class="flex items-start space-x-3 mb-4">
141
- <div class="bg-secondary rounded-full p-2">
142
- <i data-feather="user-check" class="text-white"></i>
143
- </div>
144
- <div class="bg-blue-50 rounded-2xl px-4 py-2 max-w-xs">
145
- <p class="font-medium">Ah, enchant茅! Moi, c'est Pierre. Comment allez-vous?</p>
146
- <p class="text-xs text-gray-500 mt-1">Pierre the Baker</p>
147
- </div>
148
- </div>
149
- </div>
150
- <div class="flex gap-2">
151
- <button class="flex-1 btn btn-primary" id="continue-story">
152
- <i data-feather="play-circle" class="mr-2"></i> Continue Story
153
- </button>
154
- <button class="flex-1 btn btn-secondary" id="ask-question">
155
- <i data-feather="help-circle" class="mr-2"></i> Ask for Help
156
- </button>
157
- </div>
158
- </div>
159
- </div>
160
- </div>
161
-
162
- <!-- Character Profiles -->
163
- <div class="bg-white rounded-2xl shadow-lg p-6">
164
- <h3 class="text-xl font-bold text-primary mb-4 flex items-center">
165
- <i data-feather="users" class="mr-2"></i>
166
- Characters You'll Meet
167
- </h3>
168
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="character-profiles">
169
- <!-- Characters will be loaded dynamically -->
170
  </div>
171
  </div>
172
  </div>
173
-
174
- <!-- Right Column: Calendar & Progress -->
175
- <div class="lg:col-span-1">
176
- <!-- Advent Calendar -->
177
- <div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-8">
178
- <div class="bg-primary text-white p-6">
179
- <h2 class="text-2xl font-bold flex items-center">
180
- <i data-feather="calendar" class="mr-3"></i>
181
- Advent Calendar
182
- </h2>
183
- <p class="opacity-90 mt-1">Unlock a new chapter each day</p>
184
- </div>
185
- <div class="p-6">
186
- <div class="grid grid-cols-5 gap-3" id="calendar-days">
187
- <!-- Calendar days will be generated by JavaScript -->
188
- </div>
189
- <div class="mt-6">
190
- <div class="flex items-center justify-between mb-2">
191
- <span class="text-sm font-medium">Story Progress</span>
192
- <span class="text-sm font-bold" id="progress-percent">4%</span>
193
- </div>
194
- <div class="w-full bg-gray-200 rounded-full h-2.5">
195
- <div class="bg-secondary h-2.5 rounded-full" id="progress-bar" style="width: 4%"></div>
196
- </div>
197
- </div>
198
- </div>
199
- </div>
200
-
201
- <!-- Language Progress -->
202
- <div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-8">
203
- <div class="bg-secondary text-white p-6">
204
- <h2 class="text-2xl font-bold flex items-center">
205
- <i data-feather="trending-up" class="mr-3"></i>
206
- Your Language Progress
207
- </h2>
208
- </div>
209
- <div class="p-6">
210
- <div class="space-y-4">
211
- <div>
212
- <div class="flex justify-between mb-1">
213
- <span class="font-medium">Vocabulary</span>
214
- <span class="font-bold text-primary">5/100 words</span>
215
- </div>
216
- <div class="w-full bg-gray-200 rounded-full h-2">
217
- <div class="bg-primary h-2 rounded-full" style="width: 5%"></div>
218
- </div>
219
- </div>
220
- <div>
221
- <div class="flex justify-between mb-1">
222
- <span class="font-medium">Grammar</span>
223
- <span class="font-bold text-secondary">2/25 concepts</span>
224
- </div>
225
- <div class="w-full bg-gray-200 rounded-full h-2">
226
- <div class="bg-secondary h-2 rounded-full" style="width: 8%"></div>
227
- </div>
228
- </div>
229
- <div>
230
- <div class="flex justify-between mb-1">
231
- <span class="font-medium">Pronunciation</span>
232
- <span class="font-bold text-accent">1/20 exercises</span>
233
- </div>
234
- <div class="w-full bg-gray-200 rounded-full h-2">
235
- <div class="bg-accent h-2 rounded-full" style="width: 5%"></div>
236
- </div>
237
- </div>
238
- </div>
239
- <div class="mt-6 text-center">
240
- <p class="text-sm text-gray-600">Complete today's chapter to unlock Day 2 tomorrow!</p>
241
- </div>
242
- </div>
243
  </div>
244
-
245
- <!-- Quick Actions -->
246
- <div class="bg-white rounded-2xl shadow-lg p-6">
247
- <h3 class="font-bold text-gray-800 mb-4">Story Actions</h3>
248
- <div class="space-y-3">
249
- <a href="/vocabulary.html" class="flex items-center p-3 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition">
250
- <i data-feather="book" class="mr-3"></i>
251
- <div>
252
- <p class="font-medium">Today's Vocabulary</p>
253
- <p class="text-sm">5 new words</p>
254
- </div>
255
- </a>
256
- <a href="/characters.html" class="flex items-center p-3 bg-green-50 text-green-700 rounded-lg hover:bg-green-100 transition">
257
- <i data-feather="users" class="mr-3"></i>
258
- <div>
259
- <p class="font-medium">Meet Characters</p>
260
- <p class="text-sm">3 people to talk to</p>
261
- </div>
262
- </a>
263
- <a href="/map.html" class="flex items-center p-3 bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition">
264
- <i data-feather="map" class="mr-3"></i>
265
- <div>
266
- <p class="font-medium">Explore No毛lville</p>
267
- <p class="text-sm">Interactive map</p>
268
- </div>
269
- </a>
270
- </div>
271
  </div>
272
  </div>
273
  </div>
274
- </main>
275
- <custom-footer></custom-footer>
276
- <!-- Components -->
277
- <script src="components/header.js"></script>
278
- <script src="components/footer.js"></script>
279
- <!-- Floating Action Button -->
280
- <floating-action></floating-action>
281
- <script src="components/floating-action.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
282
  <script src="script.js"></script>
283
  <script>
284
  feather.replace();
285
  </script>
286
- <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
287
  </body>
288
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Lingua Noel - Mobile Adventure</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
 
9
  <link rel="stylesheet" href="style.css">
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11
  <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#C62828',
17
+ secondary: '#388E3C',
18
+ accent: '#D32F2F',
19
+ background: '#FFF3E0',
20
+ text: '#263238',
21
+ },
22
+ fontFamily: {
23
+ sans: ['Inter', 'sans-serif']
24
+ }
25
+ }
26
  }
 
27
  }
 
28
  </script>
29
  </head>
30
+ <body class="bg-background font-sans">
31
+ <!-- App Container -->
32
+ <div id="app" class="relative min-h-screen overflow-hidden">
33
+ <!-- Main Views -->
34
+ <div id="home-view" class="view active">
35
+ <!-- Town Background -->
36
+ <div class="town-background relative h-screen">
37
+ <!-- Snow overlay -->
38
+ <div id="snow-overlay" class="absolute inset-0 pointer-events-none"></div>
 
 
 
 
 
 
 
 
39
 
40
+ <!-- Character at bottom -->
41
+ <div class="character absolute bottom-0 left-1/2 transform -translate-x-1/2 w-24 h-32">
42
+ <img src="http://static.photos/people/320x240/50" alt="Adventurer" class="w-full h-full object-contain">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  </div>
44
 
45
+ <!-- Location Buttons -->
46
+ <div class="absolute bottom-32 left-0 right-0 flex justify-around px-4">
47
+ <button class="location-btn bg-red-100 p-3 rounded-full shadow-lg" data-location="bakery">
48
+ <img src="http://static.photos/food/200x200/10" alt="Bakery" class="w-12 h-12 rounded-full object-cover">
49
+ </button>
50
+ <button class="location-btn bg-green-100 p-3 rounded-full shadow-lg" data-location="market">
51
+ <img src="http://static.photos/retail/200x200/15" alt="Market" class="w-12 h-12 rounded-full object-cover">
52
+ </button>
53
+ <button class="location-btn bg-blue-100 p-3 rounded-full shadow-lg" data-location="hotel">
54
+ <img src="http://static.photos/workspace/200x200/20" alt="Hotel" class="w-12 h-12 rounded-full object-cover">
55
+ </button>
56
  </div>
57
 
58
+ <!-- Day Counter -->
59
+ <div class="absolute top-4 right-4 bg-white bg-opacity-90 rounded-full p-3 shadow-lg">
60
+ <div class="text-center">
61
+ <div class="text-xl font-bold text-primary">Day <span id="current-day">1</span>/25</div>
 
 
 
 
 
 
 
 
 
62
  </div>
63
  </div>
64
+
65
+ <!-- Story Panel -->
66
+ <div class="story-panel">
67
+ <div class="bg-white bg-opacity-90 rounded-t-2xl p-4 shadow-lg">
68
+ <h2 class="text-lg font-bold text-primary mb-1" id="chapter-title">Chapter 1: The Arrival</h2>
69
+ <p class="text-sm text-gray-700 mb-2" id="story-text">
70
+ You've just arrived in No毛lville! An elderly man approaches: "<span class="font-bold text-secondary">Bienvenue!</span>"
71
+ </p>
72
+ <div class="flex gap-2">
73
+ <button class="btn btn-primary flex-1 text-sm py-2" id="continue-story">
74
+ Continue
75
+ </button>
76
+ <button class="btn btn-secondary flex-1 text-sm py-2" id="ask-question">
77
+ Help
78
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
  </div>
81
  </div>
82
  </div>
83
+ </div>
84
+
85
+ <!-- Location Views (initially hidden) -->
86
+ <div id="bakery-view" class="view hidden">
87
+ <div class="location-view bg-red-50">
88
+ <div class="h-40 bg-red-200 relative">
89
+ <img src="http://static.photos/food/640x360/10" alt="Bakery" class="w-full h-full object-cover">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </div>
91
+ <div class="p-4">
92
+ <h2 class="text-xl font-bold text-primary">Pierre's Bakery</h2>
93
+ <p class="text-sm mb-4">Learn food vocabulary and ordering phrases</p>
94
+ <button class="btn btn-primary w-full mb-2" data-lesson="food">Start Lesson</button>
95
+ <button class="btn btn-outline w-full" data-back>Back to Town</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  </div>
97
  </div>
98
  </div>
99
+
100
+ <!-- Other views would follow the same pattern -->
101
+
102
+ <!-- Bottom Navigation -->
103
+ <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around p-2">
104
+ <button class="nav-btn active" data-view="home">
105
+ <i data-feather="home"></i>
106
+ <span class="text-xs">Town</span>
107
+ </button>
108
+ <button class="nav-btn" data-view="vocabulary">
109
+ <i data-feather="book"></i>
110
+ <span class="text-xs">Vocabulary</span>
111
+ </button>
112
+ <button class="nav-btn" data-view="characters">
113
+ <i data-feather="users"></i>
114
+ <span class="text-xs">People</span>
115
+ </button>
116
+ <button class="nav-btn" data-view="progress">
117
+ <i data-feather="award"></i>
118
+ <span class="text-xs">Progress</span>
119
+ </button>
120
+ </nav>
121
+ </div>
122
+
123
  <script src="script.js"></script>
124
  <script>
125
  feather.replace();
126
  </script>
 
127
  </body>
128
  </html>
script.js CHANGED
@@ -1,65 +1,104 @@
1
 
2
  document.addEventListener('DOMContentLoaded', () => {
3
- // Create snowflakes
4
  createSnowflakes();
5
-
6
- // Story functionality
7
  initializeStory();
8
-
9
- // Calendar generation
10
- generateCalendar();
11
-
12
- // Character profiles
13
- loadCharacters();
14
-
15
- // Story continuation
16
  document.getElementById('continue-story')?.addEventListener('click', continueStory);
17
  document.getElementById('ask-question')?.addEventListener('click', askQuestion);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
 
19
- function initializeStory() {
20
- // Set current day (in a real app, this would come from user progress)
21
- const currentDay = 1;
22
- document.getElementById('current-day').textContent = currentDay;
23
-
24
- // Update progress
25
- const progressPercent = Math.min(100, (currentDay / 25) * 100);
26
- document.getElementById('progress-percent').textContent = Math.round(progressPercent) + '%';
27
- document.getElementById('progress-bar').style.width = progressPercent + '%';
28
-
29
- // Chapter titles based on day
30
- const chapterTitles = [
31
- "Chapter 1: The Arrival",
32
- "Chapter 2: The Baker's Secret",
33
- "Chapter 3: Market Mystery",
34
- "Chapter 4: Getting Around",
35
- "Chapter 5: Hotel Check-in",
36
- "Chapter 6: Caf茅 Culture",
37
- "Chapter 7: Weekly Review",
38
- "Chapter 8: Grocery Shopping",
39
- "Chapter 9: Post Office Visit",
40
- "Chapter 10: Doctor's Visit",
41
- "Chapter 11: Public Transport",
42
- "Chapter 12: Restaurant Night",
43
- "Chapter 13: Shopping Spree",
44
- "Chapter 14: Weekly Review",
45
- "Chapter 15: Carol Singing",
46
- "Chapter 16: Tree Decorating",
47
- "Chapter 17: Gift Wrapping",
48
- "Chapter 18: Winter Sports",
49
- "Chapter 19: Holiday Cooking",
50
- "Chapter 20: Town Celebration",
51
- "Chapter 21: Weekly Review",
52
- "Chapter 22: Storytelling",
53
- "Chapter 23: Local Legends",
54
- "Chapter 24: Christmas Eve",
55
- "Chapter 25: Farewell"
56
- ];
57
- if (document.getElementById('chapter-title')) {
58
- document.getElementById('chapter-title').textContent = chapterTitles[currentDay - 1] || "Chapter 1: The Arrival";
59
- }
60
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
61
 
62
- function generateCalendar() {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  const calendarDays = document.getElementById('calendar-days');
64
  if (!calendarDays) return;
65
 
 
1
 
2
  document.addEventListener('DOMContentLoaded', () => {
3
+ // Initialize app
4
  createSnowflakes();
 
 
5
  initializeStory();
6
+ setupNavigation();
7
+
8
+ // Event listeners
 
 
 
 
 
9
  document.getElementById('continue-story')?.addEventListener('click', continueStory);
10
  document.getElementById('ask-question')?.addEventListener('click', askQuestion);
11
+
12
+ // Location buttons
13
+ document.querySelectorAll('.location-btn').forEach(btn => {
14
+ btn.addEventListener('click', () => {
15
+ const location = btn.dataset.location;
16
+ showLocation(location);
17
+ });
18
+ });
19
+
20
+ // Back buttons
21
+ document.querySelectorAll('[data-back]').forEach(btn => {
22
+ btn.addEventListener('click', showHomeView);
23
+ });
24
+ });
25
+
26
+ function setupNavigation() {
27
+ // Handle bottom nav clicks
28
+ document.querySelectorAll('.nav-btn').forEach(btn => {
29
+ btn.addEventListener('click', () => {
30
+ const view = btn.dataset.view;
31
+ showView(view);
32
+
33
+ // Update active state
34
+ document.querySelectorAll('.nav-btn').forEach(navBtn => {
35
+ navBtn.classList.remove('active');
36
+ });
37
+ btn.classList.add('active');
38
+ });
39
+ });
40
+ }
41
+
42
+ function showView(viewName) {
43
+ // Hide all views
44
+ document.querySelectorAll('.view').forEach(view => {
45
+ view.classList.add('hidden');
46
+ view.classList.remove('active');
47
+ });
48
 
49
+ // Show selected view
50
+ const view = document.getElementById(`${viewName}-view`);
51
+ if (view) {
52
+ view.classList.remove('hidden');
53
+ view.classList.add('active');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  }
55
+ }
56
+
57
+ function showHomeView() {
58
+ showView('home');
59
+ document.querySelector('[data-view="home"]').classList.add('active');
60
+ }
61
+
62
+ function showLocation(location) {
63
+ showView(location);
64
+ }
65
+ function initializeStory() {
66
+ const currentDay = 1;
67
+ document.getElementById('current-day').textContent = currentDay;
68
 
69
+ const chapterTitles = [
70
+ "Chapter 1: The Arrival",
71
+ "Chapter 2: The Baker's Secret",
72
+ "Chapter 3: Market Mystery",
73
+ "Chapter 4: Getting Around",
74
+ "Chapter 5: Hotel Check-in",
75
+ "Chapter 6: Caf茅 Culture",
76
+ "Chapter 7: Weekly Review",
77
+ "Chapter 8: Grocery Shopping",
78
+ "Chapter 9: Post Office Visit",
79
+ "Chapter 10: Doctor's Visit",
80
+ "Chapter 11: Public Transport",
81
+ "Chapter 12: Restaurant Night",
82
+ "Chapter 13: Shopping Spree",
83
+ "Chapter 14: Weekly Review",
84
+ "Chapter 15: Carol Singing",
85
+ "Chapter 16: Tree Decorating",
86
+ "Chapter 17: Gift Wrapping",
87
+ "Chapter 18: Winter Sports",
88
+ "Chapter 19: Holiday Cooking",
89
+ "Chapter 20: Town Celebration",
90
+ "Chapter 21: Weekly Review",
91
+ "Chapter 22: Storytelling",
92
+ "Chapter 23: Local Legends",
93
+ "Chapter 24: Christmas Eve",
94
+ "Chapter 25: Farewell"
95
+ ];
96
+
97
+ if (document.getElementById('chapter-title')) {
98
+ document.getElementById('chapter-title').textContent = chapterTitles[currentDay - 1] || "Chapter 1: The Arrival";
99
+ }
100
+ }
101
+ function generateCalendar() {
102
  const calendarDays = document.getElementById('calendar-days');
103
  if (!calendarDays) return;
104
 
style.css CHANGED
@@ -17,15 +17,15 @@ body {
17
  margin: 0;
18
  padding: 0;
19
  overflow-x: hidden;
 
20
  }
21
-
22
  .town-background {
23
  background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 100%);
24
  position: relative;
25
  width: 100%;
26
- min-height: 100vh;
 
27
  }
28
-
29
  .town-container {
30
  max-width: 1200px;
31
  margin: 0 auto;
@@ -53,12 +53,76 @@ body {
53
  height: 8px;
54
  background: rgba(0,0,0,0.1);
55
  }
 
 
 
 
 
 
 
56
 
57
  .story-panel {
 
 
 
 
58
  z-index: 10;
59
  backdrop-filter: blur(5px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  }
61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  /* Snowflakes */
63
  .snowflake {
64
  position: absolute;
 
17
  margin: 0;
18
  padding: 0;
19
  overflow-x: hidden;
20
+ padding-bottom: 60px; /* Space for bottom nav */
21
  }
 
22
  .town-background {
23
  background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 100%);
24
  position: relative;
25
  width: 100%;
26
+ height: calc(100vh - 60px);
27
+ overflow: hidden;
28
  }
 
29
  .town-container {
30
  max-width: 1200px;
31
  margin: 0 auto;
 
53
  height: 8px;
54
  background: rgba(0,0,0,0.1);
55
  }
56
+ .view {
57
+ display: none;
58
+ }
59
+
60
+ .view.active {
61
+ display: block;
62
+ }
63
 
64
  .story-panel {
65
+ position: absolute;
66
+ bottom: 60px;
67
+ left: 0;
68
+ right: 0;
69
  z-index: 10;
70
  backdrop-filter: blur(5px);
71
+ width: 100%;
72
+ }
73
+
74
+ .location-view {
75
+ height: calc(100vh - 60px);
76
+ overflow-y: auto;
77
+ }
78
+
79
+ .nav-btn {
80
+ display: flex;
81
+ flex-direction: column;
82
+ align-items: center;
83
+ padding: 8px;
84
+ color: #6b7280;
85
+ transition: all 0.3s;
86
+ }
87
+
88
+ .nav-btn.active {
89
+ color: var(--primary);
90
  }
91
 
92
+ .nav-btn i {
93
+ width: 24px;
94
+ height: 24px;
95
+ margin-bottom: 4px;
96
+ }
97
+
98
+ .btn {
99
+ display: inline-flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ padding: 0.5rem 1rem;
103
+ border-radius: 0.5rem;
104
+ font-weight: 500;
105
+ transition: all 0.2s ease;
106
+ cursor: pointer;
107
+ border: none;
108
+ font-size: 0.875rem;
109
+ }
110
+
111
+ .btn-primary {
112
+ background-color: var(--primary);
113
+ color: white;
114
+ }
115
+
116
+ .btn-secondary {
117
+ background-color: var(--secondary);
118
+ color: white;
119
+ }
120
+
121
+ .btn-outline {
122
+ background: transparent;
123
+ border: 1px solid var(--primary);
124
+ color: var(--primary);
125
+ }
126
  /* Snowflakes */
127
  .snowflake {
128
  position: absolute;