nessi
62439d2d28
Updated the loading screen to include animated gold lines, a loader, and a spark effect. Adjusted splash visibility to ensure a minimum display time of 3 seconds and improved transitions for smoother visuals. Enhanced style and structure for better user experience during app initialization.
184 lines
4.8 KiB
HTML
184 lines
4.8 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="theme-color" content="#000000" />
|
|
<title>Cluedo Sheet</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
height: 100%;
|
|
background: radial-gradient(
|
|
ellipse at top,
|
|
rgba(30, 30, 30, 0.95),
|
|
#000
|
|
);
|
|
}
|
|
|
|
/* Splash Overlay */
|
|
#app-splash {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2147483647;
|
|
display: grid;
|
|
place-items: center;
|
|
background: radial-gradient(
|
|
ellipse at top,
|
|
rgba(30, 30, 30, 0.95),
|
|
#000
|
|
);
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
transition: opacity 260ms ease;
|
|
}
|
|
|
|
#app-splash.hide {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* gold animated lines */
|
|
#app-splash::before,
|
|
#app-splash::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -40%;
|
|
background:
|
|
linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(233, 216, 166, 0.18),
|
|
transparent
|
|
);
|
|
transform: rotate(12deg);
|
|
animation: goldSweep 1.6s linear infinite;
|
|
opacity: 0.55;
|
|
filter: blur(0.2px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#app-splash::after {
|
|
transform: rotate(-12deg);
|
|
animation-duration: 2.2s;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
@keyframes goldSweep {
|
|
0% { transform: translateX(-25%) rotate(12deg); }
|
|
100% { transform: translateX(25%) rotate(12deg); }
|
|
}
|
|
|
|
/* glassy card */
|
|
.splash-card {
|
|
position: relative;
|
|
width: min(520px, 90vw);
|
|
border-radius: 22px;
|
|
padding: 18px 16px;
|
|
background: rgba(20, 20, 22, 0.55);
|
|
border: 1px solid rgba(233, 216, 166, 0.16);
|
|
box-shadow: 0 18px 70px rgba(0,0,0,0.55);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.splash-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(233,216,166,0.16), transparent);
|
|
opacity: 0.45;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.splash-title {
|
|
position: relative;
|
|
font-family: "Cinzel Decorative", serif;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
color: rgba(245, 239, 220, 0.92);
|
|
font-size: 18px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.splash-sub {
|
|
position: relative;
|
|
margin-top: 6px;
|
|
font-family: "IM Fell English", serif;
|
|
font-style: italic;
|
|
color: rgba(233, 216, 166, 0.78);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Loader */
|
|
.loader {
|
|
position: relative;
|
|
margin: 14px auto 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 999px;
|
|
border: 2px solid rgba(233, 216, 166, 0.18);
|
|
border-top-color: rgba(233, 216, 166, 0.92);
|
|
animation: spin 0.85s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* tiny spark at bottom */
|
|
.spark {
|
|
position: relative;
|
|
margin: 14px auto 0;
|
|
width: 160px;
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, transparent, rgba(233,216,166,0.65), transparent);
|
|
opacity: 0.6;
|
|
filter: blur(0.2px);
|
|
animation: pulse 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.35; transform: scaleX(0.92); }
|
|
50% { opacity: 0.85; transform: scaleX(1.02); }
|
|
}
|
|
</style>
|
|
|
|
<!-- Theme-Key sofort setzen -->
|
|
<script>
|
|
try {
|
|
const k = localStorage.getItem("hpTheme:guest") || "default";
|
|
document.documentElement.setAttribute("data-theme", k);
|
|
} catch {}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app-splash" aria-hidden="true">
|
|
<div class="splash-card">
|
|
<div class="splash-title">Zauber-Detektiv Notizbogen</div>
|
|
<div class="splash-sub">Magie wird vorbereitet…</div>
|
|
<div class="loader" aria-label="Laden"></div>
|
|
<div class="spark"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.jsx"></script>
|
|
</body>
|
|
</html>
|