TainonVL/logowizard-express
0
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>LogoBrief Express - Briefing de Logotipo</title>7 <link rel="preconnect" href="https://fonts.googleapis.com">8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>9 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">10 <script src="https://cdn.tailwindcss.com"></script>11 <script src="https://unpkg.com/feather-icons"></script>12 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>13 <script>14 tailwind.config = {15 theme: {16 extend: {17 colors: {18 primary: '#ff006e',19 'primary-dark': '#c40055',20 },21 fontFamily: {22 poppins: ['Poppins', 'sans-serif'],23 },24 }25 }26 }27 </script>28 <style>29 .form-section {30 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);31 transition: all 0.3s ease;32 }33 .form-section:hover {34 box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);35 }36 .checkbox-item:checked + .checkmark {37 background-color: #ff006e;38 border-color: #ff006e;39 }40 </style>41</head>42<body class="font-poppins bg-gray-50 min-h-screen">43 <div class="container mx-auto px-4 py-12 max-w-4xl">44 <!-- Header -->45 <header class="text-center mb-12">46 <h1 class="text-4xl font-bold mb-2">Briefing Logotipo</h1>47 <p class="text-xl text-gray-600">Criação de Logotipo Profissional</p>48 <div class="w-24 h-1 bg-primary mx-auto mt-4 rounded-full"></div>49 </header>50 51 <!-- Form Container -->52 <div class="bg-white rounded-xl p-8 form-section">53 <form id="logoBriefForm">54 <!-- Basic Info -->55 <section class="mb-10">56 <h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-gray-100 flex items-center">57 <i data-feather="info" class="mr-2 text-primary"></i>58 Informações Básicas59 </h2>60 61 <div class="grid md:grid-cols-2 gap-6">62 <div>63 <label for="brandName" class="block mb-2 font-medium">Nome da Marca*</label>64 <input type="text" id="brandName" required 65 class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition">66 </div>67 68 <div>69 <label for="slogan" class="block mb-2 font-medium">Slogan (opcional)</label>70 <input type="text" id="slogan" 71 class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition">72 </div>73 </div>74 75 <div class="grid md:grid-cols-2 gap-6 mt-6">76 <div>77 <label for="industry" class="block mb-2 font-medium">Segmento de Atuação*</label>78 <input type="text" id="industry" required 79 class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition" 80 placeholder="Ex: Moda Feminina, Tecnologia, Alimentação">81 </div>82 83 <div>84 <label for="target" class="block mb-2 font-medium">Público-Alvo*</label>85 <input type="text" id="target" required 86 class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition" 87 placeholder="Ex: Mulheres 25-35 anos, Empresários">88 </div>89 </div>90 </section>91 92 <!-- Color Preferences -->93 <section class="mb-10">94 <h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-gray-100 flex items-center">95 <i data-feather="droplet" class="mr-2 text-primary"></i>96 Preferências de Cores97 </h2>98 99 <div class="grid md:grid-cols-2 gap-6">100 <div>101 <label for="colors" class="block mb-2 font-medium">Cores Desejadas*</label>102 <input type="text" id="colors" required 103 class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition" 104 placeholder="Ex: Rosa, Preto e Branco ou #ff006e">105 </div>106 107 <div>108 <label for="avoidColors" class="block mb-2 font-medium">Cores a Evitar</label>109 <input type="text" id="avoidColors" 110 class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition" 111 placeholder="Ex: Tons muito fortes">112 </div>113 </div>114 </section>115 116 <!-- Style Preferences -->117 <section class="mb-10">118 <h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-gray-100 flex items-center">119 <i data-feather="pen-tool" class="mr-2 text-primary"></i>120 Estilo Visual121 </h2>122 123 <div class="mb-8">124 <h3 class="text-lg font-medium mb-4">Estilo Desejado* (marque até 3)</h3>125 <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">126 <label class="flex items-center">127 <input type="checkbox" name="style" value="moderno" class="checkbox-item hidden">128 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>129 Moderno130 </label>131 <label class="flex items-center">132 <input type="checkbox" name="style" value="minimalista" class="checkbox-item hidden">133 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>134 Minimalista135 </label>136 <label class="flex items-center">137 <input type="checkbox" name="style" value="luxuoso" class="checkbox-item hidden">138 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>139 Luxuoso140 </label>141 <label class="flex items-center">142 <input type="checkbox" name="style" value="tradicional" class="checkbox-item hidden">143 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>144 Tradicional145 </label>146 <label class="flex items-center">147 <input type="checkbox" name="style" value="divertido" class="checkbox-item hidden">148 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>149 Divertido150 </label>151 </div>152 </div>153 154 <div>155 <h3 class="text-lg font-medium mb-4">Tipo de Logo* (escolha até 2)</h3>156 <div class="grid grid-cols-2 md:grid-cols-3 gap-3">157 <label class="flex items-center">158 <input type="checkbox" name="logoType" value="icon-text" class="checkbox-item hidden">159 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>160 Ícone + Texto161 </label>162 <label class="flex items-center">163 <input type="checkbox" name="logoType" value="text-only" class="checkbox-item hidden">164 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>165 Somente Texto166 </label>167 <label class="flex items-center">168 <input type="checkbox" name="logoType" value="symbol-only" class="checkbox-item hidden">169 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>170 Somente Símbolo171 </label>172 </div>173 </div>174 </section>175 176 <!-- References -->177 <section class="mb-10">178 <h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-gray-100 flex items-center">179 <i data-feather="bookmark" class="mr-2 text-primary"></i>180 Inspirações e Referências181 </h2>182 183 <div class="mb-6">184 <label for="inspiration" class="block mb-2 font-medium">Inspirações/Referências</label>185 <textarea id="inspiration" rows="4" 186 class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition" 187 placeholder="Descreva ou cole links de logotipos que você admira"></textarea>188 </div>189 190 <div>191 <label for="avoid" class="block mb-2 font-medium">O que Evitar no Design</label>192 <textarea id="avoid" rows="4" 193 class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition" 194 placeholder="Elementos, estilos ou conceitos que não devem ser incluídos"></textarea>195 </div>196 </section>197 198 <!-- Usage -->199 <section class="mb-10">200 <h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-gray-100 flex items-center">201 <i data-feather="layers" class="mr-2 text-primary"></i>202 Aplicações do Logotipo203 </h2>204 205 <h3 class="text-lg font-medium mb-4">Onde seu logotipo será usado?*</h3>206 <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">207 <label class="flex items-center">208 <input type="checkbox" name="usage" value="social" class="checkbox-item hidden">209 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>210 Redes Sociais211 </label>212 <label class="flex items-center">213 <input type="checkbox" name="usage" value="website" class="checkbox-item hidden">214 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>215 Website216 </label>217 <label class="flex items-center">218 <input type="checkbox" name="usage" value="uniform" class="checkbox-item hidden">219 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>220 Uniforme221 </label>222 <label class="flex items-center">223 <input type="checkbox" name="usage" value="facade" class="checkbox-item hidden">224 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>225 Fachada226 </label>227 <label class="flex items-center">228 <input type="checkbox" name="usage" value="prints" class="checkbox-item hidden">229 <span class="checkmark w-5 h-5 border border-gray-300 rounded mr-2 flex items-center justify-center"></span>230 Impressos231 </label>232 </div>233 </section>234 235 <!-- Final Notes -->236 <section class="mb-10">237 <h2 class="text-2xl font-semibold mb-6 pb-2 border-b border-gray-100 flex items-center">238 <i data-feather="edit" class="mr-2 text-primary"></i>239 Observações Finais240 </h2>241 242 <label for="notes" class="block mb-2 font-medium">Alguma outra informação importante?</label>243 <textarea id="notes" rows="4" 244 class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition" 245 placeholder="Detalhes adicionais, prazos, preferências específicas..."></textarea>246 </section>247 248 <!-- Submit Button -->249 <div class="text-center">250 <button type="submit" class="bg-primary hover:bg-primary-dark text-white font-bold py-4 px-12 rounded-full text-lg transition duration-300 transform hover:scale-105 shadow-lg">251 Enviar Todos os Dados252 </button>253</div>254 </form>255 256 <!-- Success Message (hidden by default) -->257 <div id="successMessage" class="hidden text-center p-6 bg-green-50 rounded-lg mt-6">258 <i data-feather="check-circle" class="w-16 h-16 text-green-500 mx-auto mb-4"></i>259 <h3 class="text-2xl font-bold text-green-600 mb-2">✅ Dados Enviados!</h3>260 <p class="text-gray-700">Todos os dados do briefing foram enviados com sucesso. Nossa equipe entrará em contato em breve.</p>261</div>262 </div>263 </div>264 <script>265 feather.replace();266 267 // Handle form submission268 document.getElementById('logoBriefForm').addEventListener('submit', function(e) {269 e.preventDefault();270 271 const formData = new FormData(e.target);272 const data = Object.fromEntries(formData.entries());273 274 // Format the message for WhatsApp275 let whatsappMessage = "Novo Briefing de Logo:\n\n";276 whatsappMessage += `*Nome da Marca:* ${data.brandName}\n`;277 if(data.slogan) whatsappMessage += `*Slogan:* ${data.slogan}\n`;278 whatsappMessage += `*Segmento:* ${data.industry}\n`;279 whatsappMessage += `*Público-Alvo:* ${data.target}\n\n`;280 281 whatsappMessage += `*Cores Desejadas:* ${data.colors}\n`;282 if(data.avoidColors) whatsappMessage += `*Cores a Evitar:* ${data.avoidColors}\n\n`;283 284 // Get checked styles285 const styles = Array.from(document.querySelectorAll('input[name="style"]:checked')).map(el => el.value).join(', ');286 whatsappMessage += `*Estilos Preferidos:* ${styles}\n`;287 288 // Get checked logo types289 const logoTypes = Array.from(document.querySelectorAll('input[name="logoType"]:checked')).map(el => el.value).join(', ');290 whatsappMessage += `*Tipos de Logo:* ${logoTypes}\n\n`;291 292 if(data.inspiration) whatsappMessage += `*Inspirações:* ${data.inspiration}\n`;293 if(data.avoid) whatsappMessage += `*Elementos a Evitar:* ${data.avoid}\n\n`;294 295 // Get checked usages296 const usages = Array.from(document.querySelectorAll('input[name="usage"]:checked')).map(el => el.value).join(', ');297 whatsappMessage += `*Aplicações:* ${usages}\n\n`;298 299 if(data.notes) whatsappMessage += `*Observações Finais:* ${data.notes}\n`;300 301 // Encode for WhatsApp URL302 const encodedMessage = encodeURIComponent(whatsappMessage);303 const whatsappUrl = `https://wa.me/13322312514?text=${encodedMessage}`;304 305 // Open WhatsApp in new tab306 window.open(whatsappUrl, '_blank');307 308 // Hide form and show success message309 document.getElementById('logoBriefForm').classList.add('hidden');310 document.getElementById('successMessage').classList.remove('hidden');311 312 // Scroll to success message313 document.getElementById('successMessage').scrollIntoView({314 behavior: 'smooth'315 });316 });317 // Custom checkbox functionality318 document.querySelectorAll('.checkbox-item').forEach(item => {319 item.addEventListener('change', function() {320 const checkmark = this.nextElementSibling;321 if (this.checked) {322 checkmark.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';323 } else {324 checkmark.innerHTML = '';325 }326 });327 });328</script>329</body>330</html>331