update zola template

2025-03-24 21:46:08 +02:00
commit b55e4929ab
40 changed files with 109109 additions and 0 deletions
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -0,0 +1,139 @@
+// Mobile menu toggle
+document.addEventListener('DOMContentLoaded', function() {
+  console.log("DOM loaded - initializing dark mode");
+  
+  const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
+  const mobileMenu = document.getElementById('mobile-menu');
+  const menuIcons = menuButton.querySelectorAll('svg');
+  
+  if (menuButton && mobileMenu) {
+    menuButton.addEventListener('click', function() {
+      const expanded = menuButton.getAttribute('aria-expanded') === 'true';
+      
+      // Toggle aria-expanded
+      menuButton.setAttribute('aria-expanded', !expanded);
+      
+      // Toggle menu visibility
+      mobileMenu.classList.toggle('hidden');
+      
+      // Toggle icons
+      menuIcons.forEach(icon => {
+        icon.classList.toggle('hidden');
+      });
+    });
+  }
+  
+  // Desktop dropdown menu
+  const whyMenuButton = document.getElementById('why-menu-button');
+  const desktopWhyMenu = document.getElementById('desktop-why-menu');
+  
+  if (whyMenuButton && desktopWhyMenu) {
+    // Toggle on click
+    whyMenuButton.addEventListener('click', function() {
+      desktopWhyMenu.classList.toggle('hidden');
+    });
+    
+    // Close when clicking outside
+    document.addEventListener('click', function(event) {
+      if (!whyMenuButton.contains(event.target) && !desktopWhyMenu.contains(event.target)) {
+        desktopWhyMenu.classList.add('hidden');
+      }
+    });
+    
+    // Show on hover
+    whyMenuButton.addEventListener('mouseenter', function() {
+      desktopWhyMenu.classList.remove('hidden');
+    });
+    
+    // Container for both button and menu for hover functionality
+    const dropdownContainer = whyMenuButton.parentElement;
+    
+    // Hide on mouse leave from container
+    dropdownContainer.addEventListener('mouseleave', function() {
+      desktopWhyMenu.classList.add('hidden');
+    });
+  }
+  
+  // Mobile dropdown menu
+  const mobileWhyMenuButton = document.querySelector('[x-data="{ open: false }"] button');
+  const mobileWhyMenu = document.getElementById('mobile-why-menu');
+  
+  if (mobileWhyMenuButton && mobileWhyMenu) {
+    mobileWhyMenuButton.addEventListener('click', function() {
+      mobileWhyMenu.classList.toggle('hidden');
+    });
+  }
+
+  // Theme toggle functionality
+  const themeToggleBtn = document.getElementById('theme-toggle');
+  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+  const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');
+
+  // Check if dark mode is already enabled
+  const isDarkMode = localStorage.getItem('color-theme') === 'dark' || 
+    (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  
+  console.log("Initial dark mode state:", isDarkMode);
+
+  // Set initial theme
+  if (isDarkMode) {
+    document.documentElement.classList.add('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.remove('hidden');
+      themeToggleDarkIcon.classList.add('hidden');
+    }
+  } else {
+    document.documentElement.classList.remove('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.add('hidden');
+      themeToggleDarkIcon.classList.remove('hidden');
+    }
+  }
+
+  // Toggle theme function
+  function toggleTheme() {
+    console.log("Toggle theme clicked");
+    
+    // Add transition class
+    document.documentElement.classList.add('transition');
+    
+    // Toggle theme
+    const isDark = document.documentElement.classList.contains('dark');
+    console.log("Current dark mode:", isDark);
+    
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('color-theme', 'light');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.add('hidden');
+        themeToggleDarkIcon.classList.remove('hidden');
+      }
+      console.log("Switched to light mode");
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('color-theme', 'dark');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.remove('hidden');
+        themeToggleDarkIcon.classList.add('hidden');
+      }
+      console.log("Switched to dark mode");
+    }
+    
+    // Remove transition class after transition completes
+    setTimeout(() => {
+      document.documentElement.classList.remove('transition');
+    }, 300);
+  }
+
+  // Add event listeners to toggle buttons
+  if (themeToggleBtn) {
+    console.log("Adding event listener to theme toggle button");
+    themeToggleBtn.addEventListener('click', toggleTheme);
+  }
+  
+  if (mobileThemeToggleBtn) {
+    console.log("Adding event listener to mobile theme toggle button");
+    mobileThemeToggleBtn.addEventListener('click', toggleTheme);
+  }
+});