mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 19:12:50 +00:00
loader UI improvements
This commit is contained in:
Estifo77
@@ -22,27 +22,75 @@
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
background: #0f172a;
|
||||
color: #38bdf8;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
html[data-mantine-color-scheme='dark'] #ema-boot-splash {
|
||||
background: #242424;
|
||||
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;
|
||||
color: #2563eb;
|
||||
animation: ema-boot-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes ema-boot-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.55; }
|
||||
.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-splash svg { animation: none; }
|
||||
.ema-boot-compass, .ema-boot-helm { animation: none; }
|
||||
}
|
||||
/* React has committed into #root once it has a child; hide the splash. */
|
||||
/* Hide splash once React mounts */
|
||||
#root:not(:empty) ~ #ema-boot-splash {
|
||||
display: none;
|
||||
}
|
||||
@@ -50,31 +98,29 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
Static boot splash. Kept intentionally minimal (hull, funnel, mast,
|
||||
flag — no cargo containers, no animated water) since this markup can't
|
||||
import React. Source of truth for the full animated version is
|
||||
libs/ui/src/lib/components/MaritimeLoader.tsx.
|
||||
-->
|
||||
<div id="ema-boot-splash" role="status" aria-live="polite" aria-label="Loading">
|
||||
<svg viewBox="0 0 260 138" aria-hidden="true" focusable="false">
|
||||
<ellipse cx="132" cy="113" rx="78" ry="7" fill="currentColor" opacity="0.12" />
|
||||
<path d="M42 72H214l-4 6H48z" fill="currentColor" opacity="0.82" />
|
||||
<path d="M166 25h10l3 17h-15z" fill="#eef3f5" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
|
||||
<path d="M166.9 29h9.9l.6 3.5h-11.1z" fill="#078930" />
|
||||
<path d="M166.2 32.5h11.2l.6 3.5h-12.4z" fill="#fcd116" />
|
||||
<path d="M165.6 36h12.4l.6 3.5h-13.6z" fill="#da121a" />
|
||||
<path d="M194 31V12M188 20h12M194 13l11 8M194 13l-9 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<circle cx="194" cy="11" r="2" fill="currentColor" />
|
||||
<path d="M184 20V8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
|
||||
<path d="M184 8c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#078930" />
|
||||
<path d="M184 12c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#fcd116" />
|
||||
<path d="M184 16c7-3 11 3 18 0v4c-7 3-11-3-18 0z" fill="#da121a" />
|
||||
<path d="M28 76h205l-15 18c-8 10-20 15-33 15H66c-13 0-24-5-31-15L23 80c-2-2 0-4 5-4z" fill="#f8fbfc" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
|
||||
<path d="M34 88h190l-6 6c-8 10-20 15-33 15H66c-13 0-24-5-31-15z" fill="currentColor" opacity="0.92" />
|
||||
<path d="M36 87h188" fill="none" stroke="rgb(255 255 255 / 52%)" stroke-width="2.4" stroke-linecap="round" />
|
||||
<path d="M206 81l15 1-8 9" fill="none" stroke="rgb(255 255 255 / 46%)" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user