Spaces:

mertmehmet
/

saas-admin

Running

App Files Files Community

mertmehmet commited on Jul 3

Commit

de00577

verified ·

1 Parent(s): e2f39b8

menüye mega menü ekle - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +223 -14

index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="light">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,6 +7,53 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         /* Custom transitions for off-canvas menus */
         .transition-all-300 {
             transition: all 0.3s ease;
@@ -37,6 +84,83 @@
 <body class="dark-mode-transition bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
     <!-- Header -->
     <header class="fixed top-0 left-0 right-0 z-50 bg-white dark:bg-gray-800 shadow-md">
         <div class="container mx-auto px-4 py-3 flex items-center justify-between">
             <!-- Logo and Mobile Menu Button -->
             <div class="flex items-center space-x-4">
@@ -99,7 +223,7 @@
     </header>
     <!-- Mobile Menu (Off-canvas) -->
-    <div id="mobileMenu" class="fixed top-0 left-0 h-full w-64 bg-white dark:bg-gray-800 shadow-lg transform-offcanvas transition-all-300 z-40 pt-16 md:hidden">
         <div class="overflow-y-auto h-full no-scrollbar">
             <nav class="px-4 py-6">
                 <ul class="space-y-2">
@@ -313,7 +437,7 @@
     </div>
     <!-- Main Content Area -->
-    <main id="mainContent" class="pt-24 pb-8 px-4 transition-all-300">
         <div class="container mx-auto">
             <!-- Page Title -->
             <div class="flex justify-between items-center mb-6">
@@ -760,11 +884,85 @@
         const sidebarWidthControls = document.getElementById('sidebarWidthControls');
         const faqToggles = document.querySelectorAll('.faq-toggle');
-        // Initialize with horizontal menu (default)
-        let isHorizontalMenu = true;
         let isMobileMenuOpen = false;
         let isSettingsPanelOpen = false;
-        let isDarkMode = false;
         // Check for saved preferences
         if (localStorage.getItem('darkMode') === 'true') {
@@ -932,15 +1130,26 @@
         });
         // FAQ Toggles
-        faqToggles.forEach(toggle => {
-            toggle.addEventListener('click', function() {
-                const content = this.nextElementSibling;
-                const icon = this.querySelector('i');
-                content.classList.toggle('hidden');
-                icon.classList.toggle('rotate-180');
             });
-        });
         // Search Bar Toggle
         const searchBarToggle = document.getElementById('searchBarToggle');

 <!DOCTYPE html>
+<html lang="en" class="">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        /* Mega menu styles */
+        .mega-menu {
+            display: none;
+            position: absolute;
+            left: 0;
+            width: 100%;
+            background: white;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            padding: 1.5rem;
+            z-index: 50;
+        }
+        .mega-menu-container {
+            display: grid;
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+            gap: 1.5rem;
+        }
+        .mega-menu-col h4 {
+            font-weight: 600;
+            margin-bottom: 0.75rem;
+            color: #1f2937;
+        }
+        .mega-menu-col ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .mega-menu-col li {
+            margin-bottom: 0.5rem;
+        }
+        .mega-menu-col a {
+            color: #4b5563;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+        .mega-menu-col a:hover {
+            color: #3b82f6;
+        }
+        .has-mega-menu:hover .mega-menu {
+            display: block;
+        }
         /* Custom transitions for off-canvas menus */
         .transition-all-300 {
             transition: all 0.3s ease;
 <body class="dark-mode-transition bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
     <!-- Header -->
     <header class="fixed top-0 left-0 right-0 z-50 bg-white dark:bg-gray-800 shadow-md">
+        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+        <!-- Secondary Navigation -->
+        <div class="bg-blue-600 dark:bg-blue-800 text-white absolute left-0 right-0 top-full">
+            <div class="container mx-auto px-4">
+                <nav class="flex overflow-x-auto no-scrollbar">
+                    <ul class="flex space-x-1 py-2">
+                        <li><a href="#" class="block px-4 py-1 rounded-md hover:bg-blue-700 dark:hover:bg-blue-900 font-medium">Home</a></li>
+                        <li><a href="#" class="block px-4 py-1 rounded-md hover:bg-blue-700 dark:hover:bg-blue-900 font-medium">Products</a></li>
+                        <li><a href="#" class="block px-4 py-1 rounded-md hover:bg-blue-700 dark:hover:bg-blue-900 font-medium">Services</a></li>
+                        <li><a href="#" class="block px-4 py-1 rounded-md hover:bg-blue-700 dark:hover:bg-blue-900 font-medium">Pricing</a></li>
+                        <li><a href="#" class="block px-4 py-1 rounded-md hover:bg-blue-700 dark:hover:bg-blue-900 font-medium">About Us</a></li>
+                        <li><a href="#" class="block px-4 py-1 rounded-md hover:bg-blue-700 dark:hover:bg-blue-900 font-medium">Contact</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+            <!-- Logo and Mobile Menu Button -->
+            <div class="flex items-center space-x-4">
+                <button id="mobileMenuButton" class="md:hidden text-gray-600 dark:text-gray-300">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+                <div class="text-xl font-bold text-blue-600 dark:text-blue-400">Deepsite v2</div>
+            </div>
+            <!-- Search Bar (Center) - Hidden on mobile -->
+            <div class="hidden md:flex flex-1 max-w-md mx-4">
+                <div class="relative w-full">
+                    <input type="text" placeholder="Search..."
+                           class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
+                    <div class="absolute left-3 top-2.5 text-gray-400 dark:text-gray-300">
+                        <i class="fas fa-search"></i>
+                    </div>
+                    <button class="absolute right-3 top-2.5 text-gray-400 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-100">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Right Side Icons -->
+            <div class="flex items-center space-x-4">
+                <!-- Login/Register Buttons (Visible when not logged in) -->
+                <div id="guestButtons" class="hidden sm:flex space-x-2">
+                    <button class="px-3 py-1.5 text-sm rounded-md border border-blue-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-gray-700">Login</button>
+                    <button class="px-3 py-1.5 text-sm rounded-md bg-blue-600 text-white hover:bg-blue-700">Register</button>
+                </div>
+                <!-- User Dropdown (Visible when logged in) -->
+                <div id="userDropdown" class="relative hidden">
+                    <button id="userDropdownButton" class="flex items-center space-x-2 focus:outline-none">
+                        <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
+                            <i class="fas fa-user"></i>
+                        </div>
+                        <span class="hidden md:inline">Admin</span>
+                        <i class="fas fa-chevron-down text-xs hidden md:inline"></i>
+                    </button>
+                    <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
+                        <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
+                        <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
+                        <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700">Logout</a>
+                    </div>
+                </div>
+                <!-- Dark Mode Toggle -->
+                <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200" title="Toggle Dark Mode">
+                    <i id="moonIcon" class="fas fa-moon text-gray-700"></i>
+                    <i id="sunIcon" class="fas fa-sun hidden text-yellow-400"></i>
+                </button>
+                <!-- Settings Panel Toggle -->
+                <button id="settingsToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                    <i class="fas fa-cog"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+        <!-- Original Header Content -->
         <div class="container mx-auto px-4 py-3 flex items-center justify-between">
             <!-- Logo and Mobile Menu Button -->
             <div class="flex items-center space-x-4">
     </header>
     <!-- Mobile Menu (Off-canvas) -->
+    <div id="mobileMenu" class="fixed top-0 left-0 h-full w-64 bg-white dark:bg-gray-800 shadow-lg transform-offcanvas transition-all-300 z-50 pt-16 md:hidden">
         <div class="overflow-y-auto h-full no-scrollbar">
             <nav class="px-4 py-6">
                 <ul class="space-y-2">
     </div>
     <!-- Main Content Area -->
+    <main id="mainContent" class="pt-32 pb-8 px-4 transition-all-300">
         <div class="container mx-auto">
             <!-- Page Title -->
             <div class="flex justify-between items-center mb-6">
         const sidebarWidthControls = document.getElementById('sidebarWidthControls');
         const faqToggles = document.querySelectorAll('.faq-toggle');
+        // Initialize dark mode
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const moonIcon = document.getElementById('moonIcon');
+        const sunIcon = document.getElementById('sunIcon');
+        // Check for saved preference or use system preference
+        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        let isDarkMode = localStorage.getItem('darkMode') === 'true' ||
+                        (localStorage.getItem('darkMode') === null && prefersDarkScheme.matches);
+        // Apply initial mode
+        if (isDarkMode) {
+            document.documentElement.classList.add('dark');
+            moonIcon.classList.add('hidden');
+            sunIcon.classList.remove('hidden');
+            if (darkModeToggle2) darkModeToggle2.checked = true;
+        } else {
+            document.documentElement.classList.remove('dark');
+            moonIcon.classList.remove('hidden');
+            sunIcon.classList.add('hidden');
+            if (darkModeToggle2) darkModeToggle2.checked = false;
+        }
+        // Dark Mode Toggle Event Listeners
+        darkModeToggle.addEventListener('click', toggleDarkMode);
+        if (darkModeToggle2) {
+            darkModeToggle2.addEventListener('change', toggleDarkMode);
+        }
+        // Watch for system color scheme changes
+        prefersDarkScheme.addEventListener('change', e => {
+            if (localStorage.getItem('darkMode') === null) {
+                isDarkMode = e.matches;
+                if (isDarkMode) {
+                    document.documentElement.classList.add('dark');
+                    moonIcon.classList.add('hidden');
+                    sunIcon.classList.remove('hidden');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                    moonIcon.classList.remove('hidden');
+                    sunIcon.classList.add('hidden');
+                }
+            }
+        });
+        // Check for saved dark mode preference
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.documentElement.classList.add('dark');
+            isDarkMode = true;
+            darkModeToggle2.checked = true;
+        } else {
+            document.documentElement.classList.remove('dark');
+            isDarkMode = false;
+            darkModeToggle2.checked = false;
+        }
+        updateDarkModeIcon();
+        function toggleDarkMode() {
+            isDarkMode = !isDarkMode;
+            if (isDarkMode) {
+                document.documentElement.classList.add('dark');
+                moonIcon.classList.add('hidden');
+                sunIcon.classList.remove('hidden');
+                localStorage.setItem('darkMode', 'true');
+            } else {
+                document.documentElement.classList.remove('dark');
+                moonIcon.classList.remove('hidden');
+                sunIcon.classList.add('hidden');
+                localStorage.setItem('darkMode', 'false');
+            }
+            if (darkModeToggle2) {
+                darkModeToggle2.checked = isDarkMode;
+            }
+        }
         let isMobileMenuOpen = false;
         let isSettingsPanelOpen = false;
         // Check for saved preferences
         if (localStorage.getItem('darkMode') === 'true') {
         });
         // FAQ Toggles
+        if (faqToggles) {
+            faqToggles.forEach(toggle => {
+                toggle.addEventListener('click', function() {
+                    const content = this.nextElementSibling;
+                    const icon = this.querySelector('i');
+                    // Toggle current item
+                    content.classList.toggle('hidden');
+                    icon.classList.toggle('rotate-180');
+                    // Close other open FAQ items if needed
+                    document.querySelectorAll('.faq-toggle').forEach(otherToggle => {
+                        if (otherToggle !== toggle) {
+                            otherToggle.nextElementSibling.classList.add('hidden');
+                            otherToggle.querySelector('i').classList.remove('rotate-180');
+                        }
+                    });
+                });
             });
+        }
         // Search Bar Toggle
         const searchBarToggle = document.getElementById('searchBarToggle');