MOPC/MOPC-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add HTML prototypes for admin redesign and dashboard overhaul
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m28s
Details

Browse Source 
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:
Matt
2026-02-22 14:51:47 +01:00
parent f7bc3b4dd2
commit 9304a82e5f
22 changed files with 16742 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

641
prototypes/observer-projects.html Normal file
View 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">&#9650;</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 &rarr;</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 &rarr;</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 &rarr;</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 &rarr;</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 &rarr;</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">&mdash;</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 &rarr;</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 &rarr;</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 &rarr;</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">&lsaquo;</button>
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<span class="page-ellipsis">&hellip;</span>
<button class="page-btn">6</button>
<button class="page-btn">&rsaquo;</button>
</div>
</div>
</div>
</div>
</body>
</html>