Spaces:

Speedodude
/

speedodude-splash

Running

App Files Files Community

Speedodude commited on Nov 4, 2025

Commit

778847c

verified ·

1 Parent(s): 3b90354

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.

Browse files

Files changed (1) hide show

index.html +55 -59

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SpeedoDude - AI Custom Fashion NFT Store</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>
@@ -27,28 +27,27 @@
     <!-- 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">AI Generated Designs</h3>
             <div class="ad-content space-y-4">
                 <div class="relative">
-                    <canvas id="ai-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="refresh-cw" class="w-8 h-8 text-white"></i>
                     </button>
                 </div>
                 <div class="relative">
-                    <canvas id="ai-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="refresh-cw" 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">
-Generate New NFT Patterns
             </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 -->
@@ -56,59 +55,58 @@ Generate New NFT Patterns
                 <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">CUSTOM</span>
                 <br>
-                <span class="text-blue-200">NFT FASHION</span>
             </h1>
             <p class="text-blue-100 text-xl mb-8 leading-relaxed">
-                Create, mint & sell AI-generated custom apparel designs. Own your unique fashion NFTs!
             </p>
-            <!-- Mint NFT Button -->
-            <button onclick="launchMintModal()" 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="zap" class="inline w-6 h-6 mr-2"></i>
-                Mint Your First NFT Design
             </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 your email for exclusive deals"
-                                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>
-                                I agree to receive awesome discounts and swimming tips
-                            </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! Check your email for a sweet 20% discount 🏊‍♂️
-                        </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">
@@ -146,20 +144,18 @@ Generate New NFT Patterns
 </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">Pro Athletes</h3>
                 <div class="ad-content space-y-4">
-                    <img src="https://static.photos/sport/320x240/125" alt="Pro swimmer" class="rounded-lg mx-auto shadow-lg">
-                    <img src="https://static.photos/sport/320x240/126" alt="Championship pool" class="rounded-lg mx-auto shadow-lg">
                 </div>
-                <p class="text-blue-200 text-sm mt-4 italic">Get the gear champions trust</p>
             </div>
         </aside>
-    </div>
     <script src="script.js"></script>
     <script>feather.replace();</script>
     <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>

 <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>
     <!-- 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 -->
                 <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>
             </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>