TPsoft.org/WebWizard
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implemented step 10 by Gemini

Browse Source 
- added 4. step of wizard for style and images
This commit is contained in:
Igor Miňo
2026-06-14 08:07:23 +02:00
parent 991ff9de00
commit c11f7e4d75
5 changed files with 440 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
public/index.html
View File

@ -132,10 +132,83 @@
<!-- 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>
<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>