diff --git a/public/css/wizard.css b/public/css/wizard.css new file mode 100644 index 0000000..247db42 --- /dev/null +++ b/public/css/wizard.css @@ -0,0 +1,149 @@ +:root { + --primary-color: #2563eb; + --primary-hover: #1d4ed8; + --bg-color: #f8fafc; + --card-bg: #ffffff; + --text-main: #1e293b; + --text-muted: #64748b; + --border-color: #e2e8f0; + --success-color: #22c55e; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + background-color: var(--bg-color); + color: var(--text-main); + line-height: 1.5; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +header { + background-color: var(--card-bg); + border-bottom: 1px solid var(--border-color); + padding: 1rem 2rem; + text-align: center; +} + +main { + flex: 1; + display: flex; + justify-content: center; + align-items: flex-start; + padding: 2rem; +} + +.wizard-container { + background-color: var(--card-bg); + width: 100%; + max-width: 800px; + border-radius: 0.75rem; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + overflow: hidden; +} + +.progress-bar { + height: 0.5rem; + background-color: var(--border-color); + width: 100%; +} + +.progress-fill { + height: 100%; + background-color: var(--primary-color); + width: 0%; + transition: width 0.3s ease; +} + +.wizard-content { + padding: 2.5rem; +} + +.step { + display: none; +} + +.step.active { + display: block; + animation: fadeIn 0.3s ease-in-out; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +h2 { + margin-bottom: 1rem; + font-size: 1.5rem; +} + +p.step-description { + color: var(--text-muted); + margin-bottom: 2rem; +} + +.wizard-footer { + padding: 1.5rem 2.5rem; + background-color: #f1f5f9; + display: flex; + justify-content: space-between; + border-top: 1px solid var(--border-color); +} + +button { + padding: 0.625rem 1.25rem; + border-radius: 0.375rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; + font-size: 0.875rem; +} + +.btn-secondary { + background-color: transparent; + border: 1px solid var(--border-color); + color: var(--text-main); +} + +.btn-secondary:hover { + background-color: #e2e8f0; +} + +.btn-primary { + background-color: var(--primary-color); + border: 1px solid var(--primary-color); + color: white; +} + +.btn-primary:hover { + background-color: var(--primary-hover); +} + +button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.hidden { + display: none; +} + +@media (max-width: 640px) { + main { + padding: 1rem; + } + .wizard-content { + padding: 1.5rem; + } + .wizard-footer { + padding: 1rem 1.5rem; + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..7c94357 --- /dev/null +++ b/public/index.html @@ -0,0 +1,104 @@ + + + + + + WebWizard - AI Website Concierge + + + +
+

WebWizard

+
+ +
+
+
+
+
+ +
+ +
+

Oblasť podnikania

+

V čom podnikáte? Pomôže nám to prispôsobiť váš web.

+
+ +

Obsah pre krok 1...

+
+
+ + +
+

Identita a kontakt

+

Základné informácie o vašej firme a GDPR súhlas.

+
+

Obsah pre krok 2...

+
+
+ + +
+

Služby

+

Čo presne ponúkate vašim zákazníkom?

+
+

Obsah pre krok 3...

+
+
+ + +
+

Vizuálny štýl

+

Ako by mal váš nový web vyzerať?

+
+

Obsah pre krok 4...

+
+
+ + +
+

Moduly webu

+

Vyberte si sekcie a funkcie vášho webu.

+
+

Obsah pre krok 5...

+
+
+ + +
+

Generovanie obsahu

+

Naša AI teraz pripravuje váš textový obsah.

+
+

Obsah pre krok 6...

+
+
+ + +
+

Náhľad webu

+

Pozrite si, ako vyzerá váš nový web.

+
+

Obsah pre krok 7...

+
+
+ + +
+

Hotovo!

+

Váš web je pripravený na stiahnutie.

+
+

Obsah pre krok 8...

+
+
+
+ +
+ + +
+
+
+ + + + diff --git a/public/js/wizard.js b/public/js/wizard.js new file mode 100644 index 0000000..e4c0a75 --- /dev/null +++ b/public/js/wizard.js @@ -0,0 +1,117 @@ +/** + * WebWizard Frontend Logic + */ + +const App = { + state: { + userId: localStorage.getItem('ww_user_id'), + currentStep: 1, + totalSteps: 8, + project: null + }, + + async init() { + console.log('Initializing WebWizard...'); + + if (!this.state.userId) { + await this.initSession(); + } + + this.bindEvents(); + this.showStep(this.state.currentStep); + }, + + async initSession() { + try { + const response = await this.apiCall('initSession'); + if (response.success) { + this.state.userId = response.data.user_id; + localStorage.setItem('ww_user_id', this.state.userId); + console.log('Session initialized:', this.state.userId); + } + } catch (error) { + console.error('Failed to initialize session:', error); + alert('Chyba pri inicializácii session. Skontrolujte pripojenie.'); + } + }, + + async apiCall(action, payload = {}, projectId = null) { + const body = { + action, + project_id: projectId, + payload + }; + + const headers = { + 'Content-Type': 'application/json' + }; + + if (this.state.userId) { + headers['X-User-ID'] = this.state.userId; + } + + const response = await fetch('/ajax.php', { + method: 'POST', + headers, + body: JSON.stringify(body) + }); + + const result = await response.json(); + if (!result.success) { + throw new Error(result.error.message || 'API Error'); + } + + return result; + }, + + bindEvents() { + document.getElementById('btn-next').addEventListener('click', () => this.nextStep()); + document.getElementById('btn-prev').addEventListener('click', () => this.prevStep()); + }, + + showStep(n) { + const steps = document.querySelectorAll('.step'); + steps.forEach(step => step.classList.remove('active')); + + const activeStep = document.querySelector(`.step[data-step="${n}"]`); + if (activeStep) { + activeStep.classList.add('active'); + } + + this.state.currentStep = n; + this.updateUI(); + }, + + nextStep() { + if (this.state.currentStep < this.state.totalSteps) { + this.showStep(this.state.currentStep + 1); + } + }, + + prevStep() { + if (this.state.currentStep > 1) { + this.showStep(this.state.currentStep - 1); + } + }, + + updateUI() { + // Update buttons + const btnPrev = document.getElementById('btn-prev'); + const btnNext = document.getElementById('btn-next'); + + btnPrev.disabled = this.state.currentStep === 1; + + if (this.state.currentStep === this.state.totalSteps) { + btnNext.textContent = 'Dokončiť'; + } else { + btnNext.textContent = 'Pokračovať'; + } + + // Update progress bar + const progressFill = document.querySelector('.progress-fill'); + const percent = ((this.state.currentStep - 1) / (this.state.totalSteps - 1)) * 100; + progressFill.style.width = `${percent}%`; + } +}; + +document.addEventListener('DOMContentLoaded', () => App.init());