Készíts el egy teljes, éles környezetre kész, egyoldalas web...

Prompt

Készíts el egy teljes, éles környezetre kész, egyoldalas webalkalmazást, amely egyetlen HTML5-fájlból áll beágyazott CSS-stílusokkal és JavaScript-logikával, teljes egészében, rövidítések nélkül, helyőrzők, kihagyások vagy egyszerűsítések nélkül szállítva. 1. Dokumentumstruktúra és globális stílusok * Hozz létre egy érvényes HTML5-dokumentumot magyar nyelvű lokalizációval (lang="hu"). * Tartalmazzon reszponzív nézetablak-konfigurációhoz szükséges metaadatokat (viewport-fit=cover). * Adj hozzá DNS prefetch hivatkozásokat a betűtípus-kézbesítési domainhez és a videófolyam forrásához. * Importáld a Google 'Inter' betűtípusát 400-as, 600-as és 700-as vastagsággal. * Definiálj egyedi CSS-tulajdonságokat a :root pszeudo-osztályban az elsődleges, az egérkurzor alatti (hover) és a kiválasztott színátmenetek definícióihoz. * Valósíts meg egy globális CSS resetet, amely törli a margókat, a belső margókat, a dobozméretezést, és eltávolítja a koppintás kiemelési színeket. * Állítsd be a body és html stílusokat rögzített háttér-színátmenetekkel, egyedi betűtípus-családokkal, betűsimítással és egy olyan flexbox elrendezéssel, amely támogatja a rögzített pozicionálást a fejléc- és kártyakonténerek számára. 2. Háttérvideó-rendszer * Valósíts meg három rögzített háttérvideó-elemet, amelyek a nézetablakon át lettek pozicionálva a bg-video-0, bg-video-1 és bg-video-2 azonosítókkal. * Konfiguráld az egyes videókat az autoplay, muted, loop, playsinline és webkit-playsinline attribútumokkal, amelyek különálló MP4 videófolyam-URL-ekre mutatnak. * Alkalmazz CSS-stílusokat az object-fit cover, elmosási szűrők, fényerő-beállítások és az aktív osztály váltásának vezérlésére a láthatósági átmenetek irányításához. 3. Fejléc és navigációs komponens * Építs fel egy rögzített fejléc-konténert a nézetablak tetején, amely háttérszűrős elmosási effekttel és áttetsző színátmenetes háttérrel rendelkezik. * Jelenítsd meg az elsődleges címsort és egy lokalizált alcímet. * Tartalmazzon egy időpontfoglalási gombot ARIA-címkével, amely aktiválja a naptár modális ablak megjelenítési függvényét (showCalendar()). 4. Interaktív naptár és foglalási modális ablak * Építs fel egy teljes képernyős naptár modális ablak-felülírást háttér elmosással és sima láthatósági/transzformációs átmenetekkel. * Dátumválasztási szakasz: Biztosíts gyors dátumválasztó gombokat a „Ma” és „Holnap” számára, amelyek formázott dátumokat jelenítenek meg a hu-HU területi beállítás szerinti formázással, valamint egy gombot a heti/havi naptárnézet megnyitásához. * Heti nézet komponens: Valósíts meg heti navigációs vezérlőket (előző és következő hét), egy heti címsorfejlécet, valamint egy hét napját reprezentáló rácsot, amely dátumszámokat és idősáv-gombokat (16:00, 18:00, 20:00, 22:00) tartalmaz, a múltbeli dátumokat pedig kifejezetten tilts le és stílizáld ennek megfelelően. * Havi naptárnézet komponens: Valósíts meg havi navigációs vezérlőket, a hét napjainak fejlécét (H, K, Sz, Cs, P, Sz, V), egy 42 cellás rácsot a dátumokhoz, stílusokat az aktuális hónapon kívüli napokhoz, valamint a múltbeli dátumok letiltását. * Időpontválasztási szakasz: Jelenítsd meg a teljes formázott kiválasztott dátumot és négy idősáv-gomb (16:00, 18:00, 20:00, 22:00) rácsát, amely lehetővé teszi a felhasználók számára, hogy továbblépjenek az időpontfizetés inicializálásához. * Definiálj animációs osztályokat (slide-out-left, slide-out-right, slide-out-up, slide-out-down) a sima nézetátmenetek kezeléséhez a naptár modális ablak megnyitásakor és bezárásakor. 5. Csomagválasztó kártyák konténere * Építs fel egy rögzített alsó konténert, amely vízszintes görgetéssel, rögzülő görgetéssel (scroll-snap-type: x mandatory), rejtett görgetősávokkal, valamint érintéses/egérrel történő görgetési optimalizálással rendelkezik. * Hozz létre három különböző termék-/szolgáltatáskártya listáját reszponzív szélességi konfigurációkkal mobil, táblagép és asztali nézetablakok mentén: * 1. kártya (Alap / Kis csomag): „Alap” jelvénnyel, beágyazott automatikusan induló videóelemmel, „Kis csomag” címmel, „30 mini videó” leírással, „3000 Ft” árral, valamint egy vásárlási gombbal rendelkezik, amely megnyitja a fizetési modális ablakot a "Kis csomag (30 mini videó)" címmel és 3000 árral. * 2. kártya (Kiemelt / Kis csomag+): „Kiemelt” jelvénnyel, beágyazott videóelemmel, „Kis csomag+” címmel, „30 hosszú videó” leírással, „5000 Ft” árral, valamint egy vásárlási gombbal rendelkezik, amely megnyitja a fizetési modális ablakot a "Kis csomag+ (30 hosszú videó)" címmel és 5000 árral. * 3. kártya (Népszerű / Nagy csomag): Népszerű jelvénnyel, beágyazott videóelemmel, „Nagy csomag” címmel, „150 videó + ingyen tali” leírással, „8000 Ft” árral, valamint egy vásárlási gombbal rendelkezik, amely megnyitja a fizetési modális ablakot a "Nagy csomag (150 videó + ingyen tali)" címmel és 8000 árral. 6. Fizetési modális ablak és vágólap segédprogram * Építs fel egy modális párbeszédablak-komponenst bezárás gombbal, dinamikus modális címmel, elválasztó vonallal és fizetési részletek sorokkal. * Tartalmazzon fizetési sorokat, amelyek megjelenítenek egy konfigurálható kedvezményezett nevet, az 11773384-03770582 bankszámlaszámot, valamint a kiszámított teljes árat. * Valósíts meg egy vágólapra másolási segédfüggvényt (copyText), amely egy ideiglenes textarea elemet és a document.execCommand('copy') parancsot használja, kiegészítve egy egyéni toast értesítéssel, amely megerősítést mutat ("Másolva: [text]"). * Adj hozzá ablak-eseményfigyelőket a modális ablak bezárásához háttérre kattintáskor vagy az Escape billentyű megnyomásakor. 7. Átfogó JavaScript-logika és eseménykezelés * Valósíts meg érintési, húzási és görgetési eseményfigyelőket a kártyakonténeren a nézetablak közepének kiszámításához, a legközelebbi kártyára való sima rögzüléshez, az aktív háttérvideó-index frissítéséhez, valamint a haptikus visszajelzés kiváltásához a navigator.vibrate segítségével. * Adj hozzá billentyűzetes navigációs támogatást (ArrowLeft, ArrowRight) a kártyák közötti léptetéshez, az aktív elemek kiemeléséhez és a háttérvideók dinamikus frissítéséhez. * Valósíts meg robusztus videólejátszás-inicializálást, amely kezeli az automatikus lejátszási korlátozásokat felhasználói interakciós figyelőkkel (touchstart, click) annak biztosítására, hogy az összes háttér- és kártyavideó-folyam sikeresen elinduljon. * Valósíts meg teljes naptárgenerálási függvényeket, hónap-/heti aritmetikát, dátumösszehasonlításokat, kiválasztási kezelőket és modális állapottáltásokat. * Biztosítsd, hogy a végső kód 100%-ban teljes legyen, teljesen működőképes, éles környezetre kész és rövidítetlen, csonkított függvények, mock megjegyzések vagy kihagyott kódblokkok nélkül. Send back the complete code with all the fixes. Fix each of the listed errors one by one, making sure to actually correct them so that there are 0 errors remaining. Keep the original imports, since the files exist. Write out every single character; do not abbreviate anything. Fix every error. There must be exactly one file. Do not write anything else; just output the complete code, and it must not contain any comments. Never, under any circumstances, use simplified, substitute, dummy, simulated, or fake code. Write the entire file as complete, unabridged, production-ready code in a single code block. It must be 100% error-free, a complete, error-free file, and must be submitted as a downloadable file. These requirements are mandatory and must be strictly adhered to. If no list of errors is provided, you must find all the errors and fix them. If there were comments in the original code, delete them. And most importantly: YOU MUST NEVER SIMPLIFY!

A system prompt was added to support web rendering