2026-04-26 18:39:09 +09:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="ko">
|
2026-04-28 21:40:09 +09:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
<title>Tutor Platform</title>
|
|
|
|
|
<link rel="stylesheet" href="/assets/styles.css?v=4" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Google auth bridge (unchanged) -->
|
|
|
|
|
<script>
|
|
|
|
|
window._tutorGoogleCallback = null;
|
|
|
|
|
window._tutorPendingGoogleResponse = null;
|
|
|
|
|
window.handleCredentialResponse = function (response) {
|
|
|
|
|
if (window._tutorGoogleCallback) {
|
|
|
|
|
window._tutorGoogleCallback(response);
|
|
|
|
|
} else {
|
|
|
|
|
window._tutorPendingGoogleResponse = response;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<script src="https://accounts.google.com/gsi/client" async defer></script>
|
|
|
|
|
|
|
|
|
|
<!-- ============ LOGIN VIEW ============ -->
|
|
|
|
|
<main id="login-view" class="login-page">
|
|
|
|
|
<div class="login-card">
|
|
|
|
|
<div class="login-brand" data-i18n="eyebrow">Tutor Platform</div>
|
|
|
|
|
<h1 class="login-heading" data-i18n="loginHeading">Turn answers into evidence</h1>
|
|
|
|
|
<p class="login-desc" data-i18n="loginDesc">짧은 연습 루프로 면접 준비도를 눈으로 확인하세요.</p>
|
|
|
|
|
<div id="auth-area" class="auth-area">
|
|
|
|
|
<div
|
|
|
|
|
id="g_id_onload"
|
|
|
|
|
data-client_id="13671390758-bp1ed6psn43bl86r8a9kv81o40nkea90.apps.googleusercontent.com"
|
|
|
|
|
data-callback="handleCredentialResponse"
|
|
|
|
|
data-auto_prompt="false"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
class="g_id_signin"
|
|
|
|
|
data-type="standard"
|
|
|
|
|
data-size="large"
|
|
|
|
|
data-theme="outline"
|
|
|
|
|
data-text="sign_in_with"
|
|
|
|
|
data-shape="rectangular"
|
|
|
|
|
data-logo_alignment="left"
|
|
|
|
|
></div>
|
2026-04-27 14:20:18 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
<p id="login-error" class="login-error" role="alert"></p>
|
|
|
|
|
<div class="lang-switch login-lang" role="group" aria-label="Language">
|
|
|
|
|
<button type="button" data-lang="ko" class="lang-btn is-active">KO</button>
|
|
|
|
|
<button type="button" data-lang="en" class="lang-btn">EN</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<!-- ============ WORKSPACE VIEW ============ -->
|
|
|
|
|
<div id="workspace-view" class="workspace" style="display:none">
|
|
|
|
|
|
|
|
|
|
<!-- Top bar -->
|
|
|
|
|
<header class="topbar">
|
|
|
|
|
<span class="topbar-brand" data-i18n="eyebrow">Tutor Platform</span>
|
|
|
|
|
<nav class="topbar-center">
|
|
|
|
|
<span id="step-indicator" class="step-indicator"></span>
|
|
|
|
|
</nav>
|
|
|
|
|
<div class="topbar-right">
|
|
|
|
|
<button id="tools-toggle" class="icon-btn" type="button" aria-label="Tools" title="Tools">⚙</button>
|
|
|
|
|
<div class="lang-switch" role="group" aria-label="Language">
|
|
|
|
|
<button type="button" data-lang="ko" class="lang-btn is-active">KO</button>
|
|
|
|
|
<button type="button" data-lang="en" class="lang-btn">EN</button>
|
2026-04-27 20:10:46 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
<div class="user-menu">
|
|
|
|
|
<span id="user-info" class="user-name"></span>
|
|
|
|
|
<button id="logout-button" class="link-btn" data-i18n="signOut">Sign out</button>
|
2026-04-27 13:23:47 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
</div>
|
|
|
|
|
</header>
|
2026-04-27 13:23:47 +09:00
|
|
|
|
2026-04-28 21:40:09 +09:00
|
|
|
<!-- Main area: 2-column -->
|
|
|
|
|
<div class="main-grid">
|
2026-04-26 18:39:09 +09:00
|
|
|
|
2026-04-28 21:40:09 +09:00
|
|
|
<!-- LEFT: Practice -->
|
|
|
|
|
<section class="main-pane">
|
|
|
|
|
|
|
|
|
|
<!-- Session setup card (shows when no session active) -->
|
|
|
|
|
<div id="setup-card" class="setup-card">
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<h2 data-i18n="startSession">Start diagnostic</h2>
|
|
|
|
|
<p class="card-hint" data-i18n="startHint">면접 질문을 생성하고 첫 답변을 만들어보세요.</p>
|
2026-04-27 11:33:20 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
<form id="session-form" class="inline-form">
|
|
|
|
|
<div class="field-row">
|
|
|
|
|
<label>
|
|
|
|
|
<span data-i18n="targetRole">Target role</span>
|
|
|
|
|
<input id="target-role" name="target_role" value="junior backend developer" />
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
<span data-i18n="stack">Stack</span>
|
|
|
|
|
<input id="stack" name="stack" value="go, postgres" />
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<button id="start-button" type="submit">
|
|
|
|
|
<span class="btn-text" data-i18n="startDiagnostic">Start diagnostic</span>
|
|
|
|
|
<span class="btn-spinner" aria-hidden="true"></span>
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
<p id="status-line" class="status-line" role="status">
|
|
|
|
|
<span class="status-dot" aria-hidden="true"></span>
|
|
|
|
|
<span class="status-text" data-i18n="ready">Ready</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p id="error-line" class="error-line" role="alert"></p>
|
2026-04-26 18:39:09 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
|
|
|
|
|
<!-- Question selector (shows after session starts) -->
|
|
|
|
|
<div id="question-bar" class="question-bar" style="display:none">
|
|
|
|
|
<div class="bar-label" data-i18n="questions">Questions</div>
|
|
|
|
|
<div id="questions" class="question-tabs" role="tablist"></div>
|
2026-04-26 18:39:09 +09:00
|
|
|
</div>
|
|
|
|
|
|
2026-04-28 21:40:09 +09:00
|
|
|
<!-- Answer area (shows after session starts) -->
|
|
|
|
|
<div id="answer-area" class="answer-area" style="display:none">
|
|
|
|
|
<form id="answer-form" class="answer-form">
|
|
|
|
|
<div class="answer-header">
|
|
|
|
|
<label for="answer-text" data-i18n="yourAnswer">Your answer</label>
|
|
|
|
|
<span id="answer-hint" class="answer-hint" data-i18n="answerHint">구체적인 프로덕션 관점에서 답변하세요.</span>
|
2026-04-26 18:52:16 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
<textarea
|
|
|
|
|
id="answer-text"
|
|
|
|
|
rows="8"
|
|
|
|
|
data-i18n-placeholder="answerPlaceholder"
|
|
|
|
|
placeholder="Select a question, then answer with concrete production reasoning."
|
|
|
|
|
></textarea>
|
|
|
|
|
<button id="answer-button" type="submit" disabled>
|
|
|
|
|
<span class="btn-text" data-i18n="submitAnswer">Submit answer</span>
|
|
|
|
|
<span class="btn-spinner" aria-hidden="true"></span>
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2026-04-26 18:52:16 +09:00
|
|
|
|
2026-04-28 21:40:09 +09:00
|
|
|
<!-- Content tools panel (hidden by default) -->
|
|
|
|
|
<div id="tools-panel" class="tools-panel" style="display:none">
|
|
|
|
|
<div class="tools-divider"></div>
|
|
|
|
|
<h2 data-i18n="contentTitle">Source to asset prompt</h2>
|
|
|
|
|
|
|
|
|
|
<form id="material-form" class="stacked-form">
|
|
|
|
|
<div class="field-row">
|
|
|
|
|
<label>
|
|
|
|
|
<span data-i18n="materialTitle">Material title</span>
|
|
|
|
|
<input id="material-title" value="Backend interview notes" />
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
<span data-i18n="sourceType">Source type</span>
|
|
|
|
|
<input id="material-source" value="markdown" />
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
2026-04-29 15:52:35 +09:00
|
|
|
<div class="file-upload-row">
|
|
|
|
|
<label class="file-label">
|
|
|
|
|
<span data-i18n="uploadFile">Upload file</span>
|
|
|
|
|
<input id="material-file" type="file" accept=".md,.markdown,.pdf,.docx" />
|
|
|
|
|
</label>
|
|
|
|
|
<span id="file-name" class="file-name"></span>
|
|
|
|
|
<button id="upload-file-button" type="button" class="small-button" data-i18n="uploadAndIngest" disabled>Upload & ingest</button>
|
|
|
|
|
</div>
|
|
|
|
|
<details class="paste-toggle">
|
|
|
|
|
<summary data-i18n="pasteTextToggle">Or paste text</summary>
|
|
|
|
|
<label class="wide-field">
|
|
|
|
|
<span data-i18n="sourceMaterial">Source material</span>
|
|
|
|
|
<textarea id="material-body" rows="5">
|
|
|
|
|
Idempotent API retries need transactions. Cache invalidation uses TTL tradeoffs and database indexes support query plans.</textarea
|
|
|
|
|
>
|
|
|
|
|
</label>
|
|
|
|
|
<button id="material-button" type="submit">
|
|
|
|
|
<span class="btn-text" data-i18n="ingestMaterial">Ingest material</span>
|
|
|
|
|
<span class="btn-spinner" aria-hidden="true"></span>
|
|
|
|
|
</button>
|
|
|
|
|
</details>
|
2026-04-26 18:52:16 +09:00
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<div id="ontology" class="ontology-view empty-state">
|
2026-04-28 21:40:09 +09:00
|
|
|
<span class="empty-hint" data-i18n="emptyOntology">Ingest material to inspect ontology candidates.</span>
|
2026-04-26 18:52:16 +09:00
|
|
|
</div>
|
|
|
|
|
|
2026-04-28 21:40:09 +09:00
|
|
|
<form id="asset-form" class="inline-form">
|
2026-04-26 18:52:16 +09:00
|
|
|
<label>
|
2026-04-27 20:10:46 +09:00
|
|
|
<span data-i18n="concept">Concept</span>
|
2026-04-27 11:33:20 +09:00
|
|
|
<select id="asset-concept" disabled>
|
2026-04-27 20:10:46 +09:00
|
|
|
<option value="" data-i18n="concept">Select a concept</option>
|
2026-04-27 11:33:20 +09:00
|
|
|
</select>
|
2026-04-26 18:52:16 +09:00
|
|
|
</label>
|
|
|
|
|
<label>
|
2026-04-27 20:10:46 +09:00
|
|
|
<span data-i18n="assetType">Asset type</span>
|
2026-04-26 18:52:16 +09:00
|
|
|
<select id="asset-type">
|
|
|
|
|
<option value="diagram">Diagram</option>
|
|
|
|
|
<option value="lesson_slice">Lesson slice</option>
|
|
|
|
|
<option value="worksheet">Worksheet</option>
|
|
|
|
|
<option value="interview_card">Interview card</option>
|
|
|
|
|
</select>
|
|
|
|
|
</label>
|
2026-04-27 11:33:20 +09:00
|
|
|
<button id="asset-button" type="submit" disabled>
|
2026-04-27 20:10:46 +09:00
|
|
|
<span class="btn-text" data-i18n="generatePrompt">Generate prompt</span>
|
2026-04-27 11:33:20 +09:00
|
|
|
<span class="btn-spinner" aria-hidden="true"></span>
|
|
|
|
|
</button>
|
2026-04-26 18:52:16 +09:00
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<div id="asset-output" class="ontology-view empty-state">
|
2026-04-28 21:40:09 +09:00
|
|
|
<span class="empty-hint" data-i18n="emptyAsset">Generate a prompt to inspect model key, review state, and evidence.</span>
|
2026-04-26 18:52:16 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
</div>
|
|
|
|
|
|
2026-04-26 18:39:09 +09:00
|
|
|
</section>
|
|
|
|
|
|
2026-04-28 21:40:09 +09:00
|
|
|
<!-- RIGHT: Feedback sidebar -->
|
|
|
|
|
<aside class="feedback-sidebar">
|
|
|
|
|
|
|
|
|
|
<!-- Empty state -->
|
|
|
|
|
<div id="feedback-empty" class="sidebar-empty">
|
|
|
|
|
<div class="empty-icon"></div>
|
|
|
|
|
<p data-i18n="feedbackEmpty">답변을 제출하면 채점 결과가 여기에 표시됩니다.</p>
|
2026-04-26 18:39:09 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
|
|
|
|
|
<!-- Feedback content (hidden until answer submitted) -->
|
|
|
|
|
<div id="feedback-content" class="feedback-content" style="display:none">
|
|
|
|
|
<div class="feedback-grade">
|
|
|
|
|
<div id="grade-display" class="grade-badge"></div>
|
|
|
|
|
<p id="grade-strength" class="grade-summary"></p>
|
2026-04-26 18:41:13 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
|
|
|
|
|
<div id="score-metrics" class="score-metrics"></div>
|
|
|
|
|
|
|
|
|
|
<div id="gaps-block" class="feedback-block"></div>
|
|
|
|
|
<div id="followup-block" class="feedback-block"></div>
|
|
|
|
|
<div id="evidence-block" class="feedback-block"></div>
|
2026-04-26 18:41:13 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
|
|
|
|
|
<!-- Divider -->
|
|
|
|
|
<div class="sidebar-divider" id="progress-divider" style="display:none"></div>
|
|
|
|
|
|
|
|
|
|
<!-- Progress section -->
|
|
|
|
|
<div id="progress-content" class="progress-content" style="display:none">
|
|
|
|
|
<div class="progress-header">
|
|
|
|
|
<h3 data-i18n="learningState">Learning state</h3>
|
|
|
|
|
<button id="refresh-progress" class="link-btn" type="button" disabled data-i18n="refresh">Refresh</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="progress-bar-wrap">
|
|
|
|
|
<div id="progress-bar" class="progress-bar" style="width:0%"></div>
|
|
|
|
|
<span id="readiness-pct" class="progress-pct">0%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="concept-memory" class="concept-list"></div>
|
|
|
|
|
<div id="next-challenge-block" class="challenge-block"></div>
|
2026-04-26 18:41:13 +09:00
|
|
|
</div>
|
2026-04-28 21:40:09 +09:00
|
|
|
|
2026-04-26 18:39:09 +09:00
|
|
|
</aside>
|
2026-04-28 21:40:09 +09:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="/assets/i18n.js?v=4"></script>
|
|
|
|
|
<script src="/assets/app.js?v=4"></script>
|
|
|
|
|
</body>
|
2026-04-26 18:39:09 +09:00
|
|
|
</html>
|
