Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Premium Interactive Experience</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| @keyframes gradientBG { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); | |
| background-size: 400% 400%; | |
| animation: gradientBG 15s ease infinite; | |
| } | |
| .float-animation { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .smooth-transition { | |
| transition: all 0.3s ease; | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .text-gradient { | |
| background: linear-gradient(90deg, #ff8a00, #e52e71); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg text-white font-sans overflow-x-hidden"> | |
| <!-- Loading Screen --> | |
| <div id="loadingScreen" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center"> | |
| <div class="w-24 h-24 border-4 border-t-transparent border-blue-500 rounded-full animate-spin mb-4"></div> | |
| <h2 class="text-2xl font-bold text-gradient">Loading Premium Experience</h2> | |
| <p class="text-gray-300 mt-2">Optimizing for your device...</p> | |
| <div class="w-64 h-1 bg-gray-700 rounded-full mt-4 overflow-hidden"> | |
| <div id="loadingBar" class="h-full bg-blue-500 rounded-full w-0"></div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div id="mainContent" class="hidden"> | |
| <!-- Premium Navigation --> | |
| <nav class="glass-effect fixed top-0 left-0 right-0 z-40 p-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-sparkle text-yellow-400 text-2xl"></i> | |
| <span class="text-xl font-bold text-gradient">PREMIUM+</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-yellow-300 smooth-transition">Features</a> | |
| <a href="#" class="hover:text-yellow-300 smooth-transition">Explore</a> | |
| <a href="#" class="hover:text-yellow-300 smooth-transition">Premium</a> | |
| <a href="#" class="hover:text-yellow-300 smooth-transition">Community</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="notificationBtn" class="relative"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs">3</span> | |
| </button> | |
| <button class="bg-gradient-to-r from-purple-500 to-blue-500 px-4 py-2 rounded-full hover:shadow-lg smooth-transition"> | |
| Upgrade | |
| </button> | |
| <button id="menuBtn" class="md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="fixed top-16 right-0 bg-black bg-opacity-90 w-64 h-full z-30 transform translate-x-full transition-transform duration-300 p-4"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#" class="hover:text-yellow-300 smooth-transition">Features</a> | |
| <a href="#" class="hover:text-yellow-300 smooth-transition">Explore</a> | |
| <a href="#" class="hover:text-yellow-300 smooth-transition">Premium</a> | |
| <a href="#" class="hover:text-yellow-300 smooth-transition">Community</a> | |
| <button class="bg-gradient-to-r from-purple-500 to-blue-500 px-4 py-2 rounded-full mt-4">Sign In</button> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="pt-24 pb-16 px-4 md:px-8 lg:px-16"> | |
| <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-6"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight"> | |
| <span class="text-gradient">Elevate</span> Your Digital Experience | |
| </h1> | |
| <p class="text-xl text-gray-200"> | |
| Immerse yourself in our premium interactive platform with cutting-edge features, personalized content, and exclusive benefits. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-3 rounded-full font-bold hover:shadow-xl smooth-transition pulse-animation"> | |
| Start Free Trial | |
| </button> | |
| <button class="border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-black smooth-transition"> | |
| Watch Demo | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2 text-sm text-gray-300"> | |
| <i class="fas fa-check-circle text-green-400"></i> | |
| <span>30-day money back guarantee</span> | |
| </div> | |
| </div> | |
| <div class="relative float-animation"> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 bg-gradient-to-r from-purple-500 to-blue-500 rounded-2xl blur opacity-75"></div> | |
| <div class="relative bg-black bg-opacity-50 rounded-2xl p-1"> | |
| <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop" alt="Premium Experience" class="rounded-xl w-full h-auto"> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 bg-gradient-to-r from-yellow-400 to-orange-500 p-4 rounded-full shadow-xl"> | |
| <i class="fas fa-crown text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 px-4 md:px-8 lg:px-16 bg-black bg-opacity-30"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Exclusive <span class="text-gradient">Features</span></h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Discover what makes our platform stand out from the rest with these premium features | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="glass-effect p-6 rounded-xl hover:scale-105 smooth-transition"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-bolt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Lightning Speed</h3> | |
| <p class="text-gray-300">Optimized performance with 99.9% uptime and ultra-fast loading times.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="glass-effect p-6 rounded-xl hover:scale-105 smooth-transition"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-green-500 to-teal-500 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-lock text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Advanced Security</h3> | |
| <p class="text-gray-300">Military-grade encryption and privacy controls to keep your data safe.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="glass-effect p-6 rounded-xl hover:scale-105 smooth-transition"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-pink-500 to-red-500 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-star text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Exclusive Content</h3> | |
| <p class="text-gray-300">Access premium content not available to regular users.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="glass-effect p-6 rounded-xl hover:scale-105 smooth-transition"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-headset text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Priority Support</h3> | |
| <p class="text-gray-300">24/7 dedicated support with faster response times.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="glass-effect p-6 rounded-xl hover:scale-105 smooth-transition"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Advanced Analytics</h3> | |
| <p class="text-gray-300">Detailed insights and personalized recommendations.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="glass-effect p-6 rounded-xl hover:scale-105 smooth-transition"> | |
| <div class="w-14 h-14 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-gem text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">VIP Perks</h3> | |
| <p class="text-gray-300">Special discounts, early access, and VIP treatment.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Demo Section --> | |
| <section class="py-16 px-4 md:px-8 lg:px-16 parallax" style="background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=2070&auto=format&fit=crop');"> | |
| <div class="max-w-6xl mx-auto bg-black bg-opacity-70 rounded-2xl p-8 md:p-12"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Interactive <span class="text-gradient">Demo</span></h2> | |
| <p class="text-xl text-gray-300 mb-8"> | |
| Experience the power of our platform with this interactive demonstration. See how our features can transform your workflow. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="mt-1"> | |
| <i class="fas fa-check-circle text-green-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Real-time Collaboration</h4> | |
| <p class="text-gray-400">Work simultaneously with your team members</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="mt-1"> | |
| <i class="fas fa-check-circle text-green-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">AI-Powered Tools</h4> | |
| <p class="text-gray-400">Smart suggestions and automation</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="mt-1"> | |
| <i class="fas fa-check-circle text-green-400 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Customizable Interface</h4> | |
| <p class="text-gray-400">Tailor the platform to your needs</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div id="demoContainer" class="bg-gray-900 rounded-xl overflow-hidden h-96"> | |
| <div class="h-full flex items-center justify-center"> | |
| <div class="text-center p-6"> | |
| <i class="fas fa-play-circle text-5xl text-blue-400 mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">Interactive Demo</h3> | |
| <p class="text-gray-400 mb-4">Click to experience our platform</p> | |
| <button id="startDemoBtn" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-full smooth-transition"> | |
| Start Demo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="py-16 px-4 md:px-8 lg:px-16"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent <span class="text-gradient">Pricing</span></h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Choose the plan that fits your needs. All plans come with a 30-day money-back guarantee. | |
| </p> | |
| <div class="mt-8 flex justify-center"> | |
| <div class="bg-gray-800 rounded-full p-1 inline-flex"> | |
| <button id="monthlyBtn" class="px-6 py-2 rounded-full bg-blue-600 font-medium">Monthly</button> | |
| <button id="yearlyBtn" class="px-6 py-2 rounded-full text-gray-300 hover:text-white smooth-transition">Yearly (Save 20%)</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Basic Plan --> | |
| <div class="glass-effect rounded-xl p-8 hover:shadow-xl smooth-transition"> | |
| <h3 class="text-xl font-bold mb-2">Starter</h3> | |
| <p class="text-gray-400 mb-6">Perfect for individuals getting started</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$9</span> | |
| <span class="text-gray-400">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| <span>Basic features</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| <span>Limited storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| <span>Community support</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i class="fas fa-times text-gray-500 mr-2"></i> | |
| <span>Premium content</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-full smooth-transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| <!-- Pro Plan (Featured) --> | |
| <div class="relative"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl blur opacity-75"></div> | |
| <div class="relative bg-gradient-to-br from-purple-900 to-pink-900 rounded-xl p-8 hover:shadow-2xl smooth-transition"> | |
| <div class="absolute top-0 right-0 bg-yellow-400 text-black px-3 py-1 text-xs font-bold rounded-bl-lg rounded-tr-lg"> | |
| POPULAR | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Professional</h3> | |
| <p class="text-gray-300 mb-6">For professionals and small teams</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$29</span> | |
| <span class="text-gray-300">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-yellow-400 mr-2"></i> | |
| <span>All Starter features</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-yellow-400 mr-2"></i> | |
| <span>Advanced tools</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-yellow-400 mr-2"></i> | |
| <span>Priority support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-yellow-400 mr-2"></i> | |
| <span>Premium content</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 py-3 rounded-full font-bold smooth-transition"> | |
| Get Professional | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="glass-effect rounded-xl p-8 hover:shadow-xl smooth-transition"> | |
| <h3 class="text-xl font-bold mb-2">Enterprise</h3> | |
| <p class="text-gray-400 mb-6">For large organizations</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$99</span> | |
| <span class="text-gray-400">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| <span>All Professional features</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| <span>Unlimited storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| <span>Dedicated account manager</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| <span>Custom solutions</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-full smooth-transition"> | |
| Contact Sales | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 px-4 md:px-8 lg:px-16 bg-black bg-opacity-30"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our <span class="text-gradient">Clients</span> Say</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Don't just take our word for it. Here's what our premium members have to say. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="glass-effect p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4"> | |
| "This platform has completely transformed how our team works. The premium features are worth every penny!" | |
| </p> | |
| <div class="text-sm text-gray-400"> | |
| Marketing Director, TechCorp | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="glass-effect p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4"> | |
| "The speed and reliability are unmatched. We've tried other solutions but none compare to this premium experience." | |
| </p> | |
| <div class="text-sm text-gray-400"> | |
| CTO, StartupX | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="glass-effect p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Emma Rodriguez</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4"> | |
| "The customer support alone makes the premium subscription worthwhile. They go above and beyond every time." | |
| </p> | |
| <div class="text-sm text-gray-400"> | |
| Creative Director, DesignHub | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 px-4 md:px-8 lg:px-16"> | |
| <div class="max-w-6xl mx-auto bg-gradient-to-r from-purple-900 to-blue-900 rounded-2xl p-8 md:p-12 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Experience?</h2> | |
| <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto"> | |
| Join thousands of satisfied premium members today and unlock the full potential of our platform. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button class="bg-white text-black px-8 py-4 rounded-full font-bold hover:bg-gray-200 smooth-transition pulse-animation"> | |
| Start Free 14-Day Trial | |
| </button> | |
| <button class="border-2 border-white px-8 py-4 rounded-full font-bold hover:bg-white hover:text-black smooth-transition"> | |
| Schedule a Demo | |
| </button> | |
| </div> | |
| <div class="mt-8 flex flex-wrap justify-center gap-6"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>No credit card required</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Cancel anytime</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>30-day money back guarantee</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-50 py-12 px-4 md:px-8 lg:px-16"> | |
| <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-12"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-sparkle text-yellow-400 text-2xl"></i> | |
| <span class="text-xl font-bold text-gradient">PREMIUM+</span> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| The ultimate premium experience for professionals and teams who demand the best. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white smooth-transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white smooth-transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white smooth-transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white smooth-transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Integrations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Updates</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Community</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Webinars</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white smooth-transition">Partners</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="max-w-6xl mx-auto border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 mb-4 md:mb-0"> | |
| © 2023 Premium+. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white smooth-transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-white smooth-transition">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-white smooth-transition">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Action Button --> | |
| <div class="fixed bottom-8 right-8 z-40"> | |
| <button id="chatBtn" class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-xl hover:shadow-2xl smooth-transition"> | |
| <i class="fas fa-comment-dots text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Chat Widget --> | |
| <div id="chatWidget" class="fixed bottom-24 right-8 w-80 bg-gray-900 rounded-t-xl shadow-2xl z-40 transform translate-y-full transition-transform duration-300"> | |
| <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-4 rounded-t-xl flex justify-between items-center"> | |
| <h3 class="font-bold">Premium Support</h3> | |
| <button id="closeChatBtn" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 h-64 overflow-y-auto"> | |
| <div class="flex mb-4"> | |
| <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-3 max-w-xs"> | |
| <p class="text-sm">Hello! How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-800"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Type your message..." class="flex-1 bg-gray-800 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notification Panel --> | |
| <div id="notificationPanel" class="fixed top-16 right-4 w-80 bg-gray-900 rounded-lg shadow-xl z-40 transform translate-x-full transition-transform duration-300"> | |
| <div class="p-4 border-b border-gray-800 flex justify-between items-center"> | |
| <h3 class="font-bold">Notifications</h3> | |
| <button id="clearNotificationsBtn" class="text-blue-400 hover:text-blue-300 text-sm"> | |
| Clear All | |
| </button> | |
| </div> | |
| <div class="max-h-96 overflow-y-auto"> | |
| <!-- Notification 1 --> | |
| <div class="p-4 border-b border-gray-800 hover:bg-gray-800 smooth-transition"> | |
| <div class="flex"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-sm">New Feature Available</h4> | |
| <p class="text-gray-400 text-xs">Check out our latest dashboard updates</p> | |
| <p class="text-gray-500 text-xs mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notification 2 --> | |
| <div class="p-4 border-b border-gray-800 hover:bg-gray-800 smooth-transition"> | |
| <div class="flex"> | |
| <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-gem"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-sm">Premium Perk</h4> | |
| <p class="text-gray-400 text-xs">Your exclusive discount is ready</p> | |
| <p class="text-gray-500 text-xs mt-1">1 day ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notification 3 --> | |
| <div class="p-4 hover:bg-gray-800 smooth-transition"> | |
| <div class="flex"> | |
| <div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-sm">Community Event</h4> | |
| <p class="text-gray-400 text-xs">Join our webinar this Friday</p> | |
| <p class="text-gray-500 text-xs mt-1">3 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 text-center border-t border-gray-800"> | |
| <a href="#" class="text-blue-400 hover:text-blue-300 text-sm">View All Notifications</a> | |
| </div> | |
| </div> | |
| <!-- Ad Banner (Monetization) --> | |
| <div id="adBanner" class="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-800 z-30 p-2 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-bolt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-sm">Limited Time Offer!</h4> | |
| <p class="text-gray-400 text-xs">Get 30% off annual plans. Upgrade now!</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="closeAdBtn" class="text-gray-500 hover:text-white px-2"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <button class="bg-gradient-to-r from-yellow-500 to-orange-500 text-black px-4 py-1 rounded-full text-sm font-bold hover:shadow-md smooth-transition"> | |
| Claim Offer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Error Modal --> | |
| <div id="errorModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center hidden"> | |
| <div class="bg-gray-900 rounded-xl max-w-md w-full p-6 mx-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-red-500 flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> | |
| Error Occurred | |
| </h3> | |
| <button id="closeErrorModalBtn" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p id="errorMessage" class="text-gray-300 mb-6"> | |
| We encountered an issue while loading the premium experience. Please try again later. | |
| </p> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="retryBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg"> | |
| Retry | |
| </button> | |
| <button id="contactSupportBtn" class="border border-gray-700 hover:bg-gray-800 px-4 py-2 rounded-lg"> | |
| Contact Support | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simulate loading | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const loadingScreen = document.getElementById('loadingScreen'); | |
| const loadingBar = document.getElementById('loadingBar'); | |
| const mainContent = document.getElementById('mainContent'); | |
| const errorModal = document.getElementById('errorModal'); | |
| // 10% chance to simulate an error | |
| const hasError = Math.random() < 0.1; | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += 10; | |
| loadingBar.style.width = `${progress}%`; | |
| if (progress >= 100) { | |
| clearInterval(interval); | |
| loadingScreen.style.opacity = '0'; | |
| loadingScreen.style.pointerEvents = 'none'; | |
| setTimeout(() => { | |
| loadingScreen.classList.add('hidden'); | |
| if (hasError) { | |
| errorModal.classList.remove('hidden'); | |
| } else { | |
| mainContent.classList.remove('hidden'); | |
| initializeApp(); | |
| } | |
| }, 500); | |
| } | |
| }, 300); | |
| // Error modal handlers | |
| document.getElementById('closeErrorModalBtn').addEventListener('click', () => { | |
| errorModal.classList.add('hidden'); | |
| }); | |
| document.getElementById('retryBtn').addEventListener('click', () => { | |
| errorModal.classList.add('hidden'); | |
| loadingScreen.classList.remove('hidden'); | |
| loadingScreen.style.opacity = '1'; | |
| loadingScreen.style.pointerEvents = 'auto'; | |
| loadingBar.style.width = '0%'; | |
| // Reset progress | |
| progress = 0; | |
| const retryInterval = setInterval(() => { | |
| progress += 20; | |
| loadingBar.style.width = `${progress}%`; | |
| if (progress >= 100) { | |
| clearInterval(retryInterval); | |
| loadingScreen.style.opacity = '0'; | |
| loadingScreen.style.pointerEvents = 'none'; | |
| setTimeout(() => { | |
| loadingScreen.classList.add('hidden'); | |
| mainContent.classList.remove('hidden'); | |
| initializeApp(); | |
| }, 500); | |
| } | |
| }, 200); | |
| }); | |
| document.getElementById('contactSupportBtn').addEventListener('click', () => { | |
| alert('Redirecting to support...'); | |
| errorModal.classList.add('hidden'); | |
| }); | |
| }); | |
| function initializeApp() { | |
| // Mobile menu toggle | |
| const menuBtn = document.getElementById('menuBtn'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| menuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('translate-x-full'); | |
| }); | |
| // Chat widget toggle | |
| const chatBtn = document.getElementById('chatBtn'); | |
| const chatWidget = document.getElementById('chatWidget'); | |
| const closeChatBtn = document.getElementById('closeChatBtn'); | |
| chatBtn.addEventListener('click', () => { | |
| chatWidget.classList.toggle('translate-y-full'); | |
| }); | |
| closeChatBtn.addEventListener('click', () => { | |
| chatWidget.classList.add('translate-y-full'); | |
| }); | |
| // Notification panel toggle | |
| const notificationBtn = document.getElementById('notificationBtn'); | |
| const notificationPanel = document.getElementById('notificationPanel'); | |
| const clearNotificationsBtn = document.getElementById('clearNotificationsBtn'); | |
| notificationBtn.addEventListener('click', () => { | |
| notificationPanel.classList.toggle('translate-x-full'); | |
| }); | |
| clearNotificationsBtn.addEventListener('click', () => { | |
| alert('All notifications cleared!'); | |
| notificationPanel.classList.add('translate-x-full'); | |
| }); | |
| // Ad banner close | |
| const closeAdBtn = document.getElementById('closeAdBtn'); | |
| const adBanner = document.getElementById('adBanner'); | |
| closeAdBtn.addEventListener('click', () => { | |
| adBanner.style.transform = 'translateY(100%)'; | |
| setTimeout(() => { | |
| adBanner.style.display = 'none'; | |
| }, 300); | |
| }); | |
| // Pricing toggle | |
| const monthlyBtn = document.getElementById('monthlyBtn'); | |
| const yearlyBtn = document.getElementById('yearlyBtn'); | |
| monthlyBtn.addEventListener('click', () => { | |
| if (!monthlyBtn.classList.contains('bg-blue-600')) { | |
| monthlyBtn.classList.add('bg-blue-600'); | |
| yearlyBtn.classList.remove('bg-blue-600'); | |
| yearlyBtn.classList.add('text-gray-300'); | |
| // Update prices | |
| document.querySelectorAll('.pricing .text-4xl').forEach(price => { | |
| const monthlyPrice = price.textContent.match(/\$(\d+)/)[1]; | |
| price.textContent = `$${monthlyPrice}`; | |
| }); | |
| } | |
| }); | |
| yearlyBtn.addEventListener('click', () => { | |
| if (!yearlyBtn.classList.contains('bg-blue-600')) { | |
| yearlyBtn.classList.add('bg-blue-600'); | |
| monthlyBtn.classList.remove('bg-blue-600'); | |
| monthlyBtn.classList.add('text-gray-300'); | |
| // Update prices (20% discount) | |
| document.querySelectorAll('.pricing .text-4xl').forEach(price => { | |
| const monthlyPrice = parseInt(price.textContent.match(/\$(\d+)/)[1]); | |
| const yearlyPrice = Math.floor(monthlyPrice * 12 * 0.8); | |
| price.textContent = `$${yearlyPrice}`; | |
| }); | |
| } | |
| }); | |
| // Interactive demo | |
| const startDemoBtn = document.getElementById('startDemoBtn'); | |
| const demoContainer = document.getElementById('demoContainer'); | |
| startDemoBtn.addEventListener('click', () => { | |
| demoContainer.innerHTML = ` | |
| <div class="h-full flex flex-col"> | |
| <div class="bg-gray-800 p-3 flex items-center justify-between border-b border-gray-700"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm text-gray-400">demo.premiumplus.com</div> | |
| <div class="w-6"></div> | |
| </div> | |
| <div class="flex-1 grid place-items-center p-6"> | |
| <div class="text-center"> | |
| <i class="fas fa-crown text-5xl text-yellow-400 mb-4"></i> | |
| <h3 class="text-2xl font-bold mb-2">Premium Dashboard</h3> | |
| <p class="text-gray-400 mb-6">Experience the power of our premium features</p> | |
| <div class="grid grid-cols-3 gap-4 mb-8"> | |
| <div class="bg-gray-800 p-4 rounded-lg"> | |
| <i class="fas fa-chart-pie text-blue-400 text-2xl mb-2"></i> | |
| <p class="text-sm">Analytics</p> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg"> | |
| <i class="fas fa-cog text-purple-400 text-2xl mb-2"></i> | |
| <p class="text-sm">Settings</p> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg"> | |
| <i class="fas fa-users text-green-400 text-2xl mb-2"></i> | |
| <p class="text-sm">Team</p> | |
| </div> | |
| </div> | |
| <button class="bg-gradient-to-r from-purple-500 to-blue-500 px-6 py-2 rounded-full font-bold"> | |
| Explore More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| // Add smooth scroll to all links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Add scroll animation | |
| const observerOptions = { | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('section').forEach(section => { | |
| observer.observe(section); | |
| }); | |
| // Add a style for the fade-in animation | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.6s ease forwards; | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Track engagement (simulated) | |
| let engagementTime = 0; | |
| const engagementInterval = setInterval(() => { | |
| engagementTime++; | |
| // Simulate sending data to analytics | |
| if (engagementTime % 10 === 0) { | |
| console.log(`User engagement: ${engagementTime} seconds`); | |
| } | |
| }, 1000); | |
| // Monetization: Simulate ad impressions | |
| let adImpressions = 0; | |
| const adInterval = setInterval(() => { | |
| adImpressions++; | |
| // Simulate ad revenue | |
| if (adImpressions % 5 === 0) { | |
| console.log(`Ad impression #${adImpressions} - Revenue generated`); | |
| } | |
| }, 15000); | |
| // Clean up on page exit | |
| window.addEventListener('beforeunload', () => { | |
| clearInterval(engagementInterval); | |
| clearInterval(adInterval); | |
| console.log(`Final engagement time: ${engagementTime} seconds`); | |
| console.log(`Total ad impressions: ${adImpressions}`); | |
| }); | |
| } | |
| </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=BoobyBoobs/premium" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |