6. Ai Weboldal készítés (+Prompt)

 

Készíts nekem weboldalt az alábbi prompt segítségével:

AURUM Karóra-Márka — Egyszerűsített Prompt Készíts egy elegáns, minimalista luxus karóra-márka landing oldalt egyetlen, önálló HTML kódblokként, amit közvetlenül be tudok illeszteni egy WordPress oldal Elementor HTML widgetjébe. Stílus: black-on-black, finom arany akcentekkel, sok white space, lassú elegancia. ⚠️ NULLA külső kép. Csak inline SVG és CSS. (Google Fonts megengedett — ez az egyetlen kivétel.) A MÁRKA:

  • Név: AURUM — svájci luxus karóra-manufaktúra, alapítva 1924-ben Genfben.
  • Slogan: “Az idő, mesteri kéz alkotta.”

  • CTA: “Kollekció felfedezése” ⭐ A WOW-ELEM: ÉLŐ MŰKÖDŐ SZÁMLAP A hero szekció középpontjában egy NAGY (kb. 440px), működő analóg karóra inline SVG-ben:

  • Kör alakú számlap, sötét radiális gradiensszel
  • Római számjelek arany színnel a XII, III, VI, IX pozíciókban + apró tick-markerek a többi percnél
  • Három mutató: óra (rövid, vastag), perc (hosszú, vékony), másodperc (legvékonyabb, vörös csúccsal)
  • A másodpercmutató TÉNYLEGESEN körbejár: animation: aur-tick 60s linear infinite — folyamatosan, NEM ugrós
  • A perc- és óramutatót JS-ből állítsd a valós időhöz a betöltéskor (inline transform: rotate(...))
  • Kis arany kör a forgáspontban
  • “AURUM · GENÈVE · SWISS MADE” felirat a 12 alatt kicsiben
  • Finom üveg-reflexió overlay (fél-átlátszó ívelt path)

  • Mély drop shadow a számlap alatt Opcionális: a háttérben egy lassan forgó SVG fogaskerék 8% opacitással. TECHNIKAI:

  • Egyetlen blokk, NE legyen <!DOCTYPE>, <html>, <body> tag
  • Minden CSS <style>-ban, .au- prefix, mindent a .au-wrapper alá scoped
  • CSS reset a wrapperen: all: unset; display: block; box-sizing: border-box;
    • * { margin:0; padding:0; box-sizing:border-box; }
  • CSS változók (színek, fontok, térközök) a wrapper szintjén
  • Google Fonts: “Cinzel” (címek, uppercase) + “Inter” (body)
  • JS IIFE-ben a végén

  • Reszponzív, mobile-first SZÍNEK: onix fekete #0a0908, antracit #1f1a14, pezsgő-arany #c9a961, fakó arany #e6c989, halvány elefántcsont #f0e6d2. SZEKCIÓK (csak 5):

  • Hero — Középen az élő óra, mellette/alatta nagy “AURUM” cím Cinzel-lel uppercase, slogan italic, CTA gomb (átlátszó + arany szegély → hover: kitölt arany glow-val). Felül “MAISON · GENÈVE · EST. 1924”.
  • Bemutatkozás — Kétoszlopos: bal oldalon rövid szöveg (2-3 bekezdés a kézművességről, 100 év hagyomány), jobb oldalon egy nagy aranyszínű “100” szám háttérvízjelként + apró felirat “ÉV ÖRÖKSÉG”.
  • A Kollekció — 3 óra-modell rácsban, mindegyik egy egyszerűbb SVG karóra (NEM kell minden modell teljesen működő számlap, statikus mutatókkal is jó — csak az óra-stílus legyen különböző: pl. egyik chrono sub-dial-okkal, másik tisztán dress, harmadik dátumablakkal). Hover-re finom emelkedés és arany glow. Alatta: modellnév, specifikáció (pl. “Automata · 42mm”), ár CHF-ben (24 800 CHF, stb.).
  • Privát Bemutató CTA — Mély fekete, középen “Foglalj privát bemutatót” cím, alatta a kapcsolati infók (cím, telefon, email), pulzáló arany CTA gomb.

  • Footer — Minimal: arany “AURUM” Cinzel-lel, kapcsolat, közösségi média ikonok SVG-vel. ANIMÁCIÓK (csak ezek, semmi több):

  • Másodpercmutató forgása (60s linear infinite)
  • Scroll-on-view fade-up minden szekcióra (IntersectionObserver)
  • Hero stagger-belépés: cím → slogan → gomb egymás után
  • Hover: óra-kártyák kis emelkedés + arany glow
  • CTA gomb pulzáló glow effekt A szöveg magyar, hihető fiktív tartalommal. Az SVG órák legyenek igényesek (nem placeholder), de NEM kell mindegyikbe a teljes hero-óra részletessége — csak a hero-óra a sztár. A kód végére kód-térkép komment, hogy mit hol találok módosításhoz (színek, modellek, árak, kapcsolat).
Előző Lecke
Vissza: Tanfolyam
Következő Lecke