aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src')
-rw-r--r--ui/src/components/SettingsView.svelte10
-rw-r--r--ui/src/components/Sidebar.svelte75
2 files changed, 58 insertions, 27 deletions
diff --git a/ui/src/components/SettingsView.svelte b/ui/src/components/SettingsView.svelte
index 42b1056..259c0a6 100644
--- a/ui/src/components/SettingsView.svelte
+++ b/ui/src/components/SettingsView.svelte
@@ -38,7 +38,7 @@
<div class="flex-1 overflow-y-auto pr-2 space-y-6 custom-scrollbar pb-10">
<!-- Appearance / Background -->
- <div class="dark:bg-black/20 bg-white/60 p-6 rounded-2xl border dark:border-white/5 border-black/5 shadow-sm backdrop-blur-sm">
+ <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
<h3 class="text-xs font-bold uppercase tracking-widest dark:text-white/40 text-black/40 mb-6 flex items-center gap-2">
Appearance
</h3>
@@ -161,7 +161,7 @@
</div>
<!-- Java Path -->
- <div class="dark:bg-black/20 bg-white/60 p-6 rounded-2xl border dark:border-white/5 border-black/5 shadow-sm backdrop-blur-sm">
+ <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
<h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">
Java Environment
</h3>
@@ -221,7 +221,7 @@
</div>
<!-- Memory -->
- <div class="bg-black/20 p-6 rounded-2xl border border-white/5 ">
+ <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
<h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">
Memory Allocation (RAM)
</h3>
@@ -248,7 +248,7 @@
</div>
<!-- Resolution -->
- <div class="bg-black/20 p-6 rounded-2xl border border-white/5 ">
+ <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
<h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">
Game Window Size
</h3>
@@ -275,7 +275,7 @@
</div>
<!-- Download Settings -->
- <div class="bg-black/20 p-6 rounded-2xl border border-white/5 ">
+ <div class="dark:bg-[#09090b] bg-white p-6 rounded-sm border dark:border-white/10 border-gray-200 shadow-sm">
<h3 class="text-xs font-bold uppercase tracking-widest text-white/40 mb-6 flex items-center gap-2">
Network
</h3>
diff --git a/ui/src/components/Sidebar.svelte b/ui/src/components/Sidebar.svelte
index e6fbf43..1d7cc16 100644
--- a/ui/src/components/Sidebar.svelte
+++ b/ui/src/components/Sidebar.svelte
@@ -1,58 +1,89 @@
<script lang="ts">
import { uiState } from '../stores/ui.svelte';
+ import { Home, Package, Settings } from 'lucide-svelte';
</script>
<aside
- class="w-20 lg:w-64 dark:bg-black bg-white/80 border-r dark:border-white/5 border-gray-200/50 flex flex-col items-center lg:items-start transition-all duration-300 shrink-0 py-6 backdrop-blur-md"
+ class="w-20 lg:w-64 dark:bg-[#09090b] bg-white border-r dark:border-white/10 border-gray-200 flex flex-col items-center lg:items-start transition-all duration-300 shrink-0 py-6 z-20"
>
<!-- Logo Area -->
<div
- class="h-16 w-full flex items-center justify-center lg:justify-start lg:px-8 mb-6"
+ class="h-16 w-full flex items-center justify-center lg:justify-start lg:px-6 mb-6"
>
<!-- Icon Logo (Small) -->
- <div
- class="lg:hidden text-3xl font-black bg-clip-text text-transparent bg-gradient-to-tr from-indigo-400 to-fuchsia-400 drop-shadow-lg"
- >
- D
+ <div class="lg:hidden text-black dark:text-white">
+ <svg width="32" height="32" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M25 25 L50 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+ <path d="M25 75 L50 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+ <path d="M50 50 L75 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+ <circle cx="25" cy="25" r="8" fill="currentColor" stroke="none" />
+ <circle cx="25" cy="50" r="8" fill="currentColor" stroke="none" />
+ <circle cx="25" cy="75" r="8" fill="currentColor" stroke="none" />
+ <circle cx="50" cy="50" r="10" fill="currentColor" stroke="none" />
+ <circle cx="75" cy="50" r="8" fill="currentColor" stroke="none" />
+ </svg>
</div>
<!-- Full Logo (Large) -->
<div
- class="hidden lg:block font-bold text-2xl tracking-wider dark:text-white text-gray-900"
+ class="hidden lg:flex items-center gap-3 font-bold text-xl tracking-tighter dark:text-white text-black"
>
- <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-fuchsia-400">DROP</span>OUT
+ <!-- Neural Network Dropout Logo -->
+ <svg width="42" height="42" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
+ <!-- Lines -->
+ <path d="M25 25 L50 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+ <path d="M25 75 L50 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+ <path d="M50 50 L75 50" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+
+ <!-- Input Layer (Left) -->
+ <circle cx="25" cy="25" r="8" fill="currentColor" stroke="none" />
+ <circle cx="25" cy="50" r="8" fill="currentColor" stroke="none" />
+ <circle cx="25" cy="75" r="8" fill="currentColor" stroke="none" />
+
+ <!-- Hidden Layer (Middle) - Dropout visualization -->
+ <!-- Dropped units (dashed) -->
+ <circle cx="50" cy="25" r="7" stroke="currentColor" stroke-width="2" stroke-dasharray="4 2" fill="none" class="opacity-30" />
+ <circle cx="50" cy="75" r="7" stroke="currentColor" stroke-width="2" stroke-dasharray="4 2" fill="none" class="opacity-30" />
+ <!-- Active unit -->
+ <circle cx="50" cy="50" r="10" fill="currentColor" stroke="none" />
+
+ <!-- Output Layer (Right) -->
+ <circle cx="75" cy="50" r="8" fill="currentColor" stroke="none" />
+ </svg>
+
+ <span>DROPOUT</span>
</div>
</div>
<!-- Navigation -->
- <nav class="flex-1 w-full flex flex-col gap-3 px-3">
+ <nav class="flex-1 w-full flex flex-col gap-1 px-3">
<!-- Nav Item Helper -->
- {#snippet navItem(view, icon, label)}
+ {#snippet navItem(view, Icon, label)}
<button
- class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-5 py-3.5 rounded-xl transition-all duration-200 relative overflow-hidden
+ class="group flex items-center lg:gap-3 justify-center lg:justify-start w-full px-0 lg:px-4 py-2.5 rounded-sm transition-all duration-200 relative
{uiState.currentView === view
- ? 'bg-gradient-to-r from-indigo-500/20 to-purple-500/20 dark:text-white text-indigo-900 shadow-lg shadow-indigo-500/10 dark:border border-white/10'
- : 'dark:text-zinc-400 text-gray-500 hover:text-black dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5'}"
+ ? 'bg-black/5 dark:bg-white/10 dark:text-white text-black font-medium'
+ : 'dark:text-zinc-400 text-zinc-500 hover:text-black dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5'}"
onclick={() => uiState.setView(view)}
>
- <span class="text-xl relative z-10 transition-transform group-hover:scale-110 duration-200">{icon}</span>
- <span class="hidden lg:block font-medium relative z-10">{label}</span>
+ <Icon size={20} strokeWidth={uiState.currentView === view ? 2.5 : 2} />
+ <span class="hidden lg:block text-sm relative z-10">{label}</span>
- <!-- Active Indicator Line -->
+ <!-- Active Indicator -->
{#if uiState.currentView === view}
- <div class="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-indigo-500 rounded-r-full lg:hidden"></div>
+ <div class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-4 bg-black dark:bg-white rounded-r-full hidden lg:block"></div>
{/if}
</button>
{/snippet}
- {@render navItem('home', '🏠', 'Home')}
- {@render navItem('versions', '📦', 'Versions')}
- {@render navItem('settings', '⚙️', 'Settings')}
+ {@render navItem('home', Home, 'Overview')}
+ {@render navItem('versions', Package, 'Versions')}
+ {@render navItem('settings', Settings, 'Settings')}
</nav>
<!-- Footer Info -->
<div
- class="p-4 w-full flex justify-center lg:justify-start lg:px-8 opacity-50 hover:opacity-100 transition-opacity"
+ class="p-4 w-full flex justify-center lg:justify-start lg:px-6 opacity-40 hover:opacity-100 transition-opacity"
>
- <div class="text-xs font-mono tracking-widest text-zinc-500">v{uiState.appVersion}</div>
+ <div class="text-[10px] font-mono text-zinc-500 uppercase tracking-wider">v{uiState.appVersion}</div>
</div>
</aside>