Update UI components and enhance controller navigation for improved user experience

- Updated styles in various components to change color themes from cyan to yellow for better visual consistency.
- Enhanced focus management in controller navigation to improve accessibility and user interaction.
- Added new data attributes for controller navigation in multiple views to streamline user interactions with app containers.
- Improved audio handling by removing unused functions in useLoginSounds.ts, optimizing the codebase.
This commit is contained in:
Dorian
2026-02-17 21:10:16 +00:00
parent 5a04875dcc
commit 316dfee2fc
12 changed files with 428 additions and 55 deletions

View File

@@ -11,14 +11,18 @@
</p>
</div>
</div>
<!-- Compact Status Indicator -->
<div class="flex items-center gap-2 px-4 py-2 glass-card rounded-lg">
<!-- Compact Status Indicator - click to trigger screensaver (dev) -->
<button
type="button"
class="flex items-center gap-2 px-4 py-2 glass-card rounded-lg cursor-pointer hover:bg-white/5 transition-colors"
@click="screensaverStore.activate()"
>
<div class="relative">
<div class="w-2 h-2 rounded-full bg-green-400"></div>
<div class="absolute inset-0 w-2 h-2 rounded-full bg-green-400 animate-ping opacity-75"></div>
</div>
<span class="text-sm font-medium text-white">Online</span>
</div>
</button>
</div>
<!-- Section Overviews - 2advanced staggered animation (hidden until typing starts, then animate with typing) -->
@@ -273,11 +277,13 @@
import { computed, ref, watch, onBeforeUnmount } from 'vue'
import { RouterLink } from 'vue-router'
import { useAppStore } from '../stores/app'
import { useScreensaverStore } from '../stores/screensaver'
import { useLoginTransitionStore } from '../stores/loginTransition'
import { PackageState } from '../types/api'
import { playTypingSound } from '@/composables/useLoginSounds'
const store = useAppStore()
const screensaverStore = useScreensaverStore()
const loginTransition = useLoginTransitionStore()
const LINE1 = "Welcome Noderunner"