mostly working, checkpoint

compose.yaml

@@ -1,27 +1,7 @@
 services:
   fantasycron:
-    image: fantasycron:latest  # Use pre-built image
+    image: fantasycron:latest 
     ports:
       - "5000:5000"
-    environment:
-      - SECRET_KEY=your-secret-key-here
-      - DATABASE_URL=sqlite:///fantasy_app.db
-    volumes:
-      - ./data:/app/data
     restart: unless-stopped
 
-  # Optional PostgreSQL service
-  # Uncomment to use PostgreSQL instead of SQLite
-  # postgres:
-  #   image: postgres:13
-  #   environment:
-  #     POSTGRES_DB: fantasy_app
-  #     POSTGRES_USER: fantasy_user
-  #     POSTGRES_PASSWORD: fantasy_pass
-  #   volumes:
-  #     - postgres_data:/var/lib/postgresql/data
-  #   ports:
-  #     - "5432:5432"
-
-# volumes:
-#   postgres_data:

config.py

@@ -6,9 +6,6 @@ class Config:
     
     SECRET_KEY = os.environ.get('SECRET_KEY') or 'dev-secret-key'
     
-    # Database settings - support SQLite, PostgreSQL, MariaDB
-    DATABASE_URL = os.environ.get('DATABASE_URL') or 'sqlite:///fantasy_app.db'
-    
     # API settings
     SLEEPER_BASE_URL = 'https://api.sleeper.app/v1'
     ESPN_BASE_URL = 'https://site.api.espn.com/apis/site/v2/sports/football/nfl'

static/style.css

@@ -1,24 +1,75 @@
-/* Reset and base styles */
+.sidebar-link {
-* {
+    display: block;
-    margin: 0;
+    padding: 12px 16px;
-    padding: 0;
+    background: var(--bg-secondary);
-    box-sizing: border-box;
+    border-radius: 8px;
+    color: var(--text-primary);
+    text-decoration: none;
+    margin-bottom: 10px;
+    transition: all 0.2s ease;
 }
 
-body {
+.sidebar-link:hover {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg-tertiary);
-    line-height: 1.6;
+    transform: translateX(5px);
-    color: #333;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 100vh;
 }
 
-.container {
+.about-text {
-    max-width: 1200px;
+    background: var(--bg-secondary);
-    margin: 0 auto;
+    border-radius: 8px;
     padding: 20px;
 }
 
+.about-text p {
+    color: var(--text-primary);
+    line-height: 1.6;
+    margin-bottom: 12px;
+}
+
+.about-text strong {
+    color: var(--accent);
+}
+
+.about-text ul {
+    margin-left: 20px;
+    margin-bottom: 12px;
+}
+
+.about-text li {
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+    line-height: 1.5;
+}
+
+.about-text .cron-note {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 12px;
+    color: var(--accent);
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid var(--border-light);
+    font-style: italic;
+}
+
+/* Sidebar Overlay */
+.sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.sidebar-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
 /* Brand styling */
 .brand {
     margin-bottom: 20px;
@@ -26,7 +77,7 @@ body {
 
 .app-name {
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    color: #2c3e50;
+    color: var(--text-primary);
     margin-bottom: 8px;
     font-size: 2.2rem;
     font-weight: 600;
@@ -35,7 +86,7 @@ body {
 
 .tagline {
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    color: #667eea;
+    color: var(--accent);
     font-size: 0.9rem;
     font-weight: 500;
     opacity: 0.8;
@@ -44,10 +95,10 @@ body {
 /* Welcome page styles */
 .welcome-container {
     text-align: center;
-    background: white;
+    background: var(--bg-primary);
     padding: 40px;
     border-radius: 12px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-lg);
     margin-top: 100px;
     max-width: 400px;
     margin-left: auto;
@@ -59,22 +110,25 @@ body {
     flex-direction: column;
     gap: 15px;
     margin: 30px 0;
+}
 
-    & input {
+.username-form input {
     padding: 15px;
-        border: 2px solid #e1e8ed;
+    border: 2px solid var(--border-primary);
     border-radius: 8px;
     font-size: 16px;
     transition: border-color 0.3s;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
 
-        &:focus {
+.username-form input:focus {
     outline: none;
-            border-color: #667eea;
+    border-color: var(--accent);
-        }
 }
 
-    & button {
+.username-form button {
-        background: linear-gradient(45deg, #667eea, #764ba2);
+    background: linear-gradient(45deg, var(--header-gradient-start), var(--header-gradient-end));
     color: white;
     padding: 15px 20px;
     border: none;
@@ -85,15 +139,14 @@ body {
     text-decoration: none;
     display: inline-block;
     text-align: center;
+}
 
-        &:hover {
+.username-form button:hover {
     transform: translateY(-2px);
 }
-    }
-}
 
 .btn {
-    background: linear-gradient(45deg, #667eea, #764ba2);
+    background: linear-gradient(45deg, var(--header-gradient-start), var(--header-gradient-end));
     color: white;
     padding: 15px 20px;
     border: none;
@@ -104,41 +157,41 @@ body {
     text-decoration: none;
     display: inline-block;
     text-align: center;
-    
-    &:hover {
-        transform: translateY(-2px);
 }
+
+.btn:hover {
+    transform: translateY(-2px);
 }
 
 .example {
-    color: #666;
+    color: var(--text-muted);
     font-size: 14px;
+}
 
-    & code {
+.example code {
-        background: #f8f9fa;
+    background: var(--bg-secondary);
     padding: 2px 6px;
     border-radius: 4px;
     font-family: monospace;
 }
-}
 
 /* Dashboard header */
 .dashboard-header {
-    background: white;
+    background: var(--bg-primary);
     padding: 20px;
     border-radius: 12px;
     margin-bottom: 20px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 15px;
-    
-    & h1 {
-        color: #2c3e50;
-        font-size: 1.8rem;
 }
+
+.dashboard-header h1 {
+    color: var(--text-primary);
+    font-size: 1.8rem;
 }
 
 .week-nav {
@@ -148,31 +201,31 @@ body {
 }
 
 .week-btn {
-    background: #f8f9fa;
+    background: var(--bg-secondary);
-    color: #495057;
+    color: var(--text-secondary);
     padding: 8px 16px;
     border-radius: 6px;
     text-decoration: none;
     transition: background 0.2s;
-    
-    &:hover {
-        background: #e9ecef;
 }
+
+.week-btn:hover {
+    background: var(--bg-tertiary);
 }
 
 .current-week {
     font-weight: bold;
-    color: #667eea;
+    color: var(--accent);
     font-size: 1.1rem;
 }
 
 /* League scores - compact at top */
 .scores-summary {
-    background: white;
+    background: var(--bg-primary);
     border-radius: 12px;
     padding: 15px;
     margin-bottom: 30px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
 }
 
 .score-row {
@@ -180,11 +233,11 @@ body {
     justify-content: space-between;
     align-items: center;
     padding: 8px 0;
-    border-bottom: 1px solid #f1f3f4;
+    border-bottom: 1px solid var(--border-light);
-    
-    &:last-child {
-        border-bottom: none;
 }
+
+.score-row:last-child {
+    border-bottom: none;
 }
 
 .league-info {
@@ -192,16 +245,16 @@ body {
     align-items: center;
     gap: 8px;
     min-width: 140px;
+}
 
-    & .league-dot {
+.league-info .league-dot {
     width: 10px;
     height: 10px;
 }
-}
 
 .league-name {
     font-weight: 600;
-    color: #2c3e50;
+    color: var(--text-primary);
     font-size: 14px;
 }
 
@@ -223,7 +276,7 @@ body {
 
 .user-name, .opp-name {
     font-weight: 500;
-    color: #495057;
+    color: var(--text-secondary);
     min-width: 80px;
 }
 
@@ -233,13 +286,13 @@ body {
 
 .score {
     font-weight: bold;
-    color: #667eea;
+    color: var(--accent);
     min-width: 30px;
     text-align: center;
 }
 
 .vs-compact {
-    color: #666;
+    color: var(--text-muted);
     font-size: 11px;
     font-weight: 500;
 }
@@ -247,14 +300,14 @@ body {
 /* Schedule section - main focus */
 .schedule-section {
     flex: 1;
+}
 
-    & h2 {
+.schedule-section h2 {
-        color: white;
+    color: var(--text-light);
     margin-bottom: 25px;
     font-size: 1.8rem;
     text-align: center;
 }
-}
 
 .calendar-rows {
     max-width: 1200px;
@@ -263,24 +316,24 @@ body {
 
 /* Day row styling */
 .day-row {
-    background: white;
+    background: var(--bg-primary);
     border-radius: 16px;
     margin-bottom: 20px;
-    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
     overflow: hidden;
 }
 
 .day-header {
-    background: linear-gradient(45deg, #667eea, #764ba2);
+    background: linear-gradient(45deg, var(--header-gradient-start), var(--header-gradient-end));
     color: white;
     padding: 15px 20px;
+}
 
-    & h3 {
+.day-header h3 {
     margin: 0;
     font-size: 1.2rem;
     font-weight: 600;
 }
-}
 
 .day-games {
     padding: 20px;
@@ -291,16 +344,16 @@ body {
 
 /* Game card styling */
 .game-card {
-    background: #f8f9fa;
+    background: var(--bg-secondary);
     border-radius: 12px;
     padding: 15px;
-    border: 1px solid #e9ecef;
+    border: 1px solid var(--border-secondary);
     transition: all 0.2s ease;
-    
-    &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
+
+.game-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
 }
 
 .game-info {
@@ -309,7 +362,7 @@ body {
 
 .game-time {
     font-size: 12px;
-    color: #667eea;
+    color: var(--accent);
     margin-bottom: 8px;
     font-weight: 600;
     text-align: center;
@@ -325,11 +378,11 @@ body {
 }
 
 .away-team, .home-team {
-    color: #2c3e50;
+    color: var(--text-primary);
 }
 
 .at {
-    color: #666;
+    color: var(--text-muted);
     font-size: 12px;
 }
 
@@ -346,15 +399,15 @@ body {
     flex-wrap: wrap;
     gap: 4px;
     padding: 6px;
-    background: rgba(255, 255, 255, 0.6);
+    background: var(--overlay-medium);
     border-radius: 8px;
     min-height: 28px;
+}
 
-    & .player-pill {
+.league-player-group .player-pill {
     padding: 3px 6px;
     font-size: 10px;
 }
-}
 
 /* Player pills */
 .player-pill {
@@ -364,63 +417,63 @@ body {
     padding: 4px 8px;
     border-radius: 16px;
     font-size: 11px;
-    border: 2px solid #dee2e6;
+    border: 2px solid var(--border-secondary);
-    background: white;
+    background: var(--bg-primary);
     font-weight: 500;
     transition: all 0.2s ease;
+}
 
-    &:hover {
+.player-pill:hover {
     transform: scale(1.05);
 }
 
-    & .pos {
+.player-pill .pos {
     font-weight: bold;
     font-size: 9px;
     opacity: 0.8;
 }
 
-    & .name {
+.player-pill .name {
     font-weight: normal;
-	color: black;
+    color: var(--player-name-color);
 }
 
-    & .league-dot {
+.player-pill .league-dot {
     display: none;
 }
 
 /* Position colors */
-    &.qb {
+.player-pill.qb {
     border-color: rgb(252, 43, 109);
     background: rgba(252, 43, 109, 0.1);
     color: rgb(252, 43, 109);
 }
 
-    &.rb {
+.player-pill.rb {
     border-color: rgb(0, 206, 184);
     background: rgba(0, 206, 184, 0.1);
     color: rgb(0, 206, 184);
 }
 
-    &.wr {
+.player-pill.wr {
     border-color: rgb(0, 186, 255);
     background: rgba(0, 186, 255, 0.1);
     color: rgb(0, 186, 255);
 }
 
-    &.te {
+.player-pill.te {
     border-color: rgb(255, 174, 88);
     background: rgba(255, 174, 88, 0.1);
     color: rgb(255, 174, 88);
 }
-}
 
 .no-games-week {
     text-align: center;
-    color: white;
+    color: var(--text-light);
     font-style: italic;
     font-size: 16px;
     padding: 60px 0;
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--overlay-light);
     border-radius: 12px;
     margin: 20px 0;
 }
@@ -435,33 +488,33 @@ body {
 .version {
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
     font-size: 11px;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--footer-text);
     opacity: 0.8;
 }
 
 /* Error page */
 .error-container {
     text-align: center;
-    background: white;
+    background: var(--bg-primary);
     padding: 40px;
     border-radius: 12px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-lg);
     margin-top: 100px;
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
+}
 
-    & h1 {
+.error-container h1 {
-        color: #e74c3c;
+    color: var(--error-color);
     margin-bottom: 20px;
 }
 
-    & p {
+.error-container p {
-        color: #666;
+    color: var(--text-muted);
     margin-bottom: 30px;
     line-height: 1.6;
 }
-}
 
 /* Mobile responsive styles */
 @media (max-width: 768px) {
@@ -469,6 +522,24 @@ body {
         padding: 15px;
     }
     
+    .menu-toggle {
+        width: 40px;
+        height: 40px;
+    }
+    
+    .menu-toggle .menu-icon {
+        font-size: 20px;
+    }
+    
+    .sidebar {
+        width: 85%;
+        right: -85%;
+    }
+    
+    .sidebar-content {
+        padding: 50px 20px 20px;
+    }
+    
     .dashboard-header {
         flex-direction: column;
         text-align: center;
@@ -502,17 +573,15 @@ body {
     
     .day-header {
         padding: 12px 15px;
+    }
     
-        & h3 {
+    .day-header h3 {
         font-size: 1.1rem;
     }
-    }
     
-    .schedule-section {
+    .schedule-section h2 {
-        & h2 {
         font-size: 1.5rem;
     }
-    }
     
     .welcome-container {
         margin-top: 50px;
@@ -527,16 +596,194 @@ body {
 @media (max-width: 480px) {
     .username-form {
         gap: 12px;
+    }
     
-        & input,
+    .username-form input,
-        & button {
+    .username-form button {
         padding: 12px;
         font-size: 14px;
     }
-    }
     
     .week-nav {
         flex-direction: column;
         gap: 10px;
     }
+}/* Theme Variables */
+:root {
+    /* Light theme (default) */
+    --bg-gradient-start: #667eea;
+    --bg-gradient-end: #764ba2;
+    --bg-primary: white;
+    --bg-secondary: #f8f9fa;
+    --bg-tertiary: #e9ecef;
+    --text-primary: #333;
+    --text-secondary: #495057;
+    --text-muted: #666;
+    --text-light: white;
+    --player-name-color: #000;
+    --border-primary: #e1e8ed;
+    --border-secondary: #dee2e6;
+    --border-light: #f1f3f4;
+    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
+    --accent: #667eea;
+    --header-gradient-start: #667eea;
+    --header-gradient-end: #764ba2;
+    --overlay-light: rgba(255, 255, 255, 0.1);
+    --overlay-medium: rgba(255, 255, 255, 0.6);
+    --footer-text: rgba(255, 255, 255, 0.6);
+    --error-color: #e74c3c;
+    --sidebar-bg: white;
+    --sidebar-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
 }
+
+[data-theme="dark"] {
+    --bg-gradient-start: #1a1a2e;
+    --bg-gradient-end: #16213e;
+    --bg-primary: #1e1e2e;
+    --bg-secondary: #2a2a3e;
+    --bg-tertiary: #35354a;
+    --text-primary: #e0e0e0;
+    --text-secondary: #b0b0b0;
+    --text-muted: #888;
+    --text-light: #e0e0e0;
+    --player-name-color: #e0e0e0;
+    --border-primary: #3a3a4e;
+    --border-secondary: #4a4a5e;
+    --border-light: #2a2a3e;
+    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+    --accent: #8b7ff5;
+    --header-gradient-start: #8b7ff5;
+    --header-gradient-end: #a085e6;
+    --overlay-light: rgba(0, 0, 0, 0.2);
+    --overlay-medium: rgba(0, 0, 0, 0.3);
+    --footer-text: rgba(255, 255, 255, 0.4);
+    --error-color: #ff6b6b;
+    --sidebar-bg: #1e1e2e;
+    --sidebar-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+}
+
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    color: var(--text-primary);
+    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
+    min-height: 100vh;
+    transition: background 0.3s ease, color 0.3s ease;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Hamburger Menu Button */
+.menu-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    background: var(--bg-primary);
+    border: 2px solid var(--border-primary);
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.3s ease;
+}
+
+.menu-toggle:hover {
+    transform: scale(1.1);
+    box-shadow: var(--shadow-md);
+}
+
+.menu-toggle .menu-icon {
+    font-size: 24px;
+    color: var(--text-primary);
+}
+
+/* Sidebar */
+.sidebar {
+    position: fixed;
+    top: 0;
+    right: -400px;
+    width: 400px;
+    height: 100%;
+    background: var(--sidebar-bg);
+    box-shadow: var(--sidebar-shadow);
+    transition: right 0.3s ease;
+    z-index: 1001;
+    overflow-y: auto;
+}
+
+.sidebar.active {
+    right: 0;
+}
+
+.close-btn {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: transparent;
+    border: none;
+    font-size: 28px;
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 5px;
+}
+
+.close-btn:hover {
+    opacity: 0.7;
+}
+
+.sidebar-content {
+    padding: 60px 30px 30px;
+}
+
+.sidebar-section {
+    margin-bottom: 35px;
+}
+
+.sidebar-section h3 {
+    color: var(--accent);
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.theme-button {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: var(--bg-secondary);
+    border: 2px solid var(--border-primary);
+    border-radius: 8px;
+    padding: 12px 20px;
+    cursor: pointer;
+    width: 100%;
+    transition: all 0.2s ease;
+    color: var(--text-primary);
+    font-size: 15px;
+}
+
+.theme-button:hover {
+    background: var(--bg-tertiary);
+    transform: translateY(-2px);
+}
+
+

templates/base.html

@@ -7,6 +7,58 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
+    <!-- Hamburger Menu Button -->
+    <button class="menu-toggle" onclick="toggleSidebar()" aria-label="Toggle menu">
+        <span class="menu-icon">☰</span>
+    </button>
+    
+    <!-- Sidebar Menu -->
+    <div class="sidebar" id="sidebar">
+        <button class="close-btn" onclick="toggleSidebar()">✕</button>
+        
+        <div class="sidebar-content">
+            <!-- Theme Toggle Section -->
+            <div class="sidebar-section">
+                <h3>Theme</h3>
+                <button class="theme-button" onclick="toggleTheme()">
+                    <span id="theme-icon">☀️</span>
+                    <span id="theme-text">Light Mode</span>
+                </button>
+            </div>
+            
+            <!-- Links Section -->
+            <div class="sidebar-section">
+                <h3>Links</h3>
+                <a href="https://sleeper.app" target="_blank" class="sidebar-link">
+                    🏈 Sleeper App
+                </a>
+                <a href="https://github.com" target="_blank" class="sidebar-link">
+                    💻 GitHub
+                </a>
+            </div>
+            
+            <!-- About Section -->
+            <div class="sidebar-section">
+                <h3>About This App</h3>
+                <div class="about-text">
+                    <p>FantasyCron gives you an at-a-glance view of your fantasy football teams and when your players play.</p>
+                    <p><strong>How to use:</strong></p>
+                    <ul>
+                        <li>Enter your Sleeper username on the home page</li>
+                        <li>View all your leagues' matchup scores at the top</li>
+                        <li>See when each of your players plays, grouped by league (indicated by colored borders)</li>
+                        <li>Navigate between weeks using the arrows</li>
+                        <li>Scores auto-refresh during game times</li>
+                    </ul>
+                    <p class="cron-note">* * * * 0,1,4 - Updates every Sunday, Monday, and Thursday!</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Overlay for sidebar -->
+    <div class="sidebar-overlay" id="sidebar-overlay" onclick="toggleSidebar()"></div>
+    
     <div class="container">
         {% block content %}{% endblock %}
     </div>
@@ -17,18 +69,81 @@
     </footer>
     
     <script>
+        // Sidebar management
+        const toggleSidebar = () => {
+            const sidebar = document.getElementById('sidebar');
+            const overlay = document.getElementById('sidebar-overlay');
+            sidebar.classList.toggle('active');
+            overlay.classList.toggle('active');
+        };
+        
+        // Theme management
+        const getTheme = () => localStorage.getItem('theme') || 'light';
+        
+        const setTheme = (theme) => {
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem('theme', theme);
+            const icon = document.getElementById('theme-icon');
+            const text = document.getElementById('theme-text');
+            if (theme === 'dark') {
+                icon.textContent = '🌙';
+                text.textContent = 'Dark Mode';
+            } else {
+                icon.textContent = '☀️';
+                text.textContent = 'Light Mode';
+            }
+        };
+        
+        const toggleTheme = () => {
+            const currentTheme = getTheme();
+            setTheme(currentTheme === 'dark' ? 'light' : 'dark');
+        };
+        
+        // Initialize theme on load
+        setTheme(getTheme());
+        
+        // Timezone conversion
+        const convertGameTimes = () => {
+            const timeElements = document.querySelectorAll('.game-time[data-utc]');
+            const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            
+            timeElements.forEach(element => {
+                const utcDateStr = element.getAttribute('data-utc');
+                if (utcDateStr) {
+                    const utcDate = new Date(utcDateStr);
+                    
+                    // Format time in user's timezone (or PST as fallback)
+                    const options = {
+                        hour: 'numeric',
+                        minute: '2-digit',
+                        hour12: true,
+                        timeZone: userTimezone || 'America/Los_Angeles'
+                    };
+                    
+                    const localTime = utcDate.toLocaleString('en-US', options);
+                    element.textContent = localTime;
+                    
+                    // Add timezone abbreviation on hover
+                    const tzOptions = { timeZoneName: 'short', timeZone: userTimezone || 'America/Los_Angeles' };
+                    const tzAbbr = utcDate.toLocaleString('en-US', tzOptions).split(' ').pop();
+                    element.title = `${localTime} ${tzAbbr}`;
+                }
+            });
+        };
+        
+        // Convert times on page load
+        window.addEventListener('DOMContentLoaded', convertGameTimes);
+        
+        // Score refresh functionality
         function refreshScores() {
-            // Get current page info
             const username = document.querySelector('meta[name="username"]')?.content;
             const week = document.querySelector('meta[name="week"]')?.content;
             
             if (username && week) {
-                // Fetch updated scores from API
                 fetch(`/api/refresh/${username}/${week}`)
                     .then(response => response.json())
                     .then(data => {
                         if (data.league_scores) {
-                            // Update score displays
                             data.league_scores.forEach(league => {
                                 const userScore = document.getElementById(`user-score-${league.league_id}`);
                                 const oppScore = document.getElementById(`opp-score-${league.league_id}`);

templates/dashboard.html

@@ -45,14 +45,12 @@
 <section class="schedule-section">
     <h2>Week {{ week }} Games</h2>
     <div class="calendar-rows">
-        <!-- Check if schedule has games -->
+        <!-- Track if we have any games using namespace -->
-        {% set has_games = false %}
+        {% set ns = namespace(has_games=false) %}
-        {% for day, games in schedule.items() if games %}
-            {% set has_games = true %}
-        {% endfor %}
         
         <!-- Loop through days that have games -->
         {% for day, games in schedule.items() if games %}
+        {% set ns.has_games = true %}
         <div class="day-row">
             <div class="day-header">
                 <h3>{{ day }}</h3>
@@ -62,7 +60,7 @@
                 {% for game in games %}
                 <div class="game-card">
                     <div class="game-info">
-                        <div class="game-time">{{ game.time }}</div>
+                        <div class="game-time" data-utc="{{ game.date.isoformat() if game.date else '' }}">{{ game.time }}</div>
                         <div class="matchup">
                             <span class="away-team">{{ game.away_team }}</span>
                             <span class="at">@</span>
@@ -99,7 +97,7 @@
         {% endfor %}
         
         <!-- Show message if no games found -->
-        {% if not has_games %}
+        {% if not ns.has_games %}
         <div class="no-games-week">
             <p>No games found for week {{ week }}</p>
         </div>