mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 05:23:42 +00:00
fix: perfects mobile menu and nav
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
a3c642d9fe
commit
9275ae82db
7 changed files with 336 additions and 56 deletions
67
about.html
67
about.html
|
|
@ -363,15 +363,18 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu Toggle with Homepage structure -->
|
||||
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div class="relative inline-block" id="menuWrap">
|
||||
<!-- Menu Toggle with Homepage/WHY structure -->
|
||||
<div
|
||||
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
|
||||
>
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<!-- Desktop view: menuWrap with waves and outline -->
|
||||
<div class="relative inline-block hidden md:block" id="menuWrap">
|
||||
<div class="menu-waves" aria-hidden="true">
|
||||
<span class="wave"></span>
|
||||
<span class="wave"></span>
|
||||
<span class="wave"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-outline" aria-hidden="true"></div>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
|
|
@ -384,10 +387,32 @@
|
|||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
</div>
|
||||
<div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
|
||||
<div
|
||||
id="menuPetal"
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
|
||||
>
|
||||
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile view: simple transparent background -->
|
||||
<div class="md:hidden">
|
||||
<div
|
||||
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1289,6 +1314,24 @@
|
|||
/* Homepage-style menu outline and waves */
|
||||
#menuWrap { position: relative; overflow: visible; }
|
||||
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
|
||||
|
||||
/* Hide menu outline on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.menu-outline {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Create a proper button container for mobile */
|
||||
#menuGrid {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
|
||||
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
|
||||
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
|
||||
|
|
@ -1435,27 +1478,31 @@
|
|||
});
|
||||
});
|
||||
|
||||
// Menu toggle functionality (homepage pattern)
|
||||
// Menu toggle functionality
|
||||
const menuToggle = document.getElementById("menuToggle");
|
||||
const navMenu = document.getElementById("navMenu");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuWrap = document.getElementById("menuWrap");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuGridMobile = document.getElementById("menuGridMobile");
|
||||
|
||||
if (menuToggle && navMenu && menuGrid) {
|
||||
if (menuToggle && navMenu) {
|
||||
let isMenuOpen = false;
|
||||
|
||||
menuToggle.addEventListener("click", () => {
|
||||
if (isMenuOpen) {
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
if (menuWrap) menuWrap.classList.remove("open");
|
||||
isMenuOpen = false;
|
||||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
if (menuWrap) menuWrap.classList.add("open");
|
||||
isMenuOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
navMenu.classList.add("hidden");
|
||||
|
|
|
|||
98
contact.html
98
contact.html
|
|
@ -367,9 +367,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Menu Toggle with Homepage/WHY structure -->
|
||||
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div class="relative inline-block" id="menuWrap">
|
||||
<div
|
||||
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
|
||||
>
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<!-- Desktop view: menuWrap with waves and outline -->
|
||||
<div class="relative inline-block hidden md:block" id="menuWrap">
|
||||
<div class="menu-waves" aria-hidden="true">
|
||||
<span class="wave"></span>
|
||||
<span class="wave"></span>
|
||||
|
|
@ -386,11 +389,33 @@
|
|||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
</div>
|
||||
<div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
|
||||
</div>
|
||||
<div
|
||||
id="menuPetal"
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
|
||||
>
|
||||
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile view: simple transparent background -->
|
||||
<div class="md:hidden">
|
||||
<div
|
||||
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -873,6 +898,24 @@
|
|||
/* Homepage-style menu outline and waves */
|
||||
#menuWrap { position: relative; overflow: visible; }
|
||||
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
|
||||
|
||||
/* Hide menu outline on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.menu-outline {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Create a proper button container for mobile */
|
||||
#menuGrid {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
|
||||
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
|
||||
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
|
||||
|
|
@ -883,28 +926,39 @@
|
|||
</style>
|
||||
|
||||
<script>
|
||||
// Menu toggle functionality (class-toggle)
|
||||
// Menu toggle functionality
|
||||
const menuToggle = document.getElementById("menuToggle");
|
||||
const navMenu = document.getElementById("navMenu");
|
||||
const menuWrap = document.getElementById("menuWrap");
|
||||
(function setupMenu(){
|
||||
if (!menuToggle || !navMenu || !menuWrap) return;
|
||||
let isOpen = false;
|
||||
menuToggle.addEventListener('click', (e)=>{
|
||||
e.stopPropagation();
|
||||
isOpen = !isOpen;
|
||||
if (isOpen) { navMenu.classList.remove('hidden'); menuWrap.classList.add('open'); }
|
||||
else { navMenu.classList.add('hidden'); menuWrap.classList.remove('open'); }
|
||||
});
|
||||
document.addEventListener('click', (e)=>{
|
||||
if (!isOpen) return;
|
||||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
isOpen = false;
|
||||
navMenu.classList.add('hidden');
|
||||
menuWrap.classList.remove('open');
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuGridMobile = document.getElementById("menuGridMobile");
|
||||
|
||||
if (menuToggle && navMenu) {
|
||||
let isMenuOpen = false;
|
||||
|
||||
menuToggle.addEventListener("click", () => {
|
||||
if (isMenuOpen) {
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
if (menuWrap) menuWrap.classList.remove("open");
|
||||
isMenuOpen = false;
|
||||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
if (menuWrap) menuWrap.classList.add("open");
|
||||
isMenuOpen = true;
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
navMenu.classList.add("hidden");
|
||||
if (menuWrap) menuWrap.classList.remove("open");
|
||||
isMenuOpen = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
// Form submission
|
||||
|
|
|
|||
68
index.html
68
index.html
|
|
@ -372,13 +372,13 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Menu Grid -->
|
||||
<!-- Menu Toggle with Homepage/WHY structure -->
|
||||
<div
|
||||
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50 opacity-0 animate-fade-in-left"
|
||||
style="animation-delay: 0.4s; animation-fill-mode: forwards"
|
||||
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
|
||||
>
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div class="relative inline-block" id="menuWrap">
|
||||
<!-- Desktop view: menuWrap with waves and outline -->
|
||||
<div class="relative inline-block hidden md:block" id="menuWrap">
|
||||
<div class="menu-waves" aria-hidden="true">
|
||||
<span class="wave"></span>
|
||||
<span class="wave"></span>
|
||||
|
|
@ -406,6 +406,25 @@
|
|||
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile view: simple transparent background -->
|
||||
<div class="md:hidden">
|
||||
<div
|
||||
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -621,6 +640,23 @@
|
|||
outline: 1px solid rgba(255, 255, 255, 0.6);
|
||||
outline-offset: 6px;
|
||||
}
|
||||
|
||||
/* Hide menu outline on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.menu-outline {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Create a proper button container for mobile */
|
||||
#menuGrid {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
}
|
||||
}
|
||||
.menu-waves .wave {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
|
@ -805,6 +841,23 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hero section class for targeting */
|
||||
.hero-section {
|
||||
/* This class will be added to the hero section for targeting */
|
||||
}
|
||||
|
||||
/* Mobile menu button styling */
|
||||
@media (max-width: 768px) {
|
||||
#menuGrid {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
|
|
@ -957,10 +1010,11 @@
|
|||
// Menu toggle functionality
|
||||
const menuToggle = document.getElementById("menuToggle");
|
||||
const navMenu = document.getElementById("navMenu");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuWrap = document.getElementById("menuWrap");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuGridMobile = document.getElementById("menuGridMobile");
|
||||
|
||||
if (menuToggle && navMenu && menuGrid) {
|
||||
if (menuToggle && navMenu) {
|
||||
let isMenuOpen = false;
|
||||
|
||||
menuToggle.addEventListener("click", () => {
|
||||
|
|
@ -970,7 +1024,7 @@
|
|||
if (menuWrap) menuWrap.classList.remove("open");
|
||||
isMenuOpen = false;
|
||||
} else {
|
||||
// Open menu (keep button static)
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
if (menuWrap) menuWrap.classList.add("open");
|
||||
isMenuOpen = true;
|
||||
|
|
|
|||
|
|
@ -368,7 +368,8 @@
|
|||
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
|
||||
>
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div class="relative inline-block" id="menuWrap">
|
||||
<!-- Desktop view: menuWrap with waves and outline -->
|
||||
<div class="relative inline-block hidden md:block" id="menuWrap">
|
||||
<div class="menu-waves" aria-hidden="true">
|
||||
<span class="wave"></span>
|
||||
<span class="wave"></span>
|
||||
|
|
@ -393,6 +394,25 @@
|
|||
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile view: simple transparent background -->
|
||||
<div class="md:hidden">
|
||||
<div
|
||||
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1137,7 +1157,7 @@
|
|||
contain: layout;
|
||||
}
|
||||
|
||||
/* Homepage-style menu outline and waves */
|
||||
/* Homepage-style menu outline and waves (desktop only) */
|
||||
#menuWrap {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
|
@ -1150,6 +1170,7 @@
|
|||
outline: 1px solid rgba(255, 255, 255, 0.6);
|
||||
outline-offset: 6px;
|
||||
}
|
||||
|
||||
.menu-waves {
|
||||
position: absolute;
|
||||
inset: -20px;
|
||||
|
|
@ -1534,27 +1555,32 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Menu toggle functionality (homepage pattern)
|
||||
// Menu toggle functionality
|
||||
const menuToggle = document.getElementById("menuToggle");
|
||||
const navMenu = document.getElementById("navMenu");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuWrap = document.getElementById("menuWrap");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuGridMobile = document.getElementById("menuGridMobile");
|
||||
|
||||
if (menuToggle && navMenu && menuGrid) {
|
||||
if (menuToggle && navMenu) {
|
||||
let isMenuOpen = false;
|
||||
let closeBtnEl = null;
|
||||
|
||||
menuToggle.addEventListener("click", () => {
|
||||
if (isMenuOpen) {
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
if (menuWrap) menuWrap.classList.remove("open");
|
||||
isMenuOpen = false;
|
||||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
if (menuWrap) menuWrap.classList.add("open");
|
||||
isMenuOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
navMenu.classList.add("hidden");
|
||||
|
|
|
|||
|
|
@ -168,6 +168,24 @@
|
|||
/* Homepage-style menu outline and waves */
|
||||
#menuWrap { position: relative; overflow: visible; }
|
||||
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
|
||||
|
||||
/* Hide menu outline on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.menu-outline {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Create a proper button container for mobile */
|
||||
#menuGrid {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
|
||||
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
|
||||
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
|
||||
|
|
@ -530,9 +548,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Menu Toggle with Homepage/WHY structure -->
|
||||
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
|
||||
<div
|
||||
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
|
||||
>
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div class="relative inline-block" id="menuWrap">
|
||||
<!-- Desktop view: menuWrap with waves and outline -->
|
||||
<div class="relative inline-block hidden md:block" id="menuWrap">
|
||||
<div class="menu-waves" aria-hidden="true">
|
||||
<span class="wave"></span>
|
||||
<span class="wave"></span>
|
||||
|
|
@ -550,10 +571,32 @@
|
|||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
</div>
|
||||
<div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
|
||||
<div
|
||||
id="menuPetal"
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
|
||||
>
|
||||
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile view: simple transparent background -->
|
||||
<div class="md:hidden">
|
||||
<div
|
||||
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1103,27 +1146,31 @@
|
|||
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
|
||||
})();
|
||||
|
||||
// Menu toggle functionality (homepage pattern)
|
||||
// Menu toggle functionality
|
||||
const menuToggle = document.getElementById("menuToggle");
|
||||
const navMenu = document.getElementById("navMenu");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuWrap = document.getElementById("menuWrap");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuGridMobile = document.getElementById("menuGridMobile");
|
||||
|
||||
if (menuToggle && navMenu && menuGrid) {
|
||||
if (menuToggle && navMenu) {
|
||||
let isMenuOpen = false;
|
||||
|
||||
menuToggle.addEventListener("click", () => {
|
||||
if (isMenuOpen) {
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
if (menuWrap) menuWrap.classList.remove("open");
|
||||
isMenuOpen = false;
|
||||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
if (menuWrap) menuWrap.classList.add("open");
|
||||
isMenuOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
navMenu.classList.add("hidden");
|
||||
|
|
|
|||
|
|
@ -2296,6 +2296,11 @@ video {
|
|||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
|
||||
.backdrop-filter {
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
|
|
|
|||
59
who.html
59
who.html
|
|
@ -364,9 +364,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Menu Toggle with Homepage/WHY structure -->
|
||||
<div class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50">
|
||||
<div
|
||||
class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
|
||||
>
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div class="relative inline-block" id="menuWrap">
|
||||
<!-- Desktop view: menuWrap with waves and outline -->
|
||||
<div class="relative inline-block hidden md:block" id="menuWrap">
|
||||
<div class="menu-waves" aria-hidden="true">
|
||||
<span class="wave"></span>
|
||||
<span class="wave"></span>
|
||||
|
|
@ -384,10 +387,32 @@
|
|||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
</div>
|
||||
<div id="menuPetal" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity">
|
||||
<div
|
||||
id="menuPetal"
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
|
||||
>
|
||||
<img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile view: simple transparent background -->
|
||||
<div class="md:hidden">
|
||||
<div
|
||||
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGridMobile">
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1476,6 +1501,24 @@
|
|||
/* Homepage-style menu outline and waves */
|
||||
#menuWrap { position: relative; overflow: visible; }
|
||||
.menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; }
|
||||
|
||||
/* Hide menu outline on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.menu-outline {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Create a proper button container for mobile */
|
||||
#menuGrid {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; }
|
||||
.menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; }
|
||||
.menu-waves .wave:nth-child(2) { animation-delay: 0.3s; }
|
||||
|
|
@ -1541,27 +1584,31 @@
|
|||
});
|
||||
});
|
||||
|
||||
// Menu toggle functionality (homepage pattern)
|
||||
// Menu toggle functionality
|
||||
const menuToggle = document.getElementById("menuToggle");
|
||||
const navMenu = document.getElementById("navMenu");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuWrap = document.getElementById("menuWrap");
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
const menuGridMobile = document.getElementById("menuGridMobile");
|
||||
|
||||
if (menuToggle && navMenu && menuGrid) {
|
||||
if (menuToggle && navMenu) {
|
||||
let isMenuOpen = false;
|
||||
|
||||
menuToggle.addEventListener("click", () => {
|
||||
if (isMenuOpen) {
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
if (menuWrap) menuWrap.classList.remove("open");
|
||||
isMenuOpen = false;
|
||||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
if (menuWrap) menuWrap.classList.add("open");
|
||||
isMenuOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
navMenu.classList.add("hidden");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue