Restore Flask dashboard with redesigned UI and API key auth

- Revert from textual-serve back to Flask (textual-serve had WebSocket issues)
- Completely redesigned dashboard: modern dark theme, stat cards, clean tables
- Redesigned login page to match
- Restored API key generation in install script
- Keep API key field in TUI settings

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

bin/gniza

@@ -402,10 +402,10 @@ if [[ "$SUBCOMMAND" == "web" ]]; then
             _web_port="" _web_host=""
             _web_port=$(_parse_flag "--port" "${SUBCMD_ARGS[@]+"${SUBCMD_ARGS[@]}"}") || true
             _web_host=$(_parse_flag "--host" "${SUBCMD_ARGS[@]+"${SUBCMD_ARGS[@]}"}") || true
-            _web_args=(--web)
+            _web_args=()
-            [[ -n "$_web_port" ]] && _web_args+=(--port "$_web_port")
+            [[ -n "$_web_port" ]] && _web_args+=(--port="$_web_port")
-            [[ -n "$_web_host" ]] && _web_args+=(--host "$_web_host")
+            [[ -n "$_web_host" ]] && _web_args+=(--host="$_web_host")
-            PYTHONPATH="$GNIZA_DIR:${PYTHONPATH:-}" exec python3 -m tui "${_web_args[@]}"
+            PYTHONPATH="$GNIZA_DIR:${PYTHONPATH:-}" exec python3 -m web "${_web_args[@]}"
             ;;
         install-service)
             _service_src="$GNIZA_DIR/etc/gniza-web.service"

etc/gniza-web.service

@@ -4,9 +4,11 @@ After=network.target
 
 [Service]
 Type=simple
-ExecStart=/usr/bin/python3 -m tui --web --host 0.0.0.0 --port 8080
+ExecStart=/usr/bin/python3 -m web
 WorkingDirectory=/usr/local/gniza
 Environment=GNIZA_DIR=/usr/local/gniza
+Environment=GNIZA_CONFIG_DIR=/etc/gniza
+Environment=LOG_DIR=/var/log/gniza
 Environment=PYTHONPATH=/usr/local/gniza
 Restart=on-failure
 RestartSec=5

scripts/install.sh

@@ -163,6 +163,21 @@ done
 enable_web="n"
 read -rp "Enable web dashboard (TUI in browser)? (y/n) [n]: " enable_web </dev/tty || true
 if [ "$enable_web" = "y" ] || [ "$enable_web" = "Y" ]; then
+    # Generate API key if not already set
+    if ! grep -q "^WEB_API_KEY=" "$CONFIG_DIR/gniza.conf" 2>/dev/null || \
+       [ -z "$(grep '^WEB_API_KEY=' "$CONFIG_DIR/gniza.conf" 2>/dev/null | sed 's/^WEB_API_KEY="//' | sed 's/"$//')" ]; then
+        api_key="$(python3 -c 'import secrets; print(secrets.token_urlsafe(32))')"
+        if grep -q "^WEB_API_KEY=" "$CONFIG_DIR/gniza.conf" 2>/dev/null; then
+            sed -i "s|^WEB_API_KEY=.*|WEB_API_KEY=\"${api_key}\"|" "$CONFIG_DIR/gniza.conf"
+        else
+            echo "WEB_API_KEY=\"${api_key}\"" >> "$CONFIG_DIR/gniza.conf"
+        fi
+        info "Generated Web API key: $api_key"
+        echo "Save this key -- you will need it to access the dashboard."
+    else
+        info "Web API key already configured."
+    fi
+    # Install systemd service
     if [ "$MODE" = "root" ]; then
         "$INSTALL_DIR/bin/gniza" web install-service || warn "Failed to install web service"
     else

tui/models.py

@@ -205,6 +205,7 @@ class AppSettings:
     work_dir: str = "/usr/local/gniza/workdir"
     web_port: str = "8080"
     web_host: str = "0.0.0.0"
+    web_api_key: str = ""
 
     @classmethod
     def from_conf(cls, data: dict[str, str]) -> "AppSettings":
@@ -228,6 +229,7 @@ class AppSettings:
             work_dir=data.get("WORK_DIR", "/usr/local/gniza/workdir"),
             web_port=data.get("WEB_PORT", "8080"),
             web_host=data.get("WEB_HOST", "0.0.0.0"),
+            web_api_key=data.get("WEB_API_KEY", ""),
         )
 
     def to_conf(self) -> dict[str, str]:
@@ -251,4 +253,5 @@ class AppSettings:
             "WORK_DIR": self.work_dir,
             "WEB_PORT": self.web_port,
             "WEB_HOST": self.web_host,
+            "WEB_API_KEY": self.web_api_key,
         }

tui/screens/settings.py

@@ -66,6 +66,8 @@ class SettingsScreen(Screen):
             yield Input(value=settings.web_port, id="set-web-port")
             yield Static("Host:")
             yield Input(value=settings.web_host, id="set-web-host")
+            yield Static("API Key:")
+            yield Input(value=settings.web_api_key, password=True, id="set-web-key")
             with Horizontal(id="set-buttons"):
                 yield Button("Save", variant="primary", id="btn-save")
                 yield Button("Back", id="btn-back")
@@ -101,6 +103,7 @@ class SettingsScreen(Screen):
             work_dir=self.query_one("#set-workdir", Input).value.strip() or "/usr/local/gniza/workdir",
             web_port=self.query_one("#set-web-port", Input).value.strip() or "8080",
             web_host=self.query_one("#set-web-host", Input).value.strip() or "0.0.0.0",
+            web_api_key=self.query_one("#set-web-key", Input).value,
         )
         conf_path = CONFIG_DIR / "gniza.conf"
         write_conf(conf_path, settings.to_conf())

web/templates/dashboard.html

@@ -5,235 +5,591 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>GNIZA Dashboard</title>
 <style>
-* { margin: 0; padding: 0; box-sizing: border-box; }
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
-body {
+
-    background: #1a1a2e;
+:root {
-    color: #e0e0e0;
+    --bg-primary: #0f1117;
-    font-family: 'Courier New', monospace;
+    --bg-card: #1a1d27;
-    padding: 1rem;
+    --bg-card-hover: #1e2130;
+    --bg-input: #13151d;
+    --border: #2a2d3a;
+    --border-light: #353849;
+    --text-primary: #e4e4e7;
+    --text-secondary: #9ca3af;
+    --text-muted: #6b7280;
+    --accent: #10b981;
+    --accent-dim: rgba(16, 185, 129, 0.12);
+    --danger: #ef4444;
+    --danger-dim: rgba(239, 68, 68, 0.12);
+    --warning: #f59e0b;
+    --warning-dim: rgba(245, 158, 11, 0.12);
+    --info: #3b82f6;
+    --info-dim: rgba(59, 130, 246, 0.12);
 }
-header {
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    line-height: 1.5;
+    min-height: 100vh;
+}
+
+/* Header */
+.header {
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border);
+    padding: 0 2rem;
+    height: 64px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid #00cc00;
+    justify-content: space-between;
-    padding-bottom: 0.75rem;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.header-logo {
+    width: 32px;
+    height: 32px;
+    background: var(--accent);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: var(--bg-primary);
+}
+
+.header-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
+
+.header-title span {
+    color: var(--text-muted);
+    font-weight: 400;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.header-actions a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 0.85rem;
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    transition: all 0.15s;
+}
+
+.header-actions a:hover {
+    background: var(--bg-input);
+    color: var(--text-primary);
+}
+
+/* Main content */
+.main {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 1.5rem 2rem;
+}
+
+/* Stats row */
+.stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
     margin-bottom: 1.5rem;
 }
-header h1 {
+
-    color: #00cc00;
+.stat-card {
-    font-size: 1.4rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 1.25rem;
 }
-header a {
+
-    color: #aaa;
+.stat-label {
-    text-decoration: none;
+    font-size: 0.8rem;
-    font-size: 0.9rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.5rem;
 }
-header a:hover { color: #00cc00; }
+
+.stat-value {
+    font-size: 1.8rem;
+    font-weight: 700;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.stat-value.accent { color: var(--accent); }
+.stat-value.info { color: var(--info); }
+.stat-value.warning { color: var(--warning); }
+
+.stat-detail {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    margin-top: 0.25rem;
+}
+
+/* Grid layout */
 .grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
 }
-@media (max-width: 800px) {
+
-    .grid { grid-template-columns: 1fr; }
+.grid-full {
+    grid-column: 1 / -1;
 }
+
+/* Cards */
 .card {
-    background: #16213e;
+    background: var(--bg-card);
-    border: 1px solid #333;
+    border: 1px solid var(--border);
-    border-radius: 6px;
+    border-radius: 10px;
-    padding: 1rem;
+    overflow: hidden;
 }
-.card h2 {
+
-    color: #00cc00;
+.card-header {
-    font-size: 1rem;
+    display: flex;
-    margin-bottom: 0.75rem;
+    align-items: center;
-    border-bottom: 1px solid #333;
+    justify-content: space-between;
-    padding-bottom: 0.4rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--border);
 }
+
+.card-title {
+    font-size: 0.9rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.card-icon {
+    width: 20px;
+    height: 20px;
+    opacity: 0.6;
+}
+
+.card-body {
+    padding: 0;
+}
+
+/* Tables */
 table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.85rem;
 }
-th {
+
+thead th {
     text-align: left;
-    color: #00cc00;
+    padding: 0.65rem 1.25rem;
-    padding: 0.3rem 0.5rem;
+    color: var(--text-muted);
-    border-bottom: 1px solid #333;
+    font-weight: 500;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    background: var(--bg-input);
+    border-bottom: 1px solid var(--border);
 }
-td {
+
-    padding: 0.3rem 0.5rem;
+tbody td {
-    border-bottom: 1px solid #222;
+    padding: 0.65rem 1.25rem;
+    border-bottom: 1px solid var(--border);
+    color: var(--text-secondary);
 }
+
+tbody tr:last-child td {
+    border-bottom: none;
+}
+
+tbody tr:hover {
+    background: var(--bg-card-hover);
+}
+
+td.name {
+    color: var(--text-primary);
+    font-weight: 500;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.82rem;
+}
+
+/* Badges */
 .badge {
-    display: inline-block;
+    display: inline-flex;
-    padding: 0.1rem 0.4rem;
+    align-items: center;
-    border-radius: 3px;
+    gap: 0.3rem;
-    font-size: 0.75rem;
+    padding: 0.2rem 0.55rem;
-    font-weight: bold;
+    border-radius: 5px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
 }
-.badge-yes { background: #00cc00; color: #1a1a2e; }
+
-.badge-no { background: #555; color: #ccc; }
+.badge-enabled {
-.badge-success { background: #00cc00; color: #1a1a2e; }
+    background: var(--accent-dim);
-.badge-error { background: #cc3333; color: #fff; }
+    color: var(--accent);
-.badge-unknown { background: #666; color: #ccc; }
+}
-.btn-backup {
+
-    background: #0f3460;
+.badge-disabled {
-    color: #00cc00;
+    background: rgba(107, 114, 128, 0.15);
-    border: 1px solid #00cc00;
+    color: var(--text-muted);
-    padding: 0.2rem 0.6rem;
+}
-    border-radius: 3px;
+
-    cursor: pointer;
+.badge-active {
+    background: var(--accent-dim);
+    color: var(--accent);
+}
+
+.badge-inactive {
+    background: rgba(107, 114, 128, 0.15);
+    color: var(--text-muted);
+}
+
+.badge-success {
+    background: var(--accent-dim);
+    color: var(--accent);
+}
+
+.badge-error {
+    background: var(--danger-dim);
+    color: var(--danger);
+}
+
+.badge-unknown {
+    background: var(--warning-dim);
+    color: var(--warning);
+}
+
+.badge-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 0.75rem;
+    border-radius: 6px;
+    font-size: 0.78rem;
+    font-weight: 500;
     font-family: inherit;
-    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.15s;
+    border: 1px solid transparent;
 }
-.btn-backup:hover { background: #00cc00; color: #1a1a2e; }
+
-.btn-backup:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-primary {
-.log-tail {
+    background: var(--accent);
-    background: #0a0a1a;
+    color: var(--bg-primary);
-    padding: 0.5rem;
+    border-color: var(--accent);
-    border-radius: 4px;
+}
-    font-size: 0.8rem;
+
+.btn-primary:hover {
+    filter: brightness(1.1);
+}
+
+.btn-primary:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.btn-outline {
+    background: transparent;
+    color: var(--text-secondary);
+    border-color: var(--border-light);
+}
+
+.btn-outline:hover {
+    background: var(--bg-input);
+    color: var(--text-primary);
+    border-color: var(--text-muted);
+}
+
+/* Log viewer */
+.log-viewer {
+    background: var(--bg-input);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.78rem;
+    line-height: 1.7;
+    padding: 1rem 1.25rem;
+    max-height: 220px;
+    overflow-y: auto;
+    color: var(--text-secondary);
     white-space: pre-wrap;
     word-break: break-all;
-    max-height: 200px;
-    overflow-y: auto;
-    color: #aaa;
 }
-.empty { color: #666; font-style: italic; }
+
-.full-width { grid-column: 1 / -1; }
+.log-meta {
-.status-msg {
+    padding: 0.75rem 1.25rem;
-    margin-top: 0.3rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    font-size: 0.82rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.log-meta strong {
+    font-family: 'JetBrains Mono', monospace;
     font-size: 0.8rem;
-    color: #00cc00;
+    color: var(--text-primary);
+}
+
+/* Empty state */
+.empty {
+    padding: 2rem 1.25rem;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+/* Status message */
+.status-msg {
+    font-size: 0.75rem;
+    margin-top: 0.3rem;
+    transition: opacity 0.3s;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+    .stats { grid-template-columns: repeat(2, 1fr); }
+    .grid { grid-template-columns: 1fr; }
+    .main { padding: 1rem; }
+    .header { padding: 0 1rem; }
+}
+
+@media (max-width: 500px) {
+    .stats { grid-template-columns: 1fr; }
 }
 </style>
 </head>
 <body>
-<header>
-    <h1>GNIZA Backup Dashboard</h1>
-    <a href="/logout">Logout</a>
-</header>
 
-<div class="grid">
+<div class="header">
-    <div class="card">
+    <div class="header-brand">
-        <h2>Targets</h2>
+        <div class="header-logo">G</div>
-        {% if targets %}
+        <div class="header-title">GNIZA <span>Backup Dashboard</span></div>
-        <table>
+    </div>
-            <tr><th>Name</th><th>Remote</th><th>Status</th><th></th></tr>
+    <div class="header-actions">
-            {% for t in targets %}
+        <a href="/logout">Logout</a>
-            <tr>
+    </div>
-                <td>{{ t.name }}</td>
+</div>
-                <td>{{ t.remote or '-' }}</td>
+
-                <td>
+<div class="main">
-                    {% if t.enabled == 'yes' %}
+
-                    <span class="badge badge-yes">enabled</span>
+    <!-- Stats -->
-                    {% else %}
+    <div class="stats">
-                    <span class="badge badge-no">disabled</span>
+        <div class="stat-card">
-                    {% endif %}
+            <div class="stat-label">Targets</div>
-                </td>
+            <div class="stat-value accent">{{ targets|length }}</div>
-                <td>
+            <div class="stat-detail">{{ targets|selectattr('enabled', 'equalto', 'yes')|list|length }} enabled</div>
-                    {% if t.enabled == 'yes' %}
+        </div>
-                    <button class="btn-backup" onclick="triggerBackup(this, '{{ t.name }}')">Backup</button>
+        <div class="stat-card">
-                    {% endif %}
+            <div class="stat-label">Remotes</div>
-                </td>
+            <div class="stat-value info">{{ remotes|length }}</div>
-            </tr>
+            <div class="stat-detail">storage destinations</div>
-            {% endfor %}
+        </div>
-        </table>
+        <div class="stat-card">
-        {% else %}
+            <div class="stat-label">Schedules</div>
-        <p class="empty">No targets configured.</p>
+            <div class="stat-value warning">{{ schedules|length }}</div>
-        {% endif %}
+            <div class="stat-detail">{{ schedules|selectattr('active', 'equalto', 'yes')|list|length }} active</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-label">Last Backup</div>
+            {% if last_log %}
+            <div class="stat-value {% if last_log.status == 'success' %}accent{% elif last_log.status == 'error' %}danger{% else %}warning{% endif %}" style="font-size: 1.2rem;">{{ last_log.status|upper }}</div>
+            <div class="stat-detail">{{ last_log.name }}</div>
+            {% else %}
+            <div class="stat-value" style="color: var(--text-muted); font-size: 1.2rem;">N/A</div>
+            <div class="stat-detail">no logs found</div>
+            {% endif %}
+        </div>
     </div>
 
-    <div class="card">
+    <div class="grid">
-        <h2>Remotes</h2>
+
-        {% if remotes %}
+        <!-- Targets -->
-        <table>
+        <div class="card">
-            <tr><th>Name</th><th>Type</th><th>Host</th></tr>
+            <div class="card-header">
-            {% for r in remotes %}
+                <div class="card-title">
-            <tr>
+                    <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
-                <td>{{ r.name }}</td>
+                    Targets
-                <td>{{ r.type }}</td>
+                </div>
-                <td>{{ r.host or r.base }}</td>
+            </div>
-            </tr>
+            <div class="card-body">
-            {% endfor %}
+                {% if targets %}
-        </table>
+                <table>
-        {% else %}
+                    <thead><tr><th>Name</th><th>Remote</th><th>Status</th><th></th></tr></thead>
-        <p class="empty">No remotes configured.</p>
+                    <tbody>
-        {% endif %}
+                    {% for t in targets %}
+                    <tr>
+                        <td class="name">{{ t.name }}</td>
+                        <td>{{ t.remote or '--' }}</td>
+                        <td>
+                            {% if t.enabled == 'yes' %}
+                            <span class="badge badge-enabled"><span class="badge-dot"></span> Enabled</span>
+                            {% else %}
+                            <span class="badge badge-disabled"><span class="badge-dot"></span> Disabled</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            {% if t.enabled == 'yes' %}
+                            <button class="btn btn-primary" onclick="triggerBackup(this, '{{ t.name }}')">Backup Now</button>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+                {% else %}
+                <div class="empty">No targets configured</div>
+                {% endif %}
+            </div>
+        </div>
+
+        <!-- Remotes -->
+        <div class="card">
+            <div class="card-header">
+                <div class="card-title">
+                    <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><circle cx="6" cy="6" r="1" fill="currentColor"/><circle cx="6" cy="18" r="1" fill="currentColor"/></svg>
+                    Remotes
+                </div>
+            </div>
+            <div class="card-body">
+                {% if remotes %}
+                <table>
+                    <thead><tr><th>Name</th><th>Type</th><th>Host / Path</th></tr></thead>
+                    <tbody>
+                    {% for r in remotes %}
+                    <tr>
+                        <td class="name">{{ r.name }}</td>
+                        <td><span class="badge badge-enabled">{{ r.type }}</span></td>
+                        <td>{{ r.host or r.base }}</td>
+                    </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+                {% else %}
+                <div class="empty">No remotes configured</div>
+                {% endif %}
+            </div>
+        </div>
+
+        <!-- Schedules -->
+        <div class="card">
+            <div class="card-header">
+                <div class="card-title">
+                    <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+                    Schedules
+                </div>
+            </div>
+            <div class="card-body">
+                {% if schedules %}
+                <table>
+                    <thead><tr><th>Name</th><th>Schedule</th><th>Time</th><th>Status</th></tr></thead>
+                    <tbody>
+                    {% for s in schedules %}
+                    <tr>
+                        <td class="name">{{ s.name }}</td>
+                        <td>{{ s.schedule }}</td>
+                        <td style="font-family: 'JetBrains Mono', monospace;">{{ s.time or '--' }}</td>
+                        <td>
+                            {% if s.active == 'yes' %}
+                            <span class="badge badge-active"><span class="badge-dot"></span> Active</span>
+                            {% else %}
+                            <span class="badge badge-inactive"><span class="badge-dot"></span> Inactive</span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+                {% else %}
+                <div class="empty">No schedules configured</div>
+                {% endif %}
+            </div>
+        </div>
+
+        <!-- Last Backup Log -->
+        <div class="card">
+            <div class="card-header">
+                <div class="card-title">
+                    <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+                    Last Backup Log
+                </div>
+            </div>
+            {% if last_log %}
+            <div class="log-meta">
+                <strong>{{ last_log.name }}</strong>
+                <span class="badge badge-{{ last_log.status }}"><span class="badge-dot"></span> {{ last_log.status|capitalize }}</span>
+            </div>
+            <div class="log-viewer">{{ last_log.tail }}</div>
+            {% else %}
+            <div class="empty">No log files found</div>
+            {% endif %}
+        </div>
+
     </div>
 
-    <div class="card">
-        <h2>Schedules</h2>
-        {% if schedules %}
-        <table>
-            <tr><th>Name</th><th>Schedule</th><th>Time</th><th>Status</th></tr>
-            {% for s in schedules %}
-            <tr>
-                <td>{{ s.name }}</td>
-                <td>{{ s.schedule }}</td>
-                <td>{{ s.time or '-' }}</td>
-                <td>
-                    {% if s.active == 'yes' %}
-                    <span class="badge badge-yes">active</span>
-                    {% else %}
-                    <span class="badge badge-no">inactive</span>
-                    {% endif %}
-                </td>
-            </tr>
-            {% endfor %}
-        </table>
-        {% else %}
-        <p class="empty">No schedules configured.</p>
-        {% endif %}
-    </div>
-
-    <div class="card">
-        <h2>Last Backup</h2>
-        {% if last_log %}
-        <p>
-            <strong>{{ last_log.name }}</strong>
-            <span class="badge badge-{{ last_log.status }}">{{ last_log.status }}</span>
-        </p>
-        <div class="log-tail">{{ last_log.tail }}</div>
-        {% else %}
-        <p class="empty">No log files found.</p>
-        {% endif %}
-    </div>
 </div>
 
 <script>
 function triggerBackup(btn, target) {
     btn.disabled = true;
-    btn.textContent = '...';
+    var origText = btn.textContent;
-    var fd = new FormData();
+    btn.textContent = 'Starting...';
-    fd.append('target', target);
+    fetch('/api/backup', {
-    fetch('/api/backup', { method: 'POST', body: fd })
+        method: 'POST',
-        .then(function(r) { return r.json(); })
+        headers: { 'Content-Type': 'application/json' },
-        .then(function(data) {
+        body: JSON.stringify({ target: target })
-            if (data.error) {
+    })
-                btn.textContent = 'Error';
+    .then(function(r) { return r.json(); })
-                btn.style.borderColor = '#cc3333';
+    .then(function(data) {
-                btn.style.color = '#cc3333';
+        if (data.error) {
-            } else {
-                btn.textContent = 'Started';
-            }
-            setTimeout(function() {
-                btn.disabled = false;
-                btn.textContent = 'Backup';
-                btn.style.borderColor = '';
-                btn.style.color = '';
-            }, 3000);
-        })
-        .catch(function() {
             btn.textContent = 'Error';
-            setTimeout(function() {
+            btn.style.background = 'var(--danger)';
-                btn.disabled = false;
+        } else {
-                btn.textContent = 'Backup';
+            btn.textContent = 'Started!';
-            }, 3000);
+        }
-        });
+        setTimeout(function() {
+            btn.disabled = false;
+            btn.textContent = origText;
+            btn.style.background = '';
+        }, 3000);
+    })
+    .catch(function() {
+        btn.textContent = 'Error';
+        btn.style.background = 'var(--danger)';
+        setTimeout(function() {
+            btn.disabled = false;
+            btn.textContent = origText;
+            btn.style.background = '';
+        }, 3000);
+    });
 }
 </script>
+
 </body>
 </html>

web/templates/login.html

@@ -5,78 +5,137 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>GNIZA - Login</title>
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+    --bg-primary: #0f1117;
+    --bg-card: #1a1d27;
+    --bg-input: #13151d;
+    --border: #2a2d3a;
+    --text-primary: #e4e4e7;
+    --text-secondary: #9ca3af;
+    --text-muted: #6b7280;
+    --accent: #10b981;
+    --danger: #ef4444;
+}
+
 * { margin: 0; padding: 0; box-sizing: border-box; }
+
 body {
-    background: #1a1a2e;
+    background: var(--bg-primary);
-    color: #e0e0e0;
+    color: var(--text-primary);
-    font-family: 'Courier New', monospace;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
 }
-.login-box {
+
-    background: #16213e;
+.login-card {
-    border: 1px solid #00cc00;
+    background: var(--bg-card);
-    border-radius: 8px;
+    border: 1px solid var(--border);
-    padding: 2rem;
+    border-radius: 12px;
+    padding: 2.5rem;
     width: 100%;
-    max-width: 400px;
+    max-width: 380px;
 }
-h1 {
+
-    color: #00cc00;
+.login-brand {
-    text-align: center;
+    display: flex;
-    margin-bottom: 1.5rem;
+    align-items: center;
-    font-size: 1.5rem;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-bottom: 2rem;
 }
+
+.login-logo {
+    width: 40px;
+    height: 40px;
+    background: var(--accent);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.3rem;
+    color: var(--bg-primary);
+}
+
+.login-title {
+    font-size: 1.4rem;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+}
+
 .flash {
-    background: #3a1a1a;
+    background: rgba(239, 68, 68, 0.1);
-    color: #ff6666;
+    border: 1px solid rgba(239, 68, 68, 0.2);
-    padding: 0.5rem;
+    color: var(--danger);
-    border-radius: 4px;
+    padding: 0.6rem 0.8rem;
-    margin-bottom: 1rem;
+    border-radius: 8px;
+    margin-bottom: 1.25rem;
     text-align: center;
+    font-size: 0.85rem;
 }
+
 label {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.4rem;
-    color: #aaa;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    font-weight: 500;
 }
+
 input[type="password"] {
     width: 100%;
-    padding: 0.6rem;
+    padding: 0.7rem 0.9rem;
-    background: #0f3460;
+    background: var(--bg-input);
-    border: 1px solid #333;
+    border: 1px solid var(--border);
-    border-radius: 4px;
+    border-radius: 8px;
-    color: #e0e0e0;
+    color: var(--text-primary);
-    font-family: inherit;
+    font-family: 'JetBrains Mono', monospace;
-    font-size: 1rem;
+    font-size: 0.9rem;
-    margin-bottom: 1rem;
+    margin-bottom: 1.25rem;
+    transition: border-color 0.15s;
 }
+
 input[type="password"]:focus {
     outline: none;
-    border-color: #00cc00;
+    border-color: var(--accent);
 }
+
 button {
     width: 100%;
-    padding: 0.6rem;
+    padding: 0.7rem;
-    background: #00cc00;
+    background: var(--accent);
-    color: #1a1a2e;
+    color: var(--bg-primary);
     border: none;
-    border-radius: 4px;
+    border-radius: 8px;
     font-family: inherit;
-    font-size: 1rem;
+    font-size: 0.9rem;
-    font-weight: bold;
+    font-weight: 600;
     cursor: pointer;
+    transition: filter 0.15s;
 }
+
 button:hover {
-    background: #00ff00;
+    filter: brightness(1.1);
+}
+
+.login-footer {
+    text-align: center;
+    margin-top: 1.5rem;
+    color: var(--text-muted);
+    font-size: 0.78rem;
 }
 </style>
 </head>
 <body>
-<div class="login-box">
+<div class="login-card">
-    <h1>GNIZA Backup</h1>
+    <div class="login-brand">
+        <div class="login-logo">G</div>
+        <div class="login-title">GNIZA</div>
+    </div>
     {% with messages = get_flashed_messages() %}
     {% if messages %}
     {% for msg in messages %}
@@ -87,8 +146,9 @@ button:hover {
     <form method="POST">
         <label for="token">API Key</label>
         <input type="password" name="token" id="token" placeholder="Enter your API key" autofocus>
-        <button type="submit">Login</button>
+        <button type="submit">Sign In</button>
     </form>
+    <div class="login-footer">GNIZA Backup Manager</div>
 </div>
 </body>
 </html>