Download index.html from GMA2/pcwjs: direct link, hf CLI and curl.
- Browser
- Download file 30.1 kB
-
https://huggingface.co/spaces/GMA2/pcwjs/resolve/main/index.html
- Command line
-
hf download hf://spaces/GMA2/pcwjs/index.html
-
curl -L -o index.html https://huggingface.co/spaces/GMA2/pcwjs/resolve/main/index.html
30.1 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Pomegranate Café - Immersive Experience</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap'); | |
| :root { | |
| --primary-color: #ef4444; | |
| --secondary-color: #3b82f6; | |
| --accent-color: #8B4513; /* Coffee brown */ | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| background-color: #000; | |
| color: #fff; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .header-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| /* Preloader styles */ | |
| .preloader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.9); | |
| backdrop-filter: blur(10px); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| opacity: 1; | |
| pointer-events: all; | |
| transition: opacity 0.5s ease; | |
| } | |
| .preloader.loaded { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .radial-loader { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| border: 3px solid rgba(255, 255, 255, 0.1); | |
| border-top-color: var(--primary-color); | |
| animation: spin 1s linear infinite; | |
| position: relative; | |
| } | |
| .radial-loader::after { | |
| content: ''; | |
| position: absolute; | |
| top: 5px; | |
| left: 5px; | |
| right: 5px; | |
| bottom: 5px; | |
| border-radius: 50%; | |
| border: 3px solid rgba(255, 255, 255, 0.1); | |
| border-top-color: var(--secondary-color); | |
| animation: spin 2s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .progress-text { | |
| margin-top: 20px; | |
| font-size: 1.2rem; | |
| color: white; | |
| } | |
| .progress-bar-container { | |
| width: 300px; | |
| height: 10px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 5px; | |
| margin-top: 20px; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| width: 0%; | |
| background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); | |
| border-radius: 5px; | |
| transition: width 0.3s ease; | |
| } | |
| /* Hero section */ | |
| .hero-section { | |
| position: relative; | |
| height: 100vh; | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 10; | |
| text-align: center; | |
| padding: 0 20px; | |
| max-width: 1200px; | |
| } | |
| /* Button styles */ | |
| .journey-btn { | |
| position: relative; | |
| display: inline-block; | |
| padding: 18px 36px; | |
| font-size: 1.2rem; | |
| font-weight: 500; | |
| color: white; | |
| background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); | |
| border: none; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); | |
| } | |
| .journey-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 25px rgba(239, 68, 68, 0.8); | |
| } | |
| .journey-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, var(--secondary-color), var(--primary-color)); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| z-index: -1; | |
| } | |
| .journey-btn:hover::before { | |
| opacity: 1; | |
| } | |
| .particle { | |
| position: absolute; | |
| background-color: var(--primary-color); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 100; | |
| } | |
| /* Scroll content */ | |
| .scroll-content { | |
| position: relative; | |
| z-index: 10; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| } | |
| .scroll-section { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 80px 20px; | |
| } | |
| /* Book section */ | |
| .book-section { | |
| background-color: rgba(0, 0, 0, 0.8); | |
| padding: 60px 0; | |
| } | |
| /* Product cards */ | |
| .product-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| transition: transform 0.3s ease; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-10px); | |
| } | |
| .product-image { | |
| height: 300px; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .add-to-cart { | |
| background-color: var(--accent-color); | |
| color: white; | |
| border: none; | |
| padding: 12px 24px; | |
| border-radius: 30px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .add-to-cart:hover { | |
| background-color: #a0522d; | |
| transform: scale(1.05); | |
| } | |
| /* About author */ | |
| .author-section { | |
| background-color: rgba(0, 0, 0, 0.9); | |
| } | |
| .author-image { | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 5px solid var(--accent-color); | |
| } | |
| /* Newsletter form */ | |
| .newsletter-form { | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .form-input { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: white; | |
| padding: 15px 20px; | |
| border-radius: 30px; | |
| width: 100%; | |
| margin-bottom: 15px; | |
| } | |
| .form-input::placeholder { | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .submit-btn { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 15px 30px; | |
| border-radius: 30px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| width: 100%; | |
| } | |
| .submit-btn:hover { | |
| background-color: #dc2626; | |
| transform: translateY(-3px); | |
| } | |
| /* Contact form */ | |
| .contact-form { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| textarea.form-input { | |
| min-height: 150px; | |
| } | |
| /* Footer */ | |
| .footer { | |
| background-color: #111; | |
| padding: 60px 0 30px; | |
| text-align: center; | |
| } | |
| .social-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| margin: 0 8px; | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| background-color: var(--accent-color); | |
| transform: translateY(-3px); | |
| } | |
| .back-to-top { | |
| display: inline-block; | |
| margin-top: 30px; | |
| color: var(--accent-color); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .back-to-top:hover { | |
| text-decoration: underline; | |
| } | |
| /* Success message */ | |
| .success-message { | |
| display: none; | |
| background: rgba(0, 200, 0, 0.2); | |
| padding: 20px; | |
| border-radius: 10px; | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Preloader --> | |
| <div class="preloader"> | |
| <div class="radial-loader"></div> | |
| <div class="progress-text">Loading immersive experience... 0%</div> | |
| <div class="progress-bar-container"> | |
| <div class="progress-bar"></div> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="hero-section"> | |
| <div class="hero-content"> | |
| <h1 class="header-font text-5xl md:text-7xl lg:text-8xl font-bold mb-6"> | |
| The Pomegranate Café | |
| </h1> | |
| <p class="text-xl md:text-2xl max-w-2xl mx-auto mb-12"> | |
| An immersive journey through the world of J.L. Robb's novel | |
| </p> | |
| <button id="journeyBtn" class="journey-btn"> | |
| Begin Your Journey | |
| </button> | |
| </div> | |
| <!-- Background elements --> | |
| <div class="absolute inset-0 bg-black opacity-50 z-0"></div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-black z-0"></div> | |
| </section> | |
| <!-- Scroll Content --> | |
| <div class="scroll-content"> | |
| <!-- About the Book Section --> | |
| <section id="about-book" class="scroll-section book-section"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="header-font text-4xl md:text-5xl mb-8 text-center">About The Book</h2> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="The Pomegranate Café Book Cover" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div> | |
| <p class="text-lg mb-4"> | |
| "The Pomegranate Café" is a captivating novel that transports readers to a world of mystery, romance, and intrigue set against the backdrop of a charming café. | |
| </p> | |
| <p class="text-lg mb-4"> | |
| Follow the intertwining stories of the café's unique patrons as their lives unfold in unexpected ways, revealing secrets, passions, and the transformative power of human connection. | |
| </p> | |
| <p class="text-lg"> | |
| J.L. Robb's masterful storytelling weaves together multiple narratives into a rich tapestry that will keep you turning pages late into the night. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- First Product Section --> | |
| <section id="product-1" class="scroll-section"> | |
| <div class="product-card"> | |
| <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80');"></div> | |
| <div class="p-8"> | |
| <h3 class="header-font text-3xl mb-4">The Pomegranate Café - Hardcover Edition</h3> | |
| <p class="text-lg mb-6">The beautifully crafted hardcover edition of J.L. Robb's bestselling novel, perfect for collectors and book lovers alike.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">$24.99</span> | |
| <button class="add-to-cart" data-product="1">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Second Product Section --> | |
| <section id="product-2" class="scroll-section"> | |
| <div class="product-card"> | |
| <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80');"></div> | |
| <div class="p-8"> | |
| <h3 class="header-font text-3xl mb-4">The Pomegranate Café - Paperback Edition</h3> | |
| <p class="text-lg mb-6">The affordable paperback edition of this captivating novel, perfect for reading on the go or sharing with friends.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">$14.99</span> | |
| <button class="add-to-cart" data-product="2">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Third Product Section --> | |
| <section id="product-3" class="scroll-section"> | |
| <div class="product-card"> | |
| <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1511920170033-f839b4c1e4f0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80');"></div> | |
| <div class="p-8"> | |
| <h3 class="header-font text-3xl mb-4">Pomegranate Café Blend Coffee</h3> | |
| <p class="text-lg mb-6">Experience the rich, aromatic coffee blend inspired by the novel's setting. Each purchase supports independent coffee growers.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold">$12.99</span> | |
| <button class="add-to-cart" data-product="3">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Author Section --> | |
| <section id="about-author" class="scroll-section author-section"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="header-font text-4xl md:text-5xl mb-8">About The Author</h2> | |
| <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="J.L. Robb" class="author-image mx-auto mb-8"> | |
| <div class="max-w-2xl mx-auto"> | |
| <p class="text-lg mb-4"> | |
| J.L. Robb is an award-winning author known for her evocative storytelling and richly drawn characters. A former café owner herself, she brings authenticity and warmth to her depiction of the Pomegranate Café and its patrons. | |
| </p> | |
| <p class="text-lg mb-4"> | |
| With degrees in literature and anthropology, Robb's writing is informed by her deep understanding of human nature and cultural traditions. She has published six novels to critical acclaim. | |
| </p> | |
| <p class="text-lg"> | |
| When not writing, Robb can be found exploring coffee shops around the world, collecting vintage teapots, and mentoring emerging writers through her popular workshops. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section id="newsletter" class="scroll-section"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="header-font text-4xl md:text-5xl mb-8">Stay Connected</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto"> | |
| Join our newsletter for exclusive content, behind-the-scenes insights, and updates on new releases. | |
| </p> | |
| <form id="newsletterForm" class="newsletter-form"> | |
| <input type="email" id="newsletterEmail" class="form-input" placeholder="Your email address" required> | |
| <button type="submit" class="submit-btn">Subscribe</button> | |
| </form> | |
| <div id="newsletterSuccess" class="success-message"> | |
| <p class="text-lg">Thank you for subscribing! You'll receive a confirmation email shortly.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="scroll-section"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="header-font text-4xl md:text-5xl mb-8 text-center">Contact Us</h2> | |
| <form id="contactForm" class="contact-form"> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <input type="text" id="contactName" class="form-input" placeholder="Your Name" required> | |
| </div> | |
| <div> | |
| <input type="email" id="contactEmail" class="form-input" placeholder="Your Email" required> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <input type="text" id="contactSubject" class="form-input" placeholder="Subject"> | |
| </div> | |
| <div class="mb-6"> | |
| <textarea id="contactMessage" class="form-input" placeholder="Your Message" required></textarea> | |
| </div> | |
| <button type="submit" class="submit-btn">Send Message</button> | |
| </form> | |
| <div id="contactSuccess" class="success-message mt-6"> | |
| <p class="text-lg">Thank you for your message! We'll get back to you soon.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex justify-center mb-8"> | |
| <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-patreon"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-threads"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-tiktok"></i></a> | |
| <a href="#" class="social-icon"><i class="fas fa-book-open"></i></a> | |
| </div> | |
| <p class="text-sm mb-4"> | |
| © 2025 The Pomegranate Café by J.L. Robb. All rights reserved. | |
| </p> | |
| <a href="#" class="back-to-top">Back to Top</a> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const journeyBtn = document.getElementById('journeyBtn'); | |
| const preloader = document.querySelector('.preloader'); | |
| const progressText = document.querySelector('.progress-text'); | |
| const progressBar = document.querySelector('.progress-bar'); | |
| const newsletterForm = document.getElementById('newsletterForm'); | |
| const newsletterSuccess = document.getElementById('newsletterSuccess'); | |
| const contactForm = document.getElementById('contactForm'); | |
| const contactSuccess = document.getElementById('contactSuccess'); | |
| const addToCartButtons = document.querySelectorAll('.add-to-cart'); | |
| // Particle system for button effect | |
| let particles = []; | |
| // Initialize the page | |
| function initPage() { | |
| // Start with the preloader | |
| simulateLoading(); | |
| // Set up event listeners | |
| setupEventListeners(); | |
| } | |
| // Simulate loading progress | |
| function simulateLoading() { | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 10; | |
| if (progress >= 100) { | |
| progress = 100; | |
| clearInterval(interval); | |
| // Complete loading | |
| setTimeout(() => { | |
| progressText.textContent = "Loading complete!"; | |
| // Hide preloader after a short delay | |
| setTimeout(() => { | |
| preloader.classList.add('loaded'); | |
| setupScrollTrigger(); | |
| }, 500); | |
| }, 300); | |
| } | |
| // Update progress | |
| progressText.textContent = `Loading immersive experience... ${Math.floor(progress)}%`; | |
| progressBar.style.width = `${progress}%`; | |
| }, 300); | |
| } | |
| // Set up scroll trigger for sections | |
| function setupScrollTrigger() { | |
| // Create markers for each section | |
| const sections = [ | |
| '#about-book', | |
| '#product-1', | |
| '#product-2', | |
| '#product-3', | |
| '#about-author', | |
| '#newsletter', | |
| '#contact' | |
| ]; | |
| sections.forEach((section) => { | |
| ScrollTrigger.create({ | |
| trigger: section, | |
| start: "top center", | |
| end: "bottom center", | |
| onEnter: () => { | |
| // Smooth scroll to section | |
| gsap.to(window, { | |
| duration: 1, | |
| scrollTo: section, | |
| ease: "power2.inOut" | |
| }); | |
| } | |
| }); | |
| }); | |
| } | |
| // Create particles for button click effect | |
| function createParticles(x, y, count = 20) { | |
| for (let i = 0; i < count; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| // Random size and color | |
| const size = Math.random() * 10 + 5; | |
| const hue = 20 + Math.random() * 20; // Red-orange range | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.backgroundColor = `hsl(${hue}, 100%, 50%)`; | |
| particle.style.boxShadow = `0 0 ${size}px hsl(${hue}, 100%, 50%)`; | |
| // Position at click point | |
| particle.style.left = `${x}px`; | |
| particle.style.top = `${y}px`; | |
| document.body.appendChild(particle); | |
| // Set random velocity and life | |
| const angle = Math.random() * Math.PI * 2; | |
| const speed = Math.random() * 5 + 2; | |
| const vx = Math.cos(angle) * speed; | |
| const vy = Math.sin(angle) * speed; | |
| const life = Math.random() * 1000 + 500; | |
| particles.push({ | |
| element: particle, | |
| x: x, | |
| y: y, | |
| vx: vx, | |
| vy: vy, | |
| life: life, | |
| update: function() { | |
| this.x += this.vx; | |
| this.y += this.vy; | |
| this.vy += 0.1; // Gravity | |
| this.life -= 16; // Assuming 60fps | |
| this.element.style.left = `${this.x}px`; | |
| this.element.style.top = `${this.y}px`; | |
| this.element.style.opacity = this.life / 1000; | |
| } | |
| }); | |
| } | |
| } | |
| // Set up all event listeners | |
| function setupEventListeners() { | |
| // Button click handler | |
| journeyBtn.addEventListener('click', (e) => { | |
| // Button click effect | |
| gsap.to(journeyBtn, { | |
| scale: 1.1, | |
| boxShadow: '0 0 30px rgba(239, 68, 68, 0.8)', | |
| duration: 0.3, | |
| yoyo: true, | |
| repeat: 1 | |
| }); | |
| // Create particles at click position | |
| createParticles(e.clientX, e.clientY); | |
| }); | |
| // Button hover effects | |
| journeyBtn.addEventListener('mouseenter', () => { | |
| gsap.to(journeyBtn, { | |
| scale: 1.05, | |
| boxShadow: '0 0 25px rgba(239, 68, 68, 0.8)', | |
| duration: 0.3 | |
| }); | |
| }); | |
| journeyBtn.addEventListener('mouseleave', () => { | |
| gsap.to(journeyBtn, { | |
| scale: 1, | |
| boxShadow: '0 0 15px rgba(239, 68, 68, 0.5)', | |
| duration: 0.3 | |
| }); | |
| }); | |
| // Newsletter form submission | |
| newsletterForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Get the email value | |
| const email = document.getElementById('newsletterEmail').value; | |
| // For demo purposes, show the success message | |
| newsletterForm.style.display = 'none'; | |
| newsletterSuccess.style.display = 'block'; | |
| // Reset form | |
| newsletterForm.reset(); | |
| }); | |
| // Contact form submission | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // For demo purposes, show the success message | |
| contactForm.style.display = 'none'; | |
| contactSuccess.style.display = 'block'; | |
| // Reset form | |
| contactForm.reset(); | |
| }); | |
| // Add to cart functionality | |
| addToCartButtons.forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const productId = e.target.getAttribute('data-product'); | |
| // Animation effect | |
| gsap.to(e.target, { | |
| scale: 1.1, | |
| backgroundColor: '#4CAF50', | |
| duration: 0.3, | |
| yoyo: true, | |
| repeat: 1, | |
| onComplete: () => { | |
| e.target.style.backgroundColor = ''; // Reset color | |
| } | |
| }); | |
| console.log(`Added product ${productId} to cart`); | |
| }); | |
| }); | |
| // Back to top functionality | |
| document.querySelector('.back-to-top').addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| gsap.to(window, { | |
| duration: 1, | |
| scrollTo: 0, | |
| ease: "power2.inOut" | |
| }); | |
| }); | |
| // Animation loop for particles | |
| function animateParticles() { | |
| requestAnimationFrame(animateParticles); | |
| // Update particles | |
| if (particles.length > 0) { | |
| for (let i = 0; i < particles.length; i++) { | |
| particles[i].update(); | |
| if (particles[i].life <= 0) { | |
| particles[i].element.remove(); | |
| particles.splice(i, 1); | |
| i--; | |
| } | |
| } | |
| } | |
| } | |
| // Start particle animation | |
| animateParticles(); | |
| } | |
| // Initialize the page when everything is loaded | |
| document.addEventListener('DOMContentLoaded', initPage); | |
| </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=GMA2/pcwjs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |