init

2025-09-17 08:26:56 +02:00
parent 3ba44e47c1
commit 7af7ba28a0
23 changed files with 2420 additions and 0 deletions
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -0,0 +1,163 @@
+/* Dark theme inspired by mockup */
+:root {
+  --bg-primary: #1a1d2e;
+  --bg-secondary: #252837;
+  --bg-card: #2a2d3e;
+  --text-primary: #ffffff;
+  --text-secondary: #9ca3af;
+  --accent-pink: #e879f9;
+  --accent-green: #10b981;
+  --accent-orange: #f97316;
+  --accent-cyan: #06b6d4;
+  --accent-purple: #8b5cf6;
+  --border-color: #374151;
+}
+
+body {
+  background-color: var(--bg-primary) !important;
+  color: var(--text-primary) !important;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+}
+
+.nicegui-content {
+  background-color: var(--bg-primary) !important;
+}
+
+/* Card styling */
+.q-card {
+  background-color: var(--bg-card) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 16px !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Header styling */
+.q-header {
+  background-color: var(--bg-secondary) !important;
+  border-bottom: 1px solid var(--border-color) !important;
+}
+
+/* Drawer styling */
+.q-drawer {
+  background-color: var(--bg-secondary) !important;
+  border-right: 1px solid var(--border-color) !important;
+}
+
+/* Button styling */
+.q-btn {
+  border-radius: 12px !important;
+}
+
+.q-btn--flat {
+  background-color: transparent !important;
+}
+
+/* Progress circle styling */
+.progress-circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-circle .q-circular-progress {
+  position: absolute;
+}
+
+.progress-circle .progress-text {
+  font-weight: 600;
+  font-size: 1.25rem;
+  color: var(--text-primary);
+}
+
+/* Metric card styling */
+.metric-card {
+  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(42, 45, 62, 0.8) 100%);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Chart area styling */
+.chart-area {
+  background-color: var(--bg-secondary);
+  border-radius: 12px;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+}
+
+/* Bottom navigation */
+.bottom-nav {
+  background-color: var(--bg-secondary) !important;
+  border-top: 1px solid var(--border-color) !important;
+  backdrop-filter: blur(10px);
+}
+
+.bottom-nav .q-btn {
+  color: var(--text-secondary) !important;
+}
+
+.bottom-nav .q-btn--active {
+  color: var(--accent-cyan) !important;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-secondary);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+/* Glassmorphism effect */
+.glass {
+  background: rgba(42, 45, 62, 0.6);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Layout and viewport fixes */
+body, .nicegui-content, .q-page, .q-page-container {
+  background: #1a1d2e !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+}
+
+.q-header, .q-drawer, .q-footer {
+  z-index: 2000 !important;
+}
+
+.q-drawer {
+  width: 256px !important;
+}
+
+.q-header {
+  height: 64px !important;
+}
+
+.main-content {
+  height: calc(100vh - 64px) !important;
+  overflow-y: auto !important;
+  margin-left: 256px !important;
+  padding-top: 64px !important;
+}