vibe coded website (plus captive portal)

needs missing ESP32 implementation

Signed-off-by: Peter Siegmund <developer@mars3142.org>

firmware/storage/www/css/shared.css

@@ -0,0 +1,300 @@
+/* Shared CSS - Base styles for all pages */
+
+/* CSS Variables - Dark Mode (default) */
+:root {
+    --bg-color: #1a1a2e;
+    --card-bg: #16213e;
+    --accent: #0f3460;
+    --text: #eaeaea;
+    --text-muted: #a0a0a0;
+    --success: #00d26a;
+    --error: #ff6b6b;
+    --border: #2a2a4a;
+    --input-bg: #1a1a2e;
+    --shadow: rgba(0, 0, 0, 0.3);
+    --primary: #c41e3a;
+}
+
+/* CSS Variables - Light Mode */
+[data-theme="light"] {
+    --bg-color: #faf8f5;
+    --card-bg: #ffffff;
+    --accent: #fef2f2;
+    --text: #1a1a2e;
+    --text-muted: #6b7280;
+    --success: #c41e3a;
+    --error: #dc2626;
+    --border: #e5d9d0;
+    --input-bg: #ffffff;
+    --shadow: rgba(196, 30, 58, 0.1);
+    --primary: #c41e3a;
+}
+
+/* Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg-color);
+    color: var(--text);
+    min-height: 100vh;
+    transition: background 0.3s, color 0.3s;
+}
+
+/* Typography */
+h1 {
+    font-size: 1.5rem;
+    color: var(--text);
+}
+
+h2 {
+    font-size: 1.1rem;
+    margin-bottom: 15px;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+h2::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 20px;
+    background: var(--success);
+    border-radius: 2px;
+}
+
+/* Card */
+.card {
+    background: var(--card-bg);
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 16px;
+    border: 1px solid var(--border);
+    box-shadow: 0 2px 8px var(--shadow);
+}
+
+/* Form Elements */
+.form-group {
+    margin-bottom: 12px;
+}
+
+label {
+    display: block;
+    margin-bottom: 6px;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+input[type="text"],
+input[type="password"],
+select {
+    width: 100%;
+    padding: 12px 14px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--input-bg);
+    color: var(--text);
+    font-size: 16px;
+    transition: border-color 0.2s;
+}
+
+input:focus,
+select:focus {
+    outline: none;
+    border-color: var(--success);
+}
+
+/* Buttons */
+.btn {
+    padding: 12px 20px;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: transform 0.1s, opacity 0.2s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 44px;
+    touch-action: manipulation;
+}
+
+.btn:hover {
+    opacity: 0.9;
+}
+
+.btn:active {
+    transform: scale(0.98);
+}
+
+.btn-primary {
+    background: var(--success);
+    color: #fff;
+}
+
+[data-theme="light"] .btn-primary {
+    background: var(--primary);
+    color: #fff;
+}
+
+[data-theme="light"] .btn-primary:hover {
+    background: #a31830;
+}
+
+.btn-secondary {
+    background: var(--accent);
+    color: var(--text);
+}
+
+.btn-group {
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+    flex-wrap: wrap;
+}
+
+.btn-group .btn {
+    flex: 1;
+    min-width: 120px;
+}
+
+/* Status Messages */
+.status {
+    padding: 10px 14px;
+    border-radius: 8px;
+    margin-top: 12px;
+    display: none;
+    font-size: 0.9rem;
+}
+
+.status.success {
+    display: block;
+    background: rgba(0, 210, 106, 0.15);
+    border: 1px solid var(--success);
+    color: var(--success);
+}
+
+.status.error {
+    display: block;
+    background: rgba(255, 107, 107, 0.15);
+    border: 1px solid var(--error);
+    color: var(--error);
+}
+
+.status.info {
+    display: block;
+    background: rgba(15, 52, 96, 0.5);
+    border: 1px solid var(--accent);
+    color: var(--text);
+}
+
+/* Theme Toggle */
+.theme-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--card-bg);
+    padding: 8px 12px;
+    border-radius: 20px;
+    border: 1px solid var(--border);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.theme-toggle:hover {
+    border-color: var(--success);
+}
+
+.theme-toggle-icon {
+    font-size: 1.2rem;
+    transition: transform 0.3s;
+}
+
+.theme-toggle-label {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+
+/* Language Toggle */
+.lang-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--card-bg);
+    padding: 8px 12px;
+    border-radius: 20px;
+    border: 1px solid var(--border);
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+
+.lang-toggle:hover {
+    border-color: var(--success);
+}
+
+.lang-flag {
+    font-size: 1.1rem;
+}
+
+/* Header Controls */
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.captive-header {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+}
+
+[data-theme="light"] .header h1 {
+    color: var(--primary);
+}
+
+/* Loading Spinner */
+.loading {
+    display: none;
+    text-align: center;
+    padding: 30px;
+    color: var(--text-muted);
+}
+
+.loading.active {
+    display: block;
+}
+
+.spinner {
+    width: 36px;
+    height: 36px;
+    border: 3px solid var(--border);
+    border-top-color: var(--success);
+    border-radius: 50%;
+    margin: 0 auto 12px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Safe area for notched phones */
+@supports (padding: max(0px)) {
+    body {
+        padding-left: max(12px, env(safe-area-inset-left));
+        padding-right: max(12px, env(safe-area-inset-right));
+        padding-bottom: max(12px, env(safe-area-inset-bottom));
+    }
+}