Matt
9304a82e5f
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m28s
Includes full-fidelity prototypes for: - Admin redesign v1 & v2 (dashboard, rounds, projects, members, reports, sidebar states) - Dashboard overhaul with round-type-aware layouts (7 states: intake, filtering, evaluation, finalist submission, live final, deliberation, no active round) - Observer portal redesign (dashboard, projects, project detail, reports) - Early prototypes (round detail, dashboard, filtering) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
600 lines
34 KiB
HTML
600 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1440">
|
|
<title>Round Detail — Command Center Redesign</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--red: #de0f1e; --red-hover: #c00d1a; --red-light: #fef2f2;
|
|
--blue: #053d57; --blue-light: #e8f4f8; --blue-muted: #0a6a8a;
|
|
--teal: #557f8c; --teal-light: #ecf5f7;
|
|
--white: #fefefe; --bg: #f8f9fb;
|
|
--gray-50: #fafaf9; --gray-100: #f5f5f4; --gray-200: #e7e5e4;
|
|
--gray-300: #d6d3d1; --gray-400: #a8a29e; --gray-500: #78716c;
|
|
--gray-600: #57534e; --gray-700: #44403c; --gray-900: #1c1917;
|
|
--green: #10b981; --green-light: #ecfdf5; --green-dark: #065f46;
|
|
--amber: #f59e0b; --amber-light: #fffbeb; --amber-dark: #92400e;
|
|
--purple: #8b5cf6; --purple-light: #f5f3ff;
|
|
--radius: 8px; --radius-lg: 12px;
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
|
--shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
|
|
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
|
|
}
|
|
body { font-family: 'Montserrat', system-ui, sans-serif; background: var(--bg); color: var(--gray-900); font-size: 14px; font-weight: 400; line-height: 1.5; }
|
|
|
|
/* ── Sidebar ── */
|
|
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 256px; background: var(--white); border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; z-index: 50; }
|
|
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--gray-100); }
|
|
.sidebar-logo .logo-mark { width: 32px; height: 32px; background: var(--blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 13px; }
|
|
.sidebar-logo span { font-weight: 700; font-size: 15px; color: var(--blue); }
|
|
.sidebar-edition { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); }
|
|
.sidebar-edition select { width: 100%; padding: 6px 10px; border: 1px solid var(--gray-200); border-radius: 6px; font-family: inherit; font-size: 12px; color: var(--gray-700); background: var(--gray-50); }
|
|
.sidebar-nav { flex: 1; padding: 8px; overflow-y: auto; }
|
|
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--gray-600); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; }
|
|
.nav-item:hover { background: var(--gray-100); color: var(--gray-900); }
|
|
.nav-item.active { background: var(--blue); color: white; }
|
|
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
|
.nav-section { padding: 16px 12px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-400); }
|
|
.nav-sub-items { margin-left: 28px; }
|
|
.nav-sub-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px; color: var(--gray-500); font-size: 12px; font-weight: 500; cursor: pointer; border-left: 2px solid var(--gray-200); }
|
|
.nav-sub-item:hover { color: var(--gray-900); border-color: var(--teal); }
|
|
.nav-sub-item.active { color: var(--blue); border-color: var(--blue); font-weight: 600; }
|
|
.sidebar-user { padding: 12px 16px; border-top: 1px solid var(--gray-200); display: flex; align-items: center; gap: 10px; }
|
|
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; position: relative; }
|
|
.avatar .online { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; background: var(--green); border: 2px solid white; border-radius: 50%; }
|
|
.sidebar-user-info { flex: 1; }
|
|
.sidebar-user-info .name { font-size: 13px; font-weight: 600; color: var(--gray-900); }
|
|
.sidebar-user-info .role { font-size: 11px; color: var(--gray-500); }
|
|
|
|
/* ── Main Area ── */
|
|
.main { margin-left: 256px; min-height: 100vh; }
|
|
|
|
/* ── Breadcrumbs ── */
|
|
.breadcrumbs { padding: 12px 32px; background: var(--white); border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); }
|
|
.breadcrumbs a { color: var(--teal); text-decoration: none; font-weight: 500; }
|
|
.breadcrumbs a:hover { color: var(--blue); text-decoration: underline; }
|
|
.breadcrumbs .sep { color: var(--gray-300); }
|
|
.breadcrumbs .current { color: var(--gray-700); font-weight: 600; }
|
|
|
|
/* ── Sticky Header ── */
|
|
.round-header { position: sticky; top: 0; z-index: 40; background: linear-gradient(135deg, var(--blue) 0%, #0a6a8a 100%); color: white; padding: 20px 32px; box-shadow: var(--shadow-md); }
|
|
.round-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
|
|
.round-title-area { display: flex; align-items: center; gap: 14px; }
|
|
.round-title-area h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
|
|
.type-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.type-badge.filtering { background: rgba(245, 158, 11, 0.2); color: #fde68a; }
|
|
.type-badge.evaluation { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
|
|
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; }
|
|
.status-pill.active { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
|
|
.status-pill.active .dot { width: 8px; height: 8px; border-radius: 50%; background: #6ee7b7; animation: pulse 2s infinite; }
|
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
|
.status-pill.draft { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
|
|
|
|
/* ── Action Toolbar ── */
|
|
.action-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.action-group { display: flex; align-items: center; gap: 4px; padding: 3px; background: rgba(255,255,255,0.1); border-radius: 8px; }
|
|
.action-group-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); padding: 0 6px; font-weight: 600; }
|
|
.action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; transition: all 0.15s; font-family: inherit; }
|
|
.action-btn.primary { background: var(--red); color: white; }
|
|
.action-btn.primary:hover { background: var(--red-hover); }
|
|
.action-btn.ghost { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.15); }
|
|
.action-btn.ghost:hover { background: rgba(255,255,255,0.2); color: white; }
|
|
.action-btn:disabled { opacity: 0.35; cursor: not-allowed; }
|
|
.action-btn svg { width: 14px; height: 14px; }
|
|
|
|
/* ── Stats Strip ── */
|
|
.stats-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 20px 32px; background: var(--white); border-bottom: 1px solid var(--gray-200); }
|
|
.stat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 16px 18px; position: relative; overflow: hidden; transition: all 0.2s; cursor: pointer; }
|
|
.stat-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow); transform: translateY(-1px); }
|
|
.stat-card .accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
|
|
.stat-card .accent-bar.teal { background: var(--teal); }
|
|
.stat-card .accent-bar.green { background: var(--green); }
|
|
.stat-card .accent-bar.purple { background: var(--purple); }
|
|
.stat-card .accent-bar.amber { background: var(--amber); }
|
|
.stat-card .accent-bar.red { background: var(--red); }
|
|
.stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin-bottom: 8px; }
|
|
.stat-value-row { display: flex; align-items: flex-end; justify-content: space-between; }
|
|
.stat-value { font-size: 28px; font-weight: 700; color: var(--gray-900); line-height: 1; }
|
|
.stat-sub { font-size: 11px; color: var(--gray-500); margin-top: 6px; }
|
|
.stat-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
|
|
.stat-delta.up { color: var(--green-dark); background: var(--green-light); }
|
|
.stat-delta.down { color: var(--red); background: var(--red-light); }
|
|
|
|
/* Mini SVG sparkline */
|
|
.sparkline { width: 64px; height: 28px; }
|
|
.sparkline polyline { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
|
|
.sparkline .area { stroke: none; opacity: 0.15; }
|
|
|
|
/* Progress ring */
|
|
.progress-ring { width: 44px; height: 44px; transform: rotate(-90deg); }
|
|
.progress-ring circle { fill: none; stroke-width: 4; }
|
|
.progress-ring .bg { stroke: var(--gray-200); }
|
|
.progress-ring .fill { stroke-linecap: round; transition: stroke-dashoffset 0.5s; }
|
|
|
|
/* ── Content Layout ── */
|
|
.content-layout { display: flex; min-height: calc(100vh - 240px); }
|
|
|
|
/* ── Mini Nav ── */
|
|
.mini-nav { width: 180px; flex-shrink: 0; background: var(--white); border-right: 1px solid var(--gray-200); padding: 16px 0; }
|
|
.mini-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--gray-600); cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; }
|
|
.mini-nav-item:hover { color: var(--gray-900); background: var(--gray-50); }
|
|
.mini-nav-item.active { color: var(--blue); border-left-color: var(--blue); background: var(--blue-light); font-weight: 600; }
|
|
.mini-nav-item svg { width: 16px; height: 16px; }
|
|
.mini-nav-item .count { margin-left: auto; background: var(--gray-200); color: var(--gray-600); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
|
|
.mini-nav-item.active .count { background: rgba(5, 61, 87, 0.15); color: var(--blue); }
|
|
|
|
/* ── Main Content ── */
|
|
.content-main { flex: 1; padding: 24px 32px; overflow-y: auto; }
|
|
|
|
/* ── Overview Section ── */
|
|
.section-title { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
|
|
.section-title .icon { width: 20px; height: 20px; color: var(--teal); }
|
|
|
|
/* Readiness bar */
|
|
.readiness-bar { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 24px; }
|
|
.readiness-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
|
.readiness-header h3 { font-size: 13px; font-weight: 600; color: var(--gray-700); }
|
|
.readiness-header .score { font-size: 13px; font-weight: 700; color: var(--green); }
|
|
.readiness-track { height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
|
|
.readiness-fill { height: 100%; background: linear-gradient(90deg, var(--green), #34d399); border-radius: 3px; transition: width 0.5s; }
|
|
.readiness-items { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.readiness-item { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
|
|
.readiness-item.done { background: var(--green-light); color: var(--green-dark); }
|
|
.readiness-item.pending { background: var(--amber-light); color: var(--amber-dark); border: 1px dashed var(--amber); }
|
|
.readiness-item.pending:hover { background: #fef3c7; }
|
|
|
|
/* Two-column grid */
|
|
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
|
|
|
|
/* Cards */
|
|
.card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
|
|
.card-header { padding: 16px 20px 12px; display: flex; align-items: center; justify-content: space-between; }
|
|
.card-header h3 { font-size: 14px; font-weight: 600; color: var(--gray-900); }
|
|
.card-body { padding: 0 20px 16px; }
|
|
|
|
/* Quick Actions */
|
|
.quick-action { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; }
|
|
.quick-action:hover { background: var(--gray-50); border-color: var(--gray-200); }
|
|
.qa-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.qa-icon.blue { background: var(--blue-light); color: var(--blue); }
|
|
.qa-icon.green { background: var(--green-light); color: var(--green-dark); }
|
|
.qa-icon.amber { background: var(--amber-light); color: var(--amber-dark); }
|
|
.qa-icon.purple { background: var(--purple-light); color: var(--purple); }
|
|
.qa-icon svg { width: 18px; height: 18px; }
|
|
.qa-text .qa-title { font-size: 13px; font-weight: 600; color: var(--gray-900); }
|
|
.qa-text .qa-desc { font-size: 11px; color: var(--gray-500); }
|
|
|
|
/* Project breakdown */
|
|
.breakdown-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
|
|
.breakdown-row:last-child { border: none; }
|
|
.breakdown-label { font-size: 12px; font-weight: 500; color: var(--gray-600); width: 90px; }
|
|
.breakdown-bar-bg { flex: 1; height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
|
|
.breakdown-bar { height: 100%; border-radius: 4px; transition: width 0.5s; }
|
|
.breakdown-count { font-size: 12px; font-weight: 600; color: var(--gray-700); width: 30px; text-align: right; }
|
|
|
|
/* Recent activity mini */
|
|
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
|
|
.activity-item:last-child { border: none; }
|
|
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
|
|
.activity-text { font-size: 12px; color: var(--gray-600); }
|
|
.activity-text strong { color: var(--gray-900); font-weight: 600; }
|
|
.activity-time { font-size: 10px; color: var(--gray-400); margin-top: 2px; }
|
|
|
|
/* Label for prototype */
|
|
.prototype-label { position: fixed; bottom: 16px; right: 16px; background: var(--blue); color: white; padding: 8px 16px; border-radius: 8px; font-size: 11px; font-weight: 600; z-index: 100; box-shadow: var(--shadow-md); letter-spacing: 0.03em; }
|
|
</style>
|
|
<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-logo">
|
|
<div class="logo-mark">M</div>
|
|
<span>MOPC Admin</span>
|
|
</div>
|
|
<div class="sidebar-edition">
|
|
<select><option>2026 / Monaco Challenge</option></select>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
|
Dashboard
|
|
</a>
|
|
<a class="nav-item active" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
|
|
Rounds
|
|
</a>
|
|
<div class="nav-sub-items">
|
|
<div class="nav-sub-item">R1 Application Window</div>
|
|
<div class="nav-sub-item active">R2 AI Screening</div>
|
|
<div class="nav-sub-item">R3 Jury Evaluation</div>
|
|
<div class="nav-sub-item">R4 Document Submission</div>
|
|
</div>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
Juries
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
|
|
Awards
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
|
Projects
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
|
|
Members
|
|
</a>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
|
Reports
|
|
</a>
|
|
<div class="nav-section">Administration</div>
|
|
<a class="nav-item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
Settings
|
|
</a>
|
|
</nav>
|
|
<div class="sidebar-user">
|
|
<div class="avatar">M<div class="online"></div></div>
|
|
<div class="sidebar-user-info">
|
|
<div class="name">Matt</div>
|
|
<div class="role">Super Admin</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main">
|
|
|
|
<!-- Breadcrumbs -->
|
|
<div class="breadcrumbs">
|
|
<a href="#">2026 Edition</a>
|
|
<span class="sep">/</span>
|
|
<a href="#">Monaco Challenge 2026</a>
|
|
<span class="sep">/</span>
|
|
<span class="current">Round 2: AI Screening</span>
|
|
</div>
|
|
|
|
<!-- Sticky Header -->
|
|
<header class="round-header">
|
|
<div class="round-header-top">
|
|
<div class="round-title-area">
|
|
<h1>Round 2: AI Screening</h1>
|
|
<span class="type-badge filtering">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
|
|
Filtering
|
|
</span>
|
|
<div class="status-pill active">
|
|
<span class="dot"></span>
|
|
Active
|
|
</div>
|
|
</div>
|
|
<div class="action-toolbar">
|
|
<div class="action-group">
|
|
<span class="action-group-label">Round</span>
|
|
<button class="action-btn ghost" disabled>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
|
Activate
|
|
</button>
|
|
<button class="action-btn primary">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
|
|
Close Round
|
|
</button>
|
|
</div>
|
|
<div class="action-group">
|
|
<span class="action-group-label">AI</span>
|
|
<button class="action-btn ghost">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
|
Run Screening
|
|
</button>
|
|
<button class="action-btn ghost">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Export
|
|
</button>
|
|
</div>
|
|
<div class="action-group">
|
|
<span class="action-group-label">Projects</span>
|
|
<button class="action-btn ghost">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
|
|
Add to Pool
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Stats Strip -->
|
|
<div class="stats-strip">
|
|
<!-- Projects -->
|
|
<div class="stat-card">
|
|
<div class="accent-bar teal"></div>
|
|
<div class="stat-label">Projects</div>
|
|
<div class="stat-value-row">
|
|
<div>
|
|
<div class="stat-value">187</div>
|
|
<div class="stat-sub">8 categories</div>
|
|
</div>
|
|
<svg class="sparkline" viewBox="0 0 64 28">
|
|
<polyline class="area" points="0,24 4,22 12,18 20,20 28,14 36,16 44,10 52,8 60,4 64,6 64,28 0,28" fill="var(--teal)" />
|
|
<polyline points="0,24 4,22 12,18 20,20 28,14 36,16 44,10 52,8 60,4 64,6" stroke="var(--teal)" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- Passed -->
|
|
<div class="stat-card">
|
|
<div class="accent-bar green"></div>
|
|
<div class="stat-label">Passed</div>
|
|
<div class="stat-value-row">
|
|
<div>
|
|
<div class="stat-value">142</div>
|
|
<div class="stat-sub"><span class="stat-delta up">+12 today</span></div>
|
|
</div>
|
|
<svg class="sparkline" viewBox="0 0 64 28">
|
|
<polyline class="area" points="0,26 8,24 16,22 24,18 32,20 40,14 48,10 56,6 64,4 64,28 0,28" fill="var(--green)" />
|
|
<polyline points="0,26 8,24 16,22 24,18 32,20 40,14 48,10 56,6 64,4" stroke="var(--green)" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- Jury -->
|
|
<div class="stat-card">
|
|
<div class="accent-bar purple"></div>
|
|
<div class="stat-label">Jury Group</div>
|
|
<div class="stat-value-row">
|
|
<div>
|
|
<div class="stat-value">8</div>
|
|
<div class="stat-sub">Jury 1 assigned</div>
|
|
</div>
|
|
<svg class="progress-ring" viewBox="0 0 44 44">
|
|
<circle class="bg" cx="22" cy="22" r="18" />
|
|
<circle class="fill" cx="22" cy="22" r="18" stroke="var(--purple)" stroke-dasharray="113" stroke-dashoffset="34" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- Progress -->
|
|
<div class="stat-card">
|
|
<div class="accent-bar amber"></div>
|
|
<div class="stat-label">Screening Progress</div>
|
|
<div class="stat-value-row">
|
|
<div>
|
|
<div class="stat-value">76%</div>
|
|
<div class="stat-sub">142 / 187 screened</div>
|
|
</div>
|
|
<svg class="progress-ring" viewBox="0 0 44 44">
|
|
<circle class="bg" cx="22" cy="22" r="18" />
|
|
<circle class="fill" cx="22" cy="22" r="18" stroke="var(--amber)" stroke-dasharray="113" stroke-dashoffset="27" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- Time -->
|
|
<div class="stat-card">
|
|
<div class="accent-bar red"></div>
|
|
<div class="stat-label">Time Remaining</div>
|
|
<div class="stat-value-row">
|
|
<div>
|
|
<div class="stat-value" style="color: var(--red);">12d</div>
|
|
<div class="stat-sub">Closes Mar 1, 2026</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<div style="font-size: 20px; font-weight: 700; color: var(--gray-400);">5h 23m</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Layout -->
|
|
<div class="content-layout">
|
|
|
|
<!-- Mini Nav -->
|
|
<nav class="mini-nav">
|
|
<div class="mini-nav-item active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
|
Overview
|
|
</div>
|
|
<div class="mini-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
|
Projects
|
|
<span class="count">187</span>
|
|
</div>
|
|
<div class="mini-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
|
|
Filtering
|
|
<span class="count">142</span>
|
|
</div>
|
|
<div class="mini-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
Assignments
|
|
</div>
|
|
<div class="mini-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
|
Jury
|
|
<span class="count">8</span>
|
|
</div>
|
|
<div class="mini-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83"/></svg>
|
|
Config
|
|
</div>
|
|
<div class="mini-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
|
|
Awards
|
|
<span class="count">2</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content (Overview) -->
|
|
<div class="content-main">
|
|
|
|
<!-- Readiness Bar -->
|
|
<div class="readiness-bar">
|
|
<div class="readiness-header">
|
|
<h3>Round Readiness</h3>
|
|
<span class="score">5 / 6 complete</span>
|
|
</div>
|
|
<div class="readiness-track">
|
|
<div class="readiness-fill" style="width: 83%"></div>
|
|
</div>
|
|
<div class="readiness-items">
|
|
<span class="readiness-item done">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Projects added
|
|
</span>
|
|
<span class="readiness-item done">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Jury assigned
|
|
</span>
|
|
<span class="readiness-item done">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
|
AI criteria set
|
|
</span>
|
|
<span class="readiness-item done">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Dates configured
|
|
</span>
|
|
<span class="readiness-item done">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Screening run
|
|
</span>
|
|
<span class="readiness-item pending">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
|
Finalize results
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Two-column grid -->
|
|
<div class="overview-grid">
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Quick Actions</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="quick-action">
|
|
<div class="qa-icon green">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
</div>
|
|
<div class="qa-text">
|
|
<div class="qa-title">Finalize Screening Results</div>
|
|
<div class="qa-desc">142 passed, 37 filtered, 8 flagged for review</div>
|
|
</div>
|
|
</div>
|
|
<div class="quick-action">
|
|
<div class="qa-icon amber">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
|
</div>
|
|
<div class="qa-text">
|
|
<div class="qa-title">Review 8 Flagged Projects</div>
|
|
<div class="qa-desc">Edge cases requiring manual decision</div>
|
|
</div>
|
|
</div>
|
|
<div class="quick-action">
|
|
<div class="qa-icon blue">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
</div>
|
|
<div class="qa-text">
|
|
<div class="qa-title">Export Results CSV</div>
|
|
<div class="qa-desc">Download screening results for all 187 projects</div>
|
|
</div>
|
|
</div>
|
|
<div class="quick-action">
|
|
<div class="qa-icon purple">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
|
</div>
|
|
<div class="qa-text">
|
|
<div class="qa-title">Re-run AI Screening</div>
|
|
<div class="qa-desc">45 projects have not been screened yet</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Breakdown -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Project Breakdown</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="breakdown-row">
|
|
<span class="breakdown-label" style="color: var(--green-dark);">Passed</span>
|
|
<div class="breakdown-bar-bg"><div class="breakdown-bar" style="width: 76%; background: var(--green);"></div></div>
|
|
<span class="breakdown-count">142</span>
|
|
</div>
|
|
<div class="breakdown-row">
|
|
<span class="breakdown-label" style="color: var(--red);">Filtered Out</span>
|
|
<div class="breakdown-bar-bg"><div class="breakdown-bar" style="width: 20%; background: var(--red);"></div></div>
|
|
<span class="breakdown-count">37</span>
|
|
</div>
|
|
<div class="breakdown-row">
|
|
<span class="breakdown-label" style="color: var(--amber-dark);">Flagged</span>
|
|
<div class="breakdown-bar-bg"><div class="breakdown-bar" style="width: 4.3%; background: var(--amber);"></div></div>
|
|
<span class="breakdown-count">8</span>
|
|
</div>
|
|
<div style="height: 16px"></div>
|
|
<div style="font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;">By Category</div>
|
|
<div class="breakdown-row">
|
|
<span class="breakdown-label">Startup</span>
|
|
<div class="breakdown-bar-bg"><div class="breakdown-bar" style="width: 58%; background: var(--teal);"></div></div>
|
|
<span class="breakdown-count">108</span>
|
|
</div>
|
|
<div class="breakdown-row">
|
|
<span class="breakdown-label">Concept</span>
|
|
<div class="breakdown-bar-bg"><div class="breakdown-bar" style="width: 42%; background: var(--blue);"></div></div>
|
|
<span class="breakdown-count">79</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Recent Activity</h3>
|
|
<span style="font-size: 12px; color: var(--teal); cursor: pointer; font-weight: 600;">View All</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background: var(--green);"></div>
|
|
<div>
|
|
<div class="activity-text"><strong>AI Screening</strong> completed batch 3 — 45 projects processed</div>
|
|
<div class="activity-time">12 minutes ago</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background: var(--amber);"></div>
|
|
<div>
|
|
<div class="activity-text"><strong>Manual override</strong> applied to CoralMapper — changed from Filtered to Passed</div>
|
|
<div class="activity-time">1 hour ago</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background: var(--blue);"></div>
|
|
<div>
|
|
<div class="activity-text"><strong>Jury 1</strong> assigned to this round (8 members)</div>
|
|
<div class="activity-time">3 hours ago</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background: var(--purple);"></div>
|
|
<div>
|
|
<div class="activity-text"><strong>Round activated</strong> by Matt</div>
|
|
<div class="activity-time">Yesterday at 2:30 PM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prototype-label">MOPC Redesign — Round Detail Command Center</div>
|
|
|
|
</body>
|
|
</html>
|