Hugging Face's logo

Spaces:
Speedodude
/
speedodude-splash
Running

App Files Community
speedodude-splash
File size: 10,335 Bytes 
dc4b7e3
 
 
 
 
778847c
 
2b8a78b
dc4b7e3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2b8a78b
 
 
778847c
2b8a78b
 
778847c
2b8a78b
778847c
2b8a78b
 
 
778847c
2b8a78b
778847c
2b8a78b
dc4b7e3
 
778847c
 
2b8a78b
 
 
778847c
2b8a78b
 
 
 
 
 
 
 
 
778847c
2b8a78b
778847c
2b8a78b
 
 
778847c
2b8a78b
dc4b7e3
778847c
 
 
 
2b8a78b
dc4b7e3
778847c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
dc4b7e3
778847c
 
 
 
 
 
 
 
dc4b7e3
778847c
 
 
 
 
 
 
 
dc4b7e3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3b90354
dc4b7e3
 
3b90354
dc4b7e3
 
3b90354
dc4b7e3
 
 
3b90354
dc4b7e3
 
 
 
 
778847c
dc4b7e3
778847c
 
dc4b7e3
778847c
dc4b7e3
 
778847c
dc4b7e3
 
3b90354
dc4b7e3
3b90354
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
 
<!DOCTYPE html>
<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>