mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
fix: change menu nav names
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
1c9a335d26
commit
1d80addd7a
8 changed files with 2452 additions and 700 deletions
|
|
@ -175,11 +175,13 @@
|
|||
id="navMenu"
|
||||
>
|
||||
<div class="p-8 flex flex-col h-full">
|
||||
<!-- Logo -->
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-3 mb-12">
|
||||
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
|
||||
</div>
|
||||
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links - Inverted C Layout -->
|
||||
<nav class="flex-1 relative">
|
||||
|
|
@ -368,6 +370,47 @@
|
|||
>
|
||||
</a>
|
||||
|
||||
<!-- WHO - New position -->
|
||||
<a
|
||||
href="who.html"
|
||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.65s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
data-trans="crossfade"
|
||||
>
|
||||
<span class="md:hidden">WHO</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.65s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>W</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.675s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>H</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.7s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<!-- CONTACTS - More right -->
|
||||
<a
|
||||
href="contact.html"
|
||||
|
|
@ -462,7 +505,7 @@
|
|||
|
||||
<!-- Static Logo and Menu (copied from about.html) -->
|
||||
<div class="fixed top-6 left-8 z-40">
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<img
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
|
|
@ -472,7 +515,7 @@
|
|||
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
|
||||
>KH3</span
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Menu Toggle with Transparent Background -->
|
||||
|
|
@ -1153,6 +1196,35 @@
|
|||
window.location.reload();
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-scroll to content after 3 seconds
|
||||
setTimeout(() => {
|
||||
// Scroll just slightly to hint at content below (1.1 viewport heights)
|
||||
const targetScroll = window.innerHeight * 1.1;
|
||||
|
||||
// Create a smooth, gradual scroll animation
|
||||
const startScroll = window.pageYOffset;
|
||||
const distance = targetScroll - startScroll;
|
||||
const duration = 4000; // 4 seconds for slower, smoother animation
|
||||
let start = null;
|
||||
|
||||
function animateScroll(currentTime) {
|
||||
if (start === null) start = currentTime;
|
||||
const timeElapsed = currentTime - start;
|
||||
const progress = Math.min(timeElapsed / duration, 1);
|
||||
|
||||
// Easing function for smooth deceleration
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
|
||||
window.scrollTo(0, startScroll + distance * easeOutQuart);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animateScroll);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animateScroll);
|
||||
}, 3000);
|
||||
</script>
|
||||
<script src="js/main.js"></script>
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue