Hugging Face's logo

Spaces:
JayStormX8
/
brand-gen-v1
Running

App Files Community
JayStormX8 commited on
Commit
722af6d
·
verified ·
1 Parent(s): d462d6e

Create a brand generator app where you select what kinds of things you want your brand to represent and then it creates your brand colors in a beautiful way and you can then customize them, and it gives you 3 different options to choose from at the end as well then you can customize. Also have it where it gives options for fonts that would go with your brand colors. Make it comprehensive and fun and gamified. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +709 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Brand Gen V1
3
- emoji: 📈
4
- colorFrom: blue
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: brand-gen-v1
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,709 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BrandCraft - Your Ultimate Brand Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
19
+ }
20
+
21
+ .color-palette {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .color-palette:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ .font-card {
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .font-card:hover {
35
+ transform: scale(1.05);
36
+ }
37
+
38
+ .progress-bar {
39
+ transition: width 0.5s ease;
40
+ }
41
+
42
+ .color-picker {
43
+ -webkit-appearance: none;
44
+ -moz-appearance: none;
45
+ appearance: none;
46
+ width: 100%;
47
+ height: 40px;
48
+ background: transparent;
49
+ cursor: pointer;
50
+ border-radius: 8px;
51
+ border: 2px solid #e2e8f0;
52
+ }
53
+
54
+ .color-picker::-webkit-color-swatch {
55
+ border-radius: 6px;
56
+ border: none;
57
+ }
58
+
59
+ .color-picker::-moz-color-swatch {
60
+ border-radius: 6px;
61
+ border: none;
62
+ }
63
+
64
+ .confetti {
65
+ position: absolute;
66
+ width: 10px;
67
+ height: 10px;
68
+ background-color: #f00;
69
+ border-radius: 50%;
70
+ animation: fall 5s linear forwards;
71
+ }
72
+
73
+ @keyframes fall {
74
+ to {
75
+ transform: translateY(100vh);
76
+ }
77
+ }
78
+ </style>
79
+ </head>
80
+ <body class="gradient-bg min-h-screen">
81
+ <div class="container mx-auto px-4 py-8">
82
+ <!-- Header -->
83
+ <header class="text-center mb-12">
84
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">Brand<span class="text-indigo-600">Craft</span></h1>
85
+ <p class="text-gray-600 text-lg">Create your perfect brand identity in minutes</p>
86
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4 max-w-2xl mx-auto">
87
+ <div id="progressBar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 10%"></div>
88
+ </div>
89
+ </header>
90
+
91
+ <!-- Step 1: Brand Personality -->
92
+ <section id="step1" class="bg-white rounded-xl shadow-lg p-6 mb-8 transition-all duration-300">
93
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
94
+ <span class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">1</span>
95
+ What's your brand personality?
96
+ </h2>
97
+ <p class="text-gray-600 mb-6">Select up to 3 traits that best describe your brand's personality.</p>
98
+
99
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
100
+ <div class="personality-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-trait="innovative">
101
+ <div class="flex items-center">
102
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
103
+ <i class="fas fa-lightbulb text-indigo-600"></i>
104
+ </div>
105
+ <span class="font-medium">Innovative</span>
106
+ </div>
107
+ </div>
108
+ <div class="personality-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-trait="trustworthy">
109
+ <div class="flex items-center">
110
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
111
+ <i class="fas fa-shield-alt text-blue-600"></i>
112
+ </div>
113
+ <span class="font-medium">Trustworthy</span>
114
+ </div>
115
+ </div>
116
+ <div class="personality-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-trait="friendly">
117
+ <div class="flex items-center">
118
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
119
+ <i class="fas fa-smile text-green-600"></i>
120
+ </div>
121
+ <span class="font-medium">Friendly</span>
122
+ </div>
123
+ </div>
124
+ <div class="personality-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-trait="luxury">
125
+ <div class="flex items-center">
126
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
127
+ <i class="fas fa-crown text-purple-600"></i>
128
+ </div>
129
+ <span class="font-medium">Luxury</span>
130
+ </div>
131
+ </div>
132
+ <div class="personality-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-trait="playful">
133
+ <div class="flex items-center">
134
+ <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
135
+ <i class="fas fa-gamepad text-yellow-600"></i>
136
+ </div>
137
+ <span class="font-medium">Playful</span>
138
+ </div>
139
+ </div>
140
+ <div class="personality-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-trait="professional">
141
+ <div class="flex items-center">
142
+ <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-3">
143
+ <i class="fas fa-briefcase text-gray-600"></i>
144
+ </div>
145
+ <span class="font-medium">Professional</span>
146
+ </div>
147
+ </div>
148
+ <div class="personality-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-trait="eco-friendly">
149
+ <div class="flex items-center">
150
+ <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center mr-3">
151
+ <i class="fas fa-leaf text-emerald-600"></i>
152
+ </div>
153
+ <span class="font-medium">Eco-friendly</span>
154
+ </div>
155
+ </div>
156
+ <div class="personality-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-trait="bold">
157
+ <div class="flex items-center">
158
+ <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
159
+ <i class="fas fa-bolt text-red-600"></i>
160
+ </div>
161
+ <span class="font-medium">Bold</span>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="mt-8 flex justify-between items-center">
167
+ <div class="text-sm text-gray-500">
168
+ <span id="selectedCount">0</span>/3 traits selected
169
+ </div>
170
+ <button id="nextStep1" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
171
+ Next <i class="fas fa-arrow-right ml-2"></i>
172
+ </button>
173
+ </div>
174
+ </section>
175
+
176
+ <!-- Step 2: Industry -->
177
+ <section id="step2" class="bg-white rounded-xl shadow-lg p-6 mb-8 hidden transition-all duration-300">
178
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
179
+ <span class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">2</span>
180
+ What industry are you in?
181
+ </h2>
182
+ <p class="text-gray-600 mb-6">Select the industry that best fits your business.</p>
183
+
184
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
185
+ <div class="industry-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-industry="tech">
186
+ <div class="flex flex-col items-center text-center">
187
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-2">
188
+ <i class="fas fa-laptop-code text-indigo-600 text-2xl"></i>
189
+ </div>
190
+ <span class="font-medium">Technology</span>
191
+ </div>
192
+ </div>
193
+ <div class="industry-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-industry="health">
194
+ <div class="flex flex-col items-center text-center">
195
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-2">
196
+ <i class="fas fa-heartbeat text-blue-600 text-2xl"></i>
197
+ </div>
198
+ <span class="font-medium">Health & Wellness</span>
199
+ </div>
200
+ </div>
201
+ <div class="industry-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-industry="finance">
202
+ <div class="flex flex-col items-center text-center">
203
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-2">
204
+ <i class="fas fa-chart-line text-green-600 text-2xl"></i>
205
+ </div>
206
+ <span class="font-medium">Finance</span>
207
+ </div>
208
+ </div>
209
+ <div class="industry-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-industry="education">
210
+ <div class="flex flex-col items-center text-center">
211
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-2">
212
+ <i class="fas fa-graduation-cap text-purple-600 text-2xl"></i>
213
+ </div>
214
+ <span class="font-medium">Education</span>
215
+ </div>
216
+ </div>
217
+ <div class="industry-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-industry="retail">
218
+ <div class="flex flex-col items-center text-center">
219
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
220
+ <i class="fas fa-shopping-bag text-yellow-600 text-2xl"></i>
221
+ </div>
222
+ <span class="font-medium">Retail</span>
223
+ </div>
224
+ </div>
225
+ <div class="industry-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-industry="food">
226
+ <div class="flex flex-col items-center text-center">
227
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-2">
228
+ <i class="fas fa-utensils text-red-600 text-2xl"></i>
229
+ </div>
230
+ <span class="font-medium">Food & Beverage</span>
231
+ </div>
232
+ </div>
233
+ <div class="industry-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-industry="creative">
234
+ <div class="flex flex-col items-center text-center">
235
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-2">
236
+ <i class="fas fa-paint-brush text-pink-600 text-2xl"></i>
237
+ </div>
238
+ <span class="font-medium">Creative</span>
239
+ </div>
240
+ </div>
241
+ <div class="industry-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-industry="other">
242
+ <div class="flex flex-col items-center text-center">
243
+ <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-2">
244
+ <i class="fas fa-ellipsis-h text-gray-600 text-2xl"></i>
245
+ </div>
246
+ <span class="font-medium">Other</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="mt-8 flex justify-between items-center">
252
+ <button id="prevStep2" class="text-indigo-600 hover:text-indigo-800 font-medium py-2 px-6 rounded-lg transition flex items-center">
253
+ <i class="fas fa-arrow-left mr-2"></i> Back
254
+ </button>
255
+ <button id="nextStep2" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
256
+ Next <i class="fas fa-arrow-right ml-2"></i>
257
+ </button>
258
+ </div>
259
+ </section>
260
+
261
+ <!-- Step 3: Color Preferences -->
262
+ <section id="step3" class="bg-white rounded-xl shadow-lg p-6 mb-8 hidden transition-all duration-300">
263
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
264
+ <span class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">3</span>
265
+ Color Preferences
266
+ </h2>
267
+ <p class="text-gray-600 mb-6">Tell us about your color preferences to help generate the perfect palette.</p>
268
+
269
+ <div class="space-y-6">
270
+ <div>
271
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Do you have any existing brand colors?</h3>
272
+ <div class="flex flex-wrap gap-4">
273
+ <label class="inline-flex items-center">
274
+ <input type="radio" name="existingColors" class="form-radio text-indigo-600" value="yes">
275
+ <span class="ml-2">Yes</span>
276
+ </label>
277
+ <label class="inline-flex items-center">
278
+ <input type="radio" name="existingColors" class="form-radio text-indigo-600" value="no" checked>
279
+ <span class="ml-2">No</span>
280
+ </label>
281
+ </div>
282
+ </div>
283
+
284
+ <div id="colorInputSection" class="hidden">
285
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Enter your existing color (hex code)</h3>
286
+ <div class="flex items-center gap-4">
287
+ <input type="color" id="existingColorPicker" class="color-picker">
288
+ <input type="text" id="existingColorHex" class="border border-gray-300 rounded-lg px-3 py-2 w-24" placeholder="#FFFFFF">
289
+ </div>
290
+ </div>
291
+
292
+ <div>
293
+ <h3 class="text-lg font-medium text-gray-800 mb-3">What color vibe are you going for?</h3>
294
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
295
+ <div class="vibe-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-vibe="vibrant">
296
+ <div class="flex flex-col items-center text-center">
297
+ <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #FF3E4D, #FF9A3E, #FFD166, #06D6A0, #118AB2, #073B4C);"></div>
298
+ <span class="font-medium">Vibrant</span>
299
+ </div>
300
+ </div>
301
+ <div class="vibe-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-vibe="muted">
302
+ <div class="flex flex-col items-center text-center">
303
+ <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #E2E8F0, #CBD5E0, #A0AEC0, #718096, #4A5568, #2D3748);"></div>
304
+ <span class="font-medium">Muted</span>
305
+ </div>
306
+ </div>
307
+ <div class="vibe-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-vibe="warm">
308
+ <div class="flex flex-col items-center text-center">
309
+ <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #FEE2E2, #FECACA, #FCA5A5, #F87171, #EF4444, #DC2626);"></div>
310
+ <span class="font-medium">Warm</span>
311
+ </div>
312
+ </div>
313
+ <div class="vibe-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-vibe="cool">
314
+ <div class="flex flex-col items-center text-center">
315
+ <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #DBEAFE, #BFDBFE, #93C5FD, #60A5FA, #3B82F6, #2563EB);"></div>
316
+ <span class="font-medium">Cool</span>
317
+ </div>
318
+ </div>
319
+ <div class="vibe-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-vibe="earthy">
320
+ <div class="flex flex-col items-center text-center">
321
+ <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #F5F5DC, #E6D5B8, #D2B48C, #BC8F8F, #A0522D, #8B4513);"></div>
322
+ <span class="font-medium">Earthy</span>
323
+ </div>
324
+ </div>
325
+ <div class="vibe-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-indigo-300 hover:bg-indigo-50" data-vibe="pastel">
326
+ <div class="flex flex-col items-center text-center">
327
+ <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #F0F9FF, #E0F2FE, #BAE6FD, #7DD3FC, #38BDF8, #0EA5E9);"></div>
328
+ <span class="font-medium">Pastel</span>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="mt-8 flex justify-between items-center">
336
+ <button id="prevStep3" class="text-indigo-600 hover:text-indigo-800 font-medium py-2 px-6 rounded-lg transition flex items-center">
337
+ <i class="fas fa-arrow-left mr-2"></i> Back
338
+ </button>
339
+ <button id="nextStep3" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition">
340
+ Generate Brand <i class="fas fa-magic ml-2"></i>
341
+ </button>
342
+ </div>
343
+ </section>
344
+
345
+ <!-- Results Section -->
346
+ <section id="results" class="hidden">
347
+ <div class="text-center mb-8">
348
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Your Brand Options</h2>
349
+ <p class="text-gray-600">We've generated 3 unique brand identities based on your preferences</p>
350
+ </div>
351
+
352
+ <div class="grid md:grid-cols-3 gap-6 mb-8">
353
+ <!-- Option 1 -->
354
+ <div class="brand-option bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
355
+ <div class="h-40" id="option1PrimaryColor" style="background-color: #4F46E5;"></div>
356
+ <div class="p-6">
357
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Option 1: Modern Professional</h3>
358
+
359
+ <div class="mb-6">
360
+ <h4 class="font-medium text-gray-700 mb-2">Color Palette</h4>
361
+ <div class="flex gap-2 mb-2">
362
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #4F46E5;" title="Primary"></div>
363
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #7C3AED;" title="Secondary"></div>
364
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #10B981;" title="Accent"></div>
365
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #1E293B;" title="Dark"></div>
366
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #F8FAFC;" title="Light"></div>
367
+ </div>
368
+ <button class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">Customize Colors</button>
369
+ </div>
370
+
371
+ <div class="mb-6">
372
+ <h4 class="font-medium text-gray-700 mb-2">Recommended Fonts</h4>
373
+ <div class="space-y-3">
374
+ <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Inter', sans-serif;">
375
+ <p class="text-lg">Inter - Clean and versatile</p>
376
+ <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
377
+ </div>
378
+ <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Poppins', sans-serif;">
379
+ <p class="text-lg">Poppins - Modern geometric</p>
380
+ <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition">
386
+ Select This Option
387
+ </button>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- Option 2 -->
392
+ <div class="brand-option bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
393
+ <div class="h-40" id="option2PrimaryColor" style="background-color: #10B981;"></div>
394
+ <div class="p-6">
395
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Option 2: Fresh & Friendly</h3>
396
+
397
+ <div class="mb-6">
398
+ <h4 class="font-medium text-gray-700 mb-2">Color Palette</h4>
399
+ <div class="flex gap-2 mb-2">
400
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #10B981;" title="Primary"></div>
401
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #3B82F6;" title="Secondary"></div>
402
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #F59E0B;" title="Accent"></div>
403
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #1E293B;" title="Dark"></div>
404
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #F8FAFC;" title="Light"></div>
405
+ </div>
406
+ <button class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">Customize Colors</button>
407
+ </div>
408
+
409
+ <div class="mb-6">
410
+ <h4 class="font-medium text-gray-700 mb-2">Recommended Fonts</h4>
411
+ <div class="space-y-3">
412
+ <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Nunito', sans-serif;">
413
+ <p class="text-lg">Nunito - Rounded and friendly</p>
414
+ <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
415
+ </div>
416
+ <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Open Sans', sans-serif;">
417
+ <p class="text-lg">Open Sans - Neutral and legible</p>
418
+ <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition">
424
+ Select This Option
425
+ </button>
426
+ </div>
427
+ </div>
428
+
429
+ <!-- Option 3 -->
430
+ <div class="brand-option bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
431
+ <div class="h-40" id="option3PrimaryColor" style="background-color: #7C3AED;"></div>
432
+ <div class="p-6">
433
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Option 3: Bold & Creative</h3>
434
+
435
+ <div class="mb-6">
436
+ <h4 class="font-medium text-gray-700 mb-2">Color Palette</h4>
437
+ <div class="flex gap-2 mb-2">
438
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #7C3AED;" title="Primary"></div>
439
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #EC4899;" title="Secondary"></div>
440
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #F59E0B;" title="Accent"></div>
441
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #1E293B;" title="Dark"></div>
442
+ <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #F8FAFC;" title="Light"></div>
443
+ </div>
444
+ <button class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">Customize Colors</button>
445
+ </div>
446
+
447
+ <div class="mb-6">
448
+ <h4 class="font-medium text-gray-700 mb-2">Recommended Fonts</h4>
449
+ <div class="space-y-3">
450
+ <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Montserrat', sans-serif;">
451
+ <p class="text-lg">Montserrat - Strong and geometric</p>
452
+ <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
453
+ </div>
454
+ <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Playfair Display', serif;">
455
+ <p class="text-lg">Playfair Display - Elegant serif</p>
456
+ <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition">
462
+ Select This Option
463
+ </button>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="text-center">
469
+ <button id="restartBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-6 rounded-lg transition inline-flex items-center">
470
+ <i class="fas fa-redo mr-2"></i> Start Over
471
+ </button>
472
+ </div>
473
+ </section>
474
+ </div>
475
+
476
+ <script>
477
+ document.addEventListener('DOMContentLoaded', function() {
478
+ // Step 1: Personality Traits
479
+ const personalityCards = document.querySelectorAll('.personality-card');
480
+ const nextStep1Btn = document.getElementById('nextStep1');
481
+ const selectedCount = document.getElementById('selectedCount');
482
+ let selectedTraits = [];
483
+
484
+ personalityCards.forEach(card => {
485
+ card.addEventListener('click', function() {
486
+ const trait = this.getAttribute('data-trait');
487
+
488
+ if (selectedTraits.includes(trait)) {
489
+ // Deselect
490
+ selectedTraits = selectedTraits.filter(t => t !== trait);
491
+ this.classList.remove('border-indigo-500', 'bg-indigo-100');
492
+ this.classList.add('border-gray-200', 'hover:bg-indigo-50');
493
+ } else {
494
+ if (selectedTraits.length < 3) {
495
+ // Select
496
+ selectedTraits.push(trait);
497
+ this.classList.add('border-indigo-500', 'bg-indigo-100');
498
+ this.classList.remove('border-gray-200', 'hover:bg-indigo-50');
499
+ }
500
+ }
501
+
502
+ selectedCount.textContent = selectedTraits.length;
503
+ nextStep1Btn.disabled = selectedTraits.length === 0;
504
+ });
505
+ });
506
+
507
+ // Step Navigation
508
+ const step1 = document.getElementById('step1');
509
+ const step2 = document.getElementById('step2');
510
+ const step3 = document.getElementById('step3');
511
+ const results = document.getElementById('results');
512
+ const progressBar = document.getElementById('progressBar');
513
+
514
+ nextStep1Btn.addEventListener('click', function() {
515
+ step1.classList.add('hidden');
516
+ step2.classList.remove('hidden');
517
+ progressBar.style.width = '40%';
518
+ });
519
+
520
+ // Step 2: Industry
521
+ const industryCards = document.querySelectorAll('.industry-card');
522
+ const nextStep2Btn = document.getElementById('nextStep2');
523
+ const prevStep2Btn = document.getElementById('prevStep2');
524
+ let selectedIndustry = null;
525
+
526
+ industryCards.forEach(card => {
527
+ card.addEventListener('click', function() {
528
+ industryCards.forEach(c => {
529
+ c.classList.remove('border-indigo-500', 'bg-indigo-100');
530
+ c.classList.add('border-gray-200', 'hover:bg-indigo-50');
531
+ });
532
+
533
+ this.classList.add('border-indigo-500', 'bg-indigo-100');
534
+ this.classList.remove('border-gray-200', 'hover:bg-indigo-50');
535
+
536
+ selectedIndustry = this.getAttribute('data-industry');
537
+ nextStep2Btn.disabled = false;
538
+ });
539
+ });
540
+
541
+ nextStep2Btn.addEventListener('click', function() {
542
+ step2.classList.add('hidden');
543
+ step3.classList.remove('hidden');
544
+ progressBar.style.width = '70%';
545
+ });
546
+
547
+ prevStep2Btn.addEventListener('click', function() {
548
+ step2.classList.add('hidden');
549
+ step1.classList.remove('hidden');
550
+ progressBar.style.width = '10%';
551
+ });
552
+
553
+ // Step 3: Color Preferences
554
+ const nextStep3Btn = document.getElementById('nextStep3');
555
+ const prevStep3Btn = document.getElementById('prevStep3');
556
+ const existingColorsYes = document.querySelector('input[name="existingColors"][value="yes"]');
557
+ const existingColorsNo = document.querySelector('input[name="existingColors"][value="no"]');
558
+ const colorInputSection = document.getElementById('colorInputSection');
559
+ const existingColorPicker = document.getElementById('existingColorPicker');
560
+ const existingColorHex = document.getElementById('existingColorHex');
561
+ const vibeCards = document.querySelectorAll('.vibe-card');
562
+ let selectedVibe = null;
563
+
564
+ existingColorsYes.addEventListener('change', function() {
565
+ if (this.checked) {
566
+ colorInputSection.classList.remove('hidden');
567
+ }
568
+ });
569
+
570
+ existingColorsNo.addEventListener('change', function() {
571
+ if (this.checked) {
572
+ colorInputSection.classList.add('hidden');
573
+ }
574
+ });
575
+
576
+ existingColorPicker.addEventListener('input', function() {
577
+ existingColorHex.value = this.value.toUpperCase();
578
+ });
579
+
580
+ existingColorHex.addEventListener('input', function() {
581
+ if (this.value.match(/^#[0-9A-F]{6}$/i)) {
582
+ existingColorPicker.value = this.value;
583
+ }
584
+ });
585
+
586
+ vibeCards.forEach(card => {
587
+ card.addEventListener('click', function() {
588
+ vibeCards.forEach(c => {
589
+ c.classList.remove('border-indigo-500', 'bg-indigo-100');
590
+ c.classList.add('border-gray-200', 'hover:bg-indigo-50');
591
+ });
592
+
593
+ this.classList.add('border-indigo-500', 'bg-indigo-100');
594
+ this.classList.remove('border-gray-200', 'hover:bg-indigo-50');
595
+
596
+ selectedVibe = this.getAttribute('data-vibe');
597
+ });
598
+ });
599
+
600
+ nextStep3Btn.addEventListener('click', function() {
601
+ step3.classList.add('hidden');
602
+ results.classList.remove('hidden');
603
+ progressBar.style.width = '100%';
604
+
605
+ // Generate random colors based on vibe (simplified for demo)
606
+ let primaryColor, secondaryColor, accentColor;
607
+
608
+ if (selectedVibe === 'vibrant') {
609
+ primaryColor = '#4F46E5';
610
+ secondaryColor = '#7C3AED';
611
+ accentColor = '#10B981';
612
+ } else if (selectedVibe === 'muted') {
613
+ primaryColor = '#64748B';
614
+ secondaryColor = '#475569';
615
+ accentColor = '#94A3B8';
616
+ } else if (selectedVibe === 'warm') {
617
+ primaryColor = '#F59E0B';
618
+ secondaryColor = '#EF4444';
619
+ accentColor = '#F97316';
620
+ } else if (selectedVibe === 'cool') {
621
+ primaryColor = '#3B82F6';
622
+ secondaryColor = '#10B981';
623
+ accentColor = '#6366F1';
624
+ } else if (selectedVibe === 'earthy') {
625
+ primaryColor = '#A16207';
626
+ secondaryColor = '#713F12';
627
+ accentColor = '#854D0E';
628
+ } else if (selectedVibe === 'pastel') {
629
+ primaryColor = '#818CF8';
630
+ secondaryColor = '#7DD3FC';
631
+ accentColor = '#A5B4FC';
632
+ } else {
633
+ // Default vibrant colors
634
+ primaryColor = '#4F46E5';
635
+ secondaryColor = '#7C3AED';
636
+ accentColor = '#10B981';
637
+ }
638
+
639
+ // Apply colors to options
640
+ document.getElementById('option1PrimaryColor').style.backgroundColor = primaryColor;
641
+ document.getElementById('option2PrimaryColor').style.backgroundColor = secondaryColor;
642
+ document.getElementById('option3PrimaryColor').style.backgroundColor = accentColor;
643
+
644
+ // Create confetti effect
645
+ createConfetti();
646
+ });
647
+
648
+ prevStep3Btn.addEventListener('click', function() {
649
+ step3.classList.add('hidden');
650
+ step2.classList.remove('hidden');
651
+ progressBar.style.width = '40%';
652
+ });
653
+
654
+ // Restart button
655
+ document.getElementById('restartBtn').addEventListener('click', function() {
656
+ results.classList.add('hidden');
657
+ step1.classList.remove('hidden');
658
+ progressBar.style.width = '10%';
659
+
660
+ // Reset selections
661
+ selectedTraits = [];
662
+ selectedIndustry = null;
663
+ selectedVibe = null;
664
+
665
+ personalityCards.forEach(card => {
666
+ card.classList.remove('border-indigo-500', 'bg-indigo-100');
667
+ card.classList.add('border-gray-200', 'hover:bg-indigo-50');
668
+ });
669
+
670
+ industryCards.forEach(card => {
671
+ card.classList.remove('border-indigo-500', 'bg-indigo-100');
672
+ card.classList.add('border-gray-200', 'hover:bg-indigo-50');
673
+ });
674
+
675
+ vibeCards.forEach(card => {
676
+ card.classList.remove('border-indigo-500', 'bg-indigo-100');
677
+ card.classList.add('border-gray-200', 'hover:bg-indigo-50');
678
+ });
679
+
680
+ existingColorsNo.checked = true;
681
+ colorInputSection.classList.add('hidden');
682
+ selectedCount.textContent = '0';
683
+ nextStep1Btn.disabled = true;
684
+ nextStep2Btn.disabled = true;
685
+ });
686
+
687
+ // Confetti effect
688
+ function createConfetti() {
689
+ const colors = ['#4F46E5', '#7C3AED', '#10B981', '#F59E0B', '#EF4444', '#3B82F6'];
690
+
691
+ for (let i = 0; i < 100; i++) {
692
+ const confetti = document.createElement('div');
693
+ confetti.className = 'confetti';
694
+ confetti.style.left = Math.random() * 100 + 'vw';
695
+ confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
696
+ confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';
697
+ confetti.style.animationDelay = (Math.random() * 2) + 's';
698
+ document.body.appendChild(confetti);
699
+
700
+ // Remove confetti after animation
701
+ setTimeout(() => {
702
+ confetti.remove();
703
+ }, 5000);
704
+ }
705
+ }
706
+ });
707
+ </script>
708
+ <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=JayStormX8/brand-gen-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
709
+ </html>