Hugging Face's logo

Spaces:
MCP-1st-Birthday
/
VoiceSementle
Running

App Files Community
1
SJLee-0525 commited on
Commit
18ef373
Β·
1 Parent(s): 733aedb

[TEST] test37

Browse files
Files changed (2) hide show
  1. docs/tech-stack.html +865 -0
  2. docs/user-guide.html +1015 -0
docs/tech-stack.html ADDED
@@ -0,0 +1,865 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tech Stack - Komentle Voice Challenge</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ /* 메인 ν…Œλ§ˆ 색상 - ν•˜λŠ˜μƒ‰ 계열 */
11
+ --theme-primary: #4db8ff;
12
+ --theme-primary-dark: #2ea3f2;
13
+ --theme-primary-light: #7fcfff;
14
+ --theme-secondary: #5bc0eb;
15
+ --theme-accent: #ff9f43;
16
+ --theme-accent-dark: #e08b2d;
17
+
18
+ /* λ°°κ²½ κ·ΈλΌλ°μ΄μ…˜ 색상 */
19
+ --bg-sky-start: #e8f4fc;
20
+ --bg-sky-end: #f5faff;
21
+ --bg-cloud: #ffffff;
22
+
23
+ /* ν…μŠ€νŠΈ 색상 */
24
+ --text-primary: #2c3e50;
25
+ --text-secondary: #5a7a9a;
26
+ --text-muted: #8ba4bd;
27
+
28
+ /* μƒνƒœ 색상 */
29
+ --success-color: #2ecc71;
30
+ --warning-color: #f39c12;
31
+ --error-color: #e74c3c;
32
+
33
+ /* μΉ΄λ“œ/μ„œν”ΌμŠ€ 색상 */
34
+ --surface-primary: #ffffff;
35
+ --surface-secondary: #f0f7fc;
36
+ --border-color: #c5dae8;
37
+ }
38
+
39
+ * {
40
+ margin: 0;
41
+ padding: 0;
42
+ box-sizing: border-box;
43
+ }
44
+
45
+ body {
46
+ font-family: 'Nunito', 'Comic Neue', 'Helvetica Neue', Arial, sans-serif;
47
+ background: linear-gradient(180deg, #e8f4fc 0%, #f5faff 100%);
48
+ min-height: 100vh;
49
+ color: var(--text-primary);
50
+ line-height: 1.6;
51
+ }
52
+
53
+ /* Layout */
54
+ .container {
55
+ display: flex;
56
+ justify-content: center;
57
+ width: 100vw;
58
+ height: 100vh;
59
+ }
60
+
61
+ /* Sidebar */
62
+ .sidebar {
63
+ width: 260px;
64
+ background: rgba(255, 255, 255, 0.85);
65
+ backdrop-filter: blur(10px);
66
+ border-right: 1px solid var(--border-color);
67
+ padding: 24px;
68
+ height: 100vh;
69
+ overflow-y: auto;
70
+ box-shadow: 2px 0 12px rgba(77, 184, 255, 0.08);
71
+ }
72
+
73
+ .logo {
74
+ font-size: 1.25rem;
75
+ font-weight: 800;
76
+ color: var(--theme-primary-dark);
77
+ text-decoration: none;
78
+ display: flex;
79
+ align-items: center;
80
+ gap: 10px;
81
+ margin-bottom: 32px;
82
+ }
83
+
84
+ .logo-icon {
85
+ width: 40px;
86
+ height: 40px;
87
+ background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
88
+ border-radius: 12px;
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: center;
92
+ color: white;
93
+ font-size: 1.25rem;
94
+ box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
95
+ }
96
+
97
+ .nav-section {
98
+ margin-bottom: 24px;
99
+ }
100
+
101
+ .nav-title {
102
+ font-size: 0.7rem;
103
+ font-weight: 700;
104
+ text-transform: uppercase;
105
+ letter-spacing: 0.08em;
106
+ color: var(--text-muted);
107
+ margin-bottom: 12px;
108
+ padding-left: 4px;
109
+ }
110
+
111
+ .nav-list {
112
+ list-style: none;
113
+ }
114
+
115
+ .nav-item {
116
+ margin-bottom: 4px;
117
+ }
118
+
119
+ .nav-link {
120
+ display: block;
121
+ padding: 10px 14px;
122
+ color: var(--text-secondary);
123
+ text-decoration: none;
124
+ border-radius: 10px;
125
+ font-size: 0.875rem;
126
+ font-weight: 600;
127
+ transition: all 0.2s ease;
128
+ }
129
+
130
+ .nav-link:hover {
131
+ background: rgba(77, 184, 255, 0.1);
132
+ color: var(--theme-primary-dark);
133
+ transform: translateX(4px);
134
+ }
135
+
136
+ .nav-link.active {
137
+ background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
138
+ color: white;
139
+ box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
140
+ }
141
+
142
+ /* Main Content */
143
+ .main {
144
+ flex: 1;
145
+ display: flex;
146
+ justify-content: center;
147
+ padding: 48px;
148
+ overflow-y: auto;
149
+ }
150
+
151
+ .main-container {
152
+ width: 100%;
153
+ max-width: 920px;
154
+ }
155
+
156
+ .page-header {
157
+ margin-bottom: 48px;
158
+ text-align: center;
159
+ }
160
+
161
+ .page-title {
162
+ font-size: 2.5rem;
163
+ font-weight: 800;
164
+ margin-bottom: 16px;
165
+ background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-accent));
166
+ -webkit-background-clip: text;
167
+ -webkit-text-fill-color: transparent;
168
+ background-clip: text;
169
+ }
170
+
171
+ .page-description {
172
+ font-size: 1.1rem;
173
+ color: var(--text-secondary);
174
+ max-width: 600px;
175
+ margin: 0 auto;
176
+ }
177
+
178
+ /* Section */
179
+ .section {
180
+ margin-bottom: 48px;
181
+ }
182
+
183
+ .section-title {
184
+ font-size: 1.4rem;
185
+ font-weight: 700;
186
+ margin-bottom: 24px;
187
+ padding-bottom: 12px;
188
+ border-bottom: 2px solid var(--border-color);
189
+ display: flex;
190
+ align-items: center;
191
+ gap: 12px;
192
+ color: var(--text-primary);
193
+ }
194
+
195
+ .section-icon {
196
+ width: 42px;
197
+ height: 42px;
198
+ border-radius: 12px;
199
+ display: flex;
200
+ align-items: center;
201
+ justify-content: center;
202
+ font-size: 1.25rem;
203
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
204
+ }
205
+
206
+ .section-icon.frontend { background: linear-gradient(135deg, #4db8ff, #7fcfff); }
207
+ .section-icon.backend { background: linear-gradient(135deg, #2ecc71, #58d68d); }
208
+ .section-icon.database { background: linear-gradient(135deg, #9b59b6, #bb8fce); }
209
+ .section-icon.ai { background: linear-gradient(135deg, #ff9f43, #ffc87c); }
210
+ .section-icon.audio { background: linear-gradient(135deg, #e74c3c, #ec7063); }
211
+ .section-icon.tools { background: linear-gradient(135deg, #5a7a9a, #8ba4bd); }
212
+
213
+ /* Tech Cards */
214
+ .tech-grid {
215
+ display: grid;
216
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
217
+ gap: 16px;
218
+ }
219
+
220
+ .tech-card {
221
+ background: rgba(255, 255, 255, 0.9);
222
+ backdrop-filter: blur(10px);
223
+ border: 1px solid var(--border-color);
224
+ border-radius: 16px;
225
+ padding: 20px;
226
+ transition: all 0.25s ease;
227
+ box-shadow: 0 4px 16px rgba(77, 184, 255, 0.08);
228
+ }
229
+
230
+ .tech-card:hover {
231
+ border-color: var(--theme-primary-light);
232
+ box-shadow: 0 8px 24px rgba(77, 184, 255, 0.15);
233
+ transform: translateY(-4px);
234
+ }
235
+
236
+ .tech-header {
237
+ display: flex;
238
+ align-items: center;
239
+ gap: 12px;
240
+ margin-bottom: 12px;
241
+ }
242
+
243
+ .tech-icon {
244
+ width: 44px;
245
+ height: 44px;
246
+ border-radius: 12px;
247
+ display: flex;
248
+ align-items: center;
249
+ justify-content: center;
250
+ font-weight: 700;
251
+ font-size: 0.875rem;
252
+ color: white;
253
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
254
+ }
255
+
256
+ .tech-name {
257
+ font-weight: 700;
258
+ font-size: 1rem;
259
+ color: var(--text-primary);
260
+ }
261
+
262
+ .tech-version {
263
+ font-size: 0.7rem;
264
+ font-weight: 600;
265
+ color: var(--theme-primary-dark);
266
+ background: rgba(77, 184, 255, 0.15);
267
+ padding: 3px 10px;
268
+ border-radius: 20px;
269
+ margin-left: auto;
270
+ }
271
+
272
+ .tech-description {
273
+ font-size: 0.85rem;
274
+ color: var(--text-secondary);
275
+ line-height: 1.5;
276
+ }
277
+
278
+ /* Architecture Section */
279
+ .architecture-diagram {
280
+ background: rgba(255, 255, 255, 0.9);
281
+ backdrop-filter: blur(10px);
282
+ border: 1px solid var(--border-color);
283
+ border-radius: 20px;
284
+ padding: 40px;
285
+ margin-top: 24px;
286
+ box-shadow: 0 4px 24px rgba(77, 184, 255, 0.1);
287
+ }
288
+
289
+ .arch-flow {
290
+ display: flex;
291
+ align-items: center;
292
+ justify-content: center;
293
+ gap: 24px;
294
+ flex-wrap: wrap;
295
+ }
296
+
297
+ .arch-box {
298
+ background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
299
+ color: white;
300
+ padding: 24px 36px;
301
+ border-radius: 16px;
302
+ text-align: center;
303
+ min-width: 140px;
304
+ box-shadow: 0 8px 24px rgba(77, 184, 255, 0.3);
305
+ transition: transform 0.2s ease;
306
+ }
307
+
308
+ .arch-box:hover {
309
+ transform: scale(1.05);
310
+ }
311
+
312
+ .arch-box.secondary {
313
+ background: linear-gradient(135deg, var(--success-color), #58d68d);
314
+ box-shadow: 0 8px 24px rgba(46, 204, 113, 0.3);
315
+ }
316
+
317
+ .arch-box.tertiary {
318
+ background: linear-gradient(135deg, var(--theme-accent), #ffc87c);
319
+ box-shadow: 0 8px 24px rgba(255, 159, 67, 0.3);
320
+ }
321
+
322
+ .arch-box-title {
323
+ font-weight: 700;
324
+ font-size: 1.1rem;
325
+ margin-bottom: 4px;
326
+ }
327
+
328
+ .arch-box-sub {
329
+ font-size: 0.8rem;
330
+ opacity: 0.9;
331
+ }
332
+
333
+ .arch-arrow {
334
+ font-size: 2rem;
335
+ color: var(--theme-primary);
336
+ font-weight: 300;
337
+ }
338
+
339
+ /* On This Page */
340
+ .toc {
341
+ position: fixed;
342
+ right: 48px;
343
+ top: 48px;
344
+ width: 180px;
345
+ background: rgba(255, 255, 255, 0.85);
346
+ backdrop-filter: blur(10px);
347
+ border-radius: 16px;
348
+ padding: 20px;
349
+ border: 1px solid var(--border-color);
350
+ box-shadow: 0 4px 16px rgba(77, 184, 255, 0.08);
351
+ }
352
+
353
+ .toc-title {
354
+ font-size: 0.7rem;
355
+ font-weight: 700;
356
+ text-transform: uppercase;
357
+ letter-spacing: 0.08em;
358
+ color: var(--text-muted);
359
+ margin-bottom: 12px;
360
+ }
361
+
362
+ .toc-list {
363
+ list-style: none;
364
+ }
365
+
366
+ .toc-item {
367
+ margin-bottom: 8px;
368
+ }
369
+
370
+ .toc-link {
371
+ font-size: 0.8rem;
372
+ font-weight: 600;
373
+ color: var(--text-muted);
374
+ text-decoration: none;
375
+ transition: all 0.2s;
376
+ }
377
+
378
+ .toc-link:hover {
379
+ color: var(--theme-primary-dark);
380
+ }
381
+
382
+ /* Back Button */
383
+ .back-btn {
384
+ display: inline-flex;
385
+ align-items: center;
386
+ gap: 8px;
387
+ padding: 12px 24px;
388
+ background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
389
+ color: white;
390
+ text-decoration: none;
391
+ border-radius: 12px;
392
+ font-weight: 700;
393
+ font-size: 0.9rem;
394
+ box-shadow: 0 4px 16px rgba(77, 184, 255, 0.3);
395
+ transition: all 0.2s ease;
396
+ margin-bottom: 32px;
397
+ }
398
+
399
+ .back-btn:hover {
400
+ transform: translateY(-2px);
401
+ box-shadow: 0 6px 20px rgba(77, 184, 255, 0.4);
402
+ }
403
+
404
+ /* Color coding for tech icons */
405
+ .icon-gradio { background: linear-gradient(135deg, #ff9f43, #ffc87c); }
406
+ .icon-python { background: linear-gradient(135deg, #3776ab, #5a9fd4); }
407
+ .icon-fastapi { background: linear-gradient(135deg, #009688, #4db6ac); }
408
+ .icon-postgres { background: linear-gradient(135deg, #336791, #5a8bb0); }
409
+ .icon-gemini { background: linear-gradient(135deg, #4285f4, #7baaf7); }
410
+ .icon-docker { background: linear-gradient(135deg, #2496ed, #61b0f1); }
411
+ .icon-numpy { background: linear-gradient(135deg, #013243, #4dabcf); }
412
+ .icon-pydub { background: linear-gradient(135deg, #e91e63, #f06292); }
413
+
414
+ /* Responsive */
415
+ @media (max-width: 1300px) {
416
+ .toc {
417
+ display: none;
418
+ }
419
+ }
420
+
421
+ @media (max-width: 768px) {
422
+ .sidebar {
423
+ display: none;
424
+ }
425
+ .main {
426
+ margin-left: 0;
427
+ padding: 24px 16px;
428
+ }
429
+ .page-title {
430
+ font-size: 1.75rem;
431
+ }
432
+ .arch-flow {
433
+ flex-direction: column;
434
+ }
435
+ .arch-arrow {
436
+ transform: rotate(90deg);
437
+ }
438
+ .tech-grid {
439
+ grid-template-columns: 1fr;
440
+ }
441
+ }
442
+
443
+ /* Floating clouds animation */
444
+ .cloud {
445
+ position: fixed;
446
+ background: rgba(255, 255, 255, 0.6);
447
+ border-radius: 50%;
448
+ filter: blur(20px);
449
+ opacity: 0.5;
450
+ animation: float 20s infinite ease-in-out;
451
+ pointer-events: none;
452
+ z-index: -1;
453
+ }
454
+
455
+ .cloud-1 {
456
+ width: 200px;
457
+ height: 100px;
458
+ top: 10%;
459
+ left: 5%;
460
+ animation-delay: 0s;
461
+ }
462
+
463
+ .cloud-2 {
464
+ width: 150px;
465
+ height: 80px;
466
+ top: 30%;
467
+ right: 10%;
468
+ animation-delay: -5s;
469
+ }
470
+
471
+ .cloud-3 {
472
+ width: 180px;
473
+ height: 90px;
474
+ bottom: 20%;
475
+ left: 15%;
476
+ animation-delay: -10s;
477
+ }
478
+
479
+ @keyframes float {
480
+ 0%, 100% { transform: translateY(0) translateX(0); }
481
+ 25% { transform: translateY(-20px) translateX(10px); }
482
+ 50% { transform: translateY(0) translateX(20px); }
483
+ 75% { transform: translateY(20px) translateX(10px); }
484
+ }
485
+ </style>
486
+ </head>
487
+ <body>
488
+ <!-- Floating clouds -->
489
+ <div class="cloud cloud-1"></div>
490
+ <div class="cloud cloud-2"></div>
491
+ <div class="cloud cloud-3"></div>
492
+
493
+ <div class="container">
494
+ <!-- Sidebar -->
495
+ <nav class="sidebar">
496
+ <a href="#" class="logo">
497
+ <div class="logo-icon">K</div>
498
+ Komentle
499
+ </a>
500
+
501
+ <div class="nav-section">
502
+ <div class="nav-title">Overview</div>
503
+ <ul class="nav-list">
504
+ <li class="nav-item">
505
+ <a href="#" class="nav-link active">Tech Stack</a>
506
+ </li>
507
+ <li class="nav-item">
508
+ <a href="#architecture" class="nav-link">Architecture</a>
509
+ </li>
510
+ </ul>
511
+ </div>
512
+
513
+ <div class="nav-section">
514
+ <div class="nav-title">Frontend</div>
515
+ <ul class="nav-list">
516
+ <li class="nav-item">
517
+ <a href="#frontend" class="nav-link">Gradio UI</a>
518
+ </li>
519
+ </ul>
520
+ </div>
521
+
522
+ <div class="nav-section">
523
+ <div class="nav-title">Backend</div>
524
+ <ul class="nav-list">
525
+ <li class="nav-item">
526
+ <a href="#backend" class="nav-link">FastAPI Server</a>
527
+ </li>
528
+ <li class="nav-item">
529
+ <a href="#database" class="nav-link">Database</a>
530
+ </li>
531
+ </ul>
532
+ </div>
533
+
534
+ <div class="nav-section">
535
+ <div class="nav-title">AI / ML</div>
536
+ <ul class="nav-list">
537
+ <li class="nav-item">
538
+ <a href="#ai" class="nav-link">Voice Analysis</a>
539
+ </li>
540
+ <li class="nav-item">
541
+ <a href="#audio" class="nav-link">Audio Processing</a>
542
+ </li>
543
+ </ul>
544
+ </div>
545
+
546
+ <div class="nav-section">
547
+ <div class="nav-title">DevOps</div>
548
+ <ul class="nav-list">
549
+ <li class="nav-item">
550
+ <a href="#tools" class="nav-link">Tools</a>
551
+ </li>
552
+ </ul>
553
+ </div>
554
+ </nav>
555
+
556
+ <!-- Main Content -->
557
+ <main class="main">
558
+ <div class="main-container">
559
+
560
+ <a href="javascript:history.back()" class="back-btn">
561
+ ← Back to App
562
+ </a>
563
+
564
+ <header class="page-header">
565
+ <h1 class="page-title">Tech Stack</h1>
566
+ <p class="page-description">
567
+ Komentle Voice Challenge에 μ‚¬μš©λœ 기술 μŠ€νƒμž…λ‹ˆλ‹€.
568
+ μŒμ„± 기반 발음 검증 ν€΄μ¦ˆ κ²Œμž„μ„ μœ„ν•œ ν’€μŠ€νƒ κ΅¬μ„±μ΄μ—μš”.
569
+ </p>
570
+ </header>
571
+
572
+ <!-- Architecture -->
573
+ <section id="architecture" class="section">
574
+ <h2 class="section-title">
575
+ <span class="section-icon tools">πŸ—οΈ</span>
576
+ System Architecture
577
+ </h2>
578
+ <div class="architecture-diagram">
579
+ <div class="arch-flow">
580
+ <div class="arch-box">
581
+ <div class="arch-box-title">Client</div>
582
+ <div class="arch-box-sub">Gradio 6.0</div>
583
+ </div>
584
+ <span class="arch-arrow">β†’</span>
585
+ <div class="arch-box secondary">
586
+ <div class="arch-box-title">Backend</div>
587
+ <div class="arch-box-sub">FastAPI</div>
588
+ </div>
589
+ <span class="arch-arrow">β†’</span>
590
+ <div class="arch-box tertiary">
591
+ <div class="arch-box-title">AI Engine</div>
592
+ <div class="arch-box-sub">Google Gemini</div>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </section>
597
+
598
+ <!-- Frontend -->
599
+ <section id="frontend" class="section">
600
+ <h2 class="section-title">
601
+ <span class="section-icon frontend">🎨</span>
602
+ Frontend
603
+ </h2>
604
+ <div class="tech-grid">
605
+ <div class="tech-card">
606
+ <div class="tech-header">
607
+ <div class="tech-icon icon-gradio">Gr</div>
608
+ <span class="tech-name">Gradio</span>
609
+ <span class="tech-version">6.0.0</span>
610
+ </div>
611
+ <p class="tech-description">
612
+ Python 기반 UI ν”„λ ˆμž„μ›Œν¬. μŒμ„± μž…λ ₯, μ‹€μ‹œκ°„ ν”Όλ“œλ°±, κ²Œμž„ ν™”λ©΄ μ „ν™˜ λ“± μΈν„°λž™ν‹°λΈŒν•œ μ›Ή μΈν„°νŽ˜μ΄μŠ€ κ΅¬ν˜„
613
+ </p>
614
+ </div>
615
+ <div class="tech-card">
616
+ <div class="tech-header">
617
+ <div class="tech-icon icon-python">Py</div>
618
+ <span class="tech-name">Python</span>
619
+ <span class="tech-version">3.11</span>
620
+ </div>
621
+ <p class="tech-description">
622
+ ν΄λΌμ΄μ–ΈνŠΈ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ 개발 μ–Έμ–΄. 타�� νžŒνŒ…κ³Ό async/await νŒ¨ν„΄ ν™œμš©
623
+ </p>
624
+ </div>
625
+ <div class="tech-card">
626
+ <div class="tech-header">
627
+ <div class="tech-icon" style="background: linear-gradient(135deg, #4fc3f7, #81d4fa);">Hx</div>
628
+ <span class="tech-name">HTTPX</span>
629
+ <span class="tech-version">0.28.1</span>
630
+ </div>
631
+ <p class="tech-description">
632
+ 비동기 HTTP ν΄λΌμ΄μ–ΈνŠΈ. λ°±μ—”λ“œ APIμ™€μ˜ 톡신 λ‹΄λ‹Ή
633
+ </p>
634
+ </div>
635
+ </div>
636
+ </section>
637
+
638
+ <!-- Backend -->
639
+ <section id="backend" class="section">
640
+ <h2 class="section-title">
641
+ <span class="section-icon backend">⚑</span>
642
+ Backend
643
+ </h2>
644
+ <div class="tech-grid">
645
+ <div class="tech-card">
646
+ <div class="tech-header">
647
+ <div class="tech-icon icon-fastapi">Fa</div>
648
+ <span class="tech-name">FastAPI</span>
649
+ <span class="tech-version">0.121.3</span>
650
+ </div>
651
+ <p class="tech-description">
652
+ κ³ μ„±λŠ₯ Python μ›Ή ν”„λ ˆμž„μ›Œν¬. REST API μ—”λ“œν¬μΈνŠΈ 제곡, μžλ™ OpenAPI λ¬Έμ„œ 생성
653
+ </p>
654
+ </div>
655
+ <div class="tech-card">
656
+ <div class="tech-header">
657
+ <div class="tech-icon" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">Uv</div>
658
+ <span class="tech-name">Uvicorn</span>
659
+ <span class="tech-version">0.38.0</span>
660
+ </div>
661
+ <p class="tech-description">
662
+ Lightning-fast ASGI μ„œλ²„. 비동기 μš”μ²­ 처리 및 WebSocket 지원
663
+ </p>
664
+ </div>
665
+ <div class="tech-card">
666
+ <div class="tech-header">
667
+ <div class="tech-icon icon-python">Py</div>
668
+ <span class="tech-name">Python</span>
669
+ <span class="tech-version">3.12</span>
670
+ </div>
671
+ <p class="tech-description">
672
+ λ°±μ—”λ“œ μ„œλ²„ 개발 μ–Έμ–΄. μ΅œμ‹  λ²„μ „μ˜ μ„±λŠ₯ μ΅œμ ν™” 및 κΈ°λŠ₯ ν™œμš©
673
+ </p>
674
+ </div>
675
+ <div class="tech-card">
676
+ <div class="tech-header">
677
+ <div class="tech-icon" style="background: linear-gradient(135deg, #ec4899, #f472b6);">Pd</div>
678
+ <span class="tech-name">Pydantic</span>
679
+ <span class="tech-version">2.12.4</span>
680
+ </div>
681
+ <p class="tech-description">
682
+ 데이터 검증 및 μ„€μ • 관리. νƒ€μž… μ•ˆμ „μ„±κ³Ό μžλ™ 직렬화 제곡
683
+ </p>
684
+ </div>
685
+ </div>
686
+ </section>
687
+
688
+ <!-- Database -->
689
+ <section id="database" class="section">
690
+ <h2 class="section-title">
691
+ <span class="section-icon database">πŸ—„οΈ</span>
692
+ Database
693
+ </h2>
694
+ <div class="tech-grid">
695
+ <div class="tech-card">
696
+ <div class="tech-header">
697
+ <div class="tech-icon icon-postgres">Pg</div>
698
+ <span class="tech-name">PostgreSQL</span>
699
+ <span class="tech-version">Latest</span>
700
+ </div>
701
+ <p class="tech-description">
702
+ κ΄€κ³„ν˜• λ°μ΄ν„°λ² μ΄μŠ€. μ‚¬μš©μž μ„Έμ…˜, κ²Œμž„ 기둝, 톡계 데이터 μ €μž₯
703
+ </p>
704
+ </div>
705
+ <div class="tech-card">
706
+ <div class="tech-header">
707
+ <div class="tech-icon" style="background: linear-gradient(135deg, #dc2626, #f87171);">SA</div>
708
+ <span class="tech-name">SQLAlchemy</span>
709
+ <span class="tech-version">2.0.44</span>
710
+ </div>
711
+ <p class="tech-description">
712
+ Python ORM. λ°μ΄ν„°λ² μ΄μŠ€ 좔상화 및 쿼리 λΉŒλ” 제곡
713
+ </p>
714
+ </div>
715
+ </div>
716
+ </section>
717
+
718
+ <!-- AI/ML -->
719
+ <section id="ai" class="section">
720
+ <h2 class="section-title">
721
+ <span class="section-icon ai">πŸ€–</span>
722
+ AI / Machine Learning
723
+ </h2>
724
+ <div class="tech-grid">
725
+ <div class="tech-card">
726
+ <div class="tech-header">
727
+ <div class="tech-icon icon-gemini">Gm</div>
728
+ <span class="tech-name">Google Gemini</span>
729
+ <span class="tech-version">API</span>
730
+ </div>
731
+ <p class="tech-description">
732
+ λ©€ν‹°λͺ¨λ‹¬ AI λͺ¨λΈ. μŒμ„± 뢄석, 발음 평가, μžμ—°μ–΄ ν”Όλ“œλ°± 생성
733
+ </p>
734
+ </div>
735
+ <div class="tech-card">
736
+ <div class="tech-header">
737
+ <div class="tech-icon" style="background: linear-gradient(135deg, #0891b2, #22d3ee);">MC</div>
738
+ <span class="tech-name">MCP</span>
739
+ <span class="tech-version">1.0.0+</span>
740
+ </div>
741
+ <p class="tech-description">
742
+ Model Context Protocol. AI λͺ¨λΈ 톡합 및 μ»¨ν…μŠ€νŠΈ 관리
743
+ </p>
744
+ </div>
745
+ <div class="tech-card">
746
+ <div class="tech-header">
747
+ <div class="tech-icon icon-numpy">Np</div>
748
+ <span class="tech-name">NumPy</span>
749
+ <span class="tech-version">1.26+</span>
750
+ </div>
751
+ <p class="tech-description">
752
+ 수치 계산 라이브러리. μ˜€λ””μ˜€ μ‹ ν˜Έ 처리 및 데이터 뢄석
753
+ </p>
754
+ </div>
755
+ <div class="tech-card">
756
+ <div class="tech-header">
757
+ <div class="tech-icon" style="background: linear-gradient(135deg, #0d9488, #2dd4bf);">Pd</div>
758
+ <span class="tech-name">Pandas</span>
759
+ <span class="tech-version">2.0+</span>
760
+ </div>
761
+ <p class="tech-description">
762
+ 데이터 뢄석 라이브러리. 톡계 처리 및 데이터 μ‘°μž‘
763
+ </p>
764
+ </div>
765
+ </div>
766
+ </section>
767
+
768
+ <!-- Audio Processing -->
769
+ <section id="audio" class="section">
770
+ <h2 class="section-title">
771
+ <span class="section-icon audio">🎡</span>
772
+ Audio Processing
773
+ </h2>
774
+ <div class="tech-grid">
775
+ <div class="tech-card">
776
+ <div class="tech-header">
777
+ <div class="tech-icon icon-pydub">Pd</div>
778
+ <span class="tech-name">PyDub</span>
779
+ <span class="tech-version">0.25.1</span>
780
+ </div>
781
+ <p class="tech-description">
782
+ μ˜€λ””μ˜€ 처리 라이브러리. 포맷 λ³€ν™˜, μ •κ·œν™”, νŽΈμ§‘ κΈ°λŠ₯ 제곡
783
+ </p>
784
+ </div>
785
+ <div class="tech-card">
786
+ <div class="tech-header">
787
+ <div class="tech-icon" style="background: linear-gradient(135deg, #059669, #34d399);">FF</div>
788
+ <span class="tech-name">FFmpeg</span>
789
+ <span class="tech-version">via ffmpy</span>
790
+ </div>
791
+ <p class="tech-description">
792
+ λ©€ν‹°λ―Έλ””μ–΄ ν”„λ ˆμž„μ›Œν¬. μ˜€λ””μ˜€ 인코딩/λ””μ½”λ”© 처리
793
+ </p>
794
+ </div>
795
+ </div>
796
+ </section>
797
+
798
+ <!-- DevOps -->
799
+ <section id="tools" class="section">
800
+ <h2 class="section-title">
801
+ <span class="section-icon tools">πŸ› οΈ</span>
802
+ DevOps & Tools
803
+ </h2>
804
+ <div class="tech-grid">
805
+ <div class="tech-card">
806
+ <div class="tech-header">
807
+ <div class="tech-icon icon-docker">Dk</div>
808
+ <span class="tech-name">Docker</span>
809
+ <span class="tech-version">Latest</span>
810
+ </div>
811
+ <p class="tech-description">
812
+ μ»¨ν…Œμ΄λ„ˆν™” ν”Œλž«νΌ. μΌκ΄€λœ 개발/배포 ν™˜κ²½ 제곡
813
+ </p>
814
+ </div>
815
+ <div class="tech-card">
816
+ <div class="tech-header">
817
+ <div class="tech-icon" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">DC</div>
818
+ <span class="tech-name">Docker Compose</span>
819
+ <span class="tech-version">Latest</span>
820
+ </div>
821
+ <p class="tech-description">
822
+ λ©€ν‹° μ»¨ν…Œμ΄λ„ˆ μ˜€μΌ€μŠ€νŠΈλ ˆμ΄μ…˜. μ„œλΉ„μŠ€ κ°„ λ„€νŠΈμ›Œν¬ 및 λ³Όλ₯¨ 관리
823
+ </p>
824
+ </div>
825
+ <div class="tech-card">
826
+ <div class="tech-header">
827
+ <div class="tech-icon" style="background: linear-gradient(135deg, #fbbf24, #fcd34d);">Pt</div>
828
+ <span class="tech-name">pytest</span>
829
+ <span class="tech-version">Latest</span>
830
+ </div>
831
+ <p class="tech-description">
832
+ ν…ŒμŠ€νŠΈ ν”„λ ˆμž„μ›Œν¬. λ‹¨μœ„ ν…ŒμŠ€νŠΈ 및 톡합 ν…ŒμŠ€νŠΈ μ‹€ν–‰
833
+ </p>
834
+ </div>
835
+ <div class="tech-card">
836
+ <div class="tech-header">
837
+ <div class="tech-icon" style="background: linear-gradient(135deg, #64748b, #94a3b8);">Ev</div>
838
+ <span class="tech-name">python-dotenv</span>
839
+ <span class="tech-version">1.2.1</span>
840
+ </div>
841
+ <p class="tech-description">
842
+ ν™˜κ²½ λ³€μˆ˜ 관리. .env 파일 기반 μ„€μ • λ‘œλ“œ
843
+ </p>
844
+ </div>
845
+ </div>
846
+ </section>
847
+ </div>
848
+ </main>
849
+
850
+ <!-- Table of Contents
851
+ <aside class="toc">
852
+ <div class="toc-title">On This Page</div>
853
+ <ul class="toc-list">
854
+ <li class="toc-item"><a href="#architecture" class="toc-link">Architecture</a></li>
855
+ <li class="toc-item"><a href="#frontend" class="toc-link">Frontend</a></li>
856
+ <li class="toc-item"><a href="#backend" class="toc-link">Backend</a></li>
857
+ <li class="toc-item"><a href="#database" class="toc-link">Database</a></li>
858
+ <li class="toc-item"><a href="#ai" class="toc-link">AI / ML</a></li>
859
+ <li class="toc-item"><a href="#audio" class="toc-link">Audio</a></li>
860
+ <li class="toc-item"><a href="#tools" class="toc-link">DevOps</a></li>
861
+ </ul>
862
+ </aside> -->
863
+ </div>
864
+ </body>
865
+ </html>
docs/user-guide.html ADDED
@@ -0,0 +1,1015 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>User Guide - Komentle Voice Challenge</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ /* Main theme colors - Sky blue palette */
11
+ --theme-primary: #4db8ff;
12
+ --theme-primary-dark: #2ea3f2;
13
+ --theme-primary-light: #7fcfff;
14
+ --theme-secondary: #5bc0eb;
15
+ --theme-accent: #ff9f43;
16
+ --theme-accent-dark: #e08b2d;
17
+
18
+ /* Background gradient colors */
19
+ --bg-sky-start: #e8f4fc;
20
+ --bg-sky-end: #f5faff;
21
+ --bg-cloud: #ffffff;
22
+
23
+ /* Text colors */
24
+ --text-primary: #2c3e50;
25
+ --text-secondary: #5a7a9a;
26
+ --text-muted: #8ba4bd;
27
+
28
+ /* Status colors */
29
+ --success-color: #2ecc71;
30
+ --warning-color: #f39c12;
31
+ --error-color: #e74c3c;
32
+
33
+ /* Card/Surface colors */
34
+ --surface-primary: #ffffff;
35
+ --surface-secondary: #f0f7fc;
36
+ --border-color: #c5dae8;
37
+ }
38
+
39
+ * {
40
+ margin: 0;
41
+ padding: 0;
42
+ box-sizing: border-box;
43
+ }
44
+
45
+ body {
46
+ font-family: 'Nunito', 'Comic Neue', 'Helvetica Neue', Arial, sans-serif;
47
+ background: linear-gradient(180deg, #e8f4fc 0%, #f5faff 100%);
48
+ min-height: 100vh;
49
+ color: var(--text-primary);
50
+ line-height: 1.6;
51
+ }
52
+
53
+ /* Layout */
54
+ .container {
55
+ display: flex;
56
+ justify-content: center;
57
+ width: 100vw;
58
+ min-height: 100vh;
59
+ }
60
+
61
+ /* Sidebar */
62
+ .sidebar {
63
+ width: 260px;
64
+ background: rgba(255, 255, 255, 0.85);
65
+ backdrop-filter: blur(10px);
66
+ border-right: 1px solid var(--border-color);
67
+ padding: 24px;
68
+ height: 100vh;
69
+ overflow-y: auto;
70
+ box-shadow: 2px 0 12px rgba(77, 184, 255, 0.08);
71
+ position: fixed;
72
+ left: 0;
73
+ top: 0;
74
+ }
75
+
76
+ .logo {
77
+ font-size: 1.25rem;
78
+ font-weight: 800;
79
+ color: var(--theme-primary-dark);
80
+ text-decoration: none;
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 10px;
84
+ margin-bottom: 32px;
85
+ }
86
+
87
+ .logo-icon {
88
+ width: 40px;
89
+ height: 40px;
90
+ background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
91
+ border-radius: 12px;
92
+ display: flex;
93
+ align-items: center;
94
+ justify-content: center;
95
+ color: white;
96
+ font-size: 1.25rem;
97
+ box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
98
+ }
99
+
100
+ .nav-section {
101
+ margin-bottom: 24px;
102
+ }
103
+
104
+ .nav-title {
105
+ font-size: 0.7rem;
106
+ font-weight: 700;
107
+ text-transform: uppercase;
108
+ letter-spacing: 0.08em;
109
+ color: var(--text-muted);
110
+ margin-bottom: 12px;
111
+ padding-left: 4px;
112
+ }
113
+
114
+ .nav-list {
115
+ list-style: none;
116
+ }
117
+
118
+ .nav-item {
119
+ margin-bottom: 4px;
120
+ }
121
+
122
+ .nav-link {
123
+ display: block;
124
+ padding: 10px 14px;
125
+ color: var(--text-secondary);
126
+ text-decoration: none;
127
+ border-radius: 10px;
128
+ font-size: 0.875rem;
129
+ font-weight: 600;
130
+ transition: all 0.2s ease;
131
+ }
132
+
133
+ .nav-link:hover {
134
+ background: rgba(77, 184, 255, 0.1);
135
+ color: var(--theme-primary-dark);
136
+ transform: translateX(4px);
137
+ }
138
+
139
+ .nav-link.active {
140
+ background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
141
+ color: white;
142
+ box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
143
+ }
144
+
145
+ /* Main Content */
146
+ .main {
147
+ flex: 1;
148
+ display: flex;
149
+ justify-content: center;
150
+ padding: 48px;
151
+ padding-left: 308px;
152
+ overflow-y: auto;
153
+ }
154
+
155
+ .main-container {
156
+ width: 100%;
157
+ max-width: 920px;
158
+ }
159
+
160
+ .page-header {
161
+ margin-bottom: 48px;
162
+ text-align: center;
163
+ }
164
+
165
+ .page-title {
166
+ font-size: 2.5rem;
167
+ font-weight: 800;
168
+ margin-bottom: 16px;
169
+ background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-accent));
170
+ -webkit-background-clip: text;
171
+ -webkit-text-fill-color: transparent;
172
+ background-clip: text;
173
+ }
174
+
175
+ .page-description {
176
+ font-size: 1.1rem;
177
+ color: var(--text-secondary);
178
+ max-width: 600px;
179
+ margin: 0 auto;
180
+ }
181
+
182
+ /* Section */
183
+ .section {
184
+ margin-bottom: 48px;
185
+ }
186
+
187
+ .section-title {
188
+ font-size: 1.4rem;
189
+ font-weight: 700;
190
+ margin-bottom: 24px;
191
+ padding-bottom: 12px;
192
+ border-bottom: 2px solid var(--border-color);
193
+ display: flex;
194
+ align-items: center;
195
+ gap: 12px;
196
+ color: var(--text-primary);
197
+ }
198
+
199
+ .section-icon {
200
+ width: 42px;
201
+ height: 42px;
202
+ border-radius: 12px;
203
+ display: flex;
204
+ align-items: center;
205
+ justify-content: center;
206
+ font-size: 1.25rem;
207
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
208
+ }
209
+
210
+ .section-icon.intro { background: linear-gradient(135deg, #4db8ff, #7fcfff); }
211
+ .section-icon.start { background: linear-gradient(135deg, #2ecc71, #58d68d); }
212
+ .section-icon.record { background: linear-gradient(135deg, #9b59b6, #bb8fce); }
213
+ .section-icon.result { background: linear-gradient(135deg, #ff9f43, #ffc87c); }
214
+ .section-icon.chatbot { background: linear-gradient(135deg, #e74c3c, #ec7063); }
215
+ .section-icon.tips { background: linear-gradient(135deg, #5a7a9a, #8ba4bd); }
216
+ .section-icon.faq { background: linear-gradient(135deg, #0891b2, #22d3ee); }
217
+
218
+ /* Content Cards */
219
+ .content-card {
220
+ background: rgba(255, 255, 255, 0.9);
221
+ backdrop-filter: blur(10px);
222
+ border: 1px solid var(--border-color);
223
+ border-radius: 16px;
224
+ padding: 24px;
225
+ margin-bottom: 20px;
226
+ box-shadow: 0 4px 16px rgba(77, 184, 255, 0.08);
227
+ }
228
+
229
+ .content-card h3 {
230
+ font-size: 1.1rem;
231
+ font-weight: 700;
232
+ color: var(--text-primary);
233
+ margin-bottom: 12px;
234
+ display: flex;
235
+ align-items: center;
236
+ gap: 8px;
237
+ }
238
+
239
+ .content-card p {
240
+ font-size: 0.95rem;
241
+ color: var(--text-secondary);
242
+ line-height: 1.7;
243
+ }
244
+
245
+ .content-card ul {
246
+ margin: 12px 0;
247
+ padding-left: 24px;
248
+ }
249
+
250
+ .content-card li {
251
+ font-size: 0.95rem;
252
+ color: var(--text-secondary);
253
+ margin-bottom: 8px;
254
+ line-height: 1.6;
255
+ }
256
+
257
+ /* Step Cards */
258
+ .step-grid {
259
+ display: grid;
260
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
261
+ gap: 20px;
262
+ }
263
+
264
+ .step-card {
265
+ background: rgba(255, 255, 255, 0.9);
266
+ backdrop-filter: blur(10px);
267
+ border: 1px solid var(--border-color);
268
+ border-radius: 16px;
269
+ padding: 24px;
270
+ transition: all 0.25s ease;
271
+ box-shadow: 0 4px 16px rgba(77, 184, 255, 0.08);
272
+ position: relative;
273
+ }
274
+
275
+ .step-card:hover {
276
+ border-color: var(--theme-primary-light);
277
+ box-shadow: 0 8px 24px rgba(77, 184, 255, 0.15);
278
+ transform: translateY(-4px);
279
+ }
280
+
281
+ .step-number {
282
+ position: absolute;
283
+ top: -12px;
284
+ left: 20px;
285
+ width: 32px;
286
+ height: 32px;
287
+ background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
288
+ border-radius: 50%;
289
+ display: flex;
290
+ align-items: center;
291
+ justify-content: center;
292
+ color: white;
293
+ font-weight: 800;
294
+ font-size: 0.9rem;
295
+ box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3);
296
+ }
297
+
298
+ .step-title {
299
+ font-size: 1rem;
300
+ font-weight: 700;
301
+ color: var(--text-primary);
302
+ margin-bottom: 8px;
303
+ margin-top: 8px;
304
+ }
305
+
306
+ .step-description {
307
+ font-size: 0.875rem;
308
+ color: var(--text-secondary);
309
+ line-height: 1.6;
310
+ }
311
+
312
+ /* Feature Highlight */
313
+ .feature-grid {
314
+ display: grid;
315
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
316
+ gap: 16px;
317
+ }
318
+
319
+ .feature-card {
320
+ background: rgba(255, 255, 255, 0.9);
321
+ backdrop-filter: blur(10px);
322
+ border: 1px solid var(--border-color);
323
+ border-radius: 16px;
324
+ padding: 20px;
325
+ text-align: center;
326
+ transition: all 0.25s ease;
327
+ box-shadow: 0 4px 16px rgba(77, 184, 255, 0.08);
328
+ }
329
+
330
+ .feature-card:hover {
331
+ border-color: var(--theme-primary-light);
332
+ box-shadow: 0 8px 24px rgba(77, 184, 255, 0.15);
333
+ transform: translateY(-4px);
334
+ }
335
+
336
+ .feature-icon {
337
+ width: 56px;
338
+ height: 56px;
339
+ border-radius: 16px;
340
+ display: flex;
341
+ align-items: center;
342
+ justify-content: center;
343
+ font-size: 1.5rem;
344
+ margin: 0 auto 12px;
345
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
346
+ }
347
+
348
+ .feature-icon.mic { background: linear-gradient(135deg, #4db8ff, #7fcfff); }
349
+ .feature-icon.ai { background: linear-gradient(135deg, #ff9f43, #ffc87c); }
350
+ .feature-icon.chart { background: linear-gradient(135deg, #2ecc71, #58d68d); }
351
+ .feature-icon.hint { background: linear-gradient(135deg, #9b59b6, #bb8fce); }
352
+
353
+ .feature-title {
354
+ font-weight: 700;
355
+ font-size: 0.95rem;
356
+ color: var(--text-primary);
357
+ margin-bottom: 6px;
358
+ }
359
+
360
+ .feature-desc {
361
+ font-size: 0.8rem;
362
+ color: var(--text-secondary);
363
+ }
364
+
365
+ /* Metrics Display */
366
+ .metrics-grid {
367
+ display: grid;
368
+ grid-template-columns: repeat(5, 1fr);
369
+ gap: 12px;
370
+ margin: 16px 0;
371
+ }
372
+
373
+ .metric-item {
374
+ background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
375
+ color: white;
376
+ padding: 16px 12px;
377
+ border-radius: 12px;
378
+ text-align: center;
379
+ box-shadow: 0 4px 12px rgba(77, 184, 255, 0.2);
380
+ }
381
+
382
+ .metric-value {
383
+ font-size: 1.1rem;
384
+ font-weight: 800;
385
+ margin-bottom: 4px;
386
+ }
387
+
388
+ .metric-label {
389
+ font-size: 0.7rem;
390
+ font-weight: 600;
391
+ opacity: 0.9;
392
+ }
393
+
394
+ /* FAQ Accordion */
395
+ .faq-item {
396
+ background: rgba(255, 255, 255, 0.9);
397
+ border: 1px solid var(--border-color);
398
+ border-radius: 12px;
399
+ margin-bottom: 12px;
400
+ overflow: hidden;
401
+ }
402
+
403
+ .faq-question {
404
+ padding: 16px 20px;
405
+ font-weight: 700;
406
+ color: var(--text-primary);
407
+ cursor: pointer;
408
+ display: flex;
409
+ justify-content: space-between;
410
+ align-items: center;
411
+ transition: background 0.2s;
412
+ }
413
+
414
+ .faq-question:hover {
415
+ background: rgba(77, 184, 255, 0.05);
416
+ }
417
+
418
+ .faq-answer {
419
+ padding: 0 20px 16px;
420
+ color: var(--text-secondary);
421
+ font-size: 0.9rem;
422
+ line-height: 1.7;
423
+ display: none;
424
+ }
425
+
426
+ .faq-item.active .faq-answer {
427
+ display: block;
428
+ }
429
+
430
+ .faq-toggle {
431
+ font-size: 1.2rem;
432
+ color: var(--theme-primary);
433
+ transition: transform 0.2s;
434
+ }
435
+
436
+ .faq-item.active .faq-toggle {
437
+ transform: rotate(45deg);
438
+ }
439
+
440
+ /* Tips Box */
441
+ .tips-box {
442
+ background: linear-gradient(135deg, rgba(255, 159, 67, 0.1), rgba(255, 200, 124, 0.1));
443
+ border: 1px solid rgba(255, 159, 67, 0.3);
444
+ border-radius: 16px;
445
+ padding: 24px;
446
+ margin: 16px 0;
447
+ }
448
+
449
+ .tips-box h4 {
450
+ color: var(--theme-accent-dark);
451
+ font-weight: 700;
452
+ margin-bottom: 12px;
453
+ display: flex;
454
+ align-items: center;
455
+ gap: 8px;
456
+ }
457
+
458
+ .tips-box ul {
459
+ padding-left: 20px;
460
+ }
461
+
462
+ .tips-box li {
463
+ color: var(--text-secondary);
464
+ margin-bottom: 8px;
465
+ font-size: 0.9rem;
466
+ }
467
+
468
+ /* Warning Box */
469
+ .warning-box {
470
+ background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(236, 112, 99, 0.1));
471
+ border: 1px solid rgba(231, 76, 60, 0.3);
472
+ border-radius: 12px;
473
+ padding: 16px 20px;
474
+ margin: 16px 0;
475
+ display: flex;
476
+ align-items: flex-start;
477
+ gap: 12px;
478
+ }
479
+
480
+ .warning-icon {
481
+ font-size: 1.25rem;
482
+ }
483
+
484
+ .warning-text {
485
+ font-size: 0.9rem;
486
+ color: var(--text-secondary);
487
+ }
488
+
489
+ /* Back Button */
490
+ .back-btn {
491
+ display: inline-flex;
492
+ align-items: center;
493
+ gap: 8px;
494
+ padding: 12px 24px;
495
+ background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
496
+ color: white;
497
+ text-decoration: none;
498
+ border-radius: 12px;
499
+ font-weight: 700;
500
+ font-size: 0.9rem;
501
+ box-shadow: 0 4px 16px rgba(77, 184, 255, 0.3);
502
+ transition: all 0.2s ease;
503
+ margin-bottom: 32px;
504
+ }
505
+
506
+ .back-btn:hover {
507
+ transform: translateY(-2px);
508
+ box-shadow: 0 6px 20px rgba(77, 184, 255, 0.4);
509
+ }
510
+
511
+ /* Floating clouds animation */
512
+ .cloud {
513
+ position: fixed;
514
+ background: rgba(255, 255, 255, 0.6);
515
+ border-radius: 50%;
516
+ filter: blur(20px);
517
+ opacity: 0.5;
518
+ animation: float 20s infinite ease-in-out;
519
+ pointer-events: none;
520
+ z-index: -1;
521
+ }
522
+
523
+ .cloud-1 {
524
+ width: 200px;
525
+ height: 100px;
526
+ top: 10%;
527
+ left: 5%;
528
+ animation-delay: 0s;
529
+ }
530
+
531
+ .cloud-2 {
532
+ width: 150px;
533
+ height: 80px;
534
+ top: 30%;
535
+ right: 10%;
536
+ animation-delay: -5s;
537
+ }
538
+
539
+ .cloud-3 {
540
+ width: 180px;
541
+ height: 90px;
542
+ bottom: 20%;
543
+ left: 15%;
544
+ animation-delay: -10s;
545
+ }
546
+
547
+ @keyframes float {
548
+ 0%, 100% { transform: translateY(0) translateX(0); }
549
+ 25% { transform: translateY(-20px) translateX(10px); }
550
+ 50% { transform: translateY(0) translateX(20px); }
551
+ 75% { transform: translateY(20px) translateX(10px); }
552
+ }
553
+
554
+ /* Responsive */
555
+ @media (max-width: 768px) {
556
+ .sidebar {
557
+ display: none;
558
+ }
559
+ .main {
560
+ padding: 24px 16px;
561
+ padding-left: 16px;
562
+ }
563
+ .page-title {
564
+ font-size: 1.75rem;
565
+ }
566
+ .step-grid, .feature-grid {
567
+ grid-template-columns: 1fr;
568
+ }
569
+ .metrics-grid {
570
+ grid-template-columns: repeat(3, 1fr);
571
+ }
572
+ }
573
+ </style>
574
+ </head>
575
+ <body>
576
+ <!-- Floating clouds -->
577
+ <div class="cloud cloud-1"></div>
578
+ <div class="cloud cloud-2"></div>
579
+ <div class="cloud cloud-3"></div>
580
+
581
+ <div class="container">
582
+ <!-- Sidebar -->
583
+ <nav class="sidebar">
584
+ <a href="#" class="logo">
585
+ <div class="logo-icon">K</div>
586
+ Komentle
587
+ </a>
588
+
589
+ <div class="nav-section">
590
+ <div class="nav-title">Guide</div>
591
+ <ul class="nav-list">
592
+ <li class="nav-item">
593
+ <a href="#intro" class="nav-link active">Introduction</a>
594
+ </li>
595
+ <li class="nav-item">
596
+ <a href="#start" class="nav-link">Getting Started</a>
597
+ </li>
598
+ </ul>
599
+ </div>
600
+
601
+ <div class="nav-section">
602
+ <div class="nav-title">How to Play</div>
603
+ <ul class="nav-list">
604
+ <li class="nav-item">
605
+ <a href="#record" class="nav-link">Recording Voice</a>
606
+ </li>
607
+ <li class="nav-item">
608
+ <a href="#result" class="nav-link">Understanding Results</a>
609
+ </li>
610
+ <li class="nav-item">
611
+ <a href="#chatbot" class="nav-link">AI Chatbot</a>
612
+ </li>
613
+ </ul>
614
+ </div>
615
+
616
+ <div class="nav-section">
617
+ <div class="nav-title">Help</div>
618
+ <ul class="nav-list">
619
+ <li class="nav-item">
620
+ <a href="#tips" class="nav-link">Tips & Tricks</a>
621
+ </li>
622
+ <li class="nav-item">
623
+ <a href="#faq" class="nav-link">FAQ</a>
624
+ </li>
625
+ </ul>
626
+ </div>
627
+
628
+ <div class="nav-section">
629
+ <div class="nav-title">Resources</div>
630
+ <ul class="nav-list">
631
+ <li class="nav-item">
632
+ <a href="tech-stack.html" class="nav-link">Tech Stack</a>
633
+ </li>
634
+ </ul>
635
+ </div>
636
+ </nav>
637
+
638
+ <!-- Main Content -->
639
+ <main class="main">
640
+ <div class="main-container">
641
+
642
+ <a href="javascript:history.back()" class="back-btn">
643
+ ← Back to App
644
+ </a>
645
+
646
+ <header class="page-header">
647
+ <h1 class="page-title">User Guide</h1>
648
+ <p class="page-description">
649
+ Welcome to the Komentle Voice Challenge user guide.
650
+ Guess the hidden word through AI-analyzed pronunciation!
651
+ </p>
652
+ </header>
653
+
654
+ <!-- Introduction -->
655
+ <section id="intro" class="section">
656
+ <h2 class="section-title">
657
+ <span class="section-icon intro">πŸ“–</span>
658
+ Introduction
659
+ </h2>
660
+
661
+ <div class="content-card">
662
+ <h3>What is Komentle Voice Challenge?</h3>
663
+ <p>
664
+ Komentle Voice Challenge is an AI-powered voice recognition pronunciation quiz game.
665
+ Every day, a new answer word is given, and AI analyzes your pronunciation
666
+ to evaluate how similar it is to the answer.
667
+ </p>
668
+ <p style="margin-top: 12px;">
669
+ Instead of saying the answer directly, you pronounce various words and use
670
+ AI hints to deduce the answer - a new type of quiz game experience!
671
+ </p>
672
+ </div>
673
+
674
+ <div class="feature-grid">
675
+ <div class="feature-card">
676
+ <div class="feature-icon mic">🎀</div>
677
+ <div class="feature-title">Voice Recording</div>
678
+ <div class="feature-desc">Simple one-touch recording</div>
679
+ </div>
680
+ <div class="feature-card">
681
+ <div class="feature-icon ai">πŸ€–</div>
682
+ <div class="feature-title">AI Analysis</div>
683
+ <div class="feature-desc">Powered by Google Gemini</div>
684
+ </div>
685
+ <div class="feature-card">
686
+ <div class="feature-icon chart">πŸ“Š</div>
687
+ <div class="feature-title">Detailed Scores</div>
688
+ <div class="feature-desc">5 voice metrics</div>
689
+ </div>
690
+ <div class="feature-card">
691
+ <div class="feature-icon hint">πŸ’‘</div>
692
+ <div class="feature-title">AI Hints</div>
693
+ <div class="feature-desc">Chatbot hint system</div>
694
+ </div>
695
+ </div>
696
+ </section>
697
+
698
+ <!-- Getting Started -->
699
+ <section id="start" class="section">
700
+ <h2 class="section-title">
701
+ <span class="section-icon start">πŸš€</span>
702
+ Getting Started
703
+ </h2>
704
+
705
+ <div class="step-grid">
706
+ <div class="step-card">
707
+ <span class="step-number">1</span>
708
+ <div class="step-title">Access the Page</div>
709
+ <div class="step-description">
710
+ Open the Komentle Voice Challenge page in your web browser.
711
+ When prompted for microphone permission, click "Allow".
712
+ </div>
713
+ </div>
714
+ <div class="step-card">
715
+ <span class="step-number">2</span>
716
+ <div class="step-title">Prepare Your Microphone</div>
717
+ <div class="step-description">
718
+ A microphone is required for voice recording.
719
+ Both built-in and external microphones work.
720
+ </div>
721
+ </div>
722
+ <div class="step-card">
723
+ <span class="step-number">3</span>
724
+ <div class="step-title">Start Recording</div>
725
+ <div class="step-description">
726
+ Click the record button in the center of the screen and pronounce a word.
727
+ AI analysis will automatically begin when recording is complete.
728
+ </div>
729
+ </div>
730
+ <div class="step-card">
731
+ <span class="step-number">4</span>
732
+ <div class="step-title">Check Results</div>
733
+ <div class="step-description">
734
+ Review the analysis results and scores, then use AI hints
735
+ to make a closer guess on your next attempt!
736
+ </div>
737
+ </div>
738
+ </div>
739
+
740
+ <div class="warning-box">
741
+ <span class="warning-icon">⚠️</span>
742
+ <div class="warning-text">
743
+ <strong>Microphone Permission Required!</strong> You must allow microphone access
744
+ in your browser to use the voice recording feature. If permission is blocked,
745
+ please enable microphone access in your browser settings.
746
+ </div>
747
+ </div>
748
+ </section>
749
+
750
+ <!-- Recording Voice -->
751
+ <section id="record" class="section">
752
+ <h2 class="section-title">
753
+ <span class="section-icon record">πŸŽ™οΈ</span>
754
+ Recording Voice
755
+ </h2>
756
+
757
+ <div class="content-card">
758
+ <h3>πŸ”΄ How to Record</h3>
759
+ <ul>
760
+ <li><strong>Start Recording:</strong> Click the microphone button to begin recording.</li>
761
+ <li><strong>Pronounce:</strong> Clearly pronounce the word you're guessing.</li>
762
+ <li><strong>Stop Recording:</strong> Click the button again to stop recording.</li>
763
+ <li><strong>Submit:</strong> Click the "Analyze" button to start AI analysis.</li>
764
+ </ul>
765
+ </div>
766
+
767
+ <div class="tips-box">
768
+ <h4>πŸ’‘ Tips for Better Recording</h4>
769
+ <ul>
770
+ <li>Record in a quiet environment</li>
771
+ <li>Keep an appropriate distance from the microphone (20-30cm)</li>
772
+ <li>Pronounce words slowly and clearly</li>
773
+ <li>Optimal recording length is 2-5 seconds</li>
774
+ </ul>
775
+ </div>
776
+ </section>
777
+
778
+ <!-- Understanding Results -->
779
+ <section id="result" class="section">
780
+ <h2 class="section-title">
781
+ <span class="section-icon result">πŸ“Š</span>
782
+ Understanding Results
783
+ </h2>
784
+
785
+ <div class="content-card">
786
+ <h3>πŸ“ˆ Voice Analysis Metrics</h3>
787
+ <p>AI analyzes 5 voice characteristics. Each item is scored from 0-100.</p>
788
+
789
+ <div class="metrics-grid">
790
+ <div class="metric-item">
791
+ <div class="metric-value">Pronun.</div>
792
+ <div class="metric-label">Pronunciation</div>
793
+ </div>
794
+ <div class="metric-item">
795
+ <div class="metric-value">Tone</div>
796
+ <div class="metric-label">Voice Tone</div>
797
+ </div>
798
+ <div class="metric-item">
799
+ <div class="metric-value">Pitch</div>
800
+ <div class="metric-label">Intonation</div>
801
+ </div>
802
+ <div class="metric-item">
803
+ <div class="metric-value">Rhythm</div>
804
+ <div class="metric-label">Tempo</div>
805
+ </div>
806
+ <div class="metric-item">
807
+ <div class="metric-value">Energy</div>
808
+ <div class="metric-label">Intensity</div>
809
+ </div>
810
+ </div>
811
+ </div>
812
+
813
+ <div class="content-card">
814
+ <h3>🎯 Score Interpretation</h3>
815
+ <ul>
816
+ <li><strong>80+ points:</strong> Very similar to the answer! You're almost there!</li>
817
+ <li><strong>60-79 points:</strong> Good attempt. Check the hints for guidance.</li>
818
+ <li><strong>40-59 points:</strong> Right direction, but try a different word.</li>
819
+ <li><strong>Below 40:</strong> Far from the answer. Try a new guess.</li>
820
+ </ul>
821
+ </div>
822
+
823
+ <div class="content-card">
824
+ <h3>πŸ“ Viewing Attempt History</h3>
825
+ <p>
826
+ All attempts are recorded at the bottom of the screen. You can replay
827
+ each recording and review scores and AI feedback. Analyze previous
828
+ attempts to get closer to the answer!
829
+ </p>
830
+ </div>
831
+ </section>
832
+
833
+ <!-- AI Chatbot -->
834
+ <section id="chatbot" class="section">
835
+ <h2 class="section-title">
836
+ <span class="section-icon chatbot">πŸ€–</span>
837
+ AI Chatbot
838
+ </h2>
839
+
840
+ <div class="content-card">
841
+ <h3>πŸ’¬ AI Hint Chatbot</h3>
842
+ <p>
843
+ Click the floating button at the bottom right of the screen to open the AI hint chatbot.
844
+ Request hints from the chatbot to receive indirect clues about the answer.
845
+ </p>
846
+ </div>
847
+
848
+ <div class="content-card">
849
+ <h3>πŸ—£οΈ How to Use the Chatbot</h3>
850
+ <ul>
851
+ <li><strong>"Give me a hint":</strong> AI provides a hint about the answer.</li>
852
+ <li><strong>"What's the category?":</strong> Learn the classification of the answer word.</li>
853
+ <li><strong>"Tell me the first letter":</strong> Get a hint about the first letter.</li>
854
+ <li><strong>"What words sound similar?":</strong> Get pronunciation-related suggestions.</li>
855
+ </ul>
856
+ </div>
857
+
858
+ <div class="warning-box">
859
+ <span class="warning-icon">πŸ’‘</span>
860
+ <div class="warning-text">
861
+ <strong>Limited Hint Usage!</strong> Chatbot hints can only be used a limited number of times.
862
+ Request hints carefully!
863
+ </div>
864
+ </div>
865
+ </section>
866
+
867
+ <!-- Tips & Tricks -->
868
+ <section id="tips" class="section">
869
+ <h2 class="section-title">
870
+ <span class="section-icon tips">✨</span>
871
+ Tips & Tricks
872
+ </h2>
873
+
874
+ <div class="content-card">
875
+ <h3>πŸ† High Score Strategies</h3>
876
+ <ul>
877
+ <li><strong>Analyze Metrics:</strong> Check which metrics are low and
878
+ try words with similar characteristics.</li>
879
+ <li><strong>Identify Category:</strong> Ask the chatbot about the category
880
+ and guess related words.</li>
881
+ <li><strong>Score Patterns:</strong> Try words with similar pronunciation
882
+ to high-scoring attempts.</li>
883
+ <li><strong>Adjust Energy:</strong> If energy score is low, try speaking more powerfully;
884
+ if high, try speaking more calmly.</li>
885
+ </ul>
886
+ </div>
887
+
888
+ <div class="tips-box">
889
+ <h4>🎯 Understanding Metric Hints</h4>
890
+ <ul>
891
+ <li><strong>High Pronunciation Score:</strong> Similar syllable structure.</li>
892
+ <li><strong>High Pitch Score:</strong> Similar intonation pattern.</li>
893
+ <li><strong>High Rhythm Score:</strong> Similar syllable count and tempo.</li>
894
+ <li><strong>High Energy Score:</strong> Similar stress placement.</li>
895
+ </ul>
896
+ </div>
897
+ </section>
898
+
899
+ <!-- FAQ -->
900
+ <section id="faq" class="section">
901
+ <h2 class="section-title">
902
+ <span class="section-icon faq">❓</span>
903
+ FAQ
904
+ </h2>
905
+
906
+ <div class="faq-item">
907
+ <div class="faq-question" onclick="toggleFaq(this)">
908
+ My microphone isn't working
909
+ <span class="faq-toggle">+</span>
910
+ </div>
911
+ <div class="faq-answer">
912
+ Check if microphone permission is allowed in your browser settings.
913
+ Click the lock icon to the left of the address bar and change
914
+ microphone permission to "Allow" in site settings.
915
+ </div>
916
+ </div>
917
+
918
+ <div class="faq-item">
919
+ <div class="faq-question" onclick="toggleFaq(this)">
920
+ My recording is too short or too long
921
+ <span class="faq-toggle">+</span>
922
+ </div>
923
+ <div class="faq-answer">
924
+ The optimal recording length is 2-5 seconds. Pronounce the word clearly once
925
+ and stop recording. Too short makes analysis difficult, and too long
926
+ may introduce noise.
927
+ </div>
928
+ </div>
929
+
930
+ <div class="faq-item">
931
+ <div class="faq-question" onclick="toggleFaq(this)">
932
+ My scores are consistently low
933
+ <span class="faq-toggle">+</span>
934
+ </div>
935
+ <div class="faq-answer">
936
+ Try recording in a quiet environment and adjust the distance to your microphone.
937
+ Also, ask the AI chatbot for hints to understand the category or
938
+ characteristics of the answer before making guesses.
939
+ </div>
940
+ </div>
941
+
942
+ <div class="faq-item">
943
+ <div class="faq-question" onclick="toggleFaq(this)">
944
+ Does the answer change daily?
945
+ <span class="faq-toggle">+</span>
946
+ </div>
947
+ <div class="faq-answer">
948
+ Yes, the answer changes to a new word at midnight every day.
949
+ Challenge yourself once a day to guess the answer!
950
+ If you don't get it today, try again with a new puzzle tomorrow.
951
+ </div>
952
+ </div>
953
+
954
+ <div class="faq-item">
955
+ <div class="faq-question" onclick="toggleFaq(this)">
956
+ What happens if I give up?
957
+ <span class="faq-toggle">+</span>
958
+ </div>
959
+ <div class="faq-answer">
960
+ Pressing the give up button reveals the answer.
961
+ However, the challenge for that day ends and is recorded as a failure in statistics.
962
+ Try again with a new puzzle tomorrow!
963
+ </div>
964
+ </div>
965
+ </section>
966
+
967
+ </div>
968
+ </main>
969
+ </div>
970
+
971
+ <script>
972
+ function toggleFaq(element) {
973
+ const faqItem = element.parentElement;
974
+ faqItem.classList.toggle('active');
975
+ }
976
+
977
+ // Smooth scroll for navigation
978
+ document.querySelectorAll('.nav-link').forEach(link => {
979
+ link.addEventListener('click', function(e) {
980
+ const href = this.getAttribute('href');
981
+ if (href.startsWith('#')) {
982
+ e.preventDefault();
983
+ const target = document.querySelector(href);
984
+ if (target) {
985
+ target.scrollIntoView({ behavior: 'smooth' });
986
+ }
987
+ // Update active state
988
+ document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
989
+ this.classList.add('active');
990
+ }
991
+ });
992
+ });
993
+
994
+ // Update active nav on scroll
995
+ window.addEventListener('scroll', function() {
996
+ const sections = document.querySelectorAll('.section');
997
+ let current = '';
998
+
999
+ sections.forEach(section => {
1000
+ const sectionTop = section.offsetTop;
1001
+ if (window.scrollY >= sectionTop - 100) {
1002
+ current = section.getAttribute('id');
1003
+ }
1004
+ });
1005
+
1006
+ document.querySelectorAll('.nav-link').forEach(link => {
1007
+ link.classList.remove('active');
1008
+ if (link.getAttribute('href') === '#' + current) {
1009
+ link.classList.add('active');
1010
+ }
1011
+ });
1012
+ });
1013
+ </script>
1014
+ </body>
1015
+ </html>