update home template
This commit is contained in:
110
static/js/custom.js
Normal file
110
static/js/custom.js
Normal file
@@ -0,0 +1,110 @@
|
||||
var displayedMenu = "";
|
||||
var hamburgerShown = false;
|
||||
let width = screen.width;
|
||||
var isMobile = width < 1024;
|
||||
|
||||
function toggleMenu(button) {
|
||||
if (displayedMenu === button.id.split("-")[0]) {
|
||||
button.className = button.className.replace(
|
||||
" text-blue-500 bg-stone-200 sm:bg-transparent",
|
||||
" text-gray-900"
|
||||
);
|
||||
hideMenu(button.id.split("-")[0]);
|
||||
button.lastElementChild.className = button.lastElementChild.className.replace(
|
||||
"rotate-0",
|
||||
"-rotate-90"
|
||||
);
|
||||
displayedMenu = "";
|
||||
} else {
|
||||
showMenu(button.id.split("-")[0]);
|
||||
button.lastElementChild.className = button.lastElementChild.className.replace(
|
||||
"-rotate-90",
|
||||
"rotate-0"
|
||||
);
|
||||
button.className = button.className.replace(
|
||||
" text-gray-900",
|
||||
" text-blue-500 bg-stone-200 sm:bg-transparent"
|
||||
);
|
||||
displayedMenu = button.id.split("-")[0];
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick(button) {
|
||||
if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") {
|
||||
toggleHamburger();
|
||||
}
|
||||
if (button.id.indexOf("menu") !== -1) {
|
||||
toggleMenu(button);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleHamburger() {
|
||||
if (hamburgerShown) {
|
||||
hideHamburger();
|
||||
hamburgerShown = false;
|
||||
} else {
|
||||
showHamburger();
|
||||
hamburgerShown = true;
|
||||
}
|
||||
}
|
||||
|
||||
function showMenu(menuName) {
|
||||
var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
|
||||
var menuBtnId = menuName + (isMobile ? "-mobile-menu" : "-menu");
|
||||
var menuElement = document.getElementById(menuId);
|
||||
menuElement.className = menuElement.className.replace(" hidden", "");
|
||||
setTimeout(function () {
|
||||
menuElement.className = menuElement.className.replace(
|
||||
"duration-200 ease-in opacity-0 -translate-y-1",
|
||||
"duration-150 ease-out opacity-1 -translate-y-0"
|
||||
);
|
||||
}, 10);
|
||||
}
|
||||
|
||||
function hideMenu(menuName) {
|
||||
var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
|
||||
var menuElement = document.getElementById(menuId);
|
||||
menuElement.className = menuElement.className.replace(
|
||||
"duration-150 ease-out opacity-1 -translate-y-0",
|
||||
"duration-200 ease-in opacity-0 -translate-y-1"
|
||||
);
|
||||
setTimeout(function () {
|
||||
menuElement.className = menuElement.className + " hidden";
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function showHamburger() {
|
||||
document.getElementById("header-container").className = "overflow-hidden";
|
||||
document.getElementById("hamburger").className =
|
||||
"fixed z-20 top-0 inset-x-0 transition transform origin-top-right";
|
||||
document.getElementById("hamburger-btn").className =
|
||||
"hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
document.getElementById("close-hamburger-btn").className =
|
||||
"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
}
|
||||
|
||||
function hideHamburger() {
|
||||
document.getElementById("header-container").className = "";
|
||||
document.getElementById("hamburger").className =
|
||||
"hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
|
||||
document.getElementById("hamburger-btn").className =
|
||||
"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
document.getElementById("close-hamburger-btn").className =
|
||||
"hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
|
||||
if (displayedMenu !== "") {
|
||||
hideMenu(displayedMenu);
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
let elements = document.getElementsByTagName("button");
|
||||
let buttons = [...elements];
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
handleClick(button);
|
||||
});
|
||||
});
|
||||
document
|
||||
.getElementById("mobile-learn-btn")
|
||||
?.addEventListener("click", toggleMenu);
|
||||
};
|
||||
@@ -1,139 +0,0 @@
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user