🚀 Első lépések – WebVidra útmutató

# Hogyan készíts weboldalt a WebVidrával?

Ez az útmutató végigvezet az első weboldal elkészítésén — a mappakiválasztástól egészen a publikálásig. Nincs szükség programozói tudásra.

## 🔄 A teljes munkafolyamat – lépésről lépésre

📂 1. lépés – Projekt mappa létrehozása és megnyitása

A WebVidra fájlokban tárolja a weboldaladat. Minden weboldalhoz egy saját, üres mappát érdemes létrehozni a számítógépeden.

1. Hozz létre egy üres mappát bárhol a gépeden (pl. `Dokumentumok/sajat-weboldal`).
2. Kattints a „Projekt Mappa Megnyitása" gombra.
3. Tallózd ki a létrehozott mappát és nyisd meg.
4. A program automatikusan létrehozza a szükséges fájlrendszert a mappában.

💡 Legutóbbi projektek: Az indítóképernyőn megjelennek a korábban megnyitott projektek — egyetlen kattintással visszatérhetsz bármelyikhez.
⚙️ 2. lépés – Alapadatok és stílus beállítása

Miután megnyílt a szerkesztő, állítsd be a weboldal alapadatait:

1. Kattints a bal oldali sáv alján a „⚙ Weboldal Beállítások" gombra.
2. A Globális fülön add meg: weboldal neve, URL-je, rövid leírása, nyelve, lábléc szövege.
3. A Stílusok fülön válassz egy beépített sablon-témát (egy kattintás, bármikor módosítható).
4. Zárd be a beállításokat.

📄 3. lépés – Oldalak megtervezése

A weboldal több oldalból állhat (főoldal, Rólam, Kapcsolat, Portfólió, stb.).

1. Az `index` főoldal alapból létezik — kezd ezzel.
2. Új oldalt a felső eszköztár + gombjával hozhatsz létre.
3. Az oldalak sorrendjét a ↑↓ gombokkal változtathatod — ez lesz a navigációs menü sorrendje a weboldalon.
4. Az 👁 gombbal egy oldalt elrejthetsz a menüből (a link él, csak nem jelenik meg a navigációban).

💡 Az `index` oldal mindig a weboldal főoldala. A neve nem változtatható, de a megjelenített cím igen.
🎨 4. lépés – Tartalom szerkesztése (blokkok)

Minden oldal blokkokból épül fel. Blokkokat a jobb oldali panelből adhatsz hozzá.

Blokk típus | Mire való
--- | ---
Hero / Borító | Nagy, figyelemfelkeltő kép szöveggel — tökéletes a főoldalra
Szövegdoboz | Szöveg, bekezdések, formázott tartalom
Teljes Kép | Egy képet az oldal teljes szélességére
Kép + Szöveg | Kétoszlopos elrendezés: kép és szöveg egymás mellett
Képrács (Photo Grid) | Fotók mozaik-galériában, lightbox előnézettel
Projekt Galéria | Kattintható csempék, amik részletes aloldalakra visznek
Videó | Videó lejátszó (.mp4, .webm fájlhoz)
Gomb | Kattintható gomb egyedi szöveggel és URL-lel
Egyedi HTML | YouTube beágyazás, Google térkép, bármilyen HTML kód

Hogyan kell szerkeszteni:

- Hozzáadás: Kattints a jobb oldali blokk-gombra, vagy húzd az előnézetre.
- Kijelölés / szerkesztés: Kattints a blokkra az előnézetben — a bal panelben megjelennek a beállításai.
- Szöveg szerkesztése: Szöveg blokknál duplán kattintva közvetlenül szerkeszthetsz.
- Sorrend változtatása: Fogd meg és húzd fel/le a blokkot az előnézeti vásznon.
- Törlés: Jelöld ki a blokkot, majd a bal panel tetején a piros „Blokk Törlése" gomb.
  Visszavonható: Ctrl+Z

💾 5. lépés – Mentés

A Mentés (Ctrl+S) a projekt összes adatát a `projekt.json` fájlba írja.

⚠️ Fontos: Mentés ≠ weboldal fájlok frissítése. A HTML fájlok csak a GENERÁLÁS gomb hatására jönnek létre/frissülnek.
💡 Mentsd el a munkádat rendszeresen — különösen mielőtt kilépnél vagy nagyobb változást csinálnál.
⚡ 6. lépés – Generálás és helyi előnézet

Nyomd meg a felső sávban a kék GENERÁLÁS gombot.

Ekkor a program a projekt mappájában létrehozza/frissíti az összes weboldal fájlt:

- `index.html`, `[oldalnév].html` — az összes oldal
- `style.css` — stíluslap
- `sitemap.xml` — keresőoptimalizálás
- `404.html` — hibaoldal
- Kategória almappák a projekt aloldalakkal

Generálás után a program automatikusan megnyit egy helyi előnézetet a böngésződben — így ellenőrizheted az eredményt mielőtt publikálod.

💡 Ha ismeretlen fájlokat talál a mappában (amit te tettél oda kézzel), megkérdezi mit tegyen velük — törölheted vagy kivételként megtarthatod.
🌐 7. lépés – Publikálás az interneten (Deploy)

Nyomd meg a Deploy gombot a felső sávban. A program feltölti a generált fájlokat közvetlenül az internetre.

### Támogatott platformok:

- Netlify – Ingyenes. Regisztrálj a netlify.com-on, szerezz Access Tokent.
- Bunny.net – CDN alapú, villámgyors tárhely. Add meg a Storage Zone nevet és API kulcsot.

A Deploy ablakban a „❓ Hogyan állítsam be?" gombra kattintva részletes lépéseket találsz a hozzáférési adatok megszerzéséhez.

💡 A hozzáférési adataid helybe mentődnek — nem kell minden alkalommal újra megadnod.

## 🔁 A napi munka ciklusa

Miután egyszer felállítottad a projektet, a folyamatos munkád így néz ki:

✏️
Szerkesztés
blokkok módosítása
→
💾
Mentés
Ctrl+S
→
⚡
Generálás
HTML fájlok
→
🔍
Előnézet
böngészőben
→
🚀
Deploy
publikálás

## 📁 Mi jön létre a projekt mappában?

A WebVidra az alábbi fájlokat és mappákat hozza létre automatikusan:

Fájl / Mappa | Tartalom | Fontos?
--- | --- | ---
`projekt.json` | A projekt összes adata (oldalak, blokkok, beállítások) | ⭐ Igen — ez a projekt „agya"
`uploads/` | A feltöltött képek másolatai | ⭐ Igen — ne töröld!
`smal/` | Automatikusan optimalizált (kisebb) képek reszponzív betöltéshez | Kezeli a program
`index.html` | A főoldal HTML fájlja (GENERÁLÁS után) | Újragenerálható
`style.css` | A weboldal stíluslapja (GENERÁLÁS után) | Újragenerálható
`[oldalnév].html` | Minden oldal saját HTML fájlja | Újragenerálható
`[kategória]/` | Projekt aloldalak almappái | Újragenerálható

💡 Biztonsági mentés: Csak a `projekt.json` fájlt és az `uploads/` mappát kell elmenteni — a weboldal bármikor újragenerálható ezekből.
⚠️ Ne nevezd át és ne töröld kézzel a képfájlokat az `uploads/` vagy `smal/` mappában — a projekt.json ezekre hivatkozik, és a projekt elromolhat.

## 🖼️ Portfólió / Projekt aloldalak készítése

Hogyan hozok létre kattintható csempéket projekt aloldalakkal?

1. Nyisd meg a „⚙ Weboldal Beállítások" → „Projects" fület.
2. Hozz létre egy kategóriát (pl. „munkáim", „fotóim").
3. A kategórián belül adj hozzá projekteket: cím, borítókép, leírás, tartalom blokkok (szöveg, képrács, videó).
4. A kívánt oldalon adj hozzá egy „Projekt Galéria" blokkot a jobb oldali panelből.
5. A blokk tulajdonságainál válaszd ki, melyik kategória projektjeit mutassa.
6. Nyomd meg a GENERÁLÁS gombot — a program létrehozza a csempéket és az összes aloldalt.

💡 Minden projekt aloldalán automatikusan megjelenik a cím, borítókép, leírás és az összes tartalom blokk — mindez a projektadatokból generálódik.

## ⌨️ Hasznos billentyűparancsok

Billentyű | Funkció
--- | ---
Ctrl+S | Projekt mentése
Ctrl+Z | Visszavonás (Undo)
Ctrl+Y | Újra (Redo)
Ctrl+`+` | A program felületének nagyítása (GUI zoom in)
Ctrl+`−` | A program felületének kicsinyítése (GUI zoom out)
Ctrl+0 | Visszaállítás alapméretbe (100%)
Esc | Nyitott ablak/párbeszéd bezárása

💡 Ha a program felülete túl nagy vagy túl kicsi a képernyődön, a Ctrl+ és Ctrl− billentyűkkel bármikor beállíthatod a kényelmes nézetet. A Ctrl+0 visszaállítja az alapértelmezett méretet.

## 💻 A projekt áthelyezése másik gépre

Hogyan viszem át a projektet másik számítógépre?

1. Másold át a teljes projekt mappát az új gépre (USB, felhő, stb.).
2. Nyisd meg a WebVidrát az új gépen.
3. Kattints a „Projekt Mappa Megnyitása" gombra és tallózz a másolt mappára.
4. A program felismeri a `projekt.json`-t és betölti a projektet.

A generált HTML fájlok (`index.html`, `style.css`, stb.) nem szükségesek az átvitelhez — ezek bármikor újragenerálhatók.