feat: Refactor dashboard template to extend base layout and improve structure

2026-06-01 12:44:36 +02:00
parent bbc806bcef
commit b413c66ca4
2 changed files with 287 additions and 327 deletions
@@ -3,44 +3,146 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{{ title or "Arbitrade" }}</title>
+    <title>{% block title %}{{ title or "Arbitrade" }}{% endblock %}</title>
    <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+    {% block head_scripts %}{% endblock %}
    <style>
-      :root {
-        --bg: #f4f7f5;
-        --ink: #122118;
-        --accent: #1f7a4c;
-        --card: #ffffff;
-      }
      body {
        margin: 0;
-        font-family: "Segoe UI", sans-serif;
-        color: var(--ink);
-        background: radial-gradient(circle at top, #e9f7ef, var(--bg));
+        font-family: Arial, sans-serif;
+        background: #0b1220;
+        color: #e5eefb;
      }
-      .wrap {
-        max-width: 720px;
-        margin: 4rem auto;
-        padding: 0 1rem;
+      .shell {
+        max-width: 1120px;
+        margin: 0 auto;
+        padding: 32px 20px 48px;
+      }
+      .hero {
+        display: flex;
+        justify-content: space-between;
+        gap: 24px;
+        align-items: end;
+        margin-bottom: 24px;
+      }
+      .title {
+        font-size: 2rem;
+        margin: 0 0 8px;
+      }
+      .subtitle {
+        margin: 0;
+        color: #9fb2d0;
+      }
+      .panel {
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 16px;
+        padding: 20px;
+      }
+      .grid {
+        display: grid;
+        gap: 16px;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }
      .card {
-        background: var(--card);
-        border: 1px solid #d8e7dd;
-        border-radius: 12px;
-        padding: 1.25rem;
-        box-shadow: 0 6px 24px rgba(18, 33, 24, 0.08);
+        background: rgba(255, 255, 255, 0.04);
+        border-radius: 14px;
+        padding: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
      }
-      .badge {
-        display: inline-block;
-        background: #d9f3e5;
-        color: var(--accent);
-        border-radius: 999px;
-        padding: 0.2rem 0.6rem;
+      .label {
+        color: #9fb2d0;
+        font-size: 0.85rem;
+        margin-bottom: 8px;
+      }
+      .value {
+        font-size: 1.4rem;
+        font-weight: 700;
+      }
+      .meta {
+        margin-top: 18px;
+        color: #7f95b7;
        font-size: 0.85rem;
      }
+      .toolbar {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .toolbar form {
+        margin: 0;
+      }
+      .button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        cursor: pointer;
+        padding: 10px 14px;
+        border-radius: 999px;
+        background: #2d6cdf;
+        color: white;
+        text-decoration: none;
+        font: inherit;
+      }
+      .button.secondary {
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+      }
+      .button.danger {
+        background: #ba3d4f;
+      }
+      .form-grid {
+        display: grid;
+        gap: 12px;
+      }
+      .field {
+        display: grid;
+        gap: 6px;
+        color: #9fb2d0;
+        font-size: 0.9rem;
+      }
+      .field input {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 12px;
+        border-radius: 10px;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        background: rgba(255, 255, 255, 0.04);
+        color: #e5eefb;
+        font: inherit;
+      }
+      .field.checkbox {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .field.checkbox input {
+        width: auto;
+      }
+      .control-actions {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .chart-head {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .chart-canvas {
+        width: 100%;
+        min-height: 260px;
+      }
    </style>
+    {% block extra_style %}{% endblock %}
  </head>
  <body>
-    <main class="wrap">{% block content %}{% endblock %}</main>
+    <main class="{% block main_class %}shell{% endblock %}">
+      {% block content %}{% endblock %}
+    </main>
+    {% block scripts %}{% endblock %}
  </body>
 </html>