| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"/> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>Annotator — ESConv Annotation</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"/> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/> |
| <link rel="stylesheet" href="/static/style.css"/> |
| <link rel="stylesheet" href="/static/admin.css"/> |
| </head> |
| <body> |
| <header class="header"> |
| <div class="header-inner"> |
| <div class="header-logo"> |
| <div class="logo-icon"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> |
| </svg> |
| </div> |
| <div> |
| <h1>My Assignments</h1> |
| <p>Review LLM annotations</p> |
| </div> |
| </div> |
| <div class="header-controls"> |
| <span class="user-badge" id="userBadge">annotator</span> |
| <button class="logout-btn" id="logoutBtn"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/> |
| </svg> |
| Logout |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="admin-main"> |
| <div class="section-header"> |
| <h2>Assigned Files</h2> |
| </div> |
| <div class="card-grid" id="assignmentCards"></div> |
| <div class="empty-state" id="emptyState" style="display:none"> |
| <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity:.3;margin-bottom:12px"> |
| <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/> |
| </svg> |
| <p>No files assigned to you yet.</p> |
| <p style="font-size:.8rem;color:var(--text-muted)">Contact admin to get files assigned.</p> |
| </div> |
| </main> |
|
|
| <script> |
| |
| fetch('/api/me').then(r=>r.json()).then(u=>{ |
| document.getElementById('userBadge').textContent = u.username; |
| }); |
| |
| |
| document.getElementById('logoutBtn').addEventListener('click', async()=>{ |
| await fetch('/api/logout',{method:'POST'}); |
| window.location.href = '/login'; |
| }); |
| |
| |
| async function loadAssignments() { |
| const res = await fetch('/api/my-assignments'); |
| const data = await res.json(); |
| const grid = document.getElementById('assignmentCards'); |
| const empty = document.getElementById('emptyState'); |
| |
| if (data.length === 0) { empty.style.display='block'; grid.innerHTML=''; return; } |
| empty.style.display='none'; |
| |
| grid.innerHTML = data.map(a => { |
| const pct = a.progress || 0; |
| const barColor = pct >= 100 ? '#34d399' : pct > 50 ? '#fbbf24' : '#60a5fa'; |
| return ` |
| <div class="file-card" onclick="window.location.href='/review/${a.id}'"> |
| <div class="file-card-header"> |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--accent)"> |
| <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/> |
| <polyline points="14 2 14 8 20 8"/> |
| </svg> |
| <span class="file-card-name">${a.filename}</span> |
| </div> |
| <div class="file-card-stats"> |
| <span>${a.reviewed_count} / ${a.total_samples} reviewed</span> |
| <span style="color:${barColor};font-weight:700">${pct}%</span> |
| </div> |
| <div class="progress-bar"> |
| <div class="progress-fill" style="width:${pct}%;background:${barColor}"></div> |
| </div> |
| ${pct >= 100 ? '<div class="completed-badge">✓ Completed</div>' : '<div class="continue-badge">Continue Review →</div>'} |
| </div>`; |
| }).join(''); |
| } |
| loadAssignments(); |
| </script> |
| </body> |
| </html> |
|
|
