Hugging Face's logo

Spaces:
kubodimo0
/
langpal-practice
Running

App Files Community
kubodimo0 commited on
Commit
e3de2c7
·
verified ·
1 Parent(s): c7ba073

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +670 -277
index.html CHANGED
@@ -3,340 +3,733 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>LinguaTalk - Language Practice App</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
-
12
- body {
13
- font-family: 'Poppins', sans-serif;
14
- background-color: #f8f9fa;
15
  }
16
-
17
- .gradient-bg {
18
- background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
 
 
 
 
 
 
 
19
  }
20
 
21
- .speech-bubble {
22
- position: relative;
23
- background: white;
24
- border-radius: 1rem;
25
- padding: 1rem;
26
- margin: 1rem 0;
27
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
28
  }
29
-
30
- .user-bubble {
31
- background: #e3f2fd;
32
- align-self: flex-end;
33
  }
34
 
35
- .bot-bubble {
36
- background: white;
37
- align-self: flex-start;
38
  }
39
-
40
- .recording-animation {
41
- animation: pulse 1.5s infinite;
42
  }
43
-
44
- @keyframes pulse {
45
- 0% { opacity: 1; }
46
- 50% { opacity: 0.5; }
47
- 100% { opacity: 1; }
48
  }
49
-
50
- .progress-ring {
51
- transition: stroke-dashoffset 0.35s;
52
- transform: rotate(-90deg);
53
- transform-origin: 50% 50%;
54
  }
55
  </style>
56
  </head>
57
- <body class="max-w-md mx-auto bg-gray-50 min-h-screen flex flex-col">
58
- <!-- Header -->
59
- <header class="gradient-bg text-white p-4 rounded-b-3xl shadow-lg">
60
- <div class="flex justify-between items-center">
61
- <button class="p-2 rounded-full bg-white bg-opacity-20">
62
- <i class="fas fa-bars text-white"></i>
63
- </button>
64
- <div class="text-center">
65
- <h1 class="text-xl font-bold">LinguaTalk</h1>
66
- <p class="text-xs opacity-80">Conversation Practice</p>
 
 
 
 
 
 
67
  </div>
68
- <button class="p-2 rounded-full bg-white bg-opacity-20">
69
- <i class="fas fa-user text-white"></i>
70
- </button>
71
- </div>
72
-
73
- <div class="mt-4 flex justify-between items-center">
74
- <div>
75
- <p class="text-sm opacity-90">Current language:</p>
76
- <div class="flex items-center mt-1">
77
- <span class="font-bold">English</span>
78
- <i class="fas fa-chevron-down ml-2 text-xs"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  </div>
80
  </div>
81
- <div class="flex space-x-2">
82
- <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs flex items-center">
83
- <i class="fas fa-trophy mr-1"></i> 125
84
- </button>
85
- <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs flex items-center">
86
- <i class="fas fa-fire mr-1"></i> 7-day streak
 
87
  </button>
88
  </div>
89
- </div>
90
- </header>
91
-
92
- <!-- Main Content -->
93
- <main class="flex-1 p-4 overflow-y-auto">
94
- <!-- Lesson Progress -->
95
- <div class="bg-white rounded-xl shadow p-4 mb-4">
96
- <div class="flex justify-between items-center mb-2">
97
- <h2 class="font-bold text-gray-700">Daily Conversation</h2>
98
- <span class="text-xs text-blue-500">2/5 completed</span>
99
- </div>
100
- <div class="w-full bg-gray-200 rounded-full h-2">
101
- <div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div>
 
 
 
 
 
102
  </div>
103
  </div>
104
 
105
- <!-- Conversation Area -->
106
- <div class="bg-white rounded-xl shadow p-4 mb-4">
107
- <h3 class="font-semibold text-gray-700 mb-3">Practice: Ordering Food</h3>
 
 
 
 
 
 
 
 
 
108
 
109
- <div class="flex flex-col space-y-2 max-h-96 overflow-y-auto p-2">
110
- <!-- Bot Message -->
111
- <div class="flex items-start space-x-2">
112
- <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
113
- <i class="fas fa-robot text-blue-500 text-sm"></i>
114
- </div>
115
- <div class="speech-bubble bot-bubble">
116
- <p>Hello! Welcome to our restaurant. What would you like to order today?</p>
117
- <button class="mt-2 text-blue-500 text-xs flex items-center">
118
- <i class="fas fa-volume-up mr-1"></i> Listen
119
- </button>
 
120
  </div>
121
  </div>
122
 
123
- <!-- User Message -->
124
- <div class="flex items-start space-x-2 justify-end">
125
- <div class="speech-bubble user-bubble">
126
- <p>I would like to order a pizza, please.</p>
127
- <div class="flex justify-between items-center mt-2">
128
- <span class="text-xs text-green-500 flex items-center">
129
- <i class="fas fa-check-circle mr-1"></i> 85%
130
- </span>
131
- <button class="text-blue-500 text-xs">
132
- <i class="fas fa-redo"></i>
133
- </button>
134
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </div>
136
- <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
137
- <i class="fas fa-user text-white text-sm"></i>
138
  </div>
139
  </div>
140
 
141
- <!-- Bot Message -->
142
- <div class="flex items-start space-x-2">
143
- <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
144
- <i class="fas fa-robot text-blue-500 text-sm"></i>
145
- </div>
146
- <div class="speech-bubble bot-bubble">
147
- <p>Great choice! What size would you like for your pizza?</p>
148
- <div class="mt-2 flex space-x-2">
149
- <button class="text-blue-500 text-xs flex items-center">
150
- <i class="fas fa-volume-up mr-1"></i> Listen
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
151
  </button>
152
- <button class="text-gray-500 text-xs flex items-center">
153
- <i class="fas fa-lightbulb mr-1"></i> Hint
154
  </button>
155
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156
  </div>
157
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
158
 
159
- <!-- Suggested Responses -->
160
- <div class="bg-blue-50 rounded-lg p-3 mt-2">
161
- <p class="text-xs text-gray-600 mb-2">Try saying:</p>
162
- <div class="flex flex-wrap gap-2">
163
- <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">Medium, please</button>
164
- <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">I'd like a large pizza</button>
165
- <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">Small size is fine</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
166
  </div>
167
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </div>
169
  </div>
170
 
171
- <!-- Pronunciation Feedback -->
172
- <div class="bg-white rounded-xl shadow p-4 mb-4">
173
- <h3 class="font-semibold text-gray-700 mb-3">Pronunciation Feedback</h3>
174
- <div class="flex items-center justify-between">
175
- <div class="flex items-center space-x-2">
176
- <div class="relative">
177
- <svg class="w-16 h-16">
178
- <circle
179
- class="text-gray-200"
180
- stroke-width="6"
181
- stroke="currentColor"
182
- fill="transparent"
183
- r="30"
184
- cx="32"
185
- cy="32"
186
- />
187
- <circle
188
- class="text-green-500 progress-ring"
189
- stroke-width="6"
190
- stroke-linecap="round"
191
- stroke="currentColor"
192
- fill="transparent"
193
- r="30"
194
- cx="32"
195
- cy="32"
196
- stroke-dasharray="188.49555921538757"
197
- stroke-dashoffset="28.274333882308138"
198
- />
199
- </svg>
200
- <span class="absolute inset-0 flex items-center justify-center text-sm font-bold">85%</span>
201
  </div>
202
- <div>
203
- <p class="text-sm font-medium">Good job!</p>
204
- <p class="text-xs text-gray-500">Focus on "medium" pronunciation</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
205
  </div>
206
  </div>
207
- <button class="text-blue-500 text-sm flex items-center">
208
- <i class="fas fa-info-circle mr-1"></i> Details
209
- </button>
210
- </div>
211
- </div>
212
- </main>
213
-
214
- <!-- Footer with Recording Controls -->
215
- <footer class="bg-white border-t border-gray-200 p-4 shadow-lg">
216
- <div class="flex flex-col items-center">
217
- <!-- Recording Indicator -->
218
- <div id="recordingIndicator" class="hidden mb-2 text-red-500 text-sm flex items-center">
219
- <div class="w-2 h-2 rounded-full bg-red-500 mr-1 recording-animation"></div>
220
- Recording...
221
  </div>
222
 
223
- <!-- Main Recording Button -->
224
- <button id="recordButton" class="w-16 h-16 rounded-full bg-blue-500 text-white flex items-center justify-center shadow-lg hover:bg-blue-600 transition-all">
225
- <i class="fas fa-microphone text-xl"></i>
226
- </button>
227
-
228
- <!-- Secondary Controls -->
229
- <div class="flex justify-between w-full mt-4 px-4">
230
- <button class="p-2 rounded-full bg-gray-100 text-gray-600">
231
- <i class="fas fa-keyboard"></i>
232
- </button>
233
- <button class="p-2 rounded-full bg-gray-100 text-gray-600">
234
- <i class="fas fa-translate"></i>
235
- </button>
236
- <button class="p-2 rounded-full bg-gray-100 text-gray-600">
237
- <i class="fas fa-question-circle"></i>
238
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
239
  </div>
240
  </div>
241
- </footer>
242
-
243
- <script>
244
- // Toggle recording state
245
- const recordButton = document.getElementById('recordButton');
246
- const recordingIndicator = document.getElementById('recordingIndicator');
247
 
248
- recordButton.addEventListener('click', function() {
249
- if (recordingIndicator.classList.contains('hidden')) {
250
- // Start recording
251
- recordingIndicator.classList.remove('hidden');
252
- recordButton.innerHTML = '<i class="fas fa-stop text-xl"></i>';
253
- recordButton.classList.remove('bg-blue-500');
254
- recordButton.classList.add('bg-red-500');
255
- } else {
256
- // Stop recording
257
- recordingIndicator.classList.add('hidden');
258
- recordButton.innerHTML = '<i class="fas fa-microphone text-xl"></i>';
259
- recordButton.classList.remove('bg-red-500');
260
- recordButton.classList.add('bg-blue-500');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
261
 
262
- // Simulate processing
263
- setTimeout(() => {
264
- // Add new user message to conversation
265
- const conversationArea = document.querySelector('.flex.flex-col.space-y-2');
266
- const newMessage = document.createElement('div');
267
- newMessage.className = 'flex items-start space-x-2 justify-end';
268
- newMessage.innerHTML = `
269
- <div class="speech-bubble user-bubble">
270
- <p>Medium, please</p>
271
- <div class="flex justify-between items-center mt-2">
272
- <span class="text-xs text-green-500 flex items-center">
273
- <i class="fas fa-check-circle mr-1"></i> 92%
274
- </span>
275
- <button class="text-blue-500 text-xs">
276
- <i class="fas fa-redo"></i>
277
- </button>
278
- </div>
279
  </div>
280
- <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
281
- <i class="fas fa-user text-white text-sm"></i>
 
282
  </div>
283
- `;
284
- conversationArea.appendChild(newMessage);
 
 
285
 
286
- // Scroll to bottom
287
- conversationArea.scrollTop = conversationArea.scrollHeight;
 
 
 
 
 
 
 
 
 
 
 
 
 
288
 
289
- // Simulate bot response after delay
290
- setTimeout(() => {
291
- const botResponse = document.createElement('div');
292
- botResponse.className = 'flex items-start space-x-2';
293
- botResponse.innerHTML = `
294
- <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
295
- <i class="fas fa-robot text-blue-500 text-sm"></i>
296
- </div>
297
- <div class="speech-bubble bot-bubble">
298
- <p>Excellent! Would you like any drinks with that?</p>
299
- <div class="mt-2 flex space-x-2">
300
- <button class="text-blue-500 text-xs flex items-center">
301
- <i class="fas fa-volume-up mr-1"></i> Listen
302
- </button>
303
- <button class="text-gray-500 text-xs flex items-center">
304
- <i class="fas fa-lightbulb mr-1"></i> Hint
305
- </button>
306
- </div>
307
- </div>
308
- `;
309
- conversationArea.appendChild(botResponse);
310
-
311
- // Add new suggested responses
312
- const suggestedResponses = document.createElement('div');
313
- suggestedResponses.className = 'bg-blue-50 rounded-lg p-3 mt-2';
314
- suggestedResponses.innerHTML = `
315
- <p class="text-xs text-gray-600 mb-2">Try saying:</p>
316
- <div class="flex flex-wrap gap-2">
317
- <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">Just water, please</button>
318
- <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">I'll have a soda</button>
319
- <button class="px-3 py-1 bg-white rounded-full text-xs shadow-sm">No drinks, thanks</button>
320
- </div>
321
- `;
322
- conversationArea.appendChild(suggestedResponses);
323
-
324
- // Scroll to bottom
325
- conversationArea.scrollTop = conversationArea.scrollHeight;
326
- }, 1500);
327
- }, 1000);
328
- }
329
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
330
 
331
- // Add click handlers for suggested responses
332
- document.addEventListener('click', function(e) {
333
- if (e.target.classList.contains('shadow-sm')) {
334
- // Simulate the user selecting a suggested response
335
- recordButton.click(); // Start recording
336
- setTimeout(() => {
337
- recordButton.click(); // Stop recording
338
- }, 500);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
340
  });
341
  </script>
342
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=kubodimo0/langpal-practice" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LangPal - Language Practice App</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ /* Custom CSS for calendar dots */
11
+ .calendar-day {
12
+ position: relative;
 
 
13
  }
14
+ .calendar-day.practiced::after {
15
+ content: '';
16
+ position: absolute;
17
+ bottom: 2px;
18
+ left: 50%;
19
+ transform: translateX(-50%);
20
+ width: 6px;
21
+ height: 6px;
22
+ border-radius: 50%;
23
+ background-color: #3b82f6;
24
  }
25
 
26
+ /* Animation for conversation bubbles */
27
+ @keyframes fadeIn {
28
+ from { opacity: 0; transform: translateY(10px); }
29
+ to { opacity: 1; transform: translateY(0); }
 
 
 
30
  }
31
+ .conversation-bubble {
32
+ animation: fadeIn 0.3s ease-out;
 
 
33
  }
34
 
35
+ /* Custom scrollbar */
36
+ ::-webkit-scrollbar {
37
+ width: 5px;
38
  }
39
+ ::-webkit-scrollbar-track {
40
+ background: #f1f1f1;
 
41
  }
42
+ ::-webkit-scrollbar-thumb {
43
+ background: #888;
44
+ border-radius: 10px;
 
 
45
  }
46
+ ::-webkit-scrollbar-thumb:hover {
47
+ background: #555;
 
 
 
48
  }
49
  </style>
50
  </head>
51
+ <body class="bg-gray-100 font-sans">
52
+ <!-- App Container -->
53
+ <div class="max-w-md mx-auto bg-white min-h-screen flex flex-col overflow-hidden">
54
+ <!-- Screen 1: Home -->
55
+ <div id="home-screen" class="flex-1 flex flex-col">
56
+ <!-- Header -->
57
+ <div class="p-4 flex justify-between items-start">
58
+ <div>
59
+ <h1 class="text-2xl font-bold">Hi, LP</h1>
60
+ <p class="text-gray-500">How's your day?</p>
61
+ </div>
62
+ <div class="flex items-center bg-blue-100 rounded-full px-3 py-1">
63
+ <i class="fas fa-fire text-orange-500 mr-2"></i>
64
+ <span class="font-semibold">7</span>
65
+ <span class="text-gray-600 ml-1">/30</span>
66
+ </div>
67
  </div>
68
+
69
+ <!-- Calendar -->
70
+ <div class="p-4 bg-white rounded-lg shadow mx-4 mt-2">
71
+ <div class="flex justify-between items-center mb-4">
72
+ <h2 class="font-semibold">November 2023</h2>
73
+ <div class="flex space-x-2">
74
+ <button class="p-1 rounded-full hover:bg-gray-100">
75
+ <i class="fas fa-chevron-left"></i>
76
+ </button>
77
+ <button class="p-1 rounded-full hover:bg-gray-100">
78
+ <i class="fas fa-chevron-right"></i>
79
+ </button>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="grid grid-cols-7 gap-1 text-center">
84
+ <div class="text-gray-400 text-sm font-medium py-1">S</div>
85
+ <div class="text-gray-400 text-sm font-medium py-1">M</div>
86
+ <div class="text-gray-400 text-sm font-medium py-1">T</div>
87
+ <div class="text-gray-400 text-sm font-medium py-1">W</div>
88
+ <div class="text-gray-400 text-sm font-medium py-1">T</div>
89
+ <div class="text-gray-400 text-sm font-medium py-1">F</div>
90
+ <div class="text-gray-400 text-sm font-medium py-1">S</div>
91
+
92
+ <!-- Calendar days -->
93
+ <div class="calendar-day py-2"></div>
94
+ <div class="calendar-day py-2"></div>
95
+ <div class="calendar-day py-2"></div>
96
+ <div class="calendar-day py-2"></div>
97
+ <div class="calendar-day py-2"></div>
98
+ <div class="calendar-day py-2"></div>
99
+ <div class="calendar-day py-2 practiced">1</div>
100
+
101
+ <div class="calendar-day py-2 practiced">2</div>
102
+ <div class="calendar-day py-2 practiced">3</div>
103
+ <div class="calendar-day py-2">4</div>
104
+ <div class="calendar-day py-2 practiced">5</div>
105
+ <div class="calendar-day py-2">6</div>
106
+ <div class="calendar-day py-2 practiced">7</div>
107
+ <div class="calendar-day py-2">8</div>
108
+
109
+ <div class="calendar-day py-2">9</div>
110
+ <div class="calendar-day py-2 practiced">10</div>
111
+ <div class="calendar-day py-2 practiced">11</div>
112
+ <div class="calendar-day py-2">12</div>
113
+ <div class="calendar-day py-2">13</div>
114
+ <div class="calendar-day py-2 practiced">14</div>
115
+ <div class="calendar-day py-2">15</div>
116
+
117
+ <div class="calendar-day py-2">16</div>
118
+ <div class="calendar-day py-2">17</div>
119
+ <div class="calendar-day py-2 practiced">18</div>
120
+ <div class="calendar-day py-2">19</div>
121
+ <div class="calendar-day py-2">20</div>
122
+ <div class="calendar-day py-2">21</div>
123
+ <div class="calendar-day py-2">22</div>
124
+
125
+ <div class="calendar-day py-2">23</div>
126
+ <div class="calendar-day py-2">24</div>
127
+ <div class="calendar-day py-2">25</div>
128
+ <div class="calendar-day py-2">26</div>
129
+ <div class="calendar-day py-2">27</div>
130
+ <div class="calendar-day py-2">28</div>
131
+ <div class="calendar-day py-2">29</div>
132
+
133
+ <div class="calendar-day py-2">30</div>
134
+ <div class="calendar-day py-2"></div>
135
+ <div class="calendar-day py-2"></div>
136
+ <div class="calendar-day py-2"></div>
137
+ <div class="calendar-day py-2"></div>
138
+ <div class="calendar-day py-2"></div>
139
+ <div class="calendar-day py-2"></div>
140
  </div>
141
  </div>
142
+
143
+ <!-- Daily Challenge -->
144
+ <div class="p-4 mt-4 mx-4 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow text-white">
145
+ <h3 class="font-bold text-lg mb-2">Daily Challenge</h3>
146
+ <p class="mb-4">Complete a 5-minute conversation practice</p>
147
+ <button class="bg-white text-blue-600 font-semibold px-4 py-2 rounded-full">
148
+ Start Now
149
  </button>
150
  </div>
151
+
152
+ <!-- Progress Stats -->
153
+ <div class="p-4 mt-4 mx-4 bg-white rounded-lg shadow">
154
+ <h3 class="font-bold text-lg mb-2">Your Progress</h3>
155
+ <div class="flex justify-between text-center">
156
+ <div>
157
+ <div class="text-2xl font-bold text-blue-600">12</div>
158
+ <div class="text-gray-500 text-sm">Conversations</div>
159
+ </div>
160
+ <div>
161
+ <div class="text-2xl font-bold text-blue-600">87%</div>
162
+ <div class="text-gray-500 text-sm">Accuracy</div>
163
+ </div>
164
+ <div>
165
+ <div class="text-2xl font-bold text-blue-600">5:32</div>
166
+ <div class="text-gray-500 text-sm">Avg. time</div>
167
+ </div>
168
+ </div>
169
  </div>
170
  </div>
171
 
172
+ <!-- Screen 2: Conversations -->
173
+ <div id="conversations-screen" class="flex-1 flex flex-col hidden">
174
+ <!-- Header -->
175
+ <div class="p-4 border-b">
176
+ <h1 class="text-2xl font-bold">Conversations</h1>
177
+ <div class="flex mt-2">
178
+ <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full mr-2 text-sm">All</button>
179
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full mr-2 text-sm">Travel</button>
180
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full mr-2 text-sm">Business</button>
181
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Social</button>
182
+ </div>
183
+ </div>
184
 
185
+ <!-- Conversation List -->
186
+ <div class="flex-1 overflow-y-auto">
187
+ <div class="p-4 border-b flex items-center">
188
+ <div class="bg-blue-100 p-3 rounded-full mr-3">
189
+ <i class="fas fa-utensils text-blue-600"></i>
190
+ </div>
191
+ <div class="flex-1">
192
+ <h3 class="font-semibold">At the Restaurant</h3>
193
+ <p class="text-gray-500 text-sm">Ordering food and drinks</p>
194
+ </div>
195
+ <div class="text-gray-400">
196
+ <i class="fas fa-chevron-right"></i>
197
  </div>
198
  </div>
199
 
200
+ <div class="p-4 border-b flex items-center">
201
+ <div class="bg-green-100 p-3 rounded-full mr-3">
202
+ <i class="fas fa-hotel text-green-600"></i>
203
+ </div>
204
+ <div class="flex-1">
205
+ <h3 class="font-semibold">Hotel Check-in</h3>
206
+ <p class="text-gray-500 text-sm">Checking into a hotel</p>
207
+ </div>
208
+ <div class="text-gray-400">
209
+ <i class="fas fa-chevron-right"></i>
210
+ </div>
211
+ </div>
212
+
213
+ <div class="p-4 border-b flex items-center">
214
+ <div class="bg-purple-100 p-3 rounded-full mr-3">
215
+ <i class="fas fa-briefcase text-purple-600"></i>
216
+ </div>
217
+ <div class="flex-1">
218
+ <h3 class="font-semibold">Job Interview</h3>
219
+ <p class="text-gray-500 text-sm">Common interview questions</p>
220
+ </div>
221
+ <div class="text-gray-400">
222
+ <i class="fas fa-chevron-right"></i>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="p-4 border-b flex items-center">
227
+ <div class="bg-yellow-100 p-3 rounded-full mr-3">
228
+ <i class="fas fa-shopping-bag text-yellow-600"></i>
229
+ </div>
230
+ <div class="flex-1">
231
+ <h3 class="font-semibold">Shopping</h3>
232
+ <p class="text-gray-500 text-sm">Asking about prices and sizes</p>
233
  </div>
234
+ <div class="text-gray-400">
235
+ <i class="fas fa-chevron-right"></i>
236
  </div>
237
  </div>
238
 
239
+ <div class="p-4 border-b flex items-center">
240
+ <div class="bg-red-100 p-3 rounded-full mr-3">
241
+ <i class="fas fa-plane text-red-600"></i>
242
+ </div>
243
+ <div class="flex-1">
244
+ <h3 class="font-semibold">Airport</h3>
245
+ <p class="text-gray-500 text-sm">Checking in and boarding</p>
246
+ </div>
247
+ <div class="text-gray-400">
248
+ <i class="fas fa-chevron-right"></i>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Practice Modal -->
254
+ <div id="practice-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
255
+ <div class="bg-white rounded-lg w-full mx-4 max-h-[80vh] overflow-hidden">
256
+ <div class="p-4 border-b flex justify-between items-center">
257
+ <h2 class="font-bold text-lg">At the Restaurant</h2>
258
+ <button onclick="hideModal('practice-modal')" class="text-gray-500">
259
+ <i class="fas fa-times"></i>
260
+ </button>
261
+ </div>
262
+
263
+ <div class="p-4">
264
+ <h3 class="font-semibold mb-2">Choose your role:</h3>
265
+ <div class="flex space-x-4 mb-4">
266
+ <button class="flex-1 bg-blue-100 text-blue-600 py-2 rounded-lg font-medium">
267
+ Customer
268
  </button>
269
+ <button class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-lg font-medium">
270
+ Waiter
271
  </button>
272
  </div>
273
+
274
+ <h3 class="font-semibold mb-2">Display mode:</h3>
275
+ <div class="flex space-x-4">
276
+ <button class="flex-1 bg-blue-100 text-blue-600 py-2 rounded-lg font-medium">
277
+ Full Script
278
+ </button>
279
+ <button class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-lg font-medium">
280
+ Line by Line
281
+ </button>
282
+ </div>
283
+ </div>
284
+
285
+ <div class="p-4 border-t">
286
+ <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold">
287
+ Start Practice
288
+ </button>
289
  </div>
290
  </div>
291
+ </div>
292
+
293
+ <!-- Conversation Practice Screen -->
294
+ <div id="conversation-practice" class="fixed inset-0 bg-white flex flex-col hidden">
295
+ <!-- Header -->
296
+ <div class="p-4 border-b flex justify-between items-center">
297
+ <button onclick="hideModal('conversation-practice')" class="text-blue-600">
298
+ <i class="fas fa-arrow-left"></i>
299
+ </button>
300
+ <h2 class="font-bold">At the Restaurant</h2>
301
+ <div class="w-6"></div> <!-- Spacer -->
302
+ </div>
303
 
304
+ <!-- Conversation Display -->
305
+ <div class="flex-1 p-4 overflow-y-auto">
306
+ <div class="mb-6">
307
+ <div class="text-center text-gray-500 text-sm mb-2">You are: <span class="font-semibold text-blue-600">Customer</span></div>
308
+ <div class="flex justify-end mb-2">
309
+ <button class="text-blue-600 text-sm font-medium">
310
+ <i class="fas fa-microphone mr-1"></i> Record
311
+ </button>
312
+ </div>
313
+ </div>
314
+
315
+ <div class="space-y-4">
316
+ <!-- Conversation bubbles -->
317
+ <div class="conversation-bubble bg-blue-100 p-3 rounded-lg max-w-[80%] ml-auto">
318
+ <div class="font-semibold text-blue-800 mb-1">You (Customer)</div>
319
+ <p>I'd like to book a table for two, please.</p>
320
+ </div>
321
+
322
+ <div class="conversation-bubble bg-gray-200 p-3 rounded-lg max-w-[80%]">
323
+ <div class="font-semibold text-gray-700 mb-1">Waiter</div>
324
+ <p>Certainly. What time would you like to book for?</p>
325
+ </div>
326
+
327
+ <div class="conversation-bubble bg-blue-100 p-3 rounded-lg max-w-[80%] ml-auto">
328
+ <div class="font-semibold text-blue-800 mb-1">You (Customer)</div>
329
+ <p>7:30 pm would be perfect.</p>
330
+ </div>
331
+
332
+ <div class="conversation-bubble bg-gray-200 p-3 rounded-lg max-w-[80%]">
333
+ <div class="font-semibold text-gray-700 mb-1">Waiter</div>
334
+ <p>And would you prefer indoor or outdoor seating?</p>
335
+ </div>
336
+
337
+ <div class="conversation-bubble bg-blue-100 p-3 rounded-lg max-w-[80%] ml-auto">
338
+ <div class="font-semibold text-blue-800 mb-1">You (Customer)</div>
339
+ <p>Outdoor seating would be lovely, if possible.</p>
340
+ </div>
341
  </div>
342
  </div>
343
+
344
+ <!-- Controls -->
345
+ <div class="p-4 border-t flex justify-between">
346
+ <button class="text-gray-500">
347
+ <i class="fas fa-volume-up text-xl"></i>
348
+ </button>
349
+ <button class="text-gray-500">
350
+ <i class="fas fa-arrow-left text-xl"></i>
351
+ </button>
352
+ <button class="bg-blue-600 text-white p-3 rounded-full">
353
+ <i class="fas fa-microphone text-xl"></i>
354
+ </button>
355
+ <button class="text-gray-500">
356
+ <i class="fas fa-arrow-right text-xl"></i>
357
+ </button>
358
+ <button class="text-gray-500">
359
+ <i class="fas fa-cog text-xl"></i>
360
+ </button>
361
+ </div>
362
  </div>
363
  </div>
364
 
365
+ <!-- Screen 3: Listening Practice -->
366
+ <div id="listening-screen" class="flex-1 flex flex-col hidden">
367
+ <!-- Header -->
368
+ <div class="p-4 border-b">
369
+ <h1 class="text-2xl font-bold">Listening Practice</h1>
370
+ <div class="flex mt-2">
371
+ <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full mr-2 text-sm">All</button>
372
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full mr-2 text-sm">Beginner</button>
373
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full mr-2 text-sm">Intermediate</button>
374
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Advanced</button>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Listening Exercises -->
379
+ <div class="flex-1 overflow-y-auto">
380
+ <div class="p-4 border-b">
381
+ <div class="flex items-start">
382
+ <div class="bg-blue-100 p-3 rounded-full mr-3">
383
+ <i class="fas fa-headphones text-blue-600"></i>
384
+ </div>
385
+ <div class="flex-1">
386
+ <h3 class="font-semibold">Coffee Shop Conversation</h3>
387
+ <p class="text-gray-500 text-sm">Ordering coffee and snacks</p>
388
+ <div class="flex mt-2">
389
+ <span class="bg-gray-100 px-2 py-1 rounded text-xs mr-2">Beginner</span>
390
+ <span class="bg-gray-100 px-2 py-1 rounded text-xs">2:45</span>
391
+ </div>
392
+ </div>
 
 
393
  </div>
394
+ <div class="flex justify-end mt-3 space-x-2">
395
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">
396
+ <i class="fas fa-play mr-1"></i> Listen
397
+ </button>
398
+ <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">
399
+ <i class="fas fa-pencil-alt mr-1"></i> Dictation
400
+ </button>
401
+ </div>
402
+ </div>
403
+
404
+ <div class="p-4 border-b">
405
+ <div class="flex items-start">
406
+ <div class="bg-green-100 p-3 rounded-full mr-3">
407
+ <i class="fas fa-headphones text-green-600"></i>
408
+ </div>
409
+ <div class="flex-1">
410
+ <h3 class="font-semibold">Job Interview</h3>
411
+ <p class="text-gray-500 text-sm">Common questions and answers</p>
412
+ <div class="flex mt-2">
413
+ <span class="bg-gray-100 px-2 py-1 rounded text-xs mr-2">Intermediate</span>
414
+ <span class="bg-gray-100 px-2 py-1 rounded text-xs">4:12</span>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ <div class="flex justify-end mt-3 space-x-2">
419
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">
420
+ <i class="fas fa-play mr-1"></i> Listen
421
+ </button>
422
+ <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">
423
+ <i class="fas fa-pencil-alt mr-1"></i> Dictation
424
+ </button>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="p-4 border-b">
429
+ <div class="flex items-start">
430
+ <div class="bg-purple-100 p-3 rounded-full mr-3">
431
+ <i class="fas fa-headphones text-purple-600"></i>
432
+ </div>
433
+ <div class="flex-1">
434
+ <h3 class="font-semibold">News Report</h3>
435
+ <p class="text-gray-500 text-sm">Daily news highlights</p>
436
+ <div class="flex mt-2">
437
+ <span class="bg-gray-100 px-2 py-1 rounded text-xs mr-2">Advanced</span>
438
+ <span class="bg-gray-100 px-2 py-1 rounded text-xs">3:28</span>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ <div class="flex justify-end mt-3 space-x-2">
443
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">
444
+ <i class="fas fa-play mr-1"></i> Listen
445
+ </button>
446
+ <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">
447
+ <i class="fas fa-pencil-alt mr-1"></i> Dictation
448
+ </button>
449
+ </div>
450
+ </div>
451
+
452
+ <div class="p-4 border-b">
453
+ <div class="flex items-start">
454
+ <div class="bg-yellow-100 p-3 rounded-full mr-3">
455
+ <i class="fas fa-headphones text-yellow-600"></i>
456
+ </div>
457
+ <div class="flex-1">
458
+ <h3 class="font-semibold">Airport Announcement</h3>
459
+ <p class="text-gray-500 text-sm">Flight information</p>
460
+ <div class="flex mt-2">
461
+ <span class="bg-gray-100 px-2 py-1 rounded text-xs mr-2">Beginner</span>
462
+ <span class="bg-gray-100 px-2 py-1 rounded text-xs">1:56</span>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ <div class="flex justify-end mt-3 space-x-2">
467
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">
468
+ <i class="fas fa-play mr-1"></i> Listen
469
+ </button>
470
+ <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">
471
+ <i class="fas fa-pencil-alt mr-1"></i> Dictation
472
+ </button>
473
  </div>
474
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
475
  </div>
476
 
477
+ <!-- Dictation Modal -->
478
+ <div id="dictation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
479
+ <div class="bg-white rounded-lg w-full mx-4 max-h-[80vh] overflow-hidden">
480
+ <div class="p-4 border-b flex justify-between items-center">
481
+ <h2 class="font-bold text-lg">Dictation Practice</h2>
482
+ <button onclick="hideModal('dictation-modal')" class="text-gray-500">
483
+ <i class="fas fa-times"></i>
484
+ </button>
485
+ </div>
486
+
487
+ <div class="p-4 overflow-y-auto" style="max-height: 60vh;">
488
+ <div class="mb-4">
489
+ <div class="flex justify-center mb-4">
490
+ <button class="bg-blue-600 text-white p-3 rounded-full">
491
+ <i class="fas fa-play text-xl"></i>
492
+ </button>
493
+ </div>
494
+ <div class="text-center text-gray-500 mb-2">
495
+ Listen to the audio and type what you hear
496
+ </div>
497
+ <div class="text-center text-sm text-gray-400">
498
+ Segment 1/5 • 0:12 - 0:24
499
+ </div>
500
+ </div>
501
+
502
+ <div class="mb-4">
503
+ <textarea class="w-full p-3 border rounded-lg h-32" placeholder="Type what you hear here..."></textarea>
504
+ </div>
505
+
506
+ <div class="flex justify-between">
507
+ <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg">
508
+ <i class="fas fa-arrow-left mr-2"></i> Previous
509
+ </button>
510
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">
511
+ Check Answer
512
+ </button>
513
+ <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg">
514
+ Next <i class="fas fa-arrow-right ml-2"></i>
515
+ </button>
516
+ </div>
517
+ </div>
518
+ </div>
519
  </div>
520
  </div>
 
 
 
 
 
 
521
 
522
+ <!-- Screen 4: Settings -->
523
+ <div id="settings-screen" class="flex-1 flex flex-col hidden">
524
+ <!-- Header -->
525
+ <div class="p-4 border-b">
526
+ <h1 class="text-2xl font-bold">Settings</h1>
527
+ </div>
528
+
529
+ <!-- Settings List -->
530
+ <div class="flex-1 overflow-y-auto">
531
+ <div class="p-4 border-b">
532
+ <h2 class="font-semibold text-gray-500 mb-2">ACCOUNT</h2>
533
+ <div class="flex items-center py-2">
534
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
535
+ <i class="fas fa-user text-blue-600"></i>
536
+ </div>
537
+ <div class="flex-1">
538
+ <h3 class="font-medium">User Profile</h3>
539
+ <p class="text-gray-500 text-sm">Update your personal information</p>
540
+ </div>
541
+ <div class="text-gray-400">
542
+ <i class="fas fa-chevron-right"></i>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="flex items-center py-2">
547
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
548
+ <i class="fas fa-bell text-green-600"></i>
549
+ </div>
550
+ <div class="flex-1">
551
+ <h3 class="font-medium">Notifications</h3>
552
+ <p class="text-gray-500 text-sm">Manage notification preferences</p>
553
+ </div>
554
+ <div class="text-gray-400">
555
+ <i class="fas fa-chevron-right"></i>
556
+ </div>
557
+ </div>
558
+ </div>
559
 
560
+ <div class="p-4 border-b">
561
+ <h2 class="font-semibold text-gray-500 mb-2">APP SETTINGS</h2>
562
+ <div class="flex items-center py-2">
563
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
564
+ <i class="fas fa-language text-purple-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
565
  </div>
566
+ <div class="flex-1">
567
+ <h3 class="font-medium">Language</h3>
568
+ <p class="text-gray-500 text-sm">English (US)</p>
569
  </div>
570
+ <div class="text-gray-400">
571
+ <i class="fas fa-chevron-right"></i>
572
+ </div>
573
+ </div>
574
 
575
+ <div class="flex items-center py-2">
576
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
577
+ <i class="fas fa-moon text-yellow-600"></i>
578
+ </div>
579
+ <div class="flex-1">
580
+ <h3 class="font-medium">Dark Mode</h3>
581
+ <p class="text-gray-500 text-sm">Off</p>
582
+ </div>
583
+ <div>
584
+ <label class="relative inline-flex items-center cursor-pointer">
585
+ <input type="checkbox" value="" class="sr-only peer">
586
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
587
+ </label>
588
+ </div>
589
+ </div>
590
 
591
+ <div class="flex items-center py-2">
592
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
593
+ <i class="fas fa-volume-up text-red-600"></i>
594
+ </div>
595
+ <div class="flex-1">
596
+ <h3 class="font-medium">Speech Speed</h3>
597
+ <p class="text-gray-500 text-sm">Normal</p>
598
+ </div>
599
+ <div class="text-gray-400">
600
+ <i class="fas fa-chevron-right"></i>
601
+ </div>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="p-4 border-b">
606
+ <h2 class="font-semibold text-gray-500 mb-2">SUPPORT</h2>
607
+ <div class="flex items-center py-2">
608
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
609
+ <i class="fas fa-question-circle text-blue-600"></i>
610
+ </div>
611
+ <div class="flex-1">
612
+ <h3 class="font-medium">Help Center</h3>
613
+ </div>
614
+ <div class="text-gray-400">
615
+ <i class="fas fa-chevron-right"></i>
616
+ </div>
617
+ </div>
618
+
619
+ <div class="flex items-center py-2">
620
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
621
+ <i class="fas fa-envelope text-green-600"></i>
622
+ </div>
623
+ <div class="flex-1">
624
+ <h3 class="font-medium">Contact Us</h3>
625
+ </div>
626
+ <div class="text-gray-400">
627
+ <i class="fas fa-chevron-right"></i>
628
+ </div>
629
+ </div>
630
+
631
+ <div class="flex items-center py-2">
632
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
633
+ <i class="fas fa-star text-purple-600"></i>
634
+ </div>
635
+ <div class="flex-1">
636
+ <h3 class="font-medium">Rate the App</h3>
637
+ </div>
638
+ <div class="text-gray-400">
639
+ <i class="fas fa-chevron-right"></i>
640
+ </div>
641
+ </div>
642
+ </div>
643
+
644
+ <div class="p-4">
645
+ <button class="w-full py-3 border border-gray-300 rounded-lg font-medium text-gray-700">
646
+ Sign Out
647
+ </button>
648
+ </div>
649
+ </div>
650
+ </div>
651
 
652
+ <!-- Bottom Navigation -->
653
+ <div class="border-t flex justify-around items-center py-2 bg-white">
654
+ <button onclick="showScreen('home-screen')" class="flex flex-col items-center p-2 text-blue-600">
655
+ <i class="fas fa-home text-xl"></i>
656
+ <span class="text-xs mt-1">Home</span>
657
+ </button>
658
+ <button onclick="showScreen('conversations-screen')" class="flex flex-col items-center p-2 text-gray-500">
659
+ <i class="fas fa-comments text-xl"></i>
660
+ <span class="text-xs mt-1">Conversations</span>
661
+ </button>
662
+ <button onclick="showScreen('listening-screen')" class="flex flex-col items-center p-2 text-gray-500">
663
+ <i class="fas fa-headphones text-xl"></i>
664
+ <span class="text-xs mt-1">Listening</span>
665
+ </button>
666
+ <button onclick="showScreen('settings-screen')" class="flex flex-col items-center p-2 text-gray-500">
667
+ <i class="fas fa-cog text-xl"></i>
668
+ <span class="text-xs mt-1">Settings</span>
669
+ </button>
670
+ </div>
671
+ </div>
672
+
673
+ <script>
674
+ // Function to show a specific screen and hide others
675
+ function showScreen(screenId) {
676
+ // Hide all screens
677
+ document.querySelectorAll('[id$="-screen"]').forEach(screen => {
678
+ screen.classList.add('hidden');
679
+ });
680
+
681
+ // Show the selected screen
682
+ document.getElementById(screenId).classList.remove('hidden');
683
+
684
+ // Update bottom navigation active state
685
+ const navButtons = document.querySelectorAll('[onclick^="showScreen"]');
686
+ navButtons.forEach(button => {
687
+ if (button.getAttribute('onclick').includes(screenId)) {
688
+ button.classList.remove('text-gray-500');
689
+ button.classList.add('text-blue-600');
690
+ } else {
691
+ button.classList.remove('text-blue-600');
692
+ button.classList.add('text-gray-500');
693
+ }
694
+ });
695
+
696
+ // Special case for conversation practice modal
697
+ if (screenId === 'conversations-screen') {
698
+ // Add click handlers to conversation items
699
+ document.querySelectorAll('#conversations-screen .border-b.flex.items-center').forEach(item => {
700
+ item.addEventListener('click', function() {
701
+ document.getElementById('practice-modal').classList.remove('hidden');
702
+ });
703
+ });
704
  }
705
+ }
706
+
707
+ // Function to show a modal
708
+ function showModal(modalId) {
709
+ document.getElementById(modalId).classList.remove('hidden');
710
+ }
711
+
712
+ // Function to hide a modal
713
+ function hideModal(modalId) {
714
+ document.getElementById(modalId).classList.add('hidden');
715
+ }
716
+
717
+ // Initialize the app with home screen visible
718
+ document.addEventListener('DOMContentLoaded', function() {
719
+ showScreen('home-screen');
720
+
721
+ // Add event listeners for practice modal buttons
722
+ document.querySelector('#practice-modal button.bg-blue-600').addEventListener('click', function() {
723
+ hideModal('practice-modal');
724
+ document.getElementById('conversation-practice').classList.remove('hidden');
725
+ });
726
+
727
+ // Add event listeners for dictation buttons
728
+ document.querySelectorAll('#listening-screen button.bg-blue-100').forEach(button => {
729
+ button.addEventListener('click', function() {
730
+ showModal('dictation-modal');
731
+ });
732
+ });
733
  });
734
  </script>
735
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=kubodimo0/langpal-practice" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>