ulgerang/tutor-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: improve frontend UX/UI - visual states, loading feedback, typography, and accessibility

Browse Source
This commit is contained in:
user
2026-04-27 11:33:20 +09:00
parent c54da12a4c
commit 01d102f5ef
3 changed files with 288 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
internal/webapp/static/index.html
View File

@@ -30,26 +30,37 @@
Timeline
<input id="timeline" name="interview_timeline" value="30 days" />
</label>
<button id="start-button" type="submit">Start diagnostic</button>
<button id="start-button" type="submit">
<span class="btn-text">Start diagnostic</span>
<span class="btn-spinner" aria-hidden="true"></span>
</button>
</form>
<p id="status-line" class="status-line" role="status">Ready</p>
<p id="status-line" class="status-line" role="status">
<span class="status-icon" aria-hidden="true"></span>
<span class="status-text">Ready</span>
</p>
<p id="error-line" class="error-line" role="alert"></p>
</aside>
<section class="practice-pane" aria-label="Diagnostic practice">
<div class="section-heading">
<p class="eyebrow">Diagnostic</p>
<h2 id="session-title">No active session</h2>
<div>
<p class="eyebrow">Diagnostic</p>
<h2 id="session-title">No active session</h2>
</div>
</div>
<div id="questions" class="question-list empty-state">
Start a diagnostic session to load interview questions.
<span class="empty-hint">Start a diagnostic session to load interview questions.</span>
</div>
<form id="answer-form" class="answer-form">
<label for="answer-text">Answer</label>
<textarea id="answer-text" rows="7" placeholder="Select a question, then answer with concrete production reasoning."></textarea>
<button id="answer-button" type="submit" disabled>Submit answer</button>
<button id="answer-button" type="submit" disabled>
<span class="btn-text">Submit answer</span>
<span class="btn-spinner" aria-hidden="true"></span>
</button>
</form>
<section class="content-workspace" aria-label="Material and asset workspace">
@@ -73,17 +84,22 @@
Source material
<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">Ingest material</button>
<button id="material-button" type="submit">
<span class="btn-text">Ingest material</span>
<span class="btn-spinner" aria-hidden="true"></span>
</button>
</form>
<div id="ontology" class="ontology-view empty-state">
Ingest material to inspect ontology candidates.
<span class="empty-hint">Ingest material to inspect ontology candidates.</span>
</div>
<form id="asset-form" class="asset-form">
<label>
Concept
<select id="asset-concept" disabled></select>
<select id="asset-concept" disabled>
<option value="">Select a concept</option>
</select>
</label>
<label>
Asset type
@@ -94,22 +110,27 @@
<option value="interview_card">Interview card</option>
</select>
</label>
<button id="asset-button" type="submit" disabled>Generate prompt</button>
<button id="asset-button" type="submit" disabled>
<span class="btn-text">Generate prompt</span>
<span class="btn-spinner" aria-hidden="true"></span>
</button>
</form>
<div id="asset-output" class="ontology-view empty-state">
Generate a prompt to inspect model key, review state, and evidence.
<span class="empty-hint">Generate a prompt to inspect model key, review state, and evidence.</span>
</div>
</section>
</section>
<aside class="feedback-pane" aria-label="Feedback">
<div class="section-heading">
<p class="eyebrow">Feedback</p>
<h2>Rubric result</h2>
<div>
<p class="eyebrow">Feedback</p>
<h2>Rubric result</h2>
</div>
</div>
<div id="feedback" class="feedback empty-state">
Submit an answer to see grade, evidence, and follow-up.
<span class="empty-hint">Submit an answer to see grade, evidence, and follow-up.</span>
</div>
<div class="section-heading progress-heading">
<div>
@@ -119,7 +140,7 @@
<button id="refresh-progress" class="small-button" type="button" disabled>Refresh</button>
</div>
<div id="progress" class="feedback empty-state">
Answer once to update learner memory and readiness.
<span class="empty-hint">Answer once to update learner memory and readiness.</span>
</div>
</aside>
</main>