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:
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>
|
||||
Reference in New Issue
Block a user