diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 0ed4e03b..c1439a5d 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -22,7 +22,6 @@ "extensions": [ "golang.go", "svelte.svelte-vscode", - "supermaven.supermaven", "eamodio.gitlens" ], "settings": { diff --git a/.gitignore b/.gitignore index ca2aa0b9..59e620c0 100644 --- a/.gitignore +++ b/.gitignore @@ -44,4 +44,7 @@ frontend/node_modules frontend/dist frontend/build UIMod/onboard_bundled/v2 -UIMod/logs/* \ No newline at end of file +UIMod/logs/* +.agent-context/** +.github/copilot-instructions.md +mods/** \ No newline at end of file diff --git a/UIMod/onboard_bundled/assets/credits.html b/UIMod/onboard_bundled/assets/credits.html index 631f27f1..7113d2a9 100644 --- a/UIMod/onboard_bundled/assets/credits.html +++ b/UIMod/onboard_bundled/assets/credits.html @@ -18,6 +18,24 @@ overflow: hidden; position: relative; } + .nebula { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + background: + radial-gradient(ellipse at 20% 80%, rgba(102, 126, 234, 0.15) 0%, transparent 50%), + radial-gradient(ellipse at 80% 20%, rgba(118, 75, 162, 0.15) 0%, transparent 50%), + radial-gradient(ellipse at 50% 50%, rgba(240, 147, 251, 0.08) 0%, transparent 60%); + animation: nebula-drift 30s ease-in-out infinite alternate; + } + + @keyframes nebula-drift { + 0% { transform: scale(1) rotate(0deg); } + 100% { transform: scale(1.1) rotate(5deg); } + } .stars { position: fixed; @@ -35,6 +53,26 @@ animation: twinkle 3s infinite; } + .star.bright { + box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6); + } + + .shooting-star { + position: absolute; + width: 100px; + height: 2px; + background: linear-gradient(90deg, rgba(255,255,255,0.8), transparent); + opacity: 0; + animation: shoot 4s linear infinite; + } + + @keyframes shoot { + 0% { transform: translateX(0) translateY(0); opacity: 0; } + 5% { opacity: 1; } + 20% { transform: translateX(300px) translateY(150px); opacity: 0; } + 100% { opacity: 0; } + } + @keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } @@ -53,15 +91,27 @@ width: 80%; max-width: 900px; left: 50%; - bottom: 0; - transform: translateX(-50%) translateY(100%); - animation: scroll-up 90s linear forwards; + top: 100%; + transform: translateX(-50%); text-align: center; + will-change: transform; + transition: none; + } + + .credits-scroll.animating { + animation: scroll-up 90s linear forwards; + } + + .credits-scroll.paused { + animation-play-state: paused; } @keyframes scroll-up { + from { + top: 100%; + } to { - transform: translateX(-50%) translateY(-100%); + top: -100%; } } @@ -69,15 +119,28 @@ font-size: 3.5em; font-weight: bold; margin-bottom: 2em; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - text-shadow: 0 0 30px rgba(102, 126, 234, 0.5); + animation: gradient-shift 5s ease infinite; + filter: drop-shadow(0 0 30px rgba(102, 126, 234, 0.5)); + } + + @keyframes gradient-shift { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } } .section { margin: 4em 0; + padding: 2em; + transition: all 0.4s ease; + } + + .section:hover { + transform: scale(1.02); } .role { @@ -87,6 +150,17 @@ letter-spacing: 3px; margin-bottom: 0.5em; text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); + position: relative; + } + + .role::after { + content: ''; + display: block; + width: 60px; + height: 3px; + background: linear-gradient(90deg, transparent, #ffd700, transparent); + margin: 0.5em auto; + border-radius: 2px; } .name { @@ -110,11 +184,16 @@ color: #60a5fa; text-decoration: none; font-size: 1em; - transition: color 0.3s; + transition: all 0.3s; + padding: 0.3em 1em; + border-radius: 20px; + display: inline-block; } .link:hover { color: #93c5fd; + background: rgba(96, 165, 250, 0.1); + box-shadow: 0 0 20px rgba(96, 165, 250, 0.3); } .description { @@ -137,7 +216,7 @@ font-size: 2em; color: #008cff; margin: 3em 0 1em 0; - text-shadow: 0 0 20px rgba(72, 187, 120, 0.6); + text-shadow: 0 0 20px rgba(0, 140, 255, 0.6); } .tech-stack { @@ -167,13 +246,101 @@ .glow { text-shadow: 0 0 10px currentColor; } + + /* Scroll hint indicator */ + .scroll-hint { + position: fixed; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + color: rgba(255, 255, 255, 0.5); + font-size: 0.9em; + text-align: center; + z-index: 100; + transition: opacity 0.5s; + pointer-events: none; + } + + .scroll-hint .mouse-icon { + width: 26px; + height: 40px; + border: 2px solid rgba(255, 255, 255, 0.5); + border-radius: 13px; + margin: 0 auto 10px; + position: relative; + } + + .scroll-hint .wheel { + width: 4px; + height: 8px; + background: rgba(255, 255, 255, 0.5); + border-radius: 2px; + position: absolute; + top: 8px; + left: 50%; + transform: translateX(-50%); + animation: scroll-wheel 2s infinite; + } + + @keyframes scroll-wheel { + 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; } + 50% { transform: translateX(-50%) translateY(10px); opacity: 0.3; } + } + + /* Control buttons */ + .controls { + position: fixed; + top: 20px; + right: 20px; + z-index: 100; + display: flex; + gap: 10px; + } + + .control-btn { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + color: white; + padding: 10px 20px; + border-radius: 25px; + cursor: pointer; + font-size: 0.9em; + transition: all 0.3s; + backdrop-filter: blur(10px); + } + + .control-btn:hover { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.4); + transform: scale(1.05); + } + + .control-btn.active { + background: rgba(102, 126, 234, 0.3); + border-color: rgba(102, 126, 234, 0.6); + }
+ -