AI Interview Coach

Simulate real interviews. Get scored. Improve fast.

\n\n

\n Job Title\n \n

\n\n

\n Experience Level\n

\n \n \n \n

\n\n

\n Interview Type\n

\n \n \n \n \n

\n\n

\n \n Number of Questions\n 10\n \n \n

\n\n

\n Answer Timer\n \n

\n\n

\n Company Type\n \n

\n\n \n

\n\n \n \n\n \n \n\n \n \n\n \n\n\n",["D",1779026460816],"branchVersion","label",[18],"pulls","branches","forks","envVars",{"_183":40,"_185":26},"connections",{"_183":26,"_184":26},"count","unfilledCount","emptyCount",{"_33":229,"_13":230,"_66":231,"_43":-5,"_35":36,"_173":118,"_196":95,"_37":232,"_39":40,"_68":21,"_170":233,"_69":24,"_174":-5,"_199":234,"_17":235},{"_33":220,"_13":221,"_66":222,"_43":-5,"_35":36,"_173":223,"_196":95,"_37":224,"_39":26,"_68":225,"_170":226,"_69":24,"_174":-5,"_199":227,"_17":228},{"_33":213,"_13":214,"_66":215,"_43":-5,"_35":36,"_173":40,"_196":95,"_37":216,"_39":26,"_68":21,"_170":217,"_69":24,"_174":-5,"_199":218,"_17":219},{"_33":169,"_13":18,"_66":67,"_43":-5,"_35":36,"_173":75,"_196":95,"_37":210,"_39":40,"_68":21,"_170":171,"_69":24,"_174":-5,"_199":211,"_17":212},{"_33":202,"_13":203,"_66":93,"_43":-5,"_35":36,"_173":204,"_196":95,"_37":205,"_39":75,"_68":206,"_170":207,"_69":24,"_174":-5,"_199":208,"_17":209},{"_33":192,"_13":193,"_66":194,"_43":-5,"_35":36,"_173":195,"_196":95,"_37":197,"_39":26,"_68":21,"_170":198,"_69":24,"_174":-5,"_199":200,"_17":201},"0ba0296a-51f9-11f1-bf17-ee650bb23af1","styles.css","0ba02a28-51f9-11f1-bf17-ee650bb23af1",6,"latest",["D",1779026550887],"/* ==========================================================================\n AI Interview Coach — Styles\n Dark professional theme · DM Sans · animations · responsive\n ========================================================================== */\n\n:root {\n --bg: #0f1117;\n --surface: #1a1d2e;\n --surface2: #242840;\n --surface3: #2c3050;\n --accent: #6366f1;\n --accent-2: #818cf8;\n --accent-glow: rgba(99, 102, 241, 0.15);\n --success: #10b981;\n --warning: #f59e0b;\n --danger: #ef4444;\n --text: #e2e8f0;\n --text-muted: #94a3b8;\n --text-dim: #64748b;\n --border: rgba(255, 255, 255, 0.08);\n --border-strong: rgba(255, 255, 255, 0.16);\n --radius: 12px;\n --radius-sm: 8px;\n --radius-lg: 16px;\n --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);\n}\n\n*,\n*::before,\n*::after { box-sizing: border-box; }\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n background: var(--bg);\n color: var(--text);\n font-family: \"DM Sans\", -apple-system, system-ui, sans-serif;\n font-size: 16px;\n line-height: 1.5;\n min-height: 100vh;\n}\n\nbody {\n background:\n radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,0.10), transparent 60%),\n radial-gradient(800px 500px at 100% 100%, rgba(129,140,248,0.06), transparent 60%),\n var(--bg);\n}\n\nh1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }\nh1 { font-size: 2.25rem; }\nh2 { font-size: 1.75rem; }\nh4 { font-size: 1rem; color: var(--text); margin-bottom: 12px; }\np { margin: 0; }\na { color: var(--accent-2); text-decoration: none; }\na:hover { text-decoration: underline; }\nul { padding: 0; margin: 0; list-style: none; }\n\n/* ----- Layout ----- */\n.screen { display: none; min-height: 100vh; padding: 32px 0 80px; }\n.screen.active { display: block; }\n.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }\n\n/* ----- Buttons ----- */\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 20px;\n border-radius: var(--radius-sm);\n border: 1px solid var(--border);\n background: var(--surface2);\n color: var(--text);\n font-family: inherit;\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n.btn:hover { background: var(--surface3); border-color: var(--border-strong); }\n.btn:active { transform: translateY(1px); }\n.btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n.btn-primary {\n background: var(--accent);\n border-color: var(--accent);\n color: white;\n box-shadow: 0 4px 14px var(--accent-glow);\n}\n.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }\n\n.btn-ghost {\n background: transparent;\n border-color: var(--border-strong);\n}\n.btn-ghost:hover { background: rgba(255,255,255,0.04); }\n\n.btn-large {\n padding: 16px 24px;\n font-size: 1.05rem;\n width: 100%;\n margin-top: 8px;\n}\n.btn-small { padding: 6px 12px; font-size: 0.85rem; }\n\n.btn-icon {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: 0.85rem;\n font-family: inherit;\n background: var(--surface2);\n color: var(--text-muted);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n.btn-icon:hover { background: var(--surface3); color: var(--text); }\n.btn-icon.listening {\n background: var(--danger);\n color: white;\n border-color: var(--danger);\n animation: pulse 1.4s infinite;\n}\n\n/* ----- Forms ----- */\n.form-group { margin-bottom: 20px; }\n.form-group label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.9rem;\n font-weight: 500;\n color: var(--text-muted);\n margin-bottom: 8px;\n}\n.form-row {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 16px;\n}\n@media (max-width: 720px) {\n .form-row { grid-template-columns: 1fr; }\n}\n\ninput[type=\"text\"],\nselect,\ntextarea {\n width: 100%;\n padding: 12px 14px;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n color: var(--text);\n font-family: inherit;\n font-size: 0.95rem;\n transition: border-color 0.15s, box-shadow 0.15s;\n}\ninput[type=\"text\"]:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n border-color: var(--accent);\n box-shadow: 0 0 0 3px var(--accent-glow);\n}\n\nselect {\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 36px;\n}\n\ntextarea {\n resize: vertical;\n min-height: 140px;\n line-height: 1.55;\n}\n\ninput[type=\"range\"] {\n width: 100%;\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n margin: 8px 0;\n}\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n height: 6px;\n background: var(--surface3);\n border-radius: 3px;\n}\ninput[type=\"range\"]::-webkit-slider-thumb {\n appearance: none;\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n background: var(--accent);\n border-radius: 50%;\n margin-top: -6px;\n box-shadow: 0 0 0 4px var(--accent-glow);\n cursor: pointer;\n}\ninput[type=\"range\"]::-moz-range-track {\n height: 6px;\n background: var(--surface3);\n border-radius: 3px;\n}\ninput[type=\"range\"]::-moz-range-thumb {\n width: 18px;\n height: 18px;\n background: var(--accent);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n}\n\n.value-badge {\n display: inline-block;\n padding: 2px 10px;\n background: var(--accent-glow);\n color: var(--accent-2);\n border-radius: 999px;\n font-family: \"Space Mono\", monospace;\n font-size: 0.85rem;\n}\n\n/* ----- Chip / button group ----- */\n.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }\n.chip {\n flex: 1;\n padding: 10px 16px;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n color: var(--text-muted);\n cursor: pointer;\n font-family: inherit;\n font-size: 0.9rem;\n transition: all 0.15s ease;\n}\n.chip:hover { background: var(--surface3); color: var(--text); }\n.chip.active {\n background: var(--accent-glow);\n border-color: var(--accent);\n color: var(--accent-2);\n}\n\n/* ----- Interview type cards ----- */\n.type-cards {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 12px;\n}\n@media (max-width: 720px) {\n .type-cards { grid-template-columns: repeat(2, 1fr); }\n}\n.type-card {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n padding: 16px;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n cursor: pointer;\n font-family: inherit;\n color: var(--text);\n text-align: left;\n transition: all 0.15s ease;\n}\n.type-card:hover {\n background: var(--surface3);\n border-color: var(--border-strong);\n transform: translateY(-1px);\n}\n.type-card.active {\n background: var(--accent-glow);\n border-color: var(--accent);\n}\n.type-icon { font-size: 1.5rem; }\n.type-title { font-weight: 600; font-size: 0.95rem; }\n.type-desc { font-size: 0.8rem; color: var(--text-muted); }\n\n/* ----- Setup screen ----- */\n.setup-header {\n text-align: center;\n margin-bottom: 32px;\n}\n.logo-block {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n.logo-emoji { font-size: 2rem; }\n.subtitle { color: var(--text-muted); font-size: 1.05rem; margin-top: 8px; }\n.setup-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n padding: 32px;\n box-shadow: var(--shadow);\n}\n.setup-footer {\n text-align: center;\n margin-top: 24px;\n font-size: 0.85rem;\n color: var(--text-dim);\n}\n\n/* ----- Cards (generic) ----- */\n.card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 20px;\n}\n\n/* ----- Progress bar ----- */\n.progress-bar { margin-bottom: 24px; }\n.progress-info {\n display: flex;\n justify-content: space-between;\n font-size: 0.85rem;\n color: var(--text-muted);\n margin-bottom: 8px;\n}\n.progress-track {\n width: 100%;\n height: 6px;\n background: var(--surface2);\n border-radius: 3px;\n overflow: hidden;\n}\n.progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--accent), var(--accent-2));\n border-radius: 3px;\n transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ----- Interview layout ----- */\n.interview-layout {\n display: grid;\n grid-template-columns: 1fr 320px;\n gap: 24px;\n}\n@media (max-width: 900px) {\n .interview-layout { grid-template-columns: 1fr; }\n}\n.interview-main {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n padding: 24px;\n}\n.interview-side {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.badge-row {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n.type-badge,\n.difficulty-badge {\n padding: 4px 12px;\n background: var(--surface2);\n border-radius: 999px;\n font-size: 0.8rem;\n color: var(--text-muted);\n}\n.difficulty-badge.easy { color: var(--success); background: rgba(16,185,129,0.12); }\n.difficulty-badge.medium { color: var(--warning); background: rgba(245,158,11,0.12); }\n.difficulty-badge.hard { color: var(--danger); background: rgba(239,68,68,0.12); }\n\n.question-box {\n background: var(--surface2);\n border-radius: var(--radius);\n padding: 24px;\n margin-bottom: 20px;\n border-left: 4px solid var(--accent);\n}\n.question-text {\n font-size: 1.15rem;\n line-height: 1.6;\n color: var(--text);\n min-height: 1.6em;\n}\n.question-text.typing::after {\n content: \"▋\";\n display: inline-block;\n color: var(--accent);\n animation: blink 1s steps(2) infinite;\n margin-left: 2px;\n}\n\n.answer-block label {\n display: block;\n font-size: 0.9rem;\n color: var(--text-muted);\n margin-bottom: 8px;\n}\n.textarea-wrap { position: relative; }\n.textarea-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 8px;\n font-size: 0.85rem;\n color: var(--text-muted);\n}\n.char-count { font-family: \"Space Mono\", monospace; }\n\n.actions-row {\n display: flex;\n gap: 12px;\n margin-top: 20px;\n flex-wrap: wrap;\n}\n.actions-row .btn { flex: 0 1 auto; }\n\n.hint-box {\n margin-top: 16px;\n padding: 12px 16px;\n background: rgba(245,158,11,0.08);\n border: 1px solid rgba(245,158,11,0.25);\n border-radius: var(--radius-sm);\n color: #fcd34d;\n font-size: 0.92rem;\n}\n\n/* ----- Sidebar cards ----- */\n.interviewer-card {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--accent-glow);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n}\n.avatar-name { font-weight: 600; }\n.avatar-sub { font-size: 0.85rem; color: var(--text-muted); }\n\n.tips-card ul li {\n position: relative;\n padding: 6px 0 6px 18px;\n font-size: 0.88rem;\n color: var(--text-muted);\n line-height: 1.45;\n}\n.tips-card ul li::before {\n content: \"•\";\n position: absolute;\n left: 4px;\n color: var(--accent);\n}\n\n.stats-card .stat-row {\n display: flex;\n justify-content: space-between;\n padding: 6px 0;\n font-size: 0.88rem;\n color: var(--text-muted);\n border-bottom: 1px solid var(--border);\n}\n.stats-card .stat-row:last-child { border-bottom: none; }\n.stat-value {\n font-family: \"Space Mono\", monospace;\n color: var(--text);\n}\n\n/* ----- Timer ----- */\n.timer-card {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n.timer-svg {\n width: 64px;\n height: 64px;\n transform: rotate(-90deg);\n}\n.timer-track-circle {\n fill: none;\n stroke: var(--surface2);\n stroke-width: 4;\n}\n.timer-progress-circle {\n fill: none;\n stroke: var(--accent);\n stroke-width: 4;\n stroke-linecap: round;\n stroke-dasharray: 175.93;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s linear, stroke 0.3s;\n}\n.timer-display {\n font-family: \"Space Mono\", monospace;\n font-size: 1.4rem;\n font-weight: 700;\n}\n.timer-display.timer-danger { color: var(--danger); }\n.timer-card.timer-danger .timer-progress-circle { stroke: var(--danger); }\n\n/* ----- Feedback ----- */\n.feedback-header { margin-bottom: 20px; }\n.muted { color: var(--text-muted); font-size: 0.9rem; }\n\n.score-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 12px;\n margin-bottom: 20px;\n}\n@media (max-width: 720px) {\n .score-grid { grid-template-columns: repeat(2, 1fr); }\n}\n.score-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 16px;\n text-align: center;\n}\n.score-label {\n font-size: 0.85rem;\n color: var(--text-muted);\n margin-bottom: 8px;\n}\n.score-value {\n font-family: \"Space Mono\", monospace;\n font-size: 2rem;\n font-weight: 700;\n color: var(--text);\n margin-bottom: 8px;\n}\n.score-bar {\n height: 6px;\n background: var(--surface2);\n border-radius: 3px;\n overflow: hidden;\n}\n.score-bar > div {\n height: 100%;\n width: 0;\n background: var(--accent);\n transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.overall-box {\n display: flex;\n align-items: baseline;\n justify-content: center;\n gap: 8px;\n padding: 24px;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n margin-bottom: 20px;\n}\n.overall-label {\n font-size: 1rem;\n color: var(--text-muted);\n margin-right: 8px;\n}\n.overall-value {\n font-family: \"Space Mono\", monospace;\n font-size: 3rem;\n font-weight: 700;\n}\n.overall-value.good { color: var(--success); }\n.overall-value.ok { color: var(--warning); }\n.overall-value.bad { color: var(--danger); }\n.overall-suffix { color: var(--text-muted); font-size: 1.25rem; }\n\n.feedback-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 20px;\n}\n@media (max-width: 720px) {\n .feedback-grid { grid-template-columns: 1fr; }\n}\n.bullet-list li {\n padding: 8px 0;\n padding-left: 24px;\n position: relative;\n font-size: 0.92rem;\n line-height: 1.5;\n}\n.feedback-section:nth-child(1) .bullet-list li::before {\n content: \"✓\";\n position: absolute;\n left: 0;\n color: var(--success);\n font-weight: 700;\n}\n.feedback-section:nth-child(2) .bullet-list li::before {\n content: \"↗\";\n position: absolute;\n left: 0;\n color: var(--warning);\n font-weight: 700;\n}\n\n.tip-box {\n display: flex;\n gap: 12px;\n padding: 16px 20px;\n background: var(--accent-glow);\n border-left: 4px solid var(--accent);\n border-radius: var(--radius-sm);\n margin-bottom: 20px;\n}\n.tip-icon { font-size: 1.5rem; flex-shrink: 0; }\n\n.model-answer {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n margin-bottom: 20px;\n}\n.model-answer summary {\n padding: 16px 20px;\n cursor: pointer;\n font-weight: 500;\n user-select: none;\n}\n.model-answer summary:hover { background: var(--surface2); }\n.model-answer-body { padding: 0 20px 20px; }\n.model-answer-body blockquote {\n margin: 0 0 12px;\n padding: 16px;\n background: var(--surface2);\n border-left: 3px solid var(--accent);\n border-radius: var(--radius-sm);\n font-style: italic;\n line-height: 1.6;\n color: var(--text-muted);\n}\n\n/* ----- Results ----- */\n.results-hero {\n text-align: center;\n padding: 32px;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n margin-bottom: 24px;\n}\n.hero-score {\n font-family: \"Space Mono\", monospace;\n font-size: 4.5rem;\n font-weight: 700;\n line-height: 1;\n margin: 16px 0 8px;\n}\n.hero-score.good { color: var(--success); }\n.hero-score.ok { color: var(--warning); }\n.hero-score.bad { color: var(--danger); }\n.hero-label { color: var(--text-muted); font-size: 1.1rem; }\n.hero-stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 12px;\n margin-top: 24px;\n}\n@media (max-width: 720px) {\n .hero-stats { grid-template-columns: repeat(2, 1fr); }\n}\n.hero-stats > div {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 12px;\n background: var(--surface2);\n border-radius: var(--radius-sm);\n}\n.hero-stats span { font-size: 0.8rem; color: var(--text-muted); }\n.hero-stats strong { font-family: \"Space Mono\", monospace; font-size: 1.1rem; }\n\n.chart-card { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }\n.chart-card canvas { max-width: 100%; height: auto; }\n\n.table-wrap { overflow-x: auto; }\n.q-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.9rem;\n}\n.q-table th,\n.q-table td {\n text-align: left;\n padding: 12px 8px;\n border-bottom: 1px solid var(--border);\n}\n.q-table th {\n color: var(--text-muted);\n font-weight: 500;\n font-size: 0.85rem;\n}\n.q-table tr.q-row { cursor: pointer; }\n.q-table tr.q-row:hover { background: var(--surface2); }\n.q-table tr.expanded-row td {\n background: var(--surface2);\n padding: 16px;\n font-size: 0.88rem;\n color: var(--text-muted);\n line-height: 1.6;\n}\n.score-pill {\n display: inline-block;\n padding: 2px 10px;\n border-radius: 999px;\n font-family: \"Space Mono\", monospace;\n font-size: 0.8rem;\n}\n.score-pill.good { background: rgba(16,185,129,0.18); color: var(--success); }\n.score-pill.ok { background: rgba(245,158,11,0.18); color: var(--warning); }\n.score-pill.bad { background: rgba(239,68,68,0.18); color: var(--danger); }\n.score-pill.skip { background: var(--surface3); color: var(--text-muted); }\n\n.rec-item {\n padding: 12px 0;\n border-bottom: 1px solid var(--border);\n}\n.rec-item:last-child { border-bottom: none; }\n.rec-head {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 4px;\n font-weight: 600;\n}\n.rec-priority {\n font-size: 0.75rem;\n padding: 2px 8px;\n border-radius: 999px;\n text-transform: uppercase;\n font-weight: 700;\n}\n.rec-priority.high { background: rgba(239,68,68,0.18); color: var(--danger); }\n.rec-priority.medium { background: rgba(245,158,11,0.18); color: var(--warning); }\n.rec-priority.low { background: rgba(16,185,129,0.18); color: var(--success); }\n.rec-body { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }\n.rec-resource { margin-top: 4px; font-size: 0.85rem; color: var(--accent-2); }\n\n/* ----- Loading overlay ----- */\n.loading-overlay {\n position: fixed;\n inset: 0;\n background: rgba(15, 17, 23, 0.85);\n backdrop-filter: blur(6px);\n z-index: 5000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.loading-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n padding: 32px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n min-width: 280px;\n}\n.spinner {\n width: 48px;\n height: 48px;\n border: 3px solid var(--surface3);\n border-top-color: var(--accent);\n border-radius: 50%;\n animation: spinCw 0.9s linear infinite;\n}\n\n/* ----- Toasts ----- */\n#toast-container {\n position: fixed;\n bottom: 24px;\n right: 24px;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n gap: 8px;\n pointer-events: none;\n}\n.toast {\n padding: 12px 18px;\n border-radius: var(--radius-sm);\n font-size: 0.9rem;\n color: #fff;\n opacity: 0;\n transform: translateY(8px);\n transition: all 0.3s ease;\n max-width: 320px;\n box-shadow: var(--shadow);\n pointer-events: auto;\n}\n.toast.show { opacity: 1; transform: translateY(0); }\n.toast-info { background: #1e40af; }\n.toast-success { background: #065f46; }\n.toast-warning { background: #92400e; }\n.toast-danger { background: #991b1b; }\n\n/* ----- Animations ----- */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n}\n@keyframes pulse {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }\n 50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }\n}\n@keyframes blink {\n to { opacity: 0; }\n}\n@keyframes spinCw {\n to { transform: rotate(360deg); }\n}\n\n.fade-in { animation: fadeIn 0.4s ease forwards; }\n.stagger-1 { animation-delay: 0.05s; opacity: 0; }\n.stagger-2 { animation-delay: 0.15s; opacity: 0; }\n.stagger-3 { animation-delay: 0.25s; opacity: 0; }\n.stagger-4 { animation-delay: 0.35s; opacity: 0; }\n","children",[],[193],"9749ba1c-51f9-11f1-96f0-ee650bb23af1","main.tsx",11,["D",1779026785199],"http","import { Hono } from \"npm:hono\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Full stack traces on errors\napp.onError((err) => Promise.reject(err));\n\n// Use OpenRouter's free-models router — it automatically picks an available\n// free model and survives deprecations of individual models.\n// https://openrouter.ai/openrouter/free\nconst MODEL = \"openrouter/free\";\n\n/**\n * Proxy endpoint for OpenRouter chat completions.\n * Keeps the API key on the server (never exposed to the browser).\n * Body: { messages, stream? }\n * - If stream=true, returns the raw OpenRouter SSE stream.\n * - Otherwise returns the JSON response.\n */\napp.post(\"/api/ai\", async (c) => {\n const apiKey = Deno.env.get(\"OPENROUTER_API_KEY\");\n if (!apiKey) {\n return c.json({ error: \"OPENROUTER_API_KEY not configured\" }, 500);\n }\n\n let body: { messages?: unknown; stream?: boolean; model?: string };\n try {\n body = await c.req.json();\n } catch {\n return c.json({ error: \"Invalid JSON body\" }, 400);\n }\n\n const messages = body.messages;\n if (!Array.isArray(messages) || messages.length === 0) {\n return c.json({ error: \"messages must be a non-empty array\" }, 400);\n }\n\n const stream = body.stream === true;\n\n const upstream = await fetch(\"https://openrouter.ai/api/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`,\n \"Content-Type\": \"application/json\",\n \"HTTP-Referer\": \"https://val.town\",\n \"X-Title\": \"AI Interview Coach\",\n },\n body: JSON.stringify({\n model: body.model || MODEL,\n stream,\n messages,\n }),\n });\n\n if (!upstream.ok) {\n const text = await upstream.text();\n console.error(\"OpenRouter upstream error\", upstream.status, text);\n return c.json(\n { error: \"Upstream error\", status: upstream.status, body: text },\n 502,\n );\n }\n\n if (stream) {\n // Pipe the SSE stream straight back to the browser\n return new Response(upstream.body, {\n status: 200,\n headers: {\n \"Content-Type\": \"text/event-stream; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n const json = await upstream.json();\n return c.json(json);\n});\n\n// Redirect to the val source on Val Town\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Serve static frontend files\napp.get(\"/\", (c) => serveFile(\"./index.html\", import.meta.url));\napp.get(\"/index.html\", (c) => serveFile(\"./index.html\", import.meta.url));\napp.get(\"/styles.css\", (c) => serveFile(\"./styles.css\", import.meta.url));\napp.get(\"/app.js\", (c) => serveFile(\"./app.js\", import.meta.url));\napp.get(\"/favicon.svg\", (c) => serveFile(\"./favicon.svg\", import.meta.url));\n\nexport default app.fetch;\n",[],[203],["D",1779026460816],[],[18],"abc0ef7a-51f8-11f1-954b-ee650bb23af1","favicon.svg","019e363c-6c13-7621-bfd9-8c305625455d",["D",1779026389980],"",[],[214],"6a30b5bc-51f9-11f1-a650-ee650bb23af1","app.js","6a30b684-51f9-11f1-a650-ee650bb23af1",7,["D",1779026709540],"script","/* ==========================================================================\n AI Interview Coach — Client Logic (vanilla JS, no frameworks)\n ========================================================================== */\n\nconst API_URL = \"/api/ai\";\nconst SESSION_KEY = \"aic_session_v1\";\n\n// ----- Global state ---------------------------------------------------------\n\nconst AppState = {\n config: {\n jobTitle: \"\",\n level: \"Mid-Level\",\n type: \"Behavioral\",\n companyType: \"Any\",\n totalQuestions: 10,\n timerDuration: 0,\n },\n questions: [],\n currentIndex: 0,\n answers: [],\n feedbacks: [],\n sessionStartTime: null,\n currentScreen: \"setup\",\n isLoading: false,\n timerInterval: null,\n timerSeconds: 0,\n recognition: null,\n isListening: false,\n abortController: null,\n\n get avgScore() {\n const valid = this.feedbacks.filter((f) => f && typeof f.overall === \"number\");\n if (!valid.length) return 0;\n const sum = valid.reduce((a, f) => a + f.overall, 0);\n return (sum / valid.length).toFixed(1);\n },\n};\n\n// ----- DOM utilities --------------------------------------------------------\n\nconst $ = (id) => document.getElementById(id);\nconst $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));\n\nfunction showScreen(name) {\n [\"setup\", \"interview\", \"feedback\", \"results\"].forEach((s) => {\n const el = $(`screen-${s}`);\n if (!el) return;\n if (s === name) {\n el.style.display = \"block\";\n el.classList.add(\"active\");\n } else {\n el.style.display = \"none\";\n el.classList.remove(\"active\");\n }\n });\n AppState.currentScreen = name;\n window.scrollTo({ top: 0, behavior: \"smooth\" });\n}\n\nfunction showToast(message, type = \"info\") {\n const toast = document.createElement(\"div\");\n toast.className = `toast toast-${type}`;\n toast.textContent = message;\n $(\"toast-container\").appendChild(toast);\n requestAnimationFrame(() => toast.classList.add(\"show\"));\n setTimeout(() => {\n toast.classList.remove(\"show\");\n setTimeout(() => toast.remove(), 300);\n }, 3500);\n}\n\nconst LOADING_MESSAGES = [\n \"Generating your questions...\",\n \"The AI interviewer is thinking...\",\n \"Evaluating your answer...\",\n \"Preparing feedback...\",\n];\nlet loadingMsgInterval = null;\n\nfunction showLoading(initialMessage) {\n AppState.isLoading = true;\n const overlay = $(\"screen-loading\");\n const msg = $(\"loading-message\");\n msg.textContent = initialMessage || LOADING_MESSAGES[0];\n overlay.style.display = \"flex\";\n let i = 0;\n clearInterval(loadingMsgInterval);\n loadingMsgInterval = setInterval(() => {\n i = (i + 1) % LOADING_MESSAGES.length;\n msg.textContent = LOADING_MESSAGES[i];\n }, 2500);\n}\n\nfunction hideLoading() {\n AppState.isLoading = false;\n clearInterval(loadingMsgInterval);\n $(\"screen-loading\").style.display = \"none\";\n}\n\nfunction cancelRequest() {\n if (AppState.abortController) {\n AppState.abortController.abort();\n AppState.abortController = null;\n }\n hideLoading();\n}\n\n// ----- API ------------------------------------------------------------------\n\n/**\n * Streaming AI call. Calls onChunk(token, fullText) as tokens stream in.\n * Returns the full string.\n */\nasync function callAI(messages, onChunk, signal) {\n const response = await fetch(API_URL, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ messages, stream: true }),\n signal,\n });\n if (!response.ok) {\n const errBody = await response.text().catch(() => \"\");\n throw new Error(`API error ${response.status}: ${errBody}`);\n }\n const reader = response.body.getReader();\n const decoder = new TextDecoder();\n let fullText = \"\";\n let buffer = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() || \"\"; // keep last incomplete line\n for (const rawLine of lines) {\n const line = rawLine.trim();\n if (!line || !line.startsWith(\"data:\")) continue;\n const data = line.slice(5).trim();\n if (data === \"[DONE]\") continue;\n try {\n const parsed = JSON.parse(data);\n const token = parsed.choices?.[0]?.delta?.content || \"\";\n if (token) {\n fullText += token;\n if (onChunk) onChunk(token, fullText);\n }\n } catch {\n // Ignore non-JSON keep-alive lines\n }\n }\n }\n return fullText;\n}\n\n/**\n * Non-streaming AI call that expects JSON back. Strips markdown fences if present.\n */\nasync function callAIJSON(messages, signal) {\n const response = await fetch(API_URL, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ messages, stream: false }),\n signal,\n });\n if (!response.ok) {\n const errBody = await response.text().catch(() => \"\");\n throw new Error(`API error ${response.status}: ${errBody}`);\n }\n const data = await response.json();\n const raw = data.choices?.[0]?.message?.content || \"\";\n return parseLooseJSON(raw);\n}\n\nfunction parseLooseJSON(raw) {\n let s = String(raw).trim();\n // Strip markdown fences\n s = s.replace(/```json/gi, \"\").replace(/```/g, \"\").trim();\n // Try direct parse\n try { return JSON.parse(s); } catch {}\n // Try to extract the first {...} or [...]\n const firstObj = s.indexOf(\"{\");\n const firstArr = s.indexOf(\"[\");\n let start = -1;\n if (firstObj === -1) start = firstArr;\n else if (firstArr === -1) start = firstObj;\n else start = Math.min(firstObj, firstArr);\n if (start === -1) throw new Error(\"No JSON found in response\");\n const openChar = s[start];\n const closeChar = openChar === \"{\" ? \"}\" : \"]\";\n const end = s.lastIndexOf(closeChar);\n if (end > start) {\n const slice = s.slice(start, end + 1);\n return JSON.parse(slice);\n }\n throw new Error(\"Failed to parse JSON: \" + s.slice(0, 120));\n}\n\n// ----- Prompts --------------------------------------------------------------\n\nconst QUESTION_GEN_PROMPT = (cfg) => `Generate exactly ${cfg.totalQuestions} interview questions for this candidate profile:\n\n- Job title: \"${cfg.jobTitle}\"\n- Experience level: \"${cfg.level}\" (Junior / Mid-Level / Senior)\n- Interview type: \"${cfg.type}\" (Technical / Behavioral / System Design / HR)\n- Company type: \"${cfg.companyType}\"\n\nReturn ONLY a valid JSON array — no explanation, no markdown, no extra text:\n\n[\n {\n \"id\": 1,\n \"question\": \"Full question text here\",\n \"difficulty\": \"easy\",\n \"type\": \"${cfg.type.toLowerCase()}\",\n \"hint\": \"One sentence hint without giving away the answer\",\n \"keywords\": [\"keyword1\", \"keyword2\"]\n }\n]\n\nRules:\n- Mix difficulties: 30% easy, 50% medium, 20% hard\n- Make questions highly specific to the job title given\n- Behavioral questions must be answerable using the STAR method\n- System Design: name a real product to design (WhatsApp, URL shortener, Netflix, etc.)\n- Technical questions must match the experience level difficulty\n- HR questions cover: strengths/weaknesses, salary expectations, 5-year goals, culture fit\n- NO duplicate topics across questions\n- hint must not reveal the full answer`;\n\nconst FEEDBACK_PROMPT = (q, ans, type, job) => `You are a strict but fair senior interviewer evaluating a candidate's answer.\n\nQuestion: \"${q}\"\nCandidate's answer: \"${ans}\"\nInterview type: \"${type}\"\nRole being interviewed for: \"${job}\"\n\nEvaluate the answer and return ONLY a valid JSON object — no markdown, no explanation:\n\n{\n \"scores\": {\n \"clarity\": ,\n \"depth\": ,\n \"relevance\": ,\n \"star_structure\": \n },\n \"overall\": ,\n \"strengths\": [\"strength 1\", \"strength 2\", \"strength 3\"],\n \"improvements\": [\"improvement 1\", \"improvement 2\", \"improvement 3\"],\n \"tip\": \"One concise, actionable coaching tip (max 2 sentences)\",\n \"model_answer\": \"A strong ideal answer in 4-6 sentences, specific to this question\"\n}\n\nEvaluation rules:\n- clarity: How clearly and concisely was the answer communicated?\n- depth: Was there technical depth, examples, and detail?\n- relevance: Did the answer actually address what was asked?\n- star_structure: For behavioral, did they use Situation/Task/Action/Result? For others, score 7 if logically structured.\n- Be realistic — perfect scores (10) should be rare. Average answers get 5-6.\n- model_answer must be specific to the exact question, not generic advice.\n- Strengths and improvements must each have exactly 3 items.`;\n\nconst RECOMMENDATIONS_PROMPT = (sd) => `A candidate just completed a mock interview session. Based on their performance, give personalized study recommendations.\n\nSession data:\n- Role: ${sd.jobTitle}\n- Interview type: ${sd.type}\n- Average scores: Clarity ${sd.avgClarity}/10, Depth ${sd.avgDepth}/10, Relevance ${sd.avgRelevance}/10, Structure ${sd.avgStructure}/10\n- Weakest questions (scored below 6): ${sd.weakQuestions.join(\"; \") || \"none\"}\n- Overall average: ${sd.overallAvg}/10\n\nReturn ONLY a JSON array of 5 recommendations — no extra text:\n\n[\n {\n \"area\": \"Short area name (e.g. STAR Method)\",\n \"priority\": \"high|medium|low\",\n \"suggestion\": \"Specific, actionable advice in 2-3 sentences\",\n \"resource\": \"Name of a free resource (e.g. 'LeetCode Easy problems')\"\n }\n]`;\n\n// ----- Session persistence --------------------------------------------------\n\nfunction saveSession() {\n try {\n sessionStorage.setItem(SESSION_KEY, JSON.stringify({\n config: AppState.config,\n questions: AppState.questions,\n currentIndex: AppState.currentIndex,\n answers: AppState.answers,\n feedbacks: AppState.feedbacks,\n sessionStartTime: AppState.sessionStartTime,\n currentScreen: AppState.currentScreen,\n }));\n } catch {}\n}\n\nfunction loadSession() {\n try {\n const raw = sessionStorage.getItem(SESSION_KEY);\n if (!raw) return false;\n const saved = JSON.parse(raw);\n if (!saved.questions?.length) return false;\n Object.assign(AppState, saved);\n return true;\n } catch { return false; }\n}\n\nfunction clearSession() {\n sessionStorage.removeItem(SESSION_KEY);\n}\n\n// ----- Setup screen logic ---------------------------------------------------\n\nfunction initSetupScreen() {\n // Slider live value\n const slider = $(\"input-question-count\");\n const sliderVal = $(\"question-count-value\");\n slider.addEventListener(\"input\", () => {\n sliderVal.textContent = slider.value;\n AppState.config.totalQuestions = parseInt(slider.value, 10);\n });\n\n // Chip / type-card button groups (delegated)\n $$(`.btn-group, .type-cards`).forEach((group) => {\n const key = group.dataset.group;\n group.addEventListener(\"click\", (e) => {\n const btn = e.target.closest(\"button[data-value]\");\n if (!btn) return;\n group.querySelectorAll(\"button\").forEach((b) => b.classList.remove(\"active\"));\n btn.classList.add(\"active\");\n AppState.config[key] = btn.dataset.value;\n });\n });\n\n // Other inputs\n $(\"input-job-title\").addEventListener(\"input\", (e) => {\n AppState.config.jobTitle = e.target.value.trim();\n });\n $(\"select-timer\").addEventListener(\"change\", (e) => {\n AppState.config.timerDuration = parseInt(e.target.value, 10);\n });\n $(\"select-company\").addEventListener(\"change\", (e) => {\n AppState.config.companyType = e.target.value;\n });\n\n // Start button\n $(\"btn-start\").addEventListener(\"click\", onStartInterview);\n}\n\nasync function onStartInterview() {\n const cfg = AppState.config;\n if (!cfg.jobTitle) {\n showToast(\"Please enter a job title.\", \"warning\");\n $(\"input-job-title\").focus();\n return;\n }\n\n AppState.abortController = new AbortController();\n showLoading(\"Generating your questions...\");\n\n try {\n const messages = [\n { role: \"system\", content: \"You are an expert interview question generator. Always return valid JSON only.\" },\n { role: \"user\", content: QUESTION_GEN_PROMPT(cfg) },\n ];\n const parsed = await callAIJSON(messages, AppState.abortController.signal);\n const questions = Array.isArray(parsed) ? parsed : (parsed.questions || []);\n if (!questions.length) throw new Error(\"No questions returned\");\n\n AppState.questions = questions.slice(0, cfg.totalQuestions).map((q, i) => ({\n id: q.id ?? i + 1,\n question: q.question || \"\",\n difficulty: (q.difficulty || \"medium\").toLowerCase(),\n type: q.type || cfg.type,\n hint: q.hint || \"\",\n keywords: q.keywords || [],\n }));\n AppState.currentIndex = 0;\n AppState.answers = [];\n AppState.feedbacks = [];\n AppState.sessionStartTime = Date.now();\n saveSession();\n hideLoading();\n enterInterviewScreen();\n } catch (err) {\n hideLoading();\n if (err.name === \"AbortError\") return;\n console.error(err);\n showToast(\"Failed to generate questions. \" + err.message, \"danger\");\n }\n}\n\n// ----- Interview screen logic -----------------------------------------------\n\nfunction enterInterviewScreen() {\n showScreen(\"interview\");\n renderInterviewerCard();\n renderTips();\n renderCurrentQuestion();\n updateStats();\n}\n\nfunction renderInterviewerCard() {\n $(\"avatar-role\").textContent = `${AppState.config.level} · ${AppState.config.type}`;\n}\n\nconst TIPS = {\n Behavioral: [\n \"Use STAR: Situation → Task → Action → Result\",\n \"Cite a specific example, not a general statement\",\n \"Quantify the outcome when possible\",\n ],\n Technical: [\n \"Think out loud — explain your reasoning\",\n \"Clarify edge cases before diving in\",\n \"State trade-offs of your approach\",\n ],\n \"System Design\": [\n \"Clarify requirements before designing\",\n \"Estimate scale (users, QPS, storage)\",\n \"Discuss trade-offs and bottlenecks\",\n ],\n HR: [\n \"Be honest and specific with examples\",\n \"Tie answers back to the role\",\n \"Show enthusiasm but stay realistic\",\n ],\n};\n\nfunction renderTips() {\n const tips = TIPS[AppState.config.type] || TIPS.Behavioral;\n const ul = $(\"tips-list\");\n ul.innerHTML = \"\";\n tips.forEach((t) => {\n const li = document.createElement(\"li\");\n li.textContent = t;\n ul.appendChild(li);\n });\n}\n\nconst TYPE_EMOJI = {\n Technical: \"💻\",\n Behavioral: \"🗣️\",\n \"System Design\": \"🏗️\",\n HR: \"👔\",\n};\n\nfunction renderCurrentQuestion() {\n const q = AppState.questions[AppState.currentIndex];\n if (!q) { finishSession(); return; }\n\n // Progress\n const total = AppState.questions.length;\n const num = AppState.currentIndex + 1;\n $(\"progress-label\").textContent = `Question ${num} of ${total}`;\n const pct = Math.round((num / total) * 100);\n $(\"progress-percent\").textContent = `${pct}%`;\n $(\"progress-fill\").style.width = `${pct}%`;\n\n // Badges\n $(\"type-badge\").textContent = `${TYPE_EMOJI[AppState.config.type] || \"❓\"} ${AppState.config.type}`;\n const diffEl = $(\"difficulty-badge\");\n diffEl.textContent = (q.difficulty || \"medium\").replace(/^./, (c) => c.toUpperCase());\n diffEl.className = `difficulty-badge ${(q.difficulty || \"medium\").toLowerCase()}`;\n\n // Question with typewriter effect\n typewrite($(\"question-text\"), q.question);\n\n // Reset answer area\n const ta = $(\"answer-input\");\n ta.value = \"\";\n ta.dataset.confirmed = \"\";\n $(\"char-count\").textContent = \"0\";\n $(\"hint-box\").style.display = \"none\";\n $(\"hint-box\").textContent = \"\";\n\n // Stop any voice\n if (AppState.isListening) stopVoiceInput();\n\n // Timer\n setupTimer();\n}\n\nfunction typewrite(el, text) {\n el.textContent = \"\";\n el.classList.add(\"typing\");\n let i = 0;\n const step = () => {\n if (i >= text.length) {\n el.classList.remove(\"typing\");\n return;\n }\n el.textContent = text.slice(0, i + 1);\n i++;\n setTimeout(step, 18);\n };\n step();\n}\n\nfunction setupTimer() {\n const sec = AppState.config.timerDuration;\n const card = $(\"timer-card\");\n if (!sec || sec <= 0) {\n card.style.display = \"none\";\n return;\n }\n card.style.display = \"flex\";\n startTimer(sec);\n}\n\nfunction startTimer(seconds) {\n AppState.timerSeconds = seconds;\n clearInterval(AppState.timerInterval);\n\n const timerEl = $(\"timer-display\");\n const timerCard = $(\"timer-card\");\n const timerCircle = $(\"timer-circle\");\n const totalDash = 2 * Math.PI * 28;\n timerCircle.style.strokeDasharray = totalDash;\n timerCircle.style.strokeDashoffset = 0;\n timerEl.classList.remove(\"timer-danger\");\n timerCard.classList.remove(\"timer-danger\");\n\n const render = () => {\n const mins = Math.floor(AppState.timerSeconds / 60);\n const secs = AppState.timerSeconds % 60;\n timerEl.textContent = `${mins}:${secs.toString().padStart(2, \"0\")}`;\n const progress = AppState.timerSeconds / seconds;\n timerCircle.style.strokeDashoffset = totalDash * (1 - progress);\n if (AppState.timerSeconds <= 15) {\n timerEl.classList.add(\"timer-danger\");\n timerCard.classList.add(\"timer-danger\");\n }\n };\n render();\n\n AppState.timerInterval = setInterval(() => {\n AppState.timerSeconds--;\n render();\n if (AppState.timerSeconds <= 0) {\n clearInterval(AppState.timerInterval);\n showToast(\"Time's up! Submitting your answer...\", \"warning\");\n setTimeout(onSubmitAnswer, 1200);\n }\n }, 1000);\n}\n\nfunction stopTimer() {\n clearInterval(AppState.timerInterval);\n}\n\nfunction updateStats() {\n $(\"stat-avg\").textContent = AppState.avgScore || \"—\";\n const answered = AppState.feedbacks.filter((f) => f).length;\n const skipped = AppState.answers.filter((a) => a === null).length;\n $(\"stat-answered\").textContent = answered;\n $(\"stat-skipped\").textContent = skipped;\n $(\"stat-remaining\").textContent = Math.max(0, AppState.questions.length - AppState.currentIndex);\n}\n\nfunction initInterviewScreen() {\n const ta = $(\"answer-input\");\n ta.addEventListener(\"input\", () => {\n $(\"char-count\").textContent = ta.value.length;\n autoResize(ta);\n });\n\n $(\"btn-submit\").addEventListener(\"click\", onSubmitAnswer);\n $(\"btn-skip\").addEventListener(\"click\", onSkipQuestion);\n $(\"btn-hint\").addEventListener(\"click\", onShowHint);\n $(\"btn-voice\").addEventListener(\"click\", toggleVoiceInput);\n}\n\nfunction autoResize(ta) {\n ta.style.height = \"auto\";\n ta.style.height = Math.min(ta.scrollHeight, 480) + \"px\";\n}\n\nasync function onSubmitAnswer() {\n const ta = $(\"answer-input\");\n const answer = ta.value.trim();\n if (!answer) {\n showToast(\"Write an answer first, or skip the question.\", \"warning\");\n return;\n }\n stopTimer();\n AppState.answers[AppState.currentIndex] = answer;\n saveSession();\n AppState.abortController = new AbortController();\n showLoading(\"Evaluating your answer...\");\n\n try {\n const q = AppState.questions[AppState.currentIndex];\n const messages = [\n { role: \"system\", content: \"You are a strict but fair senior interviewer. Always return valid JSON only.\" },\n { role: \"user\", content: FEEDBACK_PROMPT(q.question, answer, AppState.config.type, AppState.config.jobTitle) },\n ];\n const fb = await callAIJSON(messages, AppState.abortController.signal);\n AppState.feedbacks[AppState.currentIndex] = normalizeFeedback(fb);\n saveSession();\n hideLoading();\n renderFeedback();\n } catch (err) {\n hideLoading();\n if (err.name === \"AbortError\") return;\n console.error(err);\n showToast(\"Failed to evaluate. \" + err.message, \"danger\");\n }\n}\n\nfunction normalizeFeedback(fb) {\n const s = fb.scores || {};\n const clamp = (n) => {\n const v = Math.round(Number(n));\n if (isNaN(v)) return 5;\n return Math.max(1, Math.min(10, v));\n };\n return {\n scores: {\n clarity: clamp(s.clarity),\n depth: clamp(s.depth),\n relevance: clamp(s.relevance),\n star_structure: clamp(s.star_structure ?? s.structure),\n },\n overall: typeof fb.overall === \"number\"\n ? fb.overall\n : parseFloat((( clamp(s.clarity) + clamp(s.depth) + clamp(s.relevance) + clamp(s.star_structure ?? s.structure) ) / 4).toFixed(1)),\n strengths: Array.isArray(fb.strengths) ? fb.strengths.slice(0, 3) : [],\n improvements: Array.isArray(fb.improvements) ? fb.improvements.slice(0, 3) : [],\n tip: fb.tip || \"\",\n model_answer: fb.model_answer || \"\",\n };\n}\n\nfunction onSkipQuestion() {\n stopTimer();\n AppState.answers[AppState.currentIndex] = null;\n AppState.feedbacks[AppState.currentIndex] = null;\n saveSession();\n advanceQuestion();\n}\n\nfunction onShowHint() {\n const q = AppState.questions[AppState.currentIndex];\n if (!q?.hint) {\n showToast(\"No hint available for this question.\", \"info\");\n return;\n }\n const box = $(\"hint-box\");\n box.textContent = `💡 ${q.hint}`;\n box.style.display = \"block\";\n}\n\nfunction advanceQuestion() {\n AppState.currentIndex++;\n if (AppState.currentIndex >= AppState.questions.length) {\n finishSession();\n } else {\n renderCurrentQuestion();\n updateStats();\n showScreen(\"interview\");\n }\n}\n\n// ----- Feedback screen ------------------------------------------------------\n\nfunction renderFeedback() {\n const idx = AppState.currentIndex;\n const q = AppState.questions[idx];\n const fb = AppState.feedbacks[idx];\n if (!fb) return;\n\n $(\"feedback-question-preview\").textContent = `Q${idx + 1}: ${q.question}`;\n\n // Score numbers + bars (animated)\n animateScore(\"score-clarity\", \"bar-clarity\", fb.scores.clarity);\n animateScore(\"score-depth\", \"bar-depth\", fb.scores.depth);\n animateScore(\"score-relevance\", \"bar-relevance\", fb.scores.relevance);\n animateScore(\"score-structure\", \"bar-structure\", fb.scores.star_structure);\n\n // Structure label (rename for non-behavioral)\n $(\"structure-label\").textContent =\n AppState.config.type === \"Behavioral\" ? \"STAR\" : \"Structure\";\n\n // Overall\n const overallEl = $(\"overall-value\");\n overallEl.classList.remove(\"good\", \"ok\", \"bad\");\n const o = fb.overall;\n overallEl.classList.add(o >= 8 ? \"good\" : o >= 5 ? \"ok\" : \"bad\");\n animateCount(overallEl, 0, o, 900, 1);\n\n // Strengths\n const sUl = $(\"strengths-list\");\n sUl.innerHTML = \"\";\n fb.strengths.forEach((s) => {\n const li = document.createElement(\"li\");\n li.textContent = s;\n sUl.appendChild(li);\n });\n\n const iUl = $(\"improvements-list\");\n iUl.innerHTML = \"\";\n fb.improvements.forEach((s) => {\n const li = document.createElement(\"li\");\n li.textContent = s;\n iUl.appendChild(li);\n });\n\n $(\"tip-text\").textContent = fb.tip;\n $(\"model-answer-text\").textContent = fb.model_answer;\n\n updateStats();\n showScreen(\"feedback\");\n}\n\nfunction animateScore(numId, barId, value) {\n const numEl = $(numId);\n const barEl = $(barId);\n animateCount(numEl, 0, value, 700, 0);\n barEl.style.width = \"0%\";\n setTimeout(() => {\n barEl.style.width = `${(value / 10) * 100}%`;\n }, 50);\n}\n\nfunction animateCount(el, from, to, ms, decimals) {\n const start = performance.now();\n const tick = (now) => {\n const t = Math.min(1, (now - start) / ms);\n const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic\n const v = from + (to - from) * eased;\n el.textContent = decimals ? v.toFixed(decimals) : Math.round(v).toString();\n if (t < 1) requestAnimationFrame(tick);\n else el.textContent = decimals ? Number(to).toFixed(decimals) : String(to);\n };\n requestAnimationFrame(tick);\n}\n\nfunction initFeedbackScreen() {\n $(\"btn-next\").addEventListener(\"click\", () => advanceQuestion());\n $(\"btn-retry\").addEventListener(\"click\", () => {\n // Same question, reset answer + feedback\n AppState.answers[AppState.currentIndex] = undefined;\n AppState.feedbacks[AppState.currentIndex] = null;\n saveSession();\n showScreen(\"interview\");\n renderCurrentQuestion();\n });\n $(\"btn-copy-model\").addEventListener(\"click\", () => {\n const text = $(\"model-answer-text\").textContent;\n navigator.clipboard.writeText(text).then(\n () => showToast(\"Copied model answer to clipboard.\", \"success\"),\n () => showToast(\"Copy failed.\", \"danger\"),\n );\n });\n}\n\n// ----- Voice input ----------------------------------------------------------\n\nfunction toggleVoiceInput() {\n if (AppState.isListening) stopVoiceInput();\n else initVoiceInput($(\"answer-input\"));\n}\n\nfunction initVoiceInput(textarea) {\n const SR = window.SpeechRecognition || window.webkitSpeechRecognition;\n if (!SR) {\n showToast(\"Voice input not supported. Try Chrome.\", \"warning\");\n return;\n }\n const recognition = new SR();\n recognition.continuous = true;\n recognition.interimResults = true;\n recognition.lang = \"en-US\";\n\n recognition.onresult = (event) => {\n let interim = \"\";\n let finalText = \"\";\n for (let i = event.resultIndex; i < event.results.length; i++) {\n const t = event.results[i][0].transcript;\n if (event.results[i].isFinal) finalText += t + \" \";\n else interim += t;\n }\n const baseline = textarea.dataset.confirmed || \"\";\n if (finalText) {\n textarea.dataset.confirmed = baseline + finalText;\n textarea.value = textarea.dataset.confirmed + interim;\n } else {\n textarea.value = baseline + interim;\n }\n $(\"char-count\").textContent = textarea.value.length;\n autoResize(textarea);\n };\n\n recognition.onerror = (event) => {\n showToast(\"Microphone error: \" + event.error, \"danger\");\n stopVoiceInput();\n };\n recognition.onend = () => {\n AppState.isListening = false;\n updateVoiceButton(false);\n };\n\n AppState.recognition = recognition;\n try { recognition.start(); } catch (e) { showToast(\"Voice start failed.\", \"danger\"); return; }\n AppState.isListening = true;\n updateVoiceButton(true);\n}\n\nfunction stopVoiceInput() {\n try { AppState.recognition?.stop(); } catch {}\n AppState.isListening = false;\n updateVoiceButton(false);\n}\n\nfunction updateVoiceButton(active) {\n const btn = $(\"btn-voice\");\n const label = $(\"voice-label\");\n if (active) {\n btn.classList.add(\"listening\");\n label.textContent = \"Listening...\";\n } else {\n btn.classList.remove(\"listening\");\n label.textContent = \"Voice\";\n }\n}\n\n// ----- Results screen -------------------------------------------------------\n\nasync function finishSession() {\n stopTimer();\n showScreen(\"results\");\n renderResults();\n // Fire recommendations in background\n fetchRecommendations();\n}\n\nfunction renderResults() {\n const total = AppState.questions.length;\n const scored = AppState.feedbacks.filter((f) => f);\n const avg = scored.length\n ? scored.reduce((a, f) => a + f.overall, 0) / scored.length\n : 0;\n\n const heroScore = $(\"hero-score\");\n heroScore.classList.remove(\"good\", \"ok\", \"bad\");\n heroScore.classList.add(avg >= 8 ? \"good\" : avg >= 5 ? \"ok\" : \"bad\");\n animateCount(heroScore, 0, avg, 1200, 1);\n\n $(\"hero-label\").textContent =\n avg >= 8 ? \"Excellent!\" : avg >= 6 ? \"Good Job!\" : avg >= 4 ? \"Solid Effort\" : \"Keep Practicing\";\n\n // Stats\n $(\"hero-total\").textContent = total;\n $(\"hero-avg\").textContent = avg.toFixed(1);\n\n // Best / weakest topic\n let best = null;\n let weak = null;\n AppState.feedbacks.forEach((fb, i) => {\n if (!fb) return;\n const q = AppState.questions[i];\n if (!best || fb.overall > best.s) best = { s: fb.overall, q };\n if (!weak || fb.overall < weak.s) weak = { s: fb.overall, q };\n });\n $(\"hero-best\").textContent = best ? truncate(best.q.question, 40) : \"—\";\n $(\"hero-weakest\").textContent = weak ? truncate(weak.q.question, 40) : \"—\";\n\n // Radar chart\n drawRadarChart(\"radar-chart\", computeAverageScores());\n\n // Q-by-Q table\n renderQTable();\n}\n\nfunction truncate(s, n) {\n return s.length > n ? s.slice(0, n - 1) + \"…\" : s;\n}\n\nfunction computeAverageScores() {\n const fbs = AppState.feedbacks.filter((f) => f);\n if (!fbs.length) return { clarity: 0, depth: 0, relevance: 0, star_structure: 0 };\n const sum = { clarity: 0, depth: 0, relevance: 0, star_structure: 0 };\n fbs.forEach((f) => {\n sum.clarity += f.scores.clarity;\n sum.depth += f.scores.depth;\n sum.relevance += f.scores.relevance;\n sum.star_structure += f.scores.star_structure;\n });\n return {\n clarity: +(sum.clarity / fbs.length).toFixed(1),\n depth: +(sum.depth / fbs.length).toFixed(1),\n relevance: +(sum.relevance / fbs.length).toFixed(1),\n star_structure: +(sum.star_structure / fbs.length).toFixed(1),\n };\n}\n\nfunction drawRadarChart(canvasId, scores) {\n const canvas = $(canvasId);\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n const cx = canvas.width / 2;\n const cy = canvas.height / 2;\n const radius = Math.min(cx, cy) - 50;\n const labels = [\"Clarity\", \"Depth\", \"Relevance\", \"Structure\"];\n const values = [scores.clarity, scores.depth, scores.relevance, scores.star_structure];\n const max = 10;\n const sides = 4;\n const angleStep = (Math.PI * 2) / sides;\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n // Grid\n for (let r = 1; r <= 5; r++) {\n ctx.beginPath();\n for (let i = 0; i < sides; i++) {\n const angle = i * angleStep - Math.PI / 2;\n const x = cx + (radius * r / 5) * Math.cos(angle);\n const y = cy + (radius * r / 5) * Math.sin(angle);\n i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);\n }\n ctx.closePath();\n ctx.strokeStyle = \"rgba(255,255,255,0.08)\";\n ctx.lineWidth = 1;\n ctx.stroke();\n }\n\n // Axes\n for (let i = 0; i < sides; i++) {\n const angle = i * angleStep - Math.PI / 2;\n ctx.beginPath();\n ctx.moveTo(cx, cy);\n ctx.lineTo(cx + radius * Math.cos(angle), cy + radius * Math.sin(angle));\n ctx.strokeStyle = \"rgba(255,255,255,0.12)\";\n ctx.lineWidth = 1;\n ctx.stroke();\n }\n\n // Data polygon\n ctx.beginPath();\n for (let i = 0; i < sides; i++) {\n const angle = i * angleStep - Math.PI / 2;\n const r = (values[i] / max) * radius;\n const x = cx + r * Math.cos(angle);\n const y = cy + r * Math.sin(angle);\n i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);\n }\n ctx.closePath();\n ctx.fillStyle = \"rgba(99, 102, 241, 0.28)\";\n ctx.fill();\n ctx.strokeStyle = \"#6366f1\";\n ctx.lineWidth = 2;\n ctx.stroke();\n\n // Dots + labels\n for (let i = 0; i < sides; i++) {\n const angle = i * angleStep - Math.PI / 2;\n const r = (values[i] / max) * radius;\n const x = cx + r * Math.cos(angle);\n const y = cy + r * Math.sin(angle);\n ctx.beginPath();\n ctx.arc(x, y, 4, 0, Math.PI * 2);\n ctx.fillStyle = \"#6366f1\";\n ctx.fill();\n\n const lx = cx + (radius + 28) * Math.cos(angle);\n const ly = cy + (radius + 28) * Math.sin(angle);\n ctx.font = \"600 12px 'DM Sans', sans-serif\";\n ctx.fillStyle = \"#94a3b8\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(`${labels[i]} (${values[i]})`, lx, ly);\n }\n}\n\nfunction renderQTable() {\n const tbody = $(\"q-table-body\");\n tbody.innerHTML = \"\";\n AppState.questions.forEach((q, i) => {\n const fb = AppState.feedbacks[i];\n const ans = AppState.answers[i];\n const tr = document.createElement(\"tr\");\n tr.className = \"q-row\";\n\n const scoreCls = fb\n ? fb.overall >= 8 ? \"good\" : fb.overall >= 5 ? \"ok\" : \"bad\"\n : \"skip\";\n const scoreText = fb ? fb.overall.toFixed(1) : \"—\";\n const status = ans === null\n ? \"Skipped\"\n : fb\n ? \"Answered\"\n : \"Unanswered\";\n\n tr.innerHTML = `\n ${i + 1}\n ${escapeHtml(truncate(q.question, 80))}\n ${scoreText}\n ${escapeHtml(q.difficulty)}\n ${status}\n `;\n tr.addEventListener(\"click\", () => toggleRowExpand(tr, i));\n tbody.appendChild(tr);\n });\n}\n\nfunction toggleRowExpand(row, i) {\n const next = row.nextElementSibling;\n if (next?.classList.contains(\"expanded-row\")) {\n next.remove();\n return;\n }\n // Remove any other expanded rows\n $$(\".expanded-row\").forEach((r) => r.remove());\n\n const fb = AppState.feedbacks[i];\n const ans = AppState.answers[i];\n const tr = document.createElement(\"tr\");\n tr.className = \"expanded-row\";\n const td = document.createElement(\"td\");\n td.colSpan = 5;\n if (fb) {\n td.innerHTML = `\n Your Answer:
${escapeHtml(ans || \"(empty)\")}

\n Scores: C ${fb.scores.clarity} · D ${fb.scores.depth} · R ${fb.scores.relevance} · S ${fb.scores.star_structure}
\n Tip: ${escapeHtml(fb.tip)}

\n Model Answer:
${escapeHtml(fb.model_answer)}\n `;\n } else {\n td.innerHTML = `${ans === null ? \"Skipped.\" : \"Not answered.\"}`;\n }\n tr.appendChild(td);\n row.after(tr);\n}\n\nfunction escapeHtml(s) {\n return String(s ?? \"\")\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\");\n}\n\nasync function fetchRecommendations() {\n const fbs = AppState.feedbacks.filter((f) => f);\n if (!fbs.length) {\n $(\"recommendations-list\").innerHTML = `

No answered questions to analyze.

`;\n return;\n }\n const avgs = computeAverageScores();\n const weak = AppState.questions\n .map((q, i) => ({ q, fb: AppState.feedbacks[i] }))\n .filter(({ fb }) => fb && fb.overall < 6)\n .map(({ q }) => truncate(q.question, 60));\n const overall = (fbs.reduce((a, f) => a + f.overall, 0) / fbs.length).toFixed(1);\n\n AppState.abortController = new AbortController();\n try {\n const messages = [\n { role: \"system\", content: \"You are an interview coach. Always return valid JSON only.\" },\n { role: \"user\", content: RECOMMENDATIONS_PROMPT({\n jobTitle: AppState.config.jobTitle,\n type: AppState.config.type,\n avgClarity: avgs.clarity,\n avgDepth: avgs.depth,\n avgRelevance: avgs.relevance,\n avgStructure: avgs.star_structure,\n weakQuestions: weak,\n overallAvg: overall,\n }) },\n ];\n const recs = await callAIJSON(messages, AppState.abortController.signal);\n renderRecommendations(Array.isArray(recs) ? recs : (recs.recommendations || []));\n } catch (err) {\n console.error(err);\n $(\"recommendations-list\").innerHTML = `

Could not load recommendations.

`;\n }\n}\n\nfunction renderRecommendations(recs) {\n const wrap = $(\"recommendations-list\");\n wrap.innerHTML = \"\";\n if (!recs.length) {\n wrap.innerHTML = `

No recommendations available.

`;\n return;\n }\n recs.forEach((r) => {\n const div = document.createElement(\"div\");\n div.className = \"rec-item fade-in\";\n const priority = (r.priority || \"medium\").toLowerCase();\n div.innerHTML = `\n

\n ${escapeHtml(r.area || \"Focus area\")}\n ${priority}\n

${escapeHtml(r.suggestion || \"\")}

\n ${r.resource ? `

📚 ${escapeHtml(r.resource)}

` : \"\"}\n `;\n wrap.appendChild(div);\n });\n}\n\nfunction initResultsScreen() {\n $(\"btn-download\").addEventListener(\"click\", downloadReport);\n $(\"btn-copy-summary\").addEventListener(\"click\", copySummary);\n $(\"btn-new-session\").addEventListener(\"click\", () => {\n if (!confirm(\"Start a new session? Current results will be cleared.\")) return;\n resetSession();\n showScreen(\"setup\");\n });\n $(\"btn-retry-weak\").addEventListener(\"click\", retryWeakQuestions);\n}\n\nfunction downloadReport() {\n const lines = [\n \"=\".repeat(60),\n \"AI INTERVIEW COACH — SESSION REPORT\",\n \"=\".repeat(60),\n `Date: ${new Date().toLocaleString()}`,\n `Role: ${AppState.config.jobTitle}`,\n `Level: ${AppState.config.level}`,\n `Type: ${AppState.config.type}`,\n `Company: ${AppState.config.companyType}`,\n `Overall Score: ${AppState.avgScore}/10`,\n \"\",\n \"-\".repeat(60),\n ];\n\n AppState.questions.forEach((q, i) => {\n const fb = AppState.feedbacks[i];\n const ans = AppState.answers[i];\n lines.push(`\\nQ${i + 1} [${(q.difficulty || \"\").toUpperCase()}]: ${q.question}`);\n lines.push(`\\nYour Answer:\\n${ans || \"(Skipped)\"}`);\n if (fb) {\n lines.push(`\\nScores: Clarity ${fb.scores.clarity}/10 | Depth ${fb.scores.depth}/10 | Relevance ${fb.scores.relevance}/10 | Structure ${fb.scores.star_structure}/10`);\n lines.push(`Overall: ${fb.overall}/10`);\n lines.push(`\\nStrengths:\\n${fb.strengths.map((s) => ` • ${s}`).join(\"\\n\")}`);\n lines.push(`\\nImprovements:\\n${fb.improvements.map((s) => ` • ${s}`).join(\"\\n\")}`);\n lines.push(`\\nTip: ${fb.tip}`);\n lines.push(`\\nModel Answer:\\n${fb.model_answer}`);\n }\n lines.push(\"\\n\" + \"-\".repeat(60));\n });\n\n const blob = new Blob([lines.join(\"\\n\")], { type: \"text/plain\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `interview-report-${Date.now()}.txt`;\n document.body.appendChild(a);\n a.click();\n a.remove();\n URL.revokeObjectURL(url);\n showToast(\"Report downloaded.\", \"success\");\n}\n\nfunction copySummary() {\n const avgs = computeAverageScores();\n const summary = [\n `📊 Interview Coach Summary`,\n `Role: ${AppState.config.jobTitle} (${AppState.config.level}, ${AppState.config.type})`,\n `Overall: ${AppState.avgScore}/10 across ${AppState.questions.length} questions`,\n `Breakdown: Clarity ${avgs.clarity} · Depth ${avgs.depth} · Relevance ${avgs.relevance} · Structure ${avgs.star_structure}`,\n ].join(\"\\n\");\n navigator.clipboard.writeText(summary).then(\n () => showToast(\"Summary copied!\", \"success\"),\n () => showToast(\"Copy failed.\", \"danger\"),\n );\n}\n\nfunction retryWeakQuestions() {\n const weakIdx = AppState.feedbacks\n .map((f, i) => ({ f, i }))\n .filter(({ f }) => f && f.overall < 6)\n .map(({ i }) => i);\n if (!weakIdx.length) {\n showToast(\"No weak questions to retry — nice work!\", \"success\");\n return;\n }\n const weakQs = weakIdx.map((i) => AppState.questions[i]);\n AppState.questions = weakQs;\n AppState.answers = [];\n AppState.feedbacks = [];\n AppState.currentIndex = 0;\n AppState.sessionStartTime = Date.now();\n saveSession();\n enterInterviewScreen();\n}\n\nfunction resetSession() {\n clearSession();\n AppState.questions = [];\n AppState.answers = [];\n AppState.feedbacks = [];\n AppState.currentIndex = 0;\n AppState.sessionStartTime = null;\n AppState.config.jobTitle = \"\";\n $(\"input-job-title\").value = \"\";\n $(\"input-question-count\").value = 10;\n $(\"question-count-value\").textContent = \"10\";\n $(\"select-timer\").value = \"0\";\n $(\"select-company\").value = \"Any\";\n AppState.config = {\n jobTitle: \"\",\n level: \"Mid-Level\",\n type: \"Behavioral\",\n companyType: \"Any\",\n totalQuestions: 10,\n timerDuration: 0,\n };\n // Reset chip groups\n $$(`[data-group=\"level\"] button`).forEach((b) => {\n b.classList.toggle(\"active\", b.dataset.value === \"Mid-Level\");\n });\n $$(`[data-group=\"type\"] button`).forEach((b) => {\n b.classList.toggle(\"active\", b.dataset.value === \"Behavioral\");\n });\n}\n\n// ----- Init -----------------------------------------------------------------\n\nfunction init() {\n initSetupScreen();\n initInterviewScreen();\n initFeedbackScreen();\n initResultsScreen();\n\n $(\"loading-cancel\").addEventListener(\"click\", cancelRequest);\n\n // Restore in-progress session\n if (loadSession() && AppState.questions.length && AppState.currentIndex < AppState.questions.length) {\n showToast(\"Resumed previous session.\", \"info\");\n enterInterviewScreen();\n } else {\n showScreen(\"setup\");\n }\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", init);\n",[],[221],"b6204226-51f9-11f1-b2ea-ee650bb23af1","README.md","019e363c-6c13-7621-bfd9-8a5fc12fb00b",["D",1779026836937],"# 🤖 AI Interview Coach\n\nSimulate real interview sessions, get AI-scored feedback, and improve fast.\n\nBuilt on [Val Town](https://val.town) — runs in your browser, powered by [OpenRouter](https://openrouter.ai) free models.\n\n## Features\n\n- **5 dynamic screens** — Setup → Interview → Feedback → Results, with a global loading overlay\n- **4 interview modes** — Technical, Behavioral, System Design, HR\n- **AI-generated questions** matched to job title, level, and company type\n- **Per-answer scoring** across Clarity, Depth, Relevance, and Structure\n- **Strengths, improvements, coaching tip, and model answer** for every question\n- **Voice input** via the Web Speech API (Chrome)\n- **Optional countdown timer** with circular SVG progress indicator\n- **Hints, skips, and retries** during the session\n- **Session results page** with radar chart, expandable per-question table, and personalized recommendations\n- **Export** session report as `.txt` or copy summary to clipboard\n- **Retry weak questions** to drill the ones you scored lowest on\n- **Auto-resume** an in-progress session on accidental refresh (via `sessionStorage`)\n- **Dark professional theme** with smooth animations, no frameworks\n\n## Architecture\n\n```mermaid\nflowchart LR\n Browser[\"Browser
(index.html + app.js)\"]\n Backend[\"Val Town
main.tsx (Hono)\"]\n OpenRouter[\"OpenRouter API
openrouter/free\"]\n\n Browser -- \"POST /api/ai (messages)\" --> Backend\n Backend -- \"Bearer + body\" --> OpenRouter\n OpenRouter -- \"JSON / SSE stream\" --> Backend\n Backend -- \"JSON / SSE stream\" --> Browser\n```\n\nThe OpenRouter API key is held **only on the server** as the `OPENROUTER_API_KEY`\nenv var — it is never sent to the browser. All AI calls go through `/api/ai`.\n\n## File structure\n\n| File | Role |\n|--------------|---------------------------------------------------------------|\n| `main.tsx` | Hono HTTP server. Hosts static files and the `/api/ai` proxy. |\n| `index.html` | Markup for all four screens + loading overlay. |\n| `styles.css` | Design system, dark theme, animations, responsive layout. |\n| `app.js` | Client logic: state, screens, API calls, voice, timer, radar. |\n| `favicon.svg`| App favicon. |\n\n## Configuration\n\nSet the env var on your val:\n\n| Key | Description |\n|----------------------|------------------------------------------|\n| `OPENROUTER_API_KEY` | Your OpenRouter API key (already configured) |\n\nThe model is `openrouter/free` — OpenRouter's auto-router for free models —\nwhich survives individual model deprecations.\n\n## How it works\n\n1. **Setup screen** — user picks job title, level, type, timer, etc.\n2. **Question generation** — `/api/ai` is called once with a prompt asking for a\n JSON array of N questions. The client parses the JSON (with markdown-fence\n stripping fallback) and stores it in `AppState.questions`.\n3. **Interview screen** — for each question the user types or speaks an answer.\n4. **Per-answer evaluation** — on submit, `/api/ai` is called with a scoring\n prompt; the JSON response feeds the Feedback screen with animated bars and a\n color-coded overall score.\n5. **Session results** — after the last question, a radar chart is drawn from\n the average sub-scores, the per-question table is rendered, and a final\n recommendations call generates 5 study tips.\n\n## Notes\n\n- Free-tier OpenRouter models have rate limits (~200 requests/day on\n unfunded accounts). Heavy testing may exhaust the quota.\n- Voice input requires Chromium-based browsers.\n- WebSockets aren't supported on Val Town — all communication is HTTP.\n\n[View source](/source)\n",[],[230],["D",1779026389980],{"_11":12,"_135":72},{"_11":12,"_130":131,"_71":72,"_30":70,"_132":133,"_134":24},{"_39":118,"_13":16,"_33":36,"_119":83,"_120":63,"_121":122,"_123":87,"_124":125,"_126":127,"_128":14,"_129":12},"ctx",{"_52":-5,"_156":273,"_274":275,"_276":277,"_278":24,"_279":24,"_280":24,"_281":95,"_282":-5,"_283":-7,"_284":-7,"_285":26,"_286":24,"_287":24,"_288":-5,"_289":24,"_290":24,"_291":24,"_292":-5},"ENV",{"_244":245,"_246":247,"_248":16,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

AI Interview Coach

Feedback

✅ Strengths

↗ Improvements

Session Complete

Performance Breakdown

Question-by-Question

Recommendations

History · index.html