Téléverser les fichiers vers "/"

script.js

@@ -0,0 +1,178 @@
+const HEADER_PATH = "header.html";
+const FOOTER_PATH = "footer.html";
+
+document.addEventListener("DOMContentLoaded", () => {
+    
+    
+    fetch(HEADER_PATH)
+        .then(res => res.text())
+        .then(data => {
+            
+            const headerPlaceholder = document.getElementById("page-header");
+            if (headerPlaceholder) {
+                headerPlaceholder.innerHTML = data;
+                
+                smoothScrollFix();
+            }
+        });
+
+   
+    fetch(FOOTER_PATH)
+        .then(res => res.text())
+        .then(data => {
+           
+            const footerPlaceholder = document.getElementById("page-footer");
+            if (footerPlaceholder) {
+                footerPlaceholder.innerHTML = data;
+            }
+        });
+        
+
+    if (document.getElementById("background-canvas") && typeof THREE !== 'undefined') {
+        initBackground();
+    }
+});
+
+
+
+
+function smoothScrollFix() {
+    
+    const links = document.querySelectorAll("nav a[href^='#']");
+
+    links.forEach(link => {
+        link.addEventListener("click", (e) => {
+            
+            
+            if (link.getAttribute("href").length <= 1) return; 
+
+            e.preventDefault();
+
+            const targetID = link.getAttribute("href").substring(1);
+            const target = document.getElementById(targetID);
+
+            if (target) {
+                
+                const offset = -80; 
+                const topPos = target.getBoundingClientRect().top + window.scrollY + offset;
+
+                window.scrollTo({
+                    top: topPos,
+                    behavior: "smooth"
+                });
+            }
+        });
+    });
+}
+
+
+
+let scene, camera, renderer, particles, cubes = [];
+
+
+function initBackground() {
+    const canvas = document.getElementById("background-canvas");
+    if (!canvas) {
+        console.error("Erreur Three.js: Le canvas #background-canvas est introuvable.");
+        return; 
+    }
+
+    scene = new THREE.Scene();
+    camera = new THREE.PerspectiveCamera(
+        75, window.innerWidth / window.innerHeight, 0.1, 1000
+    );
+
+    renderer = new THREE.WebGLRenderer({
+        canvas: canvas,
+        alpha: true,
+        antialias: true
+    });
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+
+
+  
+    const particleCount = 500;
+    const positions = [];
+
+    for (let i = 0; i < particleCount; i++) {
+        positions.push((Math.random() - 0.5) * 200);
+        positions.push((Math.random() - 0.5) * 200);
+        positions.push((Math.random() - 0.5) * 200);
+    }
+
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+
+    const material = new THREE.PointsMaterial({
+        color: 0x00eaff,
+        size: 0.4,
+        transparent: true,
+        opacity: 0.8
+    });
+
+    particles = new THREE.Points(geometry, material);
+    scene.add(particles);
+
+
+    
+    for (let i = 0; i < 25; i++) {
+        const cubeGeo = new THREE.BoxGeometry(2, 2, 2);
+        const cubeMat = new THREE.MeshStandardMaterial({
+            color: Math.random() * 0xffffff,
+            wireframe: true
+        });
+        const cube = new THREE.Mesh(cubeGeo, cubeMat);
+
+        cube.position.set(
+            (Math.random() - 0.5) * 120,
+            (Math.random() - 0.5) * 120,
+            (Math.random() - 0.5) * 120
+        );
+
+        cubes.push(cube);
+        scene.add(cube);
+    }
+
+
+    
+    const light = new THREE.PointLight(0xffffff, 1.2);
+    light.position.set(15, 50, 40);
+    scene.add(light);
+
+
+   
+    camera.position.z = 70;
+
+    animateBackground();
+}
+
+
+
+function animateBackground() {
+    requestAnimationFrame(animateBackground);
+
+    particles.rotation.y += 0.0009;
+    particles.rotation.x += 0.0004;
+
+    cubes.forEach(cube => {
+        cube.rotation.x += 0.01;
+        cube.rotation.y += 0.015;
+
+        cube.position.x += (Math.random() - 0.5) * 0.02;
+        cube.position.y += (Math.random() - 0.5) * 0.02;
+    });
+
+    renderer.render(scene, camera);
+}
+
+
+
+window.addEventListener("resize", () => {
+    if (camera && renderer) {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+});