From 8b49ab9297da617a9b96780bffec42f2d74531d6 Mon Sep 17 00:00:00 2001 From: Abdenasser Date: Mon, 11 Nov 2024 16:27:01 +0100 Subject: [PATCH] new loading screen --- src/lib/components/TitleBar.svelte | 11 +- src/routes/+page.svelte | 210 ++--------------------------- static/128x128.png | Bin 0 -> 4841 bytes static/32x32.png | Bin 0 -> 1177 bytes 4 files changed, 24 insertions(+), 197 deletions(-) create mode 100644 static/128x128.png create mode 100644 static/32x32.png diff --git a/src/lib/components/TitleBar.svelte b/src/lib/components/TitleBar.svelte index 85cfcec..d9293c4 100644 --- a/src/lib/components/TitleBar.svelte +++ b/src/lib/components/TitleBar.svelte @@ -17,6 +17,7 @@
+ NeoHtop
NeoHtop
@@ -45,7 +46,7 @@ .neon { font-family: "Courier New", monospace; - font-size: 16px; + font-size: 14px; font-weight: bold; color: var(--text); text-shadow: @@ -109,4 +110,12 @@ transform: translateY(2px); } } + + .app-icon { + width: 16px; + height: 16px; + margin-right: 8px; + display: flex; + align-items: center; + } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e3676e5..8e0fcf0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -284,12 +284,7 @@ {#if isLoading}
-
-
NeoHtop
-
-
- - System Initialization... +
{:else} @@ -416,206 +411,29 @@ .loading-content { display: flex; - flex-direction: column; align-items: center; - gap: 16px; + justify-content: center; z-index: 2; } - @keyframes glitch { - 0%, - 100% { - transform: translate(0); - } - 20% { - transform: translate(-2px, 2px); - } - 40% { - transform: translate(-2px, -2px); - } - 60% { - transform: translate(2px, 2px); - } - 80% { - transform: translate(2px, -2px); - } - } - - @keyframes glitch-2 { - 0%, - 100% { - transform: translate(0); - } - 25% { - transform: translate(1px, 1px); - } - 75% { - transform: translate(-1px, -1px); - } - } - - @keyframes glitch-3 { - 0%, - 100% { - transform: translate(0); - } - 25% { - transform: translate(-1px, -1px); - } - 75% { - transform: translate(1px, 1px); - } - } - - @keyframes scanlines { - from { - transform: translateY(0); - } - to { - transform: translateY(4px); - } - } - - .loading-text { - color: var(--subtext0); - font-size: 14px; - font-weight: 500; - letter-spacing: 0.5px; - animation: pulse 2s ease-in-out infinite; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - } - - @keyframes spin { - to { - transform: rotate(360deg); - } - } - - @keyframes pulse { - 0%, - 100% { - opacity: 0.6; - } - 50% { - opacity: 1; - } - } - - .app-container { - height: 100vh; - display: flex; - flex-direction: column; - } - - .title-wrapper { - position: relative; - margin-bottom: 2rem; + .logo { + width: 128px; + height: 128px; + filter: drop-shadow(0 0 5px var(--text)) drop-shadow(0 0 10px var(--text)) + drop-shadow(0 0 20px var(--blue)) drop-shadow(0 0 40px var(--blue)); + animation: neonPulse 2s ease-in-out infinite; } - .neon-title { - font-family: "Courier New", monospace; - font-size: 64px; - font-weight: bold; - color: var(--text); - text-shadow: - 0 0 5px var(--text), - 0 0 10px var(--text), - 0 0 20px var(--blue), - 0 0 40px var(--blue), - 0 0 80px var(--blue); - animation: pulse 4s ease-in-out infinite; - } - - .neon-flare { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient( - 45deg, - transparent 45%, - var(--blue) 48%, - var(--text) 50%, - var(--blue) 52%, - transparent 55% - ); - background-size: 200% 200%; - animation: flare 4s ease-in-out infinite; - opacity: 0.1; - filter: blur(3px); - } - - .cyber-spinner { - width: 50px; - height: 50px; - margin: 20px; - background: transparent; - border: 3px solid var(--surface0); - border-top: 3px solid var(--blue); - border-right: 3px solid var(--blue); - border-radius: 50%; - position: relative; - animation: spin 1s linear infinite; - } - - .cyber-spinner::before { - content: ""; - position: absolute; - top: -3px; - left: -3px; - right: -3px; - bottom: -3px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: var(--blue); - animation: spin 2s linear infinite; - } - - .loading-text { - color: var(--text); - font-size: 16px; - font-family: "Courier New", monospace; - letter-spacing: 2px; - animation: glow 2s ease-in-out infinite alternate; - } - - @keyframes pulse { + @keyframes neonPulse { 0%, 100% { - text-shadow: - 0 0 5px var(--text), - 0 0 10px var(--text), - 0 0 20px var(--blue), - 0 0 40px var(--blue), - 0 0 80px var(--blue); + filter: drop-shadow(0 0 5px var(--text)) drop-shadow(0 0 10px var(--text)) + drop-shadow(0 0 20px var(--blue)) drop-shadow(0 0 40px var(--blue)); } 50% { - text-shadow: - 0 0 10px var(--text), - 0 0 20px var(--text), - 0 0 40px var(--blue), - 0 0 80px var(--blue), - 0 0 120px var(--blue); - } - } - - @keyframes flare { - 0%, - 100% { - background-position: 200% 200%; - } - 50% { - background-position: 0% 0%; - } - } - - @keyframes glow { - from { - text-shadow: - 0 0 2px var(--text), - 0 0 4px var(--text), - 0 0 6px var(--blue); + filter: drop-shadow(0 0 10px var(--text)) + drop-shadow(0 0 20px var(--text)) drop-shadow(0 0 40px var(--blue)) + drop-shadow(0 0 80px var(--blue)); } } diff --git a/static/128x128.png b/static/128x128.png new file mode 100644 index 0000000000000000000000000000000000000000..200c63b602c16139d9fed1b42c425d46d6515f22 GIT binary patch literal 4841 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 G5&C~7LL<8X literal 0 HcmV?d00001 diff --git a/static/32x32.png b/static/32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..c26f5802d65324c6efc3dba89942eca2edcf891a GIT binary patch literal 1177 zcmV;K1ZMk*P)ccoHbG?Jitvy|6M>CrLR}ez#D)zdHmND>EQ!WdHKcV> z7qYS;l*G0WAcRc~h=f3#nI_o8rUGF=$Ij!vJm;T#uXl!d(E(3#bGiTj&-uRdJv32R0I;D(*9_!F?N*aceW#g1bmOqpvspcqAP16kNhVcXa`L~;dl*VoTMucMQ{9vN0uBd`^}5ykRK?o}@?48&pYx$K$cBgRU2hoI#I| zj{ccYRrYR_)hHGdjor?cn<;Q#USL^9BAG-ik#yEimY)zr48zDrA}LF#q~Cu);ke1z ziX8@5%;kLGNdjeCs{)mHucH$(k$LnejQjT=h%;qgMV!kaat4<0KvAW}O4+)=*(&t( zT*9Z9FQdA;+S#9&n84`hD1Ke}1-hmcottvewL|evs2aZf>T7&){kj0x2uM{`vER|r zfyKo|RG&MCcv5xpqmW&4vEb2XF$@e0pu78hC-HdQ>-DB3;O*Prh5GH8nZP+5Jo|5C~vsXh^KZ zVlgLK^M<%^r4mb#&8e&(A0HRx$5z__6%`ejnVCsjx8Eh_fX%}0ZtP}OZns=sx2@!L zu9(A!g69whbSIZhE_40Z2;}PZQZa>JDuKgVctknypJj!7VBFPLV0YjmX z=mEJxU}t}^o+|2;M*aTx$B#uPoSK>veSd#{U+lRFac8s}Q8XGYih#!=VG!fDJ+kx` zQlpb>yPoq(({$9=*9)b+y}j7p+Cts=^Vr+l!{=A8;*Td!P*YQb$;n9!U%Q6aFI>R< z{5)1ySK%d(xWZzPI+E(;3Nf2`gZC1cSdJvKxWdBMXbZxp4zNpASBT z1{E4W78Vx78CLe)t(#D(A)P4m6-r7`xJ-hF(oaa)x7mhLdnVvkZ1;cuX5D2L$O|W5 z#9#Y+DVHO?L%JkMfWD-re@sK^Eym6q%R}^W23f{(cel&-&4Y=O9`6IrL~1O5N@MwJ zu*UMti^-eT#pDbQE0SeL9*@(-