Spaces:

armansid
/

perfume-1

Running

App Files Files Community

armansid commited on May 14, 2025

Commit

5f0dd1b

verified ·

1 Parent(s): 2c8355b

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +504 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Perfume 1
-emoji: 🏢
 colorFrom: gray
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: perfume-1
+emoji: 🐳
 colorFrom: gray
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,504 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LUNE | The Fragrance of Midnight Elegance</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Neue+Montreal:wght@300;400;500&display=swap">
+    <style>
+        @font-face {
+            font-family: 'Neue Montreal';
+            src: url('https://fonts.cdnfonts.com/css/neue-montreal');
+        }
+        body {
+            font-family: 'Neue Montreal', sans-serif;
+            background-color: #0a0a0a;
+            color: #e5e5e5;
+            overflow-x: hidden;
+            scroll-behavior: smooth;
+        }
+        h1, h2, h3 {
+            font-family: 'Playfair Display', serif;
+            font-weight: 400;
+        }
+        .hero-overlay {
+            background: linear-gradient(180deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0.4) 50%, rgba(10,10,10,0.8) 100%);
+        }
+        .gold-text {
+            background: linear-gradient(90deg, #d4af37 0%, #f9e076 50%, #d4af37 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .scent-trail {
+            position: absolute;
+            width: 300px;
+            height: 300px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(214,188,123,0.2) 0%, rgba(214,188,123,0) 70%);
+            filter: blur(20px);
+            z-index: -1;
+        }
+        .perfume-bottle {
+            transition: all 0.5s ease;
+            filter: drop-shadow(0 0 20px rgba(214,188,123,0.3));
+        }
+        .perfume-bottle:hover {
+            transform: translateY(-10px);
+            filter: drop-shadow(0 0 30px rgba(214,188,123,0.5));
+        }
+        .editorial-image {
+            transition: all 0.5s ease;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        }
+        .editorial-image:hover {
+            transform: scale(1.03);
+        }
+        .newsletter-input {
+            background: rgba(20, 20, 20, 0.5);
+            border: 1px solid rgba(214, 188, 123, 0.3);
+            transition: all 0.3s ease;
+        }
+        .newsletter-input:focus {
+            outline: none;
+            border-color: rgba(214, 188, 123, 0.7);
+            box-shadow: 0 0 0 2px rgba(214, 188, 123, 0.2);
+        }
+        .scroll-indicator {
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+            40% {transform: translateY(-20px);}
+            60% {transform: translateY(-10px);}
+        }
+        .fade-in {
+            opacity: 0;
+            transition: opacity 1s ease;
+        }
+        .fade-in.visible {
+            opacity: 1;
+        }
+        #threejs-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .section {
+            min-height: 100vh;
+            position: relative;
+            overflow: hidden;
+        }
+        .horizontal-scroll {
+            display: flex;
+            overflow-x: auto;
+            scroll-snap-type: x mandatory;
+            -webkit-overflow-scrolling: touch;
+        }
+        .horizontal-scroll > div {
+            scroll-snap-align: start;
+            flex: none;
+            width: 80vw;
+            margin-right: 2rem;
+        }
+        .scent-note {
+            position: absolute;
+            background: rgba(20, 20, 20, 0.7);
+            border: 1px solid rgba(214, 188, 123, 0.3);
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            opacity: 0;
+            transition: all 0.5s ease;
+        }
+        .perfume-container:hover .scent-note {
+            opacity: 1;
+            transform: translateY(-10px);
+        }
+    </style>
+</head>
+<body class="antialiased">
+    <!-- Three.js Background Container -->
+    <div id="threejs-container"></div>
+    <!-- Navigation -->
+    <nav class="fixed top-0 left-0 w-full z-50 py-6 px-8 flex justify-between items-center">
+        <div class="text-2xl font-light tracking-widest">LUNE</div>
+        <div class="hidden md:flex space-x-8">
+            <a href="#story" class="hover:text-gray-300 transition duration-300">Story</a>
+            <a href="#fragrances" class="hover:text-gray-300 transition duration-300">Fragrances</a>
+            <a href="#experience" class="hover:text-gray-300 transition duration-300">Experience</a>
+            <a href="#journal" class="hover:text-gray-300 transition duration-300">Journal</a>
+        </div>
+        <div class="flex items-center space-x-4">
+            <button class="hidden md:block px-6 py-2 border border-gray-600 hover:border-gray-300 transition duration-300">Cart (0)</button>
+            <button class="md:hidden">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+            </button>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="section flex items-center justify-center relative">
+        <div class="hero-overlay absolute inset-0 z-0"></div>
+        <div class="text-center px-4 z-10 max-w-4xl">
+            <h1 class="text-6xl md:text-8xl font-light mb-4 fade-in">LUNE</h1>
+            <p class="text-xl md:text-2xl mb-12 fade-in" style="transition-delay: 0.3s;">The Fragrance of Midnight Elegance</p>
+            <button id="enter-experience" class="px-12 py-4 border border-gray-400 hover:border-gray-100 hover:bg-gray-100 hover:text-black transition duration-500 fade-in" style="transition-delay: 0.6s;">
+                Enter Experience
+            </button>
+            <div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 scroll-indicator fade-in" style="transition-delay: 1s;">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                </svg>
+            </div>
+        </div>
+        <div class="scent-trail" style="top: 30%; left: 20%;"></div>
+        <div class="scent-trail" style="top: 60%; right: 15%; width: 400px; height: 400px;"></div>
+    </section>
+    <!-- Story Section -->
+    <section id="story" class="section py-24 px-8 md:px-24 flex flex-col md:flex-row items-center">
+        <div class="md:w-1/2 mb-16 md:mb-0 md:pr-12 fade-in">
+            <h2 class="text-4xl md:text-5xl mb-8 gold-text">Born Under Moonlight</h2>
+            <div class="space-y-8 text-lg leading-relaxed">
+                <p class="fade-in" style="transition-delay: 0.2s;">Born in the shadows of moonlight, where secrets whisper and desires awaken.</p>
+                <p class="fade-in" style="transition-delay: 0.4s;">Crafted with emotion in Grasse by master perfumers who dance with shadows.</p>
+                <p class="fade-in" style="transition-delay: 0.6s;">Each drop contains the memory of midnight encounters and unspoken promises.</p>
+            </div>
+        </div>
+        <div class="md:w-1/2 relative fade-in" style="min-height: 400px;">
+            <div class="absolute inset-0 bg-gray-900 opacity-50 rounded-lg"></div>
+            <img src="https://images.unsplash.com/photo-1517842267693-04c7f6ea5025?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2560&q=80"
+                 alt="Woman walking in Paris at night"
+                 class="w-full h-full object-cover rounded-lg">
+            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-32"></div>
+        </div>
+    </section>
+    <!-- Fragrances Section -->
+    <section id="fragrances" class="section py-24 px-8">
+        <h2 class="text-4xl md:text-5xl text-center mb-20 fade-in">The Midnight Collection</h2>
+        <div class="flex flex-col md:flex-row justify-center items-center gap-12">
+            <!-- Noire -->
+            <div class="perfume-container relative fade-in" style="transition-delay: 0.2s;">
+                <img src="https://images.unsplash.com/photo-1615368144591-6e7d8f0a9c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
+                     alt="LUNE Noire"
+                     class="perfume-bottle h-80 object-contain">
+                <div class="scent-note" style="top: -30px; left: 50%; transform: translateX(-50%);">Black Orchid</div>
+                <div class="scent-note" style="bottom: -30px; right: 20%;">Amber</div>
+                <div class="scent-note" style="bottom: 50%; left: -30px;">Patchouli</div>
+                <h3 class="text-2xl mt-6 text-center">LUNE NOIRE</h3>
+                <p class="text-center mt-2 max-w-xs mx-auto">The scent of forbidden desires and velvet nights.</p>
+                <button class="block mx-auto mt-4 px-6 py-2 border border-gray-600 hover:bg-gray-900 transition">Discover</button>
+            </div>
+            <!-- Blanche -->
+            <div class="perfume-container relative fade-in" style="transition-delay: 0.4s;">
+                <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
+                     alt="LUNE Blanche"
+                     class="perfume-bottle h-80 object-contain">
+                <div class="scent-note" style="top: -30px; left: 50%; transform: translateX(-50%);">Jasmine</div>
+                <div class="scent-note" style="bottom: -30px; right: 20%;">Vanilla</div>
+                <div class="scent-note" style="bottom: 50%; left: -30px;">Sandalwood</div>
+                <h3 class="text-2xl mt-6 text-center">LUNE BLANCHE</h3>
+                <p class="text-center mt-2 max-w-xs mx-auto">The purity of moonbeams captured in a bottle.</p>
+                <button class="block mx-auto mt-4 px-6 py-2 border border-gray-600 hover:bg-gray-900 transition">Discover</button>
+            </div>
+            <!-- Solstice -->
+            <div class="perfume-container relative fade-in" style="transition-delay: 0.6s;">
+                <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
+                     alt="LUNE Solstice"
+                     class="perfume-bottle h-80 object-contain">
+                <div class="scent-note" style="top: -30px; left: 50%; transform: translateX(-50%);">Blood Orange</div>
+                <div class="scent-note" style="bottom: -30px; right: 20%;">Tonka Bean</div>
+                <div class="scent-note" style="bottom: 50%; left: -30px;">Oud</div>
+                <h3 class="text-2xl mt-6 text-center">LUNE SOLSTICE</h3>
+                <p class="text-center mt-2 max-w-xs mx-auto">When day meets night in a celestial embrace.</p>
+                <button class="block mx-auto mt-4 px-6 py-2 border border-gray-600 hover:bg-gray-900 transition">Discover</button>
+            </div>
+        </div>
+    </section>
+    <!-- Experience Section -->
+    <section id="experience" class="section relative py-32 px-8">
+        <div class="max-w-5xl mx-auto text-center fade-in">
+            <h2 class="text-4xl md:text-5xl mb-12">This is not perfume.<br>It's memory.</h2>
+            <div class="relative w-full h-96 md:h-[500px] mb-16">
+                <img src="https://images.unsplash.com/photo-1517842267693-04c7f6ea5025?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2560&q=80"
+                     alt="Moody fragrance experience"
+                     class="w-full h-full object-cover rounded-lg">
+                <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-70"></div>
+            </div>
+            <div class="max-w-3xl mx-auto text-lg leading-relaxed space-y-6">
+                <p>"LUNE transforms the ordinary into the extraordinary. Each spritz is an invitation to a world where time stands still."</p>
+                <p class="text-sm">— ELLE Fragrance Awards</p>
+            </div>
+        </div>
+        <div class="scent-trail" style="top: 20%; right: 10%; width: 500px; height: 500px;"></div>
+    </section>
+    <!-- Editorial Gallery -->
+    <section id="journal" class="section py-24 px-8">
+        <h2 class="text-4xl md:text-5xl mb-12 text-center fade-in">The LUNE Journal</h2>
+        <div class="horizontal-scroll pb-12 fade-in">
+            <div class="mr-8">
+                <div class="editorial-image relative h-96 w-full">
+                    <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80"
+                         alt="Midnight in Paris"
+                         class="w-full h-full object-cover rounded-lg">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50 rounded-lg"></div>
+                    <div class="absolute bottom-0 left-0 p-6">
+                        <h3 class="text-2xl">Midnight in Paris</h3>
+                        <p class="text-sm mt-2">Exploring the inspiration behind LUNE Noire</p>
+                    </div>
+                </div>
+            </div>
+            <div class="mr-8">
+                <div class="editorial-image relative h-96 w-full">
+                    <img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80"
+                         alt="The Alchemy of Scent"
+                         class="w-full h-full object-cover rounded-lg">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50 rounded-lg"></div>
+                    <div class="absolute bottom-0 left-0 p-6">
+                        <h3 class="text-2xl">The Alchemy of Scent</h3>
+                        <p class="text-sm mt-2">Our master perfumer's creative process</p>
+                    </div>
+                </div>
+            </div>
+            <div class="mr-8">
+                <div class="editorial-image relative h-96 w-full">
+                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80"
+                         alt="Celestial Inspiration"
+                         class="w-full h-full object-cover rounded-lg">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50 rounded-lg"></div>
+                    <div class="absolute bottom-0 left-0 p-6">
+                        <h3 class="text-2xl">Celestial Inspiration</h3>
+                        <p class="text-sm mt-2">How lunar cycles influence our creations</p>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div class="editorial-image relative h-96 w-full">
+                    <img src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80"
+                         alt="The Art of Seduction"
+                         class="w-full h-full object-cover rounded-lg">
+                    <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50 rounded-lg"></div>
+                    <div class="absolute bottom-0 left-0 p-6">
+                        <h3 class="text-2xl">The Art of Seduction</h3>
+                        <p class="text-sm mt-2">Fragrance as personal signature</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Newsletter -->
+    <section class="section py-32 px-8 relative">
+        <div class="max-w-2xl mx-auto text-center relative z-10 bg-black bg-opacity-70 p-12 rounded-lg fade-in">
+            <h2 class="text-3xl md:text-4xl mb-6">Be First to Smell Tomorrow</h2>
+            <p class="mb-8 max-w-lg mx-auto">Join our exclusive circle and receive early access to limited editions, private events, and lunar-inspired gifts.</p>
+            <form class="flex flex-col md:flex-row gap-4 max-w-md mx-auto">
+                <input type="email" placeholder="Your email address" class="newsletter-input flex-grow px-4 py-3 bg-transparent border rounded-lg focus:outline-none">
+                <button type="submit" class="px-8 py-3 bg-gradient-to-r from-gray-700 to-gray-900 hover:from-gray-600 hover:to-gray-800 transition duration-300 rounded-lg">Subscribe</button>
+            </form>
+        </div>
+        <div class="scent-trail" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px;"></div>
+    </section>
+    <!-- Footer -->
+    <footer class="py-12 px-8 border-t border-gray-800">
+        <div class="max-w-6xl mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="text-2xl font-light tracking-widest mb-6 md:mb-0">LUNE</div>
+                <div class="flex space-x-8 mb-6 md:mb-0">
+                    <a href="#" class="hover:text-gray-300 transition">Shop</a>
+                    <a href="#" class="hover:text-gray-300 transition">Contact</a>
+                    <a href="#" class="hover:text-gray-300 transition">Privacy</a>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="hover:text-gray-300 transition">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
+                        </svg>
+                    </a>
+                    <a href="#" class="hover:text-gray-300 transition">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
+                            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+                            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
+                        </svg>
+                    </a>
+                    <a href="#" class="hover:text-gray-300 transition">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+            <div class="mt-12 text-center text-sm text-gray-500">
+                <p>© 2023 LUNE Fragrances. All rights reserved.</p>
+                <p class="mt-2">Crafted under the moonlight in Paris, France.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize Three.js scene
+        function initThreeJS() {
+            const container = document.getElementById('threejs-container');
+            const scene = new THREE.Scene();
+            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            container.appendChild(renderer.domElement);
+            // Add particles
+            const particlesGeometry = new THREE.BufferGeometry();
+            const particlesCount = 1000;
+            const posArray = new Float32Array(particlesCount * 3);
+            for(let i = 0; i < particlesCount * 3; i++) {
+                posArray[i] = (Math.random() - 0.5) * 10;
+            }
+            particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
+            const particlesMaterial = new THREE.PointsMaterial({
+                size: 0.02,
+                color: 0xd4af37,
+                transparent: true,
+                opacity: 0.8
+            });
+            const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
+            scene.add(particlesMesh);
+            camera.position.z = 3;
+            function animate() {
+                requestAnimationFrame(animate);
+                particlesMesh.rotation.x += 0.0005;
+                particlesMesh.rotation.y += 0.0005;
+                renderer.render(scene, camera);
+            }
+            animate();
+            window.addEventListener('resize', () => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+        }
+        // Initialize GSAP animations
+        function initAnimations() {
+            // Fade in elements on scroll
+            const fadeElements = document.querySelectorAll('.fade-in');
+            fadeElements.forEach(el => {
+                gsap.fromTo(el,
+                    { opacity: 0, y: 20 },
+                    {
+                        opacity: 1,
+                        y: 0,
+                        duration: 1,
+                        scrollTrigger: {
+                            trigger: el,
+                            start: "top 80%",
+                            toggleActions: "play none none none"
+                        }
+                    }
+                );
+            });
+            // Hero section animation
+            gsap.from('h1', {
+                opacity: 0,
+                y: -50,
+                duration: 1.5,
+                ease: "power3.out"
+            });
+            gsap.from('p', {
+                opacity: 0,
+                y: 50,
+                duration: 1.5,
+                delay: 0.3,
+                ease: "power3.out"
+            });
+            gsap.from('#enter-experience', {
+                opacity: 0,
+                y: 50,
+                duration: 1.5,
+                delay: 0.6,
+                ease: "power3.out"
+            });
+            // Scent trail animations
+            const scentTrails = document.querySelectorAll('.scent-trail');
+            scentTrails.forEach(trail => {
+                gsap.to(trail, {
+                    scale: 1.2,
+                    duration: 3,
+                    repeat: -1,
+                    yoyo: true,
+                    ease: "sine.inOut"
+                });
+            });
+            // Horizontal scroll section
+            const horizontalScroll = document.querySelector('.horizontal-scroll');
+            if (horizontalScroll) {
+                gsap.to(horizontalScroll, {
+                    x: () => -(horizontalScroll.scrollWidth - document.documentElement.clientWidth),
+                    ease: "none",
+                    scrollTrigger: {
+                        trigger: ".horizontal-scroll",
+                        pin: true,
+                        scrub: 1,
+                        end: () => "+=" + (horizontalScroll.scrollWidth - document.documentElement.clientWidth)
+                    }
+                });
+            }
+        }
+        // Scroll to section when clicking "Enter Experience"
+        document.getElementById('enter-experience')?.addEventListener('click', () => {
+            document.getElementById('story')?.scrollIntoView({ behavior: 'smooth' });
+        });
+        // Initialize everything when DOM is loaded
+        document.addEventListener('DOMContentLoaded', () => {
+            initThreeJS();
+            initAnimations();
+        });
+        // Intersection Observer for scroll animations
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, { threshold: 0.1 });
+        document.querySelectorAll('.fade-in').forEach(el => {
+            observer.observe(el);
+        });
+    </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=armansid/perfume-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ You are a premium interactive web designer. Create a fully immersive 3D website for a luxury fragrance brand called “LUNE.” The experience should be cinematic, sensual, mysterious, and editorial-inspired, using elegant fonts, real-time 3D environments, advanced scroll effects, parallax animations, and animated models. 🌐 General Design Vibe Feel: Dreamlike, mysterious, immersive — like walking into a dark art gallery in Paris at night. Visual Style: Monochrome with soft gold or pearl iridescence, fog, scent trails, silk cloth motions. Font pairing: Headers: Playfair Display / Cormorant Garamond (Elegant serif) Body: Neue Montreal / Satoshi / Inter (Modern sans-serif) 🧠 Task-Specific 3D Site Features Break down your layout into animated scroll-based scenes or interactive 3D modules: 🎬 1. Intro Scene (Hero Animation - Fullscreen 3D) Camera movement: Smooth cinematic dolly-in toward a floating glass fragrance bottle (LUNE) in space Environment: Dim studio lighting, subtle rotating perfume mist, floating particles Text overlay: LUNE (Serif font, center fade-in) Subtitle: “The Fragrance of Midnight Elegance” Button: "Enter Experience" (Smooth scroll/teleport) 🕯️ 2. Immersive Story Section (3D Split Scroll) Left panel: Scroll-linked vertical video thumbnail (female model walking through Paris alley) Right panel: Animated text blocks fading in word-by-word “Born in the shadows of moonlight” “Crafted with emotion in Grasse” Background: Dim fog layer, scent particles animated in WebGL 🌬️ 3. Product Interaction Gallery (Real-time 3D Viewer) Showcase 3 rotating fragrance bottles (LUNE Noire, Blanche, Solstice) On hover/click: Bottle rotates Background changes to a different ambient theme (e.g., snowy white for Blanche, velvet red for Noire) Scent notes appear as floating glowing labels (3D pinned objects) Include: Short poetic description CTA: “Smell the Memory” / “Shop Now” 🎥 4. Mood Film Section (Autoplay Cinematic Block) Full-width embedded video in 3D frame Scroll-triggered scene blur + desaturation Overlay tagline: “This is not perfume. It’s memory.” Fades into testimonial slider with soft parallax 🖼️ 5. Editorial Gallery (Horizontal 3D Scroll) Parallaxed carousel with high-resolution male/female model shoots Subtle 3D tilt on mouse movement Glass effect overlay + name of the scent when hovered 💌 6. Join The Circle (3D Floating UI Form) Newsletter input form that feels like it's hovering above mist Submit button animates into gold ripple Title: “Be First to Smell Tomorrow.” 🦶 7. Footer (3D Matte Terrain Style) Text and social icons slightly embedded into a matte-like surface Subtle scent waves still animate in background Ultra minimal: LUNE logo, links: Shop / Contact / Privacy 🔧 Interaction Notes Use Three.js, GSAP, Spline, or Webflow 3D plug-ins for animations Ensure low-latency rendering and progressive loading (Lottie + GLTF models) Mobile optimization: reduce poly count + use ambient versions only Allow mouse/gyro rotation for key 3D models on desktop 📦 Assets Required Transparent perfume GLTF models (Noire, Blanche, Solstice) Female and male editorial photos (editorial-style, moody lighting) Short ambient motion videos (mist, fabric waves, moonlight) Custom UI elements in 3D (newsletter form, scroll triggers) ⚠️ Rules No template-like layout No harsh colors, no aggressive transitions Focus on mood, motion, elegance, and mystery Storytelling and interaction > standard eCommerce layout
2	+ insert premium images