mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-10-16 21:41:47 +00:00
Compare commits
No commits in common. "9111542693a4d6535eb53e572a83b46a5afef4c6" and "1d80addd7a65584d71e126cc990a779485b8ecea" have entirely different histories.
9111542693
...
1d80addd7a
10 changed files with 79 additions and 106 deletions
63
about.html
63
about.html
|
|
@ -356,7 +356,7 @@
|
|||
<div class="fixed top-6 left-8 z-40">
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
src="assets/images/kh3_logo.png"
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
|
|
@ -370,7 +370,7 @@
|
|||
<!-- Menu Toggle with Transparent Background -->
|
||||
<div class="fixed top-6 right-8 z-40">
|
||||
<div
|
||||
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3 transition-transform duration-300"
|
||||
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3"
|
||||
id="menuToggle"
|
||||
>
|
||||
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
|
||||
|
|
@ -955,7 +955,7 @@
|
|||
<div class="text-center">
|
||||
<a href="index.html" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center">
|
||||
<img
|
||||
src="assets/images/kh3_logo.png"
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-16 h-16"
|
||||
/>
|
||||
|
|
@ -1435,21 +1435,8 @@
|
|||
|
||||
menuToggle.addEventListener("click", () => {
|
||||
if (isMenuOpen) {
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
// Transform back to full grid
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></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 transition-opacity duration-300"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
|
||||
`;
|
||||
menuToggle.style.transform = "scale(1)";
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
if (closeBtnEl) {
|
||||
closeBtnEl.remove();
|
||||
closeBtnEl = null;
|
||||
|
|
@ -1458,20 +1445,18 @@
|
|||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
// Transform to compressed state - only center 5 dots, corner dots disappear
|
||||
// Keep the grid icon as is, don't transform to X
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></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 opacity-0 transition-opacity duration-300"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></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>
|
||||
`;
|
||||
menuToggle.style.transform = "scale(0.8)";
|
||||
menuToggle.style.transition = "transform 0.3s ease";
|
||||
|
||||
// Place red X close button at the bottom of the menu panel
|
||||
closeBtnEl = document.createElement("button");
|
||||
|
|
@ -1486,19 +1471,6 @@
|
|||
navMenu.appendChild(closeBtnEl);
|
||||
closeBtnEl.addEventListener("click", () => {
|
||||
navMenu.classList.add("hidden");
|
||||
// Transform back to full grid
|
||||
menuGrid.innerHTML = `
|
||||
<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>
|
||||
`;
|
||||
menuGrid.style.transform = "scale(1)";
|
||||
if (closeBtnEl) {
|
||||
closeBtnEl.remove();
|
||||
closeBtnEl = null;
|
||||
|
|
@ -1513,19 +1485,6 @@
|
|||
document.addEventListener("click", (e) => {
|
||||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
navMenu.classList.add("hidden");
|
||||
// Transform back to full grid
|
||||
menuGrid.innerHTML = `
|
||||
<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>
|
||||
`;
|
||||
menuGrid.style.transform = "scale(1)";
|
||||
if (closeBtnEl) {
|
||||
closeBtnEl.remove();
|
||||
closeBtnEl = null;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
17
contact.html
17
contact.html
|
|
@ -359,7 +359,7 @@
|
|||
<div class="fixed top-6 left-8 z-40">
|
||||
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<img
|
||||
src="assets/images/kh3_logo.png"
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
|
|
@ -695,7 +695,7 @@
|
|||
>
|
||||
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<img
|
||||
src="assets/images/kh3_logo.png"
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
|
|
@ -892,19 +892,18 @@
|
|||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
// Transform to compressed state - only center 5 dots, corner dots disappear
|
||||
// Keep the grid icon as is, don't transform to X
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0"></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 opacity-0"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0"></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>
|
||||
`;
|
||||
menuGrid.style.transform = "scale(0.8)";
|
||||
|
||||
// Place red X close button at the bottom of the menu panel
|
||||
closeBtnEl = document.createElement("button");
|
||||
|
|
|
|||
25
index.html
25
index.html
|
|
@ -371,9 +371,13 @@
|
|||
href="index.html"
|
||||
class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
|
||||
<img
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-16 h-16"
|
||||
/>
|
||||
<span
|
||||
class="hidden sm:inline text-white text-2xl font-bold tracking-wider"
|
||||
class="hidden sm:inline text-white text-2xl font-bold tracking-wider animate-logo-glow"
|
||||
>KH3</span
|
||||
>
|
||||
</a>
|
||||
|
|
@ -570,7 +574,11 @@
|
|||
href="index.html"
|
||||
class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center"
|
||||
>
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
|
||||
<img
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-16 h-16"
|
||||
/>
|
||||
<span class="text-4xl font-bold tracking-wider">KH3</span>
|
||||
</a>
|
||||
<div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden">
|
||||
|
|
@ -624,6 +632,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Logo glow animation */
|
||||
@keyframes logoGlow {
|
||||
0%,
|
||||
100% {
|
||||
filter: drop-shadow(0 0 5px rgba(220, 38, 38, 0.3));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 20px rgba(220, 38, 38, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
/* Page transition animations */
|
||||
@keyframes staggerFadeOut {
|
||||
0% {
|
||||
|
|
|
|||
34
js/main.js
34
js/main.js
|
|
@ -27,7 +27,7 @@ function initNavigation() {
|
|||
if (isMenuOpen) {
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
// Transform back to full grid
|
||||
// Transform back to grid
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
|
|
@ -39,24 +39,16 @@ function initNavigation() {
|
|||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
`;
|
||||
menuGrid.style.transform = "scale(1)";
|
||||
isMenuOpen = false;
|
||||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
// Transform to compressed state - only center 5 dots, corner dots disappear
|
||||
// Transform to red X
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0"></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 opacity-0"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
|
||||
<svg class="w-6 h-6 text-kh3-red hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
`;
|
||||
menuGrid.style.transform = "scale(0.8)";
|
||||
isMenuOpen = true;
|
||||
}
|
||||
});
|
||||
|
|
@ -78,12 +70,12 @@ function initNavigation() {
|
|||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
`;
|
||||
isMenuOpen = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Close navigation when clicking on a link
|
||||
navLinks.forEach((link) => {
|
||||
link.addEventListener("click", function () {
|
||||
// Close navigation when clicking on a link
|
||||
navLinks.forEach((link) => {
|
||||
link.addEventListener("click", function () {
|
||||
navMenu.classList.add("hidden");
|
||||
// Transform back to grid
|
||||
menuGrid.innerHTML = `
|
||||
|
|
@ -99,10 +91,10 @@ function initNavigation() {
|
|||
`;
|
||||
isMenuOpen = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Close navigation with Escape key
|
||||
document.addEventListener("keydown", function (e) {
|
||||
// Close navigation with Escape key
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape" && !navMenu.classList.contains("hidden")) {
|
||||
navMenu.classList.add("hidden");
|
||||
// Transform back to grid
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
>KH3</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links - Inverted C Layout -->
|
||||
<nav class="flex-1 relative">
|
||||
|
|
@ -349,12 +349,12 @@
|
|||
>S</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Static Logo and Menu -->
|
||||
<div class="fixed top-6 left-8 z-40">
|
||||
|
|
@ -362,13 +362,17 @@
|
|||
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" />
|
||||
<img
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
<span
|
||||
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
|
||||
>KH3</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu Toggle with Transparent Background -->
|
||||
<div class="fixed top-6 right-8 z-40">
|
||||
|
|
@ -386,9 +390,9 @@
|
|||
<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>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="pt-20">
|
||||
|
|
@ -552,7 +556,7 @@
|
|||
id="modalCategory"
|
||||
class="text-kh3-red text-sm font-medium tracking-wider"
|
||||
></p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
id="closeModal"
|
||||
class="text-white/70 hover:text-white transition-colors duration-300"
|
||||
|
|
@ -571,7 +575,7 @@
|
|||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body -->
|
||||
<div class="flex flex-col lg:flex-row h-full">
|
||||
|
|
@ -593,8 +597,8 @@
|
|||
>
|
||||
<div id="imageDots" class="flex space-x-2">
|
||||
<!-- Dots will be generated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Previous/Next Buttons -->
|
||||
<button
|
||||
|
|
@ -640,9 +644,9 @@
|
|||
>
|
||||
<span id="imageCounter">1</span> /
|
||||
<span id="totalImages">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Details Section -->
|
||||
<div
|
||||
|
|
@ -661,7 +665,7 @@
|
|||
id="modalDescription"
|
||||
class="text-white/80 text-sm leading-relaxed"
|
||||
></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Details -->
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@
|
|||
<!-- 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-20 h-20" />
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -507,9 +507,9 @@
|
|||
<div class="fixed top-6 left-8 z-40">
|
||||
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<img
|
||||
src="assets/images/kh3_logo.png"
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-20 h-20"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
<span
|
||||
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
|
||||
|
|
|
|||
4
who.html
4
who.html
|
|
@ -356,7 +356,7 @@
|
|||
<div class="fixed top-6 left-8 z-40">
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
src="assets/images/kh3_logo.png"
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-12 h-12"
|
||||
/>
|
||||
|
|
@ -1052,7 +1052,7 @@
|
|||
<div class="text-center">
|
||||
<a href="index.html" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center">
|
||||
<img
|
||||
src="assets/images/kh3_logo.png"
|
||||
src="assets/images/kh3_logo_dark.png"
|
||||
alt="KH3"
|
||||
class="w-16 h-16"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue