Gameur/website
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
KIRITO_KMA 2026-02-06 18:36:03 +01:00
commit c38fde40b0
33 changed files with 7319 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

171
assets/js/home.js Normal file
View file

@ -0,0 +1,171 @@
// Home page specific JS: team carousel + modal
document.addEventListener('DOMContentLoaded', () => {
// Fetch team data and render
fetch('assets/data/team.json')
.then(res => res.json())
.then(members => {
initTeamSection(members);
})
.catch(err => {
console.error('Failed to load team data', err);
});
function initTeamSection(members) {
const carousel = document.getElementById('team-carousel');
const dotsContainer = document.getElementById('carousel-dots');
const prevBtn = document.getElementById('carousel-prev');
const nextBtn = document.getElementById('carousel-next');
// Render cards
carousel.innerHTML = members.map((m, i) => `
<div class="team-card" data-member="${i}">
<div class="team-avatar">
<div class="team-avatar-inner">${m.avatar}</div>
</div>
<h4>${m.name}</h4>
<p class="team-role">${m.role}</p>
<p class="team-desc">${(m.bio || '').split('.').shift()}.</p>
</div>
`).join('');
// Carousel logic
const cardsContainer = carousel; // the track
let cards = carousel.querySelectorAll('.team-card');
let currentIndex = 0;
let cardsPerView = 3;
let autoPlayInterval;
function updateCardsPerView() {
if (window.innerWidth <= 768) cardsPerView = 1;
else if (window.innerWidth <= 1024) cardsPerView = 2;
else cardsPerView = 3;
}
function createDots() {
dotsContainer.innerHTML = '';
const totalDots = Math.max(1, Math.ceil(cards.length / cardsPerView));
for (let i = 0; i < totalDots; i++) {
const dot = document.createElement('div');
dot.classList.add('carousel-dot');
if (i === 0) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(i));
dotsContainer.appendChild(dot);
}
}
function updateCarousel() {
cards = carousel.querySelectorAll('.team-card');
if (cards.length === 0) return;
const cardStyle = window.getComputedStyle(cards[0]);
const gap = 32; // matches previous implementation
const cardWidth = cards[0].offsetWidth + gap;
carousel.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
const dots = dotsContainer.querySelectorAll('.carousel-dot');
const activeDotIndex = Math.floor(currentIndex / cardsPerView);
dots.forEach((dot, i) => dot.classList.toggle('active', i === activeDotIndex));
}
function goToSlide(dotIndex) {
currentIndex = dotIndex * cardsPerView;
if (currentIndex > cards.length - cardsPerView) currentIndex = Math.max(0, cards.length - cardsPerView);
updateCarousel();
resetAutoPlay();
}
function nextSlide() {
currentIndex++;
if (currentIndex > cards.length - cardsPerView) currentIndex = 0;
updateCarousel();
}
function prevSlide() {
currentIndex--;
if (currentIndex < 0) currentIndex = Math.max(0, cards.length - cardsPerView);
updateCarousel();
}
function startAutoPlay() {
clearInterval(autoPlayInterval);
autoPlayInterval = setInterval(nextSlide, 4000);
}
function resetAutoPlay() {
clearInterval(autoPlayInterval);
startAutoPlay();
}
prevBtn && prevBtn.addEventListener('click', () => { prevSlide(); resetAutoPlay(); });
nextBtn && nextBtn.addEventListener('click', () => { nextSlide(); resetAutoPlay(); });
carousel.addEventListener('mouseenter', () => clearInterval(autoPlayInterval));
carousel.addEventListener('mouseleave', startAutoPlay);
updateCardsPerView();
createDots();
startAutoPlay();
window.addEventListener('resize', () => {
updateCardsPerView();
createDots();
currentIndex = 0;
updateCarousel();
});
// Modal logic
const modalOverlay = document.getElementById('team-modal-overlay');
const modalClose = document.getElementById('team-modal-close');
const modalAvatar = document.getElementById('modal-avatar');
const modalName = document.getElementById('modal-name');
const modalRole = document.getElementById('modal-role');
const modalBio = document.getElementById('modal-bio');
const modalStats = document.getElementById('modal-stats');
const modalSkills = document.getElementById('modal-skills');
const modalSocial = document.getElementById('modal-social');
function openMemberModal(index) {
const member = members[index];
if (!member) return;
modalAvatar.textContent = member.avatar || member.name.charAt(0);
modalName.textContent = member.name;
modalRole.textContent = member.role;
modalBio.textContent = member.bio;
modalStats.innerHTML = (member.stats || []).map(stat => `
<div class="team-modal-stat">
<div class="team-modal-stat-value">${stat.value}</div>
<div class="team-modal-stat-label">${stat.label}</div>
</div>
`).join('');
modalSkills.innerHTML = (member.skills || []).map(s => `<span class="team-modal-skill">${s}</span>`).join('');
modalSocial.innerHTML = `
<a href="#" aria-label="Discord"><i data-feather="message-circle"></i></a>
<a href="#" aria-label="Twitter"><i data-feather="twitter"></i></a>
`;
if (window.feather && feather.replace) feather.replace();
modalOverlay.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeMemberModal() {
modalOverlay.classList.remove('active');
document.body.style.overflow = '';
}
// Attach click listeners to generated cards
carousel.querySelectorAll('.team-card').forEach(card => {
card.addEventListener('click', () => {
const idx = parseInt(card.dataset.member, 10);
openMemberModal(idx);
});
});
modalClose && modalClose.addEventListener('click', closeMemberModal);
modalOverlay && modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) closeMemberModal(); });
document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modalOverlay.classList.contains('active')) closeMemberModal(); });
}
});

393
assets/js/main.js Normal file
View file

@ -0,0 +1,393 @@
// OmégaKube - shared scripts
// Feather icons loader (centralized)
// loads https://unpkg.com/feather-icons when needed and exposes window.ensureFeather()
const FEATHER_URL = 'https://unpkg.com/feather-icons';
function ensureFeather() {
if (window.__featherLoading) return window.__featherLoading;
if (window.feather && window.feather.replace) return Promise.resolve(window.feather);
window.__featherLoading = new Promise((resolve, reject) => {
const s = document.createElement('script');
s.src = FEATHER_URL;
s.async = true;
s.onload = () => resolve(window.feather);
s.onerror = () => reject(new Error('Failed to load feather-icons'));
document.head.appendChild(s);
});
return window.__featherLoading;
}
window.ensureFeather = ensureFeather;
document.addEventListener('DOMContentLoaded', async () => {
// ensure feather icons are available and replace icons in document
try { await ensureFeather(); if (window.feather && feather.replace) try { feather.replace(); } catch(e) {} } catch (e) {}
// Load HTML includes (components header/footer) and fix relative paths when necessary
async function loadIncludes() {
const includeSelector = '[data-include]';
const nodes = Array.from(document.querySelectorAll(includeSelector));
if (!nodes.length) return;
await Promise.all(nodes.map(async el => {
const url = el.getAttribute('data-include');
try {
const res = await fetch(url);
if (!res.ok) throw new Error(res.statusText);
const text = await res.text();
const template = document.createElement('template');
template.innerHTML = text;
const fragment = template.content;
// adjust relative paths for assets and page links when included from /pages/
fragment.querySelectorAll('[href], [src]').forEach(node => {
['href','src'].forEach(attr => {
if (!node.hasAttribute(attr)) return;
const original = node.getAttribute(attr);
// leave absolute URLs and anchors untouched
if (/^(https?:|\/|#)/.test(original)) return;
// compute useful bases
const includeUrl = new URL(url, document.baseURI);
const includeDir = includeUrl.pathname.substring(0, includeUrl.pathname.lastIndexOf('/') + 1);
const docUrl = new URL(document.location.href);
const docDir = docUrl.pathname.substring(0, docUrl.pathname.lastIndexOf('/') + 1);
// find common prefix between include location and current document to infer site root
const includeParts = includeDir.split('/');
const docParts = docDir.split('/');
let i = 0;
while (i < includeParts.length && i < docParts.length && includeParts[i] === docParts[i]) i++;
const baseRoot = includeParts.slice(0, i).join('/') || '/';
let newVal;
if (original.startsWith('./') || original.startsWith('../')) {
// explicit relative paths should resolve relative to the include file
const resolved = new URL(original, includeUrl);
newVal = resolved.pathname + resolved.search + resolved.hash;
} else {
// treat plain paths (e.g. "assets/..." or "pages/...") as site-root relative
newVal = (baseRoot.endsWith('/') ? baseRoot : baseRoot + '/') + original;
}
node.setAttribute(attr, newVal);
});
});
el.replaceWith(fragment);
} catch (err) {
console.error('Failed to load include', url, err);
}
}));
if (typeof ensureFeather === 'function') {
ensureFeather().then(() => { try { if (window.feather && feather.replace) feather.replace(); } catch (e) {} }).catch(()=>{});
} else if (window.feather && feather.replace) {
try { feather.replace(); } catch (e) {}
}
}
// wait for includes to be loaded so subsequent initialization can bind to elements inside them
await loadIncludes();
const html = document.documentElement;
function getPreferredTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) return savedTheme;
return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
}
// Apply preferred theme
try {
html.setAttribute('data-theme', getPreferredTheme());
} catch (e) {}
// Theme toggle (robust)
const themeToggle = document.getElementById('theme-toggle');
if (themeToggle) {
// sync aria state
themeToggle.setAttribute('aria-pressed', html.getAttribute('data-theme') === 'dark' ? 'false' : 'true');
themeToggle.addEventListener('click', () => {
const currentTheme = html.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
themeToggle.setAttribute('aria-pressed', newTheme === 'dark' ? 'false' : 'true');
});
}
// Navbar scroll effect
const navbar = document.getElementById('navbar');
function updateNavbarOnScroll() {
if (!navbar) return;
navbar.classList.toggle('scrolled', window.scrollY > 50);
}
window.addEventListener('scroll', updateNavbarOnScroll);
window.addEventListener('load', updateNavbarOnScroll);
// Mobile menu
const mobileToggle = document.getElementById('mobile-toggle');
const navLinks = document.getElementById('nav-links');
// mobile menu initialization (debug logs removed)
// create a toggle function that is safe even if elements are added later
const toggleMenu = () => {
const mt = document.getElementById('mobile-toggle');
const nl = document.getElementById('nav-links');
// console.log('[DEBUG] toggleMenu called', { mt: !!mt, nl: !!nl, mtClass: mt ? mt.className : null, nlClass: nl ? nl.className : null });
if (!mt || !nl) {
// elements missing: abort toggle
// console.log('[DEBUG] toggleMenu aborted: missing elements', { mt, nl });
return;
}
mt.classList.toggle('active');
nl.classList.toggle('active');
// console.log('[DEBUG] toggleMenu toggled', { mtClass: mt.className, nlClass: nl.className });
const expanded = nl.classList.contains('active') ? 'true' : 'false';
mt.setAttribute('aria-expanded', expanded);
};
// |||||||||||||| ça fait buguer le menu mobile ||||||||||||||
// direct binding if elements exist
// if (mobileToggle && navLinks) {
// if (!mobileToggle.hasAttribute('tabindex')) mobileToggle.setAttribute('tabindex', '0');
// mobileToggle.setAttribute('aria-expanded', navLinks.classList.contains('active') ? 'true' : 'false');
// mobileToggle.addEventListener('click', (e) => {
// console.log('[DEBUG] mobileToggle click handler fired', e.target, e);
// e.preventDefault();
// toggleMenu();
// });
// mobileToggle.addEventListener('keydown', (e) => {
// if (e.key === 'Enter' || e.key === ' ') {
// console.log('[DEBUG] mobileToggle keydown:', e.key);
// e.preventDefault();
// toggleMenu();
// }
// });
// navLinks.querySelectorAll('a').forEach(link => {
// link.addEventListener('click', () => {
// console.log('[DEBUG] nav link clicked in mobile menu', link.getAttribute('href'));
// // collapse on link click
// const mt = document.getElementById('mobile-toggle');
// const nl = document.getElementById('nav-links');
// if (mt && nl) {
// mt.classList.remove('active');
// nl.classList.remove('active');
// mt.setAttribute('aria-expanded', 'false');
// }
// });
// });
// }
// Global delegation: catch clicks anywhere on page for '#mobile-toggle' (works even if element is replaced)
document.addEventListener('click', (e) => {
const mt = e.target.closest ? e.target.closest('#mobile-toggle') : null;
if (mt) {
// console.log('[DEBUG] delegated click caught for #mobile-toggle', e.target);
e.preventDefault();
toggleMenu();
}
});
// expose helper for console debugging
window.toggleMobileMenu = toggleMenu;
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (!href || href === '#') return;
const target = document.querySelector(href);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Highlight active nav link based on current URL
function normalizePath(path) {
if (!path) return '/';
// treat both '/' and '/index.html' as root
if (path.endsWith('index.html')) {
const p = path.slice(0, -'index.html'.length);
return p === '' ? '/' : p;
}
return path.endsWith('/') ? path : path;
}
function setActiveNavLink() {
const links = document.querySelectorAll('#nav-links a[href]');
if (!links.length) return;
const currentPath = normalizePath(window.location.pathname);
const currentHash = window.location.hash || '';
let bestMatch = null;
let bestScore = -1;
links.forEach(link => {
const href = link.getAttribute('href');
let linkUrl;
try {
linkUrl = new URL(href, document.location.href);
} catch (e) {
return;
}
const linkPath = normalizePath(linkUrl.pathname);
const linkHash = linkUrl.hash || '';
let score = 0;
if (linkPath === currentPath) score += 2;
if (linkHash && linkHash === currentHash) score += 4;
// Prefer exact hash matches, then exact path matches
if (score > bestScore) {
bestScore = score;
bestMatch = link;
}
});
// Fallback: if on root (/) and there is an index link, pick it
if (!bestMatch) {
links.forEach(link => {
if (!bestMatch && /index\.html$|\/$/.test(link.getAttribute('href') || '')) {
bestMatch = link;
}
});
}
links.forEach(l => { l.classList.remove('active'); l.removeAttribute('aria-current'); });
if (bestMatch) { bestMatch.classList.add('active'); bestMatch.setAttribute('aria-current', 'page'); }
}
// initialize and listen for navigation/hash changes
setActiveNavLink();
window.addEventListener('hashchange', setActiveNavLink);
window.addEventListener('popstate', setActiveNavLink);
// Home page: observe sections so #apropos and #contact become active when visible,
// and revert to "Accueil" when neither section is in view.
let homeSectionObserver = null;
let homeVisibility = {};
function initHomeSectionObserver() {
// clean existing observer
if (homeSectionObserver) {
homeSectionObserver.disconnect();
homeSectionObserver = null;
homeVisibility = {};
}
// Instead of requiring a strict '/' path, detect whether the current document
// actually contains any sections referenced by nav links (e.g. #apropos, #contact).
const links = Array.from(document.querySelectorAll('#nav-links a[href]'));
const sectionLinks = links.filter(link => {
try {
const u = new URL(link.getAttribute('href'), document.location.href);
if (!u.hash) return false;
return !!document.querySelector(u.hash);
} catch (e) {
return false;
}
});
if (!sectionLinks.length) return;
const sections = sectionLinks.map(link => {
const hash = new URL(link.getAttribute('href'), document.location.href).hash;
const el = document.querySelector(hash);
return el ? { id: el.id, el, link } : null;
}).filter(Boolean);
if (!sections.length) return;
// setup observer
homeSectionObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
homeVisibility[entry.target.id] = entry.intersectionRatio || 0;
});
// pick the section with highest intersection ratio
let bestId = null; let bestRatio = 0;
Object.entries(homeVisibility).forEach(([id, ratio]) => {
if (ratio > bestRatio) { bestRatio = ratio; bestId = id; }
});
const navLinks = Array.from(document.querySelectorAll('#nav-links a[href]'));
// if a section is sufficiently visible, activate its link
if (bestId && bestRatio > 0.15) {
const targetLink = navLinks.find(l => {
try {
return new URL(l.getAttribute('href'), document.location.href).hash === '#' + bestId;
} catch (e) { return false; }
});
if (targetLink) {
navLinks.forEach(l => { l.classList.remove('active'); l.removeAttribute('aria-current'); });
targetLink.classList.add('active');
targetLink.setAttribute('aria-current', 'page');
return;
}
}
// fallback: set Accueil active when no section is visible
const indexLink = Array.from(navLinks).find(l => /index\.html$|\/$/.test(l.getAttribute('href') || ''));
navLinks.forEach(l => { l.classList.remove('active'); l.removeAttribute('aria-current'); });
if (indexLink) { indexLink.classList.add('active'); indexLink.setAttribute('aria-current', 'page'); }
}, { root: null, threshold: [0, 0.15, 0.3, 0.6] });
sections.forEach(s => {
homeVisibility[s.id] = 0;
homeSectionObserver.observe(s.el);
});
}
// initialize observer on load and update when navigation changes
initHomeSectionObserver();
window.addEventListener('resize', () => { if (homeSectionObserver) initHomeSectionObserver(); });
// re-init observer when URL path changes (i.e., leave/enter index)
const originalSetActive = setActiveNavLink;
function wrappedSetActive() {
// if leaving index, disconnect observer
const path = normalizePath(window.location.pathname);
if (path !== '/') {
if (homeSectionObserver) { homeSectionObserver.disconnect(); homeSectionObserver = null; homeVisibility = {}; }
originalSetActive();
return;
}
// on index, ensure observer is active and let it control the highlight where possible
initHomeSectionObserver();
originalSetActive();
}
// replace handlers so navigation updates use our wrapped variant
window.removeEventListener('hashchange', setActiveNavLink);
window.removeEventListener('popstate', setActiveNavLink);
window.addEventListener('hashchange', wrappedSetActive);
window.addEventListener('popstate', wrappedSetActive);
// Reveal on scroll
const revealElements = document.querySelectorAll('.reveal');
function revealOnScroll() {
if (!revealElements.length) return;
revealElements.forEach(el => {
const elementTop = el.getBoundingClientRect().top;
if (elementTop < window.innerHeight - 100) {
el.classList.add('active');
}
});
}
window.addEventListener('scroll', revealOnScroll);
window.addEventListener('load', revealOnScroll);
// Contact form (if exists)
const contactForm = document.getElementById('contact-form');
if (contactForm) {
contactForm.addEventListener('submit', function (e) {
e.preventDefault();
alert('Merci pour votre message ! Nous vous répondrons très bientôt.');
this.reset();
});
}
});

209
assets/js/pages/404.js Normal file
View file

@ -0,0 +1,209 @@
feather.replace();
// Particles
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 30; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 10 + 's';
particle.style.animationDuration = (Math.random() * 5 + 8) + 's';
particle.style.width = (Math.random() * 4 + 2) + 'px';
particle.style.height = particle.style.width;
particlesContainer.appendChild(particle);
}
// Easter Egg: Konami Code (desktop) ou 10 taps (mobile)
const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
let konamiIndex = 0;
let tapCount = 0;
let tapTimer = null;
const REQUIRED_TAPS = 10;
const errorCodeEl = document.querySelector('.error-code');
// Desktop: Konami Code
document.addEventListener('keydown', (e) => {
if (e.key === konamiCode[konamiIndex]) {
konamiIndex++;
if (konamiIndex === konamiCode.length) {
startPortalTransition();
konamiIndex = 0;
}
} else {
konamiIndex = 0;
}
});
// Mobile: 10 taps
function handleTap(e) {
if (e.type === 'touchend') e.preventDefault();
tapCount++;
errorCodeEl.style.transform = 'scale(0.95)';
setTimeout(() => errorCodeEl.style.transform = '', 100);
if (tapCount >= 3 && tapCount < REQUIRED_TAPS) {
showTapCounter(tapCount, REQUIRED_TAPS);
}
if (tapTimer) clearTimeout(tapTimer);
tapTimer = setTimeout(() => { tapCount = 0; hideTapCounter(); }, 500);
if (tapCount >= REQUIRED_TAPS) {
tapCount = 0;
hideTapCounter();
startPortalTransition();
}
}
function showTapCounter(current, total) {
let counter = document.getElementById('tap-counter');
if (!counter) {
counter = document.createElement('div');
counter.id = 'tap-counter';
counter.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(139,58,98,0.9);color:white;padding:0.5rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:600;z-index:1000;';
document.body.appendChild(counter);
}
counter.textContent = current + ' / ' + total + ' 🔓';
}
function hideTapCounter() {
const counter = document.getElementById('tap-counter');
if (counter) counter.remove();
}
errorCodeEl.addEventListener('click', handleTap);
errorCodeEl.addEventListener('touchend', handleTap);
// Portal Transition
function startPortalTransition() {
const transition = document.createElement('div');
transition.id = 'portal-transition';
transition.innerHTML = '<div class="warp-container"><div class="warp-tunnel"></div><div class="warp-stars"></div><div class="warp-center"><div class="warp-ring"></div><div class="warp-ring"></div><div class="warp-ring"></div></div><div class="warp-flash"></div></div><div class="warp-text">ENTRÉE DANS LA MATRICE</div>';
document.body.appendChild(transition);
const style = document.createElement('style');
style.id = 'transition-styles';
style.textContent = '#portal-transition{position:fixed;inset:0;z-index:10000;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.warp-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:500px}.warp-tunnel{position:absolute;width:200vmax;height:200vmax;background:repeating-conic-gradient(from 0deg,transparent 0deg 10deg,rgba(139,58,98,0.1) 10deg 20deg);animation:tunnelSpin 2s linear infinite,tunnelZoom 3s ease-in forwards}@keyframes tunnelSpin{to{transform:rotate(360deg)}}@keyframes tunnelZoom{0%{transform:rotate(0)scale(1);opacity:0}20%{opacity:1}100%{transform:rotate(720deg)scale(20);opacity:0}}.warp-stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,0.8),transparent),radial-gradient(1px 1px at 90px 40px,#fff,transparent);background-size:350px 200px;animation:starsWarp 3s ease-in forwards}@keyframes starsWarp{0%{transform:scale(1);opacity:0}30%{opacity:1}100%{transform:scale(50);opacity:0}}.warp-center{position:relative;width:150px;height:150px;animation:centerPulse 0.5s ease-in-out infinite,centerGrow 2.5s ease-in forwards}@keyframes centerPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}@keyframes centerGrow{0%{transform:scale(0);opacity:0}20%{transform:scale(1);opacity:1}80%{transform:scale(1);opacity:1}100%{transform:scale(100);opacity:1}}.warp-ring{position:absolute;inset:0;border:4px solid #8b3a62;border-radius:50%;animation:ringPulse 1s ease-in-out infinite;box-shadow:0 0 30px #8b3a62,inset 0 0 30px #8b3a62}.warp-ring:nth-child(2){inset:20px;border-color:#5e2a8b;animation-delay:0.2s;box-shadow:0 0 30px #5e2a8b,inset 0 0 30px #5e2a8b}.warp-ring:nth-child(3){inset:40px;border-color:#d4a5c9;animation-delay:0.4s;box-shadow:0 0 30px #d4a5c9,inset 0 0 30px #d4a5c9}@keyframes ringPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:0.8}}.warp-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flashBang 0.5s ease-out 2.5s forwards}@keyframes flashBang{0%{opacity:0}50%{opacity:1}100%{opacity:0}}.warp-text{position:absolute;font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:0.3rem;z-index:10;opacity:0;animation:textAppear 0.5s ease 0.5s forwards,textFade 0.5s ease 2s forwards}@keyframes textAppear{to{opacity:1}}@keyframes textFade{to{opacity:0;transform:scale(2)}}';
document.head.appendChild(style);
setTimeout(() => {
transition.remove();
style.remove();
launchGameOfLife();
}, 3000);
}
// Game of Life
function launchGameOfLife() {
const gameContainer = document.createElement('div');
gameContainer.id = 'game-of-life';
gameContainer.innerHTML = '<canvas id="gol-canvas"></canvas><div class="gol-ui"><div class="gol-header"><div class="gol-header-text"><h1>🧬 Dimension Secrète</h1><p>Le Jeu de la Vie de Conway</p></div><button id="gol-minimize" class="gol-minimize" title="Réduire"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon-min"><line x1="5" y1="12" x2="19" y2="12"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="icon-max"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></button></div><div class="gol-body"><div class="gol-description"><p><strong>Règles :</strong> Cellule vivante avec 2-3 voisins survit. Cellule morte avec 3 voisins naît.</p></div><div class="gol-controls"><button id="gol-play" class="gol-btn active" title="Play/Pause"><svg viewBox="0 0 24 24" fill="currentColor" class="icon-pause"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg><svg viewBox="0 0 24 24" fill="currentColor" class="icon-play"><polygon points="5,3 19,12 5,21"/></svg></button><button id="gol-step" class="gol-btn" title="Étape"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 15,12 5,21"/><rect x="15" y="3" width="4" height="18"/></svg></button><button id="gol-random" class="gol-btn" title="Aléatoire"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></button><button id="gol-clear" class="gol-btn" title="Effacer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button><button id="gol-gliders" class="gol-btn" title="Planeurs"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"/><polygon points="22,2 15,22 11,13 2,9"/></svg></button></div><div class="gol-zoom-row"><button id="gol-zoom-out" class="gol-btn gol-btn-sm">−</button><span id="gol-zoom-val">30px</span><button id="gol-zoom-in" class="gol-btn gol-btn-sm">+</button></div><div class="gol-speed-row"><label>Vitesse: <span id="gol-speed-val">15</span> fps</label><input type="range" id="gol-speed" min="1" max="60" value="15"></div><div class="gol-stats"><div class="gol-stat"><span id="gol-gen">0</span><label>Génération</label></div><div class="gol-stat"><span id="gol-pop">0</span><label>Population</label></div><div class="gol-stat"><span id="gol-dim">0×0</span><label>Grille</label></div></div></div><button id="gol-exit" class="gol-exit">✕ Quitter</button></div>';
document.body.appendChild(gameContainer);
const gameStyles = document.createElement('style');
gameStyles.id = 'gol-styles';
gameStyles.textContent = '#game-of-life{position:fixed;inset:0;z-index:10000;background:#050508;animation:golIn 0.5s ease}@keyframes golIn{from{opacity:0}to{opacity:1}}#gol-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}.gol-ui{position:absolute;top:20px;left:20px;background:rgba(10,10,15,0.95);backdrop-filter:blur(10px);border:1px solid rgba(139,58,98,0.3);border-radius:16px;padding:1rem;min-width:280px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}.gol-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.gol-header-text h1{font-size:1.1rem;margin-bottom:0.1rem;background:linear-gradient(135deg,#d4a5c9,#8b3a62);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.gol-header-text p{font-size:0.7rem;color:#6b6b7b}.gol-minimize{width:32px;height:32px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);border-radius:8px;color:#b8b8c8;cursor:pointer;display:flex;align-items:center;justify-content:center}.gol-minimize:hover{background:rgba(139,58,98,0.3);border-color:#8b3a62;color:#fff}.gol-minimize svg{width:16px;height:16px}.gol-minimize .icon-max{display:none}.gol-ui.minimized .gol-body,.gol-ui.minimized .gol-exit{display:none}.gol-ui.minimized .gol-minimize .icon-min{display:none}.gol-ui.minimized .gol-minimize .icon-max{display:block}.gol-ui.minimized{min-width:auto}.gol-body{display:flex;flex-direction:column;gap:0.75rem}.gol-description{background:rgba(139,58,98,0.1);border:1px solid rgba(139,58,98,0.2);border-radius:8px;padding:0.5rem}.gol-description p{font-size:0.7rem;color:#b8b8c8;margin:0}.gol-description strong{color:#d4a5c9}.gol-controls{display:flex;gap:0.4rem;flex-wrap:wrap}.gol-btn{width:40px;height:40px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);border-radius:8px;color:#b8b8c8;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}.gol-btn:hover{background:rgba(139,58,98,0.3);border-color:#8b3a62;color:#fff;transform:translateY(-2px)}.gol-btn svg{width:18px;height:18px}.gol-btn.active{background:linear-gradient(135deg,#8b3a62,#5e2a8b);border-color:transparent;color:#fff}.gol-btn .icon-play{display:none}.gol-btn .icon-pause{display:block}.gol-btn:not(.active) .icon-play{display:block}.gol-btn:not(.active) .icon-pause{display:none}.gol-btn-sm{width:32px;height:32px;font-size:1.2rem;font-weight:bold}.gol-zoom-row,.gol-speed-row{display:flex;align-items:center;gap:0.5rem}.gol-zoom-row span{color:#d4a5c9;font-family:monospace;font-size:0.85rem;min-width:40px;text-align:center}.gol-speed-row{flex-direction:column;align-items:stretch}.gol-speed-row label{font-size:0.75rem;color:#b8b8c8}.gol-speed-row label span{color:#d4a5c9;font-family:monospace}.gol-speed-row input{width:100%;height:6px;-webkit-appearance:none;background:rgba(255,255,255,0.1);border-radius:3px;cursor:pointer}.gol-speed-row input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#8b3a62,#5e2a8b);border-radius:50%;cursor:pointer}.gol-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}.gol-stat{text-align:center;padding:0.4rem;background:rgba(255,255,255,0.03);border-radius:6px}.gol-stat span{font-size:1rem;font-weight:700;color:#d4a5c9;font-family:monospace;display:block}.gol-stat label{font-size:0.6rem;color:#6b6b7b;text-transform:uppercase}.gol-exit{width:100%;margin-top:0.5rem;padding:0.6rem;background:transparent;border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#6b6b7b;font-size:0.8rem;cursor:pointer;transition:all 0.2s}.gol-exit:hover{background:rgba(255,50,50,0.2);border-color:rgba(255,50,50,0.5);color:#ff6b6b}@media(max-width:768px){.gol-ui{top:auto;bottom:0;left:0;right:0;border-radius:16px 16px 0 0;max-height:50vh;overflow-y:auto;min-width:auto}.gol-header-text p,.gol-description{display:none}.gol-ui.minimized{max-height:none}}@media(max-width:480px){.gol-ui{padding:0.75rem}.gol-btn{width:36px;height:36px}.gol-btn-sm{width:28px;height:28px}}';
document.head.appendChild(gameStyles);
const canvas = document.getElementById('gol-canvas');
const ctx = canvas.getContext('2d');
const MAX_CELLS = 150, MIN_SIZE = 4, MAX_SIZE = 30;
let cellSize = MAX_SIZE, minCellSize = MIN_SIZE, cols, rows, grid, nextGrid;
let isRunning = true, generation = 0, speed = 15, lastTime = 0, isDrawing = false, drawValue = 1;
function initCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
minCellSize = Math.max(MIN_SIZE, Math.ceil(canvas.width / MAX_CELLS), Math.ceil(canvas.height / MAX_CELLS));
cellSize = Math.max(minCellSize, Math.min(MAX_SIZE, cellSize));
cols = Math.ceil(canvas.width / cellSize);
rows = Math.ceil(canvas.height / cellSize);
grid = Array(cols).fill(null).map(() => Array(rows).fill(0));
nextGrid = Array(cols).fill(null).map(() => Array(rows).fill(0));
updateUI();
}
function addGlider(sx, sy, dir) {
const p = [[[0,1],[1,2],[2,0],[2,1],[2,2]],[[0,1],[1,0],[2,0],[2,1],[2,2]],[[0,0],[0,1],[0,2],[1,2],[2,1]],[[0,0],[0,1],[0,2],[1,0],[2,1]]];
p[dir % 4].forEach(([dx, dy]) => { const x = (sx + dx) % cols, y = (sy + dy) % rows; if (x >= 0 && x < cols && y >= 0 && y < rows) grid[x][y] = 1; });
}
function addGliders(n) {
grid = Array(cols).fill(null).map(() => Array(rows).fill(0));
for (let i = 0; i < n; i++) addGlider(Math.floor(Math.random() * (cols - 10)) + 5, Math.floor(Math.random() * (rows - 10)) + 5, Math.floor(Math.random() * 4));
generation = 0; updateUI();
}
function randomize() { for (let x = 0; x < cols; x++) for (let y = 0; y < rows; y++) grid[x][y] = Math.random() > 0.7 ? 1 : 0; generation = 0; updateUI(); }
function clear() { for (let x = 0; x < cols; x++) for (let y = 0; y < rows; y++) grid[x][y] = 0; generation = 0; updateUI(); }
function step() {
for (let x = 0; x < cols; x++) for (let y = 0; y < rows; y++) {
let n = 0;
for (let i = -1; i <= 1; i++) for (let j = -1; j <= 1; j++) if (i || j) n += grid[(x + i + cols) % cols][(y + j + rows) % rows];
nextGrid[x][y] = grid[x][y] ? (n === 2 || n === 3 ? 1 : 0) : (n === 3 ? 1 : 0);
}
[grid, nextGrid] = [nextGrid, grid]; generation++; updateUI();
}
function draw() {
ctx.fillStyle = '#0a0a0f'; ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(139,58,98,0.1)'; ctx.lineWidth = 0.5;
for (let x = 0; x <= cols * cellSize; x += cellSize) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, rows * cellSize); ctx.stroke(); }
for (let y = 0; y <= rows * cellSize; y += cellSize) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(cols * cellSize, y); ctx.stroke(); }
ctx.shadowColor = 'rgba(139,58,98,0.5)'; ctx.shadowBlur = 8;
for (let x = 0; x < cols; x++) for (let y = 0; y < rows; y++) if (grid[x][y]) {
const g = ctx.createRadialGradient(x * cellSize + cellSize / 2, y * cellSize + cellSize / 2, 0, x * cellSize + cellSize / 2, y * cellSize + cellSize / 2, cellSize);
g.addColorStop(0, '#d4a5c9'); g.addColorStop(0.5, '#8b3a62'); g.addColorStop(1, '#5e2a8b');
ctx.fillStyle = g; ctx.fillRect(x * cellSize + 1, y * cellSize + 1, cellSize - 2, cellSize - 2);
}
ctx.shadowBlur = 0;
}
function updateUI() {
let pop = 0; for (let x = 0; x < cols; x++) for (let y = 0; y < rows; y++) pop += grid[x][y];
document.getElementById('gol-gen').textContent = generation;
document.getElementById('gol-pop').textContent = pop;
document.getElementById('gol-dim').textContent = cols + '×' + rows;
document.getElementById('gol-zoom-val').textContent = cellSize + 'px';
document.getElementById('gol-speed-val').textContent = speed;
}
function handleZoom(d) {
const old = cellSize; cellSize = Math.max(minCellSize, Math.min(MAX_SIZE, cellSize + d));
if (cellSize !== old) { const og = grid, oc = cols, or = rows; initCanvas(); for (let x = 0; x < Math.min(oc, cols); x++) for (let y = 0; y < Math.min(or, rows); y++) grid[x][y] = og[x][y]; updateUI(); }
}
function getCell(e) {
const r = canvas.getBoundingClientRect(), cx = e.touches ? e.touches[0].clientX : e.clientX, cy = e.touches ? e.touches[0].clientY : e.clientY;
return { x: Math.max(0, Math.min(cols - 1, Math.floor((cx - r.left) / cellSize))), y: Math.max(0, Math.min(rows - 1, Math.floor((cy - r.top) / cellSize))) };
}
function gameLoop(t) { if (isRunning && t - lastTime > 1000 / speed) { step(); lastTime = t; } draw(); requestAnimationFrame(gameLoop); }
canvas.addEventListener('mousedown', e => { isDrawing = true; const c = getCell(e); drawValue = grid[c.x][c.y] ? 0 : 1; grid[c.x][c.y] = drawValue; });
canvas.addEventListener('mousemove', e => { if (isDrawing) { const c = getCell(e); grid[c.x][c.y] = drawValue; } });
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseleave', () => isDrawing = false);
canvas.addEventListener('touchstart', e => { e.preventDefault(); isDrawing = true; const c = getCell(e); drawValue = grid[c.x][c.y] ? 0 : 1; grid[c.x][c.y] = drawValue; }, { passive: false });
canvas.addEventListener('touchmove', e => { e.preventDefault(); if (isDrawing) { const c = getCell(e); grid[c.x][c.y] = drawValue; } }, { passive: false });
canvas.addEventListener('touchend', () => isDrawing = false);
canvas.addEventListener('wheel', e => { e.preventDefault(); handleZoom(e.deltaY > 0 ? -1 : 1); });
document.getElementById('gol-play').addEventListener('click', function() { isRunning = !isRunning; this.classList.toggle('active', isRunning); });
document.getElementById('gol-step').addEventListener('click', () => { if (!isRunning) step(); });
document.getElementById('gol-random').addEventListener('click', randomize);
document.getElementById('gol-clear').addEventListener('click', clear);
document.getElementById('gol-gliders').addEventListener('click', () => addGliders(3));
document.getElementById('gol-zoom-in').addEventListener('click', () => handleZoom(2));
document.getElementById('gol-zoom-out').addEventListener('click', () => handleZoom(-2));
document.getElementById('gol-speed').addEventListener('input', function() { speed = parseInt(this.value); updateUI(); });
document.getElementById('gol-minimize').addEventListener('click', () => document.querySelector('.gol-ui').classList.toggle('minimized'));
document.getElementById('gol-exit').addEventListener('click', () => { document.getElementById('game-of-life').remove(); document.getElementById('gol-styles').remove(); });
window.addEventListener('resize', () => { const og = grid, oc = cols, or = rows; initCanvas(); for (let x = 0; x < Math.min(oc, cols); x++) for (let y = 0; y < Math.min(or, rows); y++) grid[x][y] = og[x][y]; updateUI(); });
initCanvas();
addGliders(3);
requestAnimationFrame(gameLoop);
}

31
assets/js/pages/legal.js Normal file
View file

@ -0,0 +1,31 @@
// assets/js/pages/legal.js - minimal fallback for legal pages
document.addEventListener('DOMContentLoaded', () => {
// replace feather icons if available (use centralized loader if present)
if (typeof window.ensureFeather === 'function') {
window.ensureFeather().then(() => { try { if (window.feather && feather.replace) feather.replace(); } catch (e) {} }).catch(()=>{});
} else if (window.feather && feather.replace) {
try { feather.replace(); } catch (e) { /* ignore */ }
}
// theme fallback (will be overwritten by assets/js/main.js if present)
const html = document.documentElement;
if (!html.getAttribute('data-theme')) html.setAttribute('data-theme', localStorage.getItem('theme') || 'dark');
const themeToggle = document.getElementById('theme-toggle');
if (themeToggle) themeToggle.addEventListener('click', () => {
const newTheme = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
// navbar scrolled
const navbar = document.getElementById('navbar');
if (navbar) window.addEventListener('scroll', () => navbar.classList.toggle('scrolled', window.scrollY > 50));
// mobile toggle (minimal)
const mobileToggle = document.getElementById('mobile-toggle');
const navLinks = document.getElementById('nav-links');
if (mobileToggle && navLinks) mobileToggle.addEventListener('click', () => {
mobileToggle.classList.toggle('active');
navLinks.classList.toggle('active');
});
});

228
assets/js/pages/realisations.js Normal file
View file

@ -0,0 +1,228 @@
// Page script for /pages/realisations.html
document.addEventListener('DOMContentLoaded', async () => {
const dataUrl = '../assets/data/projects.json';
let allProjects = [];
try {
const res = await fetch(dataUrl);
if (!res.ok) throw new Error(res.statusText);
allProjects = await res.json();
} catch (err) {
console.error('Failed to load projects data:', err);
return;
}
const ITEMS_PER_PAGE = 9;
let currentPage = 1;
let currentFilter = 'all';
const portfolioGrid = document.getElementById('portfolio-grid');
const paginationContainer = document.getElementById('pagination');
const filterTabs = document.querySelectorAll('.filter-tab');
const modalOverlay = document.getElementById('project-modal-overlay');
const modalClose = document.getElementById('project-modal-close');
const gallerySlides = document.getElementById('gallery-slides');
const galleryPrev = document.getElementById('gallery-prev');
const galleryNext = document.getElementById('gallery-next');
const modalTitle = document.getElementById('modal-title');
const modalCategory = document.getElementById('modal-category');
const modalDesc = document.getElementById('modal-desc');
const modalMeta = document.getElementById('modal-meta');
const modalFeatures = document.getElementById('modal-features');
const modalTech = document.getElementById('modal-tech');
const modalStats = document.getElementById('modal-stats');
function getFilteredProjects() {
if (currentFilter === 'all') return [...allProjects];
return allProjects.filter(p => p.category === currentFilter);
}
function getTotalPages(filtered) {
return Math.ceil(filtered.length / ITEMS_PER_PAGE) || 1;
}
function getProjectsForPage(filtered, page) {
const start = (page - 1) * ITEMS_PER_PAGE;
return filtered.slice(start, start + ITEMS_PER_PAGE);
}
function getCategoryLabel(category) {
const labels = { 'bot': 'Bot Discord', 'map': 'Fortnite Map', 'graphisme': 'Graphisme' };
return labels[category] || category;
}
function renderProjects() {
const filtered = getFilteredProjects();
const projects = getProjectsForPage(filtered, currentPage);
portfolioGrid.innerHTML = projects.map(project => `
<div class="portfolio-item reveal" data-project-id="${project.id}">
<div class="portfolio-bg" style="background: ${project.gradient};"></div>
<div class="portfolio-content">
<span class="portfolio-tag">${getCategoryLabel(project.category)}</span>
<h4>${project.title}</h4>
<p>${project.desc.substring(0, 80)}...</p>
</div>
</div>
`).join('');
// activate reveals & icons
setTimeout(() => {
document.querySelectorAll('.portfolio-item.reveal').forEach(el => el.classList.add('active'));
}, 80);
// ensure icons are replaced for newly injected content
if (window.feather && feather.replace) {
try { feather.replace(); } catch (e) {}
}
}
function renderPagination() {
const filtered = getFilteredProjects();
const totalPages = getTotalPages(filtered);
if (totalPages <= 1) {
paginationContainer.innerHTML = '';
return;
}
let html = `<button class="pagination-btn pagination-arrow" data-page="${Math.max(1, currentPage - 1)}" ${currentPage === 1 ? 'disabled' : ''}><i data-feather="chevron-left"></i></button>`;
const maxVisible = 5;
let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
let endPage = Math.min(totalPages, startPage + maxVisible - 1);
if (endPage - startPage < maxVisible - 1) startPage = Math.max(1, endPage - maxVisible + 1);
if (startPage > 1) {
html += `<button class="pagination-btn" data-page="1">1</button>`;
if (startPage > 2) html += `<span class="pagination-ellipsis">...</span>`;
}
for (let i = startPage; i <= endPage; i++) {
html += `<button class="pagination-btn ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`;
}
if (endPage < totalPages) {
if (endPage < totalPages - 1) html += `<span class="pagination-ellipsis">...</span>`;
html += `<button class="pagination-btn" data-page="${totalPages}">${totalPages}</button>`;
}
html += `<button class="pagination-btn pagination-arrow" data-page="${Math.min(totalPages, currentPage + 1)}" ${currentPage === totalPages ? 'disabled' : ''}><i data-feather="chevron-right"></i></button>`;
const startItem = (currentPage - 1) * ITEMS_PER_PAGE + 1;
const endItem = Math.min(currentPage * ITEMS_PER_PAGE, filtered.length);
html += `<div class="pagination-info">Affichage ${startItem}-${endItem} sur ${filtered.length} projets</div>`;
paginationContainer.innerHTML = html;
if (window.feather && feather.replace) {
try { feather.replace(); } catch (e) {}
}
}
function goToPage(page) {
const filtered = getFilteredProjects();
const totalPages = getTotalPages(filtered);
if (page < 1 || page > totalPages) return;
currentPage = page;
renderProjects();
renderPagination();
portfolioGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function openProjectModal(projectId) {
const project = allProjects.find(p => p.id === Number(projectId));
if (!project) return;
modalCategory.textContent = getCategoryLabel(project.category);
modalTitle.textContent = project.title;
modalDesc.textContent = project.desc;
modalMeta.innerHTML = `<span><i data-feather="calendar"></i> ${project.year}</span> <span><i data-feather="clock"></i> ${project.duration}</span>`;
modalFeatures.innerHTML = project.features.map(f => `<div class="project-feature-item">${f}</div>`).join('');
modalTech.innerHTML = project.tech.map(t => `<div class="project-tech-item">${t}</div>`).join('');
modalStats.innerHTML = project.stats.map(s => `
<div class="project-stat-card">
<div class="project-stat-card-value">${s.value}</div>
<div class="project-stat-card-label">${s.label}</div>
</div>
`).join('');
// gallery slides (use gradient as placeholder slides like original)
gallerySlides.innerHTML = `
<div class="project-gallery-slide" style="background: ${project.gradient};"></div>
<div class="project-gallery-slide" style="background: ${project.gradient}; filter: hue-rotate(30deg);"></div>
<div class="project-gallery-slide" style="background: ${project.gradient}; filter: hue-rotate(-30deg);"></div>
`;
// reset gallery state
galleryIndex = 0;
updateGallery();
if (modalOverlay) modalOverlay.classList.add('active');
if (window.feather && feather.replace) {
try { feather.replace(); } catch (e) {}
}
}
function closeProjectModal() {
if (modalOverlay) modalOverlay.classList.remove('active');
}
// Gallery helpers
let galleryIndex = 0;
function updateGallery() {
const slides = gallerySlides ? Array.from(gallerySlides.children) : [];
slides.forEach((s, i) => {
s.style.transform = `translateX(${(i - galleryIndex) * 100}%)`;
s.classList.toggle('active', i === galleryIndex);
});
}
function prevSlide() { galleryIndex = Math.max(0, galleryIndex - 1); updateGallery(); }
function nextSlide() { const slides = gallerySlides ? gallerySlides.children.length : 0; galleryIndex = Math.min(slides - 1, galleryIndex + 1); updateGallery(); }
// Event bindings
filterTabs.forEach(tab => tab.addEventListener('click', (e) => {
filterTabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
currentFilter = tab.dataset.filter || 'all';
currentPage = 1;
renderProjects();
renderPagination();
}));
paginationContainer.addEventListener('click', (e) => {
const btn = e.target.closest('button[data-page]');
if (!btn) return;
const page = Number(btn.getAttribute('data-page'));
goToPage(page);
});
portfolioGrid.addEventListener('click', (e) => {
const item = e.target.closest('.portfolio-item');
if (!item) return;
const id = item.getAttribute('data-project-id');
openProjectModal(id);
});
if (modalClose) modalClose.addEventListener('click', closeProjectModal);
if (modalOverlay) modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) closeProjectModal(); });
window.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modalOverlay.classList.contains('active')) closeProjectModal(); });
if (galleryPrev) galleryPrev.addEventListener('click', prevSlide);
if (galleryNext) galleryNext.addEventListener('click', nextSlide);
// Expose for compatibility
window.openProjectModal = openProjectModal;
window.goToPage = goToPage;
// Initial render
renderProjects();
renderPagination();
});

57
assets/js/pages/services.js Normal file
View file

@ -0,0 +1,57 @@
// Services page scripts (moved from inline in pages/services.html)
// Depends on ../main.js which initializes feather and other globals
(function() {
document.addEventListener('DOMContentLoaded', () => {
// Timeline Animation
const timeline = document.getElementById('process-timeline');
const steps = document.querySelectorAll('.process-step');
function animateTimeline() {
if (!timeline) return;
const timelineTop = timeline.getBoundingClientRect().top;
if (timelineTop < window.innerHeight - 200) {
timeline.classList.add('animated');
// Animate steps sequentially
steps.forEach((step, index) => {
setTimeout(() => {
step.classList.add('active');
}, index * 400);
});
}
}
window.addEventListener('scroll', animateTimeline);
window.addEventListener('load', animateTimeline);
// Service Tabs
const tabBtns = document.querySelectorAll('.service-tab-btn');
const tabContents = document.querySelectorAll('.service-tab-content');
if (tabBtns.length && tabContents.length) {
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
const tabId = btn.dataset.tab;
// Update buttons
tabBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// Update content
tabContents.forEach(content => {
content.classList.remove('active');
if (content.id === 'tab-' + tabId) {
content.classList.add('active');
}
});
// Re-init feather icons for new content (safe if feather is loaded)
if (window.feather) window.feather.replace();
});
});
}
});
})();