<!-- Tailwind CSS and Font Awesome -->
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
rel="stylesheet"
/>
</section>
<?php include 'includes/footer.php'; ?>
<!-- JavaScript -->
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute("href"));
if (target) {
target.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
});
});
// Intersection Observer for fade-in animations
const observerOptions = {
threshold: 0.1,
rootMargin: "0px 0px -50px 0px",
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.animationPlayState = "running";
}
});
}, observerOptions);
// Observe all fade-in elements
document.querySelectorAll(".fade-in").forEach((el) => {
el.style.animationPlayState = "paused";
observer.observe(el);
});
// Tool card interactions
document.querySelectorAll(".tool-card").forEach((card) => {
card.addEventListener("click", function () {
const toolName = this.querySelector("span").textContent;
console.log(`Clicked on ${toolName}`);
// You can add actual functionality here
});
});
// Add ripple effect to buttons
document.querySelectorAll("button").forEach((button) => {
button.addEventListener("click", function (e) {
const ripple = document.createElement("span");
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.width = ripple.style.height = size + "px";
ripple.style.left = x + "px";
ripple.style.top = y + "px";
ripple.style.position = "absolute";
ripple.style.borderRadius = "50%";
ripple.style.background = "rgba(255, 255, 255, 0.3)";
ripple.style.transform = "scale(0)";
ripple.style.animation = "ripple 0.6s linear";
ripple.style.pointerEvents = "none";
this.style.position = "relative";
this.style.overflow = "hidden";
this.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
});
});
// Add CSS for ripple animation
const style = document.createElement("style");
style.textContent = `
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
`;
document.head.appendChild(style);
// Header scroll effect
window.addEventListener("scroll", () => {
const nav = document.querySelector("nav");
if (window.scrollY > 10) {
nav.classList.add("shadow-xl");
} else {
nav.classList.remove("shadow-xl");
}
});
</script>
</body>
</html>