Komponenty wycięte z bieżących źródeł Dealyo

Trzy samodzielne dokumenty: card.html, process.html i illustration.html. Otwieraj przez lokalny serwer HTTP, aby działał import modułu animacji. manifest.json zawiera źródła, selektory, zależności oraz pliki fragmentów HTML.

To kopie istniejących struktur i klas, z neutralnymi polami zamiast treści oferty. Nie są nowymi kompozycjami. Numery w wizualizacji wyszukiwarki są kolejnością demonstracyjnych wyników, nie wynikami firmy. Pola formularza w SVG są wyłącznie rysunkiem.

Źródła i kaskada

• Karta: dealyo-homepage/dist/index.html, #zakres .lpup__card — pierwsza karta (SEO). homepage-source.css zachowuje pełną kolejność: base, components, reviews, upgrades, work, layout, dealyo. Oryginalne atrybuty Astro pozostają, ponieważ źródłowe selektory ich wymagają. homepage-source.js to niezmieniony app.js strony głównej; w tym dokumencie uruchamia wyłącznie istniejące wejście karty i plakietki.
• Proces: dealyo-audyt-cloudflare/public/index.html, .lp-start-steps. Zgodnie z obecną polityką audytu ta treść jest statyczna na scrollu; atrybuty data-reveal-* nie uruchamiają tu animacji.
• Ilustracja: ten sam audyt, .lp-method-flow li:nth-child(2) .lp-method-art[data-process-scene="method-form"]. Zachowuje oryginalny SVG, klasy i klatki animacji przewijania, wpisywania pól, kliknięcia oraz potwierdzenia.
• audit-source.css zawiera oryginalny inline #critical-css, następnie landing.css. Zawiera już wynikową typografię i process-scenes.css/process-motion.css; nie dołączaj ich ponownie. process-motion.js jest niezmienionym modułem z audytu.
• source-snapshots.json zawiera SHA-256 plików wejściowych, z których powstały kopie.

Pełne snapshoty CSS celowo zachowują kaskadę zamiast zgadywać najmniejszy zestaw reguł. Skopiowano tylko lokalne fonty i cztery pliki SVG wskazane przez te arkusze. Brak formularzy, endpointów, zewnętrznych fontów i kodu śledzącego. Moduł animacji zatrzymuje scenę poza kadrem i w ukrytej karcie oraz respektuje prefers-reduced-motion.

Izolacja podglądu

specimens.css usuwa wyłącznie pełnostronicową ramę/odstępy i minimalną wysokość viewportu, ogranicza szerokość pojedynczej karty oraz pojedynczej komórki diagramu. Wewnątrz komponentów zachowano źródłowe reguły. Nadpisania decyzji marki: #FE4A23, proste narożniki boxów, biały tekst i ikona CTA. Okręgi i geometria SVG pozostają oryginalne.

Fragmenty w snippets/ wymagają kontekstu nadrzędnego z odpowiadającego im pełnego dokumentu: karta — body > main#main > .yt, audyt — body.lp-redesign > main. Najpewniejszym punktem startowym jest skopiowanie całego odpowiedniego dokumentu wraz z jego zależnościami i katalogiem assets/.

Podgląd w iframe nie ma min-height:100vh. Do automatycznej wysokości używaj wysokości document.body.getBoundingClientRect().height, a nie wysokości viewportu document.documentElement.scrollHeight.

Walidacja

validate.mjs sprawdza 1440 i 390 px, zwykły ruch i ograniczony ruch: brak poziomego przepełnienia, brak zewnętrznych żądań, brak błędów JS/HTTP, lokalny General Sans, proste narożniki oraz faktyczny ruch oryginalnego SVG. Wynik: qa/validation.json, zrzuty: qa/.

Uruchom z głównego katalogu projektu po uruchomieniu python3 -m http.server 8894 --bind 127.0.0.1:

node design-system/reference-components/content/validate.mjs

Opcjonalne zmienne: SPECIMEN_ORIGIN (domyślnie http://127.0.0.1:8894) i PLAYWRIGHT_MODULE (ścieżka do zainstalowanego Playwright).