Client

Cargo.toml

@@ -12,6 +12,9 @@ edition = "2024"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
+csv = "1.4.0"
+dioxus-primitives = { git = "https://github.com/DioxusLabs/components", version = "0.0.1", default-features = false }
+gloo-timers = { version = "0.4.0", features = ["futures"], optional = true }
 chacha20poly1305 = { version = "0.10.1", optional = true }
 ciborium = { version = "0.2.2", optional = true }
 dioxus = { version = "0.7.6", features = ["fullstack"] }
@@ -22,10 +25,12 @@ rust-argon2 = { version = "3.0.0", optional = true }
 tokio = { version = "1.52.1", optional = true }
 uuid = { version = "1.23.1", features = ["v4", "serde"], optional = true }
 zeroize = { version = "1.8.2", optional = true }
+dioxus-router = "0.7.4"
 
 [features]
-default = []
-web = ["dioxus/web"]
+default = ["web"]
+web = ["dioxus/web", "dep:gloo-timers"]
+desktop = ["dioxus/desktop", "dep:tokio"]
 # desktop = ["dioxus/desktop"]
 # mobile = ["dioxus/mobile"]
 server = [

assets/dx-components-theme.css

@@ -0,0 +1,99 @@
+/* ============================================
+    APOLLO - DIOXUS COMPONENTS THEME
+    Global styles for styled Dioxus components
+============================================ */
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+body {
+    padding: 0;
+    margin: var(--space-6);
+    background-color: var(--bg);
+    color: var(--text-primary);
+    font-family: Inter, system-ui, -apple-system, sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.6;
+}
+
+:root {
+    /* Primary colors */
+    --primary-color: var(--bg);
+    --primary-color-1: var(--bg);
+    --primary-color-2: var(--bg);
+    --primary-color-3: var(--bg-elevated);
+    --primary-color-4: var(--bg-surface);
+    --primary-color-5: var(--bg-hover);
+    --primary-color-6: var(--border-default);
+    --primary-color-7: var(--border-strong);
+
+    /* Secondary colors */
+    --secondary-color: var(--text-primary);
+    --secondary-color-1: var(--text-primary);
+    --secondary-color-2: var(--text-primary);
+    --secondary-color-3: var(--text-secondary);
+    --secondary-color-4: var(--text-primary);
+    --secondary-color-5: var(--text-muted);
+    --secondary-color-6: var(--text-muted);
+
+    /* Highlight colors */
+    --focused-border-color: var(--accent-primary);
+    --primary-success-color: var(--accent-success-subtle);
+    --secondary-success-color: var(--accent-success);
+    --primary-warning-color: var(--accent-warning-subtle);
+    --secondary-warning-color: var(--accent-warning);
+    --primary-error-color: var(--accent-danger-subtle);
+    --secondary-error-color: var(--accent-danger);
+    --contrast-error-color: var(--text-primary);
+    --primary-info-color: var(--bg-hover);
+    --secondary-info-color: var(--text-secondary);
+}
+
+/* Scrollbar styling */
+@supports (scrollbar-width: auto) {
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: var(--border-strong) transparent;
+    }
+
+    *:not(:hover) {
+        scrollbar-color: transparent transparent;
+    }
+
+    *:hover {
+        scrollbar-color: var(--border-strong) transparent;
+    }
+}
+
+@supports selector(::-webkit-scrollbar) {
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: var(--border-strong);
+        border-radius: var(--radius-full);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--text-muted);
+    }
+}
+
+/* Focus styles */
+:focus-visible {
+    outline: 2px solid var(--accent-primary);
+    outline-offset: 2px;
+}
+
+/* Selection styling */
+::selection {
+    background: var(--accent-primary-subtle);
+    color: var(--text-primary);
+}

assets/main.css

@@ -0,0 +1,244 @@
+/* Layout modes */
+.normal .others-container {
+  display: block;
+}
+
+.table-only .others-container {
+  display: none !important;
+}
+
+/* Fullscreen table overlay */
+.table-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    display: grid;
+    place-items: center;
+    padding: var(--space-6);
+    background: rgba(9, 9, 11, 0.95);
+    backdrop-filter: blur(12px);
+    overscroll-behavior: none;
+    animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.table-window {
+    width: min(95vw, 1400px);
+    height: min(90vh, 900px);
+    overflow: hidden;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xl);
+    background: var(--bg-elevated);
+    box-shadow: var(--shadow-xl);
+    animation: scaleIn 0.25s ease-out;
+}
+
+@keyframes scaleIn {
+    from { 
+        opacity: 0;
+        transform: scale(0.96);
+    }
+    to { 
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.table-viewport {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    overscroll-behavior: none;
+}
+
+.table-only .score-table {
+    min-width: 100%;
+    width: max-content;
+    margin: 0;
+}
+
+/* Score table shell */
+.score-table-shell {
+    position: relative;
+    width: fit-content;
+}
+
+.score-table-shell-preview {
+    display: inline-block;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    border: 1px solid var(--border-default);
+    background: var(--bg-elevated);
+    transition: all 0.2s ease;
+}
+
+.score-table-shell-preview:hover {
+    border-color: var(--border-strong);
+    box-shadow: var(--shadow-md);
+}
+
+.score-table-preview-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+    background: linear-gradient(
+        to bottom,
+        transparent 40%,
+        rgba(9, 9, 11, 0.8) 100%
+    );
+    border-radius: var(--radius-lg);
+}
+
+.score-table-preview-overlay-text {
+    padding: var(--space-2) var(--space-4);
+    border-radius: var(--radius-full);
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    border: 1px solid var(--border-default);
+    box-shadow: var(--shadow-md);
+}
+
+/* Score table sticky headers */
+.score-table {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+.score-table thead th {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    background: var(--bg-elevated);
+}
+
+.score-table thead th:first-child {
+    left: 0;
+    z-index: 6;
+    min-width: 10rem;
+}
+
+.score-table tbody td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 4;
+    background: var(--bg-elevated);
+}
+
+/* Loading state */
+.loading {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    width: 100vw;
+    height: 100vh;
+    background: var(--bg);
+}
+
+/* Toast/popup legacy styles */
+.popup {
+    width: auto;
+    height: auto;
+    position: fixed;
+    top: var(--space-6);
+    right: var(--space-6);
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    padding: var(--space-4) var(--space-5);
+    font-size: var(--text-sm);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-default);
+    box-shadow: var(--shadow-lg);
+    animation:
+        slideIn 0.2s ease-out,
+        fadeout 0.2s ease-in 2.8s forwards;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-8px) translateX(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) translateX(0);
+    }
+}
+
+@keyframes fadeout {
+    to {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+}
+
+#msgerr.popup {
+    border-color: var(--accent-danger);
+}
+
+#msgnorm.popup {
+    border-color: var(--accent-primary);
+}
+
+/* Base body styles */
+body {
+    background-color: var(--bg);
+    color: var(--text-primary);
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+    margin: 0;
+    padding: var(--space-6);
+    min-height: 100vh;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* Table styling */
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+th, td {
+    border: 1px solid var(--border-default);
+    color: var(--text-primary);
+}
+
+td {
+    min-width: 7rem;
+    height: 3rem;
+}
+
+/* Form container */
+.input-flexy-boxy {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+    align-items: flex-end;
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Better focus visibility */
+:focus-visible {
+    outline: 2px solid var(--accent-primary);
+    outline-offset: 2px;
+}
+
+/* Selection */
+::selection {
+    background: var(--accent-primary-subtle);
+    color: var(--text-primary);
+}

assets/translations.yml

@@ -11,10 +11,10 @@ terms:
 # prepare-startup
 env-var-not-set:
   en: env var "{$key}" not set, can't proceed
-  hu: nincs beállítva a "{$key}" környezeti változó, feladjuk
+  hu: nincs beállítva a(z) "{$key}" környezeti változó, feladjuk
 empty-env-var:
   en: env var "{$key}" empty, can't proceed
-  hu: a "{$key}" környezeti változó üres, feladjuk
+  hu: a(z) "{$key}" környezeti változó üres, feladjuk
 state-load-err:
   en: "couldn't load saved state due tue: {$error}, exiting..."
   hu: "nem sikerült betölteni az elmentett állapotot: {$error}, feladjuk"