Skip to content

Commit 11c8b16

Browse files
update website
1 parent e07a47b commit 11c8b16

146 files changed

Lines changed: 18100 additions & 180 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

404.html

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,5 +210,124 @@ <h2>Page Not Found</h2>
210210
<button id="back-to-top" aria-label="Back to Top">Top</button>
211211

212212

213+
214+
<script>
215+
document.addEventListener("DOMContentLoaded", function () {
216+
if (window.innerWidth < 768) return;
217+
218+
const intro = document.querySelector("#right-intro");
219+
if (!intro) return;
220+
221+
const tl = gsap.timeline();
222+
let isClosing = false; // Flag to prevent double-triggering the exit
223+
224+
// --- 1. DEFINE THE EXIT FUNCTION ---
225+
const closeIntro = () => {
226+
if (isClosing) return;
227+
isClosing = true;
228+
229+
// Kill the main timeline so it doesn't keep running in the background
230+
tl.kill();
231+
232+
// Create a dedicated exit timeline for a fast, responsive feel
233+
const exitTl = gsap.timeline();
234+
235+
/* ROBOT FAST REVEAL & RUN */
236+
exitTl.to(".robot-runner", { opacity: 1, duration: 0.2 });
237+
exitTl.to(".robot-runner", {
238+
x: 400,
239+
duration: 0.8,
240+
ease: "power2.in"
241+
}, "-=0.1");
242+
243+
/* PANEL SLIDE-OUT */
244+
exitTl.to("#right-intro", {
245+
duration: 0.8,
246+
transform: "translateX(100%)",
247+
ease: "power3.inOut",
248+
onComplete: () => {
249+
intro.style.display = "none";
250+
// Remove scroll listener once closed
251+
window.removeEventListener("scroll", handleScroll);
252+
}
253+
}, "-=0.6");
254+
};
255+
256+
// --- 2. THE SCROLL LISTENER ---
257+
const handleScroll = () => {
258+
if (window.scrollY > 20) { // Trigger after 20px of scrolling
259+
closeIntro();
260+
}
261+
};
262+
window.addEventListener("scroll", handleScroll);
263+
264+
// --- 3. ORIGINAL ANIMATION SEQUENCE ---
265+
/* PANEL SLIDE-IN */
266+
tl.to("#right-intro", {
267+
duration: 0.8,
268+
transform: "translateX(0%)",
269+
ease: "power3.out"
270+
});
271+
272+
/* PARTICLES */
273+
for (let i = 0; i < 20; i++) {
274+
const p = document.createElement("div");
275+
p.className = "particle";
276+
p.style.position = "absolute";
277+
p.style.width = "4px";
278+
p.style.height = "4px";
279+
p.style.background = "rgba(0,174,239,0.35)";
280+
p.style.borderRadius = "50%";
281+
p.style.left = Math.random() * 100 + "%";
282+
p.style.top = "100%";
283+
document.querySelector(".intro-particles").appendChild(p);
284+
285+
gsap.to(p, {
286+
y: -window.innerHeight - 100,
287+
duration: 4 + Math.random() * 4,
288+
delay: Math.random() * 2,
289+
repeat: -1,
290+
ease: "none"
291+
});
292+
}
293+
294+
/* SIGNAL LINE & PULSE */
295+
tl.to(".signal-main", { height: "60%", duration: 0.8, ease: "power2.out" })
296+
.to(".loading-dots", { opacity: 1, duration: 0.3 })
297+
.to(".pulse", { opacity: 1, scale: 1.4, duration: 0.3, stagger: 0.15 })
298+
.to(".pulse", { scale: 0.6, opacity: 0.4, duration: 0.3, stagger: 0.15 })
299+
.to(".loading-dots", { opacity: 0, duration: 0.3 });
300+
301+
/* TEXT REVEAL */
302+
tl.to(".t1", { opacity: 1, x: 0, duration: 0.6 })
303+
.to(".t2", { opacity: 1, x: 0, duration: 0.6 })
304+
.to(".t3", { opacity: 1, x: 0, duration: 0.6 })
305+
.to(".t4", { opacity: 1, x: 0, duration: 0.6 });
306+
307+
/* ROBOT ARM/LEG LOOPS (Independent of timeline) */
308+
const robotParts = [
309+
{ el: ".arm-left", r: 30 }, { el: ".arm-right", r: -30 },
310+
{ el: ".leg-left", r: -30 }, { el: ".leg-right", r: 30 }
311+
];
312+
robotParts.forEach(part => {
313+
gsap.to(part.el, { rotation: part.r, yoyo: true, repeat: -1, duration: 0.2, ease: "power1.inOut" });
314+
});
315+
316+
// --- 4. AUTO-EXIT (If user doesn't scroll) ---
317+
tl.to(".robot-runner", { opacity: 1, duration: 0.3, delay: 5 });
318+
tl.to(".robot-runner", { x: 400, duration: 1.2, ease: "power2.inOut" }, "-=0.2");
319+
tl.to("#right-intro", {
320+
duration: 1,
321+
transform: "translateX(100%)",
322+
ease: "power3.inOut",
323+
onComplete: () => {
324+
if (!isClosing) { // Only hide if scroll didn't already trigger it
325+
intro.style.display = "none";
326+
window.removeEventListener("scroll", handleScroll);
327+
}
328+
}
329+
}, "-=0.6");
330+
});
331+
</script>
213332
</body>
214333
</html>

about.html

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -521,5 +521,124 @@ <h2>Ready to Transform Your Business?</h2>
521521
};
522522
</script>
523523

524+
525+
<script>
526+
document.addEventListener("DOMContentLoaded", function () {
527+
if (window.innerWidth < 768) return;
528+
529+
const intro = document.querySelector("#right-intro");
530+
if (!intro) return;
531+
532+
const tl = gsap.timeline();
533+
let isClosing = false; // Flag to prevent double-triggering the exit
534+
535+
// --- 1. DEFINE THE EXIT FUNCTION ---
536+
const closeIntro = () => {
537+
if (isClosing) return;
538+
isClosing = true;
539+
540+
// Kill the main timeline so it doesn't keep running in the background
541+
tl.kill();
542+
543+
// Create a dedicated exit timeline for a fast, responsive feel
544+
const exitTl = gsap.timeline();
545+
546+
/* ROBOT FAST REVEAL & RUN */
547+
exitTl.to(".robot-runner", { opacity: 1, duration: 0.2 });
548+
exitTl.to(".robot-runner", {
549+
x: 400,
550+
duration: 0.8,
551+
ease: "power2.in"
552+
}, "-=0.1");
553+
554+
/* PANEL SLIDE-OUT */
555+
exitTl.to("#right-intro", {
556+
duration: 0.8,
557+
transform: "translateX(100%)",
558+
ease: "power3.inOut",
559+
onComplete: () => {
560+
intro.style.display = "none";
561+
// Remove scroll listener once closed
562+
window.removeEventListener("scroll", handleScroll);
563+
}
564+
}, "-=0.6");
565+
};
566+
567+
// --- 2. THE SCROLL LISTENER ---
568+
const handleScroll = () => {
569+
if (window.scrollY > 20) { // Trigger after 20px of scrolling
570+
closeIntro();
571+
}
572+
};
573+
window.addEventListener("scroll", handleScroll);
574+
575+
// --- 3. ORIGINAL ANIMATION SEQUENCE ---
576+
/* PANEL SLIDE-IN */
577+
tl.to("#right-intro", {
578+
duration: 0.8,
579+
transform: "translateX(0%)",
580+
ease: "power3.out"
581+
});
582+
583+
/* PARTICLES */
584+
for (let i = 0; i < 20; i++) {
585+
const p = document.createElement("div");
586+
p.className = "particle";
587+
p.style.position = "absolute";
588+
p.style.width = "4px";
589+
p.style.height = "4px";
590+
p.style.background = "rgba(0,174,239,0.35)";
591+
p.style.borderRadius = "50%";
592+
p.style.left = Math.random() * 100 + "%";
593+
p.style.top = "100%";
594+
document.querySelector(".intro-particles").appendChild(p);
595+
596+
gsap.to(p, {
597+
y: -window.innerHeight - 100,
598+
duration: 4 + Math.random() * 4,
599+
delay: Math.random() * 2,
600+
repeat: -1,
601+
ease: "none"
602+
});
603+
}
604+
605+
/* SIGNAL LINE & PULSE */
606+
tl.to(".signal-main", { height: "60%", duration: 0.8, ease: "power2.out" })
607+
.to(".loading-dots", { opacity: 1, duration: 0.3 })
608+
.to(".pulse", { opacity: 1, scale: 1.4, duration: 0.3, stagger: 0.15 })
609+
.to(".pulse", { scale: 0.6, opacity: 0.4, duration: 0.3, stagger: 0.15 })
610+
.to(".loading-dots", { opacity: 0, duration: 0.3 });
611+
612+
/* TEXT REVEAL */
613+
tl.to(".t1", { opacity: 1, x: 0, duration: 0.6 })
614+
.to(".t2", { opacity: 1, x: 0, duration: 0.6 })
615+
.to(".t3", { opacity: 1, x: 0, duration: 0.6 })
616+
.to(".t4", { opacity: 1, x: 0, duration: 0.6 });
617+
618+
/* ROBOT ARM/LEG LOOPS (Independent of timeline) */
619+
const robotParts = [
620+
{ el: ".arm-left", r: 30 }, { el: ".arm-right", r: -30 },
621+
{ el: ".leg-left", r: -30 }, { el: ".leg-right", r: 30 }
622+
];
623+
robotParts.forEach(part => {
624+
gsap.to(part.el, { rotation: part.r, yoyo: true, repeat: -1, duration: 0.2, ease: "power1.inOut" });
625+
});
626+
627+
// --- 4. AUTO-EXIT (If user doesn't scroll) ---
628+
tl.to(".robot-runner", { opacity: 1, duration: 0.3, delay: 5 });
629+
tl.to(".robot-runner", { x: 400, duration: 1.2, ease: "power2.inOut" }, "-=0.2");
630+
tl.to("#right-intro", {
631+
duration: 1,
632+
transform: "translateX(100%)",
633+
ease: "power3.inOut",
634+
onComplete: () => {
635+
if (!isClosing) { // Only hide if scroll didn't already trigger it
636+
intro.style.display = "none";
637+
window.removeEventListener("scroll", handleScroll);
638+
}
639+
}
640+
}, "-=0.6");
641+
});
642+
</script>
524643
</body>
525644
</html>

ar/404.html

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,5 +210,124 @@ <h2>&#x627;&#x644;&#x635;&#x641;&#x62D;&#x629; &#x63A;&#x64A;&#x631; &#x645;&#x6
210210
<button id="back-to-top" aria-label="Back to Top">&#x623;&#x639;&#x644;&#x649;</button>
211211

212212

213+
214+
<script>
215+
document.addEventListener("DOMContentLoaded", function () {
216+
if (window.innerWidth < 768) return;
217+
218+
const intro = document.querySelector("#right-intro");
219+
if (!intro) return;
220+
221+
const tl = gsap.timeline();
222+
let isClosing = false; // Flag to prevent double-triggering the exit
223+
224+
// --- 1. DEFINE THE EXIT FUNCTION ---
225+
const closeIntro = () => {
226+
if (isClosing) return;
227+
isClosing = true;
228+
229+
// Kill the main timeline so it doesn't keep running in the background
230+
tl.kill();
231+
232+
// Create a dedicated exit timeline for a fast, responsive feel
233+
const exitTl = gsap.timeline();
234+
235+
/* ROBOT FAST REVEAL & RUN */
236+
exitTl.to(".robot-runner", { opacity: 1, duration: 0.2 });
237+
exitTl.to(".robot-runner", {
238+
x: 400,
239+
duration: 0.8,
240+
ease: "power2.in"
241+
}, "-=0.1");
242+
243+
/* PANEL SLIDE-OUT */
244+
exitTl.to("#right-intro", {
245+
duration: 0.8,
246+
transform: "translateX(100%)",
247+
ease: "power3.inOut",
248+
onComplete: () => {
249+
intro.style.display = "none";
250+
// Remove scroll listener once closed
251+
window.removeEventListener("scroll", handleScroll);
252+
}
253+
}, "-=0.6");
254+
};
255+
256+
// --- 2. THE SCROLL LISTENER ---
257+
const handleScroll = () => {
258+
if (window.scrollY > 20) { // Trigger after 20px of scrolling
259+
closeIntro();
260+
}
261+
};
262+
window.addEventListener("scroll", handleScroll);
263+
264+
// --- 3. ORIGINAL ANIMATION SEQUENCE ---
265+
/* PANEL SLIDE-IN */
266+
tl.to("#right-intro", {
267+
duration: 0.8,
268+
transform: "translateX(0%)",
269+
ease: "power3.out"
270+
});
271+
272+
/* PARTICLES */
273+
for (let i = 0; i < 20; i++) {
274+
const p = document.createElement("div");
275+
p.className = "particle";
276+
p.style.position = "absolute";
277+
p.style.width = "4px";
278+
p.style.height = "4px";
279+
p.style.background = "rgba(0,174,239,0.35)";
280+
p.style.borderRadius = "50%";
281+
p.style.left = Math.random() * 100 + "%";
282+
p.style.top = "100%";
283+
document.querySelector(".intro-particles").appendChild(p);
284+
285+
gsap.to(p, {
286+
y: -window.innerHeight - 100,
287+
duration: 4 + Math.random() * 4,
288+
delay: Math.random() * 2,
289+
repeat: -1,
290+
ease: "none"
291+
});
292+
}
293+
294+
/* SIGNAL LINE & PULSE */
295+
tl.to(".signal-main", { height: "60%", duration: 0.8, ease: "power2.out" })
296+
.to(".loading-dots", { opacity: 1, duration: 0.3 })
297+
.to(".pulse", { opacity: 1, scale: 1.4, duration: 0.3, stagger: 0.15 })
298+
.to(".pulse", { scale: 0.6, opacity: 0.4, duration: 0.3, stagger: 0.15 })
299+
.to(".loading-dots", { opacity: 0, duration: 0.3 });
300+
301+
/* TEXT REVEAL */
302+
tl.to(".t1", { opacity: 1, x: 0, duration: 0.6 })
303+
.to(".t2", { opacity: 1, x: 0, duration: 0.6 })
304+
.to(".t3", { opacity: 1, x: 0, duration: 0.6 })
305+
.to(".t4", { opacity: 1, x: 0, duration: 0.6 });
306+
307+
/* ROBOT ARM/LEG LOOPS (Independent of timeline) */
308+
const robotParts = [
309+
{ el: ".arm-left", r: 30 }, { el: ".arm-right", r: -30 },
310+
{ el: ".leg-left", r: -30 }, { el: ".leg-right", r: 30 }
311+
];
312+
robotParts.forEach(part => {
313+
gsap.to(part.el, { rotation: part.r, yoyo: true, repeat: -1, duration: 0.2, ease: "power1.inOut" });
314+
});
315+
316+
// --- 4. AUTO-EXIT (If user doesn't scroll) ---
317+
tl.to(".robot-runner", { opacity: 1, duration: 0.3, delay: 5 });
318+
tl.to(".robot-runner", { x: 400, duration: 1.2, ease: "power2.inOut" }, "-=0.2");
319+
tl.to("#right-intro", {
320+
duration: 1,
321+
transform: "translateX(100%)",
322+
ease: "power3.inOut",
323+
onComplete: () => {
324+
if (!isClosing) { // Only hide if scroll didn't already trigger it
325+
intro.style.display = "none";
326+
window.removeEventListener("scroll", handleScroll);
327+
}
328+
}
329+
}, "-=0.6");
330+
});
331+
</script>
213332
</body>
214333
</html>

0 commit comments

Comments
 (0)