amaliadwiy
ef852842b4
Apply uniform design system across all routes and components: - Consistent header pattern with gradient-text titles, dimmed subtitles - Loader type="dots" replacing text-based loading states - Icon + text empty/error states with Paper+glass containers - Full STATUS_COLOR/STATUS_LABEL maps for all BugStatus values - dayjs timestamps, Tooltip on action icons, size="sm" on badges/pagination - Modals with overlayProps blur and gradient save buttons - Replace left-border Papers with clean Stack headers - Translate all remaining Indonesian UI strings to English - New monitoring-themed SVG logo and redesigned splash screen
118 lines
3.6 KiB
HTML
118 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="id" data-mantine-color-scheme="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="color-scheme" content="dark" />
|
|
<meta name="description" content="Monitoring System — real-time dashboard for your applications" />
|
|
<base href="/" />
|
|
<link rel="icon" type="image/svg+xml" href="/src/logo.svg" />
|
|
<title>Monitoring System</title>
|
|
<style>
|
|
/* Prevent white flash — dark background immediately */
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #242424;
|
|
color: #c1c2c5;
|
|
}
|
|
|
|
/* Splash screen */
|
|
#splash {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #242424;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
#splash.fade-out {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.splash-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 18px;
|
|
}
|
|
.splash-logo {
|
|
animation: logo-breathe 2.4s ease-in-out infinite;
|
|
}
|
|
.splash-logo svg {
|
|
display: block;
|
|
border-radius: 14px;
|
|
filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.45));
|
|
}
|
|
.splash-title {
|
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.3px;
|
|
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.splash-dots {
|
|
display: flex;
|
|
gap: 7px;
|
|
align-items: center;
|
|
}
|
|
.splash-dots span {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #2563EB, #7C3AED);
|
|
animation: dot-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
.splash-dots span:nth-child(2) { animation-delay: 0.2s; }
|
|
.splash-dots span:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
@keyframes logo-breathe {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.05); opacity: 0.9; }
|
|
}
|
|
@keyframes dot-pulse {
|
|
0%, 80%, 100% { transform: scale(0.5); opacity: 0.25; }
|
|
40% { transform: scale(1); opacity: 1; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="splash">
|
|
<div class="splash-content">
|
|
<div class="splash-logo">
|
|
<svg width="64" height="64" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="sl" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#2563EB"/>
|
|
<stop offset="1" stop-color="#7C3AED"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="32" height="32" rx="7" fill="url(#sl)"/>
|
|
<polyline
|
|
points="3,16 9,16 12,8 16,24 19,16 29,16"
|
|
stroke="white"
|
|
stroke-width="2.2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
fill="none"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="splash-title">Monitoring System</div>
|
|
<div class="splash-dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/frontend.tsx"></script>
|
|
</body>
|
|
</html>
|