Spaces:
Running
Running
Design your own custom, personalized gear, nft, and dropshipping from near. Exactly what you're looking for. Sign up for email and get discounts for sure.
778847c
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SpeedoDude - Design Your Own Custom Gear & NFTs</title> | |
| <link rel="icon" type="image/x-icon" href="https://api.dicebear.com/7.x/miniavs/svg?seed=SD&backgroundColor=ff6b35,004e89&clothingColor=f2d349,00b4d8"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 min-h-screen"> | |
| <!-- Animated Background Particles --> | |
| <div class="fixed inset-0 overflow-hidden pointer-events-none"> | |
| <div class="particle absolute w-2 h-2 bg-blue-300 rounded-full opacity-20"></div> | |
| <div class="particle absolute w-3 h-3 bg-purple-300 rounded-full opacity-15"></div> | |
| <div class="particle absolute w-1 h-1 bg-white rounded-full opacity-25"></div> | |
| <!-- More particles will be added via JavaScript --> | |
| </div> | |
| <!-- Glass morphic overlay --> | |
| <div class="glass-overlay absolute inset-0 pointer-events-none"></div> | |
| <!-- Main Container --> | |
| <div class="relative min-h-screen flex flex-col lg:flex-row items-center justify-center p-4"> | |
| <!-- Left Feature Panel --> | |
| <aside class="w-full lg:w-1/4 lg:h-screen flex items-center justify-center p-4 order-2 lg:order-1"> | |
| <div class="ad-container-left glass-card rounded-2xl p-6 text-center transform hover:scale-105 transition-all duration-300"> | |
| <h3 class="text-white text-xl font-bold mb-4 gradient-text">Personalize Everything</h3> | |
| <div class="ad-content space-y-4"> | |
| <div class="relative"> | |
| <canvas id="custom-preview-1" width="320" height="240" class="rounded-lg mx-auto shadow-lg bg-gradient-to-br from-purple-500 to-pink-500"></canvas> | |
| <button class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300"> | |
| <i data-feather="edit-3" class="w-8 h-8 text-white"></i> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <canvas id="custom-preview-2" width="320" height="240" class="rounded-lg mx-auto shadow-lg bg-gradient-to-br from-cyan-500 to-blue-500"></canvas> | |
| <button class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300"> | |
| <i data-feather="edit-3" class="w-8 h-8 text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button onclick="generatePreviews()" class="mt-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-full text-sm font-semibold hover:shadow-lg transition-all duration-300 cursor-pointer"> | |
| Customize Your Design | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Center Content --> | |
| <main class="w-full lg:w-1/2 flex flex-col items-center justify-center text-center z-10 order-1 lg:order-2 py-8"> | |
| <div class="glass-card rounded-3xl p-8 md:p-12 max-w-lg w-full"> | |
| <!-- Logo placeholder --> | |
| <div class="logo-container mb-8"> | |
| <img src="https://api.dicebear.com/7.x/miniavs/svg?seed=SD&backgroundColor=ff6b35,004e89&clothingColor=f2d349,00b4d8" alt="SpeedoDude Logo" class="w-32 h-32 mx-auto rounded-full border-4 border-white border-opacity-20 shadow-2xl"> | |
| <div class="logo-glow absolute inset-0 rounded-full"></div> | |
| </div> | |
| <!-- Main Title --> | |
| <h1 class="text-5xl md:text-6xl font-black text-white mb-4 tracking-tight"> | |
| <span class="gradient-text animate-pulse">DESIGN YOUR</span> | |
| <br> | |
| <span class="text-blue-200">CUSTOM GEAR</span> | |
| </h1> | |
| <p class="text-blue-100 text-xl mb-8 leading-relaxed"> | |
| Create personalized swimwear, mint as NFTs, and dropship from local partners. Exactly what you're looking for! | |
| </p> | |
| <!-- Design Studio Button --> | |
| <button onclick="launchDesignStudio()" class="w-full bg-gradient-to-r from-yellow-400 to-orange-500 text-white py-4 px-6 rounded-full font-bold text-lg shadow-lg hover:shadow-2xl transform hover:scale-105 transition-all duration-300 mb-4 cursor-pointer"> | |
| <i data-feather="edit-3" class="inline w-6 h-6 mr-2"></i> | |
| Start Designing Now | |
| </button> | |
| <!-- Email signup --> | |
| <div class="email-container mt-12"> | |
| <form id="signup-form" class="space-y-4"> | |
| <div class="relative"> | |
| <input | |
| type="email" | |
| id="email-input" | |
| placeholder="Enter email for 25% off + free shipping" | |
| class="w-full px-6 py-4 pr-16 rounded-full bg-white bg-opacity-10 border border-white border-opacity-20 text-white placeholder-blue-200 focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-50 transition-all duration-300" | |
| required | |
| > | |
| <button | |
| type="submit" | |
| class="absolute right-2 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full hover:from-purple-600 hover:to-blue-500 transition-all duration-300 shadow-lg hover:shadow-2xl group cursor-pointer" | |
| > | |
| <i data-feather="arrow-right" class="w-6 h-6 text-white transform transition-transform duration-300 group-hover:translate-x-1"></i> | |
| </button> | |
| </div> | |
| <div class="text-center"> | |
| <label class="flex items-center justify-center text-sm text-blue-200"> | |
| <input type="checkbox" id="consent" class="mr-2 rounded" required> | |
| Get discounts for sure + local dropshipping updates | |
| </label> | |
| </div> | |
| </form> | |
| <div id="success-message" class="hidden mt-6"> | |
| <div class="bg-green-500 bg-opacity-20 border border-green-300 rounded-full px-6 py-4 text-white"> | |
| <i data-feather="check-circle" class="inline w-5 h-5 mr-2"></i> | |
| You're in! 25% off code sent to your email 🏊♂️ | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Countdown Timer --> | |
| <div class="countdown-container mt-8"> | |
| <div class="grid grid-cols-4 gap-4 max-w-xs mx-auto"> | |
| <div class="time-unit glass-card rounded-xl p-3"> | |
| <div id="days" class="text-2xl font-bold text-white">00</div> | |
| <div class="text-xs text-blue-200">DAYS</div> | |
| </div> | |
| <div class="time-unit glass-card rounded-xl p-3"> | |
| <div id="hours" class="text-2xl font-bold text-white">00</div> | |
| <div class="text-xs text-blue-200">HRS</div> | |
| </div> | |
| <div class="time-unit glass-card rounded-xl p-3"> | |
| <div id="minutes" class="text-2xl font-bold text-white">00</div> | |
| <div class="text-xs text-blue-200">MIN</div> | |
| </div> | |
| <div class="time-unit glass-card rounded-xl p-3"> | |
| <div id="seconds" class="text-2xl font-bold text-white">00</div> | |
| <div class="text-xs text-blue-200">SEC</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Social Links --> | |
| <div class="social-links absolute bottom-8 left-1/2 transform -translate-x-1/2"> | |
| <div class="flex space-x-4"> | |
| <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="text-blue-300 hover:text-white transition-colors duration-300"> | |
| <i data-feather="instagram" class="w-6 h-6"></i> | |
| </a> | |
| <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="text-blue-300 hover:text-white transition-colors duration-300"> | |
| <i data-feather="facebook" class="w-6 h-6"></i> | |
| </a> | |
| <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" class="text-blue-300 hover:text-white transition-colors duration-300"> | |
| <i data-feather="twitter" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Right Advertising Column --> | |
| <aside class="w-full lg:w-1/4 lg:h-screen flex items-center justify-center p-4 order-3"> | |
| <div class="ad-container-right glass-card rounded-2xl p-6 text-center transform hover:scale-105 transition-all duration-300"> | |
| <h3 class="text-white text-xl font-bold mb-4 gradient-text">Local Dropshipping</h3> | |
| <div class="ad-content space-y-4"> | |
| <img src="https://static.photos/workspace/320x240/127" alt="Local warehouse" class="rounded-lg mx-auto shadow-lg"> | |
| <img src="https://static.photos/transportation/320x240/128" alt="Fast delivery" class="rounded-lg mx-auto shadow-lg"> | |
| </div> | |
| <p class="text-blue-200 text-sm mt-4 italic">Shipped from partners near you</p> | |
| </div> | |
| </aside> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |