mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 19:12:50 +00:00
128 lines
5.0 KiB
HTML
128 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/png" href="/ema-logo.png" />
|
|
<link rel="apple-touch-icon" href="/ema-logo.png" />
|
|
<title>EMA Backoffice</title>
|
|
<script>
|
|
// Apply the saved Mantine color scheme before paint to avoid a flash.
|
|
try {
|
|
var s = localStorage.getItem('mantine-color-scheme-value') || 'light';
|
|
document.documentElement.setAttribute('data-mantine-color-scheme', s);
|
|
} catch (e) {}
|
|
</script>
|
|
<style>
|
|
/* Boot splash — shown until React mounts into #root. Colors are
|
|
hardcoded (Mantine's default light/dark-7 body background) so the
|
|
splash never depends on the app's own stylesheet finishing its load. */
|
|
#ema-boot-splash {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0f172a;
|
|
color: #38bdf8;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
html[data-mantine-color-scheme='light'] #ema-boot-splash {
|
|
background: #f8fafc;
|
|
color: #0f2c59;
|
|
}
|
|
#ema-boot-splash .ema-card {
|
|
padding: 2.5rem 3.5rem;
|
|
border-radius: 1.5rem;
|
|
background: rgba(15, 23, 42, 0.85);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
html[data-mantine-color-scheme='light'] #ema-boot-splash .ema-card {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 1px solid rgba(15, 44, 89, 0.1);
|
|
box-shadow: 0 25px 50px -12px rgba(11, 25, 44, 0.12);
|
|
}
|
|
#ema-boot-splash svg {
|
|
width: 140px;
|
|
height: auto;
|
|
}
|
|
.ema-boot-compass {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
animation: ema-boot-spin 20s linear infinite;
|
|
}
|
|
.ema-boot-helm {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
animation: ema-boot-spin-rev 14s linear infinite;
|
|
}
|
|
.ema-boot-title {
|
|
margin-top: 1rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
background: linear-gradient(135deg, #078930, #fcd116, #2563eb);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.ema-boot-sub {
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
opacity: 0.85;
|
|
}
|
|
@keyframes ema-boot-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@keyframes ema-boot-spin-rev {
|
|
from { transform: rotate(360deg); }
|
|
to { transform: rotate(0deg); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ema-boot-compass, .ema-boot-helm { animation: none; }
|
|
}
|
|
/* Hide splash once React mounts */
|
|
#root:not(:empty) ~ #ema-boot-splash {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<div id="ema-boot-splash" role="status" aria-live="polite" aria-label="Loading Ethiopian Maritime Backoffice">
|
|
<div class="ema-card">
|
|
<div style="position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;">
|
|
<svg viewBox="0 0 120 120" style="position: absolute; inset: 0; width: 100%; height: 100%;">
|
|
<defs>
|
|
<linearGradient id="bo-ring-1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#0284C7" />
|
|
<stop offset="100%" stop-color="#078930" />
|
|
</linearGradient>
|
|
<linearGradient id="bo-ring-2" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#F59E0B" />
|
|
<stop offset="100%" stop-color="#FCD116" />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="60" cy="60" r="54" fill="none" stroke="url(#bo-ring-1)" stroke-width="1.8" stroke-dasharray="8 6 2 6" opacity="0.85" class="ema-boot-compass" />
|
|
<circle cx="60" cy="60" r="39" fill="none" stroke="url(#bo-ring-2)" stroke-width="2" stroke-dasharray="28 14" class="ema-boot-helm" />
|
|
</svg>
|
|
<img src="/ema-logo.png" alt="EMA" style="width: 58px; height: 58px; object-fit: contain; position: relative; z-index: 2;" />
|
|
</div>
|
|
<div class="ema-boot-title">ETHIOPIAN MARITIME AUTHORITY</div>
|
|
<div style="font-size: 0.7rem; opacity: 0.6; margin-top: 2px;">የኢትዮጵያ ማሪታይም ባለስልጣን</div>
|
|
<div class="ema-boot-sub">Loading Maritime Backoffice…</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|