experiment: svelte ui

2025-11-28 18:36:41 +03:00
parent 49530a9a70
commit 91dcff8f77
8 changed files with 739 additions and 84 deletions
--- a/frontend/src/components/Header.svelte
+++ b/frontend/src/components/Header.svelte
@@ -0,0 +1,82 @@
+<!-- components/Header.svelte -->
+<script>
+export let isOnline = true;
+export let title = "QRminator";
+</script>
+
+<header class="headerbar">
+    <h1 class="header-title">{title}</h1>
+    <div class="header-status">
+        {#if isOnline}
+            <span>Online</span>
+        {:else}
+            <span class="text-dim">Offline</span>
+        {/if}
+    </div>
+    <div class="header-controls">
+        <button class="control-button toggle">
+            <div class="toggle-indicator"></div>
+        </button>
+    </div>
+</header>
+
+<style>
+.headerbar {
+    background-color: var(--bg-header);
+    padding: var(--spacing-md) var(--spacing-lg);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+}
+
+.header-title {
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--text-primary);
+}
+
+.header-status {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.control-button {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.control-button:hover {
+    transform: scale(1.1);
+}
+
+.control-button.toggle {
+    background-color: var(--accent-primary);
+    position: relative;
+}
+
+.toggle-indicator {
+    width: 12px;
+    height: 12px;
+    background-color: var(--bg-primary);
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: all 0.3s ease;
+}
+</style>