Ajoutes un header avec un nav bar titre nav bar user , s'affiche venant do côté gauche de la page le nav bar de haut vers le bas et le user da la droite vers la gauche - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Bootle
-emoji: 😻
-colorFrom: indigo
+title: bootle
+emoji: 🐳
+colorFrom: pink
 colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,454 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Présentation Cinématique de Bouteille 3D</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/ScrollTrigger.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Bebas+Neue&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Orbitron', sans-serif;
+            background-color: #000;
+            color: white;
+            overflow-x: hidden;
+        }
+        
+        #canvas-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100vh;
+            z-index: 1;
+            pointer-events: none;
+        }
+        
+        .scene {
+            min-height: 100vh;
+            width: 100%;
+            position: relative;
+            z-index: 2;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: 0 10%;
+            opacity: 0;
+            transition: opacity 0.5s;
+        }
+        
+        .scene.active {
+            opacity: 1;
+        }
+        
+        h1 {
+            font-family: 'Bebas Neue', sans-serif;
+            font-size: 5rem;
+            margin-bottom: 2rem;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+        }
+        
+        p {
+            font-size: 1.2rem;
+            max-width: 600px;
+            line-height: 1.6;
+            margin-bottom: 2rem;
+        }
+        
+        .info-card {
+            background: rgba(17, 17, 17, 0.8);
+            border-radius: 10px;
+            padding: 2rem;
+            max-width: 400px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transform: translateY(50px);
+            opacity: 0;
+            transition: all 0.5s;
+        }
+        
+        .info-card.visible {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        
+        .cta-button {
+            background: linear-gradient(45deg, #ff3366, #ba2650);
+            color: white;
+            border: none;
+            padding: 15px 40px;
+            font-size: 1.2rem;
+            border-radius: 30px;
+            cursor: pointer;
+            font-family: 'Orbitron', sans-serif;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            transition: all 0.3s;
+            margin-top: 2rem;
+        }
+        
+        .cta-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(255, 51, 102, 0.3);
+        }
+        
+        /* Header Styles */
+        header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            padding: 1.5rem 2rem;
+            z-index: 100;
+        }
+
+        .nav-toggle {
+            display: none;
+            flex-direction: column;
+            justify-content: space-between;
+            width: 30px;
+            height: 21px;
+            cursor: pointer;
+            z-index: 101;
+        }
+
+        .nav-toggle span {
+            display: block;
+            height: 3px;
+            width: 100%;
+            background: white;
+            transition: all 0.3s;
+        }
+
+        .main-nav {
+            transform: translateX(-100%);
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 300px;
+            height: 100vh;
+            background: rgba(0, 0, 0, 0.9);
+            padding: 6rem 2rem;
+            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
+            z-index: 99;
+        }
+
+        .main-nav.active {
+            transform: translateX(0);
+        }
+
+        .nav-title {
+            font-family: 'Bebas Neue', sans-serif;
+            font-size: 2rem;
+            margin-bottom: 2rem;
+            color: white;
+        }
+
+        .main-nav ul {
+            list-style: none;
+        }
+
+        .main-nav li {
+            margin-bottom: 1.5rem;
+        }
+
+        .main-nav a {
+            color: white;
+            text-decoration: none;
+            font-size: 1.2rem;
+            transition: color 0.3s;
+        }
+
+        .main-nav a:hover {
+            color: #ff3366;
+        }
+
+        .user-nav {
+            transform: translateX(100%);
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 200px;
+            height: 100vh;
+            background: rgba(0, 0, 0, 0.9);
+            padding: 6rem 2rem;
+            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
+            z-index: 99;
+        }
+
+        .user-nav.active {
+            transform: translateX(0);
+        }
+
+        .user-nav a {
+            display: block;
+            color: white;
+            text-decoration: none;
+            font-size: 1.2rem;
+            margin-bottom: 1.5rem;
+            transition: color 0.3s;
+        }
+
+        .user-nav a:hover {
+            color: #ff3366;
+        }
+
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 3rem;
+            }
+            
+            p {
+                font-size: 1rem;
+            }
+            
+            .info-card {
+                padding: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="nav-toggle">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+        <nav class="main-nav">
+            <h2 class="nav-title">Bouteille 3D</h2>
+            <ul>
+                <li><a href="#">Accueil</a></li>
+                <li><a href="#">Fonctionnalités</a></li>
+                <li><a href="#">Technologie</a></li>
+                <li><a href="#">Contact</a></li>
+            </ul>
+        </nav>
+        <div class="user-nav">
+            <a href="#">Connexion</a>
+            <a href="#">Inscription</a>
+        </div>
+    </header>
+    <div id="canvas-container"></div>
+    
+    <section class="scene" id="scene1">
+        <div class="info-card">
+            <h1>L'Élégance Redéfinie</h1>
+            <p>Découvrez notre nouvelle bouteille révolutionnaire, conçue pour capturer la lumière et l'attention.</p>
+        </div>
+    </section>
+    
+    <section class="scene" id="scene2">
+        <div class="info-card">
+            <h1>Design Ergonomique</h1>
+            <p>Une forme étudiée pour un confort inégalé, avec des courbes qui épousent parfaitement votre main.</p>
+        </div>
+    </section>
+    
+    <section class="scene" id="scene3">
+        <div class="info-card">
+            <h1>Précision Technique</h1>
+            <p>Chaque détail est pensé pour optimiser l'expérience utilisateur, de l'ouverture à la fermeture.</p>
+        </div>
+    </section>
+    
+    <section class="scene" id="scene4">
+        <div class="info-card">
+            <h1>Système d'Ouverture</h1>
+            <p>Notre mécanisme breveté offre une ouverture fluide et sécurisée en un seul geste.</p>
+        </div>
+    </section>
+    
+    <section class="scene" id="scene5">
+        <div class="info-card">
+            <h1>Technologie Intérieure</h1>
+            <p>Un système de conservation révolutionnaire maintient la qualité du contenu comme jamais auparavant.</p>
+        </div>
+    </section>
+    
+    <section class="scene" id="scene6">
+        <div class="info-card">
+            <h1>Disponible Maintenant</h1>
+            <p>Commandez dès aujourd'hui et faites l'expérience de l'innovation dans votre quotidien.</p>
+            <button class="cta-button">Découvrir</button>
+        </div>
+    </section>
+    
+    <script>
+        // Initialisation Three.js
+        let scene, camera, renderer, bottle, mixer;
+        
+        function initThreeJS() {
+            // Création de la scène
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x000000);
+            
+            // Configuration de la caméra
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 5;
+            
+            // Configuration du rendu
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            document.getElementById('canvas-container').appendChild(renderer.domElement);
+            
+            // Ajout de lumières
+            const ambientLight = new THREE.AmbientLight(0x404040);
+            scene.add(ambientLight);
+            
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+            directionalLight.position.set(1, 1, 1);
+            scene.add(directionalLight);
+            
+            const pointLight = new THREE.PointLight(0xff3366, 1, 10);
+            pointLight.position.set(2, 2, 2);
+            scene.add(pointLight);
+            
+            // Création d'une bouteille temporaire (en attendant le modèle GLB)
+            createTemporaryBottle();
+            
+            // Gestion du redimensionnement
+            window.addEventListener('resize', onWindowResize);
+        }
+        
+        function createTemporaryBottle() {
+            // Géométrie temporaire pour la démo
+            const geometry = new THREE.CylinderGeometry(0.5, 0.3, 1.5, 32);
+            const material = new THREE.MeshPhongMaterial({
+                color: 0x00aaff,
+                transparent: true,
+                opacity: 0.9,
+                shininess: 100
+            });
+            
+            bottle = new THREE.Mesh(geometry, material);
+            scene.add(bottle);
+            
+            // Animation du bouchon (sera remplacé par le modèle GLB)
+            const capGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.2, 32);
+            const capMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
+            const cap = new THREE.Mesh(capGeometry, capMaterial);
+            cap.position.y = 0.85;
+            bottle.add(cap);
+        }
+        
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        
+        // Animation
+        function animate() {
+            requestAnimationFrame(animate);
+            
+            if (bottle) {
+                bottle.rotation.y += 0.005;
+            }
+            
+            renderer.render(scene, camera);
+        }
+        
+        // Initialisation des animations GSAP
+        function initAnimations() {
+            // Configuration des scènes
+            const scenes = document.querySelectorAll('.scene');
+            
+            scenes.forEach((scene, index) => {
+                ScrollTrigger.create({
+                    trigger: scene,
+                    start: "top center",
+                    end: "bottom center",
+                    onEnter: () => {
+                        scenes.forEach(s => s.classList.remove('active'));
+                        scene.classList.add('active');
+                        
+                        // Animation spécifique à chaque scène
+                        switch(index) {
+                            case 0: // Apparition
+                                gsap.to(bottle.material, { opacity: 1, duration: 1 });
+                                gsap.to(camera.position, { z: 5, duration: 1 });
+                                break;
+                            case 1: // Rotation
+                                gsap.to(bottle.rotation, { y: Math.PI * 2, duration: 5 });
+                                break;
+                            case 2: // Zoom avant
+                                gsap.to(camera.position, { z: 2, duration: 1 });
+                                break;
+                            case 3: // Ouverture du bouchon
+                                if (bottle.children.length > 0) {
+                                    gsap.to(bottle.children[0].position, { y: 1.2, duration: 0.5 });
+                                }
+                                break;
+                            case 4: // Vue intérieure
+                                gsap.to(bottle.material, { opacity: 0.5, duration: 0.5 });
+                                break;
+                            case 5: // Zoom arrière
+                                gsap.to(camera.position, { z: 5, duration: 1 });
+                                gsap.to(bottle.material, { opacity: 1, duration: 1 });
+                                if (bottle.children.length > 0) {
+                                    gsap.to(bottle.children[0].position, { y: 0.85, duration: 0.5 });
+                                }
+                                break;
+                        }
+                    },
+                    onEnterBack: () => {
+                        scenes.forEach(s => s.classList.remove('active'));
+                        scene.classList.add('active');
+                    }
+                });
+            });
+            
+            // Animation des cartes d'information
+            gsap.utils.toArray('.info-card').forEach((card, i) => {
+                ScrollTrigger.create({
+                    trigger: card,
+                    start: "top 80%",
+                    onEnter: () => card.classList.add('visible'),
+                    onLeaveBack: () => card.classList.remove('visible')
+                });
+            });
+        }
+        
+        // Initialisation AOS
+        function initAOS() {
+            AOS.init({
+                duration: 800,
+                easing: 'ease-in-out',
+                once: false,
+                mirror: true
+            });
+        }
+        
+        // Gestion du header
+        document.querySelector('.nav-toggle').addEventListener('click', function() {
+            this.classList.toggle('active');
+            document.querySelector('.main-nav').classList.toggle('active');
+            document.querySelector('.user-nav').classList.toggle('active');
+        });
+
+        // Initialisation au chargement
+        window.addEventListener('DOMContentLoaded', () => {
+            initThreeJS();
+            animate();
+            initAnimations();
+            initAOS();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sm08th/bootle" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>