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 { + .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; + } + + @keyframes neonPulse { 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; + 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% { - opacity: 1; - } - } - - .app-container { - height: 100vh; - display: flex; - flex-direction: column; - } - - .title-wrapper { - position: relative; - margin-bottom: 2rem; - } - - .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 { - 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); - } - 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 0000000..200c63b Binary files /dev/null and b/static/128x128.png differ diff --git a/static/32x32.png b/static/32x32.png new file mode 100644 index 0000000..c26f580 Binary files /dev/null and b/static/32x32.png differ