Add HTML prototypes for admin redesign and dashboard overhaul
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m28s
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>
This commit is contained in:
599
prototypes/01-round-detail.html
Normal file
599
prototypes/01-round-detail.html
Normal file
@@ -0,0 +1,599 @@
|
|||||||
|
<!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>
|
||||||
306
prototypes/02-dashboard.html
Normal file
306
prototypes/02-dashboard.html
Normal file
@@ -0,0 +1,306 @@
|
|||||||
|
<!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>
|
||||||
429
prototypes/03-filtering.html
Normal file
429
prototypes/03-filtering.html
Normal file
@@ -0,0 +1,429 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=1440">
|
||||||
|
<title>Filtering Dashboard — Master-Detail 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: 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; }
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
.page { margin-left: 256px; min-height: 100vh; display: flex; flex-direction: column; }
|
||||||
|
|
||||||
|
/* Sidebar (minimal) */
|
||||||
|
.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; }
|
||||||
|
.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; }
|
||||||
|
.nav-item.active { background: var(--blue); color: white; }
|
||||||
|
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||||
|
.nav-sub-items { margin-left: 28px; }
|
||||||
|
.nav-sub-item { padding: 6px 12px; border-left: 2px solid var(--gray-200); color: var(--gray-500); font-size: 12px; font-weight: 500; cursor: pointer; }
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
/* Breadcrumbs */
|
||||||
|
.breadcrumbs { padding: 12px 28px; background: var(--white); border-bottom: 1px solid var(--gray-100); font-size: 12px; color: var(--gray-500); }
|
||||||
|
.breadcrumbs a { color: var(--teal); text-decoration: none; font-weight: 500; }
|
||||||
|
.breadcrumbs .sep { color: var(--gray-300); margin: 0 4px; }
|
||||||
|
.breadcrumbs .current { color: var(--gray-700); font-weight: 600; }
|
||||||
|
|
||||||
|
/* Header bar */
|
||||||
|
.filter-header { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; }
|
||||||
|
.filter-header h2 { font-size: 18px; font-weight: 700; color: var(--gray-900); display: flex; align-items: center; gap: 10px; }
|
||||||
|
.filter-header h2 svg { width: 20px; height: 20px; color: var(--amber); }
|
||||||
|
.header-actions { display: flex; gap: 8px; }
|
||||||
|
.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; }
|
||||||
|
.btn.primary { background: var(--red); color: white; }
|
||||||
|
.btn.primary:hover { background: var(--red-hover); }
|
||||||
|
.btn.outline { background: var(--white); color: var(--gray-700); border: 1px solid var(--gray-200); }
|
||||||
|
.btn.outline:hover { background: var(--gray-50); }
|
||||||
|
.btn svg { width: 14px; height: 14px; }
|
||||||
|
.btn .count { background: rgba(255,255,255,0.3); padding: 1px 6px; border-radius: 4px; font-size: 10px; }
|
||||||
|
|
||||||
|
/* Stats Bar */
|
||||||
|
.stats-bar { display: flex; gap: 8px; padding: 16px 28px; background: var(--white); border-bottom: 1px solid var(--gray-200); }
|
||||||
|
.stat-badge { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; }
|
||||||
|
.stat-badge:hover { transform: translateY(-1px); }
|
||||||
|
.stat-badge.active { border-color: currentColor; }
|
||||||
|
.stat-badge .num { font-size: 18px; font-weight: 700; }
|
||||||
|
.stat-badge.total { background: var(--gray-100); color: var(--gray-700); }
|
||||||
|
.stat-badge.passed { background: var(--green-light); color: var(--green-dark); }
|
||||||
|
.stat-badge.passed.active { border-color: var(--green); }
|
||||||
|
.stat-badge.filtered { background: var(--red-light); color: var(--red); }
|
||||||
|
.stat-badge.flagged { background: var(--amber-light); color: var(--amber-dark); }
|
||||||
|
.stat-badge.overridden { background: var(--purple-light); color: var(--purple); }
|
||||||
|
|
||||||
|
/* Criteria collapsible */
|
||||||
|
.criteria-section { background: var(--white); border-bottom: 1px solid var(--gray-200); }
|
||||||
|
.criteria-toggle { padding: 10px 28px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gray-500); }
|
||||||
|
.criteria-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
|
||||||
|
.criteria-body { padding: 0 28px 16px; display: none; }
|
||||||
|
.criteria-body.open { display: block; }
|
||||||
|
.criteria-textarea { width: 100%; min-height: 80px; padding: 12px; border: 1px solid var(--gray-200); border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.6; color: var(--gray-700); resize: vertical; }
|
||||||
|
|
||||||
|
/* Split Pane */
|
||||||
|
.split-pane { flex: 1; display: flex; overflow: hidden; }
|
||||||
|
|
||||||
|
/* Left Panel */
|
||||||
|
.left-panel { width: 420px; flex-shrink: 0; border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; background: var(--white); }
|
||||||
|
.left-search { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); }
|
||||||
|
.search-input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--gray-200); border-radius: 8px; font-family: inherit; font-size: 12px; background: var(--gray-50) url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 10px center no-repeat; }
|
||||||
|
.search-input:focus { outline: none; border-color: var(--teal); background-color: var(--white); }
|
||||||
|
.left-filters { padding: 8px 16px; display: flex; gap: 4px; border-bottom: 1px solid var(--gray-100); }
|
||||||
|
.filter-pill { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-600); transition: all 0.15s; }
|
||||||
|
.filter-pill:hover { border-color: var(--gray-300); }
|
||||||
|
.filter-pill.active { background: var(--blue); color: white; border-color: var(--blue); }
|
||||||
|
.project-list { flex: 1; overflow-y: auto; }
|
||||||
|
.project-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--gray-100); cursor: pointer; transition: all 0.1s; }
|
||||||
|
.project-item:hover { background: var(--gray-50); }
|
||||||
|
.project-item.selected { background: var(--blue-light); border-left: 3px solid var(--blue); }
|
||||||
|
.pi-status-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||||
|
.pi-status-icon.passed { background: var(--green-light); color: var(--green-dark); }
|
||||||
|
.pi-status-icon.filtered { background: var(--red-light); color: var(--red); }
|
||||||
|
.pi-status-icon.flagged { background: var(--amber-light); color: var(--amber-dark); }
|
||||||
|
.pi-status-icon svg { width: 12px; height: 12px; }
|
||||||
|
.pi-info { flex: 1; min-width: 0; }
|
||||||
|
.pi-name { font-size: 13px; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||||
|
.pi-meta { font-size: 11px; color: var(--gray-500); }
|
||||||
|
.pi-score-bar { width: 60px; height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
|
||||||
|
.pi-score-fill { height: 100%; border-radius: 3px; }
|
||||||
|
.pi-score { font-size: 12px; font-weight: 700; width: 36px; text-align: right; flex-shrink: 0; }
|
||||||
|
|
||||||
|
/* Right Panel */
|
||||||
|
.right-panel { flex: 1; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg); }
|
||||||
|
.detail-header { padding: 24px 28px 16px; background: var(--white); border-bottom: 1px solid var(--gray-200); }
|
||||||
|
.detail-title { font-size: 20px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
|
||||||
|
.detail-meta { font-size: 12px; color: var(--gray-500); display: flex; gap: 16px; }
|
||||||
|
.detail-meta span { display: flex; align-items: center; gap: 4px; }
|
||||||
|
|
||||||
|
.detail-body { padding: 20px 28px; display: flex; flex-direction: column; gap: 20px; }
|
||||||
|
|
||||||
|
/* Confidence Gauge */
|
||||||
|
.gauge-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; display: flex; align-items: center; gap: 24px; }
|
||||||
|
.gauge-ring-container { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
|
||||||
|
.gauge-ring { width: 80px; height: 80px; transform: rotate(-90deg); }
|
||||||
|
.gauge-ring circle { fill: none; stroke-width: 6; }
|
||||||
|
.gauge-ring .bg { stroke: var(--gray-200); }
|
||||||
|
.gauge-ring .fill { stroke-linecap: round; }
|
||||||
|
.gauge-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 700; }
|
||||||
|
.gauge-info { flex: 1; }
|
||||||
|
.gauge-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin-bottom: 4px; }
|
||||||
|
.gauge-status { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
|
||||||
|
.gauge-status.passed { color: var(--green-dark); }
|
||||||
|
.gauge-desc { font-size: 12px; color: var(--gray-500); }
|
||||||
|
|
||||||
|
/* Reasoning Card */
|
||||||
|
.reasoning-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; }
|
||||||
|
.reasoning-card h4 { font-size: 13px; font-weight: 700; color: var(--gray-900); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
|
||||||
|
.reasoning-card h4 svg { width: 16px; height: 16px; color: var(--purple); }
|
||||||
|
.reasoning-text { font-size: 13px; color: var(--gray-600); line-height: 1.7; }
|
||||||
|
|
||||||
|
/* Rules Card */
|
||||||
|
.rules-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; }
|
||||||
|
.rules-card h4 { font-size: 13px; font-weight: 700; color: var(--gray-900); margin-bottom: 12px; }
|
||||||
|
.rule-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
|
||||||
|
.rule-item:last-child { border: none; }
|
||||||
|
.rule-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||||
|
.rule-icon.pass { background: var(--green-light); color: var(--green-dark); }
|
||||||
|
.rule-icon.fail { background: var(--red-light); color: var(--red); }
|
||||||
|
.rule-icon.warn { background: var(--amber-light); color: var(--amber-dark); }
|
||||||
|
.rule-icon svg { width: 12px; height: 12px; }
|
||||||
|
.rule-text { font-size: 12px; color: var(--gray-700); flex: 1; }
|
||||||
|
.rule-score { font-size: 11px; font-weight: 600; color: var(--gray-500); }
|
||||||
|
|
||||||
|
/* Metrics */
|
||||||
|
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||||||
|
.metric-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 14px; text-align: center; }
|
||||||
|
.metric-value { font-size: 20px; font-weight: 700; color: var(--gray-900); }
|
||||||
|
.metric-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); margin-top: 2px; }
|
||||||
|
|
||||||
|
/* Override Controls */
|
||||||
|
.override-bar { position: sticky; bottom: 0; background: var(--white); border-top: 1px solid var(--gray-200); padding: 16px 28px; display: flex; align-items: center; gap: 12px; box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.05); }
|
||||||
|
.override-bar .label { font-size: 12px; font-weight: 600; color: var(--gray-700); margin-right: auto; }
|
||||||
|
.override-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 2px solid; cursor: pointer; font-family: inherit; transition: all 0.15s; }
|
||||||
|
.override-btn.pass { background: var(--green-light); color: var(--green-dark); border-color: var(--green); }
|
||||||
|
.override-btn.pass:hover { background: var(--green); color: white; }
|
||||||
|
.override-btn.flag { background: var(--amber-light); color: var(--amber-dark); border-color: var(--amber); }
|
||||||
|
.override-btn.flag:hover { background: var(--amber); color: white; }
|
||||||
|
.override-btn.reject { background: var(--red-light); color: var(--red); border-color: var(--red); }
|
||||||
|
.override-btn.reject:hover { background: var(--red); color: white; }
|
||||||
|
.override-btn svg { width: 16px; height: 16px; }
|
||||||
|
|
||||||
|
.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 (compact) -->
|
||||||
|
<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>
|
||||||
|
</nav>
|
||||||
|
<div class="sidebar-user"><div class="avatar">M</div><div style="flex:1;"><div style="font-size:13px;font-weight:600;">Matt</div><div style="font-size:11px;color:var(--gray-500);">Super Admin</div></div></div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<!-- Breadcrumbs -->
|
||||||
|
<div class="breadcrumbs">
|
||||||
|
<a href="#">2026 Edition</a><span class="sep">/</span>
|
||||||
|
<a href="#">Monaco Challenge</a><span class="sep">/</span>
|
||||||
|
<a href="#">Round 2: AI Screening</a><span class="sep">/</span>
|
||||||
|
<span class="current">Filtering</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="filter-header">
|
||||||
|
<h2>
|
||||||
|
<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>
|
||||||
|
AI Screening Results
|
||||||
|
</h2>
|
||||||
|
<div class="header-actions">
|
||||||
|
<button class="btn outline">
|
||||||
|
<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"/></svg>
|
||||||
|
Re-run Screening
|
||||||
|
</button>
|
||||||
|
<button class="btn outline">
|
||||||
|
<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 CSV
|
||||||
|
</button>
|
||||||
|
<button class="btn primary">
|
||||||
|
<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>
|
||||||
|
Finalize <span class="count">187</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats -->
|
||||||
|
<div class="stats-bar">
|
||||||
|
<div class="stat-badge total active"><span class="num">187</span> Total</div>
|
||||||
|
<div class="stat-badge passed"><span class="num">142</span> Passed</div>
|
||||||
|
<div class="stat-badge filtered"><span class="num">37</span> Filtered Out</div>
|
||||||
|
<div class="stat-badge flagged"><span class="num">8</span> Flagged</div>
|
||||||
|
<div class="stat-badge overridden"><span class="num">3</span> Overridden</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Criteria (collapsed) -->
|
||||||
|
<div class="criteria-section">
|
||||||
|
<div class="criteria-toggle">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
AI Screening Criteria (click to expand)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Split Pane -->
|
||||||
|
<div class="split-pane">
|
||||||
|
|
||||||
|
<!-- Left: Project List -->
|
||||||
|
<div class="left-panel">
|
||||||
|
<div class="left-search">
|
||||||
|
<input class="search-input" type="text" placeholder="Search projects...">
|
||||||
|
</div>
|
||||||
|
<div class="left-filters">
|
||||||
|
<span class="filter-pill active">All (187)</span>
|
||||||
|
<span class="filter-pill">Passed</span>
|
||||||
|
<span class="filter-pill">Filtered</span>
|
||||||
|
<span class="filter-pill">Flagged</span>
|
||||||
|
</div>
|
||||||
|
<div class="project-list">
|
||||||
|
<!-- Selected item -->
|
||||||
|
<div class="project-item selected">
|
||||||
|
<div class="pi-status-icon passed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||||
|
<div class="pi-info"><div class="pi-name">OceanClean AI</div><div class="pi-meta">Startup • Monaco</div></div>
|
||||||
|
<div class="pi-score-bar"><div class="pi-score-fill" style="width:82%;background:var(--green);"></div></div>
|
||||||
|
<div class="pi-score" style="color:var(--green-dark);">.82</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-item">
|
||||||
|
<div class="pi-status-icon passed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||||
|
<div class="pi-info"><div class="pi-name">DeepReef Monitoring</div><div class="pi-meta">Startup • France</div></div>
|
||||||
|
<div class="pi-score-bar"><div class="pi-score-fill" style="width:76%;background:var(--green);"></div></div>
|
||||||
|
<div class="pi-score" style="color:var(--green-dark);">.76</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-item">
|
||||||
|
<div class="pi-status-icon passed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||||
|
<div class="pi-info"><div class="pi-name">CoralGuard Systems</div><div class="pi-meta">Concept • Australia</div></div>
|
||||||
|
<div class="pi-score-bar"><div class="pi-score-fill" style="width:71%;background:var(--green);"></div></div>
|
||||||
|
<div class="pi-score" style="color:var(--green-dark);">.71</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-item">
|
||||||
|
<div class="pi-status-icon flagged"><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"/></svg></div>
|
||||||
|
<div class="pi-info"><div class="pi-name">WaveEnergy Solutions</div><div class="pi-meta">Startup • UK</div></div>
|
||||||
|
<div class="pi-score-bar"><div class="pi-score-fill" style="width:55%;background:var(--amber);"></div></div>
|
||||||
|
<div class="pi-score" style="color:var(--amber-dark);">.55</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-item">
|
||||||
|
<div class="pi-status-icon flagged"><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"/></svg></div>
|
||||||
|
<div class="pi-info"><div class="pi-name">MarineData Hub</div><div class="pi-meta">Concept • Brazil</div></div>
|
||||||
|
<div class="pi-score-bar"><div class="pi-score-fill" style="width:48%;background:var(--amber);"></div></div>
|
||||||
|
<div class="pi-score" style="color:var(--amber-dark);">.48</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-item">
|
||||||
|
<div class="pi-status-icon filtered"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||||
|
<div class="pi-info"><div class="pi-name">BlueTide Analytics</div><div class="pi-meta">Startup • USA</div></div>
|
||||||
|
<div class="pi-score-bar"><div class="pi-score-fill" style="width:31%;background:var(--red);"></div></div>
|
||||||
|
<div class="pi-score" style="color:var(--red);">.31</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-item">
|
||||||
|
<div class="pi-status-icon filtered"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||||
|
<div class="pi-info"><div class="pi-name">AquaPurify Tech</div><div class="pi-meta">Concept • India</div></div>
|
||||||
|
<div class="pi-score-bar"><div class="pi-score-fill" style="width:22%;background:var(--red);"></div></div>
|
||||||
|
<div class="pi-score" style="color:var(--red);">.22</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-item">
|
||||||
|
<div class="pi-status-icon filtered"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||||
|
<div class="pi-info"><div class="pi-name">SeaPlastic Sorter</div><div class="pi-meta">Startup • Japan</div></div>
|
||||||
|
<div class="pi-score-bar"><div class="pi-score-fill" style="width:18%;background:var(--red);"></div></div>
|
||||||
|
<div class="pi-score" style="color:var(--red);">.18</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-item">
|
||||||
|
<div class="pi-status-icon passed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||||
|
<div class="pi-info"><div class="pi-name">Reanova</div><div class="pi-meta">Startup • Italy</div></div>
|
||||||
|
<div class="pi-score-bar"><div class="pi-score-fill" style="width:68%;background:var(--green);"></div></div>
|
||||||
|
<div class="pi-score" style="color:var(--green-dark);">.68</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-item">
|
||||||
|
<div class="pi-status-icon passed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||||
|
<div class="pi-info"><div class="pi-name">Bluetarium</div><div class="pi-meta">Concept • Spain</div></div>
|
||||||
|
<div class="pi-score-bar"><div class="pi-score-fill" style="width:65%;background:var(--green);"></div></div>
|
||||||
|
<div class="pi-score" style="color:var(--green-dark);">.65</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: Detail Panel -->
|
||||||
|
<div class="right-panel">
|
||||||
|
<div class="detail-header">
|
||||||
|
<div class="detail-title">OceanClean AI</div>
|
||||||
|
<div class="detail-meta">
|
||||||
|
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> BlueWave Technologies</span>
|
||||||
|
<span>Startup</span>
|
||||||
|
<span>Monaco</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="detail-body">
|
||||||
|
<!-- Confidence Gauge -->
|
||||||
|
<div class="gauge-card">
|
||||||
|
<div class="gauge-ring-container">
|
||||||
|
<svg class="gauge-ring" viewBox="0 0 80 80">
|
||||||
|
<circle class="bg" cx="40" cy="40" r="34" />
|
||||||
|
<circle class="fill" cx="40" cy="40" r="34" stroke="var(--green)" stroke-dasharray="214" stroke-dashoffset="39" />
|
||||||
|
</svg>
|
||||||
|
<div class="gauge-value" style="color: var(--green-dark);">82%</div>
|
||||||
|
</div>
|
||||||
|
<div class="gauge-info">
|
||||||
|
<div class="gauge-label">AI Confidence Score</div>
|
||||||
|
<div class="gauge-status passed">PASSED</div>
|
||||||
|
<div class="gauge-desc">Above threshold (50%). Strong match with screening criteria.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AI Reasoning -->
|
||||||
|
<div class="reasoning-card">
|
||||||
|
<h4>
|
||||||
|
<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>
|
||||||
|
AI Reasoning
|
||||||
|
</h4>
|
||||||
|
<div class="reasoning-text">
|
||||||
|
Strong technical approach with clear ocean impact. The project demonstrates innovative use of machine learning for ocean plastic detection with a viable go-to-market strategy. The team has relevant experience in marine technology and environmental monitoring. Budget allocation is well-structured with clear milestones. The project addresses a critical ocean conservation need with measurable impact metrics.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Rule Results -->
|
||||||
|
<div class="rules-card">
|
||||||
|
<h4>Screening Rule Results</h4>
|
||||||
|
<div class="rule-item">
|
||||||
|
<div class="rule-icon pass"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||||
|
<span class="rule-text">Has clear ocean conservation focus</span>
|
||||||
|
<span class="rule-score">9/10</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-item">
|
||||||
|
<div class="rule-icon pass"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||||
|
<span class="rule-text">Complete submission (all required files)</span>
|
||||||
|
<span class="rule-score">10/10</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-item">
|
||||||
|
<div class="rule-icon pass"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||||
|
<span class="rule-text">Viable team with relevant experience</span>
|
||||||
|
<span class="rule-score">8/10</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-item">
|
||||||
|
<div class="rule-icon pass"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||||
|
<span class="rule-text">Measurable impact metrics defined</span>
|
||||||
|
<span class="rule-score">7/10</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-item">
|
||||||
|
<div class="rule-icon warn"><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"/></svg></div>
|
||||||
|
<span class="rule-text">Budget feasibility and allocation</span>
|
||||||
|
<span class="rule-score">6/10</span>
|
||||||
|
</div>
|
||||||
|
<div class="rule-item">
|
||||||
|
<div class="rule-icon pass"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||||
|
<span class="rule-text">Innovation and differentiation</span>
|
||||||
|
<span class="rule-score">8/10</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Metrics -->
|
||||||
|
<div class="metrics-grid">
|
||||||
|
<div class="metric-card"><div class="metric-value">82%</div><div class="metric-label">Confidence</div></div>
|
||||||
|
<div class="metric-card"><div class="metric-value">8.0</div><div class="metric-label">Avg Rule Score</div></div>
|
||||||
|
<div class="metric-card"><div class="metric-value">6/6</div><div class="metric-label">Rules Passed</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Override Controls -->
|
||||||
|
<div class="override-bar">
|
||||||
|
<span class="label">Override Decision:</span>
|
||||||
|
<button class="override-btn pass">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
Pass
|
||||||
|
</button>
|
||||||
|
<button class="override-btn flag">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
|
||||||
|
Flag
|
||||||
|
</button>
|
||||||
|
<button class="override-btn reject">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||||
|
Reject
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="prototype-label">MOPC Redesign — Filtering Dashboard (Master-Detail)</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
846
prototypes/admin-redesign-v2/01-dashboard.html
Normal file
846
prototypes/admin-redesign-v2/01-dashboard.html
Normal file
@@ -0,0 +1,846 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin v2 — Dashboard</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
|
||||||
|
/* ===== SIDEBAR ===== */
|
||||||
|
.sidebar-premium {
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||||
|
border-right: 1px solid #e8edf2;
|
||||||
|
}
|
||||||
|
.sidebar-accent-line {
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: linear-gradient(180deg, #de0f1e 0%, #053d57 50%, transparent 100%);
|
||||||
|
}
|
||||||
|
.nav-active {
|
||||||
|
background: #053d57;
|
||||||
|
color: white;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: #de0f1e;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.nav-item {
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
.nav-item:hover {
|
||||||
|
background: rgba(5,61,87,0.06);
|
||||||
|
color: #053d57;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== LAYOUT ===== */
|
||||||
|
.main-offset { margin-left: 256px; }
|
||||||
|
|
||||||
|
/* ===== CARDS ===== */
|
||||||
|
.card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid #f0f3f6;
|
||||||
|
box-shadow: 0 1px 4px rgba(5,61,87,0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== SYSTEM PULSE ===== */
|
||||||
|
.system-pulse {
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, transparent 0%, #22c55e 20%, #22c55e 80%, transparent 100%);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.system-pulse::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: -30%;
|
||||||
|
width: 30%; height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
|
||||||
|
animation: pulse-sweep 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse-sweep {
|
||||||
|
0% { left: -30%; }
|
||||||
|
100% { left: 130%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== PIPELINE ===== */
|
||||||
|
.stage-node {
|
||||||
|
width: 44px; height: 44px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 12px; font-weight: 700;
|
||||||
|
flex-shrink: 0; margin: 0 auto;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.stage-node.done { background: #053d57; color: white; }
|
||||||
|
.stage-node.active {
|
||||||
|
background: #de0f1e; color: white;
|
||||||
|
width: 56px; height: 56px; font-size: 14px;
|
||||||
|
box-shadow: 0 0 0 8px rgba(222,15,30,0.1), 0 0 0 16px rgba(222,15,30,0.05);
|
||||||
|
}
|
||||||
|
.stage-node.upcoming {
|
||||||
|
background: rgba(5,61,87,0.06); color: rgba(5,61,87,0.25);
|
||||||
|
border: 2px dashed rgba(5,61,87,0.12);
|
||||||
|
}
|
||||||
|
.stage-line { flex: 1; height: 2px; background: rgba(5,61,87,0.1); }
|
||||||
|
.stage-line.done { background: #053d57; }
|
||||||
|
|
||||||
|
/* ===== ARC PROGRESS ===== */
|
||||||
|
.arc-bg { fill: none; stroke: rgba(5,61,87,0.08); stroke-width: 10; stroke-linecap: round; }
|
||||||
|
.arc-fill {
|
||||||
|
fill: none; stroke: #de0f1e; stroke-width: 10; stroke-linecap: round;
|
||||||
|
stroke-dasharray: 251;
|
||||||
|
transition: stroke-dashoffset 1.5s cubic-bezier(0.4,0,0.2,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== METRIC BARS ===== */
|
||||||
|
.metric-bar { height: 4px; background: rgba(5,61,87,0.07); border-radius: 2px; overflow: hidden; }
|
||||||
|
.metric-fill { height: 100%; border-radius: 2px; transition: width 1s ease; }
|
||||||
|
.metric-fill.blue { background: #053d57; }
|
||||||
|
.metric-fill.red { background: #de0f1e; }
|
||||||
|
.metric-fill.teal { background: #557f8c; }
|
||||||
|
|
||||||
|
/* ===== TIMELINE ===== */
|
||||||
|
.timeline-item { position: relative; }
|
||||||
|
.timeline-item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 38px; top: 30px; bottom: -14px;
|
||||||
|
width: 1px;
|
||||||
|
background: rgba(5,61,87,0.06);
|
||||||
|
}
|
||||||
|
.timeline-item:last-child::before { display: none; }
|
||||||
|
|
||||||
|
/* ===== ANIMATIONS ===== */
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
@keyframes blink {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.3; }
|
||||||
|
}
|
||||||
|
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||||
|
|
||||||
|
.stagger-1 { animation: slideIn 0.4s ease 0.05s both; }
|
||||||
|
.stagger-2 { animation: slideIn 0.4s ease 0.15s both; }
|
||||||
|
.stagger-3 { animation: slideIn 0.4s ease 0.25s both; }
|
||||||
|
.stagger-4 { animation: slideIn 0.4s ease 0.35s both; }
|
||||||
|
.stagger-5 { animation: slideIn 0.4s ease 0.45s both; }
|
||||||
|
|
||||||
|
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
|
||||||
|
.blink-dot { animation: blink 1.5s ease-in-out infinite; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f4f6f9]">
|
||||||
|
|
||||||
|
<!-- ===== SIDEBAR (fixed) ===== -->
|
||||||
|
<aside class="sidebar-premium fixed top-0 left-0 h-screen w-64 flex flex-col z-40" style="position:fixed">
|
||||||
|
<div class="sidebar-accent-line"></div>
|
||||||
|
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 border-b border-gray-100/80 flex items-center justify-between px-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0" style="background:linear-gradient(135deg,#053d57,#0a5a7c);box-shadow:0 4px 12px rgba(5,61,87,0.3)">
|
||||||
|
<span class="text-white font-black text-sm tracking-tight">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-black text-brand-blue leading-tight tracking-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-semibold tracking-wide uppercase">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full pulse-dot"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="border-b border-gray-100/80 px-4 py-3">
|
||||||
|
<button class="w-full flex items-center gap-3 hover:bg-gray-50 rounded-xl px-3 py-2.5 transition-colors text-left group">
|
||||||
|
<div class="w-7 h-7 rounded-lg bg-brand-blue/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-bold text-brand-blue leading-tight">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-0.5">
|
||||||
|
<a href="01-dashboard.html" class="nav-active flex items-center gap-3 px-3 py-2.5 rounded-xl font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Competition</span>
|
||||||
|
</div>
|
||||||
|
<a href="02-rounds-pipeline.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
||||||
|
</svg>
|
||||||
|
Rounds
|
||||||
|
<span class="ml-auto text-[10px] font-bold bg-brand-red/10 text-brand-red px-2 py-0.5 rounded-full">3</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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 href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>
|
||||||
|
</svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">People</span>
|
||||||
|
</div>
|
||||||
|
<a href="04-projects.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/>
|
||||||
|
</svg>
|
||||||
|
Projects
|
||||||
|
</a>
|
||||||
|
<a href="05-members-list.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||||
|
</svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Insights</span>
|
||||||
|
</div>
|
||||||
|
<a href="06-reports.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
Messages
|
||||||
|
<span class="ml-auto text-[10px] font-bold bg-brand-red/10 text-brand-red px-2 py-0.5 rounded-full">4</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Administration</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
||||||
|
</svg>
|
||||||
|
Apply Page
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
|
||||||
|
</svg>
|
||||||
|
Audit Log
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/>
|
||||||
|
</svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="border-t border-gray-100/80 p-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0" style="background:linear-gradient(135deg,#de0f1e,#aa0d18)">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-bold text-brand-blue leading-tight truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-gray-50 flex-shrink-0">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- ===== MAIN CONTENT ===== -->
|
||||||
|
<main class="main-offset min-h-screen">
|
||||||
|
|
||||||
|
<!-- Sticky Top Bar -->
|
||||||
|
<header class="bg-white border-b border-gray-100 sticky top-0 z-30 px-8 h-16 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2 text-sm text-gray-400 font-medium">
|
||||||
|
<span class="text-brand-blue font-semibold">Monaco OPC 2026</span>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
<span>Dashboard</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-4 py-2">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||||
|
</svg>
|
||||||
|
<input class="bg-transparent text-sm text-gray-600 outline-none w-52 placeholder-gray-400 font-medium" placeholder="Search anything... ⌘K" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="relative cursor-pointer p-2">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-brand-red rounded-full border-2 border-white"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- System Pulse Line -->
|
||||||
|
<div class="system-pulse"></div>
|
||||||
|
|
||||||
|
<!-- Page Body -->
|
||||||
|
<div class="px-8 pb-16">
|
||||||
|
|
||||||
|
<!-- Hero Greeting -->
|
||||||
|
<div class="pt-10 pb-8 stagger-1 relative overflow-hidden">
|
||||||
|
<div class="absolute right-0 top-0 text-[180px] font-black leading-none select-none pointer-events-none" style="color:rgba(5,61,87,0);letter-spacing:-8px;">OPC</div>
|
||||||
|
<div class="text-[42px] font-light text-brand-blue leading-none tracking-tight mb-2">
|
||||||
|
Good morning, <strong class="font-black">Marc</strong>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm font-normal text-brand-blue/45 mt-1">
|
||||||
|
<span class="text-brand-blue font-semibold">Round 3 — Expert Evaluation</span> is active
|
||||||
|
· 34 of 87 projects reviewed
|
||||||
|
· Closes in <span class="text-brand-blue font-semibold">14 days</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Narrative Stats Banner -->
|
||||||
|
<div class="stagger-2 rounded-2xl p-8 relative overflow-hidden mb-8" style="background:#053d57">
|
||||||
|
<div class="absolute inset-0 pointer-events-none" style="background:radial-gradient(ellipse at 80% 50%, rgba(85,127,140,0.2) 0%, transparent 60%),radial-gradient(ellipse at 10% 80%, rgba(222,15,30,0.08) 0%, transparent 50%)"></div>
|
||||||
|
<div class="flex items-center gap-0 relative z-10">
|
||||||
|
<div class="flex-1 text-[22px] font-light leading-relaxed" style="color:rgba(255,255,255,0.75);max-width:700px">
|
||||||
|
<span class="text-[52px] font-black text-white leading-none tracking-[-2px] inline-block align-middle mx-1">142</span>
|
||||||
|
projects from
|
||||||
|
<span class="font-semibold" style="color:#7fb3c0">38 countries</span>,
|
||||||
|
with
|
||||||
|
<span class="text-[40px] font-black text-white leading-none tracking-[-2px] inline-block align-middle mx-1">87</span>
|
||||||
|
eligible for evaluation by
|
||||||
|
<span class="font-bold" style="color:#de0f1e">8 jury members</span>
|
||||||
|
—
|
||||||
|
<span class="text-[36px] font-black text-white leading-none tracking-[-2px] inline-block align-middle mx-1">39%</span>
|
||||||
|
complete
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-16 mx-8 flex-shrink-0" style="background:rgba(255,255,255,0.1)"></div>
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div>
|
||||||
|
<div class="text-[28px] font-black text-white leading-none tracking-[-0.5px]">4.2<span class="text-lg font-normal" style="opacity:0.5;">/5</span></div>
|
||||||
|
<div class="text-[10px] font-medium uppercase tracking-[1px] mt-0.5" style="color:rgba(255,255,255,0.4)">Avg Score</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-[28px] font-black leading-none tracking-[-0.5px]" style="color:#7fb3c0">12</div>
|
||||||
|
<div class="text-[10px] font-medium uppercase tracking-[1px] mt-0.5" style="color:rgba(255,255,255,0.4)">COI Declared</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pipeline -->
|
||||||
|
<div class="stagger-3 mb-8">
|
||||||
|
<div class="text-[11px] font-bold uppercase tracking-[2px] text-brand-blue/35 mb-5">Competition Pipeline</div>
|
||||||
|
<div class="card p-8">
|
||||||
|
<div class="flex items-stretch gap-0 relative">
|
||||||
|
<!-- Connector line behind -->
|
||||||
|
<div class="absolute top-[22px] left-0 right-0 h-[2px] bg-brand-blue/08 z-0"></div>
|
||||||
|
|
||||||
|
<!-- Stage 1: INTAKE done -->
|
||||||
|
<div class="flex-1 flex flex-col items-center relative z-10">
|
||||||
|
<div class="flex items-center w-full">
|
||||||
|
<div class="flex-1 h-0.5 invisible"></div>
|
||||||
|
<div class="stage-node done">✓</div>
|
||||||
|
<div class="stage-line done flex-1"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-3 px-1">
|
||||||
|
<div class="text-[10.5px] font-bold uppercase tracking-[0.5px] text-brand-blue/40">Intake</div>
|
||||||
|
<div class="text-lg font-black text-brand-blue/20 mt-0.5">142</div>
|
||||||
|
<div class="text-[9.5px] text-brand-blue/30">Oct – Nov 2025</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stage 2: FILTERING done -->
|
||||||
|
<div class="flex-1 flex flex-col items-center relative z-10">
|
||||||
|
<div class="flex items-center w-full">
|
||||||
|
<div class="stage-line done flex-1"></div>
|
||||||
|
<div class="stage-node done">✓</div>
|
||||||
|
<div class="stage-line done flex-1"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-3 px-1">
|
||||||
|
<div class="text-[10.5px] font-bold uppercase tracking-[0.5px] text-brand-blue/40">Filtering</div>
|
||||||
|
<div class="text-lg font-black text-brand-blue/20 mt-0.5">103</div>
|
||||||
|
<div class="text-[9.5px] text-brand-blue/30">Dec 2025</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stage 3: EVALUATION active -->
|
||||||
|
<div class="flex-1 flex flex-col items-center relative z-10">
|
||||||
|
<div class="flex items-center w-full">
|
||||||
|
<div class="stage-line done flex-1"></div>
|
||||||
|
<div class="stage-node active">⚡</div>
|
||||||
|
<div class="stage-line flex-1"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-3 px-1">
|
||||||
|
<div class="text-[11px] font-black uppercase tracking-[0.5px] text-brand-red">● Evaluation</div>
|
||||||
|
<div class="text-[22px] font-black text-brand-red mt-0.5">87</div>
|
||||||
|
<div class="text-[9.5px] font-semibold text-brand-blue/50">Ongoing</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stage 4: SHORTLIST upcoming -->
|
||||||
|
<div class="flex-1 flex flex-col items-center relative z-10">
|
||||||
|
<div class="flex items-center w-full">
|
||||||
|
<div class="stage-line flex-1"></div>
|
||||||
|
<div class="stage-node upcoming">4</div>
|
||||||
|
<div class="stage-line flex-1"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-3 px-1">
|
||||||
|
<div class="text-[10.5px] font-bold uppercase tracking-[0.5px] text-brand-blue/50">Shortlist</div>
|
||||||
|
<div class="text-lg font-black text-brand-blue/30 mt-0.5">—</div>
|
||||||
|
<div class="text-[9.5px] text-brand-blue/50">Mar 2026</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stage 5: LIVE FINALS upcoming -->
|
||||||
|
<div class="flex-1 flex flex-col items-center relative z-10">
|
||||||
|
<div class="flex items-center w-full">
|
||||||
|
<div class="stage-line flex-1"></div>
|
||||||
|
<div class="stage-node upcoming">5</div>
|
||||||
|
<div class="stage-line flex-1"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-3 px-1">
|
||||||
|
<div class="text-[10.5px] font-bold uppercase tracking-[0.5px] text-brand-blue/50">Live Finals</div>
|
||||||
|
<div class="text-lg font-black text-brand-blue/30 mt-0.5">—</div>
|
||||||
|
<div class="text-[9.5px] text-brand-blue/50">Apr 2026</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stage 6: DELIBERATION upcoming -->
|
||||||
|
<div class="flex-1 flex flex-col items-center relative z-10">
|
||||||
|
<div class="flex items-center w-full">
|
||||||
|
<div class="stage-line flex-1"></div>
|
||||||
|
<div class="stage-node upcoming">6</div>
|
||||||
|
<div class="flex-1 h-0.5 invisible"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-3 px-1">
|
||||||
|
<div class="text-[10.5px] font-bold uppercase tracking-[0.5px] text-brand-blue/50">Deliberation</div>
|
||||||
|
<div class="text-lg font-black text-brand-blue/30 mt-0.5">—</div>
|
||||||
|
<div class="text-[9.5px] text-brand-blue/50">May 2026</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Active Round + Sidebar -->
|
||||||
|
<div class="stagger-4 grid gap-5 mb-8" style="grid-template-columns:1fr 360px">
|
||||||
|
|
||||||
|
<!-- Active Round Main Panel -->
|
||||||
|
<div class="card p-9 relative overflow-hidden">
|
||||||
|
<div class="absolute left-0 top-0 bottom-0 w-1 rounded-l-2xl" style="background:linear-gradient(180deg,#de0f1e 0%,rgba(222,15,30,0.15) 100%)"></div>
|
||||||
|
|
||||||
|
<div class="inline-flex items-center gap-2 bg-brand-red/8 text-brand-red text-[10px] font-bold tracking-[1.5px] uppercase px-3 py-1 rounded-full mb-4">
|
||||||
|
<span class="w-1.5 h-1.5 bg-brand-red rounded-full blink-dot"></span>
|
||||||
|
Active Round
|
||||||
|
</div>
|
||||||
|
<div class="text-[28px] font-black text-brand-blue tracking-tight mb-1">Expert Evaluation</div>
|
||||||
|
<div class="text-[13px] text-brand-blue/50 mb-8">Jury Group A · 8 jurors assigned · Jan 15 – Mar 1, 2026</div>
|
||||||
|
|
||||||
|
<!-- Arc + Metrics -->
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<!-- Arc Progress -->
|
||||||
|
<div class="relative flex-shrink-0" style="width:140px;height:100px">
|
||||||
|
<svg width="140" height="90" viewBox="0 0 140 90" style="overflow:hidden;display:block">
|
||||||
|
<path class="arc-bg" d="M 20 80 A 50 50 0 0 1 120 80" />
|
||||||
|
<path class="arc-fill" d="M 20 80 A 50 50 0 0 1 120 80" stroke-dashoffset="152" />
|
||||||
|
</svg>
|
||||||
|
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 text-center" style="width:120px">
|
||||||
|
<div class="text-[32px] font-black text-brand-blue leading-none tracking-[-1px]">39%</div>
|
||||||
|
<div class="text-[9px] font-semibold uppercase tracking-[1px] text-brand-blue/40">Evaluated</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Metrics -->
|
||||||
|
<div class="flex-1 flex flex-col gap-4">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1">
|
||||||
|
<span class="text-[11px] font-semibold uppercase tracking-[0.8px] text-brand-blue/45">Assignments Complete</span>
|
||||||
|
<span class="text-[13px] font-bold text-brand-blue">34 / 87</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric-bar"><div class="metric-fill blue" style="width:39%"></div></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1">
|
||||||
|
<span class="text-[11px] font-semibold uppercase tracking-[0.8px] text-brand-blue/45">COI Declarations</span>
|
||||||
|
<span class="text-[13px] font-bold text-brand-blue">12 conflicts</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric-bar"><div class="metric-fill red" style="width:14%"></div></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1">
|
||||||
|
<span class="text-[11px] font-semibold uppercase tracking-[0.8px] text-brand-blue/45">Submission Window</span>
|
||||||
|
<span class="text-[13px] font-bold text-brand-blue">Open · 14 days left</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric-bar"><div class="metric-fill teal" style="width:62%"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Juror Activity -->
|
||||||
|
<div class="mt-7 pt-6 border-t border-brand-blue/06">
|
||||||
|
<div class="text-[10px] font-bold uppercase tracking-[1.5px] text-brand-blue/35 mb-3">Juror Activity</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="w-9 h-9 rounded-full bg-brand-blue flex items-center justify-center text-white text-[11px] font-bold">AL</div>
|
||||||
|
<div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-white"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-[11px] font-bold" style="background:#557f8c">MR</div>
|
||||||
|
<div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-white"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-[11px] font-bold" style="background:#8a9eb5">JK</div>
|
||||||
|
<div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-amber-400 rounded-full border-2 border-white"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-[11px] font-bold" style="background:#6b7e94">PS</div>
|
||||||
|
<div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-gray-400 rounded-full border-2 border-white"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-[11px] font-bold" style="background:#4a6278">SW</div>
|
||||||
|
<div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-white"></div>
|
||||||
|
</div>
|
||||||
|
<div class="w-9 h-9 rounded-full bg-brand-blue/08 border border-dashed border-brand-blue/20 flex items-center justify-center text-[11px] font-bold text-brand-blue/35">+3</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[11px] text-brand-blue/40 ml-2">
|
||||||
|
<span class="text-green-500 font-bold">3 active</span> ·
|
||||||
|
<span class="text-amber-500 font-bold">1 behind</span> ·
|
||||||
|
<span class="text-brand-blue/40 font-semibold">4 not started</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sidebar Cards -->
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<!-- Countdown -->
|
||||||
|
<div class="card p-6" style="border-color:rgba(222,15,30,0.15);background:linear-gradient(135deg,rgba(222,15,30,0.02) 0%,white 100%)">
|
||||||
|
<div class="text-[10px] font-bold uppercase tracking-[1.5px] text-brand-blue/40 mb-2">Submission Window Closes</div>
|
||||||
|
<div class="flex items-baseline gap-2 my-2">
|
||||||
|
<div class="text-[56px] font-black text-brand-blue leading-none tracking-[-3px]">14</div>
|
||||||
|
<div class="text-base font-semibold text-brand-blue/40 pb-1">days</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[11px] text-brand-blue/40">Closing deadline</div>
|
||||||
|
<div class="text-[12px] font-semibold text-brand-blue mt-1">March 1, 2026 at 23:59 CET</div>
|
||||||
|
<div class="mt-4 p-3 rounded-lg text-[11px] text-brand-blue/50" style="background:rgba(5,61,87,0.04)">
|
||||||
|
<span class="text-amber-500 font-bold">⚠ 3 projects</span> haven't submitted final documents
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Actions -->
|
||||||
|
<div class="card p-5">
|
||||||
|
<div class="text-[10px] font-bold uppercase tracking-[1.5px] text-brand-blue/35 mb-3">Quick Actions</div>
|
||||||
|
<div class="divide-y divide-brand-blue/05">
|
||||||
|
<div class="flex items-center gap-3 py-2.5 cursor-pointer text-brand-blue/70 hover:text-brand-blue text-[12.5px] font-medium transition-colors">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-blue/05 flex items-center justify-center text-sm">✉</div>
|
||||||
|
Send reminder to jurors
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 py-2.5 cursor-pointer text-brand-blue/70 hover:text-brand-blue text-[12.5px] font-medium transition-colors">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-blue/05 flex items-center justify-center text-sm">📋</div>
|
||||||
|
Manage assignments
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 py-2.5 cursor-pointer text-brand-blue/70 hover:text-brand-blue text-[12.5px] font-medium transition-colors">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-blue/05 flex items-center justify-center text-sm">📊</div>
|
||||||
|
View evaluation report
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 py-2.5 cursor-pointer text-brand-red text-[12.5px] font-semibold transition-colors">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center text-sm" style="background:rgba(222,15,30,0.08)">→</div>
|
||||||
|
Close round early
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lower Grid: Evaluations + Geographic + Activity -->
|
||||||
|
<div class="stagger-5 grid gap-5 pt-4" style="grid-template-columns:1fr 1fr 320px">
|
||||||
|
|
||||||
|
<!-- Recent Evaluations -->
|
||||||
|
<div class="card overflow-hidden">
|
||||||
|
<div class="px-6 py-5 flex justify-between items-center border-b border-brand-blue/05">
|
||||||
|
<div class="text-[12px] font-bold uppercase tracking-[1px] text-brand-blue">Recent Evaluations</div>
|
||||||
|
<div class="text-[11px] font-semibold text-brand-teal cursor-pointer">View all →</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-3.5 px-6 py-3.5 border-b border-brand-blue/04 hover:bg-brand-blue/[0.02] cursor-pointer transition-colors">
|
||||||
|
<span class="text-xl flex-shrink-0">🇫🇷</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[12.5px] font-semibold text-brand-blue truncate">AquaGuard Coastal Monitoring</div>
|
||||||
|
<div class="text-[10.5px] text-brand-blue/45 mt-0.5">France · Marine Technology</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 flex-shrink-0">
|
||||||
|
<div class="w-14 h-1 bg-brand-blue/07 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue" style="width:88%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[13px] font-black text-brand-blue w-8 text-right">4.4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3.5 px-6 py-3.5 border-b border-brand-blue/04 hover:bg-brand-blue/[0.02] cursor-pointer transition-colors">
|
||||||
|
<span class="text-xl flex-shrink-0">🇳🇴</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[12.5px] font-semibold text-brand-blue truncate">Arctic Current Tracker Pro</div>
|
||||||
|
<div class="text-[10.5px] text-brand-blue/45 mt-0.5">Norway · Oceanography</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 flex-shrink-0">
|
||||||
|
<div class="w-14 h-1 bg-brand-blue/07 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue" style="width:76%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[13px] font-black text-brand-blue w-8 text-right">3.8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3.5 px-6 py-3.5 border-b border-brand-blue/04 hover:bg-brand-blue/[0.02] cursor-pointer transition-colors">
|
||||||
|
<span class="text-xl flex-shrink-0">🇧🇷</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[12.5px] font-semibold text-brand-blue truncate">Reef Guardian AI System</div>
|
||||||
|
<div class="text-[10.5px] text-brand-blue/45 mt-0.5">Brazil · Conservation Tech</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 flex-shrink-0">
|
||||||
|
<div class="w-14 h-1 bg-brand-blue/07 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue" style="width:94%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[13px] font-black text-brand-blue w-8 text-right">4.7</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3.5 px-6 py-3.5 border-b border-brand-blue/04 hover:bg-brand-blue/[0.02] cursor-pointer transition-colors">
|
||||||
|
<span class="text-xl flex-shrink-0">🇯🇵</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[12.5px] font-semibold text-brand-blue truncate">Deep Ocean Plastics Capture</div>
|
||||||
|
<div class="text-[10.5px] text-brand-blue/45 mt-0.5">Japan · Pollution Control</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 flex-shrink-0">
|
||||||
|
<div class="w-14 h-1 bg-brand-blue/07 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue" style="width:82%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[13px] font-black text-brand-blue w-8 text-right">4.1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3.5 px-6 py-3.5 hover:bg-brand-blue/[0.02] cursor-pointer transition-colors">
|
||||||
|
<span class="text-xl flex-shrink-0">🇰🇪</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[12.5px] font-semibold text-brand-blue truncate">Mangrove Recovery Initiative</div>
|
||||||
|
<div class="text-[10.5px] text-brand-blue/45 mt-0.5">Kenya · Ecosystem Restoration</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 flex-shrink-0">
|
||||||
|
<div class="w-14 h-1 bg-brand-blue/07 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue" style="width:70%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[13px] font-black text-brand-blue w-8 text-right">3.5</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Geographic Reach -->
|
||||||
|
<div class="card overflow-hidden">
|
||||||
|
<div class="px-6 py-5 flex justify-between items-center border-b border-brand-blue/05">
|
||||||
|
<div class="text-[12px] font-bold uppercase tracking-[1px] text-brand-blue">Geographic Reach</div>
|
||||||
|
<div class="text-[11px] font-semibold text-brand-teal">38 countries</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-2">
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2.5">
|
||||||
|
<div class="text-[11.5px] font-medium text-brand-blue/60 w-24 flex-shrink-0 flex items-center gap-1.5">🇫🇷 France</div>
|
||||||
|
<div class="flex-1 h-1.5 bg-brand-blue/05 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-blue to-brand-teal" style="width:80%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[12px] font-bold text-brand-blue w-6 text-right flex-shrink-0">24</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2.5">
|
||||||
|
<div class="text-[11.5px] font-medium text-brand-blue/60 w-24 flex-shrink-0 flex items-center gap-1.5">🇩🇪 Germany</div>
|
||||||
|
<div class="flex-1 h-1.5 bg-brand-blue/05 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-blue to-brand-teal" style="width:54%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[12px] font-bold text-brand-blue w-6 text-right flex-shrink-0">16</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2.5">
|
||||||
|
<div class="text-[11.5px] font-medium text-brand-blue/60 w-24 flex-shrink-0 flex items-center gap-1.5">🇺🇸 USA</div>
|
||||||
|
<div class="flex-1 h-1.5 bg-brand-blue/05 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-blue to-brand-teal" style="width:43%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[12px] font-bold text-brand-blue w-6 text-right flex-shrink-0">13</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2.5">
|
||||||
|
<div class="text-[11.5px] font-medium text-brand-blue/60 w-24 flex-shrink-0 flex items-center gap-1.5">🇬🇧 UK</div>
|
||||||
|
<div class="flex-1 h-1.5 bg-brand-blue/05 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-blue to-brand-teal" style="width:33%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[12px] font-bold text-brand-blue w-6 text-right flex-shrink-0">10</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2.5">
|
||||||
|
<div class="text-[11.5px] font-medium text-brand-blue/60 w-24 flex-shrink-0 flex items-center gap-1.5">🇯🇵 Japan</div>
|
||||||
|
<div class="flex-1 h-1.5 bg-brand-blue/05 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-blue to-brand-teal" style="width:27%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[12px] font-bold text-brand-blue w-6 text-right flex-shrink-0">8</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2.5">
|
||||||
|
<div class="text-[11.5px] font-medium text-brand-blue/60 w-24 flex-shrink-0 flex items-center gap-1.5">🇦🇺 Australia</div>
|
||||||
|
<div class="flex-1 h-1.5 bg-brand-blue/05 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-blue to-brand-teal" style="width:20%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[12px] font-bold text-brand-blue w-6 text-right flex-shrink-0">6</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2.5">
|
||||||
|
<div class="text-[11.5px] font-medium text-brand-blue/60 w-24 flex-shrink-0 flex items-center gap-1.5">🇧🇷 Brazil</div>
|
||||||
|
<div class="flex-1 h-1.5 bg-brand-blue/05 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-blue to-brand-teal" style="width:17%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[12px] font-bold text-brand-blue w-6 text-right flex-shrink-0">5</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 px-6 py-2.5">
|
||||||
|
<div class="text-[11.5px] font-medium text-brand-blue/35 w-24 flex-shrink-0">Other</div>
|
||||||
|
<div class="flex-1 h-1.5 bg-brand-blue/05 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-brand-blue/15" style="width:67%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[12px] font-bold text-brand-blue/40 w-6 text-right flex-shrink-0">60</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- By Category -->
|
||||||
|
<div class="mx-6 mt-4 pt-4 border-t border-brand-blue/05 pb-5">
|
||||||
|
<div class="text-[10px] font-bold uppercase tracking-[1.5px] text-brand-blue/35 mb-3">By Category</div>
|
||||||
|
<div class="grid grid-cols-2 gap-1.5">
|
||||||
|
<div class="bg-brand-blue/05 rounded-xl p-3">
|
||||||
|
<div class="text-[22px] font-black text-brand-blue tracking-[-1px]">38</div>
|
||||||
|
<div class="text-[10px] font-semibold text-brand-blue/50 mt-0.5">Marine Technology</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl p-3" style="background:rgba(85,127,140,0.12)">
|
||||||
|
<div class="text-[22px] font-black tracking-[-1px]" style="color:#557f8c">26</div>
|
||||||
|
<div class="text-[10px] font-semibold mt-0.5" style="color:rgba(85,127,140,0.7)">Pollution Control</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-brand-blue/03 rounded-xl p-3">
|
||||||
|
<div class="text-[22px] font-black text-brand-blue/50 tracking-[-1px]">18</div>
|
||||||
|
<div class="text-[10px] font-semibold text-brand-blue/35 mt-0.5">Ecosystem Restoration</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-brand-blue/03 rounded-xl p-3">
|
||||||
|
<div class="text-[22px] font-black text-brand-blue/35 tracking-[-1px]">5</div>
|
||||||
|
<div class="text-[10px] font-semibold text-brand-blue/30 mt-0.5">Other</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Activity Timeline -->
|
||||||
|
<div class="card overflow-hidden">
|
||||||
|
<div class="px-6 py-5 flex justify-between items-center border-b border-brand-blue/05">
|
||||||
|
<div class="text-[12px] font-bold uppercase tracking-[1px] text-brand-blue">Activity</div>
|
||||||
|
<div class="flex items-center gap-1.5 text-[11px] font-semibold text-green-500">
|
||||||
|
<span class="w-1.5 h-1.5 bg-green-500 rounded-full pulse-dot"></span>
|
||||||
|
Live
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="timeline-item flex gap-4 px-6 py-3.5">
|
||||||
|
<div class="w-3 h-3 rounded-full flex-shrink-0 mt-0.5 bg-green-500" style="position:relative;z-index:1"></div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[12px] font-medium text-brand-blue/75 leading-[1.5]"><strong class="text-brand-blue font-bold">Amira Larbi</strong> submitted evaluation for Reef Guardian AI System</div>
|
||||||
|
<div class="text-[10px] text-brand-blue/30 mt-0.5">2 minutes ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item flex gap-4 px-6 py-3.5">
|
||||||
|
<div class="w-3 h-3 rounded-full flex-shrink-0 mt-0.5 bg-blue-400" style="position:relative;z-index:1"></div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[12px] font-medium text-brand-blue/75 leading-[1.5]"><strong class="text-brand-blue font-bold">COI declared</strong> — Jakob Kruse on Arctic Current Tracker Pro</div>
|
||||||
|
<div class="text-[10px] text-brand-blue/30 mt-0.5">18 minutes ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item flex gap-4 px-6 py-3.5">
|
||||||
|
<div class="w-3 h-3 rounded-full flex-shrink-0 mt-0.5 bg-brand-red" style="position:relative;z-index:1"></div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[12px] font-medium text-brand-blue/75 leading-[1.5]"><strong class="text-brand-blue font-bold">Assignment sent</strong> to 3 jury members for Round 3 wave 2</div>
|
||||||
|
<div class="text-[10px] text-brand-blue/30 mt-0.5">1 hour ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item flex gap-4 px-6 py-3.5">
|
||||||
|
<div class="w-3 h-3 rounded-full flex-shrink-0 mt-0.5 bg-brand-teal" style="position:relative;z-index:1"></div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[12px] font-medium text-brand-blue/75 leading-[1.5]"><strong class="text-brand-blue font-bold">Sofia Weber</strong> completed 8 evaluations this session</div>
|
||||||
|
<div class="text-[10px] text-brand-blue/30 mt-0.5">2 hours ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item flex gap-4 px-6 py-3.5">
|
||||||
|
<div class="w-3 h-3 rounded-full flex-shrink-0 mt-0.5 bg-amber-400" style="position:relative;z-index:1"></div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[12px] font-medium text-brand-blue/75 leading-[1.5]"><strong class="text-brand-blue font-bold">Reminder sent</strong> to 4 jurors below 30% completion</div>
|
||||||
|
<div class="text-[10px] text-brand-blue/30 mt-0.5">Yesterday, 4:12 PM</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-4 px-6 py-3.5">
|
||||||
|
<div class="w-3 h-3 rounded-full flex-shrink-0 mt-0.5" style="background:rgba(5,61,87,0.15)"></div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[12px] font-medium text-brand-blue/75 leading-[1.5]"><strong class="text-brand-blue font-bold">Marc Caulliez</strong> closed Filtering round and advanced 87 projects</div>
|
||||||
|
<div class="text-[10px] text-brand-blue/30 mt-0.5">Jan 15, 2026</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div><!-- /px-8 -->
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
784
prototypes/admin-redesign-v2/02-rounds-pipeline.html
Normal file
784
prototypes/admin-redesign-v2/02-rounds-pipeline.html
Normal file
@@ -0,0 +1,784 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin v2 — Rounds Pipeline</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
|
||||||
|
/* ===== SIDEBAR ===== */
|
||||||
|
.sidebar-premium {
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||||
|
border-right: 1px solid #e8edf2;
|
||||||
|
}
|
||||||
|
.sidebar-accent-line {
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: linear-gradient(180deg, #de0f1e 0%, #053d57 50%, transparent 100%);
|
||||||
|
}
|
||||||
|
.nav-active {
|
||||||
|
background: #053d57;
|
||||||
|
color: white;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: #de0f1e;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.nav-item {
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
.nav-item:hover {
|
||||||
|
background: rgba(5,61,87,0.06);
|
||||||
|
color: #053d57;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== LAYOUT ===== */
|
||||||
|
.main-offset { margin-left: 256px; }
|
||||||
|
|
||||||
|
/* ===== ROUND CARDS ===== */
|
||||||
|
.rounds-container {
|
||||||
|
padding: 32px 40px 64px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vertical spine */
|
||||||
|
.rounds-container::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 80px;
|
||||||
|
top: 55px;
|
||||||
|
bottom: 100px;
|
||||||
|
width: 2px;
|
||||||
|
background: linear-gradient(180deg, #053d57 0%, rgba(5,61,87,0.1) 100%);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.round-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spine-indicator {
|
||||||
|
width: 80px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 28px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spine-node {
|
||||||
|
width: 14px; height: 14px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.spine-node.done { background: #053d57; }
|
||||||
|
.spine-node.active {
|
||||||
|
background: #de0f1e;
|
||||||
|
box-shadow: 0 0 0 5px rgba(222,15,30,0.15), 0 0 0 10px rgba(222,15,30,0.06);
|
||||||
|
width: 18px; height: 18px;
|
||||||
|
}
|
||||||
|
.spine-node.upcoming {
|
||||||
|
background: rgba(5,61,87,0.12);
|
||||||
|
border: 2px dashed rgba(5,61,87,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== CARD STYLES ===== */
|
||||||
|
.round-card {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.round-card:hover { transform: translateY(-1px); }
|
||||||
|
|
||||||
|
.round-card.done {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #f0f3f6;
|
||||||
|
box-shadow: 0 1px 4px rgba(5,61,87,0.04);
|
||||||
|
}
|
||||||
|
.round-card.active {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid rgba(222,15,30,0.15);
|
||||||
|
box-shadow: 0 8px 40px rgba(222,15,30,0.08), 0 2px 8px rgba(0,0,0,0.04);
|
||||||
|
}
|
||||||
|
.round-card.upcoming {
|
||||||
|
background: rgba(255,255,255,0.5);
|
||||||
|
border: 1px solid #f0f3f6;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accent strip */
|
||||||
|
.round-card .accent-strip { height: 4px; width: 100%; }
|
||||||
|
.intake .accent-strip { background: #64748b; }
|
||||||
|
.filtering .accent-strip { background: linear-gradient(90deg, #d97706, #f59e0b); }
|
||||||
|
.evaluation .accent-strip { background: linear-gradient(90deg, #2563eb, #3b82f6); }
|
||||||
|
.submission .accent-strip { background: linear-gradient(90deg, #7c3aed, #a855f7); }
|
||||||
|
.live-final .accent-strip { background: linear-gradient(90deg, #de0f1e, #f43f5e); }
|
||||||
|
.deliberation .accent-strip { background: linear-gradient(90deg, #4338ca, #6366f1); }
|
||||||
|
|
||||||
|
/* Type badge colors */
|
||||||
|
.badge-intake { background: rgba(100,116,139,0.1); color: #475569; }
|
||||||
|
.badge-filtering { background: rgba(217,119,6,0.1); color: #d97706; }
|
||||||
|
.badge-evaluation { background: rgba(37,99,235,0.1); color: #2563eb; }
|
||||||
|
.badge-submission { background: rgba(124,58,237,0.1); color: #7c3aed; }
|
||||||
|
.badge-mentoring { background: rgba(13,148,136,0.1); color: #0d9488; }
|
||||||
|
.badge-live-final { background: rgba(222,15,30,0.1); color: #de0f1e; }
|
||||||
|
.badge-deliberation { background: rgba(67,56,202,0.1); color: #4338ca; }
|
||||||
|
|
||||||
|
.round-type-badge {
|
||||||
|
font-size: 9px; font-weight: 800;
|
||||||
|
text-transform: uppercase; letter-spacing: 1.5px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 20px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Compact (done) rows */
|
||||||
|
.round-compact {
|
||||||
|
padding: 20px 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.round-compact-name {
|
||||||
|
font-size: 15px; font-weight: 700;
|
||||||
|
color: #053d57;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.round-compact-meta { display: flex; gap: 24px; align-items: center; }
|
||||||
|
.meta-item { display: flex; flex-direction: column; align-items: flex-end; }
|
||||||
|
.meta-val { font-size: 18px; font-weight: 800; color: rgba(5,61,87,0.5); letter-spacing: -0.5px; line-height: 1; }
|
||||||
|
.meta-lbl { font-size: 9px; font-weight: 600; color: rgba(5,61,87,0.3); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 1px; }
|
||||||
|
.round-compact-status { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: rgba(5,61,87,0.4); }
|
||||||
|
.round-compact-status .check {
|
||||||
|
width: 20px; height: 20px;
|
||||||
|
border-radius: 50%; background: #053d57;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
color: white; font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active expanded body */
|
||||||
|
.round-active-body { padding: 32px 36px 28px; }
|
||||||
|
.active-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; }
|
||||||
|
.active-tag {
|
||||||
|
display: inline-flex; align-items: center; gap: 6px;
|
||||||
|
background: rgba(222,15,30,0.08); color: #de0f1e;
|
||||||
|
font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
|
||||||
|
padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.active-tag .blink { width: 6px; height: 6px; background: #de0f1e; border-radius: 50%; animation: blink 1.5s ease-in-out infinite; }
|
||||||
|
.active-round-name { font-size: 32px; font-weight: 900; color: #053d57; letter-spacing: -1px; line-height: 1; }
|
||||||
|
.active-round-sub { font-size: 13px; color: rgba(5,61,87,0.45); margin-top: 6px; }
|
||||||
|
|
||||||
|
/* Progress bar */
|
||||||
|
.big-progress-track { height: 12px; background: rgba(5,61,87,0.06); border-radius: 6px; overflow: hidden; position: relative; }
|
||||||
|
.big-progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #de0f1e, #aa0d18);
|
||||||
|
border-radius: 6px; position: relative;
|
||||||
|
transition: width 1.5s cubic-bezier(0.4,0,0.2,1);
|
||||||
|
}
|
||||||
|
.big-progress-fill::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute; top: 0; right: 0;
|
||||||
|
width: 40px; height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Metrics */
|
||||||
|
.active-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
|
||||||
|
.active-metric { background: rgba(5,61,87,0.03); border-radius: 12px; padding: 16px 18px; }
|
||||||
|
.active-metric .m-val { font-size: 28px; font-weight: 900; color: #053d57; letter-spacing: -1px; line-height: 1; }
|
||||||
|
.active-metric .m-lbl { font-size: 10px; font-weight: 600; color: rgba(5,61,87,0.4); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; }
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.active-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid rgba(5,61,87,0.06); }
|
||||||
|
.active-footer-dates { display: flex; gap: 28px; }
|
||||||
|
.footer-date-item { display: flex; flex-direction: column; }
|
||||||
|
.footer-date-lbl { font-size: 9px; font-weight: 700; color: rgba(5,61,87,0.3); text-transform: uppercase; letter-spacing: 1px; }
|
||||||
|
.footer-date-val { font-size: 13px; font-weight: 700; color: #053d57; margin-top: 2px; }
|
||||||
|
.footer-actions { display: flex; gap: 8px; }
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn-primary {
|
||||||
|
background: #053d57; color: white;
|
||||||
|
font-size: 12px; font-weight: 700;
|
||||||
|
padding: 9px 18px; border-radius: 8px;
|
||||||
|
cursor: pointer; border: none;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.btn-primary:hover { background: #0a5a7c; }
|
||||||
|
.btn-ghost {
|
||||||
|
background: transparent; color: rgba(5,61,87,0.5);
|
||||||
|
font-size: 12px; font-weight: 600;
|
||||||
|
padding: 9px 18px; border-radius: 8px;
|
||||||
|
cursor: pointer; border: 1px solid rgba(5,61,87,0.1);
|
||||||
|
font-family: 'Montserrat', sans-serif; transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.btn-ghost:hover { border-color: rgba(5,61,87,0.2); color: #053d57; }
|
||||||
|
|
||||||
|
/* Upcoming ghost */
|
||||||
|
.round-upcoming-body { padding: 22px 28px; display: flex; align-items: center; gap: 20px; }
|
||||||
|
|
||||||
|
/* Award annotation */
|
||||||
|
.award-branch { display: flex; align-items: flex-start; gap: 0; margin-top: -8px; margin-bottom: 8px; padding-left: 100px; }
|
||||||
|
.award-branch-line { width: 28px; height: 2px; background: #d4a853; margin-top: 16px; flex-shrink: 0; }
|
||||||
|
.award-chip {
|
||||||
|
display: flex; align-items: center; gap: 8px;
|
||||||
|
background: rgba(212,168,83,0.1); border: 1px solid rgba(212,168,83,0.25);
|
||||||
|
border-radius: 8px; padding: 10px 14px; flex: 1;
|
||||||
|
}
|
||||||
|
.award-chip-name { font-size: 12px; font-weight: 700; color: #a07a2a; }
|
||||||
|
.award-chip-meta { font-size: 10px; color: rgba(160,122,42,0.6); margin-top: 1px; }
|
||||||
|
.award-chip-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #a07a2a; background: rgba(212,168,83,0.2); padding: 2px 8px; border-radius: 10px; }
|
||||||
|
|
||||||
|
/* Unlinked awards */
|
||||||
|
.unlinked-awards { margin: 0 40px 60px; background: rgba(212,168,83,0.05); border: 1px solid rgba(212,168,83,0.15); border-radius: 16px; padding: 28px 32px; }
|
||||||
|
.unlinked-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
||||||
|
.unlinked-card { background: rgba(212,168,83,0.06); border: 1px solid rgba(212,168,83,0.12); border-radius: 10px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
|
||||||
|
.unlinked-card-name { font-size: 13px; font-weight: 700; color: #a07a2a; }
|
||||||
|
.unlinked-card-meta { font-size: 10px; color: rgba(160,122,42,0.5); margin-top: 2px; }
|
||||||
|
|
||||||
|
/* Add round button */
|
||||||
|
.add-round-btn {
|
||||||
|
display: flex; align-items: center; gap: 8px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: 1.5px dashed rgba(5,61,87,0.15);
|
||||||
|
border-radius: 12px;
|
||||||
|
color: rgba(5,61,87,0.35);
|
||||||
|
font-size: 12px; font-weight: 600;
|
||||||
|
cursor: pointer; background: transparent;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
transition: all 0.2s;
|
||||||
|
margin-left: 100px; width: fit-content;
|
||||||
|
}
|
||||||
|
.add-round-btn:hover { border-color: rgba(5,61,87,0.3); color: rgba(5,61,87,0.6); }
|
||||||
|
|
||||||
|
/* ===== ANIMATIONS ===== */
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
|
||||||
|
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||||
|
|
||||||
|
.fade-1 { animation: slideIn 0.4s ease 0.05s both; }
|
||||||
|
.fade-2 { animation: slideIn 0.4s ease 0.15s both; }
|
||||||
|
.fade-3 { animation: slideIn 0.4s ease 0.25s both; }
|
||||||
|
.fade-4 { animation: slideIn 0.4s ease 0.35s both; }
|
||||||
|
.fade-5 { animation: slideIn 0.4s ease 0.45s both; }
|
||||||
|
.fade-6 { animation: slideIn 0.4s ease 0.55s both; }
|
||||||
|
.fade-7 { animation: slideIn 0.4s ease 0.65s both; }
|
||||||
|
|
||||||
|
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f4f6f9]">
|
||||||
|
|
||||||
|
<!-- ===== SIDEBAR (fixed) ===== -->
|
||||||
|
<aside class="sidebar-premium fixed top-0 left-0 h-screen w-64 flex flex-col z-40">
|
||||||
|
<div class="sidebar-accent-line"></div>
|
||||||
|
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 border-b border-gray-100/80 flex items-center justify-between px-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0" style="background:linear-gradient(135deg,#053d57,#0a5a7c);box-shadow:0 4px 12px rgba(5,61,87,0.3)">
|
||||||
|
<span class="text-white font-black text-sm tracking-tight">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-black text-brand-blue leading-tight tracking-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-semibold tracking-wide uppercase">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full pulse-dot"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="border-b border-gray-100/80 px-4 py-3">
|
||||||
|
<button class="w-full flex items-center gap-3 hover:bg-gray-50 rounded-xl px-3 py-2.5 transition-colors text-left">
|
||||||
|
<div class="w-7 h-7 rounded-lg bg-brand-blue/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-bold text-brand-blue leading-tight">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-0.5">
|
||||||
|
<a href="01-dashboard.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Competition</span>
|
||||||
|
</div>
|
||||||
|
<a href="02-rounds-pipeline.html" class="nav-active flex items-center gap-3 px-3 py-2.5 rounded-xl font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
||||||
|
</svg>
|
||||||
|
Rounds
|
||||||
|
<span class="ml-auto text-[10px] font-bold bg-white/20 text-white px-2 py-0.5 rounded-full">3</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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 href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>
|
||||||
|
</svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">People</span>
|
||||||
|
</div>
|
||||||
|
<a href="04-projects.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/>
|
||||||
|
</svg>
|
||||||
|
Projects
|
||||||
|
</a>
|
||||||
|
<a href="05-members-list.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||||
|
</svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Insights</span>
|
||||||
|
</div>
|
||||||
|
<a href="06-reports.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
Messages
|
||||||
|
<span class="ml-auto text-[10px] font-bold bg-brand-red/10 text-brand-red px-2 py-0.5 rounded-full">4</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Administration</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
|
||||||
|
</svg>
|
||||||
|
Audit Log
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/>
|
||||||
|
</svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="border-t border-gray-100/80 p-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0" style="background:linear-gradient(135deg,#de0f1e,#aa0d18)">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-bold text-brand-blue leading-tight truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-gray-50 flex-shrink-0">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- ===== MAIN CONTENT ===== -->
|
||||||
|
<main class="main-offset min-h-screen">
|
||||||
|
|
||||||
|
<!-- Sticky Top Bar -->
|
||||||
|
<header class="bg-white border-b border-gray-100 sticky top-0 z-30 px-8 h-16 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2 text-sm text-gray-400 font-medium">
|
||||||
|
<span class="text-brand-blue font-semibold">Monaco OPC 2026</span>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
<span>Rounds Pipeline</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-4 py-2">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||||
|
</svg>
|
||||||
|
<input class="bg-transparent text-sm text-gray-600 outline-none w-40 placeholder-gray-400 font-medium" placeholder="Search rounds..." type="text">
|
||||||
|
</div>
|
||||||
|
<div class="relative cursor-pointer p-2">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-brand-red rounded-full border-2 border-white"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="px-10 pt-10 pb-0 fade-1">
|
||||||
|
<div class="flex items-end justify-between mb-2">
|
||||||
|
<div>
|
||||||
|
<div class="text-[36px] font-black text-brand-blue tracking-tight leading-none">Monaco OPC 2026</div>
|
||||||
|
<div class="text-[14px] font-light text-brand-blue/50 mt-2 max-w-xl leading-relaxed">
|
||||||
|
<strong class="text-brand-blue font-bold">6 rounds</strong> guiding <strong class="text-brand-blue font-bold">142 projects</strong> through evaluation —
|
||||||
|
currently in <span class="text-brand-red font-semibold">Expert Evaluation</span>, round 3 of 6
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn-primary">+ Add Round</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Rounds Stack -->
|
||||||
|
<div class="rounds-container">
|
||||||
|
|
||||||
|
<!-- ROUND 1: INTAKE (done) -->
|
||||||
|
<div class="round-row fade-1">
|
||||||
|
<div class="spine-indicator">
|
||||||
|
<div class="spine-node done"></div>
|
||||||
|
</div>
|
||||||
|
<div class="round-card done intake">
|
||||||
|
<div class="accent-strip"></div>
|
||||||
|
<div class="round-compact">
|
||||||
|
<div class="round-type-badge badge-intake">Intake</div>
|
||||||
|
<div style="flex:1">
|
||||||
|
<div class="round-compact-name">Application Intake</div>
|
||||||
|
<div class="text-[11px] mt-0.5" style="color:rgba(5,61,87,0.35)">Jury Group A · Oct 1 – Nov 30, 2025</div>
|
||||||
|
</div>
|
||||||
|
<div class="round-compact-meta">
|
||||||
|
<div class="meta-item">
|
||||||
|
<div class="meta-val">142</div>
|
||||||
|
<div class="meta-lbl">Received</div>
|
||||||
|
</div>
|
||||||
|
<div class="meta-item">
|
||||||
|
<div class="meta-val" style="color:rgba(5,61,87,0.3)">—</div>
|
||||||
|
<div class="meta-lbl">Jurors</div>
|
||||||
|
</div>
|
||||||
|
<div class="round-compact-status">
|
||||||
|
<div class="check">✓</div>
|
||||||
|
Completed
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROUND 2: FILTERING (done) -->
|
||||||
|
<div class="round-row fade-2">
|
||||||
|
<div class="spine-indicator">
|
||||||
|
<div class="spine-node done"></div>
|
||||||
|
</div>
|
||||||
|
<div class="round-card done filtering">
|
||||||
|
<div class="accent-strip"></div>
|
||||||
|
<div class="round-compact">
|
||||||
|
<div class="round-type-badge badge-filtering">Filtering</div>
|
||||||
|
<div style="flex:1">
|
||||||
|
<div class="round-compact-name">Administrative Filtering</div>
|
||||||
|
<div class="text-[11px] mt-0.5" style="color:rgba(5,61,87,0.35)">Panel B (Scientific) · Dec 1–20, 2025</div>
|
||||||
|
</div>
|
||||||
|
<div class="round-compact-meta">
|
||||||
|
<div class="meta-item">
|
||||||
|
<div class="meta-val">103</div>
|
||||||
|
<div class="meta-lbl">Passed</div>
|
||||||
|
</div>
|
||||||
|
<div class="meta-item">
|
||||||
|
<div class="meta-val" style="color:rgba(5,61,87,0.4)">39</div>
|
||||||
|
<div class="meta-lbl">Rejected</div>
|
||||||
|
</div>
|
||||||
|
<div class="round-compact-status">
|
||||||
|
<div class="check">✓</div>
|
||||||
|
Completed
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROUND 3: EVALUATION (ACTIVE) -->
|
||||||
|
<div class="round-row fade-3">
|
||||||
|
<div class="spine-indicator" style="padding-top:32px">
|
||||||
|
<div class="spine-node active"></div>
|
||||||
|
</div>
|
||||||
|
<div class="round-card active evaluation">
|
||||||
|
<div class="accent-strip"></div>
|
||||||
|
<div class="round-active-body">
|
||||||
|
<div class="active-header">
|
||||||
|
<div>
|
||||||
|
<div class="active-tag">
|
||||||
|
<span class="blink"></span>
|
||||||
|
Live Now
|
||||||
|
</div>
|
||||||
|
<div class="active-round-name">Expert Evaluation</div>
|
||||||
|
<div class="active-round-sub">Jury Group A — International Scientific Panel · 8 jury members assigned</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<div class="text-[10px] font-bold uppercase tracking-[1px] mb-1" style="color:rgba(5,61,87,0.35)">Round Type</div>
|
||||||
|
<div class="round-type-badge badge-evaluation" style="font-size:11px;padding:6px 14px">Evaluation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Big Progress Bar -->
|
||||||
|
<div class="mb-7">
|
||||||
|
<div class="big-progress-track">
|
||||||
|
<div class="big-progress-fill" style="width:39%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-end mt-2.5">
|
||||||
|
<div>
|
||||||
|
<div class="text-[42px] font-black text-brand-blue tracking-[-2px] leading-none">39<span class="text-xl font-light text-brand-blue/40">%</span></div>
|
||||||
|
<div class="text-[11px] text-brand-blue/40 mt-0.5">evaluations complete</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right text-[13px] text-brand-blue/50 leading-relaxed">
|
||||||
|
34 of 87 projects reviewed<br>
|
||||||
|
53 remaining · 14 days left
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Metrics -->
|
||||||
|
<div class="active-metrics">
|
||||||
|
<div class="active-metric">
|
||||||
|
<div class="m-val">87</div>
|
||||||
|
<div class="m-lbl">Projects</div>
|
||||||
|
</div>
|
||||||
|
<div class="active-metric">
|
||||||
|
<div class="m-val" style="color:#de0f1e">8</div>
|
||||||
|
<div class="m-lbl">Jury Members</div>
|
||||||
|
</div>
|
||||||
|
<div class="active-metric">
|
||||||
|
<div class="m-val" style="color:#f59e0b">12</div>
|
||||||
|
<div class="m-lbl">COI Declared</div>
|
||||||
|
</div>
|
||||||
|
<div class="active-metric">
|
||||||
|
<div class="m-val" style="color:#22c55e">4.2</div>
|
||||||
|
<div class="m-lbl">Avg Score</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="active-footer">
|
||||||
|
<div class="active-footer-dates">
|
||||||
|
<div class="footer-date-item">
|
||||||
|
<div class="footer-date-lbl">Start</div>
|
||||||
|
<div class="footer-date-val">Jan 15, 2026</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-date-item">
|
||||||
|
<div class="footer-date-lbl">Window Closes</div>
|
||||||
|
<div class="footer-date-val" style="color:#de0f1e">Mar 1, 2026</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-date-item">
|
||||||
|
<div class="footer-date-lbl">Advancement</div>
|
||||||
|
<div class="footer-date-val">Top 30 by score</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-actions">
|
||||||
|
<button class="btn-ghost">Assignments</button>
|
||||||
|
<button class="btn-ghost">View Report</button>
|
||||||
|
<button class="btn-primary">Manage Round →</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Award branch after evaluation -->
|
||||||
|
<div class="award-branch fade-3" style="margin-bottom:8px">
|
||||||
|
<div class="award-branch-line"></div>
|
||||||
|
<div class="award-chip">
|
||||||
|
<div class="text-xl">🏆</div>
|
||||||
|
<div style="flex:1">
|
||||||
|
<div class="award-chip-name">Excellence in Marine Technology Award</div>
|
||||||
|
<div class="award-chip-meta">Linked to Expert Evaluation · Jury Group A eligibility</div>
|
||||||
|
</div>
|
||||||
|
<div class="award-chip-badge">Linked</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROUND 4: SUBMISSION (upcoming) -->
|
||||||
|
<div class="round-row fade-4">
|
||||||
|
<div class="spine-indicator">
|
||||||
|
<div class="spine-node upcoming"></div>
|
||||||
|
</div>
|
||||||
|
<div class="round-card upcoming submission">
|
||||||
|
<div class="accent-strip"></div>
|
||||||
|
<div class="round-upcoming-body">
|
||||||
|
<div class="round-type-badge badge-submission">Submission</div>
|
||||||
|
<div style="flex:1">
|
||||||
|
<div class="text-[15px] font-bold text-brand-blue">Final Project Submission</div>
|
||||||
|
<div class="text-[11px] mt-0.5" style="color:rgba(5,61,87,0.35)">Applicants submit final deliverables · Planned Mar 2026</div>
|
||||||
|
</div>
|
||||||
|
<div class="round-compact-meta">
|
||||||
|
<div class="meta-item">
|
||||||
|
<div class="meta-val" style="color:rgba(5,61,87,0.25)">~30</div>
|
||||||
|
<div class="meta-lbl">Expected</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[11px] font-semibold" style="color:rgba(5,61,87,0.25)">Pending</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROUND 5: LIVE FINALS (upcoming) -->
|
||||||
|
<div class="round-row fade-5">
|
||||||
|
<div class="spine-indicator">
|
||||||
|
<div class="spine-node upcoming"></div>
|
||||||
|
</div>
|
||||||
|
<div class="round-card upcoming live-final" style="opacity:0.55">
|
||||||
|
<div class="accent-strip"></div>
|
||||||
|
<div class="round-upcoming-body">
|
||||||
|
<div class="round-type-badge badge-live-final">Live Final</div>
|
||||||
|
<div style="flex:1">
|
||||||
|
<div class="text-[15px] font-bold text-brand-blue">Monaco Live Finals Ceremony</div>
|
||||||
|
<div class="text-[11px] mt-0.5" style="color:rgba(5,61,87,0.35)">Live pitch presentations · Monaco · Apr 10–11, 2026</div>
|
||||||
|
</div>
|
||||||
|
<div class="round-compact-meta">
|
||||||
|
<div class="meta-item">
|
||||||
|
<div class="meta-val" style="color:rgba(5,61,87,0.2)">~15</div>
|
||||||
|
<div class="meta-lbl">Finalists</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[11px] font-semibold" style="color:rgba(5,61,87,0.2)">Pending</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROUND 6: DELIBERATION (upcoming) -->
|
||||||
|
<div class="round-row fade-6">
|
||||||
|
<div class="spine-indicator">
|
||||||
|
<div class="spine-node upcoming"></div>
|
||||||
|
</div>
|
||||||
|
<div class="round-card upcoming deliberation" style="opacity:0.4">
|
||||||
|
<div class="accent-strip"></div>
|
||||||
|
<div class="round-upcoming-body">
|
||||||
|
<div class="round-type-badge badge-deliberation">Deliberation</div>
|
||||||
|
<div style="flex:1">
|
||||||
|
<div class="text-[15px] font-bold text-brand-blue">Grand Jury Deliberation</div>
|
||||||
|
<div class="text-[11px] mt-0.5" style="color:rgba(5,61,87,0.35)">Closed-session winner selection · May 2026</div>
|
||||||
|
</div>
|
||||||
|
<div class="round-compact-meta">
|
||||||
|
<div class="text-[11px] font-semibold" style="color:rgba(5,61,87,0.2)">Not configured</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add round -->
|
||||||
|
<div class="fade-7">
|
||||||
|
<button class="add-round-btn">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
Add another round
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Unlinked Awards -->
|
||||||
|
<div class="unlinked-awards fade-7">
|
||||||
|
<div class="flex items-center gap-3 mb-5">
|
||||||
|
<div class="text-lg">🎍</div>
|
||||||
|
<div class="text-[12px] font-bold uppercase tracking-[1.5px]" style="color:rgba(160,122,42,0.8)">Unlinked Awards</div>
|
||||||
|
<div class="ml-auto text-[12px]" style="color:rgba(160,122,42,0.5)">3 awards not yet assigned to a round</div>
|
||||||
|
</div>
|
||||||
|
<div class="unlinked-grid">
|
||||||
|
<div class="unlinked-card">
|
||||||
|
<div class="text-[22px]">🥇</div>
|
||||||
|
<div>
|
||||||
|
<div class="unlinked-card-name">Grand Prix OPC 2026</div>
|
||||||
|
<div class="unlinked-card-meta">No round linked · Requires deliberation round</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="unlinked-card">
|
||||||
|
<div class="text-[22px]">🌊</div>
|
||||||
|
<div>
|
||||||
|
<div class="unlinked-card-name">Ocean Innovation Prize</div>
|
||||||
|
<div class="unlinked-card-meta">No round linked · Audience vote planned</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="unlinked-card">
|
||||||
|
<div class="text-[22px]">🌿</div>
|
||||||
|
<div>
|
||||||
|
<div class="unlinked-card-name">Youth Conservation Award</div>
|
||||||
|
<div class="unlinked-card-meta">No round linked · Special category</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
917
prototypes/admin-redesign-v2/03-round-detail.html
Normal file
917
prototypes/admin-redesign-v2/03-round-detail.html
Normal file
@@ -0,0 +1,917 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Round Detail — Expert Evaluation · MOPC Admin</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
|
||||||
|
/* Pulsing status bar */
|
||||||
|
@keyframes pulse-bar {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.55; }
|
||||||
|
}
|
||||||
|
.pulse-bar { animation: pulse-bar 2.4s ease-in-out infinite; }
|
||||||
|
|
||||||
|
/* Breathing glow for active orb */
|
||||||
|
@keyframes breathe {
|
||||||
|
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4), 0 0 0 4px rgba(16, 185, 129, 0.1); }
|
||||||
|
50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2), 0 0 0 12px rgba(16, 185, 129, 0.05); }
|
||||||
|
}
|
||||||
|
.breathe-orb { animation: breathe 2.8s ease-in-out infinite; }
|
||||||
|
|
||||||
|
/* Conic gradient progress ring */
|
||||||
|
.progress-ring {
|
||||||
|
background: conic-gradient(
|
||||||
|
#053d57 0deg,
|
||||||
|
#0a5a7c 223deg,
|
||||||
|
#e5e7eb 223deg,
|
||||||
|
#e5e7eb 360deg
|
||||||
|
);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filmstrip pipeline */
|
||||||
|
.filmstrip-track {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-item {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Readiness strips */
|
||||||
|
.readiness-strip {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
}
|
||||||
|
.readiness-strip::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.readiness-strip.complete::before { background: #10b981; }
|
||||||
|
.readiness-strip.warning::before { background: #f59e0b; }
|
||||||
|
.readiness-strip.complete { background: rgba(16, 185, 129, 0.04); }
|
||||||
|
.readiness-strip.warning { background: rgba(245, 158, 11, 0.06); }
|
||||||
|
|
||||||
|
@keyframes warning-pulse {
|
||||||
|
0%, 100% { background: rgba(245, 158, 11, 0.06); }
|
||||||
|
50% { background: rgba(245, 158, 11, 0.12); }
|
||||||
|
}
|
||||||
|
.readiness-strip.warning { animation: warning-pulse 2s ease-in-out infinite; }
|
||||||
|
|
||||||
|
/* SlideIn stagger for readiness strips */
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.readiness-strip { animation: slideIn 0.35s ease both; }
|
||||||
|
.readiness-strip:nth-child(1) { animation-delay: 0.10s; }
|
||||||
|
.readiness-strip:nth-child(2) { animation-delay: 0.17s; }
|
||||||
|
.readiness-strip:nth-child(3) { animation-delay: 0.24s; }
|
||||||
|
.readiness-strip:nth-child(4) { animation-delay: 0.31s; }
|
||||||
|
.readiness-strip:nth-child(5) { animation-delay: 0.38s; }
|
||||||
|
.readiness-strip:nth-child(6) { animation-delay: 0.45s; }
|
||||||
|
|
||||||
|
/* Tab hover */
|
||||||
|
.tab-item {
|
||||||
|
position: relative;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tab-item::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1px; left: 0; right: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: #053d57;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
.tab-item.active::after { transform: scaleX(1); }
|
||||||
|
.tab-item:hover::after { transform: scaleX(1); }
|
||||||
|
|
||||||
|
/* Stat hairline separator */
|
||||||
|
.stat-block + .stat-block::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 20%; bottom: 20%;
|
||||||
|
width: 1px;
|
||||||
|
background: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Command action buttons */
|
||||||
|
.action-btn {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.action-btn::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: currentColor;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
.action-btn:hover::after { opacity: 0.06; }
|
||||||
|
|
||||||
|
/* Floating action bar */
|
||||||
|
.command-bar {
|
||||||
|
background: rgba(5, 61, 87, 0.97);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Progress segments in remaining days */
|
||||||
|
.day-dot {
|
||||||
|
width: 4px; height: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #053d57;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
.day-dot.past { opacity: 1; }
|
||||||
|
.day-dot.today { opacity: 1; background: #de0f1e; transform: scale(1.5); }
|
||||||
|
|
||||||
|
/* Sidebar accent line */
|
||||||
|
.sidebar-accent-line {
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: linear-gradient(180deg, #de0f1e 0%, #053d57 50%, transparent 100%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar items */
|
||||||
|
.sidebar-item {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.sidebar-item.active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 4px; bottom: 4px;
|
||||||
|
width: 3px;
|
||||||
|
background: #de0f1e;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.sidebar-item:not(.active):hover { background: rgba(5, 61, 87, 0.04); }
|
||||||
|
|
||||||
|
/* Conic ring spin-in */
|
||||||
|
@keyframes ringReveal {
|
||||||
|
from { opacity: 0; transform: scale(0.88) rotate(-15deg); }
|
||||||
|
to { opacity: 1; transform: scale(1) rotate(0deg); }
|
||||||
|
}
|
||||||
|
.progress-ring-wrap { animation: ringReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; }
|
||||||
|
|
||||||
|
/* Stat strip number entrance */
|
||||||
|
@keyframes countPop {
|
||||||
|
from { opacity: 0; transform: translateY(6px) scale(0.95); }
|
||||||
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||||
|
}
|
||||||
|
.stat-pop { animation: countPop 0.45s ease both; }
|
||||||
|
.stat-pop-1 { animation-delay: 0.1s; }
|
||||||
|
.stat-pop-2 { animation-delay: 0.18s; }
|
||||||
|
.stat-pop-3 { animation-delay: 0.26s; }
|
||||||
|
.stat-pop-4 { animation-delay: 0.34s; }
|
||||||
|
.stat-pop-5 { animation-delay: 0.42s; }
|
||||||
|
|
||||||
|
/* Section fade in */
|
||||||
|
@keyframes fadeUp {
|
||||||
|
from { opacity: 0; transform: translateY(12px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.fade-up { animation: fadeUp 0.5s ease forwards; }
|
||||||
|
.fade-up-delay-1 { animation: fadeUp 0.5s ease 0.08s both; }
|
||||||
|
.fade-up-delay-2 { animation: fadeUp 0.5s ease 0.16s both; }
|
||||||
|
.fade-up-delay-3 { animation: fadeUp 0.5s ease 0.24s both; }
|
||||||
|
.fade-up-delay-4 { animation: fadeUp 0.5s ease 0.32s both; }
|
||||||
|
|
||||||
|
/* Juror table row hover — box-shadow left-border trick (works in table layout) */
|
||||||
|
.jury-row {
|
||||||
|
transition: background 0.18s ease, box-shadow 0.18s ease;
|
||||||
|
}
|
||||||
|
.jury-row:hover {
|
||||||
|
background: rgba(5, 61, 87, 0.025) !important;
|
||||||
|
box-shadow: inset 3px 0 0 #053d57, inset 0 0 0 1px rgba(5,61,87,0.06);
|
||||||
|
}
|
||||||
|
.jury-row.warning-row:hover {
|
||||||
|
box-shadow: inset 3px 0 0 #f59e0b, inset 0 0 0 1px rgba(245,158,11,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filter pill hover touch-up */
|
||||||
|
.filter-pill:not(.active):hover {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar */
|
||||||
|
::-webkit-scrollbar { width: 6px; }
|
||||||
|
::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
|
||||||
|
|
||||||
|
/* Sidebar premium */
|
||||||
|
.sidebar-premium {
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||||
|
border-right: 1px solid #e8edf2;
|
||||||
|
}
|
||||||
|
.nav-active {
|
||||||
|
background: #053d57; color: white; position: relative;
|
||||||
|
}
|
||||||
|
.nav-active::before {
|
||||||
|
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px; background: #de0f1e; border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.nav-item { transition: all 0.15s ease; }
|
||||||
|
.nav-item:hover { background: rgba(5,61,87,0.06); color: #053d57; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f4f6f9]" style="color: #1a1a2e;">
|
||||||
|
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
<aside class="sidebar-premium fixed top-0 left-0 h-screen w-64 flex flex-col z-40" style="position:fixed">
|
||||||
|
<div class="sidebar-accent-line"></div>
|
||||||
|
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 border-b border-gray-100/80 flex items-center justify-between px-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0" style="background:linear-gradient(135deg,#053d57,#0a5a7c);box-shadow:0 4px 12px rgba(5,61,87,0.3)">
|
||||||
|
<span class="text-white font-black text-sm tracking-tight">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-black text-brand-blue leading-tight tracking-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-semibold tracking-wide uppercase">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="border-b border-gray-100/80 px-4 py-3">
|
||||||
|
<button class="w-full flex items-center gap-3 hover:bg-gray-50 rounded-xl px-3 py-2.5 transition-colors text-left">
|
||||||
|
<div class="w-7 h-7 rounded-lg bg-brand-blue/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-bold text-brand-blue leading-tight">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-0.5">
|
||||||
|
<a href="01-dashboard.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Competition</span></div>
|
||||||
|
<a href="02-rounds-pipeline.html" class="nav-active flex items-center gap-3 px-3 py-2.5 rounded-xl font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">People</span></div>
|
||||||
|
<a href="04-projects-list.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||||
|
Projects
|
||||||
|
</a>
|
||||||
|
<a href="05-members-list.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Insights</span></div>
|
||||||
|
<a href="06-reports.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Administration</span></div>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||||
|
Apply Page
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||||||
|
Audit Log
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="border-t border-gray-100/80 p-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-black flex-shrink-0" style="background:linear-gradient(135deg,#de0f1e,#b00d18)">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-bold text-brand-blue leading-tight truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-gray-50 flex-shrink-0">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- MAIN CONTENT -->
|
||||||
|
<div class="ml-64 min-h-screen">
|
||||||
|
|
||||||
|
<!-- Active status pulse bar at the very top -->
|
||||||
|
<div class="h-0.5 w-full pulse-bar" style="background: linear-gradient(90deg, transparent 0%, #10b981 30%, #10b981 70%, transparent 100%);"></div>
|
||||||
|
|
||||||
|
<!-- Top bar -->
|
||||||
|
<header class="bg-white border-b border-gray-100 sticky top-0 z-30 px-8 h-16 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2 text-sm text-gray-400 font-medium">
|
||||||
|
<span class="text-brand-blue font-semibold">Monaco OPC 2026</span>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
<span>Round Detail</span>
|
||||||
|
</div>
|
||||||
|
<!-- Actions -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button class="text-xs font-600 px-4 py-2 rounded-lg border transition-all hover:shadow-sm" style="color: #053d57; border-color: #e5e7eb;">
|
||||||
|
Send Reminders
|
||||||
|
</button>
|
||||||
|
<button class="text-xs font-700 px-4 py-2 rounded-lg text-white transition-all hover:shadow-md" style="background: #053d57;">
|
||||||
|
Close Round
|
||||||
|
</button>
|
||||||
|
<button class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-all">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- PIPELINE CONTEXT BAR — Filmstrip -->
|
||||||
|
<div class="bg-white border-b border-gray-100 px-8 py-4">
|
||||||
|
<div class="flex items-stretch gap-0 max-w-5xl">
|
||||||
|
|
||||||
|
<!-- Previous: Filtering (faded) -->
|
||||||
|
<div class="pipeline-item flex-1 opacity-40 pr-6">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0" style="border-color: #10b981; background: #10b981;">
|
||||||
|
<svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-700 text-gray-500">Filtering</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400">142 passed</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Arrow -->
|
||||||
|
<div class="flex items-center px-2 opacity-30">
|
||||||
|
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Current: Expert Evaluation (prominent) -->
|
||||||
|
<div class="pipeline-item flex-1 px-6 relative">
|
||||||
|
<div class="absolute inset-0 rounded-xl opacity-100" style="background: rgba(5,61,87,0.04); border: 1.5px solid rgba(5,61,87,0.12);"></div>
|
||||||
|
<div class="relative flex items-center gap-3 py-1">
|
||||||
|
<div class="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 breathe-orb" style="background: #053d57;">
|
||||||
|
<span class="text-white font-800 text-xs">4</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xs font-800 uppercase tracking-wider" style="color: #053d57;">Expert Evaluation</span>
|
||||||
|
<span class="text-xs font-700 px-2 py-0.5 rounded-full text-white" style="background: #10b981; font-size: 9px;">Active</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-500 font-500">Mar 1 – Mar 30</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Arrow -->
|
||||||
|
<div class="flex items-center px-2 opacity-20">
|
||||||
|
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Next: Live Finals (faded, upcoming) -->
|
||||||
|
<div class="pipeline-item flex-1 pl-6 opacity-35">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-6 h-6 rounded-full border-2 border-dashed flex items-center justify-center flex-shrink-0" style="border-color: #9ca3af;">
|
||||||
|
<span class="text-gray-400 font-800 text-xs">5</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-700 text-gray-400">Live Finals</div>
|
||||||
|
<div class="text-xs text-gray-300 font-400">Apr 15–16 · Monaco</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Spacer for remaining rounds -->
|
||||||
|
<div class="flex items-center gap-2 pl-6 opacity-20">
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-gray-300"></div>
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-gray-300"></div>
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-gray-300"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-400">+2 more</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 px-8 py-8 max-w-7xl">
|
||||||
|
|
||||||
|
<!-- HERO HEADER -->
|
||||||
|
<div class="fade-up mb-10">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-3 mb-1">
|
||||||
|
<span class="text-xs font-700 tracking-widest uppercase text-gray-400">Round 4 of 7</span>
|
||||||
|
<span class="text-xs text-gray-300">·</span>
|
||||||
|
<span class="text-xs font-600 uppercase tracking-wider" style="color: #557f8c;">Evaluation</span>
|
||||||
|
</div>
|
||||||
|
<h1 class="font-900 leading-none mb-2" style="font-size: 52px; color: #053d57; letter-spacing: -1.5px;">Expert Evaluation</h1>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-base font-400 text-gray-500">Jury Panel A</span>
|
||||||
|
<span class="text-gray-200">|</span>
|
||||||
|
<span class="text-sm font-500 text-gray-400">Monaco Ocean Protection Challenge · 2026</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Live status indicator -->
|
||||||
|
<div class="flex flex-col items-end gap-2 mt-1">
|
||||||
|
<div class="flex items-center gap-2.5 px-4 py-2.5 rounded-xl" style="background: rgba(16,185,129,0.08);">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-emerald-400 breathe-orb"></div>
|
||||||
|
<span class="text-sm font-700" style="color: #059669;">Round Active</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-400 font-500">Started Mar 1, 2026</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Key stats — horizontal rhythm with hairlines -->
|
||||||
|
<div class="flex items-stretch mt-8 bg-white rounded-2xl overflow-hidden border" style="border-color: #f0f0f0; box-shadow: 0 1px 8px rgba(5,61,87,0.06);">
|
||||||
|
<div class="stat-block flex-1 px-8 py-6 text-center stat-pop stat-pop-1">
|
||||||
|
<div class="text-4xl font-900 mb-1" style="color: #053d57; letter-spacing: -1px;">32</div>
|
||||||
|
<div class="text-xs font-600 text-gray-400 uppercase tracking-wider">Projects</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-px bg-gray-100"></div>
|
||||||
|
<div class="stat-block flex-1 px-8 py-6 text-center stat-pop stat-pop-2">
|
||||||
|
<div class="text-4xl font-900 mb-1" style="color: #053d57; letter-spacing: -1px;">8</div>
|
||||||
|
<div class="text-xs font-600 text-gray-400 uppercase tracking-wider">Jurors</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-px bg-gray-100"></div>
|
||||||
|
<div class="stat-block flex-1 px-8 py-6 text-center stat-pop stat-pop-3">
|
||||||
|
<div class="text-xs font-700 text-gray-400 mb-1 uppercase tracking-wider">Mar 1–30</div>
|
||||||
|
<div class="text-sm font-600" style="color: #053d57;">2026</div>
|
||||||
|
<div class="text-xs font-600 text-gray-400 uppercase tracking-wider mt-0.5">Window</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-px bg-gray-100"></div>
|
||||||
|
<div class="stat-block flex-1 px-8 py-6 text-center stat-pop stat-pop-4">
|
||||||
|
<div class="text-4xl font-900 mb-1" style="color: #053d57; letter-spacing: -1px;">156</div>
|
||||||
|
<div class="text-xs font-600 text-gray-400 uppercase tracking-wider">Assignments</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-px bg-gray-100"></div>
|
||||||
|
<div class="stat-block flex-1 px-8 py-6 text-center stat-pop stat-pop-5">
|
||||||
|
<div class="text-4xl font-900 mb-1" style="color: #de0f1e; letter-spacing: -1px;">12</div>
|
||||||
|
<div class="text-xs font-600 text-gray-400 uppercase tracking-wider">Days Left</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PROGRESS + READINESS — Two columns -->
|
||||||
|
<div class="grid grid-cols-5 gap-6 mb-8">
|
||||||
|
|
||||||
|
<!-- PROGRESS — The Centerpiece (3 cols) -->
|
||||||
|
<div class="col-span-3 fade-up-delay-1">
|
||||||
|
<div class="bg-white rounded-2xl border p-8" style="border-color: #f0f0f0;">
|
||||||
|
<div class="flex items-start justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xs font-700 uppercase tracking-widest text-gray-400 mb-1">Evaluation Progress</h2>
|
||||||
|
<p class="text-sm text-gray-500 font-400">87 of 142 evaluations submitted</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<div class="text-xs font-600 text-gray-400">Deadline</div>
|
||||||
|
<div class="text-sm font-700" style="color: #053d57;">Mar 30, 2026</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-12">
|
||||||
|
<!-- Conic gradient ring -->
|
||||||
|
<div class="relative flex-shrink-0 progress-ring-wrap">
|
||||||
|
<!-- Outer track -->
|
||||||
|
<div class="w-48 h-48 rounded-full" style="background: conic-gradient(#053d57 0deg, #0a5a7c 80deg, #557f8c 180deg, #557f8c 223deg, #f0f0f0 223deg, #f0f0f0 360deg); padding: 16px; filter: drop-shadow(0 4px 16px rgba(5,61,87,0.18));">
|
||||||
|
<div class="w-full h-full rounded-full bg-white flex flex-col items-center justify-center">
|
||||||
|
<div class="text-5xl font-900 leading-none" style="color: #053d57; letter-spacing: -2px;">62<span style="font-size: 24px; color: #557f8c; font-weight: 700;">%</span></div>
|
||||||
|
<div class="text-xs font-600 text-gray-400 mt-1 uppercase tracking-wider">Complete</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Needle / accent dot at progress point -->
|
||||||
|
<div class="absolute w-3 h-3 rounded-full bg-white border-2 shadow-md" style="border-color: #053d57; top: 8px; left: 50%; transform: translateX(-50%) rotate(80deg) translateY(-80px) rotate(-80deg);"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats column -->
|
||||||
|
<div class="flex-1 space-y-5">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="text-xs font-600 text-gray-500 uppercase tracking-wider">Submitted</span>
|
||||||
|
<span class="text-2xl font-800" style="color: #053d57;">87</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-1.5 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-full rounded-full transition-all" style="width: 62%; background: linear-gradient(90deg, #053d57, #557f8c);"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="text-xs font-600 text-gray-500 uppercase tracking-wider">In Progress</span>
|
||||||
|
<span class="text-2xl font-800" style="color: #557f8c;">41</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-1.5 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-full rounded-full" style="width: 29%; background: #557f8c;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="text-xs font-600 text-gray-500 uppercase tracking-wider">Not Started</span>
|
||||||
|
<span class="text-2xl font-800 text-gray-300">14</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-1.5 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gray-200" style="width: 9%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Day dots timeline -->
|
||||||
|
<div class="pt-3 border-t border-gray-50">
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="text-xs text-gray-400 font-500">Mar 1</span>
|
||||||
|
<span class="text-xs font-600" style="color: #de0f1e;">12 days left</span>
|
||||||
|
<span class="text-xs text-gray-400 font-500">Mar 30</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-0.5 items-center">
|
||||||
|
<!-- 30 day dots, 18 past, 1 today, 11 future -->
|
||||||
|
<script>
|
||||||
|
document.write(Array(18).fill('<div class="day-dot past" style="background:#053d57; opacity:0.7;"></div>').join(''));
|
||||||
|
document.write('<div class="day-dot today"></div>');
|
||||||
|
document.write(Array(11).fill('<div class="day-dot"></div>').join(''));
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- READINESS — 2 cols -->
|
||||||
|
<div class="col-span-2 fade-up-delay-2">
|
||||||
|
<div class="bg-white rounded-2xl border p-6 h-full" style="border-color: #f0f0f0;">
|
||||||
|
<h2 class="text-xs font-700 uppercase tracking-widest text-gray-400 mb-5">Round Readiness</h2>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
|
||||||
|
<div class="readiness-strip complete rounded-lg px-4 py-3">
|
||||||
|
<div class="flex items-center justify-between pl-3">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-600" style="color: #053d57;">Jury Assigned</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">8 jurors, all confirmed</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-3.5 h-3.5 text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="readiness-strip complete rounded-lg px-4 py-3">
|
||||||
|
<div class="flex items-center justify-between pl-3">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-600" style="color: #053d57;">Projects Assigned</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">156 assignments distributed</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-3.5 h-3.5 text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="readiness-strip complete rounded-lg px-4 py-3">
|
||||||
|
<div class="flex items-center justify-between pl-3">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-600" style="color: #053d57;">Evaluation Criteria</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">5 criteria configured</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-3.5 h-3.5 text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- WARNING ITEM — pulses -->
|
||||||
|
<div class="readiness-strip warning rounded-lg px-4 py-3 border" style="border-color: rgba(245,158,11,0.2);">
|
||||||
|
<div class="flex items-center justify-between pl-3">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-sm font-700" style="color: #b45309;">Juror Engagement</span>
|
||||||
|
<span class="text-xs font-700 px-1.5 py-0.5 rounded" style="background: rgba(245,158,11,0.15); color: #b45309;">Action Needed</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs font-500 mt-0.5" style="color: #d97706;">3 jurors need reminders</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-6 h-6 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-3.5 h-3.5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="readiness-strip complete rounded-lg px-4 py-3">
|
||||||
|
<div class="flex items-center justify-between pl-3">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-600" style="color: #053d57;">Advancement Rules</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">Top 20 auto-advance</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-3.5 h-3.5 text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="readiness-strip complete rounded-lg px-4 py-3">
|
||||||
|
<div class="flex items-center justify-between pl-3">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-600" style="color: #053d57;">COI Declarations</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">All jurors declared</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-3.5 h-3.5 text-emerald-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Summary -->
|
||||||
|
<div class="mt-4 pt-4 border-t border-gray-50 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
|
||||||
|
<div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-600 text-gray-400">5 of 6 ready</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TABS + CONTENT -->
|
||||||
|
<div class="fade-up-delay-3">
|
||||||
|
<!-- Tab bar -->
|
||||||
|
<div class="flex items-center gap-0 border-b border-gray-100 mb-6">
|
||||||
|
<div class="tab-item active px-5 py-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-sm font-700" style="color: #053d57;">Overview</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-item px-5 py-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-sm font-500 text-gray-400">Projects</span>
|
||||||
|
<span class="text-xs font-700 px-1.5 py-0.5 rounded" style="background: rgba(5,61,87,0.08); color: #053d57;">32</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-item px-5 py-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-sm font-500 text-gray-400">Assignments</span>
|
||||||
|
<span class="text-xs font-700 px-1.5 py-0.5 rounded" style="background: rgba(5,61,87,0.08); color: #053d57;">156</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-item px-5 py-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-sm font-500 text-gray-400">Jury</span>
|
||||||
|
<span class="text-xs font-700 px-1.5 py-0.5 rounded" style="background: rgba(5,61,87,0.08); color: #053d57;">8</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-item px-5 py-3">
|
||||||
|
<span class="text-sm font-500 text-gray-400">Config</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Overview content — Jury performance table -->
|
||||||
|
<div class="bg-white rounded-2xl border overflow-hidden" style="border-color: #f0f0f0;">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-50 flex items-center justify-between">
|
||||||
|
<h3 class="text-sm font-700" style="color: #053d57;">Jury Performance Overview</h3>
|
||||||
|
<button class="text-xs font-600 text-gray-400 hover:text-gray-600 transition-colors">View all assignments →</button>
|
||||||
|
</div>
|
||||||
|
<table class="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr style="background: rgba(5,61,87,0.02);">
|
||||||
|
<th class="text-left px-6 py-3 text-xs font-700 uppercase tracking-wider text-gray-400">Juror</th>
|
||||||
|
<th class="text-center px-4 py-3 text-xs font-700 uppercase tracking-wider text-gray-400">Assigned</th>
|
||||||
|
<th class="text-center px-4 py-3 text-xs font-700 uppercase tracking-wider text-gray-400">Submitted</th>
|
||||||
|
<th class="px-6 py-3 text-xs font-700 uppercase tracking-wider text-gray-400">Progress</th>
|
||||||
|
<th class="text-right px-6 py-3 text-xs font-700 uppercase tracking-wider text-gray-400">Last Active</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="jury-row border-t border-gray-50" style="cursor:pointer;">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-700 flex-shrink-0" style="background: #053d57;">SC</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-600" style="color: #053d57;">Sophie Chevalier</div>
|
||||||
|
<div class="text-xs text-gray-400">Chair · Panel A</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-center px-4 py-4 text-sm font-700" style="color: #053d57;">22</td>
|
||||||
|
<td class="text-center px-4 py-4 text-sm font-700 text-emerald-600">22</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 h-1.5 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-emerald-400" style="width: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-700 text-emerald-600">100%</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-right px-6 py-4 text-xs text-gray-400 font-500">Today, 11:32</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="jury-row border-t border-gray-50" style="cursor:pointer;">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-700 flex-shrink-0" style="background: #557f8c;">JM</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-600" style="color: #053d57;">Jean Marchand</div>
|
||||||
|
<div class="text-xs text-gray-400">Member · Panel A</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-center px-4 py-4 text-sm font-700" style="color: #053d57;">20</td>
|
||||||
|
<td class="text-center px-4 py-4 text-sm font-700" style="color: #053d57;">15</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 h-1.5 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-full rounded-full" style="width: 75%; background: #557f8c;"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-700" style="color: #557f8c;">75%</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-right px-6 py-4 text-xs text-gray-400 font-500">Today, 09:15</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="jury-row warning-row border-t border-gray-50" style="cursor:pointer;">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-700 flex-shrink-0" style="background: #f59e0b;">AL</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-sm font-600" style="color: #053d57;">Amara Leconte</span>
|
||||||
|
<span class="text-xs font-700 px-1.5 py-0.5 rounded" style="background: rgba(245,158,11,0.15); color: #b45309;">Reminder Needed</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-400">Member · Panel A</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-center px-4 py-4 text-sm font-700" style="color: #053d57;">18</td>
|
||||||
|
<td class="text-center px-4 py-4 text-sm font-700 text-amber-500">7</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 h-1.5 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-amber-400" style="width: 39%;"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-700 text-amber-500">39%</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-right px-6 py-4 text-xs text-gray-400 font-500">3 days ago</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="jury-row border-t border-gray-50" style="cursor:pointer;">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-700 flex-shrink-0" style="background: #10b981;">RB</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-600" style="color: #053d57;">Rafael Benicio</div>
|
||||||
|
<div class="text-xs text-gray-400">Member · Panel A</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-center px-4 py-4 text-sm font-700" style="color: #053d57;">19</td>
|
||||||
|
<td class="text-center px-4 py-4 text-sm font-700 text-emerald-600">17</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 h-1.5 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-emerald-400" style="width: 89%;"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-700 text-emerald-600">89%</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-right px-6 py-4 text-xs text-gray-400 font-500">Yesterday</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="jury-row warning-row border-t border-gray-50" style="cursor:pointer;">
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-700 flex-shrink-0" style="background: #de0f1e;">PN</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-sm font-600" style="color: #053d57;">Priya Narayan</span>
|
||||||
|
<span class="text-xs font-700 px-1.5 py-0.5 rounded" style="background: rgba(245,158,11,0.15); color: #b45309;">Reminder Needed</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-400">Member · Panel A</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-center px-4 py-4 text-sm font-700" style="color: #053d57;">17</td>
|
||||||
|
<td class="text-center px-4 py-4 text-sm font-700 text-red-500">4</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 h-1.5 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-red-400" style="width: 24%;"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-700 text-red-500">24%</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="text-right px-6 py-4 text-xs text-gray-400 font-500">5 days ago</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="px-6 py-3 border-t border-gray-50 flex items-center justify-between">
|
||||||
|
<span class="text-xs text-gray-400 font-500">Showing 5 of 8 jurors</span>
|
||||||
|
<button class="text-xs font-600 px-3 py-1.5 rounded-lg transition-colors hover:bg-gray-50" style="color: #053d57;">View all 8 →</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom padding -->
|
||||||
|
<div class="h-32"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- COMMAND BAR — floating at bottom -->
|
||||||
|
<div class="fixed bottom-6 z-40" style="left: 256px; right: 0; display: flex; justify-content: center; pointer-events: none;">
|
||||||
|
<div style="pointer-events: auto;">
|
||||||
|
<div class="command-bar rounded-2xl px-6 py-3 flex items-center gap-4 shadow-2xl">
|
||||||
|
<span class="text-xs font-600 text-white opacity-60 uppercase tracking-wider">Quick Actions</span>
|
||||||
|
<div class="w-px h-4 bg-white opacity-20"></div>
|
||||||
|
<button class="action-btn text-xs font-600 text-white px-3 py-1.5 rounded-lg" style="background: rgba(255,255,255,0.1);">
|
||||||
|
Send Reminders (3)
|
||||||
|
</button>
|
||||||
|
<button class="action-btn text-xs font-600 px-3 py-1.5 rounded-lg" style="background: #de0f1e; color: white;">
|
||||||
|
Reassign Overdue
|
||||||
|
</button>
|
||||||
|
<button class="action-btn text-xs font-600 text-white px-3 py-1.5 rounded-lg" style="background: rgba(255,255,255,0.1);">
|
||||||
|
Export Progress
|
||||||
|
</button>
|
||||||
|
<div class="w-px h-4 bg-white opacity-20"></div>
|
||||||
|
<button class="text-white opacity-40 hover:opacity-70 transition-opacity">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
861
prototypes/admin-redesign-v2/04-projects-list.html
Normal file
861
prototypes/admin-redesign-v2/04-projects-list.html
Normal file
@@ -0,0 +1,861 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Projects — The Portfolio · MOPC Admin</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
|
||||||
|
/* Sidebar */
|
||||||
|
.sidebar-item {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.sidebar-item.active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 4px; bottom: 4px;
|
||||||
|
width: 3px;
|
||||||
|
background: #de0f1e;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.sidebar-item:not(.active):hover { background: rgba(5, 61, 87, 0.04); }
|
||||||
|
|
||||||
|
/* Score heat map cells */
|
||||||
|
.score-cell {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Project row */
|
||||||
|
.project-row {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.project-row::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.15s ease;
|
||||||
|
}
|
||||||
|
.project-row:hover::before { opacity: 1; }
|
||||||
|
.project-row.row-evaluation::before { background: #053d57; }
|
||||||
|
.project-row.row-filtering::before { background: #557f8c; }
|
||||||
|
.project-row.row-intake::before { background: #9ca3af; }
|
||||||
|
.project-row:hover { background: rgba(5, 61, 87, 0.025) !important; }
|
||||||
|
|
||||||
|
/* Score radial gauge */
|
||||||
|
.score-gauge {
|
||||||
|
position: relative;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
.score-gauge svg {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
.score-gauge .score-label {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status pill */
|
||||||
|
.status-pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 100px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.status-dot {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scoreboard / stock ticker */
|
||||||
|
.scoreboard {
|
||||||
|
background: linear-gradient(135deg, #053d57 0%, #0a5a7c 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Segmented bar */
|
||||||
|
.segment-bar {
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filter pills */
|
||||||
|
.filter-pill {
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.filter-pill.active {
|
||||||
|
background: #053d57;
|
||||||
|
color: white;
|
||||||
|
border-color: #053d57;
|
||||||
|
}
|
||||||
|
.filter-pill:not(.active):hover {
|
||||||
|
border-color: #053d57;
|
||||||
|
color: #053d57;
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Checkbox */
|
||||||
|
.row-checkbox {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1.5px solid #d1d5db;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.row-checkbox:hover { border-color: #053d57; }
|
||||||
|
.row-checkbox.checked {
|
||||||
|
background: #053d57;
|
||||||
|
border-color: #053d57;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bulk action bar */
|
||||||
|
.bulk-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 256px;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(5, 61, 87, 0.96);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
border-top: 1px solid rgba(255,255,255,0.08);
|
||||||
|
transform: translateY(100%);
|
||||||
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
.bulk-bar.visible { transform: translateY(0); }
|
||||||
|
|
||||||
|
/* Fade in */
|
||||||
|
@keyframes fadeUp {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.fade-up { animation: fadeUp 0.4s ease forwards; }
|
||||||
|
.fade-up-1 { animation: fadeUp 0.4s ease 0.06s both; }
|
||||||
|
.fade-up-2 { animation: fadeUp 0.4s ease 0.12s both; }
|
||||||
|
.fade-up-3 { animation: fadeUp 0.4s ease 0.18s both; }
|
||||||
|
|
||||||
|
/* Project row stagger slideIn */
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.project-row { animation: slideIn 0.35s ease both; }
|
||||||
|
.project-row:nth-child(1) { animation-delay: 0.22s; }
|
||||||
|
.project-row:nth-child(2) { animation-delay: 0.29s; }
|
||||||
|
.project-row:nth-child(3) { animation-delay: 0.36s; }
|
||||||
|
.project-row:nth-child(4) { animation-delay: 0.43s; }
|
||||||
|
.project-row:nth-child(5) { animation-delay: 0.50s; }
|
||||||
|
.project-row:nth-child(6) { animation-delay: 0.57s; }
|
||||||
|
.project-row:nth-child(7) { animation-delay: 0.64s; }
|
||||||
|
.project-row:nth-child(8) { animation-delay: 0.71s; }
|
||||||
|
|
||||||
|
/* Score glow colors by range */
|
||||||
|
.score-high { color: #059669; }
|
||||||
|
.score-mid { color: #053d57; }
|
||||||
|
.score-low { color: #de0f1e; }
|
||||||
|
.score-bg-high { background: rgba(5, 150, 105, 0.08); }
|
||||||
|
.score-bg-mid { background: rgba(5, 61, 87, 0.06); }
|
||||||
|
.score-bg-low { background: rgba(222, 15, 30, 0.07); }
|
||||||
|
.score-none { color: #9ca3af; }
|
||||||
|
.score-bg-none { background: rgba(0,0,0,0.03); }
|
||||||
|
|
||||||
|
/* Scrollbar */
|
||||||
|
::-webkit-scrollbar { width: 5px; }
|
||||||
|
::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
|
||||||
|
|
||||||
|
/* Search box */
|
||||||
|
.search-box:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(5, 61, 87, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar premium */
|
||||||
|
.sidebar-premium {
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||||
|
border-right: 1px solid #e8edf2;
|
||||||
|
}
|
||||||
|
.nav-active {
|
||||||
|
background: #053d57; color: white; position: relative;
|
||||||
|
}
|
||||||
|
.nav-active::before {
|
||||||
|
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px; background: #de0f1e; border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.nav-item { transition: all 0.15s ease; }
|
||||||
|
.nav-item:hover { background: rgba(5,61,87,0.06); color: #053d57; }
|
||||||
|
|
||||||
|
/* Pagination */
|
||||||
|
.page-btn {
|
||||||
|
width: 32px; height: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 13px; font-weight: 600;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.page-btn.active { background: #053d57; color: white; }
|
||||||
|
.page-btn:not(.active):hover { background: rgba(5,61,87,0.06); }
|
||||||
|
.page-btn.arrow { background: transparent; color: #9ca3af; }
|
||||||
|
.page-btn.arrow:hover { background: rgba(5,61,87,0.06); color: #053d57; }
|
||||||
|
|
||||||
|
/* Score bar visual */
|
||||||
|
.score-bar {
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.score-bar::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: currentColor;
|
||||||
|
opacity: 0.06;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover row elevation */
|
||||||
|
.project-row:hover {
|
||||||
|
box-shadow: inset 0 0 0 1px rgba(5, 61, 87, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Score bar hover effect */
|
||||||
|
.score-bar {
|
||||||
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||||
|
}
|
||||||
|
.project-row:hover .score-bar {
|
||||||
|
transform: scale(1.06);
|
||||||
|
box-shadow: 0 2px 8px rgba(5,61,87,0.14);
|
||||||
|
}
|
||||||
|
.project-row:hover .score-bar.score-high {
|
||||||
|
box-shadow: 0 2px 8px rgba(5,150,105,0.2);
|
||||||
|
}
|
||||||
|
.project-row:hover .score-bar.score-low {
|
||||||
|
box-shadow: 0 2px 8px rgba(222,15,30,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scoreboard number entrance */
|
||||||
|
@keyframes scoreboardPop {
|
||||||
|
from { opacity: 0; transform: translateY(10px) scale(0.92); }
|
||||||
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||||
|
}
|
||||||
|
.scoreboard-num { animation: scoreboardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
|
||||||
|
.scoreboard-num-1 { animation-delay: 0.08s; }
|
||||||
|
.scoreboard-num-2 { animation-delay: 0.16s; }
|
||||||
|
.scoreboard-num-3 { animation-delay: 0.24s; }
|
||||||
|
.scoreboard-num-4 { animation-delay: 0.32s; }
|
||||||
|
|
||||||
|
/* Sidebar accent line */
|
||||||
|
.sidebar-accent-line {
|
||||||
|
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
||||||
|
background: linear-gradient(180deg, #de0f1e 0%, #053d57 50%, transparent 100%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f4f6f9]" style="color: #1a1a2e;">
|
||||||
|
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
<aside class="sidebar-premium fixed top-0 left-0 h-screen w-64 flex flex-col z-40" style="position:fixed">
|
||||||
|
<div class="sidebar-accent-line"></div>
|
||||||
|
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 border-b border-gray-100/80 flex items-center justify-between px-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0" style="background:linear-gradient(135deg,#053d57,#0a5a7c);box-shadow:0 4px 12px rgba(5,61,87,0.3)">
|
||||||
|
<span class="text-white font-black text-sm tracking-tight">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-black text-brand-blue leading-tight tracking-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-semibold tracking-wide uppercase">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="border-b border-gray-100/80 px-4 py-3">
|
||||||
|
<button class="w-full flex items-center gap-3 hover:bg-gray-50 rounded-xl px-3 py-2.5 transition-colors text-left">
|
||||||
|
<div class="w-7 h-7 rounded-lg bg-brand-blue/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-bold text-brand-blue leading-tight">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-0.5">
|
||||||
|
<a href="01-dashboard.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Competition</span></div>
|
||||||
|
<a href="02-rounds-pipeline.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">People</span></div>
|
||||||
|
<a href="04-projects-list.html" class="nav-active flex items-center gap-3 px-3 py-2.5 rounded-xl font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||||
|
Projects
|
||||||
|
</a>
|
||||||
|
<a href="05-members-list.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Insights</span></div>
|
||||||
|
<a href="06-reports.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Administration</span></div>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||||
|
Apply Page
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||||||
|
Audit Log
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="border-t border-gray-100/80 p-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-black flex-shrink-0" style="background:linear-gradient(135deg,#de0f1e,#b00d18)">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-bold text-brand-blue leading-tight truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-gray-50 flex-shrink-0">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- MAIN -->
|
||||||
|
<div class="ml-64 min-h-screen">
|
||||||
|
|
||||||
|
<!-- Top bar -->
|
||||||
|
<header class="bg-white border-b border-gray-100 sticky top-0 z-30 px-8 h-16 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2 text-sm text-gray-400 font-medium">
|
||||||
|
<span class="text-brand-blue font-semibold">Monaco OPC 2026</span>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
<span>Projects</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button class="text-xs font-600 px-4 py-2 rounded-lg border transition-all hover:shadow-sm flex items-center gap-2" style="color: #053d57; border-color: #e5e7eb;">
|
||||||
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
|
||||||
|
Import CSV
|
||||||
|
</button>
|
||||||
|
<button class="text-xs font-700 px-4 py-2 rounded-lg text-white transition-all hover:shadow-md flex items-center gap-2" style="background: #053d57;">
|
||||||
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||||
|
New Project
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex-1 px-8 py-8">
|
||||||
|
|
||||||
|
<!-- HERO HEADER -->
|
||||||
|
<div class="fade-up mb-8">
|
||||||
|
<div class="flex items-end justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 class="font-900 leading-none" style="font-size: 56px; color: #053d57; letter-spacing: -2px;">Projects</h1>
|
||||||
|
<p class="text-base text-gray-400 font-400 mt-2">142 ocean conservation initiatives · 2026 Edition</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right pb-2">
|
||||||
|
<div class="text-xs text-gray-400 font-500 mb-1">Last updated</div>
|
||||||
|
<div class="text-sm font-600" style="color: #053d57;">Today, 14:22</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SCOREBOARD — status overview as a single elegant strip -->
|
||||||
|
<div class="fade-up-1 mb-6">
|
||||||
|
<div class="scoreboard rounded-2xl p-6 text-white overflow-hidden relative">
|
||||||
|
<!-- Background texture -->
|
||||||
|
<div class="absolute inset-0 opacity-5" style="background-image: radial-gradient(circle at 20% 50%, white 1px, transparent 1px), radial-gradient(circle at 80% 50%, white 1px, transparent 1px); background-size: 40px 40px;"></div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="text-xs font-700 uppercase tracking-widest text-white opacity-50 mb-4">2026 Portfolio at a Glance</div>
|
||||||
|
|
||||||
|
<!-- Numbers flow -->
|
||||||
|
<div class="flex items-stretch gap-0">
|
||||||
|
<div class="flex-1 pr-8 border-r border-white border-opacity-10">
|
||||||
|
<div class="text-5xl font-900 leading-none mb-1 scoreboard-num scoreboard-num-1" style="letter-spacing: -2px;">142</div>
|
||||||
|
<div class="text-sm font-500 text-white opacity-60">Total Projects</div>
|
||||||
|
<div class="mt-3 h-1 rounded-full bg-white opacity-20">
|
||||||
|
<div class="h-full rounded-full bg-white opacity-100" style="width: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 px-8 border-r border-white border-opacity-10">
|
||||||
|
<div class="text-5xl font-900 leading-none mb-1 text-emerald-300 scoreboard-num scoreboard-num-2" style="letter-spacing: -2px;">87</div>
|
||||||
|
<div class="text-sm font-500 text-white opacity-60">Eligible / Passed</div>
|
||||||
|
<div class="mt-3 h-1 rounded-full bg-white opacity-20">
|
||||||
|
<div class="h-full rounded-full bg-emerald-400" style="width: 61%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 px-8 border-r border-white border-opacity-10">
|
||||||
|
<div class="text-5xl font-900 leading-none mb-1 scoreboard-num scoreboard-num-3" style="letter-spacing: -2px; color: rgba(255,255,255,0.85);">62</div>
|
||||||
|
<div class="text-sm font-500 text-white opacity-60">Under Evaluation</div>
|
||||||
|
<div class="mt-3 h-1 rounded-full bg-white opacity-20">
|
||||||
|
<div class="h-full rounded-full bg-white opacity-60" style="width: 44%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 px-8 border-r border-white border-opacity-10">
|
||||||
|
<div class="text-5xl font-900 leading-none mb-1 scoreboard-num scoreboard-num-4" style="letter-spacing: -2px; color: rgba(255,200,200,0.9);">12</div>
|
||||||
|
<div class="text-sm font-500 text-white opacity-60">Rejected</div>
|
||||||
|
<div class="mt-3 h-1 rounded-full bg-white opacity-20">
|
||||||
|
<div class="h-full rounded-full" style="width: 8%; background: #de0f1e; opacity: 0.8;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stacked proportion bar -->
|
||||||
|
<div class="flex-1 pl-8 flex flex-col justify-center">
|
||||||
|
<div class="text-xs font-600 text-white opacity-50 mb-3 uppercase tracking-wider">Distribution</div>
|
||||||
|
<div class="flex rounded-full overflow-hidden h-3 gap-0.5">
|
||||||
|
<div class="h-full rounded-l-full" style="width: 61%; background: #10b981;"></div>
|
||||||
|
<div class="h-full" style="width: 8%; background: rgba(255,255,255,0.5);"></div>
|
||||||
|
<div class="h-full" style="width: 8%; background: rgba(255,255,255,0.3);"></div>
|
||||||
|
<div class="h-full rounded-r-full" style="width: 9%; background: rgba(222,15,30,0.7);"></div>
|
||||||
|
<div class="h-full" style="width: 14%; background: rgba(255,255,255,0.1);"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 mt-2.5">
|
||||||
|
<div class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-emerald-400"></div><span class="text-xs text-white opacity-50">Passed</span></div>
|
||||||
|
<div class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full" style="background: rgba(255,255,255,0.5);"></div><span class="text-xs text-white opacity-50">In Progress</span></div>
|
||||||
|
<div class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full" style="background: rgba(222,15,30,0.7);"></div><span class="text-xs text-white opacity-50">Rejected</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TOOLBAR -->
|
||||||
|
<div class="fade-up-2 mb-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="flex-1 max-w-sm relative">
|
||||||
|
<svg class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||||
|
<input type="text" placeholder="Search projects, teams, countries..." class="search-box w-full pl-10 pr-4 py-2.5 text-sm bg-white border border-gray-200 rounded-xl transition-all" style="font-family: 'Montserrat', sans-serif; color: #053d57;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filter pills -->
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xs text-gray-400 font-600 mr-1">Round:</span>
|
||||||
|
<div class="filter-pill active text-xs font-600 px-3 py-1.5 rounded-full border" style="border-color: #053d57; background: #053d57; color: white;">All</div>
|
||||||
|
<div class="filter-pill text-xs font-600 px-3 py-1.5 rounded-full border border-gray-200 text-gray-500">Evaluation</div>
|
||||||
|
<div class="filter-pill text-xs font-600 px-3 py-1.5 rounded-full border border-gray-200 text-gray-500">Filtering</div>
|
||||||
|
<div class="filter-pill text-xs font-600 px-3 py-1.5 rounded-full border border-gray-200 text-gray-500">Intake</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-px h-6 bg-gray-200"></div>
|
||||||
|
|
||||||
|
<!-- Sort -->
|
||||||
|
<button class="flex items-center gap-2 text-xs font-600 px-3 py-2.5 bg-white border border-gray-200 rounded-xl text-gray-500 hover:border-gray-300 transition-all">
|
||||||
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/></svg>
|
||||||
|
Sort: Score
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- View toggle -->
|
||||||
|
<div class="flex bg-white border border-gray-200 rounded-xl overflow-hidden">
|
||||||
|
<button class="px-3 py-2.5 flex items-center gap-1.5 text-white text-xs" style="background: #053d57;">
|
||||||
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="px-3 py-2.5 flex items-center gap-1.5 text-gray-400 text-xs hover:bg-gray-50 transition-colors">
|
||||||
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- THE TABLE — elevated portfolio view -->
|
||||||
|
<div class="fade-up-3">
|
||||||
|
<div class="bg-white rounded-2xl border overflow-hidden" style="border-color: #f0f0f0;">
|
||||||
|
|
||||||
|
<!-- Table header -->
|
||||||
|
<div class="grid items-center px-6 py-3 border-b" style="grid-template-columns: 24px 1fr 140px 140px 120px 100px; gap: 16px; border-color: rgba(5,61,87,0.06); background: rgba(5,61,87,0.02);">
|
||||||
|
<div class="row-checkbox"></div>
|
||||||
|
<div class="text-xs font-700 uppercase tracking-wider text-gray-400">Project</div>
|
||||||
|
<div class="text-xs font-700 uppercase tracking-wider text-gray-400">Country</div>
|
||||||
|
<div class="text-xs font-700 uppercase tracking-wider text-gray-400">Round</div>
|
||||||
|
<div class="text-xs font-700 uppercase tracking-wider text-gray-400">Status</div>
|
||||||
|
<div class="text-xs font-700 uppercase tracking-wider text-gray-400 text-right">Score</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 1: OceanClean AI — 8.7 -->
|
||||||
|
<div class="project-row row-evaluation grid items-center px-6 py-4 border-b" style="grid-template-columns: 24px 1fr 140px 140px 120px 100px; gap: 16px; border-color: #f8f8f8;">
|
||||||
|
<div class="row-checkbox"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-700" style="color: #053d57;">OceanClean AI</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">Marine Pollution · Advanced AI detection</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base">🇫🇷</span>
|
||||||
|
<span class="text-sm font-500 text-gray-600">France</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-600 px-2.5 py-1 rounded-lg" style="background: rgba(5,61,87,0.08); color: #053d57;">Evaluation</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="status-pill" style="background: rgba(85,127,140,0.1); color: #557f8c;">
|
||||||
|
<span class="status-dot" style="background: #557f8c;"></span>
|
||||||
|
In Progress
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="score-bar score-bg-high score-high font-900 text-lg" style="min-width: 56px; justify-content: center; letter-spacing: -0.5px;">8.7</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 2: CoralTrack — 9.2 -->
|
||||||
|
<div class="project-row row-evaluation grid items-center px-6 py-4 border-b" style="grid-template-columns: 24px 1fr 140px 140px 120px 100px; gap: 16px; border-color: #f8f8f8;">
|
||||||
|
<div class="row-checkbox"></div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-sm font-700" style="color: #053d57;">CoralTrack</span>
|
||||||
|
<span class="text-xs font-700 px-1.5 py-0.5 rounded" style="background: rgba(5,150,105,0.1); color: #059669; font-size: 9px; letter-spacing: 0.5px;">TOP SCORE</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">Reef Monitoring · Satellite imaging</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base">🇦🇺</span>
|
||||||
|
<span class="text-sm font-500 text-gray-600">Australia</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-600 px-2.5 py-1 rounded-lg" style="background: rgba(5,61,87,0.08); color: #053d57;">Evaluation</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="status-pill" style="background: rgba(16,185,129,0.1); color: #059669;">
|
||||||
|
<span class="status-dot" style="background: #10b981;"></span>
|
||||||
|
Passed
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="score-bar score-bg-high score-high font-900 text-lg" style="min-width: 56px; justify-content: center; letter-spacing: -0.5px;">9.2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 3: MicroDetect — 7.8 -->
|
||||||
|
<div class="project-row row-evaluation grid items-center px-6 py-4 border-b" style="grid-template-columns: 24px 1fr 140px 140px 120px 100px; gap: 16px; border-color: #f8f8f8;">
|
||||||
|
<div class="row-checkbox"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-700" style="color: #053d57;">MicroDetect</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">Microplastics · Real-time sampling</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base">🇩🇪</span>
|
||||||
|
<span class="text-sm font-500 text-gray-600">Germany</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-600 px-2.5 py-1 rounded-lg" style="background: rgba(5,61,87,0.08); color: #053d57;">Evaluation</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="status-pill" style="background: rgba(85,127,140,0.1); color: #557f8c;">
|
||||||
|
<span class="status-dot" style="background: #557f8c;"></span>
|
||||||
|
In Progress
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="score-bar score-bg-mid score-mid font-900 text-lg" style="min-width: 56px; justify-content: center; letter-spacing: -0.5px;">7.8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 4: BlueMonitor — 6.9 -->
|
||||||
|
<div class="project-row row-evaluation grid items-center px-6 py-4 border-b" style="grid-template-columns: 24px 1fr 140px 140px 120px 100px; gap: 16px; border-color: #f8f8f8;">
|
||||||
|
<div class="row-checkbox"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-700" style="color: #053d57;">BlueMonitor</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">Ocean Chemistry · pH & temp sensors</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base">🇧🇷</span>
|
||||||
|
<span class="text-sm font-500 text-gray-600">Brazil</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-600 px-2.5 py-1 rounded-lg" style="background: rgba(5,61,87,0.08); color: #053d57;">Evaluation</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="status-pill" style="background: rgba(85,127,140,0.1); color: #557f8c;">
|
||||||
|
<span class="status-dot" style="background: #557f8c;"></span>
|
||||||
|
In Progress
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="score-bar score-bg-mid score-mid font-900 text-lg" style="min-width: 56px; justify-content: center; letter-spacing: -0.5px;">6.9</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 5: TidalEnergy Pro — 8.9 (Filtering) -->
|
||||||
|
<div class="project-row row-filtering grid items-center px-6 py-4 border-b" style="grid-template-columns: 24px 1fr 140px 140px 120px 100px; gap: 16px; border-color: #f8f8f8; background: rgba(0,0,0,0.01);">
|
||||||
|
<div class="row-checkbox"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-700" style="color: #053d57;">TidalEnergy Pro</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">Renewable Energy · Tidal conversion</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base">🇬🇧</span>
|
||||||
|
<span class="text-sm font-500 text-gray-600">United Kingdom</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-600 px-2.5 py-1 rounded-lg" style="background: rgba(85,127,140,0.1); color: #557f8c;">Filtering</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="status-pill" style="background: rgba(16,185,129,0.1); color: #059669;">
|
||||||
|
<span class="status-dot" style="background: #10b981;"></span>
|
||||||
|
Passed
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="score-bar score-bg-high score-high font-900 text-lg" style="min-width: 56px; justify-content: center; letter-spacing: -0.5px;">8.9</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 6: AquaDrone — 4.2 REJECTED -->
|
||||||
|
<div class="project-row row-filtering grid items-center px-6 py-4 border-b" style="grid-template-columns: 24px 1fr 140px 140px 120px 100px; gap: 16px; border-color: #f8f8f8; background: rgba(222,15,30,0.02); opacity: 0.8;">
|
||||||
|
<div class="row-checkbox"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-700 text-gray-500">AquaDrone</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">Underwater Survey · Autonomous ROV</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base">🇯🇵</span>
|
||||||
|
<span class="text-sm font-500 text-gray-500">Japan</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-600 px-2.5 py-1 rounded-lg" style="background: rgba(85,127,140,0.08); color: #557f8c;">Filtering</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="status-pill" style="background: rgba(222,15,30,0.08); color: #de0f1e;">
|
||||||
|
<span class="status-dot" style="background: #de0f1e;"></span>
|
||||||
|
Rejected
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="score-bar score-bg-low score-low font-900 text-lg" style="min-width: 56px; justify-content: center; letter-spacing: -0.5px;">4.2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 7: SeaHarvest — no score (Intake) -->
|
||||||
|
<div class="project-row row-intake grid items-center px-6 py-4 border-b" style="grid-template-columns: 24px 1fr 140px 140px 120px 100px; gap: 16px; border-color: #f8f8f8; background: rgba(0,0,0,0.005);">
|
||||||
|
<div class="row-checkbox"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-700" style="color: #053d57;">SeaHarvest</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">Sustainable Aquaculture · Open-sea farming</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base">🇳🇴</span>
|
||||||
|
<span class="text-sm font-500 text-gray-600">Norway</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-600 px-2.5 py-1 rounded-lg" style="background: rgba(156,163,175,0.12); color: #9ca3af;">Intake</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="status-pill" style="background: rgba(156,163,175,0.1); color: #9ca3af;">
|
||||||
|
<span class="status-dot" style="background: #9ca3af;"></span>
|
||||||
|
Pending
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="score-bar score-bg-none score-none font-700 text-sm" style="min-width: 56px; justify-content: center; letter-spacing: 0;">—</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ROW 8: WaveShield — 7.5 (Monaco) -->
|
||||||
|
<div class="project-row row-evaluation grid items-center px-6 py-4" style="grid-template-columns: 24px 1fr 140px 140px 120px 100px; gap: 16px;">
|
||||||
|
<div class="row-checkbox"></div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-sm font-700" style="color: #053d57;">WaveShield</span>
|
||||||
|
<span class="text-xs font-700 px-1.5 py-0.5 rounded" style="background: rgba(5,61,87,0.08); color: #053d57; font-size: 9px; letter-spacing: 0.5px;">HOST</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-400 font-400 mt-0.5">Coastal Protection · Wave energy damping</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-base">🇲🇨</span>
|
||||||
|
<span class="text-sm font-500 text-gray-600">Monaco</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-600 px-2.5 py-1 rounded-lg" style="background: rgba(5,61,87,0.08); color: #053d57;">Evaluation</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="status-pill" style="background: rgba(85,127,140,0.1); color: #557f8c;">
|
||||||
|
<span class="status-dot" style="background: #557f8c;"></span>
|
||||||
|
In Progress
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="score-bar score-bg-mid score-mid font-900 text-lg" style="min-width: 56px; justify-content: center; letter-spacing: -0.5px;">7.5</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Score Legend + Pagination -->
|
||||||
|
<div class="flex items-center justify-between mt-4 px-1">
|
||||||
|
<!-- Score legend -->
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<span class="text-xs text-gray-400 font-500">Score key:</span>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-8 h-4 rounded" style="background: rgba(5,150,105,0.12);"></div>
|
||||||
|
<span class="text-xs text-gray-400 font-500">≥ 8.0 Excellent</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-8 h-4 rounded" style="background: rgba(5,61,87,0.08);"></div>
|
||||||
|
<span class="text-xs text-gray-400 font-500">6.0–7.9 Good</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-8 h-4 rounded" style="background: rgba(222,15,30,0.08);"></div>
|
||||||
|
<span class="text-xs text-gray-400 font-500">< 6.0 Low</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<div class="page-btn arrow">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="page-btn active">1</div>
|
||||||
|
<div class="page-btn">2</div>
|
||||||
|
<div class="page-btn">3</div>
|
||||||
|
<span class="text-xs text-gray-300 px-1">···</span>
|
||||||
|
<div class="page-btn">18</div>
|
||||||
|
<div class="page-btn arrow">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Result count -->
|
||||||
|
<div class="text-center mt-3">
|
||||||
|
<span class="text-xs text-gray-400 font-500">Showing 8 of 142 projects</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BULK ACTION BAR (visible when items selected — shown for demo) -->
|
||||||
|
<div class="bulk-bar visible" id="bulkBar">
|
||||||
|
<div class="px-8 py-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-5 h-5 rounded flex items-center justify-center bg-white">
|
||||||
|
<svg class="w-3 h-3 text-blue-900" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-700 text-white">2 selected</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-4 bg-white opacity-20"></div>
|
||||||
|
<button class="text-xs font-600 text-white opacity-70 hover:opacity-100 transition-opacity">Select all 142</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button class="text-xs font-600 px-4 py-2 rounded-lg transition-all" style="background: rgba(255,255,255,0.1); color: white;">
|
||||||
|
Export Selected
|
||||||
|
</button>
|
||||||
|
<button class="text-xs font-600 px-4 py-2 rounded-lg transition-all" style="background: rgba(255,255,255,0.1); color: white;">
|
||||||
|
Move to Round
|
||||||
|
</button>
|
||||||
|
<button class="text-xs font-600 px-4 py-2 rounded-lg transition-all" style="background: rgba(255,255,255,0.1); color: white;">
|
||||||
|
Assign Jurors
|
||||||
|
</button>
|
||||||
|
<button class="text-xs font-700 px-4 py-2 rounded-lg transition-all" style="background: #de0f1e; color: white;">
|
||||||
|
Reject Selected
|
||||||
|
</button>
|
||||||
|
<div class="w-px h-4 bg-white opacity-20"></div>
|
||||||
|
<button class="text-white opacity-40 hover:opacity-80 transition-opacity" onclick="document.getElementById('bulkBar').classList.remove('visible')">
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add some bottom padding so content isn't hidden behind bulk bar -->
|
||||||
|
<style>
|
||||||
|
body { padding-bottom: 72px; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
703
prototypes/admin-redesign-v2/05-members-list.html
Normal file
703
prototypes/admin-redesign-v2/05-members-list.html
Normal file
@@ -0,0 +1,703 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin v2 — Members</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
|
||||||
|
/* Sidebar premium gradient */
|
||||||
|
.sidebar-premium {
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||||
|
border-right: 1px solid #e8edf2;
|
||||||
|
}
|
||||||
|
.sidebar-accent-line {
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: linear-gradient(180deg, #de0f1e 0%, #053d57 50%, transparent 100%);
|
||||||
|
}
|
||||||
|
.nav-active {
|
||||||
|
background: #053d57;
|
||||||
|
color: white;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: #de0f1e;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.nav-item {
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
.nav-item:hover {
|
||||||
|
background: rgba(5,61,87,0.06);
|
||||||
|
color: #053d57;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Role tab pills */
|
||||||
|
.role-tab {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.role-tab.active {
|
||||||
|
background: #053d57;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 12px rgba(5,61,87,0.25);
|
||||||
|
}
|
||||||
|
.role-tab.active .tab-count {
|
||||||
|
color: rgba(255,255,255,0.8);
|
||||||
|
}
|
||||||
|
.role-tab:not(.active) {
|
||||||
|
background: white;
|
||||||
|
color: #6b7280;
|
||||||
|
border: 1.5px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
.role-tab:not(.active):hover {
|
||||||
|
border-color: #053d57;
|
||||||
|
color: #053d57;
|
||||||
|
transform: scale(1.04);
|
||||||
|
box-shadow: 0 4px 12px rgba(5,61,87,0.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Member rows */
|
||||||
|
.member-row {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #f0f3f6;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.member-row::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: transparent;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
.member-row:hover {
|
||||||
|
border-color: #d1dde6;
|
||||||
|
box-shadow: 0 4px 16px rgba(5,61,87,0.08);
|
||||||
|
transform: translateX(2px);
|
||||||
|
}
|
||||||
|
.member-row:hover::before {
|
||||||
|
background: #053d57;
|
||||||
|
}
|
||||||
|
.member-row.invited:hover::before {
|
||||||
|
background: #f59e0b;
|
||||||
|
}
|
||||||
|
.member-row.inactive::before {
|
||||||
|
background: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Avatar colors */
|
||||||
|
.avatar { display: flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 50%; flex-shrink: 0; }
|
||||||
|
.av-blue { background: linear-gradient(135deg, #053d57, #0a5a7c); color: white; }
|
||||||
|
.av-teal { background: linear-gradient(135deg, #557f8c, #3d6b79); color: white; }
|
||||||
|
.av-violet { background: linear-gradient(135deg, #7c3aed, #5b21b6); color: white; }
|
||||||
|
.av-red { background: linear-gradient(135deg, #de0f1e, #b00d18); color: white; }
|
||||||
|
.av-gray { background: linear-gradient(135deg, #9ca3af, #6b7280); color: white; }
|
||||||
|
.av-amber { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
|
||||||
|
|
||||||
|
/* Status pills */
|
||||||
|
.status-active { background: #dcfce7; color: #16a34a; }
|
||||||
|
.status-invited { background: #fef3c7; color: #b45309; }
|
||||||
|
.status-inactive { background: #f3f4f6; color: #9ca3af; }
|
||||||
|
|
||||||
|
/* Role badges */
|
||||||
|
.role-jury { background: #dbeafe; color: #1e40af; }
|
||||||
|
.role-mentor { background: #ccfbf1; color: #0f766e; }
|
||||||
|
.role-observer { background: #ede9fe; color: #6d28d9; }
|
||||||
|
.role-admin { background: #fee2e2; color: #dc2626; }
|
||||||
|
|
||||||
|
/* Resend button */
|
||||||
|
.btn-resend {
|
||||||
|
border: 1.5px solid #f59e0b;
|
||||||
|
color: #b45309;
|
||||||
|
background: #fffbeb;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.btn-resend:hover {
|
||||||
|
background: #f59e0b;
|
||||||
|
color: white;
|
||||||
|
border-color: #f59e0b;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||||
|
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.member-row { animation: slideIn 0.3s ease both; }
|
||||||
|
.member-row:nth-child(1) { animation-delay: 0.05s; }
|
||||||
|
.member-row:nth-child(2) { animation-delay: 0.10s; }
|
||||||
|
.member-row:nth-child(3) { animation-delay: 0.15s; }
|
||||||
|
.member-row:nth-child(4) { animation-delay: 0.20s; }
|
||||||
|
.member-row:nth-child(5) { animation-delay: 0.25s; }
|
||||||
|
.member-row:nth-child(6) { animation-delay: 0.30s; }
|
||||||
|
.member-row:nth-child(7) { animation-delay: 0.35s; }
|
||||||
|
.member-row:nth-child(8) { animation-delay: 0.40s; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f4f6f9]">
|
||||||
|
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
<aside class="sidebar-premium fixed top-0 left-0 h-screen w-64 flex flex-col z-40" style="position:fixed">
|
||||||
|
<div class="sidebar-accent-line"></div>
|
||||||
|
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 border-b border-gray-100/80 flex items-center justify-between px-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0" style="background:linear-gradient(135deg,#053d57,#0a5a7c);box-shadow:0 4px 12px rgba(5,61,87,0.3)">
|
||||||
|
<span class="text-white font-black text-sm tracking-tight">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-black text-brand-blue leading-tight tracking-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-semibold tracking-wide uppercase">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full pulse-dot"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="border-b border-gray-100/80 px-4 py-3">
|
||||||
|
<button class="w-full flex items-center gap-3 hover:bg-gray-50 rounded-xl px-3 py-2.5 transition-colors text-left group">
|
||||||
|
<div class="w-7 h-7 rounded-lg bg-brand-blue/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-bold text-brand-blue leading-tight">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-0.5">
|
||||||
|
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<a href="01-dashboard.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- COMPETITION -->
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Competition</span>
|
||||||
|
</div>
|
||||||
|
<a href="02-rounds.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
||||||
|
</svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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 href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>
|
||||||
|
</svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- PEOPLE -->
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">People</span>
|
||||||
|
</div>
|
||||||
|
<a href="04-projects.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/>
|
||||||
|
</svg>
|
||||||
|
Projects
|
||||||
|
</a>
|
||||||
|
<a href="05-members-list.html" class="nav-active flex items-center gap-3 px-3 py-2.5 rounded-xl font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||||
|
</svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- INSIGHTS -->
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Insights</span>
|
||||||
|
</div>
|
||||||
|
<a href="06-reports.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- ADMINISTRATION -->
|
||||||
|
<div class="pt-5 pb-1.5 px-3">
|
||||||
|
<span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Administration</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
||||||
|
</svg>
|
||||||
|
Apply Page
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>
|
||||||
|
</svg>
|
||||||
|
Audit Log
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/>
|
||||||
|
</svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="border-t border-gray-100/80 p-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="avatar av-red w-9 h-9 text-sm flex-shrink-0" style="font-size:12px">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-bold text-brand-blue leading-tight truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-gray-50 flex-shrink-0">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- MAIN CONTENT -->
|
||||||
|
<main class="ml-64 min-h-screen">
|
||||||
|
|
||||||
|
<!-- Top bar -->
|
||||||
|
<header class="bg-white border-b border-gray-100 sticky top-0 z-30 px-8 h-16 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2 text-sm text-gray-400 font-medium">
|
||||||
|
<span class="text-brand-blue font-semibold">Monaco OPC 2026</span>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
<span>Members</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-4 py-2">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||||
|
</svg>
|
||||||
|
<input class="bg-transparent text-sm text-gray-600 outline-none w-48 placeholder-gray-400 font-medium" placeholder="Search members..." type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="px-8 py-8">
|
||||||
|
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="mb-8 flex items-end justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl font-black text-brand-blue tracking-tight leading-none mb-2">Members</h1>
|
||||||
|
<p class="text-gray-400 font-medium text-sm tracking-wide">48 members across all roles · Monaco OPC 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-gray-200 bg-white text-sm font-semibold text-gray-600 hover:border-brand-blue hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
<button class="flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-sm text-white transition-all hover:shadow-lg" style="background:linear-gradient(135deg,#de0f1e,#b00d18);box-shadow:0 4px 12px rgba(222,15,30,0.3)">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
Invite Members
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Role Tabs — Large pill blocks -->
|
||||||
|
<div class="flex items-center gap-2 mb-8 flex-wrap">
|
||||||
|
<div class="role-tab active rounded-2xl px-5 py-3 flex flex-col items-center min-w-[80px]">
|
||||||
|
<span class="text-2xl font-black leading-none">48</span>
|
||||||
|
<span class="text-[11px] font-semibold mt-1 tab-count">All</span>
|
||||||
|
</div>
|
||||||
|
<div class="role-tab rounded-2xl px-5 py-3 flex flex-col items-center min-w-[80px]">
|
||||||
|
<span class="text-2xl font-black leading-none text-brand-blue">32</span>
|
||||||
|
<span class="text-[11px] font-semibold mt-1">Jury</span>
|
||||||
|
</div>
|
||||||
|
<div class="role-tab rounded-2xl px-5 py-3 flex flex-col items-center min-w-[80px]">
|
||||||
|
<span class="text-2xl font-black leading-none text-teal-600">6</span>
|
||||||
|
<span class="text-[11px] font-semibold mt-1">Mentors</span>
|
||||||
|
</div>
|
||||||
|
<div class="role-tab rounded-2xl px-5 py-3 flex flex-col items-center min-w-[80px]">
|
||||||
|
<span class="text-2xl font-black leading-none text-violet-600">4</span>
|
||||||
|
<span class="text-[11px] font-semibold mt-1">Observers</span>
|
||||||
|
</div>
|
||||||
|
<div class="role-tab rounded-2xl px-5 py-3 flex flex-col items-center min-w-[80px]">
|
||||||
|
<span class="text-2xl font-black leading-none text-brand-red">3</span>
|
||||||
|
<span class="text-[11px] font-semibold mt-1">Admins</span>
|
||||||
|
</div>
|
||||||
|
<div class="role-tab rounded-2xl px-5 py-3 flex flex-col items-center min-w-[80px]">
|
||||||
|
<span class="text-2xl font-black leading-none text-gray-400">3</span>
|
||||||
|
<span class="text-[11px] font-semibold mt-1">Other</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filter controls on right -->
|
||||||
|
<div class="ml-auto flex items-center gap-2">
|
||||||
|
<select class="text-sm font-semibold text-gray-600 bg-white border border-gray-200 rounded-xl px-4 py-2.5 outline-none">
|
||||||
|
<option>All Panels</option>
|
||||||
|
<option>Panel A</option>
|
||||||
|
<option>Panel B</option>
|
||||||
|
</select>
|
||||||
|
<select class="text-sm font-semibold text-gray-600 bg-white border border-gray-200 rounded-xl px-4 py-2.5 outline-none">
|
||||||
|
<option>All Statuses</option>
|
||||||
|
<option>Active</option>
|
||||||
|
<option>Invited</option>
|
||||||
|
<option>Inactive</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Column headers -->
|
||||||
|
<div class="grid grid-cols-12 gap-4 px-5 pb-3 mb-1">
|
||||||
|
<div class="col-span-4 text-[10.5px] font-black uppercase tracking-[0.1em] text-gray-400">Member</div>
|
||||||
|
<div class="col-span-2 text-[10.5px] font-black uppercase tracking-[0.1em] text-gray-400">Role</div>
|
||||||
|
<div class="col-span-2 text-[10.5px] font-black uppercase tracking-[0.1em] text-gray-400">Panel / Context</div>
|
||||||
|
<div class="col-span-2 text-[10.5px] font-black uppercase tracking-[0.1em] text-gray-400">Status</div>
|
||||||
|
<div class="col-span-1 text-[10.5px] font-black uppercase tracking-[0.1em] text-gray-400">Joined</div>
|
||||||
|
<div class="col-span-1 text-[10.5px] font-black uppercase tracking-[0.1em] text-gray-400"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Member Rows -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
|
||||||
|
<!-- 1. Dr. Sophie Martin — Active Jury -->
|
||||||
|
<div class="member-row rounded-2xl px-5 py-4 grid grid-cols-12 gap-4 items-center cursor-pointer">
|
||||||
|
<div class="col-span-4 flex items-center gap-4">
|
||||||
|
<div class="avatar av-blue w-11 h-11 text-sm flex-shrink-0" style="font-size:13px;box-shadow:0 4px 10px rgba(5,61,87,0.2)">SM</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-brand-blue text-sm leading-tight">Dr. Sophie Martin</div>
|
||||||
|
<div class="text-xs text-gray-400 font-medium mt-0.5">sophie@univ.fr</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="role-jury text-[11px] font-bold px-2.5 py-1 rounded-lg">Jury Member</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div class="text-xs font-semibold text-brand-blue">Panel A</div>
|
||||||
|
<div class="text-[11px] text-gray-400 font-medium">12 assignments</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="status-active text-[11px] font-bold px-2.5 py-1 rounded-lg flex items-center gap-1.5 w-fit">
|
||||||
|
<span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 text-xs text-gray-400 font-medium">Jan 15</div>
|
||||||
|
<div class="col-span-1 flex justify-end">
|
||||||
|
<button class="p-2 rounded-lg hover:bg-gray-50 text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. Prof. Jean Dupont — Active Jury -->
|
||||||
|
<div class="member-row rounded-2xl px-5 py-4 grid grid-cols-12 gap-4 items-center cursor-pointer">
|
||||||
|
<div class="col-span-4 flex items-center gap-4">
|
||||||
|
<div class="avatar av-blue w-11 h-11 flex-shrink-0" style="font-size:13px;box-shadow:0 4px 10px rgba(5,61,87,0.2)">JD</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-brand-blue text-sm leading-tight">Prof. Jean Dupont</div>
|
||||||
|
<div class="text-xs text-gray-400 font-medium mt-0.5">jean@lab.mc</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="role-jury text-[11px] font-bold px-2.5 py-1 rounded-lg">Jury Member</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div class="text-xs font-semibold text-brand-blue">Panel A</div>
|
||||||
|
<div class="text-[11px] text-gray-400 font-medium">15 assignments</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="status-active text-[11px] font-bold px-2.5 py-1 rounded-lg flex items-center gap-1.5 w-fit">
|
||||||
|
<span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 text-xs text-gray-400 font-medium">Jan 15</div>
|
||||||
|
<div class="col-span-1 flex justify-end">
|
||||||
|
<button class="p-2 rounded-lg hover:bg-gray-50 text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3. Maria Garcia — Invited Jury -->
|
||||||
|
<div class="member-row invited rounded-2xl px-5 py-4 grid grid-cols-12 gap-4 items-center cursor-pointer" style="background:linear-gradient(to right, #fffbf0, white)">
|
||||||
|
<div class="col-span-4 flex items-center gap-4">
|
||||||
|
<div class="avatar av-amber w-11 h-11 flex-shrink-0" style="font-size:13px;box-shadow:0 4px 10px rgba(245,158,11,0.2)">MG</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-brand-blue text-sm leading-tight">Maria Garcia</div>
|
||||||
|
<div class="text-xs text-gray-400 font-medium mt-0.5">maria@ocean.org</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="role-jury text-[11px] font-bold px-2.5 py-1 rounded-lg">Jury Member</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div class="text-xs font-semibold text-brand-blue">Panel B</div>
|
||||||
|
<div class="text-[11px] text-gray-400 font-medium">0 assignments</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="status-invited text-[11px] font-bold px-2.5 py-1 rounded-lg flex items-center gap-1.5 w-fit">
|
||||||
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||||
|
Invited
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 text-xs text-gray-400 font-medium">Feb 1</div>
|
||||||
|
<div class="col-span-1 flex justify-end">
|
||||||
|
<button class="btn-resend">Resend</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4. Dr. Yuki Tanaka — Active Jury -->
|
||||||
|
<div class="member-row rounded-2xl px-5 py-4 grid grid-cols-12 gap-4 items-center cursor-pointer">
|
||||||
|
<div class="col-span-4 flex items-center gap-4">
|
||||||
|
<div class="avatar av-teal w-11 h-11 flex-shrink-0" style="font-size:13px;box-shadow:0 4px 10px rgba(85,127,140,0.2)">YT</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-brand-blue text-sm leading-tight">Dr. Yuki Tanaka</div>
|
||||||
|
<div class="text-xs text-gray-400 font-medium mt-0.5">yuki@marine.jp</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="role-jury text-[11px] font-bold px-2.5 py-1 rounded-lg">Jury Member</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div class="text-xs font-semibold text-brand-blue">Panel A</div>
|
||||||
|
<div class="text-[11px] text-gray-400 font-medium">10 assignments</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="status-active text-[11px] font-bold px-2.5 py-1 rounded-lg flex items-center gap-1.5 w-fit">
|
||||||
|
<span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 text-xs text-gray-400 font-medium">Jan 18</div>
|
||||||
|
<div class="col-span-1 flex justify-end">
|
||||||
|
<button class="p-2 rounded-lg hover:bg-gray-50 text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 5. Carlos Mendez — Mentor -->
|
||||||
|
<div class="member-row rounded-2xl px-5 py-4 grid grid-cols-12 gap-4 items-center cursor-pointer">
|
||||||
|
<div class="col-span-4 flex items-center gap-4">
|
||||||
|
<div class="avatar av-teal w-11 h-11 flex-shrink-0" style="font-size:13px;box-shadow:0 4px 10px rgba(85,127,140,0.2)">CM</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-brand-blue text-sm leading-tight">Carlos Mendez</div>
|
||||||
|
<div class="text-xs text-gray-400 font-medium mt-0.5">carlos@reef.br</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="role-mentor text-[11px] font-bold px-2.5 py-1 rounded-lg">Mentor</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div class="text-[11px] text-teal-600 font-semibold">3 mentee projects</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="status-active text-[11px] font-bold px-2.5 py-1 rounded-lg flex items-center gap-1.5 w-fit">
|
||||||
|
<span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 text-xs text-gray-400 font-medium">Jan 10</div>
|
||||||
|
<div class="col-span-1 flex justify-end">
|
||||||
|
<button class="p-2 rounded-lg hover:bg-gray-50 text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 6. Lisa Chen — Observer -->
|
||||||
|
<div class="member-row rounded-2xl px-5 py-4 grid grid-cols-12 gap-4 items-center cursor-pointer">
|
||||||
|
<div class="col-span-4 flex items-center gap-4">
|
||||||
|
<div class="avatar av-violet w-11 h-11 flex-shrink-0" style="font-size:13px;box-shadow:0 4px 10px rgba(124,58,237,0.2)">LC</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-brand-blue text-sm leading-tight">Lisa Chen</div>
|
||||||
|
<div class="text-xs text-gray-400 font-medium mt-0.5">lisa@wwf.org</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="role-observer text-[11px] font-bold px-2.5 py-1 rounded-lg">Observer</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div class="text-[11px] text-gray-400 font-medium">Read-only access</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="status-active text-[11px] font-bold px-2.5 py-1 rounded-lg flex items-center gap-1.5 w-fit">
|
||||||
|
<span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 text-xs text-gray-400 font-medium">Jan 5</div>
|
||||||
|
<div class="col-span-1 flex justify-end">
|
||||||
|
<button class="p-2 rounded-lg hover:bg-gray-50 text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 7. Ahmed Hassan — Invited Jury -->
|
||||||
|
<div class="member-row invited rounded-2xl px-5 py-4 grid grid-cols-12 gap-4 items-center cursor-pointer" style="background:linear-gradient(to right, #fffbf0, white)">
|
||||||
|
<div class="col-span-4 flex items-center gap-4">
|
||||||
|
<div class="avatar av-amber w-11 h-11 flex-shrink-0" style="font-size:13px;box-shadow:0 4px 10px rgba(245,158,11,0.2)">AH</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-brand-blue text-sm leading-tight">Ahmed Hassan</div>
|
||||||
|
<div class="text-xs text-gray-400 font-medium mt-0.5">ahmed@env.eg</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="role-jury text-[11px] font-bold px-2.5 py-1 rounded-lg">Jury Member</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div class="text-xs font-semibold text-brand-blue">Panel B</div>
|
||||||
|
<div class="text-[11px] text-gray-400 font-medium">0 assignments</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="status-invited text-[11px] font-bold px-2.5 py-1 rounded-lg flex items-center gap-1.5 w-fit">
|
||||||
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||||
|
Invited
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 text-xs text-gray-400 font-medium">Feb 8</div>
|
||||||
|
<div class="col-span-1 flex justify-end">
|
||||||
|
<button class="btn-resend">Resend</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 8. Robert Fisher — Inactive Jury -->
|
||||||
|
<div class="member-row inactive rounded-2xl px-5 py-4 grid grid-cols-12 gap-4 items-center cursor-pointer opacity-60">
|
||||||
|
<div class="col-span-4 flex items-center gap-4">
|
||||||
|
<div class="avatar av-gray w-11 h-11 flex-shrink-0" style="font-size:13px">RF</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-gray-500 text-sm leading-tight">Robert Fisher</div>
|
||||||
|
<div class="text-xs text-gray-400 font-medium mt-0.5">robert@noaa.gov</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="role-jury text-[11px] font-bold px-2.5 py-1 rounded-lg" style="background:#f3f4f6;color:#9ca3af">Jury Member</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div class="text-[11px] text-gray-400 font-medium">—</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<span class="status-inactive text-[11px] font-bold px-2.5 py-1 rounded-lg flex items-center gap-1.5 w-fit">
|
||||||
|
<span class="w-1.5 h-1.5 bg-gray-300 rounded-full"></span>
|
||||||
|
Inactive
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 text-xs text-gray-400 font-medium">Dec 15</div>
|
||||||
|
<div class="col-span-1 flex justify-end">
|
||||||
|
<button class="p-2 rounded-lg hover:bg-gray-50 text-gray-400 transition-colors">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- end member rows -->
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="mt-8 flex items-center justify-between">
|
||||||
|
<div class="text-sm text-gray-400 font-medium">Showing 8 of 48 members</div>
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<button class="w-9 h-9 rounded-xl border border-gray-200 bg-white text-gray-400 flex items-center justify-center hover:border-brand-blue hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="w-9 h-9 rounded-xl font-black text-sm" style="background:#053d57;color:white">1</button>
|
||||||
|
<button class="w-9 h-9 rounded-xl border border-gray-200 bg-white text-gray-500 font-semibold text-sm hover:border-brand-blue transition-colors">2</button>
|
||||||
|
<button class="w-9 h-9 rounded-xl border border-gray-200 bg-white text-gray-500 font-semibold text-sm hover:border-brand-blue transition-colors">3</button>
|
||||||
|
<span class="text-gray-400 px-1">…</span>
|
||||||
|
<button class="w-9 h-9 rounded-xl border border-gray-200 bg-white text-gray-500 font-semibold text-sm hover:border-brand-blue transition-colors">6</button>
|
||||||
|
<button class="w-9 h-9 rounded-xl border border-gray-200 bg-white text-gray-400 flex items-center justify-center hover:border-brand-blue hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- end px-8 py-8 -->
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
785
prototypes/admin-redesign-v2/06-reports.html
Normal file
785
prototypes/admin-redesign-v2/06-reports.html
Normal file
@@ -0,0 +1,785 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin v2 — Reports</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
|
||||||
|
.sidebar-premium {
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||||
|
border-right: 1px solid #e8edf2;
|
||||||
|
}
|
||||||
|
.sidebar-accent-line {
|
||||||
|
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
||||||
|
background: linear-gradient(180deg, #de0f1e 0%, #053d57 50%, transparent 100%);
|
||||||
|
}
|
||||||
|
.nav-active {
|
||||||
|
background: #053d57; color: white; position: relative;
|
||||||
|
}
|
||||||
|
.nav-active::before {
|
||||||
|
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px; background: #de0f1e; border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.nav-item { transition: all 0.15s ease; }
|
||||||
|
.nav-item:hover { background: rgba(5,61,87,0.06); color: #053d57; }
|
||||||
|
|
||||||
|
/* Donut chart */
|
||||||
|
.donut-ring {
|
||||||
|
width: 200px; height: 200px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: conic-gradient(
|
||||||
|
#10b981 0% 38%, /* Passed */
|
||||||
|
#3b82f6 38% 58%, /* In Progress */
|
||||||
|
#e5e7eb 58% 73%, /* Pending */
|
||||||
|
#ef4444 73% 100% /* Rejected */
|
||||||
|
);
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
.donut-hole {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 120px; height: 120px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
align-items: center; justify-content: center;
|
||||||
|
box-shadow: inset 0 2px 8px rgba(0,0,0,0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Report tabs */
|
||||||
|
.report-tab {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
.report-tab.active {
|
||||||
|
color: #053d57;
|
||||||
|
border-bottom-color: #de0f1e;
|
||||||
|
}
|
||||||
|
.report-tab:hover:not(.active) {
|
||||||
|
color: #053d57;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Score bars */
|
||||||
|
.score-bar-track {
|
||||||
|
background: #f3f4f6;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.score-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-right: 12px;
|
||||||
|
color: white;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 13px;
|
||||||
|
transition: width 1s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SVG chart animation */
|
||||||
|
@keyframes drawLine {
|
||||||
|
from { stroke-dashoffset: 600; }
|
||||||
|
to { stroke-dashoffset: 0; }
|
||||||
|
}
|
||||||
|
.chart-line {
|
||||||
|
stroke-dasharray: 600;
|
||||||
|
animation: drawLine 2s ease forwards;
|
||||||
|
}
|
||||||
|
@keyframes fadeArea {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 0.12; }
|
||||||
|
}
|
||||||
|
.chart-area {
|
||||||
|
animation: fadeArea 2s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Horizontal bar for criteria */
|
||||||
|
.criteria-bar-fill {
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 12px;
|
||||||
|
color: white;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 12px;
|
||||||
|
transition: width 1.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Top projects table */
|
||||||
|
.proj-row {
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
}
|
||||||
|
.proj-row:hover {
|
||||||
|
background: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Juror workload bar */
|
||||||
|
.juror-bar {
|
||||||
|
background: linear-gradient(90deg, #053d57, #0a5a7c);
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
color: white;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
transition: width 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scope bar */
|
||||||
|
.scope-bar {
|
||||||
|
background: white;
|
||||||
|
border-bottom: 1px solid #f0f3f6;
|
||||||
|
position: sticky;
|
||||||
|
top: 64px;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||||
|
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
|
||||||
|
|
||||||
|
/* Editorial stats flow */
|
||||||
|
.stat-flow-number {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #053d57;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.stat-flow-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #9ca3af;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card panel */
|
||||||
|
.card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid #f0f3f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes countUp {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.count-animate {
|
||||||
|
animation: countUp 0.6s ease both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stagger fadeIn for chart section cards */
|
||||||
|
@keyframes sectionFadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(12px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.section-animate { animation: sectionFadeIn 0.5s ease both; }
|
||||||
|
.section-animate-1 { animation: sectionFadeIn 0.5s ease 0.05s both; }
|
||||||
|
.section-animate-2 { animation: sectionFadeIn 0.5s ease 0.15s both; }
|
||||||
|
.section-animate-3 { animation: sectionFadeIn 0.5s ease 0.25s both; }
|
||||||
|
.section-animate-4 { animation: sectionFadeIn 0.5s ease 0.35s both; }
|
||||||
|
|
||||||
|
/* Grow-in for criteria score bars */
|
||||||
|
@keyframes growIn {
|
||||||
|
from { width: 0 !important; opacity: 0.5; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
.criteria-bar-fill {
|
||||||
|
animation: growIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
|
||||||
|
}
|
||||||
|
.criteria-bar-fill:nth-of-type(1) { animation-delay: 0.4s; }
|
||||||
|
.criteria-bar-fill:nth-of-type(2) { animation-delay: 0.5s; }
|
||||||
|
.criteria-bar-fill:nth-of-type(3) { animation-delay: 0.6s; }
|
||||||
|
.criteria-bar-fill:nth-of-type(4) { animation-delay: 0.7s; }
|
||||||
|
.criteria-bar-fill:nth-of-type(5) { animation-delay: 0.8s; }
|
||||||
|
|
||||||
|
/* Donut centering fix */
|
||||||
|
.donut-ring {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f4f6f9]">
|
||||||
|
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
<aside class="sidebar-premium fixed top-0 left-0 h-screen w-64 flex flex-col z-40" style="position:fixed">
|
||||||
|
<div class="sidebar-accent-line"></div>
|
||||||
|
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 border-b border-gray-100/80 flex items-center justify-between px-5">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0" style="background:linear-gradient(135deg,#053d57,#0a5a7c);box-shadow:0 4px 12px rgba(5,61,87,0.3)">
|
||||||
|
<span class="text-white font-black text-sm tracking-tight">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-black text-brand-blue leading-tight tracking-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-semibold tracking-wide uppercase">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full pulse-dot"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="border-b border-gray-100/80 px-4 py-3">
|
||||||
|
<button class="w-full flex items-center gap-3 hover:bg-gray-50 rounded-xl px-3 py-2.5 transition-colors text-left">
|
||||||
|
<div class="w-7 h-7 rounded-lg bg-brand-blue/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-bold text-brand-blue leading-tight">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-0.5">
|
||||||
|
<a href="01-dashboard.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Competition</span></div>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">People</span></div>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||||
|
Projects
|
||||||
|
</a>
|
||||||
|
<a href="05-members-list.html" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Insights</span></div>
|
||||||
|
<a href="06-reports.html" class="nav-active flex items-center gap-3 px-3 py-2.5 rounded-xl font-semibold text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
<div class="pt-5 pb-1.5 px-3"><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Administration</span></div>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||||
|
Apply Page
|
||||||
|
</a>
|
||||||
|
<a href="#" class="nav-item flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 font-medium text-sm">
|
||||||
|
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="border-t border-gray-100/80 p-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-black flex-shrink-0" style="background:linear-gradient(135deg,#de0f1e,#b00d18)">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-bold text-brand-blue leading-tight truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-gray-50 flex-shrink-0">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- MAIN -->
|
||||||
|
<main class="ml-64 min-h-screen">
|
||||||
|
|
||||||
|
<!-- Top Header bar -->
|
||||||
|
<header class="bg-white border-b border-gray-100 sticky top-0 z-30 px-8 h-16 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2 text-sm text-gray-400 font-medium">
|
||||||
|
<span class="text-brand-blue font-semibold">Monaco OPC 2026</span>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
<span>Reports</span>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-2 px-5 py-2.5 rounded-xl font-bold text-sm text-white" style="background:linear-gradient(135deg,#de0f1e,#b00d18);box-shadow:0 4px 12px rgba(222,15,30,0.3)">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><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 PDF
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="px-8 pt-8 pb-6">
|
||||||
|
<h1 class="text-4xl font-black text-brand-blue tracking-tight leading-none mb-1">Reports</h1>
|
||||||
|
<p class="text-gray-400 font-medium text-sm tracking-wide">Analytics for Monaco OPC 2026</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scope Bar — sticky -->
|
||||||
|
<div class="scope-bar px-8 py-3 flex items-center gap-4">
|
||||||
|
<div class="flex items-center gap-2 text-sm font-semibold text-gray-500">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Program:
|
||||||
|
</div>
|
||||||
|
<select class="text-sm font-bold text-brand-blue bg-transparent border-none outline-none">
|
||||||
|
<option>Monaco OPC 2026</option>
|
||||||
|
<option>Monaco OPC 2025</option>
|
||||||
|
</select>
|
||||||
|
<div class="w-px h-4 bg-gray-200"></div>
|
||||||
|
<div class="flex items-center gap-2 text-sm font-semibold text-gray-500">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
Round:
|
||||||
|
</div>
|
||||||
|
<select class="text-sm font-bold text-brand-blue bg-transparent border-none outline-none">
|
||||||
|
<option>All Rounds</option>
|
||||||
|
<option>Intake</option>
|
||||||
|
<option>Filtering</option>
|
||||||
|
<option>Evaluation</option>
|
||||||
|
</select>
|
||||||
|
<div class="w-px h-4 bg-gray-200"></div>
|
||||||
|
<div class="text-[11px] text-gray-400 font-medium">Last updated: Feb 21, 2026 at 09:44</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="border-b border-gray-200 px-8 bg-white flex items-center">
|
||||||
|
<div class="report-tab active">Overview</div>
|
||||||
|
<div class="report-tab">Jury Analytics</div>
|
||||||
|
<div class="report-tab">Project Analytics</div>
|
||||||
|
<div class="report-tab">Cross-Stage</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Overview content -->
|
||||||
|
<div class="px-8 py-8 space-y-8">
|
||||||
|
|
||||||
|
<!-- 1. Editorial stats strip — flowing statement -->
|
||||||
|
<div class="card p-8 section-animate-1">
|
||||||
|
<div class="text-[10.5px] font-black uppercase tracking-[0.12em] text-gray-400 mb-6">Program at a Glance</div>
|
||||||
|
<div class="flex items-end gap-0 flex-wrap">
|
||||||
|
<!-- Programs -->
|
||||||
|
<div class="flex flex-col items-start pr-10 border-r border-gray-100">
|
||||||
|
<div class="stat-flow-number count-animate" style="animation-delay:0.1s">2</div>
|
||||||
|
<div class="stat-flow-label mt-1">Programs</div>
|
||||||
|
</div>
|
||||||
|
<!-- Projects — biggest -->
|
||||||
|
<div class="flex flex-col items-start px-10 border-r border-gray-100">
|
||||||
|
<div class="stat-flow-number count-animate" style="font-size:4rem;animation-delay:0.2s">142</div>
|
||||||
|
<div class="stat-flow-label mt-1">Projects Submitted</div>
|
||||||
|
</div>
|
||||||
|
<!-- Jury -->
|
||||||
|
<div class="flex flex-col items-start px-10 border-r border-gray-100">
|
||||||
|
<div class="stat-flow-number count-animate" style="animation-delay:0.3s">8</div>
|
||||||
|
<div class="stat-flow-label mt-1">Jury Members</div>
|
||||||
|
</div>
|
||||||
|
<!-- Evaluations — star metric -->
|
||||||
|
<div class="flex flex-col items-start px-10 border-r border-gray-100">
|
||||||
|
<div class="count-animate" style="animation-delay:0.4s">
|
||||||
|
<span class="stat-flow-number" style="font-size:4.5rem;color:#de0f1e">312</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-flow-label mt-1" style="color:#de0f1e">Evaluations Cast</div>
|
||||||
|
</div>
|
||||||
|
<!-- Completion rate -->
|
||||||
|
<div class="flex flex-col items-start pl-10">
|
||||||
|
<div class="stat-flow-number count-animate" style="animation-delay:0.5s">87<span style="font-size:1.5rem;color:#9ca3af">%</span></div>
|
||||||
|
<div class="stat-flow-label mt-1">Completion Rate</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. Row: Donut chart + Score Distribution -->
|
||||||
|
<div class="grid grid-cols-2 gap-6 section-animate-2">
|
||||||
|
|
||||||
|
<!-- Status Breakdown — donut -->
|
||||||
|
<div class="card p-8">
|
||||||
|
<div class="text-[10.5px] font-black uppercase tracking-[0.12em] text-gray-400 mb-6">Project Status Breakdown</div>
|
||||||
|
<div class="flex items-center gap-10">
|
||||||
|
<!-- Donut -->
|
||||||
|
<div class="relative flex-shrink-0">
|
||||||
|
<div class="donut-ring">
|
||||||
|
<div class="donut-hole">
|
||||||
|
<div class="text-4xl font-black text-brand-blue leading-none">142</div>
|
||||||
|
<div class="text-[10px] font-semibold text-gray-400 mt-1">Total</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Legend -->
|
||||||
|
<div class="flex-1 space-y-3">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-3 h-3 rounded-sm flex-shrink-0" style="background:#10b981"></div>
|
||||||
|
<span class="text-sm font-semibold text-gray-700">Passed</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<span class="text-lg font-black text-brand-blue">54</span>
|
||||||
|
<span class="text-xs text-gray-400 font-semibold ml-1">38%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-3 h-3 rounded-sm flex-shrink-0" style="background:#3b82f6"></div>
|
||||||
|
<span class="text-sm font-semibold text-gray-700">In Progress</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<span class="text-lg font-black text-brand-blue">29</span>
|
||||||
|
<span class="text-xs text-gray-400 font-semibold ml-1">20%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-3 h-3 rounded-sm flex-shrink-0 bg-gray-200"></div>
|
||||||
|
<span class="text-sm font-semibold text-gray-700">Pending</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<span class="text-lg font-black text-brand-blue">21</span>
|
||||||
|
<span class="text-xs text-gray-400 font-semibold ml-1">15%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-3 h-3 rounded-sm flex-shrink-0" style="background:#ef4444"></div>
|
||||||
|
<span class="text-sm font-semibold text-gray-700">Rejected</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<span class="text-lg font-black text-brand-blue">38</span>
|
||||||
|
<span class="text-xs text-gray-400 font-semibold ml-1">27%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Score Distribution — bold bars with gradient tones -->
|
||||||
|
<div class="card p-8">
|
||||||
|
<div class="text-[10.5px] font-black uppercase tracking-[0.12em] text-gray-400 mb-2">Score Distribution</div>
|
||||||
|
<div class="text-xs text-gray-400 font-medium mb-6">Mean: <strong class="text-brand-blue">7.2</strong> · Median: <strong class="text-brand-blue">7.5</strong> · Std Dev: <strong class="text-brand-blue">1.8</strong></div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- 0-2 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1.5">
|
||||||
|
<span class="text-xs font-bold text-gray-500">0 – 2</span>
|
||||||
|
<span class="text-xs font-semibold text-gray-400">4 projects</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-track h-10">
|
||||||
|
<div class="score-bar-fill h-10" style="width:6%;background:linear-gradient(90deg,#ef4444,#f87171)">
|
||||||
|
<span class="text-[10px]">4</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 2-4 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1.5">
|
||||||
|
<span class="text-xs font-bold text-gray-500">2 – 4</span>
|
||||||
|
<span class="text-xs font-semibold text-gray-400">12 projects</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-track h-10">
|
||||||
|
<div class="score-bar-fill h-10" style="width:13%;background:linear-gradient(90deg,#f97316,#fb923c)">
|
||||||
|
<span class="text-[10px]">12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 4-6 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1.5">
|
||||||
|
<span class="text-xs font-bold text-gray-500">4 – 6</span>
|
||||||
|
<span class="text-xs font-semibold text-gray-400">22 projects</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-track h-10">
|
||||||
|
<div class="score-bar-fill h-10" style="width:28%;background:linear-gradient(90deg,#eab308,#facc15)">
|
||||||
|
<span class="text-[10px]">22</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 6-8 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1.5">
|
||||||
|
<span class="text-xs font-bold text-gray-500">6 – 8</span>
|
||||||
|
<span class="text-xs font-semibold text-gray-400">68 projects</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-track h-10">
|
||||||
|
<div class="score-bar-fill h-10" style="width:75%;background:linear-gradient(90deg,#0a5a7c,#3b82f6)">
|
||||||
|
<span>68</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 8-10 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1.5">
|
||||||
|
<span class="text-xs font-bold text-gray-500">8 – 10</span>
|
||||||
|
<span class="text-xs font-semibold text-gray-400">36 projects</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-track h-10">
|
||||||
|
<div class="score-bar-fill h-10" style="width:45%;background:linear-gradient(90deg,#053d57,#10b981)">
|
||||||
|
<span>36</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3. Evaluation Timeline — SVG line chart -->
|
||||||
|
<div class="card p-8 section-animate-3">
|
||||||
|
<div class="flex items-start justify-between mb-2">
|
||||||
|
<div>
|
||||||
|
<div class="text-[10.5px] font-black uppercase tracking-[0.12em] text-gray-400 mb-1">Evaluation Timeline</div>
|
||||||
|
<div class="text-xs text-gray-400 font-medium">Cumulative evaluations · <strong class="text-brand-blue">87 of 142</strong> completed</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 text-xs text-gray-400 font-semibold">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-0.5" style="background:#053d57"></div>
|
||||||
|
<span>Cumulative</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-6 h-0.5 border-t-2 border-dashed border-gray-300"></div>
|
||||||
|
<span>Target</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 700 180" class="w-full mt-4" style="height:180px">
|
||||||
|
<!-- Grid lines -->
|
||||||
|
<line x1="60" y1="20" x2="680" y2="20" stroke="#f3f4f6" stroke-width="1"/>
|
||||||
|
<line x1="60" y1="55" x2="680" y2="55" stroke="#f3f4f6" stroke-width="1"/>
|
||||||
|
<line x1="60" y1="90" x2="680" y2="90" stroke="#f3f4f6" stroke-width="1"/>
|
||||||
|
<line x1="60" y1="125" x2="680" y2="125" stroke="#f3f4f6" stroke-width="1"/>
|
||||||
|
<line x1="60" y1="160" x2="680" y2="160" stroke="#e5e7eb" stroke-width="1"/>
|
||||||
|
<!-- Y axis labels -->
|
||||||
|
<text x="50" y="24" text-anchor="end" fill="#9ca3af" font-size="10" font-family="Montserrat" font-weight="600">80</text>
|
||||||
|
<text x="50" y="59" text-anchor="end" fill="#9ca3af" font-size="10" font-family="Montserrat" font-weight="600">60</text>
|
||||||
|
<text x="50" y="94" text-anchor="end" fill="#9ca3af" font-size="10" font-family="Montserrat" font-weight="600">40</text>
|
||||||
|
<text x="50" y="129" text-anchor="end" fill="#9ca3af" font-size="10" font-family="Montserrat" font-weight="600">20</text>
|
||||||
|
<text x="50" y="164" text-anchor="end" fill="#9ca3af" font-size="10" font-family="Montserrat" font-weight="600">0</text>
|
||||||
|
<!-- X axis labels -->
|
||||||
|
<text x="100" y="175" text-anchor="middle" fill="#9ca3af" font-size="10" font-family="Montserrat" font-weight="600">Mar 1</text>
|
||||||
|
<text x="228" y="175" text-anchor="middle" fill="#9ca3af" font-size="10" font-family="Montserrat" font-weight="600">Mar 5</text>
|
||||||
|
<text x="356" y="175" text-anchor="middle" fill="#9ca3af" font-size="10" font-family="Montserrat" font-weight="600">Mar 10</text>
|
||||||
|
<text x="484" y="175" text-anchor="middle" fill="#9ca3af" font-size="10" font-family="Montserrat" font-weight="600">Mar 15</text>
|
||||||
|
<text x="612" y="175" text-anchor="middle" fill="#9ca3af" font-size="10" font-family="Montserrat" font-weight="600">Mar 20</text>
|
||||||
|
<!-- Dashed target line -->
|
||||||
|
<line x1="60" y1="33" x2="680" y2="33" stroke="#e5e7eb" stroke-width="1.5" stroke-dasharray="6,4"/>
|
||||||
|
<!-- Area fill (gradient) -->
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0%" stop-color="#053d57" stop-opacity="0.15"/>
|
||||||
|
<stop offset="100%" stop-color="#053d57" stop-opacity="0"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path d="M100,155 C130,145 160,135 200,120 C240,105 270,85 310,65 C350,48 390,38 440,33 C480,30 520,35 560,42 C590,47 620,52 660,55 L660,160 L100,160 Z"
|
||||||
|
fill="url(#areaGrad)" class="chart-area"/>
|
||||||
|
<!-- Line path — smooth -->
|
||||||
|
<path d="M100,155 C130,145 160,135 200,120 C240,105 270,85 310,65 C350,48 390,38 440,33 C480,30 520,35 560,42 C590,47 620,52 660,55"
|
||||||
|
fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" class="chart-line"/>
|
||||||
|
<!-- Data points -->
|
||||||
|
<circle cx="100" cy="155" r="4" fill="white" stroke="#053d57" stroke-width="2.5"/>
|
||||||
|
<circle cx="200" cy="120" r="4" fill="white" stroke="#053d57" stroke-width="2.5"/>
|
||||||
|
<circle cx="310" cy="65" r="4" fill="white" stroke="#053d57" stroke-width="2.5"/>
|
||||||
|
<circle cx="440" cy="33" r="5" fill="#de0f1e" stroke="white" stroke-width="2"/>
|
||||||
|
<circle cx="560" cy="42" r="4" fill="white" stroke="#053d57" stroke-width="2.5"/>
|
||||||
|
<circle cx="660" cy="55" r="4" fill="white" stroke="#053d57" stroke-width="2.5"/>
|
||||||
|
<!-- Peak tooltip -->
|
||||||
|
<rect x="418" y="10" width="56" height="20" rx="5" fill="#053d57"/>
|
||||||
|
<text x="446" y="24" text-anchor="middle" fill="white" font-size="10" font-family="Montserrat" font-weight="700">Peak 87</text>
|
||||||
|
<line x1="446" y1="30" x2="440" y2="33" stroke="#053d57" stroke-width="1.5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4. Criteria Scores + Two-column bottom -->
|
||||||
|
<div class="grid grid-cols-2 gap-6 section-animate-4">
|
||||||
|
|
||||||
|
<!-- Criteria Scores -->
|
||||||
|
<div class="card p-8">
|
||||||
|
<div class="text-[10.5px] font-black uppercase tracking-[0.12em] text-gray-400 mb-6">Average Criteria Scores</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- Innovation 7.8 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1.5">
|
||||||
|
<span class="text-xs font-bold text-gray-600">Innovation</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-track" style="height:32px">
|
||||||
|
<div class="criteria-bar-fill" style="width:78%;background:linear-gradient(90deg,#053d57,#0a5a7c)">7.8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Impact 8.1 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1.5">
|
||||||
|
<span class="text-xs font-bold text-gray-600">Impact</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-track" style="height:32px">
|
||||||
|
<div class="criteria-bar-fill" style="width:81%;background:linear-gradient(90deg,#053d57,#10b981)">8.1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Feasibility 6.9 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1.5">
|
||||||
|
<span class="text-xs font-bold text-gray-600">Feasibility</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-track" style="height:32px">
|
||||||
|
<div class="criteria-bar-fill" style="width:69%;background:linear-gradient(90deg,#557f8c,#3d6b79)">6.9</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Team 7.4 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1.5">
|
||||||
|
<span class="text-xs font-bold text-gray-600">Team Quality</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-track" style="height:32px">
|
||||||
|
<div class="criteria-bar-fill" style="width:74%;background:linear-gradient(90deg,#053d57,#0a5a7c)">7.4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Sustainability 7.2 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center mb-1.5">
|
||||||
|
<span class="text-xs font-bold text-gray-600">Sustainability</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-track" style="height:32px">
|
||||||
|
<div class="criteria-bar-fill" style="width:72%;background:linear-gradient(90deg,#059669,#10b981)">7.2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right column: Top Projects + Juror Workload -->
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Top Projects -->
|
||||||
|
<div class="card p-6">
|
||||||
|
<div class="text-[10.5px] font-black uppercase tracking-[0.12em] text-gray-400 mb-4">Top Ranked Projects</div>
|
||||||
|
<table class="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr class="border-b border-gray-100">
|
||||||
|
<th class="pb-2 text-left text-[10px] font-black uppercase tracking-widest text-gray-400 w-8">#</th>
|
||||||
|
<th class="pb-2 text-left text-[10px] font-black uppercase tracking-widest text-gray-400">Project</th>
|
||||||
|
<th class="pb-2 text-right text-[10px] font-black uppercase tracking-widest text-gray-400">Score</th>
|
||||||
|
<th class="pb-2 text-right text-[10px] font-black uppercase tracking-widest text-gray-400">Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-gray-50">
|
||||||
|
<tr class="proj-row">
|
||||||
|
<td class="py-2.5 text-xs font-black text-brand-red">1</td>
|
||||||
|
<td class="py-2.5 text-xs font-semibold text-gray-700">Coral AI Monitoring</td>
|
||||||
|
<td class="py-2.5 text-right font-black text-brand-blue text-sm">9.2</td>
|
||||||
|
<td class="py-2.5 text-right"><span class="text-[10px] font-bold px-2 py-0.5 rounded-md" style="background:#dcfce7;color:#16a34a">Passed</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="proj-row">
|
||||||
|
<td class="py-2.5 text-xs font-black text-gray-400">2</td>
|
||||||
|
<td class="py-2.5 text-xs font-semibold text-gray-700">Deep Ocean Mapping</td>
|
||||||
|
<td class="py-2.5 text-right font-black text-brand-blue text-sm">8.9</td>
|
||||||
|
<td class="py-2.5 text-right"><span class="text-[10px] font-bold px-2 py-0.5 rounded-md" style="background:#dcfce7;color:#16a34a">Passed</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="proj-row">
|
||||||
|
<td class="py-2.5 text-xs font-black text-gray-400">3</td>
|
||||||
|
<td class="py-2.5 text-xs font-semibold text-gray-700">Microplastic Sensor Net</td>
|
||||||
|
<td class="py-2.5 text-right font-black text-brand-blue text-sm">8.7</td>
|
||||||
|
<td class="py-2.5 text-right"><span class="text-[10px] font-bold px-2 py-0.5 rounded-md" style="background:#dbeafe;color:#1e40af">In Progress</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="proj-row">
|
||||||
|
<td class="py-2.5 text-xs font-black text-gray-400">4</td>
|
||||||
|
<td class="py-2.5 text-xs font-semibold text-gray-700">Tidal Energy Farms</td>
|
||||||
|
<td class="py-2.5 text-right font-black text-brand-blue text-sm">8.4</td>
|
||||||
|
<td class="py-2.5 text-right"><span class="text-[10px] font-bold px-2 py-0.5 rounded-md" style="background:#dcfce7;color:#16a34a">Passed</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="proj-row">
|
||||||
|
<td class="py-2.5 text-xs font-black text-gray-400">5</td>
|
||||||
|
<td class="py-2.5 text-xs font-semibold text-gray-700">Kelp Forest Restoration</td>
|
||||||
|
<td class="py-2.5 text-right font-black text-brand-blue text-sm">8.1</td>
|
||||||
|
<td class="py-2.5 text-right"><span class="text-[10px] font-bold px-2 py-0.5 rounded-md" style="background:#dcfce7;color:#16a34a">Passed</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Jury Workload -->
|
||||||
|
<div class="card p-6">
|
||||||
|
<div class="text-[10.5px] font-black uppercase tracking-[0.12em] text-gray-400 mb-4">Jury Workload</div>
|
||||||
|
<div class="space-y-2.5">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-xs font-semibold text-gray-600 mb-1">
|
||||||
|
<span>Dr. S. Martin</span><span class="text-gray-400">12/12</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-100 rounded h-5"><div class="juror-bar" style="width:100%">100%</div></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-xs font-semibold text-gray-600 mb-1">
|
||||||
|
<span>Prof. J. Dupont</span><span class="text-gray-400">15/15</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-100 rounded h-5"><div class="juror-bar" style="width:100%">100%</div></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-xs font-semibold text-gray-600 mb-1">
|
||||||
|
<span>Dr. Y. Tanaka</span><span class="text-gray-400">10/12</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-100 rounded h-5"><div class="juror-bar" style="width:83%">83%</div></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-xs font-semibold text-gray-600 mb-1">
|
||||||
|
<span>R. Fisher</span><span class="text-gray-400">8/15</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-100 rounded h-5"><div class="juror-bar" style="width:53%;background:linear-gradient(90deg,#f59e0b,#d97706)">53%</div></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between text-xs font-semibold text-gray-600 mb-1">
|
||||||
|
<span>M. Garcia</span><span class="text-gray-400">0/10</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-100 rounded h-5"><div class="juror-bar" style="width:2%;background:linear-gradient(90deg,#ef4444,#dc2626)"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- end px-8 py-8 -->
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
690
prototypes/admin-redesign-v2/07-sidebar-states.html
Normal file
690
prototypes/admin-redesign-v2/07-sidebar-states.html
Normal file
@@ -0,0 +1,690 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin v2 — Sidebar States Component Reference</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
body { background: #f4f6f9; }
|
||||||
|
|
||||||
|
/* --- WHITE SIDEBAR BASE --- */
|
||||||
|
.sb {
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||||
|
border: 1px solid #e8edf2;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 20px rgba(5,61,87,0.07), 0 1px 4px rgba(0,0,0,0.04);
|
||||||
|
position: relative;
|
||||||
|
height: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Premium accent line on left edge — red→blue gradient */
|
||||||
|
.sb-accent-line {
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: linear-gradient(180deg, #de0f1e 0%, #053d57 50%, transparent 100%);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
/* Teal variant accent line for Program Admin */
|
||||||
|
.sb-accent-line-teal {
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: linear-gradient(180deg, #557f8c 0%, #3d6b79 50%, transparent 100%);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nav items */
|
||||||
|
.nb-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 9px 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #6b7280;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
transition: background 0.15s ease, color 0.15s ease;
|
||||||
|
}
|
||||||
|
.nb-item:hover {
|
||||||
|
background: rgba(5,61,87,0.06);
|
||||||
|
color: #053d57;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active nav item — brand-blue bg, white text, red 3px left bar */
|
||||||
|
.nb-active {
|
||||||
|
background: #053d57 !important;
|
||||||
|
color: white !important;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.nb-active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: #de0f1e;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Teal active nav item — for Program Admin */
|
||||||
|
.nb-active-teal {
|
||||||
|
background: #3d6b79 !important;
|
||||||
|
color: white !important;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.nb-active-teal::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0;
|
||||||
|
width: 3px;
|
||||||
|
background: #557f8c;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section label */
|
||||||
|
.nb-section-label {
|
||||||
|
font-size: 9.5px;
|
||||||
|
font-weight: 900;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: #9ca3af;
|
||||||
|
padding: 14px 12px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Edition selector button */
|
||||||
|
.edition-btn {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
}
|
||||||
|
.edition-btn:hover { background: rgba(5,61,87,0.06); }
|
||||||
|
|
||||||
|
/* User profile footer */
|
||||||
|
.sb-profile {
|
||||||
|
border-top: 1px solid rgba(0,0,0,0.06);
|
||||||
|
padding: 12px 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Avatars */
|
||||||
|
.avatar {
|
||||||
|
width: 32px; height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 11px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.av-red { background: linear-gradient(135deg, #de0f1e, #b00d18); color: white; }
|
||||||
|
.av-blue { background: linear-gradient(135deg, #053d57, #0a5a7c); color: white; }
|
||||||
|
.av-teal { background: linear-gradient(135deg, #557f8c, #3d6b79); color: white; }
|
||||||
|
|
||||||
|
/* Notification dot pulse */
|
||||||
|
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||||
|
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
|
||||||
|
|
||||||
|
/* Edition dropdown overlay */
|
||||||
|
.edition-dropdown {
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.ed-opt {
|
||||||
|
padding: 9px 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 9px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 11px;
|
||||||
|
transition: background 0.12s;
|
||||||
|
}
|
||||||
|
.ed-opt:hover { background: #f8fafc; }
|
||||||
|
.ed-opt.active-ed { background: rgba(5,61,87,0.05); }
|
||||||
|
|
||||||
|
/* State card label badge */
|
||||||
|
.state-label {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: #053d57;
|
||||||
|
background: rgba(5,61,87,0.08);
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover demo highlight — shows on hover items for State 1 showcase */
|
||||||
|
.demo-hover {
|
||||||
|
background: rgba(5,61,87,0.06) !important;
|
||||||
|
color: #053d57 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Collapsed sidebar icon button */
|
||||||
|
.icon-btn {
|
||||||
|
width: 40px; height: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.icon-btn:hover { background: rgba(5,61,87,0.06); }
|
||||||
|
.icon-btn-active {
|
||||||
|
background: #053d57 !important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.icon-btn-active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: -2px; top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 3px; height: 20px;
|
||||||
|
background: #de0f1e;
|
||||||
|
border-radius: 2px 0 0 2px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Page header -->
|
||||||
|
<div class="max-w-screen-2xl mx-auto px-10 pt-10 pb-6">
|
||||||
|
<div class="flex items-end justify-between mb-2">
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-black uppercase tracking-[0.15em] text-gray-400 mb-2">Component Reference</div>
|
||||||
|
<h1 class="text-3xl font-black text-gray-800 tracking-tight">Sidebar States</h1>
|
||||||
|
<p class="text-sm text-gray-500 font-medium mt-1">All sidebar variants for MOPC Admin v2 · White sidebar design system reference</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-400 font-semibold border border-gray-200 bg-white rounded-xl px-4 py-2">v2.1 · Feb 2026</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 5-column grid of sidebar state cards -->
|
||||||
|
<div class="max-w-screen-2xl mx-auto px-10 pb-10 grid grid-cols-5 gap-6 items-start">
|
||||||
|
|
||||||
|
<!-- ================================================================
|
||||||
|
STATE 1: Default — white sidebar, no active item
|
||||||
|
================================================================ -->
|
||||||
|
<div>
|
||||||
|
<div class="state-label">1 · Default</div>
|
||||||
|
<p class="text-[10px] text-gray-400 font-medium mb-3">White sidebar, no active nav item. "Reports" shows hover state for reference.</p>
|
||||||
|
<div class="sb" style="width:220px">
|
||||||
|
<div class="sb-accent-line"></div>
|
||||||
|
|
||||||
|
<!-- Logo row -->
|
||||||
|
<div class="flex items-center justify-between px-4 py-3.5 border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style="background:linear-gradient(135deg,#053d57,#0a5a7c);box-shadow:0 3px 10px rgba(5,61,87,0.28)">
|
||||||
|
<span class="text-white font-black text-xs">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-black text-brand-blue leading-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[9px] text-gray-400 font-semibold uppercase tracking-wide">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||||
|
<span class="absolute top-0.5 right-0.5 w-1.5 h-1.5 bg-brand-red rounded-full pulse-dot"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition selector -->
|
||||||
|
<div class="px-3 py-2.5 border-b border-gray-100">
|
||||||
|
<button class="edition-btn">
|
||||||
|
<div class="w-6 h-6 rounded-lg bg-brand-blue/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[11px] font-bold text-brand-blue">2026 Edition</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav — no active item; Reports shown in hover state -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-2.5 py-3 space-y-0.5">
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Dashboard</div>
|
||||||
|
<div class="nb-section-label">Competition</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Rounds</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Awards</div>
|
||||||
|
<div class="nb-section-label">People</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>Projects</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Members</div>
|
||||||
|
<div class="nb-section-label">Insights</div>
|
||||||
|
<!-- Reports shown in hover state to demonstrate interaction -->
|
||||||
|
<div class="nb-item demo-hover"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>Messages</div>
|
||||||
|
<div class="nb-section-label">Administration</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Manage Editions</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>Settings</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="sb-profile">
|
||||||
|
<div class="avatar av-red">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-bold text-brand-blue truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#d1d5db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================================================================
|
||||||
|
STATE 2: Rounds Active — brand-blue bg, white text, red left bar
|
||||||
|
================================================================ -->
|
||||||
|
<div>
|
||||||
|
<div class="state-label">2 · Rounds Active</div>
|
||||||
|
<p class="text-[10px] text-gray-400 font-medium mb-3">White sidebar, Rounds item active: bg #053d57, white text, 3px red left bar.</p>
|
||||||
|
<div class="sb" style="width:220px">
|
||||||
|
<div class="sb-accent-line"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between px-4 py-3.5 border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="w-8 h-8 rounded-xl flex items-center justify-center" style="background:linear-gradient(135deg,#053d57,#0a5a7c);box-shadow:0 3px 10px rgba(5,61,87,0.28)">
|
||||||
|
<span class="text-white font-black text-xs">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-black text-brand-blue leading-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[9px] text-gray-400 font-semibold uppercase tracking-wide">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||||
|
<span class="absolute top-0.5 right-0.5 w-1.5 h-1.5 bg-brand-red rounded-full pulse-dot"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-3 py-2.5 border-b border-gray-100">
|
||||||
|
<button class="edition-btn">
|
||||||
|
<div class="w-6 h-6 rounded-lg bg-brand-blue/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[11px] font-bold text-brand-blue">2026 Edition</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="flex-1 overflow-y-auto px-2.5 py-3 space-y-0.5">
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Dashboard</div>
|
||||||
|
<div class="nb-section-label">Competition</div>
|
||||||
|
<div class="nb-item nb-active"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Rounds</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Awards</div>
|
||||||
|
<div class="nb-section-label">People</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>Projects</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Members</div>
|
||||||
|
<div class="nb-section-label">Insights</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>Messages</div>
|
||||||
|
<div class="nb-section-label">Administration</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Manage Editions</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>Settings</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="sb-profile">
|
||||||
|
<div class="avatar av-red">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-bold text-brand-blue truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#d1d5db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================================================================
|
||||||
|
STATE 3: Mobile Collapsed — w-16, icons only, dot indicator
|
||||||
|
================================================================ -->
|
||||||
|
<div>
|
||||||
|
<div class="state-label">3 · Mobile Collapsed</div>
|
||||||
|
<p class="text-[10px] text-gray-400 font-medium mb-3">White sidebar collapsed to 64px icon strip. Active item (Rounds) has a red right-edge dot indicator.</p>
|
||||||
|
<div class="sb" style="width:64px">
|
||||||
|
<div class="sb-accent-line"></div>
|
||||||
|
|
||||||
|
<!-- Logo mark only -->
|
||||||
|
<div class="flex items-center justify-center py-4 border-b border-gray-100">
|
||||||
|
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background:linear-gradient(135deg,#053d57,#0a5a7c);box-shadow:0 3px 10px rgba(5,61,87,0.28)">
|
||||||
|
<span class="text-white font-black text-sm">M</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bell only -->
|
||||||
|
<div class="flex justify-center py-2.5 border-b border-gray-100">
|
||||||
|
<button class="relative p-2 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||||
|
<span class="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-brand-red rounded-full pulse-dot"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Icon nav -->
|
||||||
|
<nav class="flex-1 overflow-y-auto flex flex-col items-center py-3 space-y-1 px-3">
|
||||||
|
<!-- Dashboard — inactive -->
|
||||||
|
<div class="icon-btn">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
</div>
|
||||||
|
<div class="w-5 h-px bg-gray-100 my-0.5"></div>
|
||||||
|
<!-- Rounds — ACTIVE with red right-edge indicator -->
|
||||||
|
<div class="icon-btn icon-btn-active">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="icon-btn">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
</div>
|
||||||
|
<div class="icon-btn">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="w-5 h-px bg-gray-100 my-0.5"></div>
|
||||||
|
<div class="icon-btn">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="icon-btn">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="w-5 h-px bg-gray-100 my-0.5"></div>
|
||||||
|
<div class="icon-btn">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
</div>
|
||||||
|
<div class="icon-btn">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="w-5 h-px bg-gray-100 my-0.5"></div>
|
||||||
|
<div class="icon-btn">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Avatar only -->
|
||||||
|
<div class="flex justify-center py-3 border-t border-gray-100">
|
||||||
|
<div class="avatar av-red cursor-pointer">MP</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================================================================
|
||||||
|
STATE 4: Edition Selector Open — dropdown overlay
|
||||||
|
================================================================ -->
|
||||||
|
<div>
|
||||||
|
<div class="state-label">4 · Edition Selector Open</div>
|
||||||
|
<p class="text-[10px] text-gray-400 font-medium mb-3">White sidebar with edition dropdown overlay. Nav behind is dimmed.</p>
|
||||||
|
<div class="sb" style="width:220px">
|
||||||
|
<div class="sb-accent-line"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between px-4 py-3.5 border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="w-8 h-8 rounded-xl flex items-center justify-center" style="background:linear-gradient(135deg,#053d57,#0a5a7c);box-shadow:0 3px 10px rgba(5,61,87,0.28)">
|
||||||
|
<span class="text-white font-black text-xs">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-black text-brand-blue leading-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[9px] text-gray-400 font-semibold uppercase tracking-wide">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1 rounded-lg">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition selector — open state -->
|
||||||
|
<div class="px-3 py-2.5 border-b border-gray-100">
|
||||||
|
<!-- Trigger button in active/open state -->
|
||||||
|
<button class="edition-btn" style="background:rgba(5,61,87,0.08)">
|
||||||
|
<div class="w-6 h-6 rounded-lg flex items-center justify-center flex-shrink-0" style="background:rgba(5,61,87,0.15)">
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[11px] font-bold text-brand-blue">2026 Edition</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chevron up = open -->
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 15 12 9 18 15"/></svg>
|
||||||
|
</button>
|
||||||
|
<!-- Dropdown -->
|
||||||
|
<div class="edition-dropdown">
|
||||||
|
<div class="px-3 py-2 text-[9px] font-black uppercase tracking-widest text-gray-400 border-b border-gray-100">Switch Edition</div>
|
||||||
|
<div class="ed-opt active-ed">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-green-400 flex-shrink-0"></div>
|
||||||
|
<div>
|
||||||
|
<div class="font-bold text-brand-blue text-[11px]">Monaco OPC 2026</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Active · 142 projects</div>
|
||||||
|
</div>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="ml-auto"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="ed-opt">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-gray-300 flex-shrink-0"></div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-gray-600 text-[11px]">Monaco OPC 2025</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Archived · 128 projects</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ed-opt border-t border-gray-100">
|
||||||
|
<div class="w-2 h-2 rounded-full border-2 border-brand-red flex-shrink-0"></div>
|
||||||
|
<div class="font-bold text-[11px]" style="color:#de0f1e">+ Create New Edition</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav dimmed while dropdown is open -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-2.5 py-3 space-y-0.5" style="opacity:0.35;pointer-events:none">
|
||||||
|
<div class="nb-item nb-active"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Dashboard</div>
|
||||||
|
<div class="nb-section-label">Competition</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Rounds</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Juries</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>Projects</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="sb-profile" style="opacity:0.35">
|
||||||
|
<div class="avatar av-red">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-bold text-brand-blue truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================================================================
|
||||||
|
STATE 5: Program Admin — white sidebar, teal accent, no Administration
|
||||||
|
================================================================ -->
|
||||||
|
<div>
|
||||||
|
<div class="state-label">5 · Program Admin</div>
|
||||||
|
<p class="text-[10px] text-gray-400 font-medium mb-3">White sidebar with teal accent line. No Administration section. Active item uses teal bg.</p>
|
||||||
|
<div class="sb" style="width:220px">
|
||||||
|
<!-- Teal accent line instead of red→blue -->
|
||||||
|
<div class="sb-accent-line-teal"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between px-4 py-3.5 border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<!-- Teal gradient logo box -->
|
||||||
|
<div class="w-8 h-8 rounded-xl flex items-center justify-center" style="background:linear-gradient(135deg,#557f8c,#3d6b79);box-shadow:0 3px 10px rgba(85,127,140,0.28)">
|
||||||
|
<span class="text-white font-black text-xs">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-black leading-tight" style="color:#3d6b79">MOPC Admin</div>
|
||||||
|
<div class="text-[9px] text-gray-400 font-semibold uppercase tracking-wide">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-3 py-2.5 border-b border-gray-100">
|
||||||
|
<button class="edition-btn">
|
||||||
|
<div class="w-6 h-6 rounded-lg flex items-center justify-center flex-shrink-0" style="background:rgba(85,127,140,0.12)">
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#557f8c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[11px] font-bold leading-tight" style="color:#3d6b79">2026 Edition</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="flex-1 overflow-y-auto px-2.5 py-3 space-y-0.5">
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Dashboard</div>
|
||||||
|
<div class="nb-section-label">Competition</div>
|
||||||
|
<!-- Active with teal bg, teal left bar -->
|
||||||
|
<div class="nb-item nb-active-teal"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Rounds</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Awards</div>
|
||||||
|
<div class="nb-section-label">People</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>Projects</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Members</div>
|
||||||
|
<div class="nb-section-label">Insights</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>Messages</div>
|
||||||
|
<div class="nb-item"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>Learning Hub</div>
|
||||||
|
<!-- NO Administration section for Program Admin -->
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Anne Lemaire — Program Admin -->
|
||||||
|
<div class="sb-profile">
|
||||||
|
<div class="avatar" style="background:linear-gradient(135deg,#557f8c,#3d6b79)">AL</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-bold leading-tight truncate" style="color:#3d6b79">Anne Lemaire</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Program Admin</div>
|
||||||
|
</div>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#d1d5db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- end grid -->
|
||||||
|
|
||||||
|
<!-- Design tokens and specifications -->
|
||||||
|
<div class="max-w-screen-2xl mx-auto px-10 pb-16">
|
||||||
|
<div class="bg-white border border-gray-200 rounded-2xl p-7">
|
||||||
|
<div class="text-[10px] font-black uppercase tracking-[0.15em] text-gray-400 mb-6">Design Tokens & Specifications — White Sidebar</div>
|
||||||
|
<div class="grid grid-cols-4 gap-10">
|
||||||
|
|
||||||
|
<!-- Colors -->
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-4">Brand Colors</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex-shrink-0 border border-gray-100" style="background:linear-gradient(180deg,#ffffff,#f8fafc)"></div>
|
||||||
|
<div><div class="text-xs font-bold text-gray-700">Sidebar BG</div><div class="text-[10px] text-gray-400">#ffffff → #f8fafc gradient</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex-shrink-0" style="background:#053d57"></div>
|
||||||
|
<div><div class="text-xs font-bold text-gray-700">Brand Blue</div><div class="text-[10px] text-gray-400">#053d57 — active nav bg, logo text</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex-shrink-0" style="background:#de0f1e"></div>
|
||||||
|
<div><div class="text-xs font-bold text-gray-700">Brand Red</div><div class="text-[10px] text-gray-400">#de0f1e — active left bar, accent top</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex-shrink-0" style="background:#557f8c"></div>
|
||||||
|
<div><div class="text-xs font-bold text-gray-700">Brand Teal</div><div class="text-[10px] text-gray-400">#557f8c — Program Admin accent</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-lg flex-shrink-0" style="background:#e8edf2"></div>
|
||||||
|
<div><div class="text-xs font-bold text-gray-700">Border</div><div class="text-[10px] text-gray-400">#e8edf2 — sidebar right border</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Typography -->
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-4">Typography</div>
|
||||||
|
<div class="space-y-2.5">
|
||||||
|
<div><span class="font-black text-sm text-gray-700">Montserrat 900</span><div class="text-[10px] text-gray-400">Page headings, brand logo "M"</div></div>
|
||||||
|
<div><span class="font-bold text-sm text-gray-700">Montserrat 700</span><div class="text-[10px] text-gray-400">Active nav items, logo text, user name</div></div>
|
||||||
|
<div><span class="font-semibold text-sm text-gray-700">Montserrat 600</span><div class="text-[10px] text-gray-400">Edition label, Control Panel subtitle</div></div>
|
||||||
|
<div><span class="font-medium text-sm text-gray-700">Montserrat 500</span><div class="text-[10px] text-gray-400">Inactive nav items (13px)</div></div>
|
||||||
|
<div><span class="text-[9.5px] font-black uppercase tracking-[0.12em] text-gray-400">Section Labels · 9.5px Black uppercase</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dimensions -->
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-4">Dimensions</div>
|
||||||
|
<div class="space-y-2 text-xs">
|
||||||
|
<div class="flex justify-between gap-2"><span class="font-semibold text-gray-600">Sidebar width (full)</span><span class="text-gray-400">256px</span></div>
|
||||||
|
<div class="flex justify-between gap-2"><span class="font-semibold text-gray-600">Sidebar width (collapsed)</span><span class="text-gray-400">64px</span></div>
|
||||||
|
<div class="flex justify-between gap-2"><span class="font-semibold text-gray-600">Logo area height</span><span class="text-gray-400">56px</span></div>
|
||||||
|
<div class="flex justify-between gap-2"><span class="font-semibold text-gray-600">Nav item height</span><span class="text-gray-400">38px</span></div>
|
||||||
|
<div class="flex justify-between gap-2"><span class="font-semibold text-gray-600">Nav item radius</span><span class="text-gray-400">10px</span></div>
|
||||||
|
<div class="flex justify-between gap-2"><span class="font-semibold text-gray-600">Active indicator bar</span><span class="text-gray-400">3px left, brand-red</span></div>
|
||||||
|
<div class="flex justify-between gap-2"><span class="font-semibold text-gray-600">Sidebar accent line</span><span class="text-gray-400">3px, red→blue gradient</span></div>
|
||||||
|
<div class="flex justify-between gap-2"><span class="font-semibold text-gray-600">Border right</span><span class="text-gray-400">1px solid #e8edf2</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- State behaviors -->
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-4">State Behaviors</div>
|
||||||
|
<div class="space-y-3 text-xs">
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-gray-600 mb-0.5">Active nav item</div>
|
||||||
|
<div class="text-gray-400">bg #053d57, white text (700), 3px red left bar</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-gray-600 mb-0.5">Hover nav item</div>
|
||||||
|
<div class="text-gray-400">bg rgba(5,61,87,0.06), color #053d57, 0.15s ease</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-gray-600 mb-0.5">Collapsed (mobile)</div>
|
||||||
|
<div class="text-gray-400">64px icon strip; active = blue sq + red right dot</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-gray-600 mb-0.5">Edition selector open</div>
|
||||||
|
<div class="text-gray-400">Chevron flips up; nav dims to 35% opacity</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-gray-600 mb-0.5">Program Admin theme</div>
|
||||||
|
<div class="text-gray-400">Teal accent line + logo; no Administration section</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold text-gray-600 mb-0.5">Notification dot</div>
|
||||||
|
<div class="text-gray-400">Brand red, 2s pulse animation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1378
prototypes/admin-redesign-v2/08-dashboard-overhaul.html
Normal file
1378
prototypes/admin-redesign-v2/08-dashboard-overhaul.html
Normal file
File diff suppressed because it is too large
Load Diff
672
prototypes/admin-redesign/01-dashboard.html
Normal file
672
prototypes/admin-redesign/01-dashboard.html
Normal file
@@ -0,0 +1,672 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin — Dashboard</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
body { background: #f8f9fb; }
|
||||||
|
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||||
|
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
|
||||||
|
@keyframes pipeline-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(222,15,30,0.5); } 50% { box-shadow: 0 0 0 6px rgba(222,15,30,0); } }
|
||||||
|
.pipeline-active { animation: pipeline-glow 2s ease-in-out infinite; }
|
||||||
|
.score-bar { transition: width 0.3s ease; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f8f9fb]">
|
||||||
|
|
||||||
|
<!-- ===== SIDEBAR ===== -->
|
||||||
|
<aside class="fixed top-0 left-0 h-screen w-64 bg-white border-r border-gray-200 flex flex-col z-40">
|
||||||
|
|
||||||
|
<!-- Logo Area -->
|
||||||
|
<div class="h-16 border-b border-gray-100 flex items-center justify-between px-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<!-- MOPC Logo -->
|
||||||
|
<div class="w-8 h-8 bg-brand-blue rounded-lg flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-white font-bold text-sm tracking-tight">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-700 text-brand-blue leading-tight" style="font-weight:700">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Notification Bell -->
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
|
||||||
|
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1 right-1 w-2 h-2 bg-brand-red rounded-full pulse-dot"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="border-b border-gray-100 px-4 py-3.5">
|
||||||
|
<button class="w-full flex items-center gap-3 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-2.5 transition-colors text-left">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-semibold text-brand-blue truncate">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-1">
|
||||||
|
|
||||||
|
<!-- Dashboard (standalone) -->
|
||||||
|
<a href="01-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-brand-blue text-white font-semibold text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- COMPETITION group -->
|
||||||
|
<div class="pt-4 pb-1">
|
||||||
|
<span class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Competition</span>
|
||||||
|
</div>
|
||||||
|
<a href="02-rounds-pipeline.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
||||||
|
</svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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 href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>
|
||||||
|
</svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- PEOPLE group -->
|
||||||
|
<div class="pt-4 pb-1">
|
||||||
|
<span class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">People</span>
|
||||||
|
</div>
|
||||||
|
<a href="04-projects-list.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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 href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||||
|
</svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- INSIGHTS group -->
|
||||||
|
<div class="pt-4 pb-1">
|
||||||
|
<span class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Insights</span>
|
||||||
|
</div>
|
||||||
|
<a href="05-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||||
|
</svg>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- ADMINISTRATION group -->
|
||||||
|
<div class="pt-4 pb-1 border-t border-gray-100 mt-3">
|
||||||
|
<span class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Administration</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||||||
|
</svg>
|
||||||
|
Apply Page
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>
|
||||||
|
</svg>
|
||||||
|
Audit Log
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>
|
||||||
|
</svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="border-t border-gray-100 px-4 py-3.5">
|
||||||
|
<button class="w-full flex items-center gap-3">
|
||||||
|
<div class="relative flex-shrink-0">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-brand-blue flex items-center justify-center">
|
||||||
|
<span class="text-white text-xs font-semibold">MP</span>
|
||||||
|
</div>
|
||||||
|
<span class="absolute bottom-0 right-0 w-2 h-2 bg-green-400 rounded-full border border-white"></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 text-left min-w-0">
|
||||||
|
<div class="text-xs font-semibold text-gray-800 truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="9 18 15 12 9 6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- ===== MAIN CONTENT ===== -->
|
||||||
|
<main class="ml-64 min-h-screen">
|
||||||
|
<div class="max-w-[1280px] mx-auto px-8 py-8 space-y-6">
|
||||||
|
|
||||||
|
<!-- 1. Greeting + CTA -->
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-2xl font-bold text-brand-blue tracking-tight">Good morning, Marc</h1>
|
||||||
|
<p class="text-sm text-gray-500 font-medium mt-0.5">Monaco OPC 2026 · Active round: <span class="text-brand-blue font-semibold">Evaluation</span></p>
|
||||||
|
</div>
|
||||||
|
<a href="03-round-detail.html" class="flex items-center gap-2.5 bg-brand-blue hover:bg-brand-blue-light text-white text-sm font-semibold px-5 py-2.5 rounded-xl transition-colors shadow-sm">
|
||||||
|
<span class="relative flex h-2 w-2">
|
||||||
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-300 opacity-75"></span>
|
||||||
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand-red"></span>
|
||||||
|
</span>
|
||||||
|
Evaluation Round →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. Action Required Banner -->
|
||||||
|
<div class="rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 px-5 py-4 flex items-center gap-4">
|
||||||
|
<div class="w-9 h-9 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-semibold text-amber-800">Action Required</div>
|
||||||
|
<div class="text-xs text-amber-700 font-medium mt-0.5">3 jury members haven't started evaluations · Deadline in 12 days</div>
|
||||||
|
</div>
|
||||||
|
<button class="flex-shrink-0 flex items-center gap-2 bg-white text-amber-700 border border-amber-300 hover:bg-amber-50 text-xs font-semibold px-4 py-2 rounded-lg transition-colors shadow-sm">
|
||||||
|
Send Reminders →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3. Competition Pipeline -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] px-6 py-5">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h2 class="text-sm font-bold text-brand-blue uppercase tracking-wide">Competition Pipeline</h2>
|
||||||
|
<a href="02-rounds-pipeline.html" class="text-xs text-brand-teal font-semibold hover:text-brand-blue transition-colors">All rounds →</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between relative">
|
||||||
|
<!-- Connecting line -->
|
||||||
|
<div class="absolute top-5 left-[calc(8.33%)] right-[calc(8.33%)] h-0.5 bg-gray-100 z-0"></div>
|
||||||
|
<div class="absolute top-5 left-[calc(8.33%)] w-[calc(33.33%-2%)] h-0.5 bg-brand-blue z-0"></div>
|
||||||
|
|
||||||
|
<!-- Round steps -->
|
||||||
|
<!-- Intake - done -->
|
||||||
|
<div class="flex flex-col items-center gap-2 z-10 w-16">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-brand-blue flex items-center justify-center shadow-sm">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[10px] font-semibold text-brand-blue">Intake</div>
|
||||||
|
<div class="text-[9px] text-gray-400 font-medium">Completed</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filtering - done -->
|
||||||
|
<div class="flex flex-col items-center gap-2 z-10 w-16">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-brand-blue flex items-center justify-center shadow-sm">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[10px] font-semibold text-brand-blue">Filtering</div>
|
||||||
|
<div class="text-[9px] text-gray-400 font-medium">Completed</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Evaluation - ACTIVE -->
|
||||||
|
<div class="flex flex-col items-center gap-2 z-10 w-20">
|
||||||
|
<div class="w-11 h-11 rounded-full bg-brand-red flex items-center justify-center pipeline-active shadow-md ring-4 ring-red-100">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[10px] font-bold text-brand-red uppercase tracking-wide">Evaluation</div>
|
||||||
|
<div class="text-[9px] text-brand-red font-semibold">● Active</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Submission - draft -->
|
||||||
|
<div class="flex flex-col items-center gap-2 z-10 w-16">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-white border-2 border-gray-200 flex items-center justify-center">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#d1d5db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[10px] font-medium text-gray-400">Submission</div>
|
||||||
|
<div class="text-[9px] text-gray-300 font-medium">Draft</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mentoring - draft -->
|
||||||
|
<div class="flex flex-col items-center gap-2 z-10 w-16">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-white border-2 border-gray-200 flex items-center justify-center">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#d1d5db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[10px] font-medium text-gray-400">Mentoring</div>
|
||||||
|
<div class="text-[9px] text-gray-300 font-medium">Draft</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Live Final - draft -->
|
||||||
|
<div class="flex flex-col items-center gap-2 z-10 w-16">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-white border-2 border-gray-200 flex items-center justify-center">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#d1d5db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[10px] font-medium text-gray-400">Live Final</div>
|
||||||
|
<div class="text-[9px] text-gray-300 font-medium">Draft</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4. Stats Strip -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] overflow-hidden">
|
||||||
|
<div class="grid grid-cols-4 divide-x divide-gray-100">
|
||||||
|
<div class="px-6 py-4">
|
||||||
|
<div class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide mb-1">Total Projects</div>
|
||||||
|
<div class="text-2xl font-bold text-brand-blue tabular-nums">142</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mt-1">+12 this week</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-6 py-4">
|
||||||
|
<div class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide mb-1">Eligible</div>
|
||||||
|
<div class="text-2xl font-bold text-brand-blue tabular-nums">87</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mt-1">from 142 submitted</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-6 py-4">
|
||||||
|
<div class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide mb-1">Jury Members</div>
|
||||||
|
<div class="text-2xl font-bold text-brand-blue tabular-nums">8</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mt-1">across 2 groups</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-6 py-4">
|
||||||
|
<div class="text-[10px] font-semibold text-gray-500 uppercase tracking-wide mb-1">Evaluated</div>
|
||||||
|
<div class="text-2xl font-bold text-brand-blue tabular-nums">62%</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mt-1">87 of 142 complete</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 5. Two-column layout -->
|
||||||
|
<div class="grid grid-cols-12 gap-6">
|
||||||
|
|
||||||
|
<!-- Left col (8) -->
|
||||||
|
<div class="col-span-8 space-y-6">
|
||||||
|
|
||||||
|
<!-- Active Round Panel -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] px-6 py-5">
|
||||||
|
<div class="flex items-start justify-between mb-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-sm font-bold text-brand-blue uppercase tracking-wide">Active Round</h2>
|
||||||
|
<div class="text-base font-semibold text-gray-800 mt-1">Expert Evaluation · Jury Panel A</div>
|
||||||
|
</div>
|
||||||
|
<span class="flex items-center gap-1.5 bg-green-50 text-green-700 border border-green-200 text-[10px] font-semibold px-2.5 py-1 rounded-full">
|
||||||
|
<span class="w-1.5 h-1.5 bg-green-500 rounded-full pulse-dot"></span>
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Progress bar -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<div class="flex items-center justify-between text-[10px] text-gray-500 font-medium mb-1.5">
|
||||||
|
<span>Evaluation Progress</span>
|
||||||
|
<span class="font-semibold text-brand-blue">62%</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full w-[62%] rounded-full bg-gradient-to-r from-brand-blue to-brand-teal"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mb-4">87 evaluated / 142 total · 12 days remaining</div>
|
||||||
|
|
||||||
|
<!-- Quick stats row -->
|
||||||
|
<div class="grid grid-cols-3 gap-3">
|
||||||
|
<div class="bg-gray-50 rounded-lg px-3.5 py-2.5">
|
||||||
|
<div class="text-sm font-bold text-brand-blue tabular-nums">156</div>
|
||||||
|
<div class="text-[10px] text-gray-500 font-medium mt-0.5">Assignments</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-amber-50 rounded-lg px-3.5 py-2.5">
|
||||||
|
<div class="text-sm font-bold text-amber-600 tabular-nums">5</div>
|
||||||
|
<div class="text-[10px] text-gray-500 font-medium mt-0.5">Pending COI</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-blue-50 rounded-lg px-3.5 py-2.5">
|
||||||
|
<div class="text-sm font-bold text-brand-teal tabular-nums">Mar 1–30</div>
|
||||||
|
<div class="text-[10px] text-gray-500 font-medium mt-0.5">Window</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Recent Evaluations -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] px-6 py-5">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h2 class="text-sm font-bold text-brand-blue uppercase tracking-wide">Recent Evaluations</h2>
|
||||||
|
<a href="04-projects-list.html" class="text-xs text-brand-teal font-semibold hover:text-brand-blue transition-colors">View all →</a>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- Evaluation rows -->
|
||||||
|
<div class="flex items-center gap-4 py-2 border-b border-gray-50">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-green-400 flex-shrink-0"></div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-semibold text-gray-800 truncate">OceanClean AI</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">France · Technology</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-24 h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-green-400" style="width:87%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-gray-700 tabular-nums w-8 text-right">8.7</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 py-2 border-b border-gray-50">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-green-500 flex-shrink-0"></div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-semibold text-gray-800 truncate">CoralTrack</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Australia · Biodiversity</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-24 h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-green-500" style="width:92%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-gray-700 tabular-nums w-8 text-right">9.2</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 py-2 border-b border-gray-50">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-yellow-400 flex-shrink-0"></div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-semibold text-gray-800 truncate">MicroDetect</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Germany · Research</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-24 h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-yellow-400" style="width:78%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-gray-700 tabular-nums w-8 text-right">7.8</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 py-2 border-b border-gray-50">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-orange-400 flex-shrink-0"></div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-semibold text-gray-800 truncate">BlueMonitor</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Brazil · Monitoring</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-24 h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-orange-400" style="width:69%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-gray-700 tabular-nums w-8 text-right">6.9</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4 py-2">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-green-500 flex-shrink-0"></div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-semibold text-gray-800 truncate">TidalEnergy Pro</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">United Kingdom · Energy</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-24 h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-green-500" style="width:89%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-gray-700 tabular-nums w-8 text-right">8.9</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right col (4) -->
|
||||||
|
<div class="col-span-4">
|
||||||
|
<!-- Recent Activity -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] px-5 py-5 h-full">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h2 class="text-sm font-bold text-brand-blue uppercase tracking-wide">Recent Activity</h2>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-green-400 mt-1.5 flex-shrink-0"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-800">Sophie Laurent</div>
|
||||||
|
<div class="text-[11px] text-gray-500 font-medium">Submitted evaluation for <span class="text-brand-blue">CoralTrack</span></div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mt-0.5">2 min ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-brand-blue mt-1.5 flex-shrink-0"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-800">Admin</div>
|
||||||
|
<div class="text-[11px] text-gray-500 font-medium">Assigned 12 projects to <span class="text-brand-blue">Panel B</span></div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mt-0.5">18 min ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-amber-400 mt-1.5 flex-shrink-0"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-800">Jean-Pierre M.</div>
|
||||||
|
<div class="text-[11px] text-gray-500 font-medium">Declared COI for <span class="text-brand-blue">AquaScan Tech</span></div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mt-0.5">1 hr ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-purple-400 mt-1.5 flex-shrink-0"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-800">System</div>
|
||||||
|
<div class="text-[11px] text-gray-500 font-medium">Reminder sent to <span class="text-brand-blue">3 jury members</span></div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mt-0.5">3 hrs ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-green-400 mt-1.5 flex-shrink-0"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-800">Elena Vasquez</div>
|
||||||
|
<div class="text-[11px] text-gray-500 font-medium">Submitted evaluation for <span class="text-brand-blue">OceanClean AI</span></div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mt-0.5">4 hrs ago</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-red-400 mt-1.5 flex-shrink-0"></div>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-800">Admin</div>
|
||||||
|
<div class="text-[11px] text-gray-500 font-medium">Unlocked <span class="text-brand-blue">Filtering</span> results</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium mt-0.5">Yesterday</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 6. Bottom row -->
|
||||||
|
<div class="grid grid-cols-12 gap-6 pb-8">
|
||||||
|
|
||||||
|
<!-- Geographic Distribution (8) -->
|
||||||
|
<div class="col-span-8 rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] px-6 py-5">
|
||||||
|
<div class="flex items-center justify-between mb-5">
|
||||||
|
<h2 class="text-sm font-bold text-brand-blue uppercase tracking-wide">Geographic Distribution</h2>
|
||||||
|
<span class="text-[10px] text-gray-400 font-medium">Top 8 countries</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-base w-6">🇫🇷</span>
|
||||||
|
<span class="text-xs font-medium text-gray-700 w-24">France</span>
|
||||||
|
<div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-brand-blue" style="width:38%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 tabular-nums w-6 text-right">24</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-base w-6">🇺🇸</span>
|
||||||
|
<span class="text-xs font-medium text-gray-700 w-24">United States</span>
|
||||||
|
<div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-brand-blue" style="width:28%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 tabular-nums w-6 text-right">18</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-base w-6">🇬🇧</span>
|
||||||
|
<span class="text-xs font-medium text-gray-700 w-24">United Kingdom</span>
|
||||||
|
<div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-brand-teal" style="width:21%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 tabular-nums w-6 text-right">13</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-base w-6">🇩🇪</span>
|
||||||
|
<span class="text-xs font-medium text-gray-700 w-24">Germany</span>
|
||||||
|
<div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-brand-teal" style="width:19%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 tabular-nums w-6 text-right">12</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-base w-6">🇦🇺</span>
|
||||||
|
<span class="text-xs font-medium text-gray-700 w-24">Australia</span>
|
||||||
|
<div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-brand-teal" style="width:14%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 tabular-nums w-6 text-right">9</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-base w-6">🇧🇷</span>
|
||||||
|
<span class="text-xs font-medium text-gray-700 w-24">Brazil</span>
|
||||||
|
<div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gray-300" style="width:11%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 tabular-nums w-6 text-right">7</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-base w-6">🇯🇵</span>
|
||||||
|
<span class="text-xs font-medium text-gray-700 w-24">Japan</span>
|
||||||
|
<div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gray-300" style="width:9%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 tabular-nums w-6 text-right">6</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-base w-6">🇳🇱</span>
|
||||||
|
<span class="text-xs font-medium text-gray-700 w-24">Netherlands</span>
|
||||||
|
<div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-gray-300" style="width:8%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 tabular-nums w-6 text-right">5</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Categories (4) -->
|
||||||
|
<div class="col-span-4 rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] px-5 py-5">
|
||||||
|
<h2 class="text-sm font-bold text-brand-blue uppercase tracking-wide mb-5">Categories</h2>
|
||||||
|
|
||||||
|
<!-- Project Types -->
|
||||||
|
<div class="mb-5">
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="text-xs font-medium text-gray-600">Startup</span>
|
||||||
|
<span class="text-xs font-bold text-brand-blue tabular-nums">89</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-1.5 bg-gray-100 rounded-full overflow-hidden mb-3">
|
||||||
|
<div class="h-full rounded-full bg-brand-blue" style="width:63%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<span class="text-xs font-medium text-gray-600">Business Concept</span>
|
||||||
|
<span class="text-xs font-bold text-brand-teal tabular-nums">53</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-1.5 bg-gray-100 rounded-full overflow-hidden">
|
||||||
|
<div class="h-full rounded-full bg-brand-teal" style="width:37%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Divider -->
|
||||||
|
<div class="border-t border-gray-100 my-4"></div>
|
||||||
|
|
||||||
|
<!-- Ocean Issues -->
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-semibold text-gray-400 uppercase tracking-wide mb-3">Ocean Issues</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-xs text-gray-600 font-medium">Pollution</span>
|
||||||
|
<span class="text-xs font-semibold text-gray-700 tabular-nums">38</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-xs text-gray-600 font-medium">Biodiversity</span>
|
||||||
|
<span class="text-xs font-semibold text-gray-700 tabular-nums">32</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-xs text-gray-600 font-medium">Climate</span>
|
||||||
|
<span class="text-xs font-semibold text-gray-700 tabular-nums">28</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-xs text-gray-600 font-medium">Sustainable Fishing</span>
|
||||||
|
<span class="text-xs font-semibold text-gray-700 tabular-nums">24</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-xs text-gray-600 font-medium">Coastal Erosion</span>
|
||||||
|
<span class="text-xs font-semibold text-gray-700 tabular-nums">20</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
459
prototypes/admin-redesign/02-rounds-pipeline.html
Normal file
459
prototypes/admin-redesign/02-rounds-pipeline.html
Normal file
@@ -0,0 +1,459 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin — Rounds Pipeline</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
body { background: #f8f9fb; }
|
||||||
|
@keyframes pulse-dot {
|
||||||
|
0%, 100% { opacity: 1; transform: scale(1); }
|
||||||
|
50% { opacity: 0.6; transform: scale(1.15); }
|
||||||
|
}
|
||||||
|
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
|
||||||
|
@keyframes blink {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.4; }
|
||||||
|
}
|
||||||
|
.blink { animation: blink 1.5s ease-in-out infinite; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="min-h-screen flex">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="fixed left-0 top-0 h-screen w-64 bg-white border-r border-gray-200 flex flex-col z-10">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="flex items-center justify-between px-4 h-16 border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-blue flex items-center justify-center">
|
||||||
|
<span class="text-white text-xs font-bold tracking-tight">M</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-semibold text-brand-blue tracking-tight">MOPC Admin</span>
|
||||||
|
</div>
|
||||||
|
<button class="relative text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M15 17H20L18.595 15.595A1.5 1.5 0 0118 14.5V11A6 6 0 106 11v3.5A1.5 1.5 0 015.405 15.595L4 17H9M15 17V18A3 3 0 119 18V17M15 17H9"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-brand-red rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="px-3 py-3 border-b border-gray-100">
|
||||||
|
<button class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors group">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="#557f8c" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
|
||||||
|
</svg>
|
||||||
|
<div class="flex-1 text-left">
|
||||||
|
<div class="text-xs font-semibold text-brand-blue leading-none">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400 mt-0.5">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="14" height="14" fill="none" stroke="#9ca3af" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M6 9l6 6 6-6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-5">
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Competition -->
|
||||||
|
<div>
|
||||||
|
<div class="px-3 mb-2 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80">Competition</div>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-[#053d57] text-white text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>
|
||||||
|
</svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
|
||||||
|
</svg>
|
||||||
|
Juries
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||||
|
</svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- People -->
|
||||||
|
<div>
|
||||||
|
<div class="px-3 mb-2 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80">People</div>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M3 7l9-4 9 4v10l-9 4-9-4V7z"/>
|
||||||
|
</svg>
|
||||||
|
Projects
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||||
|
</svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Insights -->
|
||||||
|
<div>
|
||||||
|
<div class="px-3 mb-2 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80">Insights</div>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M18 20V10M12 20V4M6 20v-6"/>
|
||||||
|
</svg>
|
||||||
|
Reports
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
|
||||||
|
</svg>
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2zM22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
|
||||||
|
</svg>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Administration -->
|
||||||
|
<div class="border-t border-gray-100 pt-4">
|
||||||
|
<div class="px-3 mb-2 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80">Administration</div>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
|
||||||
|
</svg>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
|
||||||
|
</svg>
|
||||||
|
Apply Page
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
|
||||||
|
</svg>
|
||||||
|
Audit Log
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
|
||||||
|
</svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="px-3 py-3 border-t border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5 px-2 py-2 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-brand-blue flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-semibold text-gray-800 truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400 truncate">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<svg width="14" height="14" fill="none" stroke="#9ca3af" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M9 18l6-6-6-6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="ml-64 flex-1 min-h-screen">
|
||||||
|
<div class="max-w-5xl mx-auto px-8 py-8">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-start justify-between mb-6">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-3 mb-1">
|
||||||
|
<h1 class="text-2xl font-bold text-brand-blue tracking-tight">Monaco OPC 2026</h1>
|
||||||
|
<button class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 text-sm text-gray-500">
|
||||||
|
<span>6 rounds</span>
|
||||||
|
<span class="text-gray-300">·</span>
|
||||||
|
<span>142 projects</span>
|
||||||
|
<span class="text-gray-300">·</span>
|
||||||
|
<span>312 assignments</span>
|
||||||
|
<span class="text-gray-300">·</span>
|
||||||
|
<span class="flex items-center gap-1.5 text-emerald-600 font-medium">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 blink inline-block"></span>
|
||||||
|
Evaluation active
|
||||||
|
</span>
|
||||||
|
<span class="text-gray-300">·</span>
|
||||||
|
<span>4 awards</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2 bg-brand-red text-white rounded-lg text-sm font-semibold hover:bg-[#c00d1a] transition-colors shadow-sm">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 5v14M5 12h14"/>
|
||||||
|
</svg>
|
||||||
|
Add Round
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Competition Tabs -->
|
||||||
|
<div class="border-b border-gray-200 mb-6">
|
||||||
|
<div class="flex gap-0">
|
||||||
|
<button class="px-5 py-3 text-sm font-semibold text-brand-blue border-b-2 border-brand-red -mb-px">
|
||||||
|
Main Competition
|
||||||
|
</button>
|
||||||
|
<button class="px-5 py-3 text-sm text-gray-400 hover:text-gray-600 transition-colors -mb-px border-b-2 border-transparent">
|
||||||
|
Side Track
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filter Pills -->
|
||||||
|
<div class="flex items-center gap-2 mb-6 flex-wrap">
|
||||||
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full bg-brand-blue text-white border border-brand-blue cursor-pointer hover:shadow-sm transition-all">All</button>
|
||||||
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-gray-200 text-gray-600 cursor-pointer hover:shadow-sm hover:border-gray-300 transition-all">Intake</button>
|
||||||
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-amber-200 text-amber-700 bg-amber-50 cursor-pointer hover:shadow-sm transition-all">Filtering</button>
|
||||||
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-blue-200 text-blue-700 bg-blue-50 cursor-pointer hover:shadow-sm transition-all">Evaluation</button>
|
||||||
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-purple-200 text-purple-700 bg-purple-50 cursor-pointer hover:shadow-sm transition-all">Submission</button>
|
||||||
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-teal-200 text-teal-700 bg-teal-50 cursor-pointer hover:shadow-sm transition-all">Mentoring</button>
|
||||||
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-red-200 text-red-700 bg-red-50 cursor-pointer hover:shadow-sm transition-all">Live Final</button>
|
||||||
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-indigo-200 text-indigo-700 bg-indigo-50 cursor-pointer hover:shadow-sm transition-all">Deliberation</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pipeline Card -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] mb-6 overflow-hidden">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
|
||||||
|
<h2 class="text-sm font-semibold text-brand-blue">Round Pipeline</h2>
|
||||||
|
<span class="text-xs text-gray-400">Main Competition</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-6 py-2">
|
||||||
|
|
||||||
|
<!-- Round 1: INTAKE (Done) -->
|
||||||
|
<div class="flex gap-0">
|
||||||
|
<!-- Connector track -->
|
||||||
|
<div class="flex flex-col items-center w-10 flex-shrink-0">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-brand-blue mt-6 flex-shrink-0 relative z-10"></div>
|
||||||
|
<div class="w-0.5 flex-1 bg-brand-blue mt-0.5"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Round content -->
|
||||||
|
<div class="flex-1 py-5 pl-3 pr-2 border-l-2 border-gray-200 ml-1 flex items-center justify-between hover:bg-gray-50/50 rounded-r-lg transition-colors cursor-pointer group">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-semibold uppercase tracking-[0.1em] text-gray-400 mb-0.5">Intake</div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">Initial Intake</div>
|
||||||
|
<div class="text-xs text-gray-400 mt-0.5">42 projects</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="bg-blue-50 text-blue-700 rounded-full px-2.5 py-0.5 text-xs font-semibold">Done</span>
|
||||||
|
<svg width="16" height="16" fill="none" stroke="#9ca3af" stroke-width="1.8" viewBox="0 0 24 24" class="group-hover:stroke-brand-blue transition-colors">
|
||||||
|
<path d="M9 18l6-6-6-6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Round 2: FILTERING (Done) -->
|
||||||
|
<div class="flex gap-0">
|
||||||
|
<div class="flex flex-col items-center w-10 flex-shrink-0">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-brand-blue flex-shrink-0 relative z-10"></div>
|
||||||
|
<div class="w-0.5 flex-1 bg-brand-blue mt-0.5"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 py-5 pl-3 pr-2 border-l-2 border-amber-200 ml-1 flex items-center justify-between hover:bg-amber-50/30 rounded-r-lg transition-colors cursor-pointer group">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-semibold uppercase tracking-[0.1em] text-amber-500 mb-0.5">Filtering</div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">AI Screening Round</div>
|
||||||
|
<div class="text-xs text-gray-400 mt-0.5">38 projects</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="bg-blue-50 text-blue-700 rounded-full px-2.5 py-0.5 text-xs font-semibold">Done</span>
|
||||||
|
<svg width="16" height="16" fill="none" stroke="#9ca3af" stroke-width="1.8" viewBox="0 0 24 24" class="group-hover:stroke-brand-blue transition-colors">
|
||||||
|
<path d="M9 18l6-6-6-6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Round 3: EVALUATION (Active) -->
|
||||||
|
<div class="flex gap-0">
|
||||||
|
<div class="flex flex-col items-center w-10 flex-shrink-0">
|
||||||
|
<!-- Active dot with pulse ring -->
|
||||||
|
<div class="relative flex-shrink-0 mt-0 z-10">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-brand-red pulse-dot" style="box-shadow: 0 0 0 4px rgba(222,15,30,0.15);"></div>
|
||||||
|
</div>
|
||||||
|
<div class="w-0.5 flex-1 bg-gray-200 mt-0.5"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 py-5 pl-3 pr-2 border-l-2 border-blue-300 ml-1 bg-blue-50/30 rounded-r-lg cursor-pointer group">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-semibold uppercase tracking-[0.1em] text-blue-600 mb-0.5">Evaluation</div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">Expert Evaluation</div>
|
||||||
|
<div class="text-xs text-gray-500 mt-0.5">32 projects</div>
|
||||||
|
<div class="text-xs text-gray-400 mt-1">Jury Panel A · 156 assignments · Mar 1–30</div>
|
||||||
|
<!-- Award branches -->
|
||||||
|
<div class="flex items-center gap-2 mt-2.5">
|
||||||
|
<span class="inline-flex items-center gap-1 bg-amber-50/60 border border-amber-200 rounded-full px-2.5 py-1 text-xs text-amber-700 font-medium">
|
||||||
|
🏆 Best Innovation
|
||||||
|
</span>
|
||||||
|
<span class="inline-flex items-center gap-1 bg-amber-50/60 border border-amber-200 rounded-full px-2.5 py-1 text-xs text-amber-700 font-medium">
|
||||||
|
🏆 Ocean Impact
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 mt-0.5">
|
||||||
|
<span class="flex items-center gap-1.5 bg-emerald-50 text-emerald-700 rounded-full px-2.5 py-0.5 text-xs font-semibold">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 blink inline-block"></span>
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
<svg width="16" height="16" fill="none" stroke="#9ca3af" stroke-width="1.8" viewBox="0 0 24 24" class="group-hover:stroke-brand-blue transition-colors">
|
||||||
|
<path d="M9 18l6-6-6-6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Round 4: SUBMISSION (Draft) -->
|
||||||
|
<div class="flex gap-0">
|
||||||
|
<div class="flex flex-col items-center w-10 flex-shrink-0">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-white border-2 border-gray-300 flex-shrink-0 relative z-10"></div>
|
||||||
|
<div class="w-0.5 flex-1 bg-gray-200 mt-0.5"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 py-5 pl-3 pr-2 border-l-2 border-purple-200 ml-1 flex items-center justify-between hover:bg-purple-50/20 rounded-r-lg transition-colors cursor-pointer group">
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-semibold uppercase tracking-[0.1em] text-purple-400 mb-0.5">Submission</div>
|
||||||
|
<div class="text-sm font-semibold text-gray-500">Document Collection</div>
|
||||||
|
<div class="text-xs text-gray-400 mt-0.5">—</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="bg-gray-100 text-gray-500 rounded-full px-2.5 py-0.5 text-xs font-semibold">Draft</span>
|
||||||
|
<svg width="16" height="16" fill="none" stroke="#9ca3af" stroke-width="1.8" viewBox="0 0 24 24" class="group-hover:stroke-brand-blue transition-colors">
|
||||||
|
<path d="M9 18l6-6-6-6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Round 5: MENTORING (Draft) -->
|
||||||
|
<div class="flex gap-0">
|
||||||
|
<div class="flex flex-col items-center w-10 flex-shrink-0">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-white border-2 border-gray-300 flex-shrink-0 relative z-10"></div>
|
||||||
|
<div class="w-0.5 flex-1 bg-gray-200 mt-0.5"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 py-5 pl-3 pr-2 border-l-2 border-teal-200 ml-1 flex items-center justify-between hover:bg-teal-50/20 rounded-r-lg transition-colors cursor-pointer group">
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-semibold uppercase tracking-[0.1em] text-teal-500 mb-0.5">Mentoring</div>
|
||||||
|
<div class="text-sm font-semibold text-gray-500">Mentorship Phase</div>
|
||||||
|
<div class="text-xs text-gray-400 mt-0.5">—</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="bg-gray-100 text-gray-500 rounded-full px-2.5 py-0.5 text-xs font-semibold">Draft</span>
|
||||||
|
<svg width="16" height="16" fill="none" stroke="#9ca3af" stroke-width="1.8" viewBox="0 0 24 24" class="group-hover:stroke-brand-blue transition-colors">
|
||||||
|
<path d="M9 18l6-6-6-6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Round 6: LIVE FINAL (Draft) -->
|
||||||
|
<div class="flex gap-0">
|
||||||
|
<div class="flex flex-col items-center w-10 flex-shrink-0">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-white border-2 border-gray-300 flex-shrink-0 relative z-10"></div>
|
||||||
|
<!-- No line below (last item) -->
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 py-5 pl-3 pr-2 border-l-2 border-red-200 ml-1 flex items-center justify-between hover:bg-red-50/20 rounded-r-lg transition-colors cursor-pointer group">
|
||||||
|
<div>
|
||||||
|
<div class="text-[10px] font-semibold uppercase tracking-[0.1em] text-red-400 mb-0.5">Live Final</div>
|
||||||
|
<div class="text-sm font-semibold text-gray-500">Live Ceremony</div>
|
||||||
|
<div class="text-xs text-gray-400 mt-0.5">—</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="bg-gray-100 text-gray-500 rounded-full px-2.5 py-0.5 text-xs font-semibold">Draft</span>
|
||||||
|
<button class="flex items-center gap-1.5 px-3 py-1.5 bg-brand-red text-white rounded-lg text-xs font-semibold hover:bg-[#c00d1a] transition-colors" onclick="event.stopPropagation()">
|
||||||
|
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="9"/><path d="M10 15l5-3-5-3v6z" fill="currentColor" stroke="none"/>
|
||||||
|
</svg>
|
||||||
|
Live Control
|
||||||
|
</button>
|
||||||
|
<svg width="16" height="16" fill="none" stroke="#9ca3af" stroke-width="1.8" viewBox="0 0 24 24" class="group-hover:stroke-brand-blue transition-colors">
|
||||||
|
<path d="M9 18l6-6-6-6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Unlinked Awards Card -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)]">
|
||||||
|
<div class="px-6 py-4 flex items-center justify-between border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="#d97706" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||||
|
</svg>
|
||||||
|
<h2 class="text-sm font-semibold text-brand-blue">Special Awards (Unlinked)</h2>
|
||||||
|
</div>
|
||||||
|
<button class="text-xs font-medium text-brand-blue hover:underline">Manage Awards</button>
|
||||||
|
</div>
|
||||||
|
<div class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="inline-flex items-center gap-2 bg-amber-50 border border-amber-200 rounded-full px-3 py-1.5 text-xs text-amber-700 font-medium">
|
||||||
|
🏆 Audience Choice
|
||||||
|
<span class="text-amber-400">·</span>
|
||||||
|
<span class="text-amber-500/80 font-normal">Parallel · 0 eligible</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
413
prototypes/admin-redesign/03-round-detail.html
Normal file
413
prototypes/admin-redesign/03-round-detail.html
Normal file
@@ -0,0 +1,413 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin — Round Detail</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
body { background: #f8f9fb; }
|
||||||
|
@keyframes blink {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.4; }
|
||||||
|
}
|
||||||
|
.blink { animation: blink 1.5s ease-in-out infinite; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="min-h-screen flex">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="fixed left-0 top-0 h-screen w-64 bg-white border-r border-gray-200 flex flex-col z-10">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="flex items-center justify-between px-4 h-16 border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="w-8 h-8 rounded-lg bg-brand-blue flex items-center justify-center">
|
||||||
|
<span class="text-white text-xs font-bold tracking-tight">M</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-semibold text-brand-blue tracking-tight">MOPC Admin</span>
|
||||||
|
</div>
|
||||||
|
<button class="relative text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M15 17H20L18.595 15.595A1.5 1.5 0 0118 14.5V11A6 6 0 106 11v3.5A1.5 1.5 0 015.405 15.595L4 17H9M15 17V18A3 3 0 119 18V17M15 17H9"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-brand-red rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="px-3 py-3 border-b border-gray-100">
|
||||||
|
<button class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors group">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="#557f8c" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
|
||||||
|
</svg>
|
||||||
|
<div class="flex-1 text-left">
|
||||||
|
<div class="text-xs font-semibold text-brand-blue leading-none">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400 mt-0.5">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="14" height="14" fill="none" stroke="#9ca3af" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M6 9l6 6 6-6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-4 space-y-5">
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Competition -->
|
||||||
|
<div>
|
||||||
|
<div class="px-3 mb-2 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80">Competition</div>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-[#053d57] text-white text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>
|
||||||
|
</svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
|
||||||
|
</svg>
|
||||||
|
Juries
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||||
|
</svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- People -->
|
||||||
|
<div>
|
||||||
|
<div class="px-3 mb-2 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80">People</div>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M3 7l9-4 9 4v10l-9 4-9-4V7z"/>
|
||||||
|
</svg>
|
||||||
|
Projects
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||||
|
</svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Insights -->
|
||||||
|
<div>
|
||||||
|
<div class="px-3 mb-2 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80">Insights</div>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M18 20V10M12 20V4M6 20v-6"/>
|
||||||
|
</svg>
|
||||||
|
Reports
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
|
||||||
|
</svg>
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2zM22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
|
||||||
|
</svg>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Administration -->
|
||||||
|
<div class="border-t border-gray-100 pt-4">
|
||||||
|
<div class="px-3 mb-2 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80">Administration</div>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>
|
||||||
|
</svg>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
|
||||||
|
</svg>
|
||||||
|
Apply Page
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
|
||||||
|
</svg>
|
||||||
|
Audit Log
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm font-medium">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
|
||||||
|
</svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="px-3 py-3 border-t border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5 px-2 py-2 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-brand-blue flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-semibold text-gray-800 truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400 truncate">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<svg width="14" height="14" fill="none" stroke="#9ca3af" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M9 18l6-6-6-6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="ml-64 flex-1 min-h-screen">
|
||||||
|
<div class="max-w-4xl mx-auto px-8 py-8">
|
||||||
|
|
||||||
|
<!-- Breadcrumbs -->
|
||||||
|
<div class="flex items-center gap-2 text-sm mb-5">
|
||||||
|
<a href="#" class="text-gray-400 hover:text-gray-600 transition-colors">Admin</a>
|
||||||
|
<span class="text-gray-300">/</span>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-gray-600 transition-colors">Rounds</a>
|
||||||
|
<span class="text-gray-300">/</span>
|
||||||
|
<span class="text-brand-blue font-semibold">Expert Evaluation</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pipeline Context Bar -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] mb-6 overflow-hidden">
|
||||||
|
<div class="flex items-stretch divide-x divide-gray-100">
|
||||||
|
<button class="flex items-center gap-2 px-5 py-3 text-sm text-gray-500 hover:text-brand-blue hover:bg-gray-50 transition-colors flex-1 justify-start">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M15 18l-6-6 6-6"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-xs font-medium">Filtering</span>
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center justify-center px-6 py-3 flex-1">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<span class="w-2 h-2 rounded-full bg-blue-500"></span>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-[10px] font-semibold uppercase tracking-[0.1em] text-blue-600">Evaluation</div>
|
||||||
|
<div class="text-sm font-semibold text-brand-blue">Expert Evaluation</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-2 px-5 py-3 text-sm text-gray-500 hover:text-brand-blue hover:bg-gray-50 transition-colors flex-1 justify-end">
|
||||||
|
<span class="text-xs font-medium">Submission</span>
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M9 18l6-6-6-6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Header Banner -->
|
||||||
|
<div class="rounded-xl bg-gradient-to-r from-brand-blue to-brand-blue-light p-6 mb-6 shadow-md">
|
||||||
|
<!-- Top row -->
|
||||||
|
<div class="flex items-start justify-between mb-3">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<h1 class="text-xl font-bold text-white tracking-tight">Expert Evaluation</h1>
|
||||||
|
<span class="flex items-center gap-1.5 bg-white/20 text-white rounded-full px-3 py-1 text-xs font-semibold border border-white/20">
|
||||||
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 blink inline-block"></span>
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<button class="flex items-center gap-2 bg-white/10 border border-white/20 hover:bg-white/20 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
|
||||||
|
Manage Round
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||||
|
<path d="M6 9l6 6 6-6"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Subtitle -->
|
||||||
|
<div class="text-white/70 text-sm mb-5">EVALUATION · Jury Panel A</div>
|
||||||
|
|
||||||
|
<!-- Stats strip -->
|
||||||
|
<div class="grid grid-cols-4 gap-4">
|
||||||
|
<div>
|
||||||
|
<div class="text-white/60 text-[10px] font-semibold uppercase tracking-[0.08em] mb-1">Projects</div>
|
||||||
|
<div class="text-white/90 text-xl font-bold">32</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-white/60 text-[10px] font-semibold uppercase tracking-[0.08em] mb-1">Jurors</div>
|
||||||
|
<div class="text-white/90 text-xl font-bold">8</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-white/60 text-[10px] font-semibold uppercase tracking-[0.08em] mb-1">Period</div>
|
||||||
|
<div class="text-white/90 text-base font-bold">Mar 1–30</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-white/60 text-[10px] font-semibold uppercase tracking-[0.08em] mb-1">Assignments</div>
|
||||||
|
<div class="text-white/90 text-xl font-bold">156</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="border-b border-gray-200 mb-6">
|
||||||
|
<div class="flex gap-0">
|
||||||
|
<button class="px-5 pb-3 text-sm font-semibold text-brand-blue border-b-2 border-brand-red -mb-px">
|
||||||
|
Overview
|
||||||
|
</button>
|
||||||
|
<button class="px-5 pb-3 text-sm text-gray-400 hover:text-gray-600 transition-colors -mb-px border-b-2 border-transparent flex items-center gap-1.5">
|
||||||
|
Projects
|
||||||
|
<span class="bg-gray-100 text-gray-600 text-[10px] font-bold rounded-full px-1.5 py-0.5">32</span>
|
||||||
|
</button>
|
||||||
|
<button class="px-5 pb-3 text-sm text-gray-400 hover:text-gray-600 transition-colors -mb-px border-b-2 border-transparent flex items-center gap-1.5">
|
||||||
|
Assignments
|
||||||
|
<span class="bg-gray-100 text-gray-600 text-[10px] font-bold rounded-full px-1.5 py-0.5">156</span>
|
||||||
|
</button>
|
||||||
|
<button class="px-5 pb-3 text-sm text-gray-400 hover:text-gray-600 transition-colors -mb-px border-b-2 border-transparent flex items-center gap-1.5">
|
||||||
|
Jury
|
||||||
|
<span class="bg-gray-100 text-gray-600 text-[10px] font-bold rounded-full px-1.5 py-0.5">8</span>
|
||||||
|
</button>
|
||||||
|
<button class="px-5 pb-3 text-sm text-gray-400 hover:text-gray-600 transition-colors -mb-px border-b-2 border-transparent">
|
||||||
|
Config
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Overview Tab Content -->
|
||||||
|
<div class="space-y-5">
|
||||||
|
|
||||||
|
<!-- Progress Card -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-sm font-semibold text-brand-blue">Evaluation Progress</h3>
|
||||||
|
<span class="text-sm font-bold text-brand-blue">62%</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-3 bg-gray-100 rounded-full overflow-hidden mb-3">
|
||||||
|
<div class="h-full rounded-full bg-gradient-to-r from-brand-blue to-brand-teal" style="width: 62%;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between text-xs text-gray-500">
|
||||||
|
<span>87 of 142 projects evaluated</span>
|
||||||
|
<span class="flex items-center gap-1.5">
|
||||||
|
<svg width="12" height="12" fill="none" stroke="#557f8c" stroke-width="2" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>
|
||||||
|
</svg>
|
||||||
|
12 days remaining
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Readiness Checklist -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6">
|
||||||
|
<h3 class="text-sm font-semibold text-brand-blue mb-4">Readiness Checklist</h3>
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
|
||||||
|
<!-- Check: Jury group assigned -->
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-gray-50/60">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-700">Jury group assigned</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Check: Evaluation form ready -->
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-gray-50/60">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-700">Evaluation form ready</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Check: Projects imported -->
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-gray-50/60">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-700">Projects imported</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Warning: Jurors need reminders -->
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-amber-50/60 border border-amber-100">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="#f59e0b" stroke-width="2" viewBox="0 0 24 24">
|
||||||
|
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-amber-700">3 jurors need reminders</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Check: Assignments generated -->
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-gray-50/60">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-700">Assignments generated</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Check: COI declarations done -->
|
||||||
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-gray-50/60">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-700">COI declarations done</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Actions -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2.5 border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/>
|
||||||
|
</svg>
|
||||||
|
Send Reminders
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2.5 border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
|
||||||
|
</svg>
|
||||||
|
Export CSV
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2.5 border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M5 3l14 9-14 9V3z"/><path d="M19 3v18"/>
|
||||||
|
</svg>
|
||||||
|
AI Shortlist
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
538
prototypes/admin-redesign/04-projects-list.html
Normal file
538
prototypes/admin-redesign/04-projects-list.html
Normal file
@@ -0,0 +1,538 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin — Projects</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
body { background: #f8f9fb; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="flex min-h-screen">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="fixed left-0 top-0 bottom-0 w-64 bg-white border-r border-gray-200 flex flex-col z-10">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="flex items-center justify-between h-16 px-4 border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="w-8 h-8 bg-brand-blue rounded-md flex items-center justify-center text-white font-bold text-sm">M</div>
|
||||||
|
<span class="font-semibold text-brand-blue text-sm">MOPC Admin</span>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" class="text-gray-500">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition selector -->
|
||||||
|
<div class="px-3 py-3 border-b border-gray-100">
|
||||||
|
<button class="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" class="text-brand-teal flex-shrink-0">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
<div class="flex-1 text-left">
|
||||||
|
<div class="text-xs font-semibold text-brand-blue">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" class="text-gray-400">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-3 space-y-4">
|
||||||
|
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Competition -->
|
||||||
|
<div>
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">Competition</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Rounds</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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.87M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Juries</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Awards</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- People -->
|
||||||
|
<div>
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">People</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-[#053d57] text-white transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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>
|
||||||
|
<span class="text-sm font-medium">Projects</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Members</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Insights -->
|
||||||
|
<div>
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">Insights</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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>
|
||||||
|
<span class="text-sm font-medium">Reports</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Messages</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Learning Hub</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Partners</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Administration -->
|
||||||
|
<div class="border-t border-gray-100 pt-4">
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">Administration</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Manage Editions</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Apply Page</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Audit Log</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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 1 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 1 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 1 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 1 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>
|
||||||
|
<span class="text-sm font-medium">Settings</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User profile -->
|
||||||
|
<div class="px-3 py-3 border-t border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5 px-2 py-2">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-brand-blue flex items-center justify-center text-white text-xs font-bold flex-shrink-0">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-semibold text-gray-800 truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<button class="p-1 rounded hover:bg-gray-100">
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" class="text-gray-400">
|
||||||
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main content -->
|
||||||
|
<main class="ml-64 flex-1 min-h-screen pb-20">
|
||||||
|
<div class="max-w-[1200px] mx-auto px-8 py-8">
|
||||||
|
|
||||||
|
<!-- Page header -->
|
||||||
|
<div class="flex items-start justify-between mb-6">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-2xl font-bold text-brand-blue tracking-tight">Projects</h1>
|
||||||
|
<p class="text-sm text-gray-500 mt-0.5">142 projects across all rounds</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<button class="flex items-center gap-1.5 px-4 py-2 rounded-lg border border-gray-200 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)]">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-brand-red text-white text-sm font-semibold hover:opacity-90 transition-opacity shadow-[0_1px_3px_rgba(0,0,0,0.12)]">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||||
|
</svg>
|
||||||
|
New Project
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status count strip -->
|
||||||
|
<div class="grid grid-cols-4 gap-px rounded-xl bg-gray-200/60 overflow-hidden mb-5 shadow-[0_1px_3px_rgba(0,0,0,0.04)]">
|
||||||
|
<div class="bg-white px-5 py-4">
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400 mb-1">Total</div>
|
||||||
|
<div class="text-2xl font-bold text-brand-blue">142</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-5 py-4">
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400 mb-1">Eligible</div>
|
||||||
|
<div class="text-2xl font-bold text-emerald-600">87</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-5 py-4">
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400 mb-1">Assigned</div>
|
||||||
|
<div class="text-2xl font-bold text-blue-600">62</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white px-5 py-4">
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400 mb-1">Rejected</div>
|
||||||
|
<div class="text-2xl font-bold text-red-600">12</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Toolbar -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] mb-4 px-3 py-3 flex items-center gap-3">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="relative flex-1 max-w-sm">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||||
|
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||||
|
</svg>
|
||||||
|
<input type="text" placeholder="Search projects..." class="w-full pl-9 pr-3 py-2 text-sm rounded-lg border border-gray-200 bg-gray-50/50 focus:outline-none focus:ring-2 focus:ring-brand-blue/20 focus:border-brand-blue/40 placeholder-gray-400">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filter dropdowns -->
|
||||||
|
<button class="flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors font-medium">
|
||||||
|
Round
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors font-medium">
|
||||||
|
Status
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors font-medium">
|
||||||
|
Category
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors font-medium">
|
||||||
|
More
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="flex-1"></div>
|
||||||
|
|
||||||
|
<!-- Right: count + view toggle -->
|
||||||
|
<span class="text-xs text-gray-400 font-medium whitespace-nowrap">Showing 24 of 142</span>
|
||||||
|
<div class="flex items-center gap-1 border border-gray-200 rounded-lg p-0.5">
|
||||||
|
<button class="p-1.5 rounded-md bg-gray-100 text-gray-600">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="p-1.5 rounded-md text-gray-400 hover:text-gray-600">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Table -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] overflow-hidden">
|
||||||
|
<!-- Table header -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_6rem_9rem_9rem_8rem_3rem] gap-x-3 items-center bg-gray-50/50 border-b border-gray-200 px-5 py-3">
|
||||||
|
<input type="checkbox" class="rounded border-gray-300 text-brand-blue">
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400 flex items-center gap-1">
|
||||||
|
Project
|
||||||
|
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="18 15 12 9 6 15"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Country</div>
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Round</div>
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Status</div>
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Score</div>
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Act</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 1: OceanClean AI -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_6rem_9rem_9rem_8rem_3rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<input type="checkbox" checked class="rounded border-gray-300 text-brand-blue">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">OceanClean AI</div>
|
||||||
|
<div class="text-xs text-gray-400">Marine Pollution</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-600">🇫🇷 France</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-blue-50 text-blue-700">Evaluation</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-blue-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">In Progress</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||||
|
<div class="h-1.5 rounded-full bg-brand-teal" style="width:87%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold tabular-nums text-brand-teal">8.7</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 2: CoralTrack -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_6rem_9rem_9rem_8rem_3rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<input type="checkbox" checked class="rounded border-gray-300 text-brand-blue">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">CoralTrack</div>
|
||||||
|
<div class="text-xs text-gray-400">Reef Monitoring</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-600">🇦🇺 Australia</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-blue-50 text-blue-700">Evaluation</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">Passed</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||||
|
<div class="h-1.5 rounded-full bg-brand-blue" style="width:92%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold tabular-nums text-brand-blue">9.2</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 3: MicroDetect -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_6rem_9rem_9rem_8rem_3rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<input type="checkbox" class="rounded border-gray-300 text-brand-blue">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">MicroDetect</div>
|
||||||
|
<div class="text-xs text-gray-400">Microplastics</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-600">🇩🇪 Germany</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-blue-50 text-blue-700">Evaluation</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-blue-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">In Progress</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||||
|
<div class="h-1.5 rounded-full bg-brand-teal" style="width:78%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold tabular-nums text-brand-teal">7.8</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 4: BlueMonitor -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_6rem_9rem_9rem_8rem_3rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<input type="checkbox" class="rounded border-gray-300 text-brand-blue">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">BlueMonitor</div>
|
||||||
|
<div class="text-xs text-gray-400">Ocean Chemistry</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-600">🇧🇷 Brazil</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-blue-50 text-blue-700">Evaluation</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-blue-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">In Progress</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||||
|
<div class="h-1.5 rounded-full bg-amber-500" style="width:69%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold tabular-nums text-amber-500">6.9</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 5: TidalEnergy Pro -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_6rem_9rem_9rem_8rem_3rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<input type="checkbox" class="rounded border-gray-300 text-brand-blue">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">TidalEnergy Pro</div>
|
||||||
|
<div class="text-xs text-gray-400">Renewable Energy</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-600">🇬🇧 United Kingdom</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-amber-50 text-amber-700">Filtering</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">Passed</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||||
|
<div class="h-1.5 rounded-full bg-brand-blue" style="width:89%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold tabular-nums text-brand-blue">8.9</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 6: AquaDrone -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_6rem_9rem_9rem_8rem_3rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<input type="checkbox" class="rounded border-gray-300 text-brand-blue">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">AquaDrone</div>
|
||||||
|
<div class="text-xs text-gray-400">Underwater Survey</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-600">🇯🇵 Japan</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-amber-50 text-amber-700">Filtering</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">Rejected</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||||
|
<div class="h-1.5 rounded-full bg-red-500" style="width:42%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold tabular-nums text-red-500">4.2</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 7: SeaHarvest -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_6rem_9rem_9rem_8rem_3rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<input type="checkbox" class="rounded border-gray-300 text-brand-blue">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">SeaHarvest</div>
|
||||||
|
<div class="text-xs text-gray-400">Sustainable Aquaculture</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-600">🇳🇴 Norway</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-gray-100 text-gray-600">Intake</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-gray-400 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">Pending</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||||
|
<div class="h-1.5 rounded-full bg-gray-300" style="width:0%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold tabular-nums text-gray-400">—</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 8: WaveShield -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_6rem_9rem_9rem_8rem_3rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors">
|
||||||
|
<input type="checkbox" class="rounded border-gray-300 text-brand-blue">
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">WaveShield</div>
|
||||||
|
<div class="text-xs text-gray-400">Coastal Protection</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-600">🇲🇨 Monaco</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-blue-50 text-blue-700">Evaluation</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-blue-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">In Progress</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-full h-1.5 overflow-hidden">
|
||||||
|
<div class="h-1.5 rounded-full bg-brand-teal" style="width:75%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold tabular-nums text-brand-teal">7.5</span>
|
||||||
|
</div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="flex items-center justify-between px-5 py-4 border-t border-gray-100">
|
||||||
|
<span class="text-xs text-gray-500 font-medium">Page 1 of 6 · 142 results</span>
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:bg-gray-50 text-sm font-medium">‹</button>
|
||||||
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-brand-blue text-white text-sm font-semibold">1</button>
|
||||||
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-600 hover:bg-gray-50 text-sm font-medium">2</button>
|
||||||
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-600 hover:bg-gray-50 text-sm font-medium">3</button>
|
||||||
|
<span class="w-8 h-8 flex items-center justify-center text-gray-400 text-sm">...</span>
|
||||||
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-600 hover:bg-gray-50 text-sm font-medium">6</button>
|
||||||
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:bg-gray-50 text-sm font-medium">›</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Bulk Action Bar (fixed bottom) -->
|
||||||
|
<div class="fixed bottom-0 left-64 right-0 bg-white border-t border-gray-200 shadow-lg px-6 py-3 flex items-center justify-between z-20">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="w-5 h-5 rounded bg-brand-blue flex items-center justify-center">
|
||||||
|
<svg width="12" height="12" fill="none" stroke="white" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-semibold text-brand-blue">3 selected</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="flex items-center gap-1.5 px-3.5 py-2 rounded-lg border border-gray-200 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors">
|
||||||
|
Update Status
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="px-3.5 py-2 rounded-lg border border-gray-200 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors">
|
||||||
|
Assign to Round
|
||||||
|
</button>
|
||||||
|
<button class="px-3.5 py-2 rounded-lg text-sm font-semibold text-red-500 hover:bg-red-50 transition-colors">
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
487
prototypes/admin-redesign/05-members-list.html
Normal file
487
prototypes/admin-redesign/05-members-list.html
Normal file
@@ -0,0 +1,487 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin — Members</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
body { background: #f8f9fb; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="flex min-h-screen">
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="fixed left-0 top-0 bottom-0 w-64 bg-white border-r border-gray-200 flex flex-col z-10">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="flex items-center justify-between h-16 px-4 border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="w-8 h-8 bg-brand-blue rounded-md flex items-center justify-center text-white font-bold text-sm">M</div>
|
||||||
|
<span class="font-semibold text-brand-blue text-sm">MOPC Admin</span>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" class="text-gray-500">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition selector -->
|
||||||
|
<div class="px-3 py-3 border-b border-gray-100">
|
||||||
|
<button class="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" class="text-brand-teal flex-shrink-0">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
<div class="flex-1 text-left">
|
||||||
|
<div class="text-xs font-semibold text-brand-blue">2026 Edition</div>
|
||||||
|
<div class="text-[10px] text-gray-400">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" class="text-gray-400">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="flex-1 overflow-y-auto px-3 py-3 space-y-4">
|
||||||
|
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Competition -->
|
||||||
|
<div>
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">Competition</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Rounds</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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.87M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Juries</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Awards</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- People -->
|
||||||
|
<div>
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">People</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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>
|
||||||
|
<span class="text-sm font-medium">Projects</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-[#053d57] text-white transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Members</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Insights -->
|
||||||
|
<div>
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">Insights</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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>
|
||||||
|
<span class="text-sm font-medium">Reports</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Messages</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Learning Hub</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Partners</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Administration -->
|
||||||
|
<div class="border-t border-gray-100 pt-4">
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">Administration</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Manage Editions</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Apply Page</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm font-medium">Audit Log</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
|
||||||
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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 1 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 1 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 1 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 1 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>
|
||||||
|
<span class="text-sm font-medium">Settings</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User profile -->
|
||||||
|
<div class="px-3 py-3 border-t border-gray-100">
|
||||||
|
<div class="flex items-center gap-2.5 px-2 py-2">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-brand-blue flex items-center justify-center text-white text-xs font-bold flex-shrink-0">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-xs font-semibold text-gray-800 truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<button class="p-1 rounded hover:bg-gray-100">
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" class="text-gray-400">
|
||||||
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main content -->
|
||||||
|
<main class="ml-64 flex-1 min-h-screen">
|
||||||
|
<div class="max-w-[1100px] mx-auto px-8 py-8">
|
||||||
|
|
||||||
|
<!-- Page header -->
|
||||||
|
<div class="flex items-start justify-between mb-6">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-2xl font-bold text-brand-blue tracking-tight">Members</h1>
|
||||||
|
<p class="text-sm text-gray-500 mt-0.5">48 members across all roles</p>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-brand-red text-white text-sm font-semibold hover:opacity-90 transition-opacity shadow-[0_1px_3px_rgba(0,0,0,0.12)]">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||||||
|
<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 Members
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Role tabs -->
|
||||||
|
<div class="border-b border-gray-200 mb-5">
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<button class="flex items-center gap-1 px-4 pb-3 border-b-2 border-brand-red text-brand-blue font-semibold text-sm">
|
||||||
|
All
|
||||||
|
<span class="bg-gray-100 text-gray-600 text-[10px] font-bold rounded-full px-1.5 py-0.5 ml-1">48</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-1 px-4 pb-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm font-medium transition-colors">
|
||||||
|
Jury
|
||||||
|
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold rounded-full px-1.5 py-0.5 ml-1">32</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-1 px-4 pb-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm font-medium transition-colors">
|
||||||
|
Mentors
|
||||||
|
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold rounded-full px-1.5 py-0.5 ml-1">6</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-1 px-4 pb-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm font-medium transition-colors">
|
||||||
|
Observers
|
||||||
|
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold rounded-full px-1.5 py-0.5 ml-1">4</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-1 px-4 pb-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm font-medium transition-colors">
|
||||||
|
Admins
|
||||||
|
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold rounded-full px-1.5 py-0.5 ml-1">3</span>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-1 px-4 pb-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm font-medium transition-colors">
|
||||||
|
Other
|
||||||
|
<span class="bg-gray-100 text-gray-500 text-[10px] font-bold rounded-full px-1.5 py-0.5 ml-1">3</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Toolbar -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] mb-4 px-3 py-3 flex items-center gap-3">
|
||||||
|
<div class="relative flex-1 max-w-sm">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||||
|
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||||
|
</svg>
|
||||||
|
<input type="text" placeholder="Search by name or email..." class="w-full pl-9 pr-3 py-2 text-sm rounded-lg border border-gray-200 bg-gray-50/50 focus:outline-none focus:ring-2 focus:ring-brand-blue/20 focus:border-brand-blue/40 placeholder-gray-400">
|
||||||
|
</div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
|
<button class="flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors font-medium">
|
||||||
|
Status
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors font-medium">
|
||||||
|
Export
|
||||||
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Table -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] overflow-hidden">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_10rem_8rem_7rem_10rem] gap-x-3 items-center bg-gray-50/50 border-b border-gray-200 px-5 py-3">
|
||||||
|
<input type="checkbox" class="rounded border-gray-300 text-brand-blue">
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Member</div>
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Role</div>
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Status</div>
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Invited</div>
|
||||||
|
<div class="text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Act</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 1: Dr. Sophie Martin -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_10rem_8rem_7rem_10rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-violet-500 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">SM</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">Dr. Sophie Martin</div>
|
||||||
|
<div class="text-xs text-gray-400">sophie@univ.fr</div>
|
||||||
|
<div class="text-[10.5px] text-gray-400 mt-0.5">Panel A · 12 assignments</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-blue-50 text-blue-700">Jury Member</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">Active</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-500">Jan 15</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 2: Prof. Jean Dupont -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_10rem_8rem_7rem_10rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-sky-600 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">JD</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">Prof. Jean Dupont</div>
|
||||||
|
<div class="text-xs text-gray-400">jean@lab.mc</div>
|
||||||
|
<div class="text-[10.5px] text-gray-400 mt-0.5">Panel A · 15 assignments</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-blue-50 text-blue-700">Jury Member</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">Active</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-500">Jan 15</div>
|
||||||
|
<div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 3: Maria Garcia (Invited) -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_10rem_8rem_7rem_10rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100 bg-amber-50/30">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-amber-400 flex-shrink-0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-rose-500 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">MG</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">Maria Garcia</div>
|
||||||
|
<div class="text-xs text-gray-400">maria@ocean.org</div>
|
||||||
|
<div class="text-[10.5px] text-gray-400 mt-0.5">Panel B · 0 assignments</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-blue-50 text-blue-700">Jury Member</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-amber-400 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-amber-700 font-medium">Invited</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-500">Feb 1</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="text-xs font-semibold text-brand-blue hover:text-brand-red transition-colors whitespace-nowrap">Resend ↻</button>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 4: Dr. Yuki Tanaka -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_10rem_8rem_7rem_10rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-emerald-600 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">YT</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">Dr. Yuki Tanaka</div>
|
||||||
|
<div class="text-xs text-gray-400">yuki@marine.jp</div>
|
||||||
|
<div class="text-[10.5px] text-gray-400 mt-0.5">Panel A · 10 assignments</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-blue-50 text-blue-700">Jury Member</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">Active</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-500">Jan 18</div>
|
||||||
|
<div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 5: Carlos Mendez (Mentor) -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_10rem_8rem_7rem_10rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">CM</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">Carlos Mendez</div>
|
||||||
|
<div class="text-xs text-gray-400">carlos@reef.br</div>
|
||||||
|
<div class="text-[10.5px] text-gray-400 mt-0.5">3 mentee projects</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-teal-50 text-teal-700">Mentor</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">Active</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-500">Jan 10</div>
|
||||||
|
<div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 6: Lisa Chen (Observer) -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_10rem_8rem_7rem_10rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-brand-teal flex items-center justify-center text-white text-xs font-bold flex-shrink-0">LC</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">Lisa Chen</div>
|
||||||
|
<div class="text-xs text-gray-400">lisa@wwf.org</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-purple-50 text-purple-700">Observer</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-700 font-medium">Active</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-500">Jan 5</div>
|
||||||
|
<div>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 7: Ahmed Hassan (Invited) -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_10rem_8rem_7rem_10rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors border-b border-gray-100 bg-amber-50/30">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-amber-400 flex-shrink-0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-brand-blue flex items-center justify-center text-white text-xs font-bold flex-shrink-0">AH</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-800">Ahmed Hassan</div>
|
||||||
|
<div class="text-xs text-gray-400">ahmed@env.eg</div>
|
||||||
|
<div class="text-[10.5px] text-gray-400 mt-0.5">Panel B · 0 assignments</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-blue-50 text-blue-700">Jury Member</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-amber-400 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-amber-700 font-medium">Invited</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-500">Feb 8</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button class="text-xs font-semibold text-brand-blue hover:text-brand-red transition-colors whitespace-nowrap">Resend ↻</button>
|
||||||
|
<button class="text-gray-400 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 8: Robert Fisher (Inactive) -->
|
||||||
|
<div class="grid grid-cols-[2rem_1fr_10rem_8rem_7rem_10rem] gap-x-3 items-center px-5 py-3.5 hover:bg-gray-50/50 transition-colors">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-gray-300 flex-shrink-0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-gray-400 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">RF</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-semibold text-gray-600">Robert Fisher</div>
|
||||||
|
<div class="text-xs text-gray-400">robert@noaa.gov</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-semibold bg-gray-100 text-gray-500">Jury Member</span></div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<div class="w-1.5 h-1.5 rounded-full bg-gray-300 flex-shrink-0"></div>
|
||||||
|
<span class="text-xs text-gray-400 font-medium">Inactive</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-400">Dec 15</div>
|
||||||
|
<div>
|
||||||
|
<button class="text-gray-300 hover:text-brand-blue transition-colors">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
660
prototypes/admin-redesign/06-reports.html
Normal file
660
prototypes/admin-redesign/06-reports.html
Normal file
@@ -0,0 +1,660 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin — Reports</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
body { background: #f8f9fb; }
|
||||||
|
|
||||||
|
.donut-chart {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: conic-gradient(
|
||||||
|
#10b981 0% 32%,
|
||||||
|
#3b82f6 32% 69%,
|
||||||
|
#9ca3af 69% 89%,
|
||||||
|
#ef4444 89% 100%
|
||||||
|
);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.donut-hole {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="flex h-screen overflow-hidden">
|
||||||
|
|
||||||
|
<!-- SIDEBAR -->
|
||||||
|
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col flex-shrink-0 h-full overflow-y-auto">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 flex items-center px-4 gap-3 border-b border-gray-100">
|
||||||
|
<div class="w-9 h-9 bg-brand-blue rounded-lg flex items-center justify-center text-white font-bold text-lg flex-shrink-0">M</div>
|
||||||
|
<span class="font-semibold text-brand-blue text-sm tracking-tight">MOPC Admin</span>
|
||||||
|
<button class="ml-auto relative p-1.5 rounded-md hover:bg-gray-50 text-gray-500">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||||
|
</svg>
|
||||||
|
<span class="absolute top-1 right-1 w-2 h-2 bg-brand-red rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="px-4 py-3 border-b border-gray-100">
|
||||||
|
<button class="w-full flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-50 hover:bg-gray-100 text-sm text-left transition-colors">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#557f8c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||||
|
</svg>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="font-semibold text-brand-blue text-xs">2026 Edition</div>
|
||||||
|
<div class="text-gray-400 text-[10px]">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="6 9 12 15 18 9"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="flex-1 px-3 py-4 space-y-5">
|
||||||
|
<!-- Dashboard -->
|
||||||
|
<div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
|
||||||
|
</svg>
|
||||||
|
<span>Dashboard</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Competition -->
|
||||||
|
<div>
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">Competition</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
||||||
|
</svg>
|
||||||
|
<span>Rounds</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
<span>Juries</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/>
|
||||||
|
</svg>
|
||||||
|
<span>Awards</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- People -->
|
||||||
|
<div>
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">People</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>
|
||||||
|
</svg>
|
||||||
|
<span>Projects</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||||
|
</svg>
|
||||||
|
<span>Members</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Insights -->
|
||||||
|
<div>
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">Insights</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-brand-blue text-white text-sm">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
<span>Reports</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Messages</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Learning Hub</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
<span>Partners</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Administration -->
|
||||||
|
<div class="border-t border-gray-100 pt-4">
|
||||||
|
<p class="text-[10.5px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3 mb-1.5">Administration</p>
|
||||||
|
<div class="space-y-0.5">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||||||
|
</svg>
|
||||||
|
<span>Manage Editions</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
|
||||||
|
</svg>
|
||||||
|
<span>Apply Page</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Audit Log</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-sm transition-colors">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 19.07l-1.41 1.41M21 12h-2M5 12H3M19.07 19.07l-1.41-1.41M4.93 4.93l-1.41 1.41M12 21v-2M12 5V3"/>
|
||||||
|
</svg>
|
||||||
|
<span>Settings</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="px-3 py-4 border-t border-gray-100">
|
||||||
|
<div class="flex items-center gap-3 px-2">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-brand-blue flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">MP</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-sm font-semibold text-gray-800 truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[10px] text-gray-400 truncate">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<button class="p-1 rounded-md hover:bg-gray-100 text-gray-400">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- MAIN CONTENT -->
|
||||||
|
<main class="flex-1 overflow-y-auto">
|
||||||
|
<div class="px-8 py-8">
|
||||||
|
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-2xl font-bold text-brand-blue tracking-tight">Reports</h1>
|
||||||
|
<p class="text-sm text-gray-500 mt-0.5">Analytics for Monaco OPC 2026</p>
|
||||||
|
</div>
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2.5 bg-brand-red text-white rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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 PDF
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sticky Scope Bar -->
|
||||||
|
<div class="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-gray-200 -mx-8 px-8 py-3 mb-6">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<select class="rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-brand-blue/20 cursor-pointer">
|
||||||
|
<option>Program: 2026 Edition</option>
|
||||||
|
<option>Program: 2025 Edition</option>
|
||||||
|
</select>
|
||||||
|
<select class="rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-brand-blue/20 cursor-pointer">
|
||||||
|
<option>Round: All Rounds</option>
|
||||||
|
<option>Round: Intake</option>
|
||||||
|
<option>Round: Filtering</option>
|
||||||
|
<option>Round: Evaluation</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Chart Tabs -->
|
||||||
|
<div class="border-b border-gray-200 mb-6">
|
||||||
|
<div class="flex gap-6">
|
||||||
|
<button class="pb-3 text-sm font-semibold text-brand-blue border-b-2 border-brand-red">Overview</button>
|
||||||
|
<button class="pb-3 text-sm text-gray-400 hover:text-gray-600 transition-colors">Jury Analytics</button>
|
||||||
|
<button class="pb-3 text-sm text-gray-400 hover:text-gray-600 transition-colors">Project Analytics</button>
|
||||||
|
<button class="pb-3 text-sm text-gray-400 hover:text-gray-600 transition-colors">Cross-Stage</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats Cards -->
|
||||||
|
<div class="grid grid-cols-4 gap-4 mb-6">
|
||||||
|
<!-- Programs -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-5 border-l-4 border-l-blue-500">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-gray-500 font-medium mb-1">Programs</p>
|
||||||
|
<p class="text-3xl font-bold text-brand-blue">2</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-2">Active programs</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Total Projects -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-5 border-l-4 border-l-emerald-500">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-gray-500 font-medium mb-1">Total Projects</p>
|
||||||
|
<p class="text-3xl font-bold text-brand-blue">142</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-10 h-10 rounded-full bg-emerald-50 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-2">Submissions received</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Jury Members -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-5 border-l-4 border-l-violet-500">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-gray-500 font-medium mb-1">Jury Members</p>
|
||||||
|
<p class="text-3xl font-bold text-brand-blue">8</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-10 h-10 rounded-full bg-violet-50 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-2">Active evaluators</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Evaluations -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-5 border-l-4 border-l-teal-500">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-gray-500 font-medium mb-1">Evaluations</p>
|
||||||
|
<p class="text-3xl font-bold text-brand-blue">312</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-10 h-10 rounded-full bg-teal-50 flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#14b8a6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-2">Completed evaluations</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Two-column charts: Status Breakdown + Score Distribution -->
|
||||||
|
<div class="grid grid-cols-2 gap-6 mb-6">
|
||||||
|
|
||||||
|
<!-- Status Breakdown -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6">
|
||||||
|
<h3 class="text-sm font-bold text-brand-blue uppercase tracking-wide mb-5">Status Breakdown</h3>
|
||||||
|
<div class="flex items-center gap-8">
|
||||||
|
<!-- Donut -->
|
||||||
|
<div class="flex-shrink-0 flex flex-col items-center">
|
||||||
|
<div class="donut-chart">
|
||||||
|
<div class="donut-hole">
|
||||||
|
<span class="text-xl font-bold text-brand-blue">142</span>
|
||||||
|
<span class="text-[10px] text-gray-400">projects</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Legend -->
|
||||||
|
<div class="space-y-3 flex-1">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-3 h-3 rounded-full bg-emerald-500 flex-shrink-0"></span>
|
||||||
|
<span class="text-sm text-gray-600">Passed</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xs text-gray-400">32%</span>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-8 text-right">45</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-3 h-3 rounded-full bg-blue-500 flex-shrink-0"></span>
|
||||||
|
<span class="text-sm text-gray-600">In Progress</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xs text-gray-400">37%</span>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-8 text-right">52</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-3 h-3 rounded-full bg-gray-400 flex-shrink-0"></span>
|
||||||
|
<span class="text-sm text-gray-600">Pending</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xs text-gray-400">20%</span>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-8 text-right">28</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="w-3 h-3 rounded-full bg-red-500 flex-shrink-0"></span>
|
||||||
|
<span class="text-sm text-gray-600">Rejected</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xs text-gray-400">11%</span>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-8 text-right">17</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Score Distribution -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6">
|
||||||
|
<h3 class="text-sm font-bold text-brand-blue uppercase tracking-wide mb-5">Score Distribution</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- 0-2 -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-xs text-gray-500 w-8 flex-shrink-0 text-right">0–2</span>
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-r-lg h-8 relative">
|
||||||
|
<div class="h-8 rounded-r-lg bg-red-400" style="width: 6%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 w-10 flex-shrink-0">3</span>
|
||||||
|
</div>
|
||||||
|
<!-- 2-4 -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-xs text-gray-500 w-8 flex-shrink-0 text-right">2–4</span>
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-r-lg h-8 relative">
|
||||||
|
<div class="h-8 rounded-r-lg bg-amber-400" style="width: 15%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 w-10 flex-shrink-0">8</span>
|
||||||
|
</div>
|
||||||
|
<!-- 4-6 -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-xs text-gray-500 w-8 flex-shrink-0 text-right">4–6</span>
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-r-lg h-8 relative">
|
||||||
|
<div class="h-8 rounded-r-lg bg-amber-300" style="width: 41%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 w-10 flex-shrink-0">22</span>
|
||||||
|
</div>
|
||||||
|
<!-- 6-8 -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-xs text-gray-500 w-8 flex-shrink-0 text-right">6–8</span>
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-r-lg h-8 relative">
|
||||||
|
<div class="h-8 rounded-r-lg bg-brand-teal" style="width: 90%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 w-10 flex-shrink-0">48</span>
|
||||||
|
</div>
|
||||||
|
<!-- 8-10 -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-xs text-gray-500 w-8 flex-shrink-0 text-right">8–10</span>
|
||||||
|
<div class="flex-1 bg-gray-100 rounded-r-lg h-8 relative">
|
||||||
|
<div class="h-8 rounded-r-lg bg-brand-blue" style="width: 60%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-semibold text-gray-600 w-10 flex-shrink-0">32</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-4 text-center">Mean: 7.2 · Median: 7.5 · Std Dev: 1.8</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Evaluation Timeline -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6 mb-6">
|
||||||
|
<h3 class="text-sm font-bold text-brand-blue uppercase tracking-wide mb-5">Evaluation Timeline</h3>
|
||||||
|
<div class="relative">
|
||||||
|
<!-- Y-axis labels -->
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex flex-col justify-between text-right pr-4 text-xs text-gray-400 h-48">
|
||||||
|
<span>80</span>
|
||||||
|
<span>60</span>
|
||||||
|
<span>40</span>
|
||||||
|
<span>20</span>
|
||||||
|
<span>0</span>
|
||||||
|
</div>
|
||||||
|
<!-- Chart area -->
|
||||||
|
<div class="flex-1 relative h-48">
|
||||||
|
<!-- Grid lines -->
|
||||||
|
<div class="absolute inset-0 flex flex-col justify-between">
|
||||||
|
<div class="border-t border-gray-100 w-full"></div>
|
||||||
|
<div class="border-t border-gray-100 w-full"></div>
|
||||||
|
<div class="border-t border-gray-100 w-full"></div>
|
||||||
|
<div class="border-t border-gray-100 w-full"></div>
|
||||||
|
<div class="border-t border-gray-200 w-full"></div>
|
||||||
|
</div>
|
||||||
|
<!-- SVG chart -->
|
||||||
|
<svg class="absolute inset-0 w-full h-full overflow-visible" viewBox="0 0 400 192" preserveAspectRatio="none">
|
||||||
|
<!-- Define gradient -->
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0%" stop-color="#053d57" stop-opacity="0.15"/>
|
||||||
|
<stop offset="100%" stop-color="#053d57" stop-opacity="0"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<!-- Area fill -->
|
||||||
|
<polygon points="0,192 0,170 100,140 200,96 300,44 400,8 400,192" fill="url(#chartGrad)"/>
|
||||||
|
<!-- Line -->
|
||||||
|
<polyline
|
||||||
|
points="0,170 100,140 200,96 300,44 400,8"
|
||||||
|
fill="none"
|
||||||
|
stroke="#053d57"
|
||||||
|
stroke-width="2.5"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<!-- Data points -->
|
||||||
|
<circle cx="0" cy="170" r="5" fill="white" stroke="#053d57" stroke-width="2.5"/>
|
||||||
|
<circle cx="100" cy="140" r="5" fill="white" stroke="#053d57" stroke-width="2.5"/>
|
||||||
|
<circle cx="200" cy="96" r="5" fill="white" stroke="#053d57" stroke-width="2.5"/>
|
||||||
|
<circle cx="300" cy="44" r="5" fill="white" stroke="#053d57" stroke-width="2.5"/>
|
||||||
|
<circle cx="400" cy="8" r="5" fill="#053d57" stroke="#053d57" stroke-width="2.5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- X-axis labels -->
|
||||||
|
<div class="flex mt-2 pl-10">
|
||||||
|
<div class="flex-1 flex justify-between text-xs text-gray-400 px-0">
|
||||||
|
<span>Mar 1</span>
|
||||||
|
<span>Mar 5</span>
|
||||||
|
<span>Mar 10</span>
|
||||||
|
<span>Mar 15</span>
|
||||||
|
<span>Mar 20</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400 mt-4 text-center">Cumulative evaluations over time · 87 of 142 completed</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Criteria Scores -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6 mb-6">
|
||||||
|
<h3 class="text-sm font-bold text-brand-blue uppercase tracking-wide mb-5">Average Scores by Criteria</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Innovation -->
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-sm font-medium text-gray-700 w-28 flex-shrink-0">Innovation</span>
|
||||||
|
<div class="flex-1 h-3 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-3 rounded-full bg-brand-blue" style="width: 78%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-8 text-right tabular-nums">7.8</span>
|
||||||
|
</div>
|
||||||
|
<!-- Impact -->
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-sm font-medium text-gray-700 w-28 flex-shrink-0">Impact</span>
|
||||||
|
<div class="flex-1 h-3 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-3 rounded-full bg-brand-blue" style="width: 81%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-8 text-right tabular-nums">8.1</span>
|
||||||
|
</div>
|
||||||
|
<!-- Feasibility -->
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-sm font-medium text-gray-700 w-28 flex-shrink-0">Feasibility</span>
|
||||||
|
<div class="flex-1 h-3 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-3 rounded-full bg-brand-teal" style="width: 69%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-8 text-right tabular-nums">6.9</span>
|
||||||
|
</div>
|
||||||
|
<!-- Team -->
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-sm font-medium text-gray-700 w-28 flex-shrink-0">Team</span>
|
||||||
|
<div class="flex-1 h-3 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-3 rounded-full bg-brand-teal" style="width: 74%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-8 text-right tabular-nums">7.4</span>
|
||||||
|
</div>
|
||||||
|
<!-- Sustainability -->
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-sm font-medium text-gray-700 w-28 flex-shrink-0">Sustainability</span>
|
||||||
|
<div class="flex-1 h-3 rounded-full bg-gray-100 overflow-hidden">
|
||||||
|
<div class="h-3 rounded-full bg-brand-teal" style="width: 72%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-8 text-right tabular-nums">7.2</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom row: Top Projects + Jury Workload -->
|
||||||
|
<div class="grid grid-cols-2 gap-6">
|
||||||
|
|
||||||
|
<!-- Top Projects -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6">
|
||||||
|
<h3 class="text-sm font-bold text-brand-blue uppercase tracking-wide mb-4">Top Ranked Projects</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- #1 -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-sm font-bold text-gray-300 w-5 text-center">#1</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<span class="text-sm font-semibold text-gray-800 truncate block">CoralTrack</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue tabular-nums">9.2</span>
|
||||||
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">Passed</span>
|
||||||
|
</div>
|
||||||
|
<!-- #2 -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-sm font-bold text-gray-300 w-5 text-center">#2</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<span class="text-sm font-semibold text-gray-800 truncate block">TidalEnergy Pro</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue tabular-nums">8.9</span>
|
||||||
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">In Progress</span>
|
||||||
|
</div>
|
||||||
|
<!-- #3 -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-sm font-bold text-gray-300 w-5 text-center">#3</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<span class="text-sm font-semibold text-gray-800 truncate block">OceanClean AI</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue tabular-nums">8.7</span>
|
||||||
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">In Progress</span>
|
||||||
|
</div>
|
||||||
|
<!-- #4 -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-sm font-bold text-gray-300 w-5 text-center">#4</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<span class="text-sm font-semibold text-gray-800 truncate block">MicroDetect</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue tabular-nums">7.8</span>
|
||||||
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">In Progress</span>
|
||||||
|
</div>
|
||||||
|
<!-- #5 -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-sm font-bold text-gray-300 w-5 text-center">#5</span>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<span class="text-sm font-semibold text-gray-800 truncate block">WaveShield</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue tabular-nums">7.5</span>
|
||||||
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">In Progress</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Jury Workload -->
|
||||||
|
<div class="rounded-xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] p-6">
|
||||||
|
<h3 class="text-sm font-bold text-brand-blue uppercase tracking-wide mb-4">Jury Workload</h3>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- Dr. Sophie Martin -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-sm text-gray-600 w-36 flex-shrink-0 truncate">Dr. Sophie Martin</span>
|
||||||
|
<div class="flex-1 h-6 bg-gray-100 rounded-lg overflow-hidden">
|
||||||
|
<div class="h-6 rounded-lg bg-brand-blue" style="width: 100%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-6 text-right tabular-nums">18</span>
|
||||||
|
</div>
|
||||||
|
<!-- Prof. Jean Dupont -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-sm text-gray-600 w-36 flex-shrink-0 truncate">Prof. Jean Dupont</span>
|
||||||
|
<div class="flex-1 h-6 bg-gray-100 rounded-lg overflow-hidden">
|
||||||
|
<div class="h-6 rounded-lg bg-brand-blue" style="width: 83%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-6 text-right tabular-nums">15</span>
|
||||||
|
</div>
|
||||||
|
<!-- Dr. Yuki Tanaka -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-sm text-gray-600 w-36 flex-shrink-0 truncate">Dr. Yuki Tanaka</span>
|
||||||
|
<div class="flex-1 h-6 bg-gray-100 rounded-lg overflow-hidden">
|
||||||
|
<div class="h-6 rounded-lg bg-brand-blue" style="width: 67%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-6 text-right tabular-nums">12</span>
|
||||||
|
</div>
|
||||||
|
<!-- Carlos Mendez -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-sm text-gray-600 w-36 flex-shrink-0 truncate">Carlos Mendez</span>
|
||||||
|
<div class="flex-1 h-6 bg-gray-100 rounded-lg overflow-hidden">
|
||||||
|
<div class="h-6 rounded-lg bg-brand-blue" style="width: 56%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-6 text-right tabular-nums">10</span>
|
||||||
|
</div>
|
||||||
|
<!-- Maria Garcia -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="text-sm text-gray-600 w-36 flex-shrink-0 truncate">Maria Garcia</span>
|
||||||
|
<div class="flex-1 h-6 bg-gray-100 rounded-lg overflow-hidden">
|
||||||
|
<div class="h-6 rounded-lg bg-brand-blue" style="width: 44%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-bold text-brand-blue w-6 text-right tabular-nums">8</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
558
prototypes/admin-redesign/07-sidebar-states.html
Normal file
558
prototypes/admin-redesign/07-sidebar-states.html
Normal file
@@ -0,0 +1,558 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Admin — Sidebar Navigation States</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: { extend: {
|
||||||
|
fontFamily: { sans: ['Montserrat', 'sans-serif'] },
|
||||||
|
colors: { brand: { red: '#de0f1e', blue: '#053d57', 'blue-light': '#0a5a7c', teal: '#557f8c', white: '#fefefe' } }
|
||||||
|
}}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
* { font-family: 'Montserrat', sans-serif; }
|
||||||
|
body { background: #f1f3f6; }
|
||||||
|
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||||
|
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f1f3f6] min-h-screen p-8">
|
||||||
|
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="text-2xl font-bold text-brand-blue tracking-tight">Sidebar Navigation — All States</h1>
|
||||||
|
<p class="text-sm text-gray-500 font-medium mt-1">Design reference for the MOPC admin sidebar component</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Row 1: 4 variants side by side -->
|
||||||
|
<div class="grid grid-cols-4 gap-6 mb-10">
|
||||||
|
|
||||||
|
<!-- ===== VARIANT 1: Default (Dashboard Active) ===== -->
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Default (Dashboard Active)</div>
|
||||||
|
<div class="rounded-xl border border-gray-200 overflow-hidden" style="height:700px">
|
||||||
|
<div class="w-64 h-full bg-white flex flex-col" style="width:256px;overflow:hidden">
|
||||||
|
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 border-b border-gray-100 flex items-center justify-between px-4 flex-shrink-0">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-brand-blue rounded-lg flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-white font-bold text-sm">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-bold text-brand-blue leading-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full pulse-dot"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="border-b border-gray-100 px-4 py-3 flex-shrink-0">
|
||||||
|
<button class="w-full flex items-center gap-2 bg-gray-50 rounded-lg px-3 py-2">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<div class="flex-1 text-left">
|
||||||
|
<div class="text-[11px] font-semibold text-brand-blue">2026 Edition</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="flex-1 px-3 py-3 space-y-0.5 overflow-y-auto">
|
||||||
|
<!-- Dashboard ACTIVE -->
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-brand-blue text-white font-semibold text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Competition</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">People</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Insights</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5 border-t border-gray-100 mt-2"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Administration</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||||
|
Apply Page
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||||
|
Audit Log
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User -->
|
||||||
|
<div class="border-t border-gray-100 px-4 py-3 flex-shrink-0">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="relative flex-shrink-0">
|
||||||
|
<div class="w-7 h-7 rounded-full bg-brand-blue flex items-center justify-center">
|
||||||
|
<span class="text-white text-[10px] font-semibold">MP</span>
|
||||||
|
</div>
|
||||||
|
<span class="absolute bottom-0 right-0 w-1.5 h-1.5 bg-green-400 rounded-full border border-white"></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[11px] font-semibold text-gray-800 truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===== VARIANT 2: Rounds Active ===== -->
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Rounds Active</div>
|
||||||
|
<div class="rounded-xl border border-gray-200 overflow-hidden" style="height:700px">
|
||||||
|
<div class="w-64 h-full bg-white flex flex-col" style="width:256px;overflow:hidden">
|
||||||
|
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 border-b border-gray-100 flex items-center justify-between px-4 flex-shrink-0">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-brand-blue rounded-lg flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-white font-bold text-sm">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-bold text-brand-blue leading-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full pulse-dot"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="border-b border-gray-100 px-4 py-3 flex-shrink-0">
|
||||||
|
<button class="w-full flex items-center gap-2 bg-gray-50 rounded-lg px-3 py-2">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<div class="flex-1 text-left">
|
||||||
|
<div class="text-[11px] font-semibold text-brand-blue">2026 Edition</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="flex-1 px-3 py-3 space-y-0.5 overflow-y-auto">
|
||||||
|
<!-- Dashboard inactive -->
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Competition</span></div>
|
||||||
|
<!-- Rounds ACTIVE -->
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-brand-blue text-white font-semibold text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">People</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Insights</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5 border-t border-gray-100 mt-2"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Administration</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Manage Editions
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||||
|
Apply Page
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||||
|
Audit Log
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User -->
|
||||||
|
<div class="border-t border-gray-100 px-4 py-3 flex-shrink-0">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="relative flex-shrink-0">
|
||||||
|
<div class="w-7 h-7 rounded-full bg-brand-blue flex items-center justify-center">
|
||||||
|
<span class="text-white text-[10px] font-semibold">MP</span>
|
||||||
|
</div>
|
||||||
|
<span class="absolute bottom-0 right-0 w-1.5 h-1.5 bg-green-400 rounded-full border border-white"></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[11px] font-semibold text-gray-800 truncate">Marc Pianelli</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===== VARIANT 3: Mobile Collapsed (icon-only) ===== -->
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Mobile Collapsed</div>
|
||||||
|
<div class="rounded-xl border border-gray-200 overflow-hidden" style="height:700px">
|
||||||
|
<!-- w-16 collapsed sidebar -->
|
||||||
|
<div class="w-16 h-full bg-white flex flex-col border-r border-gray-100" style="overflow:hidden">
|
||||||
|
|
||||||
|
<!-- Logo: just M icon -->
|
||||||
|
<div class="h-16 border-b border-gray-100 flex items-center justify-center flex-shrink-0">
|
||||||
|
<div class="w-8 h-8 bg-brand-blue rounded-lg flex items-center justify-center">
|
||||||
|
<span class="text-white font-bold text-sm">M</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition selector: just calendar icon -->
|
||||||
|
<div class="border-b border-gray-100 py-3 flex items-center justify-center flex-shrink-0">
|
||||||
|
<button class="p-2 rounded-lg bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Icon-only nav -->
|
||||||
|
<nav class="flex-1 flex flex-col items-center py-3 space-y-1 overflow-y-auto">
|
||||||
|
<!-- Dashboard ACTIVE - blue circle -->
|
||||||
|
<div class="w-9 h-9 rounded-full bg-brand-blue flex items-center justify-center">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
</div>
|
||||||
|
<div class="h-3"></div>
|
||||||
|
<!-- Competition icons -->
|
||||||
|
<button class="w-9 h-9 rounded-lg flex items-center justify-center hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="w-9 h-9 rounded-lg flex items-center justify-center hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
</button>
|
||||||
|
<button class="w-9 h-9 rounded-lg flex items-center justify-center hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>
|
||||||
|
</button>
|
||||||
|
<div class="h-2 w-full border-t border-gray-100"></div>
|
||||||
|
<!-- People icons -->
|
||||||
|
<button class="w-9 h-9 rounded-lg flex items-center justify-center hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
</button>
|
||||||
|
<button class="w-9 h-9 rounded-lg flex items-center justify-center hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||||
|
</button>
|
||||||
|
<div class="h-2 w-full border-t border-gray-100"></div>
|
||||||
|
<!-- Insights icons -->
|
||||||
|
<button class="w-9 h-9 rounded-lg flex items-center justify-center hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
</button>
|
||||||
|
<button class="w-9 h-9 rounded-lg flex items-center justify-center hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
|
</button>
|
||||||
|
<button class="w-9 h-9 rounded-lg flex items-center justify-center hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User: just avatar -->
|
||||||
|
<div class="border-t border-gray-100 py-3 flex items-center justify-center flex-shrink-0">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-brand-blue flex items-center justify-center">
|
||||||
|
<span class="text-white text-[10px] font-semibold">MP</span>
|
||||||
|
</div>
|
||||||
|
<span class="absolute bottom-0 right-0 w-2 h-2 bg-green-400 rounded-full border border-white"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===== VARIANT 4: Edition Selector Open ===== -->
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Edition Selector Open</div>
|
||||||
|
<div class="rounded-xl border border-gray-200 overflow-hidden relative" style="height:700px">
|
||||||
|
<div class="w-64 h-full bg-white flex flex-col" style="width:256px;overflow:hidden">
|
||||||
|
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 border-b border-gray-100 flex items-center justify-between px-4 flex-shrink-0">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-brand-blue rounded-lg flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-white font-bold text-sm">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-bold text-brand-blue leading-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector OPEN STATE -->
|
||||||
|
<div class="border-b border-gray-100 px-4 py-3 flex-shrink-0 relative">
|
||||||
|
<!-- Trigger button (pressed state) -->
|
||||||
|
<button class="w-full flex items-center gap-2 bg-gray-100 border border-gray-200 rounded-lg px-3 py-2">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<div class="flex-1 text-left">
|
||||||
|
<div class="text-[11px] font-semibold text-brand-blue">2026 Edition</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<!-- Chevron up (open) -->
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Dropdown overlay -->
|
||||||
|
<div class="absolute left-4 right-4 top-full mt-1 bg-white rounded-xl border border-gray-200 shadow-lg z-50 overflow-hidden" style="top:calc(100% - 4px)">
|
||||||
|
<!-- 2026 Edition (active) -->
|
||||||
|
<div class="flex items-center gap-3 px-3 py-2.5 bg-blue-50 border-b border-gray-100">
|
||||||
|
<div class="w-6 h-6 bg-brand-blue rounded-md flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-white text-[9px] font-bold">26</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[11px] font-semibold text-brand-blue">2026 Edition</div>
|
||||||
|
<div class="text-[9px] text-green-600 font-medium">Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||||
|
</div>
|
||||||
|
<!-- 2025 Edition -->
|
||||||
|
<div class="flex items-center gap-3 px-3 py-2.5 hover:bg-gray-50 border-b border-gray-100">
|
||||||
|
<div class="w-6 h-6 bg-gray-200 rounded-md flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-gray-500 text-[9px] font-bold">25</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-[11px] font-medium text-gray-700">2025 Edition</div>
|
||||||
|
<div class="text-[9px] text-gray-400 font-medium">Archived</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Create New -->
|
||||||
|
<div class="flex items-center gap-3 px-3 py-2.5 hover:bg-gray-50 text-brand-teal">
|
||||||
|
<div class="w-6 h-6 border-2 border-dashed border-brand-teal rounded-md flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#557f8c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-[11px] font-semibold">Create New Edition</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav (dimmed to show focus on dropdown) -->
|
||||||
|
<nav class="flex-1 px-3 py-3 space-y-0.5 overflow-y-auto opacity-40">
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-brand-blue text-white font-semibold text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Competition</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Juries
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User -->
|
||||||
|
<div class="border-t border-gray-100 px-4 py-3 flex-shrink-0 opacity-40">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="w-7 h-7 rounded-full bg-brand-blue flex items-center justify-center">
|
||||||
|
<span class="text-white text-[10px] font-semibold">MP</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[11px] font-semibold text-gray-800">Marc Pianelli</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Super Admin</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div><!-- end grid-cols-4 -->
|
||||||
|
|
||||||
|
<!-- Row 2: Program Admin View (full width) -->
|
||||||
|
<div>
|
||||||
|
<div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Program Admin View (no admin section)</div>
|
||||||
|
<div class="rounded-xl border border-gray-200 overflow-hidden" style="height:620px;max-width:260px">
|
||||||
|
<div class="w-64 h-full bg-white flex flex-col" style="width:256px;overflow:hidden">
|
||||||
|
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="h-16 border-b border-gray-100 flex items-center justify-between px-4 flex-shrink-0">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-8 h-8 bg-brand-blue rounded-lg flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-white font-bold text-sm">M</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-bold text-brand-blue leading-tight">MOPC Admin</div>
|
||||||
|
<div class="text-[10px] text-gray-400 font-medium">Control Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="relative p-1.5 rounded-lg hover:bg-gray-50">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 bg-brand-red rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edition Selector -->
|
||||||
|
<div class="border-b border-gray-100 px-4 py-3 flex-shrink-0">
|
||||||
|
<button class="w-full flex items-center gap-2 bg-gray-50 rounded-lg px-3 py-2">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#053d57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<div class="flex-1 text-left">
|
||||||
|
<div class="text-[11px] font-semibold text-brand-blue">2026 Edition</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Monaco OPC · Active</div>
|
||||||
|
</div>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav WITHOUT Administration section -->
|
||||||
|
<nav class="flex-1 px-3 py-3 space-y-0.5 overflow-y-auto">
|
||||||
|
<!-- Dashboard ACTIVE -->
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-brand-blue text-white font-semibold text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Competition</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
Rounds
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>
|
||||||
|
Awards
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">People</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||||
|
Members
|
||||||
|
</a>
|
||||||
|
<div class="pt-3 pb-0.5"><span class="text-[9px] font-semibold uppercase tracking-[0.08em] text-gray-400/80 px-3">Insights</span></div>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
|
Messages
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||||
|
Learning Hub
|
||||||
|
</a>
|
||||||
|
<a href="#" class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 text-xs">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
||||||
|
Partners
|
||||||
|
</a>
|
||||||
|
<!-- NO Administration section here -->
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- User (Program Admin role) -->
|
||||||
|
<div class="border-t border-gray-100 px-4 py-3 flex-shrink-0">
|
||||||
|
<div class="flex items-center gap-2.5">
|
||||||
|
<div class="relative flex-shrink-0">
|
||||||
|
<div class="w-7 h-7 rounded-full bg-brand-teal flex items-center justify-center">
|
||||||
|
<span class="text-white text-[10px] font-semibold">AL</span>
|
||||||
|
</div>
|
||||||
|
<span class="absolute bottom-0 right-0 w-1.5 h-1.5 bg-green-400 rounded-full border border-white"></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="text-[11px] font-semibold text-gray-800 truncate">Anne Lemaire</div>
|
||||||
|
<div class="text-[9px] text-gray-400">Program Admin</div>
|
||||||
|
</div>
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1522
prototypes/observer-dashboard-redesign.html
Normal file
1522
prototypes/observer-dashboard-redesign.html
Normal file
File diff suppressed because it is too large
Load Diff
1256
prototypes/observer-project-detail.html
Normal file
1256
prototypes/observer-project-detail.html
Normal file
File diff suppressed because it is too large
Load Diff
641
prototypes/observer-projects.html
Normal file
641
prototypes/observer-projects.html
Normal file
@@ -0,0 +1,641 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MOPC Observer — Projects</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=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
/* ============================================================
|
||||||
|
DESIGN SYSTEM — Nautical Precision (shared with dashboard)
|
||||||
|
============================================================ */
|
||||||
|
:root {
|
||||||
|
--red: #de0f1e;
|
||||||
|
--dark-blue: #053d57;
|
||||||
|
--dark-blue-90: rgba(5, 61, 87, 0.9);
|
||||||
|
--white: #fefefe;
|
||||||
|
--teal: #557f8c;
|
||||||
|
--teal-dim: rgba(85, 127, 140, 0.12);
|
||||||
|
--teal-glow: rgba(85, 127, 140, 0.25);
|
||||||
|
|
||||||
|
--bg: #f5f6f8;
|
||||||
|
--bg-subtle: #eceef2;
|
||||||
|
--card: #ffffff;
|
||||||
|
--border: #e2e4e9;
|
||||||
|
--border-hover: #c9cdd4;
|
||||||
|
|
||||||
|
--ink: #0f172a;
|
||||||
|
--ink-secondary: #334155;
|
||||||
|
--ink-muted: #64748b;
|
||||||
|
--ink-faint: #94a3b8;
|
||||||
|
|
||||||
|
--green: #059669;
|
||||||
|
--green-bg: #ecfdf5;
|
||||||
|
--amber: #d97706;
|
||||||
|
--amber-bg: #fffbeb;
|
||||||
|
--blue: #2563eb;
|
||||||
|
--blue-bg: #eff6ff;
|
||||||
|
--purple: #7c3aed;
|
||||||
|
--purple-bg: #f3e8ff;
|
||||||
|
--pink: #db2777;
|
||||||
|
--pink-bg: #fce7f3;
|
||||||
|
--red-bg: #fef2f2;
|
||||||
|
|
||||||
|
--radius: 10px;
|
||||||
|
--radius-lg: 14px;
|
||||||
|
--shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.02);
|
||||||
|
--shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
|
||||||
|
--transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
|
||||||
|
--font-display: 'Montserrat', system-ui, sans-serif;
|
||||||
|
--font-mono: 'DM Mono', 'Menlo', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--ink);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
body::before {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
opacity: 0.018;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 800px 600px at 20% 40%, var(--dark-blue), transparent),
|
||||||
|
radial-gradient(ellipse 600px 400px at 80% 70%, var(--teal), transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================================================================
|
||||||
|
NAVIGATION
|
||||||
|
================================================================ */
|
||||||
|
.nav {
|
||||||
|
position: sticky; top: 0; z-index: 100; height: 52px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
display: flex; align-items: center; padding: 0 24px;
|
||||||
|
backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.92);
|
||||||
|
}
|
||||||
|
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dark-blue); }
|
||||||
|
.nav-logo {
|
||||||
|
width: 30px; height: 30px; background: var(--red); border-radius: 7px;
|
||||||
|
display: grid; place-items: center; color: white; font-weight: 700;
|
||||||
|
font-size: 12px; letter-spacing: -0.02em; box-shadow: 0 1px 3px rgba(222, 15, 30, 0.3);
|
||||||
|
}
|
||||||
|
.nav-brand-text { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
|
||||||
|
.nav-brand-role { font-weight: 400; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; margin-left: 2px; }
|
||||||
|
.nav-links { display: flex; gap: 2px; margin-left: 28px; }
|
||||||
|
.nav-link {
|
||||||
|
padding: 6px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 500;
|
||||||
|
color: var(--ink-muted); text-decoration: none; transition: all var(--transition); letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
.nav-link:hover { background: var(--bg); color: var(--ink-secondary); }
|
||||||
|
.nav-link.active { background: var(--dark-blue); color: white; font-weight: 600; }
|
||||||
|
.nav-spacer { flex: 1; }
|
||||||
|
.nav-right { display: flex; align-items: center; gap: 10px; }
|
||||||
|
.read-only-badge {
|
||||||
|
font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
|
||||||
|
color: var(--ink-faint); background: var(--bg-subtle); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.nav-avatar {
|
||||||
|
width: 30px; height: 30px; border-radius: 50%; background: var(--dark-blue);
|
||||||
|
color: white; font-size: 11px; font-weight: 600; display: grid; place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================================================================
|
||||||
|
LAYOUT
|
||||||
|
================================================================ */
|
||||||
|
.container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 28px 24px 48px; }
|
||||||
|
|
||||||
|
/* ================================================================
|
||||||
|
HEADER
|
||||||
|
================================================================ */
|
||||||
|
.header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
|
||||||
|
.header h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
|
||||||
|
.header-sub { font-size: 13px; font-weight: 300; color: var(--ink-muted); margin-top: 3px; }
|
||||||
|
|
||||||
|
/* ================================================================
|
||||||
|
FILTER BAR
|
||||||
|
================================================================ */
|
||||||
|
.filter-card {
|
||||||
|
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-card); padding: 16px 20px; margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||||||
|
.filter-search {
|
||||||
|
flex: 1; min-width: 200px; max-width: 320px; height: 36px; padding: 0 12px 0 36px;
|
||||||
|
border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-display);
|
||||||
|
font-size: 12.5px; color: var(--ink); background: var(--card); outline: none;
|
||||||
|
transition: border-color var(--transition);
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat; background-position: 12px center;
|
||||||
|
}
|
||||||
|
.filter-search::placeholder { color: var(--ink-faint); }
|
||||||
|
.filter-search:focus { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-glow); }
|
||||||
|
.filter-select {
|
||||||
|
height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: 8px;
|
||||||
|
font-family: var(--font-display); font-size: 12px; font-weight: 500; color: var(--ink-secondary);
|
||||||
|
background: var(--card); appearance: none; cursor: pointer; outline: none;
|
||||||
|
transition: border-color var(--transition);
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat; background-position: right 9px center;
|
||||||
|
}
|
||||||
|
.filter-select:focus { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-glow); }
|
||||||
|
.score-range { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--ink-muted); }
|
||||||
|
.score-input {
|
||||||
|
width: 52px; height: 36px; text-align: center; border: 1px solid var(--border); border-radius: 8px;
|
||||||
|
font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-secondary); outline: none;
|
||||||
|
}
|
||||||
|
.score-input:focus { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-glow); }
|
||||||
|
.score-sep { color: var(--ink-faint); font-size: 12px; }
|
||||||
|
.filter-pill {
|
||||||
|
display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
|
||||||
|
padding: 5px 10px; border-radius: 6px; background: var(--teal-dim); color: var(--teal);
|
||||||
|
border: 1px solid rgba(85, 127, 140, 0.25); letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
.filter-clear {
|
||||||
|
font-size: 11px; font-weight: 500; color: var(--ink-faint); cursor: pointer;
|
||||||
|
text-decoration: none; border: none; background: none; font-family: var(--font-display);
|
||||||
|
transition: color var(--transition);
|
||||||
|
}
|
||||||
|
.filter-clear:hover { color: var(--red); }
|
||||||
|
.filter-meta {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f5f9;
|
||||||
|
}
|
||||||
|
.filter-count { font-size: 12px; color: var(--ink-muted); }
|
||||||
|
.filter-count strong { font-weight: 700; color: var(--ink); font-family: var(--font-mono); }
|
||||||
|
.export-btn {
|
||||||
|
display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display);
|
||||||
|
font-size: 11.5px; font-weight: 600; color: var(--ink-muted); background: var(--card);
|
||||||
|
border: 1px solid var(--border); border-radius: 7px; padding: 6px 12px;
|
||||||
|
cursor: pointer; transition: all var(--transition);
|
||||||
|
}
|
||||||
|
.export-btn:hover { border-color: var(--border-hover); color: var(--ink-secondary); box-shadow: var(--shadow-hover); }
|
||||||
|
.export-btn svg { width: 13px; height: 13px; }
|
||||||
|
|
||||||
|
/* ================================================================
|
||||||
|
PROJECTS TABLE
|
||||||
|
================================================================ */
|
||||||
|
.table-card {
|
||||||
|
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-card); overflow: hidden;
|
||||||
|
}
|
||||||
|
.ptable { width: 100%; border-collapse: collapse; }
|
||||||
|
.ptable thead th {
|
||||||
|
text-align: left; font-size: 9.5px; font-weight: 700; color: var(--ink-faint);
|
||||||
|
text-transform: uppercase; letter-spacing: 0.1em; padding: 12px 14px 10px;
|
||||||
|
border-bottom: 1px solid var(--border); cursor: pointer; user-select: none;
|
||||||
|
transition: color var(--transition); white-space: nowrap;
|
||||||
|
}
|
||||||
|
.ptable thead th:hover { color: var(--ink-secondary); }
|
||||||
|
.ptable thead th.sorted { color: var(--dark-blue); }
|
||||||
|
.sort-arrow { display: inline-block; margin-left: 3px; font-size: 8px; vertical-align: middle; opacity: 0.5; }
|
||||||
|
.sorted .sort-arrow { opacity: 1; }
|
||||||
|
.ptable tbody tr { cursor: pointer; transition: background var(--transition); }
|
||||||
|
.ptable tbody tr:hover { background: rgba(85, 127, 140, 0.03); }
|
||||||
|
.ptable td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; font-size: 12.5px; }
|
||||||
|
|
||||||
|
.project-cell { display: flex; align-items: center; gap: 10px; }
|
||||||
|
.project-icon {
|
||||||
|
width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
|
||||||
|
font-size: 10px; font-weight: 700; color: white; flex-shrink: 0; letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.project-info { min-width: 0; }
|
||||||
|
.project-name { font-weight: 600; color: var(--ink); font-size: 13px; line-height: 1.2; }
|
||||||
|
.project-org {
|
||||||
|
font-size: 10.5px; color: var(--ink-faint); white-space: nowrap;
|
||||||
|
overflow: hidden; text-overflow: ellipsis; max-width: 200px; margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.country-cell { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
|
||||||
|
.country-flag { font-size: 14px; line-height: 1; }
|
||||||
|
.country-name { font-size: 12px; color: var(--ink-secondary); }
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block; font-size: 9px; font-weight: 700; padding: 2.5px 7px; border-radius: 3px;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
|
||||||
|
}
|
||||||
|
.badge.evaluation { background: var(--green-bg); color: var(--green); border: 1px solid #a7f3d0; }
|
||||||
|
.badge.filtering { background: var(--amber-bg); color: var(--amber); border: 1px solid #fde68a; }
|
||||||
|
.badge.mentoring { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(85,127,140,0.3); }
|
||||||
|
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block; font-size: 9px; font-weight: 700; padding: 2.5px 7px;
|
||||||
|
border-radius: 3px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
|
||||||
|
}
|
||||||
|
.status-badge.in-progress { background: var(--blue-bg); color: var(--blue); border: 1px solid #bfdbfe; }
|
||||||
|
.status-badge.passed { background: var(--green-bg); color: var(--green); border: 1px solid #a7f3d0; }
|
||||||
|
.status-badge.pending { background: var(--amber-bg); color: var(--amber); border: 1px solid #fde68a; }
|
||||||
|
.status-badge.rejected { background: var(--red-bg); color: var(--red); border: 1px solid #fecaca; }
|
||||||
|
|
||||||
|
.score-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
|
||||||
|
.score-num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; min-width: 24px; }
|
||||||
|
.score-bar-wrap { width: 60px; height: 5px; background: var(--bg-subtle); border-radius: 3px; overflow: hidden; }
|
||||||
|
.score-bar-inner { height: 100%; border-radius: 3px; }
|
||||||
|
.score-bar-inner.high { background: var(--green); }
|
||||||
|
.score-bar-inner.mid { background: var(--teal); }
|
||||||
|
.score-bar-inner.low { background: var(--amber); }
|
||||||
|
.score-bar-inner.poor { background: var(--red); }
|
||||||
|
.score-na { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
|
||||||
|
|
||||||
|
.juror-stack { display: flex; align-items: center; }
|
||||||
|
.juror-av {
|
||||||
|
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
|
||||||
|
font-size: 9px; font-weight: 700; color: white; border: 2px solid var(--card); margin-left: -6px;
|
||||||
|
}
|
||||||
|
.juror-av:first-child { margin-left: 0; }
|
||||||
|
.juror-overflow {
|
||||||
|
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
|
||||||
|
font-size: 9px; font-weight: 700; color: var(--ink-muted); background: var(--bg-subtle);
|
||||||
|
border: 2px solid var(--card); margin-left: -6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.updated-cell { font-size: 11px; font-family: var(--font-mono); color: var(--ink-faint); white-space: nowrap; }
|
||||||
|
.view-link {
|
||||||
|
font-size: 11.5px; font-weight: 600; color: var(--teal); text-decoration: none;
|
||||||
|
transition: color var(--transition); white-space: nowrap;
|
||||||
|
}
|
||||||
|
.view-link:hover { color: var(--dark-blue); }
|
||||||
|
|
||||||
|
/* ================================================================
|
||||||
|
PAGINATION
|
||||||
|
================================================================ */
|
||||||
|
.table-footer {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
padding: 12px 16px; border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.page-info { font-size: 11.5px; color: var(--ink-faint); }
|
||||||
|
.page-info strong { font-weight: 600; color: var(--ink-muted); }
|
||||||
|
.page-buttons { display: flex; align-items: center; gap: 3px; }
|
||||||
|
.page-btn {
|
||||||
|
width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border);
|
||||||
|
background: var(--card); display: grid; place-items: center; font-family: var(--font-mono);
|
||||||
|
font-size: 11px; font-weight: 500; color: var(--ink-muted); cursor: pointer;
|
||||||
|
transition: all var(--transition);
|
||||||
|
}
|
||||||
|
.page-btn:hover { border-color: var(--border-hover); color: var(--ink-secondary); }
|
||||||
|
.page-btn.active { background: var(--dark-blue); color: white; border-color: var(--dark-blue); font-weight: 700; }
|
||||||
|
.page-btn.disabled { opacity: 0.4; cursor: default; pointer-events: none; }
|
||||||
|
.page-ellipsis { font-size: 11px; color: var(--ink-faint); padding: 0 2px; }
|
||||||
|
|
||||||
|
/* ================================================================
|
||||||
|
ANIMATION
|
||||||
|
================================================================ */
|
||||||
|
@keyframes slideUp {
|
||||||
|
from { opacity: 0; transform: translateY(14px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
.animate-in { opacity: 0; animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.filter-row { flex-direction: column; align-items: stretch; }
|
||||||
|
.filter-search { max-width: none; }
|
||||||
|
.score-bar-wrap { width: 40px; }
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.header { flex-direction: column; gap: 12px; }
|
||||||
|
.nav-links { display: none; }
|
||||||
|
.container { padding: 20px 16px; }
|
||||||
|
.ptable .hide-mobile { display: none; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<a class="nav-brand" href="#">
|
||||||
|
<div class="nav-logo">M</div>
|
||||||
|
<span class="nav-brand-text">MOPC</span>
|
||||||
|
<span class="nav-brand-role">Observer</span>
|
||||||
|
</a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a class="nav-link" href="observer-dashboard-redesign.html">Dashboard</a>
|
||||||
|
<a class="nav-link active" href="#">Projects</a>
|
||||||
|
<a class="nav-link" href="#">Reports</a>
|
||||||
|
</div>
|
||||||
|
<div class="nav-spacer"></div>
|
||||||
|
<div class="nav-right">
|
||||||
|
<span class="read-only-badge">Read Only</span>
|
||||||
|
<div class="nav-avatar">SC</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="header animate-in" style="animation-delay: 0.05s">
|
||||||
|
<div>
|
||||||
|
<h1>All Projects</h1>
|
||||||
|
<p class="header-sub">Monaco Ocean Protection Challenge 2026 — 247 projects across all rounds</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-card animate-in" style="animation-delay: 0.1s">
|
||||||
|
<div class="filter-row">
|
||||||
|
<input type="text" class="filter-search" placeholder="Search projects..." value="ocean">
|
||||||
|
<select class="filter-select">
|
||||||
|
<option>Evaluation</option>
|
||||||
|
<option>All Rounds</option>
|
||||||
|
<option>R1 Application Intake</option>
|
||||||
|
<option>R2 AI Screening</option>
|
||||||
|
<option selected>R3 Expert Evaluation</option>
|
||||||
|
<option>R4 Document Submission</option>
|
||||||
|
<option>R5 Semi-Final Evaluation</option>
|
||||||
|
</select>
|
||||||
|
<select class="filter-select">
|
||||||
|
<option selected>All Statuses</option>
|
||||||
|
<option>Eligible</option>
|
||||||
|
<option>In Progress</option>
|
||||||
|
<option>Pending</option>
|
||||||
|
<option>Passed</option>
|
||||||
|
<option>Rejected</option>
|
||||||
|
<option>Completed</option>
|
||||||
|
<option>Withdrawn</option>
|
||||||
|
</select>
|
||||||
|
<div class="score-range">
|
||||||
|
<label>Score</label>
|
||||||
|
<input type="text" class="score-input" value="0.0">
|
||||||
|
<span class="score-sep">—</span>
|
||||||
|
<input type="text" class="score-input" value="10.0">
|
||||||
|
</div>
|
||||||
|
<span class="filter-pill">3 filters</span>
|
||||||
|
<button class="filter-clear">Clear all</button>
|
||||||
|
</div>
|
||||||
|
<div class="filter-meta">
|
||||||
|
<span class="filter-count">Showing <strong>24</strong> of 138 projects</span>
|
||||||
|
<button class="export-btn">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||||
|
Export CSV
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-card animate-in" style="animation-delay: 0.15s">
|
||||||
|
<table class="ptable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="sorted">Project <span class="sort-arrow">▲</span></th>
|
||||||
|
<th class="hide-mobile">Country</th>
|
||||||
|
<th>Round</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Score</th>
|
||||||
|
<th class="hide-mobile">Jurors</th>
|
||||||
|
<th class="hide-mobile">Updated</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="project-cell">
|
||||||
|
<div class="project-icon" style="background: #0ea5e9">OC</div>
|
||||||
|
<div class="project-info">
|
||||||
|
<div class="project-name">OceanClean AI</div>
|
||||||
|
<div class="project-org">Marine Pollution · Technology</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><div class="country-cell"><span class="country-flag">🇫🇷</span><span class="country-name">France</span></div></td>
|
||||||
|
<td><span class="badge evaluation">Evaluation</span></td>
|
||||||
|
<td><span class="status-badge in-progress">In Progress</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="score-cell">
|
||||||
|
<span class="score-num" style="color: var(--green)">8.7</span>
|
||||||
|
<div class="score-bar-wrap"><div class="score-bar-inner high" style="width: 87%"></div></div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile">
|
||||||
|
<div class="juror-stack">
|
||||||
|
<div class="juror-av" style="background: #2563eb">ML</div>
|
||||||
|
<div class="juror-av" style="background: #059669">CT</div>
|
||||||
|
<div class="juror-av" style="background: #7c3aed">RT</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><span class="updated-cell">3h ago</span></td>
|
||||||
|
<td><a class="view-link" href="#">View →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="project-cell">
|
||||||
|
<div class="project-icon" style="background: #059669">CT</div>
|
||||||
|
<div class="project-info">
|
||||||
|
<div class="project-name">CoralTrack</div>
|
||||||
|
<div class="project-org">Reef Monitoring · AI</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><div class="country-cell"><span class="country-flag">🇦🇺</span><span class="country-name">Australia</span></div></td>
|
||||||
|
<td><span class="badge evaluation">Evaluation</span></td>
|
||||||
|
<td><span class="status-badge passed">Passed</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="score-cell">
|
||||||
|
<span class="score-num" style="color: var(--green)">9.2</span>
|
||||||
|
<div class="score-bar-wrap"><div class="score-bar-inner high" style="width: 92%"></div></div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile">
|
||||||
|
<div class="juror-stack">
|
||||||
|
<div class="juror-av" style="background: #d97706">AG</div>
|
||||||
|
<div class="juror-av" style="background: #db2777">IN</div>
|
||||||
|
<div class="juror-av" style="background: #2563eb">MH</div>
|
||||||
|
<div class="juror-overflow">+1</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><span class="updated-cell">4h ago</span></td>
|
||||||
|
<td><a class="view-link" href="#">View →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="project-cell">
|
||||||
|
<div class="project-icon" style="background: #7c3aed">MD</div>
|
||||||
|
<div class="project-info">
|
||||||
|
<div class="project-name">MicroDetect</div>
|
||||||
|
<div class="project-org">Microplastics · Sensors</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><div class="country-cell"><span class="country-flag">🇩🇪</span><span class="country-name">Germany</span></div></td>
|
||||||
|
<td><span class="badge evaluation">Evaluation</span></td>
|
||||||
|
<td><span class="status-badge in-progress">In Progress</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="score-cell">
|
||||||
|
<span class="score-num" style="color: var(--teal)">7.8</span>
|
||||||
|
<div class="score-bar-wrap"><div class="score-bar-inner mid" style="width: 78%"></div></div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile">
|
||||||
|
<div class="juror-stack">
|
||||||
|
<div class="juror-av" style="background: #059669">VK</div>
|
||||||
|
<div class="juror-av" style="background: #0ea5e9">RS</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><span class="updated-cell">6h ago</span></td>
|
||||||
|
<td><a class="view-link" href="#">View →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="project-cell">
|
||||||
|
<div class="project-icon" style="background: #2563eb">BM</div>
|
||||||
|
<div class="project-info">
|
||||||
|
<div class="project-name">BlueMonitor</div>
|
||||||
|
<div class="project-org">Ocean Chemistry · IoT</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><div class="country-cell"><span class="country-flag">🇧🇷</span><span class="country-name">Brazil</span></div></td>
|
||||||
|
<td><span class="badge evaluation">Evaluation</span></td>
|
||||||
|
<td><span class="status-badge in-progress">In Progress</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="score-cell">
|
||||||
|
<span class="score-num" style="color: var(--teal)">6.9</span>
|
||||||
|
<div class="score-bar-wrap"><div class="score-bar-inner mid" style="width: 69%"></div></div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile">
|
||||||
|
<div class="juror-stack">
|
||||||
|
<div class="juror-av" style="background: #d97706">AH</div>
|
||||||
|
<div class="juror-av" style="background: #db2777">TL</div>
|
||||||
|
<div class="juror-av" style="background: #059669">CB</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><span class="updated-cell">Yesterday</span></td>
|
||||||
|
<td><a class="view-link" href="#">View →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="project-cell">
|
||||||
|
<div class="project-icon" style="background: #557f8c">TR</div>
|
||||||
|
<div class="project-info">
|
||||||
|
<div class="project-name">TidalReach</div>
|
||||||
|
<div class="project-org">Tidal Energy · Offshore</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><div class="country-cell"><span class="country-flag">🇳🇴</span><span class="country-name">Norway</span></div></td>
|
||||||
|
<td><span class="badge mentoring">Mentoring</span></td>
|
||||||
|
<td><span class="status-badge passed">Passed</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="score-cell">
|
||||||
|
<span class="score-num" style="color: var(--green)">8.4</span>
|
||||||
|
<div class="score-bar-wrap"><div class="score-bar-inner high" style="width: 84%"></div></div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile">
|
||||||
|
<div class="juror-stack">
|
||||||
|
<div class="juror-av" style="background: #059669">CG</div>
|
||||||
|
<div class="juror-av" style="background: #7c3aed">NJ</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><span class="updated-cell">3d ago</span></td>
|
||||||
|
<td><a class="view-link" href="#">View →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="project-cell">
|
||||||
|
<div class="project-icon" style="background: #94a3b8">AW</div>
|
||||||
|
<div class="project-info">
|
||||||
|
<div class="project-name">AquaWatch</div>
|
||||||
|
<div class="project-org">Water Quality · Drones</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><div class="country-cell"><span class="country-flag">🇨🇦</span><span class="country-name">Canada</span></div></td>
|
||||||
|
<td><span class="badge evaluation">Evaluation</span></td>
|
||||||
|
<td><span class="status-badge pending">Pending</span></td>
|
||||||
|
<td><span class="score-na">—</span></td>
|
||||||
|
<td class="hide-mobile">
|
||||||
|
<div class="juror-stack">
|
||||||
|
<div class="juror-av" style="background: #0ea5e9">RS</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><span class="updated-cell">3d ago</span></td>
|
||||||
|
<td><a class="view-link" href="#">View →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="project-cell">
|
||||||
|
<div class="project-icon" style="background: #d97706">SM</div>
|
||||||
|
<div class="project-info">
|
||||||
|
<div class="project-name">SeaMapper</div>
|
||||||
|
<div class="project-org">Bathymetry · Robotics</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><div class="country-cell"><span class="country-flag">🇯🇵</span><span class="country-name">Japan</span></div></td>
|
||||||
|
<td><span class="badge filtering">Filtering</span></td>
|
||||||
|
<td><span class="status-badge rejected">Rejected</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="score-cell">
|
||||||
|
<span class="score-num" style="color: var(--red)">4.1</span>
|
||||||
|
<div class="score-bar-wrap"><div class="score-bar-inner poor" style="width: 41%"></div></div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile">
|
||||||
|
<div class="juror-stack">
|
||||||
|
<div class="juror-av" style="background: #7c3aed">VK</div>
|
||||||
|
<div class="juror-av" style="background: #db2777">FD</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><span class="updated-cell">5d ago</span></td>
|
||||||
|
<td><a class="view-link" href="#">View →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="project-cell">
|
||||||
|
<div class="project-icon" style="background: #053d57">DS</div>
|
||||||
|
<div class="project-info">
|
||||||
|
<div class="project-name">DeepSense</div>
|
||||||
|
<div class="project-org">Deep-Sea · Acoustics</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><div class="country-cell"><span class="country-flag">🇳🇿</span><span class="country-name">New Zealand</span></div></td>
|
||||||
|
<td><span class="badge evaluation">Evaluation</span></td>
|
||||||
|
<td><span class="status-badge in-progress">In Progress</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="score-cell">
|
||||||
|
<span class="score-num" style="color: var(--teal)">7.3</span>
|
||||||
|
<div class="score-bar-wrap"><div class="score-bar-inner mid" style="width: 73%"></div></div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile">
|
||||||
|
<div class="juror-stack">
|
||||||
|
<div class="juror-av" style="background: #2563eb">LC</div>
|
||||||
|
<div class="juror-av" style="background: #059669">CE</div>
|
||||||
|
<div class="juror-av" style="background: #d97706">GD</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="hide-mobile"><span class="updated-cell">1h ago</span></td>
|
||||||
|
<td><a class="view-link" href="#">View →</a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="table-footer">
|
||||||
|
<span class="page-info">Page <strong>1</strong> of 6 · 138 results</span>
|
||||||
|
<div class="page-buttons">
|
||||||
|
<button class="page-btn disabled">‹</button>
|
||||||
|
<button class="page-btn active">1</button>
|
||||||
|
<button class="page-btn">2</button>
|
||||||
|
<button class="page-btn">3</button>
|
||||||
|
<span class="page-ellipsis">…</span>
|
||||||
|
<button class="page-btn">6</button>
|
||||||
|
<button class="page-btn">›</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1238
prototypes/observer-reports.html
Normal file
1238
prototypes/observer-reports.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user