Spaces:
Running
Running
Download index.html from elfersol/anycoder-c72069ee: direct link, hf CLI and curl.
- Browser
- Download file 28.2 kB
-
https://huggingface.co/spaces/elfersol/anycoder-c72069ee/resolve/main/index.html
- Command line
-
hf download hf://spaces/elfersol/anycoder-c72069ee/index.html
-
curl -L -o index.html https://huggingface.co/spaces/elfersol/anycoder-c72069ee/resolve/main/index.html
28.2 kB
<!DOCTYPE html>
<!-- L3 Dashboard v2026-03-30 build:1774874368 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>L3 Grants Planning Dashboard</title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--bg: #f0f2f5;
--surface: #ffffff;
--surface2: #f7f8fa;
--border: #e2e5ea;
--border-strong: #c8cdd6;
--text: #111827;
--text-2: #4b5563;
--text-3: #9ca3af;
--accent: #1d4ed8;
--accent-hover: #1e40af;
--accent-light: #eff6ff;
--danger: #dc2626;
--success: #16a34a;
--warn: #d97706;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);
--radius: 8px;
--radius-sm: 5px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
input[type=number] {
-moz-appearance: textfield
}
body {
font-family: 'Inter', sans-serif;
font-size: 13px;
background: var(--bg);
color: var(--text);
line-height: 1.5
}
/* ββ HEADER ββ */
header {
background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
color: #fff;
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
position: relative;
z-index: 20;
}
header h1 {
font-size: 15px;
font-weight: 700;
letter-spacing: -.01em;
flex: 1
}
header .header-badge {
font-size: 10px;
background: rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .8);
padding: 3px 10px;
border-radius: 20px;
font-weight: 500;
letter-spacing: .02em;
white-space: nowrap
}
.header-actions {
display: flex;
gap: 8px;
align-items: center
}
.header-btn {
padding: 6px 14px;
font-size: 11px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
letter-spacing: .02em;
transition: all .15s;
border: none;
display: flex;
align-items: center;
gap: 5px
}
.header-btn-primary {
background: #2563eb;
color: #fff
}
.header-btn-primary:hover {
background: #1d4ed8
}
.header-btn-secondary {
background: var(--surface2);
color: var(--text);
border: 1px solid var(--border-strong)
}
.header-btn-secondary:hover {
background: #e5e7eb
}
/* ββ LAYOUT ββ */
.layout {
display: grid;
grid-template-columns: 320px 1fr;
height: calc(100vh - 56px)
}
/* ββ SIDEBAR ββ */
.sidebar {
background: #ffffff;
border-right: 1px solid var(--border);
padding: 14px 14px 20px;
overflow-y: auto;
height: 100%;
color: #111827
}
.panel {
margin-bottom: 6px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
background: #ffffff
}
.panel-title {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-2);
padding: 9px 12px;
background: #f7f8fa;
border-bottom: 1px solid transparent
}
.panel-title.collapsible {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
border-bottom: none
}
.panel-title.collapsible:hover {
color: var(--text);
background: #eef0f3
}
.panel-title.collapsible.open {
border-bottom: 1px solid var(--border)
}
.panel-title.collapsible.open .chevron {
transform: rotate(180deg)
}
.chevron {
transition: transform .2s;
font-size: 9px;
color: var(--text-3)
}
.panel-body {
padding: 12px
}
.panel-body.hidden {
display: none
}
.calc-tooltip-wrap {
position: relative;
display: inline-flex;
align-items: center
}
.calc-tooltip-wrap .tt {
display: none;
position: fixed;
z-index: 200;
max-width: 260px;
background: #1e293b;
color: #e2e8f0;
font-size: 10px;
line-height: 1.7;
padding: 10px 12px;
border-radius: 6px;
pointer-events: none;
box-shadow: var(--shadow-md)
}
.calc-tooltip-wrap:hover .tt {
display: block
}
.tt strong {
color: #fbbf24
}
.field {
margin-bottom: 10px
}
.field label {
display: block;
font-size: 10px;
font-weight: 600;
color: var(--text-2);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: .05em
}
.field input[type=number] {
width: 100%;
border: 1px solid var(--border-strong);
padding: 6px 8px;
font-size: 12px;
border-radius: var(--radius-sm);
font-family: inherit;
transition: border-color .15s;
background: var(--surface)
}
.field input[type=number]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37, 99, 235, .1)
}
.field select {
width: 100%;
border: 1px solid var(--border-strong);
padding: 6px 8px;
font-size: 12px;
border-radius: var(--radius-sm);
background: var(--surface);
font-family: inherit
}
.section-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--text-3);
margin-bottom: 8px;
margin-top: 2px
}
.radio-group {
display: flex;
flex-wrap: wrap;
gap: 5px
}
.radio-group label {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 500;
cursor: pointer;
background: var(--surface2);
padding: 4px 9px;
border-radius: 4px;
border: 1px solid var(--border);
transition: all .12s
}
.radio-group input {
cursor: pointer;
accent-color: var(--accent)
}
.radio-group label:has(input:checked) {
background: var(--accent);
color: #fff;
border-color: var(--accent)
}
.tier-table {
width: 100%;
border-collapse: collapse;
font-size: 11px
}
.tier-table th {
background: var(--surface2);
padding: 5px 7px;
text-align: left;
font-weight: 600;
border: 1px solid var(--border);
font-size: 10px;
color: var(--text-2)
}
.tier-table td {
padding: 4px 7px;
border: 1px solid var(--border)
}
.tier-table input[type=number] {
width: 58px;
border: 1px solid var(--border);
padding: 3px 5px;
font-size: 11px;
border-radius: 3px;
background: var(--surface)
}
.donor-row input[type=text] {
border: 1px solid var(--border);
padding: 4px 6px;
font-size: 11px;
border-radius: 4px;
width: 100%;
background: var(--surface);
font-family: inherit
}
.donor-row input[type=number] {
border: 1px solid var(--border);
padding: 4px 6px;
font-size: 11px;
border-radius: 4px;
width: 100%;
text-align: right;
background: var(--surface);
font-family: inherit
}
#eligMatrix th {
background: var(--surface2);
padding: 6px 10px;
border: 1px solid var(--border);
font-size: 10px;
font-weight: 600;
text-align: center;
position: sticky;
top: 0;
z-index: 2;
white-space: nowrap;
color: var(--text-2)
}
#eligMatrix th.ctry-col {
text-align: left;
min-width: 160px;
position: sticky;
left: 0;
z-index: 3;
background: var(--surface2)
}
#eligMatrix td {
padding: 5px 8px;
border: 1px solid var(--border);
text-align: center
}
#eligMatrix td.ctry-col {
text-align: left;
font-size: 11px;
padding: 5px 10px;
position: sticky;
left: 0;
z-index: 1;
border-right: 1px solid var(--border)
}
#eligMatrix tr:nth-child(odd) td.ctry-col {
background: var(--surface)
}
/* ββ ALTERNATING ROW COLORS ββ */
#eligMatrix tr:nth-child(even) td {
background: #fafbfc !important
}
#eligMatrix tr:nth-child(even) td.ctry-col {
background: #fafbfc !important
}
#eligMatrix tr:hover td {
background: #eff6ff !important
}
#mechEligBody tr:nth-child(even) td {
background: #fafbfc !important
}
#mechEligBody tr:hover td {
background: #eff6ff !important
}
#tblBody tr:nth-child(even) td {
background: #fafbfc
}
#tierTbody tr:nth-child(even) td {
background: #fafbfc
}
#donorRows tr:nth-child(even) td {
background: #fafbfc
}
/* mech cost table β no fixed id, use class hook */
.mech-cost-table tbody tr:nth-child(even) td {
background: #fafbfc
}
/* fx panel table */
#fxPanel table tr:nth-child(even) td {
background: #fafbfc
}
#eligMatrix tr:hover td {
background: #eff6ff !important
}
.elig-check {
cursor: pointer;
width: 14px;
height: 14px;
accent-color: var(--accent)
}
.btn {
display: block;
width: 100%;
padding: 8px 12px;
background: var(--accent);
color: #fff;
border: none;
cursor: pointer;
font-size: 11px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
border-radius: var(--radius-sm);
margin-top: 4px;
font-family: inherit;
transition: background .15s
}
.btn:hover {
background: var(--accent-hover)
}
.btn-outline {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong)
}
.btn-outline:hover {
background: var(--surface2);
border-color: var(--text)
}
.btn-sm {
font-size: 10px;
padding: 5px 10px
}
/* ββ MAIN AREA ββ */
.main {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%
}
.kpi-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 16px
}
.kpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: var(--shadow-sm)
}
.kpi-val {
font-size: 20px;
font-weight: 700;
line-height: 1;
color: var(--text)
}
.kpi-label {
font-size: 10px;
color: var(--text-3);
margin-top: 5px;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 500
}
.kpi-sub {
font-size: 10px;
color: var(--text-3);
margin-top: 2px
}
.charts-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 16px
}
.chart-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px;
box-shadow: var(--shadow-sm)
}
.chart-box h3 {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-3);
margin-bottom: 10px;
font-weight: 600
}
.chart-wrap {
position: relative;
height: 160px
}
/* ββ TABS ββ */
.tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
padding: 0 16px;
background: var(--surface);
box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
}
.tab {
padding: 12px 16px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
cursor: pointer;
border: none;
background: none;
color: var(--text-3);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .15s;
font-family: inherit
}
.tab:hover {
color: var(--text-2)
}
.tab.active {
color: var(--accent);
border-bottom-color: var(--accent)
}
#page-r1 {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
min-height: 0
}
#page-r1-map {
flex: 1;
overflow: hidden;
min-height: 0
}
.tbl-controls {
flex-shrink: 0;
display: flex;
gap: 8px;
padding: 10px 16px;
flex-wrap: wrap;
align-items: center;
background: var(--surface);
border-bottom: 1px solid var(--border)
}
.tbl-controls input,
.tbl-controls select {
border: 1px solid var(--border-strong);
padding: 5px 9px;
font-size: 11px;
background: var(--surface);
border-radius: var(--radius-sm);
font-family: inherit;
color: var(--text)
}
.tbl-controls input:focus,
.tbl-controls select:focus {
outline: none;
border-color: var(--accent)
}
.tbl-controls .tbl-export-btn {
margin-left: auto;
padding: 5px 12px;
font-size: 10px;
font-weight: 600;
background: var(--surface2);
color: var(--text-2);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
cursor: pointer;
letter-spacing: .03em;
text-transform: uppercase;
transition: all .15s;
font-family: inherit
}
.tbl-controls .tbl-export-btn:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent)
}
.tbl-wrap {
flex: 1;
overflow-x: hidden;
overflow-y: auto;
padding: 0 0 0
}
table {
width: 100%;
border-collapse: collapse;
font-size: 11px
}
thead {
position: sticky;
top: 0;
z-index: 2
}
.tbl-wrap thead th {
background: #1e293b;
color: #e2e8f0;
padding: 6px 5px;
text-align: left;
cursor: pointer;
white-space: normal;
font-size: 9px;
letter-spacing: .03em;
text-transform: uppercase;
font-weight: 600;
border-right: 1px solid rgba(255, 255, 255, .06);
line-height: 1.3
}
.tbl-wrap thead th:hover {
background: #334155
}
.tbl-wrap thead th.sorted {
background: #2563eb
}
tbody tr {
border-bottom: 1px solid var(--border)
}
tbody tr:hover {
background: var(--accent-light)
}
tbody td {
padding: 7px 11px;
vertical-align: middle
}
.badge {
display: inline-block;
padding: 2px 8px;
font-size: 9px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
border-radius: 20px
}
.b-vl {
background: #fee2e2;
color: #991b1b
}
.b-l {
background: #fef3c7;
color: #92400e
}
.b-lm {
background: #fef9c3;
color: #713f12
}
.b-um {
background: #dcfce7;
color: #166534
}
.b-h {
background: #dbeafe;
color: #1e3a8a
}
.b-u {
background: #f1f5f9;
color: #475569
}
.m-rr {
color: #16a34a;
font-weight: 600
}
.m-el {
color: #2563eb;
font-weight: 600
}
.m-cv {
color: #d97706;
font-weight: 600
}
.m-tbd {
color: var(--text-3)
}
td select {
border: 1px solid var(--border);
padding: 3px 5px;
font-size: 11px;
background: var(--surface);
width: 100%;
border-radius: 3px;
font-family: inherit
}
td input[type=number] {
border: 1px solid var(--border);
padding: 3px 6px;
font-size: 11px;
width: 58px;
border-radius: 3px;
background: var(--surface);
font-family: inherit
}
/* ββ SUMMARY BAR ββ */
.summary-bar {
background: linear-gradient(135deg, #0f172a, #1e3a5f);
color: #fff;
padding: 5px 20px;
display: flex;
gap: 20px;
font-size: 11px;
z-index: 30;
flex-wrap: nowrap;
align-items: center;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 36px
}
.summary-bar .s-item {
display: flex;
flex-direction: column;
gap: 1px
}
.summary-bar .s-label {
font-size: 9px;
color: rgba(255, 255, 255, .5);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 500
}
.summary-bar .s-val {
font-size: 12px;
font-weight: 700;
color: #fff
}
.summary-bar .s-divider {
width: 1px;
height: 28px;
background: rgba(255, 255, 255, .15);
align-self: center
}
.map-mode-btn {
padding: 4px 11px;
font-size: 10px;
font-weight: 600;
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text-2);
cursor: pointer;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: .04em;
transition: all .12s;
font-family: inherit
}
.map-mode-btn.active {
background: var(--accent);
color: #fff;
border-color: var(--accent)
}
.map-mode-btn:hover:not(.active) {
background: var(--surface2);
border-color: var(--text-2)
}
#mapSvg {
width: 100%;
height: 100%;
background: #ffffff;
cursor: grab
}
#mapSvg:active {
cursor: grabbing
}
/* ββ MODAL OVERLAY ββ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px)
}
.modal-box {
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--shadow-md), 0 0 0 1px var(--border);
padding: 24px;
max-width: 680px;
width: 90%;
max-height: 85vh;
display: flex;
flex-direction: column
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px
}
.modal-title {
font-size: 14px;
font-weight: 700;
color: var(--text)
}
.modal-sub {
font-size: 11px;
color: var(--text-3);
margin-top: 2px
}
.modal-close {
border: none;
background: none;
cursor: pointer;
font-size: 20px;
color: var(--text-3);
line-height: 1;
padding: 0 4px;
transition: color .12s
}
.modal-close:hover {
color: var(--text)
}
.modal-body {
flex: 1;
overflow-y: auto
}
.modal-footer {
margin-top: 16px;
display: flex;
gap: 8px;
justify-content: flex-end;
align-items: center
}
.modal-textarea {
width: 100%;
height: 260px;
font-family: 'Courier New', monospace;
font-size: 11px;
border: 1px solid var(--border-strong);
padding: 10px;
border-radius: var(--radius-sm);
resize: vertical;
color: var(--text);
background: var(--surface2)
}
.modal-textarea:focus {
outline: none;
border-color: var(--accent)
}
.modal-btn {
padding: 7px 16px;
font-size: 11px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
border: none;
font-family: inherit;
transition: all .15s
}
.modal-btn-primary {
background: var(--accent);
color: #fff
}
.modal-btn-primary:hover {
background: var(--accent-hover)
}
.modal-btn-secondary {
background: var(--surface2);
color: var(--text);
border: 1px solid var(--border-strong)
}
.modal-btn-secondary:hover {
background: var(--bg)
}
.modal-btn-danger {
background: #dc2626;
color: #fff
}
.modal-btn-danger:hover {
background: #b91c1c
}
.status-msg {
font-size: 11px;
margin-right: auto
}
.status-ok {
color: var(--success)
}
.status-err {
color: var(--danger)
}
/* ββ NOTIFICATION TOAST ββ */
.toast {
position: fixed;
bottom: 60px;
right: 20px;
background: #1e293b;
color: #fff;
padding: 10px 18px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
z-index: 99999;
opacity: 0;
transform: translateY(6px);
transition: all .25s;
pointer-events: none
}
.toast.show {
opacity: 1;
transform: translateY(0)
}
.toast.toast-ok {
border-left: 3px solid var(--success)
}
.toast.toast-err {
border-left: 3px solid var(--danger)
}
/* Google connect overlay */
#gsOverlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(15, 23, 42, .85);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center
}
#gsOverlayBox {
background: var(--surface);
border-radius: 12px;
padding: 40px 48px;
text-align: center;
max-width: 400px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .4)
}
#gsOverlayBox h2 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: var(--text)
}
#gsOverlayBox p {
font-size: 13px;
color: var(--text-2);
margin-bottom: 28px;
line-height: 1.6
}
#gsOverlayBtn {
padding: 12px 28px;
font-size: 13px;
font-weight: 700;
background: #2563eb;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background .15s
}
#gsOverlayBtn:hover {
background: #1d4ed8
}
#gsOverlayStatus {
margin-top: 16px;
font-size: 12px;
color: var(--text-3);
min-height: 18px
}
/* custom combobox dropdown */
.mcb-wrap {
position: relative;
display: inline-block
}
.mcb-input {
font-size: 11px;
border: none;
background: transparent;
font-family: inherit;
color: var(--text)
}
.mcb-input:focus {
outline: none;
border-color: var(--accent)
}
.mcb-list {
position: fixed;
z-index: 9999;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 4px;
box-shadow: var(--shadow-md);
max-height: 180px;
overflow-y: auto;
min-width: 140px;
display: none
}
.mcb-list.open {
display: block
}
.mcb-item {
padding: 5px 10px;
font-size: 11px;
cursor: pointer;
color: var(--text)
}
.mcb-item:hover,
.mcb-item.active {
background: var(--accent-light);
color: var(--accent)
}
/* scrollbar styling */
.sidebar::-webkit-scrollbar,
.tbl-wrap::-webkit-scrollbar {
width: 5px;
height: 5px
}
.sidebar::-webkit-scrollbar-track,
.tbl-wrap::-webkit-scrollbar-track {
background: transparent
}
.sidebar::-webkit-scrollbar-thumb,
.tbl-wrap::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px
}
.sidebar::-webkit-scrollbar-thumb:hover {
background: #9ca3af
}
@media print {
/* Hide everything except the active round table */
.sidebar,
header,
.tabs,
#tblFilters,
.summary-bar,
#page-elig,
#page-mech,
#page-countries,
#page-r1-map,
#page-r1-charts,
.tbl-controls,
#kpiBar {
display: none !important;
}
/* Full-width layout */
.layout {
display: block !important;
height: auto !important;
}
.main {
display: block !important;
height: auto !important;
overflow: visible !important;
}
#page-r1 {
display: block !important;
height: auto !important;
overflow: visible !important;
}
.tbl-wrap {
overflow: visible !important;
height: auto !important;
}
/* Table formatting */
table {
font-size: 9px !important;
width: 100% !important;
}
thead th {
background: #1e293b !important;
color: #fff !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
padding: 5px 6px !important;
}
tbody td {
padding: 4px 6px !important;
}
.badge {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Print header */
body::before {
content: "Limitless 3 β Grants Planning Β· " attr(data-print-round) " Β· " attr(data-print-date);
display: block;
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 700;
color: #0f172a;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid #e2e8f0;
}
@page {
margin: 12mm;
size: A4 landscape;
}
}
</style>
</head>
<body>
<header>
<h1>IFRC Limitless 3 Seed-Funding Dashboard</h1>
<span class="header-badge" id="headerBadge">128 countries Β· 4,489 EOI regs Β· R1 & R2</span>
<!-- Built with anycoder link added as requested -->
<a href="https://huggingface.co/spaces/akhaliq/anycoder"
style="color:rgba(255,255,255,0.7); text-decoration:none; font-size:10px; margin-left:10px; border:1px solid rgba(255,255,255,0.3); padding:2px 6px; border-radius:4px;">Built
with anycoder</a>
<div class="header-actions">
<div id="gsStatus" style="font-size:10px;color:rgba(255,255,255,.6);display:none"></div>
<div id="lastEditedBadge" style="font-size:10px;color:rgba(255,255,255,.5);display:none">Last saved:
<span id="lastEditedTime"></span>
</div>
</div>
</header>
<div class="layout">
<!-- βββ SIDEBAR βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ -->
<div class="sidebar" style="display:flex;flex-direction:column;gap:0;padding:0;overflow-y:auto">
<!-- ββ Header ββ -->
<div
style="padding:10px 14px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);flex-shrink:0">
L3 Dashboard
</div>
<!-- ββ Colour legend ββ -->
<div
style="padding:8px 14px;border-bottom:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0">
<span style="
<!-- L3 Dashboard v2026-03-30 build:1774874368 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>L3 Grants Planning Dashboard</title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
--bg: #f0f2f5;
--surface: #ffffff;
--surface2: #f7f8fa;
--border: #e2e5ea;
--border-strong: #c8cdd6;
--text: #111827;
--text-2: #4b5563;
--text-3: #9ca3af;
--accent: #1d4ed8;
--accent-hover: #1e40af;
--accent-light: #eff6ff;
--danger: #dc2626;
--success: #16a34a;
--warn: #d97706;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);
--radius: 8px;
--radius-sm: 5px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
input[type=number] {
-moz-appearance: textfield
}
body {
font-family: 'Inter', sans-serif;
font-size: 13px;
background: var(--bg);
color: var(--text);
line-height: 1.5
}
/* ββ HEADER ββ */
header {
background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
color: #fff;
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
position: relative;
z-index: 20;
}
header h1 {
font-size: 15px;
font-weight: 700;
letter-spacing: -.01em;
flex: 1
}
header .header-badge {
font-size: 10px;
background: rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .8);
padding: 3px 10px;
border-radius: 20px;
font-weight: 500;
letter-spacing: .02em;
white-space: nowrap
}
.header-actions {
display: flex;
gap: 8px;
align-items: center
}