189 lines
6.5 KiB
HTML
189 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sk">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebWizard - AI Website Concierge</title>
|
|
<link rel="stylesheet" href="css/wizard.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>WebWizard</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="wizard-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill"></div>
|
|
</div>
|
|
|
|
<div class="wizard-content">
|
|
<!-- Step 1: Segmentácia biznisu -->
|
|
<div class="step active" data-step="1">
|
|
<h2>Oblasť podnikania</h2>
|
|
<p class="step-description">V čom podnikáte? Pomôže nám to prispôsobiť váš web.</p>
|
|
|
|
<div id="category-list" class="category-grid">
|
|
<!-- Categories will be injected here -->
|
|
</div>
|
|
|
|
<div id="subcategory-container" class="subcategory-section hidden">
|
|
<h3>Vyberte podkategóriu</h3>
|
|
<div id="subcategory-list" class="subcategory-chips">
|
|
<!-- Subcategories will be injected here -->
|
|
</div>
|
|
|
|
<div id="custom-category-group" class="form-group hidden">
|
|
<label for="custom-description">Popíšte vašu oblasť podnikania</label>
|
|
<textarea id="custom-description" rows="3" placeholder="Napr. Súkromná materská škola, Prenájom jácht..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Identita, kontakt a GDPR -->
|
|
<div class="step" data-step="2">
|
|
<h2>Identita a kontakt</h2>
|
|
<p class="step-description">Základné informácie o vašej firme a povinný GDPR súhlas.</p>
|
|
|
|
<div class="form-section">
|
|
<h3>Identita firmy</h3>
|
|
<div class="form-group">
|
|
<label for="business-name">Názov firmy / Značky *</label>
|
|
<input type="text" id="business-name" placeholder="Napr. Pizza Marco" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="business-tagline">Slogan (voliteľné)</label>
|
|
<input type="text" id="business-tagline" placeholder="Napr. Najlepšia pizza v meste">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="business-description">Stručný popis podnikania</label>
|
|
<textarea id="business-description" rows="2" placeholder="Napr. Rodinná pizzeria so zameraním na tradičné recepty."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Kontaktné údaje</h3>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label for="contact-email">Email</label>
|
|
<input type="email" id="contact-email" placeholder="email@priklad.sk">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="contact-phone">Telefón</label>
|
|
<input type="text" id="contact-phone" placeholder="+421 ...">
|
|
</div>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label for="contact-address">Adresa (ulica a číslo)</label>
|
|
<input type="text" id="contact-address" placeholder="Hlavná 123">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="contact-city">Mesto</label>
|
|
<input type="text" id="contact-city" placeholder="Bratislava">
|
|
</div>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label for="contact-facebook">Facebook (URL)</label>
|
|
<input type="text" id="contact-facebook" placeholder="https://facebook.com/...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="contact-instagram">Instagram (URL)</label>
|
|
<input type="text" id="contact-instagram" placeholder="https://instagram.com/...">
|
|
</div>
|
|
</div>
|
|
<p class="form-hint">* Aspoň jeden z údajov (Email / Telefón) je povinný.</p>
|
|
</div>
|
|
|
|
<div class="form-section gdpr-section">
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="gdpr-consent">
|
|
<label for="gdpr-consent">Súhlasím so spracovaním zadaných údajov za účelom vytvorenia webovej stránky. *</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Služby a smart otázky -->
|
|
<div class="step" data-step="3">
|
|
<h2>Služby a doplňujúce otázky</h2>
|
|
<p class="step-description">Čo presne ponúkate vašim zákazníkom? AI na základe týchto dát pripraví texty.</p>
|
|
|
|
<div class="form-section">
|
|
<h3>Vaše hlavné služby</h3>
|
|
<div id="services-list">
|
|
<!-- Service items will be added here -->
|
|
</div>
|
|
<button id="btn-add-service" class="btn-secondary" style="margin-top: 1rem;">+ Pridať službu</button>
|
|
|
|
<div class="form-group" style="margin-top: 2rem;">
|
|
<label for="pricing-note">Poznámka k cenám (voliteľné)</label>
|
|
<input type="text" id="pricing-note" placeholder="Napr. Ceny sú orientačné, Konečná cena po obhliadke...">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="smart-questions-container" class="form-section">
|
|
<h3>Doplňujúce informácie</h3>
|
|
<div id="smart-questions-list">
|
|
<!-- Smart questions will be injected here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 4: Vizuálny štýl -->
|
|
<div class="step" data-step="4">
|
|
<h2>Vizuálny štýl</h2>
|
|
<p class="step-description">Ako by mal váš nový web vyzerať?</p>
|
|
<div class="form-placeholder">
|
|
<p>Obsah pre krok 4...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 5: Moduly -->
|
|
<div class="step" data-step="5">
|
|
<h2>Moduly webu</h2>
|
|
<p class="step-description">Vyberte si sekcie a funkcie vášho webu.</p>
|
|
<div class="form-placeholder">
|
|
<p>Obsah pre krok 5...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 6: Generovanie -->
|
|
<div class="step" data-step="6">
|
|
<h2>Generovanie obsahu</h2>
|
|
<p class="step-description">Naša AI teraz pripravuje váš textový obsah.</p>
|
|
<div class="form-placeholder">
|
|
<p>Obsah pre krok 6...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 7: Preview -->
|
|
<div class="step" data-step="7">
|
|
<h2>Náhľad webu</h2>
|
|
<p class="step-description">Pozrite si, ako vyzerá váš nový web.</p>
|
|
<div class="form-placeholder">
|
|
<p>Obsah pre krok 7...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 8: Export -->
|
|
<div class="step" data-step="8">
|
|
<h2>Hotovo!</h2>
|
|
<p class="step-description">Váš web je pripravený na stiahnutie.</p>
|
|
<div class="form-placeholder">
|
|
<p>Obsah pre krok 8...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wizard-footer">
|
|
<button id="btn-prev" class="btn-secondary" disabled>Späť</button>
|
|
<button id="btn-next" class="btn-primary">Pokračovať</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="js/wizard.js"></script>
|
|
</body>
|
|
</html>
|