373 lines
14 KiB
HTML
373 lines
14 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 a assety</h2>
|
|
<p class="step-description">Ako by mal váš web vyzerať? Vyberte si štýl a nahrajte vlastné obrázky.</p>
|
|
|
|
<div class="form-section">
|
|
<h3>Dizajnový smer</h3>
|
|
<div id="style-grid" class="category-grid">
|
|
<div class="category-card" data-style="minimal">
|
|
<div class="category-icon">⚪</div>
|
|
<div class="category-name">Minimalistický</div>
|
|
<div class="form-hint" style="font-size: 0.7rem;">Čistý, veľa bieleho priestoru</div>
|
|
</div>
|
|
<div class="category-card" data-style="modern">
|
|
<div class="category-icon">🎨</div>
|
|
<div class="category-name">Moderný</div>
|
|
<div class="form-hint" style="font-size: 0.7rem;">Svieži, výrazné prvky</div>
|
|
</div>
|
|
<div class="category-card" data-style="premium">
|
|
<div class="category-icon">💎</div>
|
|
<div class="category-name">Premium</div>
|
|
<div class="form-hint" style="font-size: 0.7rem;">Elegantný, tmavé témy</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Farebná paleta</h3>
|
|
<div id="palette-list" class="palette-grid">
|
|
<div class="palette-card" data-palette="blue-gray">
|
|
<div class="palette-colors">
|
|
<span style="background: #2563eb;"></span>
|
|
<span style="background: #64748b;"></span>
|
|
<span style="background: #f8fafc;"></span>
|
|
</div>
|
|
<span>Profesionálna modrá</span>
|
|
</div>
|
|
<div class="palette-card" data-palette="nature-green">
|
|
<div class="palette-colors">
|
|
<span style="background: #059669;"></span>
|
|
<span style="background: #fbbf24;"></span>
|
|
<span style="background: #fdfdfd;"></span>
|
|
</div>
|
|
<span>Prírodná zelená</span>
|
|
</div>
|
|
<div class="palette-card" data-palette="elegant-gold">
|
|
<div class="palette-colors">
|
|
<span style="background: #111827;"></span>
|
|
<span style="background: #d4af37;"></span>
|
|
<span style="background: #ffffff;"></span>
|
|
</div>
|
|
<span>Elegantná zlatá</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Vaše assety</h3>
|
|
<div class="upload-container">
|
|
<label>Logo firmy</label>
|
|
<div class="upload-box" id="logo-upload-box">
|
|
<input type="file" id="logo-input" accept="image/*" class="hidden">
|
|
<div class="upload-placeholder">
|
|
<span>Kliknite pre nahranie loga</span>
|
|
</div>
|
|
<div id="logo-preview" class="image-preview hidden"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-container" style="margin-top: 2rem;">
|
|
<label>Fotografie do galérie (max 5)</label>
|
|
<div class="gallery-upload-grid">
|
|
<div id="gallery-previews" class="gallery-previews"></div>
|
|
<div class="upload-box mini" id="gallery-add-box">
|
|
<input type="file" id="gallery-input" accept="image/*" multiple class="hidden">
|
|
<span>+</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 5: Moduly -->
|
|
<div class="step" data-step="5">
|
|
<h2>Moduly a funkcie webu</h2>
|
|
<p class="step-description">Vyberte si sekcie, ktoré chcete mať na úvodnej stránke a nastavte kontaktný formulár.</p>
|
|
|
|
<div class="form-section">
|
|
<h3>Sekcie domovskej stránky</h3>
|
|
<div class="checkbox-grid">
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="mod-hero" data-module="hero" checked disabled>
|
|
<label for="mod-hero">Hero sekcia (Úvod)</label>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="mod-about" data-module="about">
|
|
<label for="mod-about">O nás</label>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="mod-services" data-module="services" checked>
|
|
<label for="mod-services">Služby</label>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="mod-pricing" data-module="pricing">
|
|
<label for="mod-pricing">Cenník</label>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="mod-gallery" data-module="gallery">
|
|
<label for="mod-gallery">Galéria</label>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="mod-faq" data-module="faq">
|
|
<label for="mod-faq">Časté otázky (FAQ)</label>
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="mod-contact" data-module="contact" checked disabled>
|
|
<label for="mod-contact">Kontakt</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Kontaktný formulár</h3>
|
|
<div class="checkbox-group" style="margin-bottom: 1.5rem;">
|
|
<input type="checkbox" id="form-enabled" checked>
|
|
<label for="form-enabled">Aktivovať kontaktný formulár na webe</label>
|
|
</div>
|
|
|
|
<div id="form-config-container">
|
|
<label>Spôsob spracovania správ</label>
|
|
<div class="radio-group-tabs">
|
|
<input type="radio" id="mode-local" name="form-mode" value="local" checked>
|
|
<label for="mode-local">Lokálny mód (Prezeranie v administrácii)</label>
|
|
|
|
<input type="radio" id="mode-smtp" name="form-mode" value="smtp">
|
|
<label for="mode-smtp">Email (SMTP odosielanie)</label>
|
|
</div>
|
|
|
|
<div id="config-local" class="form-group" style="margin-top: 1.5rem;">
|
|
<label for="local-password">Heslo pre prístup k správam *</label>
|
|
<input type="password" id="local-password" placeholder="Zadajte bezpečné heslo">
|
|
<p class="form-hint">Týmto heslom sa budete prihlasovať do zabezpečeného priečinka so správami.</p>
|
|
</div>
|
|
|
|
<div id="config-smtp" class="hidden" style="margin-top: 1.5rem;">
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label for="smtp-host">SMTP Host</label>
|
|
<input type="text" id="smtp-host" placeholder="smtp.priklad.sk">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="smtp-port">Port</label>
|
|
<input type="text" id="smtp-port" placeholder="465">
|
|
</div>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label for="smtp-user">Užívateľské meno</label>
|
|
<input type="text" id="smtp-user" placeholder="meno@domena.sk">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="smtp-pass">Heslo</label>
|
|
<input type="password" id="smtp-pass">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="smtp-recipient">Cieľový email pre správy</label>
|
|
<input type="email" id="smtp-recipient" placeholder="info@vasadomena.sk">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 a štruktúru webu. Môže to trvať niekoľko desiatok sekúnd.</p>
|
|
|
|
<div class="generation-loader">
|
|
<div class="spinner"></div>
|
|
<p id="generation-status">Čakám na zaradenie do fronty...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 7: Preview -->
|
|
<div class="step" data-step="7">
|
|
<div class="step-header-with-actions">
|
|
<div>
|
|
<h2>Náhľad vášho webu</h2>
|
|
<p class="step-description">Pozrite si, ako vyzerá váš nový web. Môžete prepínať medzi zobrazením pre počítač a mobil.</p>
|
|
</div>
|
|
<div class="device-toggle">
|
|
<button class="btn-toggle active" data-view="desktop">💻 PC</button>
|
|
<button class="btn-toggle" data-view="mobile">📱 Mobil</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="preview-container" class="preview-window">
|
|
<iframe id="preview-iframe" src="about:blank"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 8: Export -->
|
|
<div class="step" data-step="8">
|
|
<div class="success-screen">
|
|
<div class="success-icon">🎉</div>
|
|
<h2>Váš web je pripravený!</h2>
|
|
<p>Gratulujeme! Váš nový web bol úspešne vygenerovaný a je pripravený na stiahnutie.</p>
|
|
|
|
<div class="export-actions">
|
|
<button id="btn-download-zip" class="btn-primary btn-large">Stiahnuť web (ZIP)</button>
|
|
<div style="margin-top: 1rem;">
|
|
<button id="btn-view-live" class="btn-secondary btn-small">👁️ Pozrieť LIVE v novom okne</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instructions-box">
|
|
<h3>Čo robiť po stiahnutí?</h3>
|
|
<ol>
|
|
<li>Rozbaľte stiahnutý .zip archív vo vašom počítači.</li>
|
|
<li>Nahrajte všetky súbory a priečinky na váš webhosting cez FTP.</li>
|
|
<li>Váš web bude okamžite funkčný na vašej doméne.</li>
|
|
<li>Ak ste zvolili <strong>Lokálny mód</strong> formulára, správy nájdete na adrese <code>/form-viewer.php</code>.</li>
|
|
</ol>
|
|
</div>
|
|
</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>
|