307 lines
28 KiB
HTML
307 lines
28 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=1440">
|
||
|
|
<title>Dashboard — 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 (simplified — same as prototype 1) */
|
||
|
|
.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); }
|
||
|
|
.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 */
|
||
|
|
.main { margin-left: 256px; min-height: 100vh; }
|
||
|
|
|
||
|
|
/* Hero Banner */
|
||
|
|
.hero { background: linear-gradient(135deg, var(--blue) 0%, #0a6a8a 60%, var(--teal) 100%); color: white; padding: 28px 40px 0; }
|
||
|
|
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
|
||
|
|
.hero h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
|
||
|
|
.hero .subtitle { font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 400; }
|
||
|
|
.hero-actions { display: flex; gap: 8px; }
|
||
|
|
.hero-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; transition: all 0.15s; }
|
||
|
|
.hero-btn.primary { background: var(--red); color: white; }
|
||
|
|
.hero-btn.primary:hover { background: var(--red-hover); }
|
||
|
|
.hero-btn.ghost { background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.2); }
|
||
|
|
.hero-btn.ghost:hover { background: rgba(255,255,255,0.2); }
|
||
|
|
.hero-btn svg { width: 14px; height: 14px; }
|
||
|
|
|
||
|
|
/* Pipeline Stepper */
|
||
|
|
.pipeline { display: flex; align-items: center; gap: 0; padding: 0 0 24px; overflow-x: auto; }
|
||
|
|
.pipeline-node { display: flex; flex-direction: column; align-items: center; position: relative; min-width: 110px; }
|
||
|
|
.pipeline-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 3px solid; position: relative; z-index: 2; }
|
||
|
|
.pipeline-circle.done { background: rgba(16, 185, 129, 0.2); border-color: #6ee7b7; color: #6ee7b7; }
|
||
|
|
.pipeline-circle.active { background: rgba(255, 255, 255, 0.2); border-color: white; color: white; animation: pulse-border 2s infinite; }
|
||
|
|
@keyframes pulse-border { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
|
||
|
|
.pipeline-circle.pending { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.4); }
|
||
|
|
.pipeline-label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.6); margin-top: 6px; text-align: center; white-space: nowrap; }
|
||
|
|
.pipeline-label.active { color: white; }
|
||
|
|
.pipeline-type { font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); margin-top: 2px; }
|
||
|
|
.pipeline-connector { width: 40px; height: 3px; background: rgba(255,255,255,0.15); margin-bottom: 20px; flex-shrink: 0; }
|
||
|
|
.pipeline-connector.done { background: #6ee7b7; }
|
||
|
|
|
||
|
|
/* Stats Row */
|
||
|
|
.stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 24px 40px; }
|
||
|
|
.stat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 18px 20px; position: relative; overflow: hidden; transition: all 0.2s; }
|
||
|
|
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
|
||
|
|
.stat-card .accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
|
||
|
|
.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: 32px; 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); }
|
||
|
|
.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 { width: 48px; height: 48px; transform: rotate(-90deg); }
|
||
|
|
.progress-ring circle { fill: none; stroke-width: 4; }
|
||
|
|
.progress-ring .bg { stroke: var(--gray-200); }
|
||
|
|
.progress-ring .fill { stroke-linecap: round; }
|
||
|
|
|
||
|
|
/* Content Grid */
|
||
|
|
.content-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 20px; padding: 0 40px 32px; }
|
||
|
|
|
||
|
|
/* 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; border-bottom: 1px solid var(--gray-100); }
|
||
|
|
.card-header h3 { font-size: 14px; font-weight: 700; color: var(--gray-900); }
|
||
|
|
.card-body { padding: 16px 20px; }
|
||
|
|
.card-link { font-size: 12px; color: var(--teal); font-weight: 600; cursor: pointer; text-decoration: none; }
|
||
|
|
.card-link:hover { color: var(--blue); }
|
||
|
|
|
||
|
|
/* Active Round Card */
|
||
|
|
.active-round { border-left: 4px solid var(--green); }
|
||
|
|
.ar-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
|
||
|
|
.ar-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
|
||
|
|
.ar-badge.active { background: var(--green-light); color: var(--green-dark); }
|
||
|
|
.ar-badge.type { background: var(--amber-light); color: var(--amber-dark); }
|
||
|
|
.ar-title { font-size: 16px; font-weight: 700; color: var(--gray-900); }
|
||
|
|
.ar-progress { margin-bottom: 16px; }
|
||
|
|
.ar-progress-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
|
||
|
|
.ar-progress-label { font-size: 12px; color: var(--gray-600); font-weight: 500; }
|
||
|
|
.ar-progress-value { font-size: 12px; color: var(--gray-900); font-weight: 700; }
|
||
|
|
.ar-bar { height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
|
||
|
|
.ar-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--green), #34d399); }
|
||
|
|
.ar-jurors { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
|
||
|
|
.ar-juror { display: flex; align-items: center; gap: 10px; }
|
||
|
|
.ar-juror-name { font-size: 12px; font-weight: 500; color: var(--gray-700); width: 100px; }
|
||
|
|
.ar-juror-bar { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
|
||
|
|
.ar-juror-bar-fill { height: 100%; border-radius: 3px; background: var(--teal); }
|
||
|
|
.ar-juror-score { font-size: 11px; font-weight: 600; color: var(--gray-600); width: 40px; text-align: right; }
|
||
|
|
.ar-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-100); }
|
||
|
|
.ar-action-btn { flex: 1; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-700); cursor: pointer; text-align: center; font-family: inherit; transition: all 0.15s; }
|
||
|
|
.ar-action-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
|
||
|
|
.ar-action-btn.primary { background: var(--red); color: white; border-color: var(--red); }
|
||
|
|
.ar-action-btn.primary:hover { background: var(--red-hover); }
|
||
|
|
|
||
|
|
/* Smart Actions */
|
||
|
|
.smart-action { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
|
||
|
|
.smart-action:last-child { border: none; }
|
||
|
|
.sa-urgency { width: 4px; height: 36px; border-radius: 2px; flex-shrink: 0; margin-top: 2px; }
|
||
|
|
.sa-urgency.red { background: var(--red); }
|
||
|
|
.sa-urgency.amber { background: var(--amber); }
|
||
|
|
.sa-urgency.green { background: var(--green); }
|
||
|
|
.sa-text { flex: 1; }
|
||
|
|
.sa-title { font-size: 13px; font-weight: 600; color: var(--gray-900); }
|
||
|
|
.sa-desc { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
|
||
|
|
.sa-btn { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-700); cursor: pointer; font-family: inherit; white-space: nowrap; margin-top: 2px; flex-shrink: 0; }
|
||
|
|
.sa-btn:hover { background: var(--gray-50); }
|
||
|
|
|
||
|
|
/* Project List */
|
||
|
|
.project-row { display: grid; grid-template-columns: 1fr 100px 80px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-100); gap: 12px; }
|
||
|
|
.project-row:last-child { border: none; }
|
||
|
|
.pr-name { font-size: 13px; font-weight: 600; color: var(--gray-900); }
|
||
|
|
.pr-team { font-size: 11px; color: var(--gray-500); }
|
||
|
|
.pr-category { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; text-align: center; }
|
||
|
|
.pr-category.startup { background: var(--teal-light); color: var(--teal); }
|
||
|
|
.pr-category.concept { background: var(--blue-light); color: var(--blue); }
|
||
|
|
.pr-status { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
|
||
|
|
.pr-status.submitted { color: var(--green-dark); }
|
||
|
|
|
||
|
|
/* Activity Feed */
|
||
|
|
.activity-item { display: flex; gap: 10px; padding: 10px 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; }
|
||
|
|
|
||
|
|
.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); }
|
||
|
|
</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 active" 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" 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>
|
||
|
|
<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.83"/></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>
|
||
|
|
|
||
|
|
<div class="main">
|
||
|
|
|
||
|
|
<!-- Hero -->
|
||
|
|
<div class="hero">
|
||
|
|
<div class="hero-top">
|
||
|
|
<div>
|
||
|
|
<h1>Welcome back, Matt</h1>
|
||
|
|
<div class="subtitle">Monaco Challenge 2026 — Command Center • 1 round active, 6 actions needed</div>
|
||
|
|
</div>
|
||
|
|
<div class="hero-actions">
|
||
|
|
<button class="hero-btn ghost"><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</button>
|
||
|
|
<button class="hero-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="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>Import</button>
|
||
|
|
<button class="hero-btn primary"><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>Invite</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Pipeline -->
|
||
|
|
<div class="pipeline">
|
||
|
|
<div class="pipeline-node"><div class="pipeline-circle done"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div><div class="pipeline-label">Intake</div><div class="pipeline-type">R1</div></div>
|
||
|
|
<div class="pipeline-connector done"></div>
|
||
|
|
<div class="pipeline-node"><div class="pipeline-circle active">2</div><div class="pipeline-label active">AI Screening</div><div class="pipeline-type">R2 • Active</div></div>
|
||
|
|
<div class="pipeline-connector"></div>
|
||
|
|
<div class="pipeline-node"><div class="pipeline-circle pending">3</div><div class="pipeline-label">Jury 1 Eval</div><div class="pipeline-type">R3</div></div>
|
||
|
|
<div class="pipeline-connector"></div>
|
||
|
|
<div class="pipeline-node"><div class="pipeline-circle pending">4</div><div class="pipeline-label">Documents</div><div class="pipeline-type">R4</div></div>
|
||
|
|
<div class="pipeline-connector"></div>
|
||
|
|
<div class="pipeline-node"><div class="pipeline-circle pending">5</div><div class="pipeline-label">Jury 2 Eval</div><div class="pipeline-type">R5</div></div>
|
||
|
|
<div class="pipeline-connector"></div>
|
||
|
|
<div class="pipeline-node"><div class="pipeline-circle pending">6</div><div class="pipeline-label">Mentoring</div><div class="pipeline-type">R6</div></div>
|
||
|
|
<div class="pipeline-connector"></div>
|
||
|
|
<div class="pipeline-node"><div class="pipeline-circle pending">7</div><div class="pipeline-label">Grand Final</div><div class="pipeline-type">R7</div></div>
|
||
|
|
<div class="pipeline-connector"></div>
|
||
|
|
<div class="pipeline-node"><div class="pipeline-circle pending">8</div><div class="pipeline-label">Deliberation</div><div class="pipeline-type">R8</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Stats Row -->
|
||
|
|
<div class="stats-row">
|
||
|
|
<div class="stat-card"><div class="accent" style="background: var(--teal);"></div><div class="stat-label">Total Projects</div><div class="stat-value-row"><div><div class="stat-value">187</div><div class="stat-sub"><span class="stat-delta up">+12 this week</span></div></div><svg class="sparkline" viewBox="0 0 64 28"><polyline class="area" points="0,24 8,22 16,18 24,20 32,14 40,16 48,10 56,8 64,6 64,28 0,28" fill="var(--teal)"/><polyline points="0,24 8,22 16,18 24,20 32,14 40,16 48,10 56,8 64,6" stroke="var(--teal)"/></svg></div></div>
|
||
|
|
<div class="stat-card"><div class="accent" style="background: var(--green);"></div><div class="stat-label">Submissions</div><div class="stat-value-row"><div><div class="stat-value">187</div><div class="stat-sub">100% complete</div></div><svg class="sparkline" viewBox="0 0 64 28"><polyline class="area" points="0,26 8,24 16,20 24,16 32,14 40,10 48,6 56,4 64,4 64,28 0,28" fill="var(--green)"/><polyline points="0,26 8,24 16,20 24,16 32,14 40,10 48,6 56,4 64,4" stroke="var(--green)"/></svg></div></div>
|
||
|
|
<div class="stat-card"><div class="accent" style="background: var(--purple);"></div><div class="stat-label">Evaluations</div><div class="stat-value-row"><div><div class="stat-value">0</div><div class="stat-sub">Not started yet</div></div><svg class="progress-ring" viewBox="0 0 48 48"><circle class="bg" cx="24" cy="24" r="20"/><circle class="fill" cx="24" cy="24" r="20" stroke="var(--gray-300)" stroke-dasharray="126" stroke-dashoffset="126"/></svg></div></div>
|
||
|
|
<div class="stat-card"><div class="accent" style="background: var(--amber);"></div><div class="stat-label">Jury Active</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 48 48"><circle class="bg" cx="24" cy="24" r="20"/><circle class="fill" cx="24" cy="24" r="20" stroke="var(--amber)" stroke-dasharray="126" stroke-dashoffset="63"/></svg></div></div>
|
||
|
|
<div class="stat-card"><div class="accent" style="background: var(--red);"></div><div class="stat-label">Next Deadline</div><div class="stat-value-row"><div><div class="stat-value" style="color: var(--red);">12d</div><div class="stat-sub">Mar 1 — Screening closes</div></div><div style="font-size: 22px; font-weight: 700; color: var(--gray-400);">5h</div></div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Content Grid -->
|
||
|
|
<div class="content-grid">
|
||
|
|
<div>
|
||
|
|
<!-- Active Round -->
|
||
|
|
<div class="card active-round" style="margin-bottom: 20px;">
|
||
|
|
<div class="card-header"><h3>Active Round</h3><a class="card-link" href="#">Manage Round →</a></div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="ar-header">
|
||
|
|
<span class="ar-badge active"><span style="width:6px;height:6px;background:var(--green-dark);border-radius:50%;display:inline-block;"></span> Active</span>
|
||
|
|
<span class="ar-badge type">Filtering</span>
|
||
|
|
</div>
|
||
|
|
<div class="ar-title">Round 2: AI Screening</div>
|
||
|
|
<div class="ar-progress" style="margin-top: 12px;">
|
||
|
|
<div class="ar-progress-header"><span class="ar-progress-label">Screening Progress</span><span class="ar-progress-value">142 / 187 (76%)</span></div>
|
||
|
|
<div class="ar-bar"><div class="ar-bar-fill" style="width: 76%"></div></div>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; margin-top: 16px;">Results So Far</div>
|
||
|
|
<div class="ar-jurors">
|
||
|
|
<div class="ar-juror"><span class="ar-juror-name" style="color: var(--green-dark);">Passed</span><div class="ar-juror-bar"><div class="ar-juror-bar-fill" style="width: 76%; background: var(--green);"></div></div><span class="ar-juror-score">142</span></div>
|
||
|
|
<div class="ar-juror"><span class="ar-juror-name" style="color: var(--red);">Filtered</span><div class="ar-juror-bar"><div class="ar-juror-bar-fill" style="width: 20%; background: var(--red);"></div></div><span class="ar-juror-score">37</span></div>
|
||
|
|
<div class="ar-juror"><span class="ar-juror-name" style="color: var(--amber-dark);">Flagged</span><div class="ar-juror-bar"><div class="ar-juror-bar-fill" style="width: 4.3%; background: var(--amber);"></div></div><span class="ar-juror-score">8</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="ar-actions">
|
||
|
|
<button class="ar-action-btn">View Results</button>
|
||
|
|
<button class="ar-action-btn">Review Flagged</button>
|
||
|
|
<button class="ar-action-btn primary">Finalize</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Recent Projects -->
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header"><h3>Recent Projects</h3><a class="card-link" href="#">All Projects →</a></div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="project-row"><div><div class="pr-name">ROBOVaC</div><div class="pr-team">Robotics Cleanup Initiative</div></div><div class="pr-category startup">Startup</div><div class="pr-status submitted"><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>Submitted</div></div>
|
||
|
|
<div class="project-row"><div><div class="pr-name">The BetterCatch</div><div class="pr-team">Sustainable Fishing Tech</div></div><div class="pr-category startup">Startup</div><div class="pr-status submitted"><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>Submitted</div></div>
|
||
|
|
<div class="project-row"><div><div class="pr-name">EcoMarine Services</div><div class="pr-team">Marine Conservation SaaS</div></div><div class="pr-category concept">Concept</div><div class="pr-status submitted"><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>Submitted</div></div>
|
||
|
|
<div class="project-row"><div><div class="pr-name">ClimaFund</div><div class="pr-team">Ocean Climate Investment</div></div><div class="pr-category concept">Concept</div><div class="pr-status submitted"><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>Submitted</div></div>
|
||
|
|
<div class="project-row"><div><div class="pr-name">Blue Miles Index</div><div class="pr-team">Ocean Health Metrics</div></div><div class="pr-category startup">Startup</div><div class="pr-status submitted"><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>Submitted</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<!-- Smart Actions -->
|
||
|
|
<div class="card" style="margin-bottom: 20px;">
|
||
|
|
<div class="card-header"><h3>Action Required</h3><span style="background: var(--red-light); color: var(--red); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;">6</span></div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="smart-action"><div class="sa-urgency red"></div><div class="sa-text"><div class="sa-title">Review 8 flagged projects</div><div class="sa-desc">Edge cases need manual decision</div></div><button class="sa-btn">Review</button></div>
|
||
|
|
<div class="smart-action"><div class="sa-urgency red"></div><div class="sa-text"><div class="sa-title">Finalize screening results</div><div class="sa-desc">142 passed, ready to lock</div></div><button class="sa-btn">Finalize</button></div>
|
||
|
|
<div class="smart-action"><div class="sa-urgency amber"></div><div class="sa-text"><div class="sa-title">45 projects unscreened</div><div class="sa-desc">Re-run AI screening batch</div></div><button class="sa-btn">Run</button></div>
|
||
|
|
<div class="smart-action"><div class="sa-urgency amber"></div><div class="sa-text"><div class="sa-title">Configure Round 3</div><div class="sa-desc">Jury evaluation setup needed</div></div><button class="sa-btn">Setup</button></div>
|
||
|
|
<div class="smart-action"><div class="sa-urgency green"></div><div class="sa-text"><div class="sa-title">Export intake report</div><div class="sa-desc">187 submissions summary</div></div><button class="sa-btn">Export</button></div>
|
||
|
|
<div class="smart-action"><div class="sa-urgency green"></div><div class="sa-text"><div class="sa-title">Invite remaining jurors</div><div class="sa-desc">Jury 2 needs 6 members</div></div><button class="sa-btn">Invite</button></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Activity -->
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header"><h3>Activity</h3><a class="card-link" href="#">View All</a></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</div><div class="activity-time">12 min ago</div></div></div>
|
||
|
|
<div class="activity-item"><div class="activity-dot" style="background: var(--amber);"></div><div><div class="activity-text"><strong>Override</strong> CoralMapper passed</div><div class="activity-time">1h 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 R2</div><div class="activity-time">3h ago</div></div></div>
|
||
|
|
<div class="activity-item"><div class="activity-dot" style="background: var(--purple);"></div><div><div class="activity-text"><strong>Round 2</strong> activated</div><div class="activity-time">Yesterday</div></div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="prototype-label">MOPC Redesign — Dashboard</div>
|
||
|
|
</body>
|
||
|
|
</html>
|