V2 puslapio sandara
Originalūs ženklai ir David šriftai išsaugoti. Vienas popierinis kvietimas keliauja per puslapį ir atveria tikrą dialogą. Filmo ekranas atsiveria slenkant. Skilčių dekoratyviniai numeriai pašalinti.
| Vieta | Skiltis | Paskirtis |
|---|---|---|
| Pradžia | Hero ir vieta | Originalūs NU:MO bei PASAKA ženklai; judanti antraštė, data, kvietimas ir registracijos nuoroda. |
| #vakaras | Prieš užgęstant šviesoms | Šviesus susitikimo blokas: gėrimai, užkandžiai, pokalbiai, galimybė atvykti dviese. |
| #filmas | Kino ekrano atsidengimas | Sticky scena: horizontalus ekrano plyšys išsiplečia į filmą, atsiranda didelis pavadinimas ir anonso mygtukas. |
| .film-details | Apie filmą | 34 dienos pateikiamos sakinyje; kūrėjai, trukmė, kalba, IMDb rodmuo ir apdovanojimas. |
| .theranos-story | Istorija skaičiais | Pritrauktos investicijos, Murdocho pavyzdys ir prognozuotų bei faktinių 2014 m. pajamų palyginimas. |
| #filmo-kontekstas | Kas paaiškėjo vėliau | Native details: apie 12 iš daugiau nei 200 tyrimų ir teismo priteistas žalos atlyginimas. |
| #vieta | Vieta ir laikas | 2026-12-14, renginio pradžia 18.00, Paupio g. 26; žemėlapis ir kalendorius. |
| #registracija | Dalyvavimo peržiūra | Vienas arba du dalyviai, keturi laukai, validacija ir demonstracinis patvirtinimas. |
| #journey-ticket | Keliaujantis kvietimas | Tas pats mygtukas pereina nuo hero į ekrano kampą ir į registracijos krėslo vietą. Paspaudus atsiveria tikras kvietimo dialogas. |
Kino scena yra vaizdas su CSS judesiu; projekte nėra WebGL arba tikro 3D modelio. CSS tvarka: styles.css → experience.css. Logika atskirta į app.js ir motion.js.
Hero ir kvietimas
| Elementas | Kada | Parametrai |
|---|---|---|
| Hero antraštė | Kai po pirmo render įdedama motion-ready ir judesys leidžiamas | Kiekviena eilutė Y 108 % → 0 per 1050 ms; antros eilutės delsa 130 ms. Kreivė cubic-bezier(.16,1,.3,1). |
| Hero tekstas ir mygtukai | Tas pats CSS būsenos perėjimas | Opacity 0 → 1; Y 14 → 0 px; 1100 ms, 320 ms delsa. Grąžinus judesį CSS animacijos gali prasidėti iš naujo. |
| Hero scenos vaizdas | motion-ready be no-motion | Mastelis 1,045 → 1 per 1800 ms; cubic-bezier(.2,.6,.2,1). |
| Hero parallax | Fine pointer, hover, plotis nuo 761 px | X nuo −9 iki +9 px; Y nuo −6 iki +6 px; 650 ms perėjimas cubic-bezier(.22,1,.36,1). Išėjus rodyklei grįžta į 0. |
| Susitikimo vaizdas | Slinkimas, vaizdas ekrane, fine pointer ir plotis nuo 761 px | Y = clamp(−8, 8, (top − 0,4 × lango aukštis) × 0,02) px. Atnaujinama per requestAnimationFrame; atskiros trukmės nėra. |
| Kvietimo hover | Rodyklė virš keliaujančio bilieto | Popieriaus fonas pašviesėja iki #f6f1e3 ir brightness 1,03; 250 ms. Funkcija pasiekiama ir klaviatūra. |
| Kvietimo atidarymas | Paspaudžiamas #journey-ticket | Native dialog: opacity 0 → 1, Y 14 → 0 px, rotate 2° → 0°, scale 0,96 → 1 per 380 ms; cubic-bezier(.16,1,.3,1). Uždarymas be atskiros animacijos. |
Vieno bilieto kelionė
| Etapas | Tiksli taisyklė |
|---|---|
| Pradinė vieta | ticket-origin plotis / 144; kampas −9°. Desktop pradinis plotis 144 px, iki 760 px – 112 px. |
| Išskridimas | departure = smoothstep(0,2 × hero aukštis; 0,9 × hero aukštis; −hero.top). Tarp pradžios ir kampo interpoliuojami X, Y, mastelis ir kampas. |
| Ekrano kampas | Desktop X = W − 92, Y = H − 128, scale 0,48. Iki 760 px: X = W − 69, Y = H − 102, scale 0,36. X ir Y ne mažesni nei 12 px; kampas −5°. |
| Pasiekiama pabaiga | scrollRoom = max(0, scrollHeight − clientHeight − scrollTop); lastTargetTop = destination.top − scrollRoom. Reikšmės imamos iš document.scrollingElement. |
| Nusileidimo ribos | end = max(0,52 × H, lastTargetTop); start = max(0,94 × H, end + min(120 px, 0,15 × H)). Įprastai pabaiga yra 52 % H; ties dokumento apačia pritaikoma pasiekiama vieta. |
| Nusileidimas | landing = 1 − smoothstep(end; start; destination.top). Bilietas pasiekia krėslą ir tada, kai dokumento aukščio nepakanka paskirties taškui pakelti iki 52 % H. Papildoma tuščia skiltis nepridedama. |
| Galutinė vieta | Mastelis = clamp(destination.width / 144, 0,3, 1); kampas −8°. Desktop anchor 68 px, telefone 59 px, iki 360 px – 53 px. |
| Laikas ir kryptis | Trukmė nenustatyta milisekundėmis: padėtį valdo slinkimas; slenkant atgal kelionė apsiverčia. Vienas interaktyvus mygtukas, ne keli besikeičiantys bilietai. |
Kelionės trukmę valdo slinkimas. Pradinis mastelis skaičiuojamas iš realaus anchor pločio. Dialogas yra kvietimas, ne dalyvavimo patvirtinimas.
Filmo atsidengimas
| Elementas | Tiksli taisyklė |
|---|---|
| Progresas p | clamp(−reveal.top / max(1, reveal.height − tikras film-stage aukštis), 0, 1). Naudojamas išmatuotas stage aukštis, ne vien innerHeight. |
| Ekrano atsidengimas | opening = smoothstep(0,04; 0,76; p). Viršutinis ir apatinis clip-path inset mažėja nuo 46 % iki 0 %. Matomas plyšys išsiplečia į visą kadrą. |
| Vaizdo mastelis | scale = 1,1 − 0,1 × opening, t. y. 1,1 → 1. Tai slinkimo, ne hover mastelio pokytis. |
| Filmo pavadinimas | title = smoothstep(0,54; 0,86; p). Opacity 0 → 1; Y 28 → 0 px. |
| Įžanginis tekstas ir šviesos linija | Opacity = 1 − smoothstep(0,06; 0,32; p). Jie išnyksta pradžioje, kol atsidengia ekranas. |
| Hover ant filmo | Saturate 0,62 → 0,9 per 650 ms. Hover neprideda atskiro mastelio; play apskritimo fonas keičiasi per 200 ms. |
| Konteineriai | Desktop reveal min. 180svh; iki 760 px – 145svh. Stage 100svh, min. 550 px, telefone min. 570 px. Slinkimas lieka natūralus. |
p skaičiuojamas pagal realų sticky scenos aukštį. Smoothstep reiškia t²(3−2t), kur t normalizuojamas tarp nurodytų ribų. Didieji finansiniai skaičiai statiški.
Kitos sąveikos ir judesio ribos
| Elementas | Elgesys |
|---|---|
| Mygtukai ir nuorodos | Fonas ir teksto spalva 180 ms. Rodyklė X +3, Y −2 px per 140 ms; pagrindiniam mygtukui ir focus-visible. |
| Filmo details | Atidaro naršyklė be aukščio animacijos; + pasisuka 45° per 200 ms. Pradžioje užvertas. |
| Svečių pasirinkimas | Pasirinktos radio kortelės fonas ir kraštinė 200 ms. |
| Antras krėslas | Pasirinkus 2: pirmas X 0 → −28 px; antras X 12 → 0 px ir opacity 0 → 1, scale lieka 0,92. 340 ms; pasirinkus 1 apsiverčia. |
| Patvirtinimo bilietas | Po vietinės validacijos: opacity 0,4 → 1, Y 8 → 0 px per 240 ms. Tai formos peržiūros būsena. |
| Anonso dialogas | Native showModal be papildomos atsiradimo animacijos. Iframe sukuriamas tik paspaudus ir pašalinamas uždarius. |
| Vidinės nuorodos | CSS smooth scroll; trukmę parenka naršyklė. Sumažinto arba sustabdyto judesio režimu – auto. |
| Finansiniai skaičiai | Statiškas tekstas. Nėra count-up, vartomų skaitmenų ar judančių pajamų stulpelių. |
OS ir rankinis sustabdymas
Judesys stabdomas, kai prefers-reduced-motion yra reduce ARBA įjungta rankinė pauzė. OS pasirinkimo rankiniu mygtuku apeiti negalima: jis turi aria-disabled, paspaudimas ignoruojamas, paaiškinimas matomas tekste. Pasirinkimas nesaugomas po perkrovimo. Išjungiami CSS perėjimai, keyframes, smooth scroll ir parallax. Filmo kadras bei titras rodomi iš karto, o ilgoji reveal skiltis grįžta į 100svh.
Bilieto skrydis sustabdomas, bet kvietimas lieka pasiekiamas. Jis be interpoliavimo laikomas hero document anchor, stabiliame ekrano kampe arba RSVP anchor. Į destination pereinama, kai jos top ≤ max(0,85 × H, lastTargetTop), taigi ir pasiekus dokumento apačią. Kitu atveju hero pozicija išlaikoma, kol hero.bottom > 0,35 × H, arba rodomas stabilus ekrano kampas. Pozicijos keitimas momentinis, ne animuotas.
Klaviatūra
Gavus fokusą bet kuriam film-stage elementui, maskė nuimama, kadras ir titras parodomi sinchroniškai. Fokusui išėjus grįžta slinkimo būsena. Kvietimo dialoge fokusas nukreipiamas į uždarymą; uždarius grįžta į bilietą. Pasirinkus dialogo nuorodą į filmą arba registraciją fokusas į bilietą negrąžinamas. Escape ir paspaudimas už lango uždaro abu dialogus. Jei kvietimo dialogo API neprieinama, jo mygtukas veda į registraciją.
Registracija lieka demonstracinė
Registracija lieka demonstracinė: preventDefault sustabdo pateikimą, patikrinami laukai, parodomas vardinis bilieto pavyzdys. Backend užklausų ir localStorage / sessionStorage įrašų nėra. Submit pradžioje disabled; app.js jį įjungia tik pridėjęs submit handlerį. Grįžus į formą įvestis lieka puslapio atmintyje.
| Laukas arba veiksmas | Taisyklė |
|---|---|
| Vardas ir pavardė | Privalomi, po trim ne tušti; kiekvieno maxlength 80. Unicode vardai neapribojami ASCII raidėmis. |
| Telefonas | Privalomas; skaitmenys, +, tarpai, skliaustai, taškas ir brūkšnelis. 7–15 skaitmenų, maxlength 30. |
| El. paštas | Privalomas; type=email naršyklės validity.valid, maxlength 160. |
| Dalyviai | Radio 1 arba 2; pradinė reikšmė 1. Patvirtinime rodomas pasirinktas skaičius. |
| Klaidos ir peržiūra | aria-invalid, susieti klaidų tekstai ir fokusas į pirmą klaidą. Vardas pateikiamas per textContent, grįžus į formą įvestis išlieka. |
Anonsas
YouTube nocookie iframe sukuriamas tik paspaudus anonso mygtuką; tuomet prašoma autoplay. Naršyklė gali jį riboti. Uždarius dialogą iframe pašalinamas, slinkimas atkuriamas, fokusas grįžta į anonso mygtuką. Yra tiesioginė YouTube nuoroda.
Kalendorius
Kalendoriaus DTSTART:20261214T160000Z yra 18.00 Europe/Vilnius. DTEND ir DURATION nėra; STATUS:TENTATIVE. Tai renginio pradžia ir ne dalyvavimo patvirtinimas. Seanso pradžia bei renginio pabaiga nepatvirtintos.
Ką tiksliai reiškia skaičiai
| Rodmuo | Ką reiškia | Riba |
|---|---|---|
| Daugiau nei 700 mln. USD | Pritraukta nuo 2013 m. pabaigos iki 2015 m. | SEC 2018 m. ieškinys; ne visų įmonės veiklos metų suma ir ne priteistas atlyginimas. |
| Daugiau nei 100 mln. ir vos daugiau nei 100 tūkst. USD | 2014 m. investuotojams prognozuotos pajamos ir SEC nurodytos faktinės pajamos. | Prognozė atskiriama nuo fakto. Nepateikiamas tariamai tikslus santykis arba nuostolio procentas. |
| Dešimtys investuotojų | Bendras investuotojų apibūdinimas pagal DOJ. | Tai nėra tikslus milijonierių skaičius. Svetainėje toks skaičius neteikiamas. |
| Apie 125 mln. USD | Ruperto Murdocho investicija pagal teismo dokumento lentelę. | Vieno investuotojo pavyzdys, ne atskirai prie 700+ mln. pridedama suma. |
| Apie 12 iš daugiau nei 200 tyrimų | SEC ieškinyje aprašyta, kiek katalogo tyrimų atlikdavo nuosavas analizatorius. | Tai nėra tyrimų tikslumo procentas. Likusiems naudota kitų gamintojų įranga. |
| 452 047 268 USD | 2023 m. iš Holmes ir Balwani solidariai priteistas žalos atlyginimas. | Tai teismo priteista suma konkretiems gavėjams. Ji nereiškia jau grąžintų pinigų ar visų investuotojų visų nuostolių. |
Palikti laikotarpį ir formuluotes „apie“ bei „daugiau nei“. Investicijos, pajamos ir teismo priteistas atlyginimas yra skirtingi dydžiai. Tikslaus milijonierių skaičiaus neteikiame.
- SEC ieškinys 2018 m. – investicijos ir tyrimai
- SEC pranešimas – 2014 m. pajamos
- Teismo dokumentas – Murdocho investicija
- 2023 m. teismo nutartis – žalos atlyginimas
- DOJ – investuotojų apibūdinimas ir nuosprendis
- A24 – filmo pristatymas
- IMDb – filmo įvertinimas
- Critics Choice – apdovanojimas
- Pasaka – filmo informacija
- Anonsas YouTube
IMDb 9,0/10 ir apie 32 tūkst. įvertinimų – 2026-11-12 fiksuotas rodmuo, ne automatinis atnaujinimas.
Originalūs failai ir iliustracijos
| Failai | Kilmė |
|---|---|
| numo-logo.svg | Originalus NU:MO SVG. Keliai nepakeisti; šviesus variantas rodomas CSS filtru. |
| pasaka-logo.png | Originalus PASAKA ženklas. V2 jis rodomas pirmame ekrane ir kvietimo dialoge. |
| david-regular.otf ir david-light.otf | Originalūs David failai. Regular deklaracija 400–700, Light 300. Jokio pakaitinio antraščių šrifto. |
| pamatysi-viska-anonsas.webp | Filmo kadras iš pateiktos pradinės svetainės. |
| hero-cinema.webp ir .png | Sugeneruota kino krėslų iliustracija. Tai nėra „Pasakos“ salės fotografija ar perduodamas 3D modelis. |
| welcome-detail.webp ir .png | Sugeneruota nuotaikos kompozicija; ji nerodo patvirtinto renginio dekoro. |
| chair-cutout.webp ir .png | Skaidrus krėslo vaizdas svečių pasirinkimui; tikros kino vietos nerezervuojamos. |
Originalų kilmė ir SHA-256 pateikti ASSET_PROVENANCE.json. Generuoti vaizdai nėra dokumentinės salės ar patvirtinto renginio nuotraukos.
Užduotis Claude arba programuotojui
Integracijai prijungti, išlaikant V2 dizainą ir judesius.
Prieš realų naudojimą
- Prijungti organizatoriaus nurodytą registracijų sistemą. Dabartinis submit duomenų nesiunčia; gavėjo nesugalvoti.
- Serveryje pakartoti validaciją, valdyti pasikartojantį pateikimą, pridėti siuntimo ir klaidos būsenas. Sėkmę rodyti tik patvirtinus įrašo sukūrimą.
- Klaidos atveju išlaikyti įvestį. Tik veikiančioje integracijoje pakeisti demonstracinius tekstus ir mygtuką.
- Suderinti kontaktų paskirtį, prieigą ir saugojimą. Prieš siunčiant kvietimus patikrinti renginio duomenis ir IMDb rodmenį.
- Pakartoti integruotos versijos patikrą: mažas plotis ir aukštis, klaviatūra, OS ir rankinis reduced motion, bilieto kelionė, dialogai, lėtas tinklas bei serverio klaida.
Paleidimas
Paleisti iš projekto aplanko: python3 -m http.server 8080 --directory dist. Atidaryti http://localhost:8080/. Build žingsnio ir išorinių UI bibliotekų nėra; publikuojamas dist aplankas.
Aprašas patikrintas pagal V2 kodą. Visų naršyklių ir backend testų jis nepakeičia.