initial commit

static/css/app.css

@@ -0,0 +1,237 @@
+/* Base styles */
+:root {
+    --primary-color: #2563eb;
+    --secondary-color: #475569;
+    --success-color: #22c55e;
+    --danger-color: #ef4444;
+    --warning-color: #f59e0b;
+    --background-color: #f8fafc;
+    --text-color: #1e293b;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: var(--background-color);
+}
+
+/* Layout */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+/* Navigation */
+.navbar {
+    background-color: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    padding: 1rem;
+}
+
+.navbar-brand {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+
+.navbar-menu {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.navbar-item {
+    color: var(--secondary-color);
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    transition: background-color 0.2s;
+}
+
+.navbar-item:hover {
+    background-color: #f1f5f9;
+}
+
+/* Cards */
+.card {
+    background-color: white;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+/* Forms */
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+.form-input {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.375rem;
+    font-size: 1rem;
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+/* Buttons */
+.button {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    transition: background-color 0.2s;
+}
+
+.button-primary {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.button-primary:hover {
+    background-color: #1d4ed8;
+}
+
+.button-secondary {
+    background-color: var(--secondary-color);
+    color: white;
+}
+
+.button-secondary:hover {
+    background-color: #374151;
+}
+
+/* Tables */
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1rem;
+}
+
+.table th,
+.table td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.table th {
+    background-color: #f8fafc;
+    font-weight: 600;
+}
+
+/* Status badges */
+.badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.badge-success {
+    background-color: #dcfce7;
+    color: #166534;
+}
+
+.badge-warning {
+    background-color: #fef3c7;
+    color: #92400e;
+}
+
+.badge-danger {
+    background-color: #fee2e2;
+    color: #991b1b;
+}
+
+/* Alerts */
+.alert {
+    padding: 1rem;
+    border-radius: 0.375rem;
+    margin-bottom: 1rem;
+}
+
+.alert-success {
+    background-color: #dcfce7;
+    color: #166534;
+}
+
+.alert-error {
+    background-color: #fee2e2;
+    color: #991b1b;
+}
+
+.alert-warning {
+    background-color: #fef3c7;
+    color: #92400e;
+}
+
+/* Grid */
+.grid {
+    display: grid;
+    gap: 1rem;
+}
+
+.grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+/* Footer */
+.footer {
+    background-color: white;
+    padding: 2rem 0;
+    margin-top: 2rem;
+    border-top: 1px solid #e2e8f0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .grid-cols-2,
+    .grid-cols-3 {
+        grid-template-columns: 1fr;
+    }
+
+    .navbar-menu {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}

static/js/app.js

@@ -0,0 +1,244 @@
+// Theme management for GoMFT application
+document.addEventListener('DOMContentLoaded', function() {
+  initializeTheme();
+});
+
+// Initialize theme based on user preference
+function initializeTheme() {
+  const storedTheme = getCookie('theme');
+  
+  if (storedTheme === 'dark') {
+    applyDarkTheme();
+  } else if (storedTheme === 'system') {
+    applySystemTheme();
+  } else {
+    // Default to light theme
+    applyLightTheme();
+  }
+  
+  // Listen for theme changes from system
+  if (window.matchMedia) {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    
+    // Add change listener
+    try {
+      // Chrome & Firefox
+      mediaQuery.addEventListener('change', (e) => {
+        if (getCookie('theme') === 'system') {
+          e.matches ? applyDarkTheme(false) : applyLightTheme(false);
+        }
+      });
+    } catch (e1) {
+      try {
+        // Safari
+        mediaQuery.addListener((e) => {
+          if (getCookie('theme') === 'system') {
+            e.matches ? applyDarkTheme(false) : applyLightTheme(false);
+          }
+        });
+      } catch (e2) {
+        console.error('Could not add media query listener', e2);
+      }
+    }
+  }
+  
+  // Listen for theme changes via HTMX
+  document.body.addEventListener('htmx:afterRequest', function(event) {
+    if (event.detail.requestConfig && event.detail.requestConfig.path === '/profile/theme') {
+      // Refresh the theme after update
+      const updatedTheme = getCookie('theme');
+      applyTheme(updatedTheme);
+    }
+  });
+}
+
+// Toggle between light and dark theme
+function toggleTheme() {
+  const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+  if (currentTheme === 'dark') {
+    applyLightTheme();
+    setCookie('theme', 'light', 365);
+  } else {
+    applyDarkTheme();
+    setCookie('theme', 'dark', 365);
+  }
+  
+  // Add a subtle animation effect
+  document.body.classList.add('theme-transition');
+  setTimeout(() => {
+    document.body.classList.remove('theme-transition');
+  }, 500);
+}
+
+// Apply theme based on theme name
+function applyTheme(theme) {
+  if (theme === 'dark') {
+    applyDarkTheme();
+  } else if (theme === 'system') {
+    applySystemTheme();
+  } else {
+    applyLightTheme();
+  }
+}
+
+// Apply dark theme
+function applyDarkTheme(setClass = true) {
+  if (setClass) {
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.remove('light');
+  }
+  document.documentElement.style.colorScheme = 'dark';
+  
+  // Add transition for smooth theme switching
+  document.documentElement.style.transition = 'background-color 0.3s ease, color 0.3s ease';
+  
+  updateThemeColors('dark');
+  
+  // Update theme toggle icon
+  updateThemeToggleIcon('dark');
+  
+  // Store user preference in localStorage as a backup
+  localStorage.setItem('theme', 'dark');
+}
+
+// Apply light theme
+function applyLightTheme(setClass = true) {
+  if (setClass) {
+    document.documentElement.classList.remove('dark');
+    document.documentElement.classList.add('light');
+  }
+  document.documentElement.style.colorScheme = 'light';
+  
+  // Add transition for smooth theme switching
+  document.documentElement.style.transition = 'background-color 0.3s ease, color 0.3s ease';
+  
+  updateThemeColors('light');
+  
+  // Update theme toggle icon
+  updateThemeToggleIcon('light');
+  
+  // Store user preference in localStorage as a backup
+  localStorage.setItem('theme', 'light');
+}
+
+// Apply system theme based on user's OS preference
+function applySystemTheme() {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    applyDarkTheme(true);
+  } else {
+    applyLightTheme(true);
+  }
+  
+  // Store user preference in localStorage as a backup
+  localStorage.setItem('theme', 'system');
+}
+
+// Update theme colors
+function updateThemeColors(theme) {
+  // This function can be expanded to update specific UI elements
+  // that might need special handling beyond CSS classes
+  
+  // For example, updating charts, custom components, etc.
+  if (theme === 'dark') {
+    // Apply dark theme specific changes
+    // Ensure better contrast for text elements
+    const textElements = document.querySelectorAll('.text-gray-700, .text-gray-800, .text-gray-900, .text-secondary-700, .text-secondary-800, .text-secondary-900');
+    textElements.forEach(el => {
+      if (!el.classList.contains('dark:text-white') && 
+          !el.classList.contains('dark:text-gray-100') && 
+          !el.classList.contains('dark:text-gray-200') &&
+          !el.classList.contains('dark:text-secondary-100') && 
+          !el.classList.contains('dark:text-secondary-200')) {
+        el.classList.add('dark:text-secondary-200');
+      }
+    });
+    
+    // Ensure better contrast for background elements
+    const bgElements = document.querySelectorAll('.bg-gray-800, .bg-gray-900, .bg-secondary-800, .bg-secondary-900');
+    bgElements.forEach(el => {
+      if (!el.classList.contains('dark:bg-gray-700') &&
+          !el.classList.contains('dark:bg-secondary-700')) {
+        el.classList.add('dark:bg-secondary-700');
+      }
+    });
+    
+    // Apply custom animations for dark mode
+    document.body.classList.add('theme-dark-animation');
+    setTimeout(() => {
+      document.body.classList.remove('theme-dark-animation');
+    }, 500);
+  } else {
+    // Apply light theme specific changes
+    
+    // Apply custom animations for light mode
+    document.body.classList.add('theme-light-animation');
+    setTimeout(() => {
+      document.body.classList.remove('theme-light-animation');
+    }, 500);
+  }
+}
+
+// Update theme toggle icon
+function updateThemeToggleIcon(theme) {
+  const themeToggle = document.getElementById('theme-toggle');
+  if (!themeToggle) return;
+  
+  const sunIcon = themeToggle.querySelector('.fa-sun');
+  const moonIcon = themeToggle.querySelector('.fa-moon');
+  
+  if (theme === 'dark') {
+    if (sunIcon) sunIcon.classList.remove('hidden');
+    if (moonIcon) moonIcon.classList.add('hidden');
+  } else {
+    if (sunIcon) sunIcon.classList.add('hidden');
+    if (moonIcon) moonIcon.classList.remove('hidden');
+  }
+}
+
+// Helper function to get cookie value
+function getCookie(name) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop().split(';').shift();
+  
+  // Fallback to localStorage if cookie is not available
+  return localStorage.getItem(name) || '';
+}
+
+// Helper function to set cookie
+function setCookie(name, value, days) {
+  let expires = '';
+  if (days) {
+    const date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    expires = '; expires=' + date.toUTCString();
+  }
+  document.cookie = name + '=' + (value || '') + expires + '; path=/; SameSite=Strict';
+}
+
+// Add CSS for theme transition animations
+const style = document.createElement('style');
+style.textContent = `
+  .theme-transition {
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  .theme-dark-animation {
+    animation: darkModeIn 0.5s ease forwards;
+  }
+  
+  .theme-light-animation {
+    animation: lightModeIn 0.5s ease forwards;
+  }
+  
+  @keyframes darkModeIn {
+    0% { opacity: 0.8; }
+    100% { opacity: 1; }
+  }
+  
+  @keyframes lightModeIn {
+    0% { opacity: 0.8; }
+    100% { opacity: 1; }
+  }
+`;
+document.head.appendChild(style);

static/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}