| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="description" content="Practice ML systems interviews with transparent, client-side heuristic feedback."> |
| <title>ML Systems Interview Coach</title> |
| <link rel="stylesheet" href="styles.css"> |
| <script src="app.js" defer></script> |
| </head> |
| <body> |
| <main class="shell"> |
| <header class="hero"> |
| <p class="eyebrow">Practice with a transparent baseline</p> |
| <h1>ML Systems Interview Coach</h1> |
| <p class="hero-copy">Choose a prompt, answer it as you would in an interview, then compare your coverage with a structured rubric.</p> |
| </header> |
|
|
| <div id="status" class="status loading" role="status" aria-live="polite">Loading the public question bank…</div> |
|
|
| <section class="filter-panel" aria-labelledby="filters-title"> |
| <h2 id="filters-title" class="sr-only">Question filters</h2> |
| <div class="filters"> |
| <label><span>Domain</span><select id="domain-filter" disabled><option>All</option></select></label> |
| <label><span>Difficulty</span><select id="difficulty-filter" disabled><option>All</option></select></label> |
| <label><span>Question type</span><select id="type-filter" disabled><option>All</option></select></label> |
| <button id="random-button" class="button primary" type="button" disabled>Random Question</button> |
| </div> |
| </section> |
|
|
| <article id="question-card" class="question-card" aria-live="polite"> |
| <p class="muted">Choose filters and select a random question to begin.</p> |
| </article> |
|
|
| <section class="answer-card" aria-labelledby="answer-title"> |
| <h2 id="answer-title">Your answer</h2> |
| <p class="instructions">Answer as if speaking to an interviewer. Explain reasoning, assumptions, trade-offs, and examples where useful.</p> |
| <label class="sr-only" for="answer-input">Interview answer</label> |
| <textarea id="answer-input" rows="10" placeholder="Structure your answer clearly. The reference answer stays hidden until evaluation."></textarea> |
| <div class="actions"> |
| <button id="evaluate-button" class="button primary" type="button" disabled>Evaluate Answer</button> |
| <button id="clear-button" class="button secondary" type="button">Clear answer</button> |
| </div> |
| </section> |
|
|
| <div id="evaluation-status" class="inline-status" role="status" aria-live="polite"></div> |
| <section id="score-card" class="score-card" aria-labelledby="score-title" hidden></section> |
| <section id="review-card" class="review-card" aria-labelledby="review-title" hidden> |
| <p class="eyebrow">Review and go deeper</p> |
| <h2 id="review-title">Reference answer</h2> |
| <p id="reference-answer"></p> |
| <h3>Evaluation rubric</h3> |
| <dl class="rubric"> |
| <div><dt>Excellent</dt><dd id="rubric-excellent"></dd></div> |
| <div><dt>Acceptable</dt><dd id="rubric-acceptable"></dd></div> |
| <div><dt>Weak</dt><dd id="rubric-weak"></dd></div> |
| </dl> |
| <h3>Follow-up questions</h3> |
| <ol id="follow-ups"></ol> |
| </section> |
| </main> |
| </body> |
| </html> |
|
|
