Revert to version cd85aff

api/timers.php

@@ -0,0 +1,41 @@
+<?php
+header('Content-Type: application/json');
+require_once __DIR__ . '/../db/config.php';
+
+$method = $_SERVER['REQUEST_METHOD'];
+
+try {
+    $pdo = db();
+
+    if ($method === 'GET') {
+        $stmt = $pdo->query("SELECT * FROM saved_timers ORDER BY created_at DESC");
+        $timers = $stmt->fetchAll();
+        echo json_encode(['success' => true, 'data' => $timers]);
+    } 
+    elseif ($method === 'POST') {
+        $data = json_decode(file_get_contents('php://input'), true);
+        if (empty($data['name']) || empty($data['config'])) {
+            throw new Exception("Missing name or config");
+        }
+
+        $stmt = $pdo->prepare("INSERT INTO saved_timers (name, config) VALUES (:name, :config)");
+        $stmt->execute([
+            ':name' => $data['name'],
+            ':config' => json_encode($data['config'])
+        ]);
+        echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
+    } 
+    elseif ($method === 'DELETE') {
+        $id = $_GET['id'] ?? null;
+        if (!$id) {
+            throw new Exception("Missing id");
+        }
+
+        $stmt = $pdo->prepare("DELETE FROM saved_timers WHERE id = :id");
+        $stmt->execute([':id' => $id]);
+        echo json_encode(['success' => true]);
+    }
+} catch (Exception $e) {
+    http_response_code(400);
+    echo json_encode(['success' => false, 'error' => $e->getMessage()]);
+}

assets/css/custom.css

@@ -1,302 +1,377 @@
-body {
-    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-    background-size: 400% 400%;
-    animation: gradient 15s ease infinite;
-    color: #212529;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    margin: 0;
-    min-height: 100vh;
+:root {
+    --bg-color: #ffffff;
+    --surface-color: #f9fafb;
+    --text-primary: #111827;
+    --text-secondary: #6b7280;
+    --border-color: #e5e7eb;
+    --accent-color: #3b82f6;
+    --accent-hover: #2563eb;
+    --danger-color: #ef4444;
+    --success-color: #10b981;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
 }
 
-.main-wrapper {
+body.dark-mode {
+    --bg-color: #0f172a;
+    --surface-color: #1e293b;
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --border-color: #334155;
+    --accent-color: #60a5fa;
+    --accent-hover: #93c5fd;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-primary);
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.navbar {
+    background-color: var(--bg-color) !important;
+    border-color: var(--border-color) !important;
+}
+
+.navbar-brand {
+    color: var(--text-primary) !important;
+}
+
+.font-tabular {
+    font-variant-numeric: tabular-nums;
+    font-family: var(--font-mono);
+}
+
+/* Dark Mode Toggle */
+.dark-mode-toggle {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: 100vh;
-    width: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 1;
-}
-
-@keyframes gradient {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
-}
-
-.chat-container {
-    width: 100%;
-    max-width: 600px;
-    background: rgba(255, 255, 255, 0.85);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 20px;
-    display: flex;
-    flex-direction: column;
-    height: 85vh;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    overflow: hidden;
-}
-
-.chat-header {
-    padding: 1.5rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    background: rgba(255, 255, 255, 0.5);
-    font-weight: 700;
-    font-size: 1.1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-}
-
-/* Custom Scrollbar */
-::-webkit-scrollbar {
-    width: 6px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
-}
-
-.message {
-    max-width: 85%;
-    padding: 0.85rem 1.1rem;
-    border-radius: 16px;
-    line-height: 1.5;
-    font-size: 0.95rem;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-    animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-.message.visitor {
-    align-self: flex-end;
-    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
-    color: #fff;
-    border-bottom-right-radius: 4px;
-}
-
-.message.bot {
-    align-self: flex-start;
-    background: #ffffff;
-    color: #212529;
-    border-bottom-left-radius: 4px;
-}
-
-.chat-input-area {
-    padding: 1.25rem;
-    background: rgba(255, 255, 255, 0.5);
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.chat-input-area form {
-    display: flex;
-    gap: 0.75rem;
-}
-
-.chat-input-area input {
-    flex: 1;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    padding: 0.75rem 1rem;
-    outline: none;
-    background: rgba(255, 255, 255, 0.9);
-    transition: all 0.3s ease;
-}
-
-.chat-input-area input:focus {
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
-}
-
-.chat-input-area button {
-    background: #212529;
-    color: #fff;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    background: var(--surface-color);
     cursor: pointer;
-    font-weight: 600;
-    transition: all 0.3s ease;
+    transition: all 0.2s ease;
 }
 
-.chat-input-area button:hover {
-    background: #000;
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+.dark-mode-toggle:hover {
+    border-color: var(--accent-color);
+    color: var(--accent-color);
 }
 
-/* Background Animations */
-.bg-animations {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    overflow: hidden;
-    pointer-events: none;
-}
-
-.blob {
-    position: absolute;
-    width: 500px;
-    height: 500px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    filter: blur(80px);
-    animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
-}
-
-.blob-1 { 
-    top: -10%; 
-    left: -10%; 
-    background: rgba(238, 119, 82, 0.4); 
-}
-
-.blob-2 { 
-    bottom: -10%; 
-    right: -10%; 
-    background: rgba(35, 166, 213, 0.4); 
-    animation-delay: -7s; 
-    width: 600px;
-    height: 600px;
-}
-
-.blob-3 { 
-    top: 40%; 
-    left: 30%; 
-    background: rgba(231, 60, 126, 0.3); 
-    animation-delay: -14s; 
-    width: 450px;
-    height: 450px;
-}
-
-@keyframes move {
-    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
-    33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
-    66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
-    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
-}
-
-.admin-link {
-    font-size: 14px;
-    color: #fff;
-    text-decoration: none;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-}
-
-.admin-link:hover {
-    background: rgba(0, 0, 0, 0.4);
-    text-decoration: none;
-}
-
-/* Admin Styles */
-.admin-container {
-    max-width: 900px;
-    margin: 3rem auto;
-    padding: 2.5rem;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-radius: 24px;
-    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    position: relative;
-    z-index: 1;
-}
-
-.admin-container h1 {
-    margin-top: 0;
-    color: #212529;
+/* Landing Clock */
+.hero-clock {
+    font-size: clamp(4rem, 15vw, 10rem);
     font-weight: 800;
+    letter-spacing: -0.05em;
+    line-height: 1;
+    color: var(--text-primary);
 }
 
-.table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0 8px;
-    margin-top: 1.5rem;
+/* Cards & Containers */
+.card-precise {
+    background: var(--surface-color);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    color: var(--text-primary);
 }
 
-.table th {
-    background: transparent;
-    border: none;
-    padding: 1rem;
-    color: #6c757d;
-    font-weight: 600;
+.card-precise:hover {
+    border-color: var(--accent-color);
+    background: var(--bg-color);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
+}
+
+.btn-precise {
+    border-radius: 4px;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    transition: all 0.1s ease;
     text-transform: uppercase;
     font-size: 0.75rem;
-    letter-spacing: 1px;
+    letter-spacing: 0.05em;
 }
 
-.table td {
-    background: #fff;
-    padding: 1rem;
-    border: none;
+/* Timer Display */
+.timer-display {
+    font-size: clamp(3rem, 10vw, 6rem);
+    font-weight: 700;
+    color: var(--text-primary);
 }
 
-.table tr td:first-child { border-radius: 12px 0 0 12px; }
-.table tr td:last-child { border-radius: 0 12px 12px 0; }
-
-.form-group {
-    margin-bottom: 1.25rem;
+.timer-sub-display {
+    font-size: 1.5rem;
+    color: var(--text-secondary);
 }
 
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
+/* Table */
+.table {
+    color: var(--text-primary);
+}
+
+.table-precise {
+    font-size: 0.875rem;
+}
+
+.table-precise th {
     font-weight: 600;
-    font-size: 0.9rem;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    font-size: 0.7rem;
+    letter-spacing: 0.05em;
+    border-bottom: 2px solid var(--border-color);
 }
 
-.form-control {
+.table-precise td {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.badge-best {
+    background-color: var(--success-color);
+    color: white;
+    font-size: 0.65rem;
+    padding: 2px 6px;
+    border-radius: 2px;
+}
+
+/* SPA Transitions */
+.view-section {
+    display: none;
+}
+
+.view-section.active {
+    display: block;
+}
+
+/* Forms */
+.form-control, .form-select {
+    background-color: var(--surface-color);
+    color: var(--text-primary);
+    border-color: var(--border-color);
+}
+
+.form-control:focus, .form-select:focus {
+    background-color: var(--bg-color);
+    color: var(--text-primary);
+    border-color: var(--accent-color);
+    box-shadow: none;
+}
+
+.form-control-precise {
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    font-size: 0.875rem;
+    padding: 0.4rem 0.75rem;
+}
+
+.form-control-compact {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+}
+
+.btn-compact {
+    padding: 0.2rem 0.4rem;
+    font-size: 0.65rem;
+}
+
+#session-title {
+    background-color: transparent;
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+    padding-left: 0;
+}
+
+#session-title:focus {
+    background-color: transparent;
+    border-color: var(--accent-color);
+}
+
+/* Activity Builder */
+#custom-builder {
+    background: transparent;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+}
+
+.activity-row {
+    background: var(--bg-color) !important;
+    border-color: var(--border-color) !important;
+    transition: transform 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+    cursor: grab;
+}
+
+.activity-row:active {
+    cursor: grabbing;
+}
+
+.activity-row.dragging {
+    opacity: 0.5;
+    background: var(--border-color) !important;
+    transform: scale(0.98);
+}
+
+.activity-row:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+}
+
+.activity-row.rest-activity {
+    border-left: 4px solid var(--accent-color) !important;
+    font-size: 0.8rem;
+    opacity: 0.9;
+    padding: 0.5rem 1rem !important;
+}
+
+/* Options Dropdown */
+.dropdown-menu {
+    background-color: var(--surface-color);
+    color: var(--text-primary);
+    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
+    border: 1px solid var(--border-color);
+    z-index: 1050;
+}
+
+.dropdown-header {
+    color: var(--text-primary);
+    font-weight: 700;
+    letter-spacing: 0.1em;
+}
+
+/* Utility */
+.tracking-widest { letter-spacing: 0.1em; }
+.tracking-wider { letter-spacing: 0.05em; }
+.fs-small { font-size: 0.75rem; }
+.fs-tiny { font-size: 0.65rem; }
+.cursor-pointer { cursor: pointer; }
+
+#active-activity-name {
+    letter-spacing: 0.02em;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+/* Alerts / Finishes */
+.timer-finish {
+    color: var(--danger-color) !important;
+    animation: flash 1s infinite;
+}
+
+@keyframes flash {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+}
+
+@keyframes blink-red {
+    0% { color: inherit; }
+    50% { color: var(--danger-color); }
+    100% { color: inherit; }
+}
+
+@keyframes blink-theme {
+    0% { color: inherit; }
+    50% { color: var(--accent-color); }
+    100% { color: inherit; }
+}
+
+.timer-alert {
+    animation: blink-red 0.5s infinite;
+}
+
+.timer-finish-theme {
+    animation: blink-theme 0.5s infinite;
+}
+
+/* Settings Switches */
+.form-check-input:checked {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+}
+
+/* Layout Adjustments */
+.timer-workspace-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3rem;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.timer-main-column {
+    flex: 0 1 600px;
+    min-width: 320px;
+    order: 2; /* Main on right on desktop */
+}
+
+.timer-side-column {
+    width: 450px;
+    order: 1; /* History on left on desktop */
+}
+
+@media (max-width: 1200px) {
+    .timer-side-column {
         width: 100%;
-    padding: 0.75rem 1rem;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    background: #fff;
-    transition: all 0.3s ease;
-    box-sizing: border-box;
+        max-width: 800px;
+        margin: 0 auto;
+        order: 2; /* Move history back to bottom on mobile */
+    }
+    .timer-main-column {
+        flex: 1;
+        max-width: 800px;
+        order: 1; /* Main timer on top on mobile */
+    }
 }
 
-.form-control:focus {
-    outline: none;
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
+footer {
+    border-color: var(--border-color) !important;
+}
+
+/* Dark Mode Overrides for Status Badges and Table Rows */
+body.dark-mode .bg-success {
+    background-color: rgba(16, 185, 129, 0.2) !important;
+    color: #10b981 !important;
+    border: 1px solid rgba(16, 185, 129, 0.4);
+}
+body.dark-mode .bg-primary {
+    background-color: rgba(59, 130, 246, 0.2) !important;
+    color: #60a5fa !important;
+    border: 1px solid rgba(59, 130, 246, 0.4);
+}
+body.dark-mode .bg-danger {
+    background-color: rgba(239, 68, 68, 0.2) !important;
+    color: #f87171 !important;
+    border: 1px solid rgba(239, 68, 68, 0.4);
+}
+body.dark-mode .table-success {
+    background-color: rgba(16, 185, 129, 0.1) !important;
+    color: var(--text-primary) !important;
+}
+
+/* Ensure history list items inherit dark mode color */
+body.dark-mode .table-precise td {
+    color: var(--text-primary);
+}
+body.dark-mode .font-tabular {
+    color: var(--text-primary);
+}
+body.dark-mode .text-muted {
+    color: var(--text-secondary) !important;
+}
+
+/* Saved Timers Hover Effect */
+#saved-timers-list .card-precise:hover {
+    border-color: var(--success-color);
+}
+
+/* Color input styling */
+.participant-color-input {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    cursor: pointer;
 }

db/migrations/20260303_create_saved_timers.sql

@@ -0,0 +1,6 @@
+CREATE TABLE IF NOT EXISTS saved_timers (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    name VARCHAR(255) NOT NULL,
+    config TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

index.php

@@ -1,150 +1,348 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+// PHP Header for Dynamic Meta Tags
+$projectName = $_SERVER['PROJECT_NAME'] ?? 'Interactive Timer';
+$projectDesc = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Modern, professional timing website for all your needs.';
+$projectImage = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
 ?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?php echo htmlspecialchars($projectName); ?></title>
+    <meta name="description" content="<?php echo htmlspecialchars($projectDesc); ?>">
+    
+    <!-- Open Graph / Twitter -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="<?php echo htmlspecialchars($projectName); ?>">
+    <meta property="og:description" content="<?php echo htmlspecialchars($projectDesc); ?>">
+    <?php if ($projectImage): ?>
+    <meta property="og:image" content="<?php echo htmlspecialchars($projectImage); ?>">
+    <meta name="twitter:image" content="<?php echo htmlspecialchars($projectImage); ?>">
+    <?php endif; ?>
+    <meta name="twitter:card" content="summary_large_image">
+
+    <!-- CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet">
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
+
+    <!-- Navigation -->
+    <nav class="navbar navbar-light border-bottom py-3">
+        <div class="container d-flex justify-content-between align-items-center">
+            <a class="navbar-brand fw-bold text-uppercase fs-6 tracking-wider" href="#" id="brand-link">
+                <span class="text-primary">•</span> <?php echo htmlspecialchars($projectName); ?>
+            </a>
+            <div id="nav-actions" class="d-flex align-items-center gap-3">
+                <!-- Dark Mode Toggle -->
+                <button class="dark-mode-toggle" id="dark-mode-toggle" title="Toggle Dark Mode">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" id="moon-icon">
+                        <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
+                    </svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" id="sun-icon" class="d-none">
+                        <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+                    </svg>
+                </button>
             </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
         </div>
+    </nav>
+
+    <main class="container py-5">
+
+        <!-- VIEW: LANDING -->
+        <section id="view-landing" class="view-section active text-center">
+            <div class="mb-5">
+                <p class="text-muted text-uppercase tracking-widest fs-small mb-2">Current Local Time</p>
+                <h1 class="hero-clock font-tabular mb-4" id="landing-clock">00:00:00</h1>
+                <p class="lead text-secondary mx-auto" style="max-width: 600px;">
+                    Select a timer mode below to begin. Modern, precise timing for any activity.
+                </p>
+            </div>
+
+            <div class="row g-4 justify-content-center">
+                <div class="col-md-4 col-lg-3">
+                    <div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('time-watch')">
+                        <h3 class="fs-5 mb-2 fw-bold">Time-watch</h3>
+                        <p class="text-muted small">The basic timer model. Start, pause, or stop at any moment.</p>
+                        <button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
+                    </div>
+                </div>
+                <div class="col-md-4 col-lg-3">
+                    <div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('countdown')">
+                        <h3 class="fs-5 mb-2 fw-bold">Countdown</h3>
+                        <p class="text-muted small">Enter a duration and watch it count down to zero.</p>
+                        <button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
+                    </div>
+                </div>
+                <div class="col-md-4 col-lg-3">
+                    <div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('stopwatch')">
+                        <h3 class="fs-5 mb-2 fw-bold">Stopwatch</h3>
+                        <p class="text-muted small">Precision timing without pause functionality.</p>
+                        <button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
+                    </div>
+                </div>
+                <div class="col-md-4 col-lg-3">
+                    <div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('lap')">
+                        <h3 class="fs-5 mb-2 fw-bold">Lap Timer</h3>
+                        <p class="text-muted small">Log splits and find your best lap performance.</p>
+                        <button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
+                    </div>
+                </div>
+                <div class="col-md-4 col-lg-3">
+                    <div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('relay')">
+                        <h3 class="fs-5 mb-2 fw-bold">Relay Timer</h3>
+                        <p class="text-muted small">Participant split tracking for multi-stage timing.</p>
+                        <button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
+                    </div>
+                </div>
+                <div class="col-md-4 col-lg-3">
+                    <div class="card card-precise p-4 h-100 cursor-pointer" onclick="app.setMode('custom')">
+                        <h3 class="fs-5 mb-2 fw-bold">Custom Timer</h3>
+                        <p class="text-muted small">Create multiple chained activities.</p>
+                        <button class="btn btn-outline-primary btn-precise mt-auto">Select</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- VIEW: TIMER WORKSPACE -->
+        <section id="view-timer" class="view-section">
+
+            <!-- Workspace Header - SPANS BOTH COLUMNS -->
+            <div class="d-flex justify-content-between align-items-center mb-4 mx-auto" style="max-width: 1080px;">
+                <div class="text-start">
+                    <h2 id="timer-title" class="text-uppercase tracking-widest fs-5 fw-bold text-muted mb-0">Timer</h2>
+                </div>
+                <div class="text-end d-flex flex-column align-items-end gap-2">
+                    <!-- Options Dropdown -->
+                    <div class="dropdown">
+                        <button class="btn btn-outline-secondary btn-sm btn-precise dropdown-toggle" type="button" id="optionsDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
+                            Options
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-end p-4 card-precise" aria-labelledby="optionsDropdown" style="width: 320px;">
+                            <h6 class="dropdown-header px-0 text-uppercase tracking-widest mb-3 border-bottom pb-2">Global Settings</h6>
+                            
+                            <div class="mb-4">
+                                <label class="small text-muted mb-1 d-block text-uppercase tracking-wider fs-tiny">Display Format</label>
+                                <select id="format-select" class="form-select form-control-precise w-100">
+                                    <option value="hh:mm:ss.ms">HH:MM:SS.ms</option>
+                                    <option value="hh:mm:ss">HH:MM:SS</option>
+                                    <option value="hours">Hours Only</option>
+                                    <option value="minutes">Minutes Only</option>
+                                    <option value="seconds">Seconds Only</option>
+                                    <option value="seconds.ms">Seconds.ms Only</option>
+                                </select>
+                            </div>
+
+                            <div id="opt-countdown-container" class="mb-4 d-none">
+                                <div class="form-check form-switch">
+                                    <input class="form-check-input" type="checkbox" id="setting-is-countdown">
+                                    <label class="form-check-label fw-bold small" for="setting-is-countdown">Countdown Mode</label>
+                                </div>
+                                <p class="text-muted fs-tiny mt-1 mb-0">Toggle between counting up or down.</p>
+                            </div>
+
+                            <!-- Custom Mode Specific Options -->
+                            <div id="custom-options" class="mb-4 d-none">
+                                <label class="d-block small text-muted text-uppercase tracking-wider mb-2 border-bottom pb-1">Rest Settings</label>
+                                <div class="mb-2">
+                                    <label class="small fw-bold d-block mb-1 fs-tiny">Default Rest Duration (sec)</label>
+                                    <input type="number" id="setting-rest-duration" class="form-control form-control-precise form-control-sm" value="5" min="1">
+                                </div>
+                            </div>
+
+                            <div class="alert-settings-box">
+                                <label class="d-block small text-muted text-uppercase tracking-wider mb-2 border-bottom pb-1">Sound Alerts</label>
+                                
+                                <div id="pre-start-section" class="mb-3">
+                                    <div class="form-check form-switch mb-1">
+                                        <input class="form-check-input" type="checkbox" id="alert-pre-start">
+                                        <label class="form-check-label fw-bold small" for="alert-pre-start">Pre-start</label>
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2 ps-4">
+                                        <input type="number" id="alert-pre-start-seconds" class="form-control form-control-precise form-control-sm" value="3" min="0" style="width: 60px;">
+                                        <span class="fs-tiny text-muted">seconds</span>
+                                    </div>
+                                </div>
+
+                                <div id="pre-finish-section" class="mb-3">
+                                    <div class="form-check form-switch mb-1">
+                                        <input class="form-check-input" type="checkbox" id="alert-pre-end" checked>
+                                        <label class="form-check-label fw-bold small" for="alert-pre-end">Pre-finish</label>
+                                    </div>
+                                    <div class="d-flex align-items-center gap-2 ps-4">
+                                        <input type="number" id="alert-pre-end-seconds" class="form-control form-control-precise form-control-sm" value="3" min="0" style="width: 60px;">
+                                        <span class="fs-tiny text-muted">seconds</span>
+                                    </div>
+                                </div>
+
+                                <div id="rest-alert-container" class="mb-3 d-none">
+                                    <div class="form-check form-switch mb-1">
+                                        <input class="form-check-input" type="checkbox" id="alert-rest-pre-end" checked>
+                                        <label class="form-check-label fw-bold small" for="alert-rest-pre-end">Rest Pre-finish</label>
+                                    </div>
+                                </div>
+
+                                <div id="completion-section" class="form-check form-switch">
+                                    <input class="form-check-input" type="checkbox" id="alert-completion" checked>
+                                    <label class="form-check-label fw-bold small" for="alert-completion">Completion Sound</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="timer-workspace-container">
+                
+                <!-- Side Column (History / Builder / Relay Config) - LEFT -->
+                <div id="timer-side-column" class="timer-side-column d-none">
+                    <div class="card card-precise p-4 h-100">
+                        
+                        <!-- History Section -->
+                        <div id="history-section">
+                            <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-3">
+                                <h4 id="list-title" class="fs-6 fw-bold text-uppercase tracking-widest m-0">Activities Completed</h4>
+                                <select id="lap-sort" class="form-select form-select-sm d-none" style="width: 140px;">
+                                    <option value="recorded">Recorded</option>
+                                    <option value="best">Best to Worst</option>
+                                    <option value="worse">Worse to Best</option>
+                                </select>
+                            </div>
+                            <div class="table-responsive" id="history-table-container">
+                                <table class="table table-precise align-middle">
+                                    <thead id="list-head">
+                                        <tr>
+                                            <th>Activity</th>
+                                            <th>Duration</th>
+                                            <th class="text-end">Status</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="list-body">
+                                        <!-- Data injected here -->
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <!-- Custom Timer Builder Section -->
+                        <div id="custom-builder" class="d-none text-start">
+                            <div class="d-flex justify-content-between align-items-center mb-3">
+                                <div class="d-flex align-items-center gap-2">
+                                    <h4 class="fs-6 fw-bold text-uppercase tracking-widest m-0">Activities</h4>
+                                    <span id="custom-total-duration" class="fs-tiny text-primary fw-bold"></span>
+                                </div>
+                                <div class="d-flex gap-1">
+                                    <button id="btn-save-session-builder" class="btn btn-outline-success btn-sm btn-precise">Save</button>
+                                    <button id="btn-reset-builder" class="btn btn-outline-dark btn-sm btn-precise">Reset</button>
+                                </div>
+                            </div>
+                            
+                            <div id="activity-list" class="d-flex flex-column gap-2 mb-3">
+                                <!-- Activity inputs will be injected here -->
+                            </div>
+                        </div>
+
+                        <!-- Relay Configuration Section -->
+                        <div id="relay-config" class="d-none text-start">
+                            <h4 class="fs-6 fw-bold text-uppercase tracking-widest mb-3 border-bottom pb-2">Participants</h4>
+                            <div id="relay-participant-count-box" class="mb-3">
+                                <label class="small text-muted mb-1 d-block">Participant Count (Max 12)</label>
+                                <input type="number" id="participant-count" class="form-control form-control-precise" value="4" min="1" max="12" style="width: 80px;">
+                            </div>
+                            <div id="participant-names-container" class="d-flex flex-column gap-2">
+                                <!-- Name inputs injected here -->
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                <!-- Main Timer Column -->
+                <div class="timer-main-column text-center">
+                    
+                    <!-- Session Title & Active Activity - CENTERED -->
+                    <div class="mb-5 text-center mx-auto" style="max-width: 500px;">
+                        <label class="small text-muted mb-1 d-block text-uppercase tracking-wider">Session Name / Title</label>
+                        <input type="text" id="session-title" class="form-control form-control-precise fs-4 fw-bold mb-2 text-center" placeholder="Enter title to begin...">
+                        
+                        <div id="countdown-inputs" class="d-none text-center mt-3">
+                            <label class="small text-muted mb-1 d-block">Duration</label>
+                            <div class="d-flex justify-content-center gap-1 align-items-center">
+                                <input type="number" id="input-h" class="form-control form-control-precise" placeholder="H" style="width: 70px;">
+                                <span>:</span>
+                                <input type="number" id="input-m" class="form-control form-control-precise" placeholder="M" style="width: 70px;">
+                                <span>:</span>
+                                <input type="number" id="input-s" class="form-control form-control-precise" placeholder="S" style="width: 70px;">
+                            </div>
+                        </div>
+
+                        <div id="active-activity-name" class="text-primary d-none text-center mt-2">Activity Name</div>
+                        
+                        <!-- Relay Active Participant Container -->
+                        <div id="relay-active-participant-container" class="d-none mt-3 p-3 border rounded bg-light">
+                            <div class="d-flex align-items-center justify-content-center gap-3">
+                                <span id="relay-active-name" class="fw-bold fs-5">Participant Name</span>
+                                <button id="btn-relay-split" class="btn btn-primary btn-sm btn-precise">Split</button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="timer-display font-tabular mb-2" id="main-timer">00:00:00</div>
+                    <div class="timer-relay-participant font-tabular mb-4 d-none" id="relay-participant-timer" style="font-size: 2.5rem; opacity: 0.8;">00:00:00.00</div>
+                    <div class="timer-sub-display font-tabular mb-4 d-none" id="sub-timer">00:00:00</div>
+
+                    <!-- Controls -->
+                    <!-- Toggle Display Mode -->
+                    <div id="display-mode-container" class="form-check form-switch d-flex justify-content-center mb-3 d-none">
+                        <input class="form-check-input me-2" type="checkbox" id="toggle-display-mode">
+                        <label class="form-check-label small text-muted text-uppercase tracking-wider" for="toggle-display-mode">Activity Progress</label>
+                    </div>
+                    <div class="d-flex justify-content-center flex-wrap gap-2 mb-5">
+                        <button id="btn-start" class="btn btn-primary btn-precise px-4">Start</button>
+                        <button id="btn-reset" class="btn btn-outline-dark btn-precise px-4">Reset</button>
+                        <button id="btn-pause" class="btn btn-outline-secondary btn-precise px-4">Pause</button>
+                        <button id="btn-stop" class="btn btn-danger btn-precise px-4">Stop</button>
+                        <button id="btn-save-main" class="btn btn-outline-success btn-precise px-4 d-none">Save</button>
+                        <button id="btn-lap" class="btn btn-outline-primary btn-precise px-4 d-none">Lap</button>
+                        <button id="btn-next" class="btn btn-outline-primary btn-precise px-4 d-none">Next</button>
+                    </div>
+
+                    <!-- Lap Results Container (placed under timer when stopped) -->
+                    <div id="lap-results-container" class="d-none mt-5 text-start mx-auto" style="max-width: 600px;">
+                    </div>
+
+                    <!-- Saved Sessions Section (Dropdown) -->
+                    <div id="saved-timers-container" class="mt-4 pt-4 border-top d-none mx-auto" style="max-width: 500px;">
+                        <h4 class="fs-6 fw-bold text-uppercase tracking-widest mb-3">Saved Sessions</h4>
+                        <div class="d-flex gap-2">
+                            <select id="saved-timers-dropdown" class="form-select form-control-precise">
+                                <option value="">Select a saved session...</option>
+                            </select>
+                            <button id="btn-delete-saved" class="btn btn-outline-danger btn-precise">Delete</button>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+        </section>
+
     </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+
+    <!-- Footer -->
+    <footer class="border-top py-4 mt-5">
+        <div class="container text-center">
+            <p class="small text-muted mb-0">&copy; <?php echo date('Y'); ?> <?php echo htmlspecialchars($projectName); ?>. Precise & Professional Timing.</p>
+        </div>
     </footer>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
 </html>