Hugging Face's logo

Spaces:
Speedodude
/
speedodude-splash
Running

App Files Community
Speedodude commited on
Commit
2b8a78b
·
verified ·
1 Parent(s): dc4b7e3

It is a personalized clothing store. We will have ai image generation, and sell user created products/NFTs

Browse files
Files changed (1) hide show
  1. index.html +48 -32
index.html CHANGED
@@ -3,9 +3,9 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SpeedoDude - Coming Soon</title>
7
- <link rel="icon" type="image/x-icon" href="https://static.photos/sport/200x200/42">
8
- <link rel="stylesheet" href="style.css">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
@@ -24,40 +24,56 @@
24
 
25
  <!-- Main Container -->
26
  <div class="relative min-h-screen flex flex-col lg:flex-row items-center justify-center p-4">
27
-
28
- <!-- Left Advertising Column -->
29
- <aside class="w-full lg:w-1/4 lg:h-screen flex items-center justify-center p-4 order-2 lg:order-1">
30
- <div class="ad-container-left glass-card rounded-2xl p-6 text-center transform hover:scale-105 transition-all duration-300">
31
- <h3 class="text-white text-xl font-bold mb-4 gradient-text">Premium Gear</h3>
32
- <div class="ad-content space-y-4">
33
- <img src="https://static.photos/sport/320x240/123" alt="Swimming gear" class="rounded-lg mx-auto shadow-lg">
34
- <img src="https://static.photos/sport/320x240/124" alt="Training equipment" class="rounded-lg mx-auto shadow-lg">
 
 
 
 
 
 
 
 
35
  </div>
36
- <p class="text-blue-200 text-sm mt-4 italic">Discover the ultimate swim collection</p>
37
  </div>
38
- </aside>
 
 
 
 
39
 
40
- <!-- Center Content -->
41
- <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">
42
- <div class="glass-card rounded-3xl p-8 md:p-12 max-w-lg w-full">
43
- <!-- Logo placeholder -->
44
- <div class="logo-container mb-8">
45
- <img src="https://static.photos/sport/200x200/42" alt="SpeedoDude Logo" class="w-32 h-32 mx-auto rounded-full border-4 border-white border-opacity-20 shadow-2xl">
46
- <div class="logo-glow absolute inset-0 rounded-full"></div>
47
- </div>
48
 
49
- <!-- Coming Soon text -->
50
- <h1 class="text-5xl md:text-6xl font-black text-white mb-4 tracking-tight">
51
- <span class="gradient-text animate-pulse">COMING</span>
52
- <br>
53
- <span class="text-blue-200">SOON</span>
54
- </h1>
55
-
56
- <p class="text-blue-100 text-xl mb-8 leading-relaxed">
57
- The ultimate destination for speed swimming gear is making waves soon!
58
- </p>
59
 
60
- <!-- Email signup -->
 
 
 
 
 
61
  <div class="email-container mt-12">
62
  <form id="signup-form" class="space-y-4">
63
  <div class="relative">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SpeedoDude - AI Custom Fashion NFT Store</title>
7
+ <link rel="icon" type="image/x-icon" href="https://api.dicebear.com/7.x/miniavs/svg?seed=SD&backgroundColor=ff6b35,004e89&clothingColor=f2d349,00b4d8">
8
+ <link rel="stylesheet" href="style.css">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
 
24
 
25
  <!-- Main Container -->
26
  <div class="relative min-h-screen flex flex-col lg:flex-row items-center justify-center p-4">
27
+ <!-- Left Feature Panel -->
28
+ <aside class="w-full lg:w-1/4 lg:h-screen flex items-center justify-center p-4 order-2 lg:order-1">
29
+ <div class="ad-container-left glass-card rounded-2xl p-6 text-center transform hover:scale-105 transition-all duration-300">
30
+ <h3 class="text-white text-xl font-bold mb-4 gradient-text">AI Generated Designs</h3>
31
+ <div class="ad-content space-y-4">
32
+ <div class="relative">
33
+ <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>
34
+ <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">
35
+ <i data-feather="refresh-cw" class="w-8 h-8 text-white"></i>
36
+ </button>
37
+ </div>
38
+ <div class="relative">
39
+ <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>
40
+ <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">
41
+ <i data-feather="refresh-cw" class="w-8 h-8 text-white"></i>
42
+ </button>
43
  </div>
 
44
  </div>
45
+ <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">
46
+ Generate New NFT Patterns
47
+ </button>
48
+ </div>
49
+ </aside>
50
 
51
+ <!-- Center Content -->
52
+ <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">
53
+ <div class="glass-card rounded-3xl p-8 md:p-12 max-w-lg w-full">
54
+ <!-- Logo placeholder -->
55
+ <div class="logo-container mb-8">
56
+ <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">
57
+ <div class="logo-glow absolute inset-0 rounded-full"></div>
58
+ </div>
59
 
60
+ <!-- Main Title -->
61
+ <h1 class="text-5xl md:text-6xl font-black text-white mb-4 tracking-tight">
62
+ <span class="gradient-text animate-pulse">CUSTOM</span>
63
+ <br>
64
+ <span class="text-blue-200">NFT FASHION</span>
65
+ </h1>
66
+
67
+ <p class="text-blue-100 text-xl mb-8 leading-relaxed">
68
+ Create, mint & sell AI-generated custom apparel designs. Own your unique fashion NFTs!
69
+ </p>
70
 
71
+ <!-- Mint NFT Button -->
72
+ <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">
73
+ <i data-feather="zap" class="inline w-6 h-6 mr-2"></i>
74
+ Mint Your First NFT Design
75
+ </button>
76
+ <!-- Email signup -->
77
  <div class="email-container mt-12">
78
  <form id="signup-form" class="space-y-4">
79
  <div class="relative">