Ha Ön olyan vállalkozó, aki szolgáltatásait online szeretné értékesíteni, és szeretné látni, hogyan épül fel egy foglalási felület a tervezéstől a működő logikáig, akkor ez a bemutató hasznos kiindulópont lehet. A Lovable dokumentációja alapján összeállított, önállóan futtatható HTML/CSS/JS demó nem egy teljes weboldal, hanem egy fókuszált, kipróbálható modell, amely a működési terv egyes lépéseit szemlélteti.
A demó célja és rövid magyarázat
A kód egy egyszerű, de jól áttekinthető foglalási űrlapot valósít meg. Az elrendezés és a stílus egy sötét témájú, letisztult kártyát jelenít meg, amely három részre tagolódik: a terv lépéseire, a beviteli mezőkre és a visszajelzési üzenetekre. A bal felső sarokban található „Terv lépései” blokk arra utal, hogy a folyamat az adatmodell (időpont, név, férőhely), a felhasználói felület vázának (UI) és a validáció logikájának a megtervezéséből áll. Ez az a három pillér, amelyet a Lovable-lel (vagy bármilyen modern eszközzel) gyorsan iterálva lehet finomítani.
Kinek hasznos ez a demó, és mire jó?
Elsősorban azoknak ajánlott, akik most ismerkednek a webes foglalási rendszerek logikájával, vagy szeretnének egy konkrét, működő mintát látni a kód szintjén is. A demó nem tartalmaz adatbázist vagy szerveroldali mentést, tehát egy példafelület, amely a böngészőben fut. Ebből adódóan nem alkalmas valós foglalások fogadására, viszont tökéletes arra, hogy megértsük a frontend fejlesztés alapvető lépéseit.
Képzeljen el egy konkrét helyzetet: egy kisvárosi étterem tulajdonosa szeretné felmérni, milyen érzés egy vendégnek online asztalt foglalni. Mielőtt drága, teljes körű foglalási rendszert vásárolna, egy ilyen demóval meg tudja nézni a felhasználói élmény alapjait. A „Foglalás” gombra kattintva azonnal látja, mi történik, ha üresen hagyja a név mezőt, vagy ha múltbeli dátumot választ. Ez segít eldönteni, hogy milyen funkciókat várjon el egy éles rendszertől.
Hogyan használja a demót?
Ez a HTML kód teljes egészében működőképes, ha bemásolja egy .html fájlba és megnyitja egy böngészőben. Nincs szükség internetkapcsolatra, mert minden kód (formázás és logika) a fájlban van. A felületen először be kell írnia a nevét, ki kell választani egy jövőbeli dátumot és egy férőhelyet (1-től 5 főig). A „Foglalás” gomb megnyomásával lefut a beépített ellenőrzés (validáció), majd a visszajelzési mezőben megjelenik egy sikerüzenet vagy egy hibaüzenet.
A „Törlés” gomb alaphelyzetbe állítja az űrlapot, és törli a korábbi visszajelzést.
Három teszt, amelyet Ön is elvégezhet
A kód viselkedésének ellenőrzéséhez javasoljuk, hogy futtassa le a következő eseteket:
- Sikeres foglalás: Írja be a nevét (pl. „Teszt Elek”), hagyja meg a dátumot (a default érték 2025-05-20), válasszon „2 fő” férőhelyet, majd kattintson a „Foglalás” gombra. Várt eredmény: A zöld szegélyű üzenetben megjelenik a „✅ Sikeres foglalás! Név: Teszt Elek – Dátum: 2025. május 20. – Férőhely: 2 fő” szöveg.
- Üres név validáció: Törölje a nevet, hagyja a többi mezőt alaphelyzetben, és kattintson a „Foglalás” gombra. Várt eredmény: A piros szegélyű üzenetmezőben ez a hibaüzenet jelenik meg: „Hiba: add meg a neved!”.
- Múltbeli dátum elutasítása: Válasszon ki a mai dátumnál korábbi dátumot (pl. 2020-01-01), töltse ki a nevet, majd kattintson a „Foglalás” gombra. Várt eredmény: A piros szegélyű mezőben ez a szöveg szerepel: „Hiba: nem lehet múltbeli dátum!”.
A demó korlátai – mire nem alkalmas?
Fontos hangsúlyozni, hogy ez a bemutató egy statikus HTML oldal, amely a böngészőben fut. Nem küld adatot szerverre, nem tárol el foglalásokat, és nem rendelkezik adminisztrációs felülettel sem. Ezért nem használható valós üzleti folyamatokban. A demó kizárólag a felhasználói felület (UI) és a beépített üzleti logika (validációk) szimulációjára szolgál, nem pedig egy objektív termékértékelésre vagy konverziós tesztre.
Mit igényelne egy éles weboldal?
Egy valódi, működő foglalási rendszer kialakításához jóval többre van szükség. A Lovable dokumentációja (docs.lovable.dev) arra ösztönzi a fejlesztőket, hogy iteratívan építsék fel az alkalmazást. Egy éles projektnél a következőkre lenne szükség:
- Backend és adatbázis: egy szerveroldali nyelv (például Node.js, PHP) és egy adatbázis (pl. PostgreSQL), amelyek tárolják a foglalásokat, kezelik a párhuzamos foglalási kísérleteket, és biztosítják az adatok védelmét.
- Felhasználói fiókok és jogosultságok: ha a vendégeknek vagy az adminisztrátoroknak be kell jelentkezniük, szükség lesz hitelesítésre és szerepkörökre.
- Időpont-kezelés: az Ön jelenlegi demója egyetlen napot kezel. Egy éles rendszernek heti/havi naptárnézetet, ismétlődő időpontokat és szabad kapacitások kezelését kell tudnia.
- E-mail értesítések: a foglalás megerősítése és emlékeztetők küldése a vendégnek.
- Integrációk: fizetéskezelők, Google Naptár vagy CRM rendszerek összekötése.
Ha szeretné látni, hogyan illeszkedik ez a foglalási felület egy teljesebb weboldalba, hasznos kiindulópont lehet a weboldal készítés vagy a WordPress weboldal készítés irányelveinek áttekintése, ahol a frontend és backend kapcsolata konkrétabb formában jelenik meg.
Rövid összefoglaló a lépésekről
A demó a három alapvető tervezési lépést szemlélteti: az adatmodell definiálását, a felületi váz elkészítését és a validációs szabályok beépítését. Ez a módszertan hasonlít ahhoz, ahogyan a Lovable-lel egy nagyobb alkalmazást is érdemes építeni: lépésről lépésre, folyamatos teszteléssel.
Próbáld ki a működő példát
A teljes másolható kód
Teljes, másolható index.html
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foglalási felület – Lovable terv</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #202632; color: #e6eef8; font-family: 'Segoe UI', Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.card { background: #2a3441; border-radius: 12px; padding: 28px; max-width: 500px; width: 100%; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
h1 { font-size: 1.4rem; margin-bottom: 8px; color: #39a0ff; }
p.sub { font-size: 0.9rem; margin-bottom: 20px; opacity: 0.8; }
label { display: block; font-size: 0.85rem; margin-bottom: 4px; opacity: 0.9; }
input, select { width: 100%; padding: 10px; margin-bottom: 14px; border: 1px solid #4a5a6a; border-radius: 6px; background: #1b222c; color: #e6eef8; font-size: 0.95rem; }
input:focus, select:focus { outline: 2px solid #39a0ff; }
.btn-row { display: flex; gap: 10px; margin-top: 10px; }
button { flex: 1; padding: 10px 16px; border: none; border-radius: 6px; font-size: 0.9rem; font-weight: 600; background: #39a0ff; color: #1b222c; cursor: pointer; }
button:hover { opacity: 0.85; }
button.reset { background: #5a6a7a; color: #e6eef8; }
.msg { margin-top: 16px; padding: 12px; border-radius: 6px; background: #1b222c; border-left: 4px solid #39a0ff; font-size: 0.9rem; display: none; }
.msg.visible { display: block; }
.msg.ok { border-left-color: #4caf7d; }
.msg.err { border-left-color: #e05a5a; }
small { display: block; margin-top: 8px; font-size: 0.8rem; opacity: 0.6; }
</style>
</head>
<body>
<div class="card">
<h1>Foglalási felület – Lovable terv</h1>
<p class="sub">Önálló demó: a tervezés lépései és működő foglalási logika</p>
<!-- Lépések -->
<div style="margin-bottom:20px; font-size:0.85rem; background:#1b222c; padding:12px; border-radius:6px;">
<strong>Terv lépései:</strong><br>
1. Adatmodell (időpont, név, férőhely)<br>
2. UI váz (Lovable gyors iteráció)<br>
3. Validáció és visszajelzés
</div>
<label for="name">Név (kötelező)</label>
<input type="text" id="name" placeholder="pl. Horváth Anna" value="">
<label for="date">Időpont</label>
<input type="date" id="date" value="2025-05-20">
<label for="slots">Férőhely (1–5)</label>
<select id="slots">
<option value="1">1 fő</option>
<option value="2" selected>2 fő</option>
<option value="3">3 fő</option>
<option value="4">4 fő</option>
<option value="5">5 fő</option>
</select>
<div class="btn-row">
<button type="button" id="foglal">Foglalás</button>
<button type="button" class="reset" id="torles">Törlés</button>
</div>
<div class="msg" id="msg"></div>
<small>Forrás: docs.lovable.dev – csak demonstrációs célra, nincs adattárolás.</small>
</div>
<script>
const nameInput = document.getElementById('name');
const dateInput = document.getElementById('date');
const slotsSelect = document.getElementById('slots');
const msgBox = document.getElementById('msg');
function showMsg(text, type) {
msgBox.textContent = text;
msgBox.className = 'msg visible' + (type ? ' ' + type : '');
}
function clearMsg() {
msgBox.textContent = '';
msgBox.className = 'msg';
}
document.getElementById('foglal').addEventListener('click', function() {
const name = nameInput.value.trim();
const date = dateInput.value;
const slots = parseInt(slotsSelect.value, 10);
if (!name) {
showMsg('Hiba: add meg a neved!', 'err');
return;
}
if (!date) {
showMsg('Hiba: válassz időpontot!', 'err');
return;
}
const selectedDate = new Date(date + 'T00:00:00');
const today = new Date();
today.setHours(0,0,0,0);
if (selectedDate < today) {
showMsg('Hiba: nem lehet múltbeli dátum!', 'err');
return;
}
if (isNaN(slots) || slots < 1 || slots > 5) {
showMsg('Hiba: érvénytelen férőhely!', 'err');
return;
}
// Sikeres foglalás
const formattedDate = selectedDate.toLocaleDateString('hu-HU', { year: 'numeric', month: 'long', day: 'numeric' });
showMsg('✅ Sikeres foglalás! Név: ' + name + ' – Dátum: ' + formattedDate + ' – Férőhely: ' + slots + ' fő', 'ok');
});
document.getElementById('torles').addEventListener('click', function() {
nameInput.value = '';
dateInput.value = '';
slotsSelect.value = '2';
clearMsg();
});
</script>
</body>
</html>A weboldalon megjelenő szöveges és vizuális tartalmak előállításához mesterséges intelligenciát (AI) használunk.