<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Objednávka pizzy</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.step { display: none; }
.step.active { display: block; }
</style>
</head>
<body class="bg-light">
<div class="container py-5">
<h1 class="mb-4">Objednávka pizzy</h1>
<form id="pizzaForm" novalidate>
<!-- Krok 1: Objednavajici -->
<div class="step active" data-step="1">
<h2 class="h4 mb-3">1. Osobní údaje</h2>
<div class="mb-3">
<label for="name" class="form-label">Jméno a příjmení</label>
<input type="text" class="form-control" id="name" name="name" required>
<div class="invalid-feedback" id="error-name"></div>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Telefon</label>
<input type="tel" class="form-control" id="phone" name="phone" required>
<div class="invalid-feedback" id="error-phone"></div>
</div>
<button type="button" class="btn btn-primary next">Další</button>
</div>
<!-- Krok 2: Výběr -->
<div class="step" data-step="2">
<h2 class="h4 mb-3">2. Výběr pizzy</h2>
<div class="mb-3">
<label for="pizzaType" class="form-label">Typ pizzy</label>
<select id="pizzaType" name="pizzaType" class="form-select" required>
<option value="">-- Vyberte --</option>
<option value="margherita">Margherita</option>
<option value="pepperoni">Pepperoni</option>
<option value="hawaii">Havaj</option>
</select>
<div class="invalid-feedback" id="error-pizzaType"></div>
</div>
<div class="mb-3">
<label class="form-label d-block">Velikost</label>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="size" value="small" id="sizeSmall" required>
<label class="form-check-label" for="sizeSmall">Malá</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="size" value="medium" id="sizeMedium">
<label class="form-check-label" for="sizeMedium">Střední</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="size" value="large" id="sizeLarge">
<label class="form-check-label" for="sizeLarge">Velká</label>
</div>
<div class="invalid-feedback d-block" id="error-size"></div>
</div>
<button type="button" class="btn btn-secondary prev">Zpět</button>
<button type="button" class="btn btn-primary next">Další</button>
</div>
<!-- Krok 3: Doplňky -->
<div class="step" data-step="3">
<h2 class="h4 mb-3">3. Doplňky</h2>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="extraCheese" name="extraCheese">
<label class="form-check-label" for="extraCheese">Extra sýr</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="garlic" name="garlic">
<label class="form-check-label" for="garlic">Česnek</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="chili" name="chili">
<label class="form-check-label" for="chili">Chilli</label>
</div>
<button type="button" class="btn btn-secondary prev">Zpět</button>
<button type="button" class="btn btn-primary next">Další</button>
</div>
<!-- Krok 4: Shrnutí a odeslání -->
<div class="step" data-step="4">
<h2 class="h4 mb-3">4. Shrnutí a odeslání</h2>
<div id="summary" class="mb-3 border p-3 bg-white rounded shadow-sm">
<!-- Shrnutí objednávky doplní JavaScript -->
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="agree" required>
<label class="form-check-label" for="agree">Souhlasím s obchodními podmínkami</label>
<div class="invalid-feedback" id="error-agree"></div>
</div>
<button type="button" class="btn btn-secondary prev">Zpět</button>
<button type="submit" class="btn btn-success">Odeslat objednávku</button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('pizzaForm');
const steps = document.querySelectorAll('.step');
const nextButtons = document.querySelectorAll('.next');
const prevButtons = document.querySelectorAll('.prev');
const summaryDiv = document.getElementById('summary');
// Přechod na další krok
nextButtons.forEach(button => {
button.addEventListener('click', function() {
const currentStep = this.closest('.step');
const currentStepNumber = parseInt(currentStep.dataset.step);
// Validace aktuálního kroku
if (validateStep(currentStepNumber)) {
// Skryj aktuální krok
currentStep.classList.remove('active');
// Zobraz následující krok
const nextStep = document.querySelector(`.step[data-step="${currentStepNumber + 1}"]`);
nextStep.classList.add('active');
// Pokud jde o poslední krok, aktualizuj shrnutí
if (currentStepNumber === 3) {
updateSummary();
}
}
});
});
// Přechod na předchozí krok
prevButtons.forEach(button => {
button.addEventListener('click', function() {
const currentStep = this.closest('.step');
const currentStepNumber = parseInt(currentStep.dataset.step);
// Skryj aktuální krok
currentStep.classList.remove('active');
// Zobraz předchozí krok
const prevStep = document.querySelector(`.step[data-step="${currentStepNumber - 1}"]`);
prevStep.classList.add('active');
});
});
// Odeslání formuláře
form.addEventListener('submit', function(e) {
e.preventDefault();
// Validace všech kroků
let allValid = true;
for (let i = 1; i <= 4; i++) {
if (!validateStep(i)) {
allValid = false;
}
}
if (allValid) {
// Zde by se normálně odesílaly data na server
alert('Objednávka byla úspěšně odeslána!');
form.reset();
// Reset formuláře - návrat na první krok
steps.forEach(step => step.classList.remove('active'));
document.querySelector('.step[data-step="1"]').classList.add('active');
} else {
// Zobraz chyby v posledním kroku
validateStep(4);
}
});
// Funkce pro validaci kroku
function validateStep(stepNumber) {
let isValid = true;
switch(stepNumber) {
case 1:
// Validace jména
const nameInput = document.getElementById('name');
if (!nameInput.value.trim()) {
nameInput.classList.add('is-invalid');
document.getElementById('error-name').textContent = 'Zadejte prosím jméno a příjmení';
isValid = false;
} else {
nameInput.classList.remove('is-invalid');
document.getElementById('error-name').textContent = '';
}
// Validace telefonu
const phoneInput = document.getElementById('phone');
const phoneRegex = /^(\+420)? ?[1-9][0-9]{2} ?[0-9]{3} ?[0-9]{3}$/;
if (!phoneInput.value.trim()) {
phoneInput.classList.add('is-invalid');
document.getElementById('error-phone').textContent = 'Zadejte prosím telefonní číslo';
isValid = false;
} else if (!phoneRegex.test(phoneInput.value.trim())) {
phoneInput.classList.add('is-invalid');
document.getElementById('error-phone').textContent = 'Zadejte platné české telefonní číslo';
isValid = false;
} else {
phoneInput.classList.remove('is-invalid');
document.getElementById('error-phone').textContent = '';
}
break;
case 2:
// Validace typu pizzy
const pizzaTypeSelect = document.getElementById('pizzaType');
if (!pizzaTypeSelect.value) {
pizzaTypeSelect.classList.add('is-invalid');
document.getElementById('error-pizzaType').textContent = 'Vyberte prosím typ pizzy';
isValid = false;
} else {
pizzaTypeSelect.classList.remove('is-invalid');
document.getElementById('error-pizzaType').textContent = '';
}
// Validace velikosti pizzy
const sizeSelected = document.querySelector('input[name="size"]:checked');
if (!sizeSelected) {
document.getElementById('error-size').textContent = 'Vyberte prosím velikost pizzy';
isValid = false;
} else {
document.getElementById('error-size').textContent = '';
}
break;
case 4:
// Validace souhlasu s podmínkami
const agreeCheckbox = document.getElementById('agree');
if (!agreeCheckbox.checked) {
agreeCheckbox.classList.add('is-invalid');
document.getElementById('error-agree').textContent = 'Musíte souhlasit s obchodními podmínkami';
isValid = false;
} else {
agreeCheckbox.classList.remove('is-invalid');
document.getElementById('error-agree').textContent = '';
}
break;
}
return isValid;
}
// Funkce pro aktualizaci shrnutí objednávky
function updateSummary() {
const name = document.getElementById('name').value;
const phone = document.getElementById('phone').value;
const pizzaType = document.getElementById('pizzaType');
const pizzaTypeText = pizzaType.options[pizzaType.selectedIndex].text;
const size = document.querySelector('input[name="size"]:checked').value;
const sizeText = document.querySelector(`label[for="size${size.charAt(0).toUpperCase() + size.slice(1)}"]`).textContent;
// Získání doplňků
const extras = [];
if (document.getElementById('extraCheese').checked) extras.push('Extra sýr');
if (document.getElementById('garlic').checked) extras.push('Česnek');
if (document.getElementById('chili').checked) extras.push('Chilli');
// Vytvoření HTML pro shrnutí
let summaryHTML = `
<p><strong>Jméno:</strong> ${name}</p>
<p><strong>Telefon:</strong> ${phone}</p>
<p><strong>Pizza:</strong> ${pizzaTypeText} (${sizeText})</p>
`;
if (extras.length > 0) {
summaryHTML += `<p><strong>Doplňky:</strong> ${extras.join(', ')}</p>`;
}
summaryDiv.innerHTML = summaryHTML;
}
});
</script>
</body>
</html>