|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>User Guide - Voice Semenetle</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
|
|
|
--theme-primary: #4db8ff; |
|
|
--theme-primary-dark: #2ea3f2; |
|
|
--theme-primary-light: #7fcfff; |
|
|
--theme-secondary: #5bc0eb; |
|
|
--theme-accent: #ff9f43; |
|
|
--theme-accent-dark: #e08b2d; |
|
|
|
|
|
|
|
|
--bg-sky-start: #e8f4fc; |
|
|
--bg-sky-end: #f5faff; |
|
|
--bg-cloud: #ffffff; |
|
|
|
|
|
|
|
|
--text-primary: #2c3e50; |
|
|
--text-secondary: #5a7a9a; |
|
|
--text-muted: #8ba4bd; |
|
|
|
|
|
|
|
|
--success-color: #2ecc71; |
|
|
--warning-color: #f39c12; |
|
|
--error-color: #e74c3c; |
|
|
|
|
|
|
|
|
--surface-primary: #ffffff; |
|
|
--surface-secondary: #f0f7fc; |
|
|
--border-color: #c5dae8; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Nunito', 'Comic Neue', 'Helvetica Neue', Arial, sans-serif; |
|
|
background: linear-gradient(180deg, #e8f4fc 0%, #f5faff 100%); |
|
|
min-height: 100vh; |
|
|
color: var(--text-primary); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
|
|
|
.container { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
width: 100vw; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar { |
|
|
width: 260px; |
|
|
background: rgba(255, 255, 255, 0.85); |
|
|
backdrop-filter: blur(10px); |
|
|
border-right: 1px solid var(--border-color); |
|
|
padding: 24px; |
|
|
height: 100vh; |
|
|
overflow-y: auto; |
|
|
box-shadow: 2px 0 12px rgba(77, 184, 255, 0.08); |
|
|
position: fixed; |
|
|
left: 0; |
|
|
top: 0; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 800; |
|
|
color: var(--theme-primary-dark); |
|
|
text-decoration: none; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
margin-bottom: 32px; |
|
|
} |
|
|
|
|
|
.logo-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)); |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
font-size: 1.25rem; |
|
|
box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3); |
|
|
} |
|
|
|
|
|
.nav-section { |
|
|
margin-bottom: 24px; |
|
|
} |
|
|
|
|
|
.nav-title { |
|
|
font-size: 0.7rem; |
|
|
font-weight: 700; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.08em; |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 12px; |
|
|
padding-left: 4px; |
|
|
} |
|
|
|
|
|
.nav-list { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.nav-item { |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
display: block; |
|
|
padding: 10px 14px; |
|
|
color: var(--text-secondary); |
|
|
text-decoration: none; |
|
|
border-radius: 10px; |
|
|
font-size: 0.875rem; |
|
|
font-weight: 600; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
background: rgba(77, 184, 255, 0.1); |
|
|
color: var(--theme-primary-dark); |
|
|
transform: translateX(4px); |
|
|
} |
|
|
|
|
|
.nav-link.active { |
|
|
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)); |
|
|
color: white; |
|
|
box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.main { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
padding: 48px; |
|
|
padding-left: 308px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.main-container { |
|
|
width: 100%; |
|
|
max-width: 920px; |
|
|
} |
|
|
|
|
|
.page-header { |
|
|
margin-bottom: 48px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.page-title { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 800; |
|
|
margin-bottom: 16px; |
|
|
background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-accent)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.page-description { |
|
|
font-size: 1.1rem; |
|
|
color: var(--text-secondary); |
|
|
max-width: 600px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
|
|
|
.section { |
|
|
margin-bottom: 48px; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 1.4rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 24px; |
|
|
padding-bottom: 12px; |
|
|
border-bottom: 2px solid var(--border-color); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.section-icon { |
|
|
width: 42px; |
|
|
height: 42px; |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.25rem; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
|
|
} |
|
|
|
|
|
.section-icon.intro { background: linear-gradient(135deg, #4db8ff, #7fcfff); } |
|
|
.section-icon.start { background: linear-gradient(135deg, #2ecc71, #58d68d); } |
|
|
.section-icon.record { background: linear-gradient(135deg, #9b59b6, #bb8fce); } |
|
|
.section-icon.result { background: linear-gradient(135deg, #ff9f43, #ffc87c); } |
|
|
.section-icon.chatbot { background: linear-gradient(135deg, #e74c3c, #ec7063); } |
|
|
.section-icon.tips { background: linear-gradient(135deg, #5a7a9a, #8ba4bd); } |
|
|
.section-icon.faq { background: linear-gradient(135deg, #0891b2, #22d3ee); } |
|
|
|
|
|
|
|
|
.content-card { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 16px; |
|
|
padding: 24px; |
|
|
margin-bottom: 20px; |
|
|
box-shadow: 0 4px 16px rgba(77, 184, 255, 0.08); |
|
|
} |
|
|
|
|
|
.content-card h3 { |
|
|
font-size: 1.1rem; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.content-card p { |
|
|
font-size: 0.95rem; |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.7; |
|
|
} |
|
|
|
|
|
.content-card ul { |
|
|
margin: 12px 0; |
|
|
padding-left: 24px; |
|
|
} |
|
|
|
|
|
.content-card li { |
|
|
font-size: 0.95rem; |
|
|
color: var(--text-secondary); |
|
|
margin-bottom: 8px; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
|
|
|
.step-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.step-card { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 16px; |
|
|
padding: 24px; |
|
|
transition: all 0.25s ease; |
|
|
box-shadow: 0 4px 16px rgba(77, 184, 255, 0.08); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.step-card:hover { |
|
|
border-color: var(--theme-primary-light); |
|
|
box-shadow: 0 8px 24px rgba(77, 184, 255, 0.15); |
|
|
transform: translateY(-4px); |
|
|
} |
|
|
|
|
|
.step-number { |
|
|
position: absolute; |
|
|
top: -12px; |
|
|
left: 20px; |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
font-weight: 800; |
|
|
font-size: 0.9rem; |
|
|
box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3); |
|
|
} |
|
|
|
|
|
.step-title { |
|
|
font-size: 1rem; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 8px; |
|
|
margin-top: 8px; |
|
|
} |
|
|
|
|
|
.step-description { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
|
|
|
.feature-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); |
|
|
gap: 16px; |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 16px; |
|
|
padding: 20px; |
|
|
text-align: center; |
|
|
transition: all 0.25s ease; |
|
|
box-shadow: 0 4px 16px rgba(77, 184, 255, 0.08); |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
border-color: var(--theme-primary-light); |
|
|
box-shadow: 0 8px 24px rgba(77, 184, 255, 0.15); |
|
|
transform: translateY(-4px); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
width: 56px; |
|
|
height: 56px; |
|
|
border-radius: 16px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.5rem; |
|
|
margin: 0 auto 12px; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.feature-icon.mic { background: linear-gradient(135deg, #4db8ff, #7fcfff); } |
|
|
.feature-icon.ai { background: linear-gradient(135deg, #ff9f43, #ffc87c); } |
|
|
.feature-icon.chart { background: linear-gradient(135deg, #2ecc71, #58d68d); } |
|
|
.feature-icon.hint { background: linear-gradient(135deg, #9b59b6, #bb8fce); } |
|
|
|
|
|
.feature-title { |
|
|
font-weight: 700; |
|
|
font-size: 0.95rem; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 6px; |
|
|
} |
|
|
|
|
|
.feature-desc { |
|
|
font-size: 0.8rem; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
|
|
|
.metrics-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(5, 1fr); |
|
|
gap: 12px; |
|
|
margin: 16px 0; |
|
|
} |
|
|
|
|
|
.metric-item { |
|
|
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)); |
|
|
color: white; |
|
|
padding: 16px 12px; |
|
|
border-radius: 12px; |
|
|
text-align: center; |
|
|
box-shadow: 0 4px 12px rgba(77, 184, 255, 0.2); |
|
|
} |
|
|
|
|
|
.metric-value { |
|
|
font-size: 1.1rem; |
|
|
font-weight: 800; |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
.metric-label { |
|
|
font-size: 0.7rem; |
|
|
font-weight: 600; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
|
|
|
.faq-item { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 12px; |
|
|
margin-bottom: 12px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.faq-question { |
|
|
padding: 16px 20px; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
transition: background 0.2s; |
|
|
} |
|
|
|
|
|
.faq-question:hover { |
|
|
background: rgba(77, 184, 255, 0.05); |
|
|
} |
|
|
|
|
|
.faq-answer { |
|
|
padding: 0 20px 16px; |
|
|
color: var(--text-secondary); |
|
|
font-size: 0.9rem; |
|
|
line-height: 1.7; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.faq-item.active .faq-answer { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.faq-toggle { |
|
|
font-size: 1.2rem; |
|
|
color: var(--theme-primary); |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
|
|
|
.faq-item.active .faq-toggle { |
|
|
transform: rotate(45deg); |
|
|
} |
|
|
|
|
|
|
|
|
.tips-box { |
|
|
background: linear-gradient(135deg, rgba(255, 159, 67, 0.1), rgba(255, 200, 124, 0.1)); |
|
|
border: 1px solid rgba(255, 159, 67, 0.3); |
|
|
border-radius: 16px; |
|
|
padding: 24px; |
|
|
margin: 16px 0; |
|
|
} |
|
|
|
|
|
.tips-box h4 { |
|
|
color: var(--theme-accent-dark); |
|
|
font-weight: 700; |
|
|
margin-bottom: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.tips-box ul { |
|
|
padding-left: 20px; |
|
|
} |
|
|
|
|
|
.tips-box li { |
|
|
color: var(--text-secondary); |
|
|
margin-bottom: 8px; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
.warning-box { |
|
|
background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(236, 112, 99, 0.1)); |
|
|
border: 1px solid rgba(231, 76, 60, 0.3); |
|
|
border-radius: 12px; |
|
|
padding: 16px 20px; |
|
|
margin: 16px 0; |
|
|
display: flex; |
|
|
align-items: flex-start; |
|
|
gap: 12px; |
|
|
} |
|
|
|
|
|
.warning-icon { |
|
|
font-size: 1.25rem; |
|
|
} |
|
|
|
|
|
.warning-text { |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
|
|
|
.back-btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
padding: 12px 24px; |
|
|
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)); |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
border-radius: 12px; |
|
|
font-weight: 700; |
|
|
font-size: 0.9rem; |
|
|
box-shadow: 0 4px 16px rgba(77, 184, 255, 0.3); |
|
|
transition: all 0.2s ease; |
|
|
margin-bottom: 32px; |
|
|
} |
|
|
|
|
|
.back-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 20px rgba(77, 184, 255, 0.4); |
|
|
} |
|
|
|
|
|
|
|
|
.cloud { |
|
|
position: fixed; |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
border-radius: 50%; |
|
|
filter: blur(20px); |
|
|
opacity: 0.5; |
|
|
animation: float 20s infinite ease-in-out; |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.cloud-1 { |
|
|
width: 200px; |
|
|
height: 100px; |
|
|
top: 10%; |
|
|
left: 5%; |
|
|
animation-delay: 0s; |
|
|
} |
|
|
|
|
|
.cloud-2 { |
|
|
width: 150px; |
|
|
height: 80px; |
|
|
top: 30%; |
|
|
right: 10%; |
|
|
animation-delay: -5s; |
|
|
} |
|
|
|
|
|
.cloud-3 { |
|
|
width: 180px; |
|
|
height: 90px; |
|
|
bottom: 20%; |
|
|
left: 15%; |
|
|
animation-delay: -10s; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0) translateX(0); } |
|
|
25% { transform: translateY(-20px) translateX(10px); } |
|
|
50% { transform: translateY(0) translateX(20px); } |
|
|
75% { transform: translateY(20px) translateX(10px); } |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
display: none; |
|
|
} |
|
|
.main { |
|
|
padding: 24px 16px; |
|
|
padding-left: 16px; |
|
|
} |
|
|
.page-title { |
|
|
font-size: 1.75rem; |
|
|
} |
|
|
.step-grid, .feature-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
.metrics-grid { |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="cloud cloud-1"></div> |
|
|
<div class="cloud cloud-2"></div> |
|
|
<div class="cloud cloud-3"></div> |
|
|
|
|
|
<div class="container"> |
|
|
|
|
|
<nav class="sidebar"> |
|
|
<a href="#" class="logo"> |
|
|
<div class="logo-icon">K</div> |
|
|
Komentle |
|
|
</a> |
|
|
|
|
|
<div class="nav-section"> |
|
|
<div class="nav-title">Guide</div> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="#intro" class="nav-link active">Introduction</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#start" class="nav-link">Getting Started</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="nav-section"> |
|
|
<div class="nav-title">How to Play</div> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="#record" class="nav-link">Recording Voice</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#result" class="nav-link">Understanding Results</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#chatbot" class="nav-link">AI Chatbot</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="nav-section"> |
|
|
<div class="nav-title">Help</div> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="#tips" class="nav-link">Tips & Tricks</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#faq" class="nav-link">FAQ</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="nav-section"> |
|
|
<div class="nav-title">Resources</div> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="tech-stack.html" class="nav-link">Tech Stack</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="main"> |
|
|
<div class="main-container"> |
|
|
|
|
|
<a href="javascript:history.back()" class="back-btn"> |
|
|
โ Back to App |
|
|
</a> |
|
|
|
|
|
<header class="page-header"> |
|
|
<h1 class="page-title">User Guide</h1> |
|
|
<p class="page-description"> |
|
|
Welcome to the Komentle Voice Challenge user guide. |
|
|
Guess the hidden word through AI-analyzed pronunciation! |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="intro" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon intro">๐</span> |
|
|
Introduction |
|
|
</h2> |
|
|
|
|
|
<div class="content-card"> |
|
|
<h3>What is Komentle Voice Challenge?</h3> |
|
|
<p> |
|
|
Komentle Voice Challenge is an AI-powered voice recognition pronunciation quiz game. |
|
|
Every day, a new answer word is given, and AI analyzes your pronunciation |
|
|
to evaluate how similar it is to the answer. |
|
|
</p> |
|
|
<p style="margin-top: 12px;"> |
|
|
Instead of saying the answer directly, you pronounce various words and use |
|
|
AI hints to deduce the answer - a new type of quiz game experience! |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-grid"> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon mic">๐ค</div> |
|
|
<div class="feature-title">Voice Recording</div> |
|
|
<div class="feature-desc">Simple one-touch recording</div> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon ai">๐ค</div> |
|
|
<div class="feature-title">AI Analysis</div> |
|
|
<div class="feature-desc">Powered by Google Gemini</div> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon chart">๐</div> |
|
|
<div class="feature-title">Detailed Scores</div> |
|
|
<div class="feature-desc">5 voice metrics</div> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon hint">๐ก</div> |
|
|
<div class="feature-title">AI Hints</div> |
|
|
<div class="feature-desc">Chatbot hint system</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="start" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon start">๐</span> |
|
|
Getting Started |
|
|
</h2> |
|
|
|
|
|
<div class="step-grid"> |
|
|
<div class="step-card"> |
|
|
<span class="step-number">1</span> |
|
|
<div class="step-title">Access the Page</div> |
|
|
<div class="step-description"> |
|
|
Open the Komentle Voice Challenge page in your web browser. |
|
|
When prompted for microphone permission, click "Allow". |
|
|
</div> |
|
|
</div> |
|
|
<div class="step-card"> |
|
|
<span class="step-number">2</span> |
|
|
<div class="step-title">Prepare Your Microphone</div> |
|
|
<div class="step-description"> |
|
|
A microphone is required for voice recording. |
|
|
Both built-in and external microphones work. |
|
|
</div> |
|
|
</div> |
|
|
<div class="step-card"> |
|
|
<span class="step-number">3</span> |
|
|
<div class="step-title">Start Recording</div> |
|
|
<div class="step-description"> |
|
|
Click the record button in the center of the screen and pronounce a word. |
|
|
AI analysis will automatically begin when recording is complete. |
|
|
</div> |
|
|
</div> |
|
|
<div class="step-card"> |
|
|
<span class="step-number">4</span> |
|
|
<div class="step-title">Check Results</div> |
|
|
<div class="step-description"> |
|
|
Review the analysis results and scores, then use AI hints |
|
|
to make a closer guess on your next attempt! |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="warning-box"> |
|
|
<span class="warning-icon">โ ๏ธ</span> |
|
|
<div class="warning-text"> |
|
|
<strong>Microphone Permission Required!</strong> You must allow microphone access |
|
|
in your browser to use the voice recording feature. If permission is blocked, |
|
|
please enable microphone access in your browser settings. |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="record" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon record">๐๏ธ</span> |
|
|
Recording Voice |
|
|
</h2> |
|
|
|
|
|
<div class="content-card"> |
|
|
<h3>๐ด How to Record</h3> |
|
|
<ul> |
|
|
<li><strong>Start Recording:</strong> Click the microphone button to begin recording.</li> |
|
|
<li><strong>Pronounce:</strong> Clearly pronounce the word you're guessing.</li> |
|
|
<li><strong>Stop Recording:</strong> Click the button again to stop recording.</li> |
|
|
<li><strong>Submit:</strong> Click the "Analyze" button to start AI analysis.</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="tips-box"> |
|
|
<h4>๐ก Tips for Better Recording</h4> |
|
|
<ul> |
|
|
<li>Record in a quiet environment</li> |
|
|
<li>Keep an appropriate distance from the microphone (20-30cm)</li> |
|
|
<li>Pronounce words slowly and clearly</li> |
|
|
<li>Optimal recording length is 2-5 seconds</li> |
|
|
</ul> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="result" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon result">๐</span> |
|
|
Understanding Results |
|
|
</h2> |
|
|
|
|
|
<div class="content-card"> |
|
|
<h3>๐ Voice Analysis Metrics</h3> |
|
|
<p>AI analyzes 5 voice characteristics. Each item is scored from 0-100.</p> |
|
|
|
|
|
<div class="metrics-grid"> |
|
|
<div class="metric-item"> |
|
|
<div class="metric-value">Pronun.</div> |
|
|
<div class="metric-label">Pronunciation</div> |
|
|
</div> |
|
|
<div class="metric-item"> |
|
|
<div class="metric-value">Line Acc.</div> |
|
|
<div class="metric-label">Line Accuracy</div> |
|
|
</div> |
|
|
<div class="metric-item"> |
|
|
<div class="metric-value">Pitch</div> |
|
|
<div class="metric-label">Intonation</div> |
|
|
</div> |
|
|
<div class="metric-item"> |
|
|
<div class="metric-value">Rhythm</div> |
|
|
<div class="metric-label">Tempo</div> |
|
|
</div> |
|
|
<div class="metric-item"> |
|
|
<div class="metric-value">Energy</div> |
|
|
<div class="metric-label">Intensity</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="content-card"> |
|
|
<h3>๐ฏ Score Interpretation</h3> |
|
|
<ul> |
|
|
<li><strong>85+ points:</strong> Very similar to the answer! You're almost there!</li> |
|
|
<li><strong>60-84 points:</strong> Good attempt. Check the hints for guidance.</li> |
|
|
<li><strong>40-59 points:</strong> Right direction, but try a different word.</li> |
|
|
<li><strong>Below 40:</strong> Far from the answer. Try a new guess.</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="content-card"> |
|
|
<h3>๐ Viewing Attempt History</h3> |
|
|
<p> |
|
|
All attempts are recorded at the bottom of the screen. You can replay |
|
|
each recording and review scores and AI feedback. Analyze previous |
|
|
attempts to get closer to the answer! |
|
|
</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="chatbot" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon chatbot">๐ค</span> |
|
|
AI Chatbot |
|
|
</h2> |
|
|
|
|
|
<div class="content-card"> |
|
|
<h3>๐ฌ AI Hint Chatbot</h3> |
|
|
<p> |
|
|
Click the floating button at the top right of the screen to open the AI hint chatbot. |
|
|
Request hints from the chatbot to receive indirect clues about the answer. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="content-card"> |
|
|
<h3>๐ฃ๏ธ How to Use the Chatbot</h3> |
|
|
<ul> |
|
|
<li><strong>"Give me a hint":</strong> AI provides a hint about the answer.</li> |
|
|
<li><strong>"What's the category?":</strong> Learn the classification of the answer word.</li> |
|
|
<li><strong>"Tell me the first letter":</strong> Get a hint about the first letter.</li> |
|
|
<li><strong>"What words sound similar?":</strong> Get pronunciation-related suggestions.</li> |
|
|
<li><strong>"Give me an audio hint":</strong> AI provides an audio hint in a tone similar to your voice.</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="tips" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon tips">โจ</span> |
|
|
Tips & Tricks |
|
|
</h2> |
|
|
|
|
|
<div class="content-card"> |
|
|
<h3>๐ High Score Strategies</h3> |
|
|
<ul> |
|
|
<li><strong>Analyze Metrics:</strong> Check which metrics are low and |
|
|
try words with similar characteristics.</li> |
|
|
<li><strong>Identify Category:</strong> Ask the chatbot about the category |
|
|
and guess related words.</li> |
|
|
<li><strong>Score Patterns:</strong> Try words with similar pronunciation |
|
|
to high-scoring attempts.</li> |
|
|
<li><strong>Adjust Energy:</strong> If energy score is low, try speaking more powerfully; |
|
|
if high, try speaking more calmly.</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="tips-box"> |
|
|
<h4>๐ฏ Understanding Metric Hints</h4> |
|
|
<ul> |
|
|
<li><strong>High Pronunciation Score:</strong> Similar syllable structure.</li> |
|
|
<li><strong>High Pitch Score:</strong> Similar intonation pattern.</li> |
|
|
<li><strong>High Rhythm Score:</strong> Similar syllable count and tempo.</li> |
|
|
<li><strong>High Energy Score:</strong> Similar stress placement.</li> |
|
|
</ul> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="faq" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon faq">โ</span> |
|
|
FAQ |
|
|
</h2> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="faq-question" onclick="toggleFaq(this)"> |
|
|
My microphone isn't working |
|
|
<span class="faq-toggle">+</span> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
Check if microphone permission is allowed in your browser settings. |
|
|
Click the lock icon to the left of the address bar and change |
|
|
microphone permission to "Allow" in site settings. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="faq-question" onclick="toggleFaq(this)"> |
|
|
My recording is too short or too long |
|
|
<span class="faq-toggle">+</span> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
The optimal recording length is 2-5 seconds. Pronounce the word clearly once |
|
|
and stop recording. Too short makes analysis difficult, and too long |
|
|
may introduce noise. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="faq-question" onclick="toggleFaq(this)"> |
|
|
My scores are consistently low |
|
|
<span class="faq-toggle">+</span> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
Try recording in a quiet environment and adjust the distance to your microphone. |
|
|
Also, ask the AI chatbot for hints to understand the category or |
|
|
characteristics of the answer before making guesses. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="faq-question" onclick="toggleFaq(this)"> |
|
|
Does the answer change daily? |
|
|
<span class="faq-toggle">+</span> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
Yes, the answer changes to a new word at midnight every day. |
|
|
Challenge yourself once a day to guess the answer! |
|
|
If you don't get it today, try again with a new puzzle tomorrow. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="faq-question" onclick="toggleFaq(this)"> |
|
|
What happens if I give up? |
|
|
<span class="faq-toggle">+</span> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
Pressing the give up button reveals the answer. |
|
|
However, the challenge for that day ends and is recorded as a failure in statistics. |
|
|
Try again with a new puzzle tomorrow! |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function toggleFaq(element) { |
|
|
const faqItem = element.parentElement; |
|
|
faqItem.classList.toggle('active'); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
|
link.addEventListener('click', function(e) { |
|
|
const href = this.getAttribute('href'); |
|
|
if (href.startsWith('#')) { |
|
|
e.preventDefault(); |
|
|
const target = document.querySelector(href); |
|
|
if (target) { |
|
|
target.scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active')); |
|
|
this.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
const sections = document.querySelectorAll('.section'); |
|
|
let current = ''; |
|
|
|
|
|
sections.forEach(section => { |
|
|
const sectionTop = section.offsetTop; |
|
|
if (window.scrollY >= sectionTop - 100) { |
|
|
current = section.getAttribute('id'); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
|
link.classList.remove('active'); |
|
|
if (link.getAttribute('href') === '#' + current) { |
|
|
link.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
