Spaces:
Running
Running
| <html lang="cs"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AdGenie | Asistent pro reklamy s AI</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=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --coral: #FF7F6E; | |
| --mint: #8EFFC1; | |
| --sand: #FFF5E0; | |
| --ink: #1A1A2E; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f9f9f9; | |
| color: var(--ink); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #FF9A8B 0%, #FF6B95 50%, #FF8E53 100%); | |
| } | |
| .genie-smoke { | |
| position: relative; | |
| } | |
| .genie-smoke::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 40px; | |
| height: 20px; | |
| background: rgba(255,255,255,0.3); | |
| border-radius: 50%; | |
| filter: blur(8px); | |
| animation: smoke 3s infinite ease-out; | |
| } | |
| @keyframes smoke { | |
| 0% { transform: translateX(-50%) scale(1); opacity: 0.7; } | |
| 50% { transform: translateX(-50%) scale(1.2); opacity: 0.4; } | |
| 100% { transform: translateX(-50%) scale(1.5); opacity: 0; } | |
| } | |
| .confetti-check { | |
| position: relative; | |
| } | |
| .confetti-check::after { | |
| content: "✓"; | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| width: 20px; | |
| height: 20px; | |
| background: var(--mint); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| transform: scale(0); | |
| transition: all 0.3s ease; | |
| } | |
| .confetti-check.active::after { | |
| transform: scale(1); | |
| animation: confetti 0.5s ease-out; | |
| } | |
| @keyframes confetti { | |
| 0% { transform: scale(0); } | |
| 50% { transform: scale(1.2); } | |
| 100% { transform: scale(1); } | |
| } | |
| .chat-bubble { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 60px; | |
| height: 60px; | |
| background: var(--coral); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(255, 127, 110, 0.3); | |
| cursor: pointer; | |
| z-index: 100; | |
| transition: all 0.3s ease; | |
| } | |
| .chat-bubble:hover { | |
| transform: scale(1.1); | |
| } | |
| .chat-window { | |
| position: fixed; | |
| bottom: 90px; | |
| right: 20px; | |
| width: 350px; | |
| height: 500px; | |
| background: white; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| transform: translateY(20px); | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.3s ease; | |
| z-index: 100; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .chat-window.active { | |
| transform: translateY(0); | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .chat-header { | |
| padding: 15px; | |
| background: var(--coral); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| padding: 15px; | |
| overflow-y: auto; | |
| background: #f9f9f9; | |
| } | |
| .message { | |
| margin-bottom: 15px; | |
| max-width: 80%; | |
| padding: 10px 15px; | |
| border-radius: 15px; | |
| font-size: 14px; | |
| line-height: 1.4; | |
| } | |
| .message.ai { | |
| background: white; | |
| border-bottom-left-radius: 5px; | |
| align-self: flex-start; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |
| } | |
| .message.user { | |
| background: var(--coral); | |
| color: white; | |
| border-bottom-right-radius: 5px; | |
| align-self: flex-end; | |
| } | |
| .chat-input { | |
| padding: 15px; | |
| background: white; | |
| border-top: 1px solid #eee; | |
| display: flex; | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| padding: 10px 15px; | |
| border: 1px solid #eee; | |
| border-radius: 30px; | |
| outline: none; | |
| font-size: 14px; | |
| } | |
| .chat-input button { | |
| margin-left: 10px; | |
| background: var(--coral); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| } | |
| .progress-step.active { | |
| background: var(--coral); | |
| color: white; | |
| } | |
| .progress-step.completed { | |
| background: var(--mint); | |
| color: white; | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(255, 127, 110, 0.3); | |
| } | |
| .tab-button.active { | |
| color: var(--coral); | |
| border-bottom: 2px solid var(--coral); | |
| } | |
| .health-indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 5px; | |
| } | |
| .health-good { | |
| background: #4CAF50; | |
| } | |
| .health-warning { | |
| background: #FFC107; | |
| } | |
| .health-critical { | |
| background: #F44336; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .slide-up { | |
| animation: slideUp 0.5s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Úvodní obrazovka --> | |
| <div id="onboarding" class="fixed inset-0 bg-white z-50 flex items-center justify-center p-4 transition-opacity duration-500"> | |
| <div class="max-w-md w-full bg-white rounded-xl shadow-lg overflow-hidden slide-up"> | |
| <div class="gradient-bg p-6 text-white text-center"> | |
| <div class="genie-smoke w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-magic text-3xl text-pink-500"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold mb-2">Vítejte v AdGenie</h1> | |
| <p class="opacity-90">Vytvořte svou první vysoce konverzní reklamu během pár minut</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between mb-6"> | |
| <div class="progress-step w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 text-gray-600 font-medium active">1</div> | |
| <div class="progress-step w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 text-gray-600 font-medium">2</div> | |
| <div class="progress-step w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 text-gray-600 font-medium">3</div> | |
| <div class="progress-step w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 text-gray-600 font-medium">4</div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-3">Jaký je váš hlavní cíl?</h2> | |
| <div class="space-y-3"> | |
| <div class="confetti-check p-4 border border-gray-200 rounded-lg cursor-pointer hover:border-pink-300 transition relative"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full border-2 border-gray-300 mr-3"></div> | |
| <span>Prodat více produktů</span> | |
| </div> | |
| </div> | |
| <div class="confetti-check p-4 border border-gray-200 rounded-lg cursor-pointer hover:border-pink-300 transition relative"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full border-2 border-gray-300 mr-3"></div> | |
| <span>Získat více návštěvníků na web</span> | |
| </div> | |
| </div> | |
| <div class="confetti-check p-4 border border-gray-200 rounded-lg cursor-pointer hover:border-pink-300 transition relative"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full border-2 border-gray-300 mr-3"></div> | |
| <span>Budovat povědomí o značce</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-2">✅ Vyberte 1. Později můžete změnit.</p> | |
| </div> | |
| <button class="w-full bg-pink-500 hover:bg-pink-600 text-white py-3 px-4 rounded-lg font-medium transition flex items-center justify-center"> | |
| Další otázka <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hlavní dashboard (zpočátku skrytý) --> | |
| <div id="dashboard" class="hidden"> | |
| <!-- Horní navigace --> | |
| <nav class="bg-white shadow-sm py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="genie-smoke w-10 h-10 bg-gradient-to-r from-pink-400 to-pink-600 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-magic text-white text-lg"></i> | |
| </div> | |
| <h1 class="text-xl font-bold text-gray-800">AdGenie</h1> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="tab-button active py-2 font-medium">Domů</a> | |
| <a href="#" class="tab-button py-2 font-medium text-gray-500 hover:text-gray-700">Reporty</a> | |
| <a href="#" class="tab-button py-2 font-medium text-gray-500 hover:text-gray-700">Nastavení</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center mr-3"> | |
| <i class="fas fa-bell text-gray-500"></i> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-pink-400 to-pink-600 flex items-center justify-center text-white font-medium"> | |
| B | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hlavní obsah --> | |
| <main class="p-6"> | |
| <!-- Uvítací banner --> | |
| <div class="bg-gradient-to-r from-pink-50 to-pink-100 border border-pink-200 rounded-xl p-6 mb-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-xl font-bold text-gray-800 mb-1">Vítejte zpět, Blaze!</h2> | |
| <p class="text-gray-600">Vaše letní výprodejová kampaň si vede dobře. Pojďme se podívat na čísla.</p> | |
| </div> | |
| <button class="bg-pink-500 hover:bg-pink-600 text-white py-2 px-4 rounded-lg font-medium transition flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nová kampaň | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Karty kampaní --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Karta zdraví kampaně --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 fade-in"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-800">Stav kampaně</h3> | |
| <span class="health-indicator health-good"></span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm text-gray-600">Prodeje</span> | |
| <span class="text-sm font-medium">6</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm text-gray-600">Kliknutí</span> | |
| <span class="text-sm font-medium">178</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm text-gray-600">Zobrazení</span> | |
| <span class="text-sm font-medium">2,110</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-gray-600">Postup k cíli</span> | |
| <span class="text-sm font-medium">60%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-1"> | |
| <div class="bg-pink-500 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Karta souhrnu výkonu --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 fade-in" style="animation-delay: 0.1s"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-800">Přehled výkonu</h3> | |
| <i class="fas fa-chart-line text-blue-500"></i> | |
| </div> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div> | |
| <p class="text-sm text-gray-500">ROAS</p> | |
| <p class="text-2xl font-bold">3.2x</p> | |
| <p class="text-sm text-green-500 flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> o 12% více než minulý týden | |
| </p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">CTR</p> | |
| <p class="text-2xl font-bold">8.4%</p> | |
| <p class="text-sm text-green-500 flex items-center"> | |
| <i class="fas fa-arrow-up mr-1"></i> o 3% více než minulý týden | |
| </p> | |
| </div> | |
| </div> | |
| <div class="h-32 bg-gray-50 rounded-lg p-2"> | |
| <!-- Placeholder pro graf --> | |
| <div class="w-full h-full flex items-end space-x-1"> | |
| <div class="w-4 bg-blue-200 rounded-t-sm" style="height: 30%"></div> | |
| <div class="w-4 bg-blue-300 rounded-t-sm" style="height: 50%"></div> | |
| <div class="w-4 bg-blue-400 rounded-t-sm" style="height: 70%"></div> | |
| <div class="w-4 bg-blue-500 rounded-t-sm" style="height: 90%"></div> | |
| <div class="w-4 bg-blue-400 rounded-t-sm" style="height: 75%"></div> | |
| <div class="w-4 bg-blue-300 rounded-t-sm" style="height: 60%"></div> | |
| <div class="w-4 bg-blue-200 rounded-t-sm" style="height: 40%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between text-xs text-gray-500"> | |
| <span>Po</span> | |
| <span>Út</span> | |
| <span>St</span> | |
| <span>Čt</span> | |
| <span>Pá</span> | |
| <span>So</span> | |
| <span>Ne</span> | |
| </div> | |
| </div> | |
| <!-- Karta návrhů od Genie --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 fade-in" style="animation-delay: 0.2s"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-800">Návrhy od Genie</h3> | |
| <i class="fas fa-lightbulb text-yellow-500"></i> | |
| </div> | |
| <div class="bg-yellow-50 border border-yellow-100 rounded-lg p-4 mb-4"> | |
| <div class="flex items-start"> | |
| <div class="mr-3 text-yellow-500"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800 mb-1">Zvýšit rozpočet na neděli?</p> | |
| <p class="text-sm text-gray-600">Vaše reklamy v neděli fungují o 23% lépe. Zvažte zvýšení rozpočtu o 20$.</p> | |
| <div class="flex space-x-2 mt-3"> | |
| <button class="text-xs bg-yellow-500 hover:bg-yellow-600 text-white py-1 px-3 rounded-full font-medium transition"> | |
| Přijmout | |
| </button> | |
| <button class="text-xs bg-white hover:bg-gray-50 text-gray-600 py-1 px-3 rounded-full font-medium transition border border-gray-200"> | |
| Odmítnout | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 border border-blue-100 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="mr-3 text-blue-500"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800 mb-1">Varianta optimalizovaná pro mobily</p> | |
| <p class="text-sm text-gray-600">72% vašich konverzí pochází z mobilů. Vytvořit mobilní verzi?</p> | |
| <div class="flex space-x-2 mt-3"> | |
| <button class="text-xs bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded-full font-medium transition"> | |
| Vytvořit | |
| </button> | |
| <button class="text-xs bg-white hover:bg-gray-50 text-gray-600 py-1 px-3 rounded-full font-medium transition border border-gray-200"> | |
| Později | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sekce týdenního reportu --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 mb-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-lg font-bold text-gray-800">Týdenní report výkonu</h2> | |
| <button class="text-sm bg-pink-500 hover:bg-pink-600 text-white py-2 px-4 rounded-lg font-medium transition flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Exportovat PDF | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <!-- Souhrnná karta --> | |
| <div class="bg-pink-50 border border-pink-100 rounded-lg p-5"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium text-gray-800">Souhrn</h3> | |
| <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center"> | |
| <i class="fas fa-chart-pie text-pink-500"></i> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <p class="text-sm text-gray-600">Prodeje</p> | |
| <p class="text-xl font-bold">6 <span class="text-sm font-normal text-green-500">(+2 oproti minulému týdnu)</span></p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Kliknutí</p> | |
| <p class="text-xl font-bold">178 <span class="text-sm font-normal text-green-500">(+32 oproti minulému týdnu)</span></p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Náklady</p> | |
| <p class="text-xl font-bold">$87.50 <span class="text-sm font-normal text-gray-500">(+$12.50 oproti minulému týdnu)</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Karta zdrojů konverzí --> | |
| <div class="bg-blue-50 border border-blue-100 rounded-lg p-5"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium text-gray-800">Zdroje konverzí</h3> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-map-marked-alt text-blue-500"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center h-32 mb-2"> | |
| <!-- Placeholder pro koláčový graf --> | |
| <div class="relative w-24 h-24 rounded-full bg-conic-gradient"> | |
| <div class="absolute inset-0 rounded-full" style="background: conic-gradient(#4CAF50 0% 60%, #2196F3 60% 85%, #FFC107 85% 100%);"></div> | |
| <div class="absolute inset-4 rounded-full bg-blue-50 flex items-center justify-center"> | |
| <span class="text-lg font-bold">6</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm">Instagram (60%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> | |
| <span class="text-sm">Facebook (25%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <span class="text-sm">Google Ads (15%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Karta poznatků --> | |
| <div class="bg-purple-50 border border-purple-100 rounded-lg p-5"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium text-gray-800">Co jsme zjistili</h3> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-brain text-purple-500"></i> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="mr-3 text-purple-500"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-sm text-gray-800">Špičkové hodiny</p> | |
| <p class="text-xs text-gray-600">Nejvíce konverzí bylo mezi 18-21 hodinou</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-3 text-purple-500"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-sm text-gray-800">Preference zařízení</p> | |
| <p class="text-xs text-gray-600">72% kupujících použilo mobilní zařízení</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-3 text-purple-500"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-sm text-gray-800">Nejlepší lokace</p> | |
| <p class="text-xs text-gray-600">Kalifornie generovala 38% všech prodejů</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3"> | |
| <button class="flex-1 bg-pink-500 hover:bg-pink-600 text-white py-3 px-4 rounded-lg font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> Vytvořit novou variantu | |
| </button> | |
| <button class="flex-1 bg-white hover:bg-gray-50 text-gray-700 py-3 px-4 rounded-lg font-medium transition flex items-center justify-center border border-gray-200"> | |
| <i class="fas fa-question-circle mr-2"></i> Zeptat se Genie | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Chat bublina Genie --> | |
| <div class="chat-bubble" id="chatBubble"> | |
| <i class="fas fa-magic"></i> | |
| </div> | |
| <!-- Chat okno Genie --> | |
| <div class="chat-window" id="chatWindow"> | |
| <div class="chat-header"> | |
| <div class="genie-smoke w-8 h-8 bg-gradient-to-r from-pink-400 to-pink-600 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-magic text-white text-sm"></i> | |
| </div> | |
| <h3 class="font-medium">Asistent AdGenie</h3> | |
| </div> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="message ai"> | |
| Ahoj! Jsem AdGenie, váš asistent pro reklamy. Jak vám mohu pomoci? | |
| </div> | |
| <div class="message ai"> | |
| Všiml jsem si, že váš ROAS tento týden klesl o 13%. Chcete, abych to prozkoumal? | |
| </div> | |
| </div> | |
| <div class="chat-input"> | |
| <input type="text" placeholder="Zeptejte se mě na cokoliv ohledně reklam..." id="chatInput"> | |
| <button id="sendMessage"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Interakce s úvodní obrazovkou | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Simulace dokončení úvodu po 3 sekundách | |
| setTimeout(function() { | |
| document.getElementById('onboarding').classList.add('opacity-0'); | |
| setTimeout(function() { | |
| document.getElementById('onboarding').classList.add('hidden'); | |
| document.getElementById('dashboard').classList.remove('hidden'); | |
| }, 500); | |
| }, 3000); | |
| // Přidání efektu konfety k možnostem v úvodu | |
| const options = document.querySelectorAll('.confetti-check'); | |
| options.forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Odebrání aktivní třídy ze všech možností | |
| options.forEach(opt => opt.classList.remove('active')); | |
| // Přidání aktivní třídy k vybrané možnosti | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Přepínání chat bubliny | |
| const chatBubble = document.getElementById('chatBubble'); | |
| const chatWindow = document.getElementById('chatWindow'); | |
| chatBubble.addEventListener('click', function() { | |
| chatWindow.classList.toggle('active'); | |
| }); | |
| // Funkce pro odeslání zprávy | |
| const chatInput = document.getElementById('chatInput'); | |
| const sendMessage = document.getElementById('sendMessage'); | |
| const chatMessages = document.getElementById('chatMessages'); | |
| function sendUserMessage() { | |
| const message = chatInput.value.trim(); | |
| if (message) { | |
| // Přidání uživatelské zprávy | |
| const userMsg = document.createElement('div'); | |
| userMsg.className = 'message user'; | |
| userMsg.textContent = message; | |
| chatMessages.appendChild(userMsg); | |
| // Vyčištění vstupu | |
| chatInput.value = ''; | |
| // Scrollování dolů | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| // Simulace odpovědi AI po zpoždění | |
| setTimeout(function() { | |
| const aiResponses = [ | |
| "Skvělá otázka! Na základě dat vaší kampaně doporučuji...", | |
| "Analyzoval jsem váš výkon a našel příležitost k...", | |
| "Dovolte mi to zkontrolovat. Okamžik...", | |
| "Zajímavé! Data ukazují následující...", | |
| "S tím vám mohu pomoci. Nejprve se podívejme na..." | |
| ]; | |
| const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)]; | |
| const aiMsg = document.createElement('div'); | |
| aiMsg.className = 'message ai'; | |
| aiMsg.textContent = randomResponse; | |
| chatMessages.appendChild(aiMsg); | |
| // Scrollování dolů | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| }, 1000); | |
| } | |
| } | |
| sendMessage.addEventListener('click', sendUserMessage); | |
| chatInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendUserMessage(); | |
| } | |
| }); | |
| // Navigace mezi záložkami | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Odebrání aktivní třídy ze všech tlačítek | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| // Přidání aktivní třídy k kliknutému tlačítku | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| }); | |
| </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=LukasBe/adgenie-desktop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |