Matt
9304a82e5f
All checks were successful
Build and Push Docker Image / build (push) Successful in 9m28s
Includes full-fidelity prototypes for: - Admin redesign v1 & v2 (dashboard, rounds, projects, members, reports, sidebar states) - Dashboard overhaul with round-type-aware layouts (7 states: intake, filtering, evaluation, finalist submission, live final, deliberation, no active round) - Observer portal redesign (dashboard, projects, project detail, reports) - Early prototypes (round detail, dashboard, filtering) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1257 lines
40 KiB
HTML
1257 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1440">
|
|
<title>Project Detail — MOPC Observer</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--red: #de0f1e;
|
|
--red-light: #fef2f2;
|
|
--dark-blue: #053d57;
|
|
--teal: #557f8c;
|
|
--teal-light: #ecf4f7;
|
|
--bg: #f5f6f8;
|
|
--card: #ffffff;
|
|
--border: #e2e4e9;
|
|
--border-light: #f0f1f3;
|
|
--text: #1a1d23;
|
|
--text-secondary: #6b7080;
|
|
--text-tertiary: #9ca3b0;
|
|
--green: #059669;
|
|
--green-light: #ecfdf5;
|
|
--amber: #d97706;
|
|
--amber-light: #fffbeb;
|
|
--blue: #2563eb;
|
|
--blue-light: #eff6ff;
|
|
--font-display: 'Montserrat', sans-serif;
|
|
--font-mono: 'DM Mono', monospace;
|
|
--radius: 10px;
|
|
--radius-lg: 14px;
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
|
|
--shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
|
|
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: var(--font-display);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
-webkit-font-smoothing: antialiased;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
repeating-conic-gradient(
|
|
from 0deg at 50% 50%,
|
|
transparent 0deg 89deg,
|
|
rgba(85,127,140,0.015) 89deg 91deg,
|
|
transparent 91deg 360deg
|
|
);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ── Nav ── */
|
|
nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
background: rgba(255,255,255,0.92);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid var(--border);
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 32px;
|
|
}
|
|
|
|
.nav-inner {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.nav-left { display: flex; align-items: center; gap: 32px; }
|
|
|
|
.nav-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav-logo {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--red);
|
|
border-radius: 8px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.nav-title { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
|
|
|
|
.nav-role {
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: var(--teal);
|
|
background: var(--teal-light);
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.nav-links { display: flex; gap: 4px; }
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
padding: 8px 14px;
|
|
border-radius: 8px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.nav-links a:hover { color: var(--text); background: var(--bg); }
|
|
.nav-links a.active { color: var(--dark-blue); background: var(--teal-light); }
|
|
|
|
.nav-right { display: flex; align-items: center; gap: 12px; }
|
|
|
|
.nav-avatar {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--dark-blue), var(--teal));
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.read-only-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* ── Content ── */
|
|
.content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 28px 32px 64px;
|
|
}
|
|
|
|
/* ── Breadcrumb ── */
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.breadcrumb a:hover { color: var(--dark-blue); }
|
|
|
|
.breadcrumb .sep {
|
|
color: var(--text-tertiary);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.breadcrumb .current {
|
|
color: var(--text);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ── Project Header ── */
|
|
.project-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: 28px;
|
|
gap: 24px;
|
|
}
|
|
|
|
.project-header-left { flex: 1; }
|
|
|
|
.project-name {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.project-org {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.project-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.meta-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
padding: 5px 12px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.meta-pill .flag { font-size: 14px; }
|
|
.meta-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
|
|
|
|
.project-score-card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 20px 28px;
|
|
text-align: center;
|
|
box-shadow: var(--shadow-sm);
|
|
min-width: 140px;
|
|
}
|
|
|
|
.score-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.score-big {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: var(--dark-blue);
|
|
letter-spacing: -0.03em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.score-big span {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.score-sub {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* ── Tab Bar ── */
|
|
.tab-bar {
|
|
display: flex;
|
|
gap: 2px;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.tab-btn {
|
|
font-family: var(--font-display);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
background: none;
|
|
border: none;
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.tab-btn:hover { color: var(--text); }
|
|
|
|
.tab-btn.active {
|
|
color: var(--dark-blue);
|
|
border-bottom-color: var(--dark-blue);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Cards ── */
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 20px 24px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.card-subtitle {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.card-body { padding: 20px 24px 24px; }
|
|
|
|
/* ── Badges ── */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 3px 10px;
|
|
border-radius: 6px;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge-green { background: var(--green-light); color: var(--green); }
|
|
.badge-teal { background: var(--teal-light); color: var(--teal); }
|
|
.badge-amber { background: var(--amber-light); color: var(--amber); }
|
|
.badge-blue { background: var(--blue-light); color: var(--blue); }
|
|
.badge-gray { background: var(--bg); color: var(--text-tertiary); }
|
|
.badge-red { background: var(--red-light); color: var(--red); }
|
|
|
|
/* ── Tab Content ── */
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
|
|
/* ── Overview Tab ── */
|
|
.overview-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 340px;
|
|
gap: 20px;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.info-item {
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── Round History Timeline ── */
|
|
.timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 24px;
|
|
bottom: 24px;
|
|
width: 2px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.timeline-item {
|
|
display: flex;
|
|
gap: 16px;
|
|
padding: 16px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-dot {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
z-index: 1;
|
|
border: 3px solid var(--bg);
|
|
}
|
|
|
|
.timeline-dot.completed { background: var(--green); }
|
|
.timeline-dot.active { background: var(--teal); }
|
|
.timeline-dot.draft { background: var(--border); }
|
|
|
|
.timeline-dot svg { width: 14px; height: 14px; color: white; }
|
|
|
|
.timeline-body { flex: 1; padding-top: 4px; }
|
|
|
|
.timeline-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.timeline-title .badge { margin-left: 8px; }
|
|
|
|
.timeline-detail {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* ── Score Summary ── */
|
|
.scores-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.score-mini-card {
|
|
background: var(--bg);
|
|
border-radius: var(--radius);
|
|
padding: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.score-mini-label {
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.score-mini-val {
|
|
font-family: var(--font-mono);
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: var(--dark-blue);
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ── Evaluation Cards ── */
|
|
.eval-card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.eval-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
background: linear-gradient(180deg, rgba(245,246,248,0.5) 0%, transparent 100%);
|
|
}
|
|
|
|
.eval-juror {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.eval-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: white;
|
|
}
|
|
|
|
.eval-juror-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.eval-juror-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.eval-juror-role {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.eval-score-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--dark-blue);
|
|
background: var(--teal-light);
|
|
padding: 6px 14px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.eval-score-badge span {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.eval-body { padding: 18px 20px; }
|
|
|
|
.eval-criteria-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.eval-criteria-row:last-child { border-bottom: none; }
|
|
|
|
.eval-criteria-name {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
width: 110px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.eval-criteria-bar {
|
|
flex: 1;
|
|
height: 6px;
|
|
background: var(--bg);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.eval-criteria-bar .fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
background: var(--teal);
|
|
}
|
|
|
|
.eval-criteria-val {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--dark-blue);
|
|
width: 32px;
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.eval-comment {
|
|
margin-top: 14px;
|
|
padding: 14px 16px;
|
|
background: var(--bg);
|
|
border-radius: var(--radius);
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
border-left: 3px solid var(--teal);
|
|
}
|
|
|
|
.eval-comment-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.eval-ai-summary {
|
|
margin-top: 14px;
|
|
padding: 14px 16px;
|
|
background: linear-gradient(135deg, rgba(85,127,140,0.04), rgba(5,61,87,0.04));
|
|
border-radius: var(--radius);
|
|
border: 1px solid rgba(85,127,140,0.15);
|
|
}
|
|
|
|
.eval-ai-label {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--teal);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.eval-ai-label svg { width: 12px; height: 12px; }
|
|
|
|
.eval-ai-text {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ── Files Tab ── */
|
|
.file-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.file-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 14px 18px;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.file-row:hover {
|
|
border-color: var(--teal);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.file-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.file-icon svg { width: 20px; height: 20px; }
|
|
|
|
.file-icon.pdf { background: var(--red-light); color: var(--red); }
|
|
.file-icon.doc { background: var(--blue-light); color: var(--blue); }
|
|
.file-icon.img { background: var(--green-light); color: var(--green); }
|
|
.file-icon.xls { background: var(--green-light); color: var(--green); }
|
|
|
|
.file-info { flex: 1; }
|
|
|
|
.file-name {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
|
|
.file-meta {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.file-download {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--teal);
|
|
background: var(--teal-light);
|
|
border: 1px solid transparent;
|
|
padding: 6px 14px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.15s;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-download:hover {
|
|
border-color: var(--teal);
|
|
background: white;
|
|
}
|
|
|
|
/* ── Mono ── */
|
|
.mono { font-family: var(--font-mono); font-size: 13px; }
|
|
|
|
/* ── Tables ── */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.data-table th {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg);
|
|
}
|
|
|
|
.data-table td {
|
|
font-size: 13px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.data-table tr:last-child td { border-bottom: none; }
|
|
|
|
/* ── Progress bar ── */
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 6px;
|
|
background: var(--bg);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar .fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* ── Animations ── */
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-in { animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
|
|
.delay-1 { animation-delay: 0.05s; }
|
|
.delay-2 { animation-delay: 0.1s; }
|
|
.delay-3 { animation-delay: 0.15s; }
|
|
.delay-4 { animation-delay: 0.2s; }
|
|
.delay-5 { animation-delay: 0.25s; }
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 900px) {
|
|
.overview-grid { grid-template-columns: 1fr; }
|
|
.scores-grid { grid-template-columns: repeat(3, 1fr); }
|
|
.info-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
nav { padding: 0 16px; }
|
|
.content { padding: 20px 16px 48px; }
|
|
.project-header { flex-direction: column; }
|
|
.scores-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ── Navigation ── -->
|
|
<nav>
|
|
<div class="nav-inner">
|
|
<div class="nav-left">
|
|
<a href="#" class="nav-brand">
|
|
<div class="nav-logo">M</div>
|
|
<div><div class="nav-title">MOPC</div></div>
|
|
</a>
|
|
<span class="nav-role">Observer</span>
|
|
<div class="nav-links">
|
|
<a href="observer-dashboard-redesign.html">Dashboard</a>
|
|
<a href="observer-projects.html" class="active">Projects</a>
|
|
<a href="observer-reports.html">Reports</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-right">
|
|
<span class="read-only-badge">Read Only</span>
|
|
<div class="nav-avatar">MC</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ── Content ── -->
|
|
<div class="content">
|
|
|
|
<!-- Breadcrumb -->
|
|
<div class="breadcrumb animate-in">
|
|
<a href="observer-dashboard-redesign.html">Dashboard</a>
|
|
<span class="sep">/</span>
|
|
<a href="observer-projects.html">Projects</a>
|
|
<span class="sep">/</span>
|
|
<span class="current">OceanGuard Sentinel Network</span>
|
|
</div>
|
|
|
|
<!-- Project Header -->
|
|
<div class="project-header animate-in delay-1">
|
|
<div class="project-header-left">
|
|
<h1 class="project-name">OceanGuard Sentinel Network</h1>
|
|
<div class="project-org">Blue Horizon Foundation — Monaco</div>
|
|
<div class="project-meta">
|
|
<span class="meta-pill">
|
|
<span class="flag">🇲🇨</span> Monaco
|
|
</span>
|
|
<span class="meta-pill">
|
|
<span class="dot" style="background: var(--teal);"></span> R3 Expert Evaluation
|
|
</span>
|
|
<span class="badge badge-teal">In Progress</span>
|
|
<span class="meta-pill">
|
|
<svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
|
|
3 jurors assigned
|
|
</span>
|
|
<span class="meta-pill">
|
|
<svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
|
|
Marine Tech, Monitoring
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-score-card">
|
|
<div class="score-label">Overall Score</div>
|
|
<div class="score-big">9.2<span>/10</span></div>
|
|
<div class="score-sub">from 2 of 3 evaluations</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Bar -->
|
|
<div class="tab-bar animate-in delay-2">
|
|
<button class="tab-btn active" onclick="switchTab('overview')">Overview</button>
|
|
<button class="tab-btn" onclick="switchTab('evaluations')">Evaluations</button>
|
|
<button class="tab-btn" onclick="switchTab('files')">Files</button>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════════ -->
|
|
<!-- TAB 1: OVERVIEW -->
|
|
<!-- ═══════════════════════════════════════════════ -->
|
|
<div class="tab-content active" id="tab-overview">
|
|
<div class="overview-grid">
|
|
|
|
<!-- Left: Info + Scores -->
|
|
<div>
|
|
<!-- Score Summary -->
|
|
<div class="card animate-in delay-3" style="margin-bottom: 20px;">
|
|
<div class="card-header">
|
|
<div class="card-title">Score Summary</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="scores-grid">
|
|
<div class="score-mini-card">
|
|
<div class="score-mini-label">Innovation</div>
|
|
<div class="score-mini-val">9.0</div>
|
|
</div>
|
|
<div class="score-mini-card">
|
|
<div class="score-mini-label">Impact</div>
|
|
<div class="score-mini-val">9.5</div>
|
|
</div>
|
|
<div class="score-mini-card">
|
|
<div class="score-mini-label">Feasibility</div>
|
|
<div class="score-mini-val">8.5</div>
|
|
</div>
|
|
<div class="score-mini-card">
|
|
<div class="score-mini-label">Scalability</div>
|
|
<div class="score-mini-val">9.0</div>
|
|
</div>
|
|
<div class="score-mini-card">
|
|
<div class="score-mini-label">Presentation</div>
|
|
<div class="score-mini-val">10.0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Summary -->
|
|
<div class="eval-ai-summary">
|
|
<div class="eval-ai-label">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z"/></svg>
|
|
AI Synthesis
|
|
</div>
|
|
<div class="eval-ai-text">
|
|
Strong consensus among evaluators on technical excellence and innovative approach to marine monitoring. The project demonstrates exceptional scalability potential with its modular sensor architecture. Key strength: proven pilot results in Mediterranean. Primary concern: long-term maintenance costs for deep-sea sensor nodes.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Info -->
|
|
<div class="card animate-in delay-4">
|
|
<div class="card-header">
|
|
<div class="card-title">Project Information</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Submitted</div>
|
|
<div class="info-value">Jan 12, 2026</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Category</div>
|
|
<div class="info-value">Marine Technology</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Organization Type</div>
|
|
<div class="info-value">Non-Profit Foundation</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Country</div>
|
|
<div class="info-value">🇲🇨 Monaco</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Budget Requested</div>
|
|
<div class="info-value mono">€320,000</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Project Duration</div>
|
|
<div class="info-value">24 months</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">AI Screening Score</div>
|
|
<div class="info-value mono">8.4 / 10</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Last Updated</div>
|
|
<div class="info-value">Feb 18, 2026</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Round History Timeline -->
|
|
<div>
|
|
<div class="card animate-in delay-4">
|
|
<div class="card-header">
|
|
<div class="card-title">Round History</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot completed">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
</div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-title">
|
|
R1 — Application Intake
|
|
<span class="badge badge-green">Passed</span>
|
|
</div>
|
|
<div class="timeline-detail">Received Jan 12 • Completed Jan 14</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot completed">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
</div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-title">
|
|
R2 — AI Screening
|
|
<span class="badge badge-green">Passed</span>
|
|
</div>
|
|
<div class="timeline-detail">Score: 8.4/10 • Completed Jan 15</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot active">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="3"/></svg>
|
|
</div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-title">
|
|
R3 — Expert Evaluation
|
|
<span class="badge badge-teal">In Progress</span>
|
|
</div>
|
|
<div class="timeline-detail">2 of 3 evaluations completed • Score: 9.2</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot draft"></div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-title" style="color: var(--text-tertiary);">
|
|
R4 — Document Submission
|
|
<span class="badge badge-gray">Pending</span>
|
|
</div>
|
|
<div class="timeline-detail">Not yet started</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot draft"></div>
|
|
<div class="timeline-body">
|
|
<div class="timeline-title" style="color: var(--text-tertiary);">
|
|
R5 — Semi-Final Evaluation
|
|
<span class="badge badge-gray">Pending</span>
|
|
</div>
|
|
<div class="timeline-detail">Not yet started</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════════ -->
|
|
<!-- TAB 2: EVALUATIONS -->
|
|
<!-- ═══════════════════════════════════════════════ -->
|
|
<div class="tab-content" id="tab-evaluations">
|
|
|
|
<!-- Evaluation 1 -->
|
|
<div class="eval-card animate-in delay-2">
|
|
<div class="eval-header">
|
|
<div class="eval-juror">
|
|
<div class="eval-avatar" style="background: linear-gradient(135deg, #053d57, #557f8c);">EP</div>
|
|
<div class="eval-juror-info">
|
|
<span class="eval-juror-name">Dr. Elena Petrov</span>
|
|
<span class="eval-juror-role">Chair • Submitted Feb 16, 2026</span>
|
|
</div>
|
|
</div>
|
|
<div class="eval-score-badge">9.4<span>/10</span></div>
|
|
</div>
|
|
<div class="eval-body">
|
|
<div class="eval-criteria-row">
|
|
<span class="eval-criteria-name">Innovation</span>
|
|
<div class="eval-criteria-bar"><div class="fill" style="width:90%;"></div></div>
|
|
<span class="eval-criteria-val">9.0</span>
|
|
</div>
|
|
<div class="eval-criteria-row">
|
|
<span class="eval-criteria-name">Impact</span>
|
|
<div class="eval-criteria-bar"><div class="fill" style="width:100%;"></div></div>
|
|
<span class="eval-criteria-val">10.0</span>
|
|
</div>
|
|
<div class="eval-criteria-row">
|
|
<span class="eval-criteria-name">Feasibility</span>
|
|
<div class="eval-criteria-bar"><div class="fill" style="width:90%;"></div></div>
|
|
<span class="eval-criteria-val">9.0</span>
|
|
</div>
|
|
<div class="eval-criteria-row">
|
|
<span class="eval-criteria-name">Scalability</span>
|
|
<div class="eval-criteria-bar"><div class="fill" style="width:90%;"></div></div>
|
|
<span class="eval-criteria-val">9.0</span>
|
|
</div>
|
|
<div class="eval-criteria-row">
|
|
<span class="eval-criteria-name">Presentation</span>
|
|
<div class="eval-criteria-bar"><div class="fill" style="width:100%;"></div></div>
|
|
<span class="eval-criteria-val">10.0</span>
|
|
</div>
|
|
<div class="eval-comment">
|
|
<div class="eval-comment-label">Juror Comments</div>
|
|
Exceptional project with a proven track record in Mediterranean marine monitoring. The modular sensor architecture is particularly impressive, allowing easy scaling to different marine environments. The team has demonstrated strong technical capabilities and clear understanding of the challenges. I recommend this project advance to the next round with high confidence.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Evaluation 2 -->
|
|
<div class="eval-card animate-in delay-3">
|
|
<div class="eval-header">
|
|
<div class="eval-juror">
|
|
<div class="eval-avatar" style="background: linear-gradient(135deg, #059669, #34d399);">MT</div>
|
|
<div class="eval-juror-info">
|
|
<span class="eval-juror-name">Prof. Marco Tanaka</span>
|
|
<span class="eval-juror-role">Expert • Submitted Feb 18, 2026</span>
|
|
</div>
|
|
</div>
|
|
<div class="eval-score-badge">9.0<span>/10</span></div>
|
|
</div>
|
|
<div class="eval-body">
|
|
<div class="eval-criteria-row">
|
|
<span class="eval-criteria-name">Innovation</span>
|
|
<div class="eval-criteria-bar"><div class="fill" style="width:90%;"></div></div>
|
|
<span class="eval-criteria-val">9.0</span>
|
|
</div>
|
|
<div class="eval-criteria-row">
|
|
<span class="eval-criteria-name">Impact</span>
|
|
<div class="eval-criteria-bar"><div class="fill" style="width:90%;"></div></div>
|
|
<span class="eval-criteria-val">9.0</span>
|
|
</div>
|
|
<div class="eval-criteria-row">
|
|
<span class="eval-criteria-name">Feasibility</span>
|
|
<div class="eval-criteria-bar"><div class="fill" style="width:80%;"></div></div>
|
|
<span class="eval-criteria-val">8.0</span>
|
|
</div>
|
|
<div class="eval-criteria-row">
|
|
<span class="eval-criteria-name">Scalability</span>
|
|
<div class="eval-criteria-bar"><div class="fill" style="width:90%;"></div></div>
|
|
<span class="eval-criteria-val">9.0</span>
|
|
</div>
|
|
<div class="eval-criteria-row">
|
|
<span class="eval-criteria-name">Presentation</span>
|
|
<div class="eval-criteria-bar"><div class="fill" style="width:100%;"></div></div>
|
|
<span class="eval-criteria-val">10.0</span>
|
|
</div>
|
|
<div class="eval-comment">
|
|
<div class="eval-comment-label">Juror Comments</div>
|
|
Technically sound proposal with clear innovation in underwater sensor deployment methodology. Budget allocation is well-justified, though I have minor concerns about long-term maintenance costs for the deep-sea nodes. The team's previous work with the Pelagos Sanctuary partnership adds significant credibility.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Evaluation 3 - Pending -->
|
|
<div class="eval-card animate-in delay-4" style="opacity: 0.6;">
|
|
<div class="eval-header">
|
|
<div class="eval-juror">
|
|
<div class="eval-avatar" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">SN</div>
|
|
<div class="eval-juror-info">
|
|
<span class="eval-juror-name">Dr. Sarah Nakamura</span>
|
|
<span class="eval-juror-role">Expert • Assigned Feb 10, 2026</span>
|
|
</div>
|
|
</div>
|
|
<span class="badge badge-amber">Pending</span>
|
|
</div>
|
|
<div class="eval-body" style="padding: 24px 20px; text-align: center;">
|
|
<div style="color: var(--text-tertiary); font-size: 13px;">
|
|
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" style="display:inline-block; vertical-align:-4px; margin-right:6px;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
Evaluation not yet submitted • 10 days since assignment
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════════ -->
|
|
<!-- TAB 3: FILES -->
|
|
<!-- ═══════════════════════════════════════════════ -->
|
|
<div class="tab-content" id="tab-files">
|
|
|
|
<div class="card animate-in delay-2">
|
|
<div class="card-header">
|
|
<div>
|
|
<div class="card-title">Project Files</div>
|
|
<div class="card-subtitle">6 files • 24.8 MB total</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="file-list">
|
|
|
|
<div class="file-row">
|
|
<div class="file-icon pdf">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">Project_Proposal_OceanGuard_2026.pdf</div>
|
|
<div class="file-meta">PDF • 8.2 MB • Uploaded Jan 12, 2026</div>
|
|
</div>
|
|
<a href="#" class="file-download">Download</a>
|
|
</div>
|
|
|
|
<div class="file-row">
|
|
<div class="file-icon pdf">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">Budget_Breakdown_Detailed.pdf</div>
|
|
<div class="file-meta">PDF • 1.4 MB • Uploaded Jan 12, 2026</div>
|
|
</div>
|
|
<a href="#" class="file-download">Download</a>
|
|
</div>
|
|
|
|
<div class="file-row">
|
|
<div class="file-icon doc">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">Technical_Architecture_Document.docx</div>
|
|
<div class="file-meta">DOCX • 3.6 MB • Uploaded Jan 12, 2026</div>
|
|
</div>
|
|
<a href="#" class="file-download">Download</a>
|
|
</div>
|
|
|
|
<div class="file-row">
|
|
<div class="file-icon xls">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0112 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M10.875 12c-.621 0-1.125.504-1.125 1.125M12 12c.621 0 1.125.504 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 0v1.5c0 .621-.504 1.125-1.125 1.125M12 15.375c-.621 0-1.125.504-1.125 1.125"/></svg>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">Impact_Metrics_Projections.xlsx</div>
|
|
<div class="file-meta">XLSX • 2.1 MB • Uploaded Jan 12, 2026</div>
|
|
</div>
|
|
<a href="#" class="file-download">Download</a>
|
|
</div>
|
|
|
|
<div class="file-row">
|
|
<div class="file-icon img">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5a1.5 1.5 0 001.5-1.5V5.25a1.5 1.5 0 00-1.5-1.5H3.75a1.5 1.5 0 00-1.5 1.5v14.25a1.5 1.5 0 001.5 1.5zm5.25-12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/></svg>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">Sensor_Deployment_Photos.zip</div>
|
|
<div class="file-meta">ZIP • 8.3 MB • Uploaded Jan 13, 2026</div>
|
|
</div>
|
|
<a href="#" class="file-download">Download</a>
|
|
</div>
|
|
|
|
<div class="file-row">
|
|
<div class="file-icon pdf">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
|
|
</div>
|
|
<div class="file-info">
|
|
<div class="file-name">Letters_of_Support.pdf</div>
|
|
<div class="file-meta">PDF • 1.2 MB • Uploaded Jan 14, 2026</div>
|
|
</div>
|
|
<a href="#" class="file-download">Download</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function switchTab(tab) {
|
|
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
|
event.target.classList.add('active');
|
|
|
|
document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
|
|
document.getElementById('tab-' + tab).classList.add('active');
|
|
|
|
// Re-trigger animations
|
|
document.getElementById('tab-' + tab).querySelectorAll('.animate-in').forEach(el => {
|
|
el.style.animation = 'none';
|
|
el.offsetHeight;
|
|
el.style.animation = '';
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|