Spaces:
Running
Running
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
722af6d
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BrandCraft - Your Ultimate Brand Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .color-palette { | |
| transition: all 0.3s ease; | |
| } | |
| .color-palette:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .font-card { | |
| transition: all 0.3s ease; | |
| } | |
| .font-card:hover { | |
| transform: scale(1.05); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| .color-picker { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| height: 40px; | |
| background: transparent; | |
| cursor: pointer; | |
| border-radius: 8px; | |
| border: 2px solid #e2e8f0; | |
| } | |
| .color-picker::-webkit-color-swatch { | |
| border-radius: 6px; | |
| border: none; | |
| } | |
| .color-picker::-moz-color-swatch { | |
| border-radius: 6px; | |
| border: none; | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f00; | |
| border-radius: 50%; | |
| animation: fall 5s linear forwards; | |
| } | |
| @keyframes fall { | |
| to { | |
| transform: translateY(100vh); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">Brand<span class="text-indigo-600">Craft</span></h1> | |
| <p class="text-gray-600 text-lg">Create your perfect brand identity in minutes</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4 max-w-2xl mx-auto"> | |
| <div id="progressBar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 10%"></div> | |
| </div> | |
| </header> | |
| <!-- Step 1: Brand Personality --> | |
| <section id="step1" class="bg-white rounded-xl shadow-lg p-6 mb-8 transition-all duration-300"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">1</span> | |
| What's your brand personality? | |
| </h2> | |
| <p class="text-gray-600 mb-6">Select up to 3 traits that best describe your brand's personality.</p> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <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"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-lightbulb text-indigo-600"></i> | |
| </div> | |
| <span class="font-medium">Innovative</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-shield-alt text-blue-600"></i> | |
| </div> | |
| <span class="font-medium">Trustworthy</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-smile text-green-600"></i> | |
| </div> | |
| <span class="font-medium">Friendly</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-crown text-purple-600"></i> | |
| </div> | |
| <span class="font-medium">Luxury</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-gamepad text-yellow-600"></i> | |
| </div> | |
| <span class="font-medium">Playful</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-briefcase text-gray-600"></i> | |
| </div> | |
| <span class="font-medium">Professional</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-leaf text-emerald-600"></i> | |
| </div> | |
| <span class="font-medium">Eco-friendly</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-bolt text-red-600"></i> | |
| </div> | |
| <span class="font-medium">Bold</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| <span id="selectedCount">0</span>/3 traits selected | |
| </div> | |
| <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> | |
| Next <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Step 2: Industry --> | |
| <section id="step2" class="bg-white rounded-xl shadow-lg p-6 mb-8 hidden transition-all duration-300"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">2</span> | |
| What industry are you in? | |
| </h2> | |
| <p class="text-gray-600 mb-6">Select the industry that best fits your business.</p> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-laptop-code text-indigo-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium">Technology</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-heartbeat text-blue-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium">Health & Wellness</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-chart-line text-green-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium">Finance</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-graduation-cap text-purple-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium">Education</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-shopping-bag text-yellow-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium">Retail</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-utensils text-red-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium">Food & Beverage</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-paint-brush text-pink-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium">Creative</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-ellipsis-h text-gray-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium">Other</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between items-center"> | |
| <button id="prevStep2" class="text-indigo-600 hover:text-indigo-800 font-medium py-2 px-6 rounded-lg transition flex items-center"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <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> | |
| Next <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Step 3: Color Preferences --> | |
| <section id="step3" class="bg-white rounded-xl shadow-lg p-6 mb-8 hidden transition-all duration-300"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> | |
| <span class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">3</span> | |
| Color Preferences | |
| </h2> | |
| <p class="text-gray-600 mb-6">Tell us about your color preferences to help generate the perfect palette.</p> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Do you have any existing brand colors?</h3> | |
| <div class="flex flex-wrap gap-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="existingColors" class="form-radio text-indigo-600" value="yes"> | |
| <span class="ml-2">Yes</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="existingColors" class="form-radio text-indigo-600" value="no" checked> | |
| <span class="ml-2">No</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div id="colorInputSection" class="hidden"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Enter your existing color (hex code)</h3> | |
| <div class="flex items-center gap-4"> | |
| <input type="color" id="existingColorPicker" class="color-picker"> | |
| <input type="text" id="existingColorHex" class="border border-gray-300 rounded-lg px-3 py-2 w-24" placeholder="#FFFFFF"> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">What color vibe are you going for?</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #FF3E4D, #FF9A3E, #FFD166, #06D6A0, #118AB2, #073B4C);"></div> | |
| <span class="font-medium">Vibrant</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #E2E8F0, #CBD5E0, #A0AEC0, #718096, #4A5568, #2D3748);"></div> | |
| <span class="font-medium">Muted</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #FEE2E2, #FECACA, #FCA5A5, #F87171, #EF4444, #DC2626);"></div> | |
| <span class="font-medium">Warm</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #DBEAFE, #BFDBFE, #93C5FD, #60A5FA, #3B82F6, #2563EB);"></div> | |
| <span class="font-medium">Cool</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #F5F5DC, #E6D5B8, #D2B48C, #BC8F8F, #A0522D, #8B4513);"></div> | |
| <span class="font-medium">Earthy</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-12 h-12 rounded-full mb-2" style="background: linear-gradient(45deg, #F0F9FF, #E0F2FE, #BAE6FD, #7DD3FC, #38BDF8, #0EA5E9);"></div> | |
| <span class="font-medium">Pastel</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between items-center"> | |
| <button id="prevStep3" class="text-indigo-600 hover:text-indigo-800 font-medium py-2 px-6 rounded-lg transition flex items-center"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button id="nextStep3" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition"> | |
| Generate Brand <i class="fas fa-magic ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section id="results" class="hidden"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-2">Your Brand Options</h2> | |
| <p class="text-gray-600">We've generated 3 unique brand identities based on your preferences</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Option 1 --> | |
| <div class="brand-option bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="h-40" id="option1PrimaryColor" style="background-color: #4F46E5;"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Option 1: Modern Professional</h3> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Color Palette</h4> | |
| <div class="flex gap-2 mb-2"> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #4F46E5;" title="Primary"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #7C3AED;" title="Secondary"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #10B981;" title="Accent"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #1E293B;" title="Dark"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #F8FAFC;" title="Light"></div> | |
| </div> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">Customize Colors</button> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Recommended Fonts</h4> | |
| <div class="space-y-3"> | |
| <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Inter', sans-serif;"> | |
| <p class="text-lg">Inter - Clean and versatile</p> | |
| <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> | |
| </div> | |
| <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Poppins', sans-serif;"> | |
| <p class="text-lg">Poppins - Modern geometric</p> | |
| <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| Select This Option | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Option 2 --> | |
| <div class="brand-option bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="h-40" id="option2PrimaryColor" style="background-color: #10B981;"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Option 2: Fresh & Friendly</h3> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Color Palette</h4> | |
| <div class="flex gap-2 mb-2"> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #10B981;" title="Primary"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #3B82F6;" title="Secondary"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #F59E0B;" title="Accent"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #1E293B;" title="Dark"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #F8FAFC;" title="Light"></div> | |
| </div> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">Customize Colors</button> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Recommended Fonts</h4> | |
| <div class="space-y-3"> | |
| <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Nunito', sans-serif;"> | |
| <p class="text-lg">Nunito - Rounded and friendly</p> | |
| <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> | |
| </div> | |
| <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Open Sans', sans-serif;"> | |
| <p class="text-lg">Open Sans - Neutral and legible</p> | |
| <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| Select This Option | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Option 3 --> | |
| <div class="brand-option bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl"> | |
| <div class="h-40" id="option3PrimaryColor" style="background-color: #7C3AED;"></div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Option 3: Bold & Creative</h3> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Color Palette</h4> | |
| <div class="flex gap-2 mb-2"> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #7C3AED;" title="Primary"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #EC4899;" title="Secondary"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #F59E0B;" title="Accent"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #1E293B;" title="Dark"></div> | |
| <div class="w-8 h-8 rounded-full border border-gray-200" style="background-color: #F8FAFC;" title="Light"></div> | |
| </div> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">Customize Colors</button> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium text-gray-700 mb-2">Recommended Fonts</h4> | |
| <div class="space-y-3"> | |
| <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Montserrat', sans-serif;"> | |
| <p class="text-lg">Montserrat - Strong and geometric</p> | |
| <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> | |
| </div> | |
| <div class="font-card p-3 border border-gray-200 rounded-lg" style="font-family: 'Playfair Display', serif;"> | |
| <p class="text-lg">Playfair Display - Elegant serif</p> | |
| <p class="text-sm text-gray-600">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| Select This Option | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <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"> | |
| <i class="fas fa-redo mr-2"></i> Start Over | |
| </button> | |
| </div> | |
| </section> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Step 1: Personality Traits | |
| const personalityCards = document.querySelectorAll('.personality-card'); | |
| const nextStep1Btn = document.getElementById('nextStep1'); | |
| const selectedCount = document.getElementById('selectedCount'); | |
| let selectedTraits = []; | |
| personalityCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| const trait = this.getAttribute('data-trait'); | |
| if (selectedTraits.includes(trait)) { | |
| // Deselect | |
| selectedTraits = selectedTraits.filter(t => t !== trait); | |
| this.classList.remove('border-indigo-500', 'bg-indigo-100'); | |
| this.classList.add('border-gray-200', 'hover:bg-indigo-50'); | |
| } else { | |
| if (selectedTraits.length < 3) { | |
| // Select | |
| selectedTraits.push(trait); | |
| this.classList.add('border-indigo-500', 'bg-indigo-100'); | |
| this.classList.remove('border-gray-200', 'hover:bg-indigo-50'); | |
| } | |
| } | |
| selectedCount.textContent = selectedTraits.length; | |
| nextStep1Btn.disabled = selectedTraits.length === 0; | |
| }); | |
| }); | |
| // Step Navigation | |
| const step1 = document.getElementById('step1'); | |
| const step2 = document.getElementById('step2'); | |
| const step3 = document.getElementById('step3'); | |
| const results = document.getElementById('results'); | |
| const progressBar = document.getElementById('progressBar'); | |
| nextStep1Btn.addEventListener('click', function() { | |
| step1.classList.add('hidden'); | |
| step2.classList.remove('hidden'); | |
| progressBar.style.width = '40%'; | |
| }); | |
| // Step 2: Industry | |
| const industryCards = document.querySelectorAll('.industry-card'); | |
| const nextStep2Btn = document.getElementById('nextStep2'); | |
| const prevStep2Btn = document.getElementById('prevStep2'); | |
| let selectedIndustry = null; | |
| industryCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| industryCards.forEach(c => { | |
| c.classList.remove('border-indigo-500', 'bg-indigo-100'); | |
| c.classList.add('border-gray-200', 'hover:bg-indigo-50'); | |
| }); | |
| this.classList.add('border-indigo-500', 'bg-indigo-100'); | |
| this.classList.remove('border-gray-200', 'hover:bg-indigo-50'); | |
| selectedIndustry = this.getAttribute('data-industry'); | |
| nextStep2Btn.disabled = false; | |
| }); | |
| }); | |
| nextStep2Btn.addEventListener('click', function() { | |
| step2.classList.add('hidden'); | |
| step3.classList.remove('hidden'); | |
| progressBar.style.width = '70%'; | |
| }); | |
| prevStep2Btn.addEventListener('click', function() { | |
| step2.classList.add('hidden'); | |
| step1.classList.remove('hidden'); | |
| progressBar.style.width = '10%'; | |
| }); | |
| // Step 3: Color Preferences | |
| const nextStep3Btn = document.getElementById('nextStep3'); | |
| const prevStep3Btn = document.getElementById('prevStep3'); | |
| const existingColorsYes = document.querySelector('input[name="existingColors"][value="yes"]'); | |
| const existingColorsNo = document.querySelector('input[name="existingColors"][value="no"]'); | |
| const colorInputSection = document.getElementById('colorInputSection'); | |
| const existingColorPicker = document.getElementById('existingColorPicker'); | |
| const existingColorHex = document.getElementById('existingColorHex'); | |
| const vibeCards = document.querySelectorAll('.vibe-card'); | |
| let selectedVibe = null; | |
| existingColorsYes.addEventListener('change', function() { | |
| if (this.checked) { | |
| colorInputSection.classList.remove('hidden'); | |
| } | |
| }); | |
| existingColorsNo.addEventListener('change', function() { | |
| if (this.checked) { | |
| colorInputSection.classList.add('hidden'); | |
| } | |
| }); | |
| existingColorPicker.addEventListener('input', function() { | |
| existingColorHex.value = this.value.toUpperCase(); | |
| }); | |
| existingColorHex.addEventListener('input', function() { | |
| if (this.value.match(/^#[0-9A-F]{6}$/i)) { | |
| existingColorPicker.value = this.value; | |
| } | |
| }); | |
| vibeCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| vibeCards.forEach(c => { | |
| c.classList.remove('border-indigo-500', 'bg-indigo-100'); | |
| c.classList.add('border-gray-200', 'hover:bg-indigo-50'); | |
| }); | |
| this.classList.add('border-indigo-500', 'bg-indigo-100'); | |
| this.classList.remove('border-gray-200', 'hover:bg-indigo-50'); | |
| selectedVibe = this.getAttribute('data-vibe'); | |
| }); | |
| }); | |
| nextStep3Btn.addEventListener('click', function() { | |
| step3.classList.add('hidden'); | |
| results.classList.remove('hidden'); | |
| progressBar.style.width = '100%'; | |
| // Generate random colors based on vibe (simplified for demo) | |
| let primaryColor, secondaryColor, accentColor; | |
| if (selectedVibe === 'vibrant') { | |
| primaryColor = '#4F46E5'; | |
| secondaryColor = '#7C3AED'; | |
| accentColor = '#10B981'; | |
| } else if (selectedVibe === 'muted') { | |
| primaryColor = '#64748B'; | |
| secondaryColor = '#475569'; | |
| accentColor = '#94A3B8'; | |
| } else if (selectedVibe === 'warm') { | |
| primaryColor = '#F59E0B'; | |
| secondaryColor = '#EF4444'; | |
| accentColor = '#F97316'; | |
| } else if (selectedVibe === 'cool') { | |
| primaryColor = '#3B82F6'; | |
| secondaryColor = '#10B981'; | |
| accentColor = '#6366F1'; | |
| } else if (selectedVibe === 'earthy') { | |
| primaryColor = '#A16207'; | |
| secondaryColor = '#713F12'; | |
| accentColor = '#854D0E'; | |
| } else if (selectedVibe === 'pastel') { | |
| primaryColor = '#818CF8'; | |
| secondaryColor = '#7DD3FC'; | |
| accentColor = '#A5B4FC'; | |
| } else { | |
| // Default vibrant colors | |
| primaryColor = '#4F46E5'; | |
| secondaryColor = '#7C3AED'; | |
| accentColor = '#10B981'; | |
| } | |
| // Apply colors to options | |
| document.getElementById('option1PrimaryColor').style.backgroundColor = primaryColor; | |
| document.getElementById('option2PrimaryColor').style.backgroundColor = secondaryColor; | |
| document.getElementById('option3PrimaryColor').style.backgroundColor = accentColor; | |
| // Create confetti effect | |
| createConfetti(); | |
| }); | |
| prevStep3Btn.addEventListener('click', function() { | |
| step3.classList.add('hidden'); | |
| step2.classList.remove('hidden'); | |
| progressBar.style.width = '40%'; | |
| }); | |
| // Restart button | |
| document.getElementById('restartBtn').addEventListener('click', function() { | |
| results.classList.add('hidden'); | |
| step1.classList.remove('hidden'); | |
| progressBar.style.width = '10%'; | |
| // Reset selections | |
| selectedTraits = []; | |
| selectedIndustry = null; | |
| selectedVibe = null; | |
| personalityCards.forEach(card => { | |
| card.classList.remove('border-indigo-500', 'bg-indigo-100'); | |
| card.classList.add('border-gray-200', 'hover:bg-indigo-50'); | |
| }); | |
| industryCards.forEach(card => { | |
| card.classList.remove('border-indigo-500', 'bg-indigo-100'); | |
| card.classList.add('border-gray-200', 'hover:bg-indigo-50'); | |
| }); | |
| vibeCards.forEach(card => { | |
| card.classList.remove('border-indigo-500', 'bg-indigo-100'); | |
| card.classList.add('border-gray-200', 'hover:bg-indigo-50'); | |
| }); | |
| existingColorsNo.checked = true; | |
| colorInputSection.classList.add('hidden'); | |
| selectedCount.textContent = '0'; | |
| nextStep1Btn.disabled = true; | |
| nextStep2Btn.disabled = true; | |
| }); | |
| // Confetti effect | |
| function createConfetti() { | |
| const colors = ['#4F46E5', '#7C3AED', '#10B981', '#F59E0B', '#EF4444', '#3B82F6']; | |
| for (let i = 0; i < 100; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| confetti.style.left = Math.random() * 100 + 'vw'; | |
| confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.animationDuration = (Math.random() * 3 + 2) + 's'; | |
| confetti.style.animationDelay = (Math.random() * 2) + 's'; | |
| document.body.appendChild(confetti); | |
| // Remove confetti after animation | |
| setTimeout(() => { | |
| confetti.remove(); | |
| }, 5000); | |
| } | |
| } | |
| }); | |
| </script> | |
| <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> | |
| </html> |