@wiv01 added htmlContent (English):
code:javascript\n<style>\n /* ── Shrek Story — with stills gallery (no JS) ── */\n :root color-scheme: light dark; \n .shrek \n --bg: #0e2a0f; --bg-2: #143d15; --card: #0f2f11; --ring: #2f6f34;\n --fg: #e8ffe9; --muted: #b9d9bd; --accent: #74c476; --accent-2: #b2df8a;\n --radius: 18px; --gap: 20px; --maxw: 1080px;\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, \Helvetica Neue\, Arial, sans-serif;\n color: var(--fg);\n background:\n radial-gradient(900px 600px at -10% -10%, color-mix(in oklab, var(--accent) 25%, transparent) 0, transparent 60%),\n radial-gradient(900px 600px at 110% 110%, color-mix(in oklab, var(--accent-2) 20%, transparent) 0, transparent 60%),\n linear-gradient(180deg, var(--bg), var(--bg-2));\n padding: 28px; border-radius: var(--radius); max-width: var(--maxw); margin: 0 auto;\n box-shadow: 0 10px 40px rgba(0,0,0,.35);\n \n .grid display: grid; gap: var(--gap); \n .card \n background: linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), transparent);\n border: 1px solid color-mix(in oklab, var(--ring) 60%, transparent);\n border-radius: var(--radius);\n padding: clamp(16px, 3.2vw, 28px);\n \n .hero display: grid; gap: clamp(16px, 4vw, 36px); grid-template-columns: 1.2fr .8fr; align-items: center; \n @media (max-width: 880px) .hero grid-template-columns: 1fr; \n\n .eyebrow display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); \n .eyebrow .dot width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 30%, transparent); \n .title font-weight: 900; font-size: clamp(28px, 5vw, 48px); line-height: 1.06; letter-spacing: -0.02em; margin: 8px 0 10px; \n .subtitle color: var(--muted); font-size: clamp(16px, 2vw, 18px); \n\n .avatar display: grid; place-items: center; text-align: center; gap: 12px;\n background: radial-gradient(240px 180px at 30% 10%, color-mix(in oklab, var(--accent-2) 35%, transparent) 0, transparent 70%), color-mix(in oklab, var(--card) 90%, transparent);\n border: 1px solid color-mix(in oklab, var(--ring) 60%, transparent);\n border-radius: calc(var(--radius) + 6px); padding: clamp(16px, 3vw, 24px);\n \n .ogre width: clamp(96px, 22vw, 128px); height: clamp(96px, 22vw, 128px); border-radius: 28px;\n background: conic-gradient(from 220deg, #88d06b, #6abf59, #c9f27a, #88d06b); color: #173117; font-weight: 900; font-size: clamp(36px, 6.5vw, 46px);\n display: grid; place-items: center; box-shadow: inset 0 0 24px rgba(255,255,255,.2);\n \n .badge font-size: 12.5px; padding: 6px 10px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--ring) 60%, transparent); background: color-mix(in oklab, var(--ring) 22%, transparent); \n\n .section h2 margin: 0 0 10px; font-size: clamp(18px, 2.6vw, 26px); letter-spacing: -.01em; \n .muted color: var(--muted); \n .timeline display: grid; gap: 12px; \n .event display: grid; gap: 6px; padding: 12px; border: 1px dashed color-mix(in oklab, var(--ring) 70%, transparent); border-radius: 14px; background: color-mix(in oklab, var(--card) 75%, transparent); \n .event .k font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); \n .event .v font-weight: 600; \n .quote border-left: 4px solid var(--accent); padding: 10px 14px; background: color-mix(in oklab, var(--accent) 18%, transparent); border-radius: 10px; color: var(--fg); \n .list display: grid; gap: 10px; \n .li padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--ring) 60%, transparent); background: color-mix(in oklab, var(--card) 80%, transparent); \n\n /* Gallery */\n .gallery display: grid; gap: 12px; \n @media (min-width: 720px) .gallery grid-template-columns: repeat(3, 1fr); \n .shot \n overflow: hidden; border-radius: 14px; border: 1px solid color-mix(in oklab, var(--ring) 60%, transparent);\n background: color-mix(in oklab, var(--card) 85%, transparent);\n \n .shot picture, .shot img display: block; width: 100%; height: auto; \n .cap font-size: 13px; color: var(--muted); padding: 8px 6px 0 6px; \n</style>\n\n<div class=\shrek\ role=\region\ aria-label=\Історія Шрека\>\n <div class=\grid card hero\>\n <div>\n <div class=\eyebrow\><span class=\dot\ aria-hidden=\true\></span> Фар-Фар-Авей</div>\n <h1 class=\title\>Шрек: історія про те, що важить всередині</h1>\n <p class=\subtitle\>\n Казка про огра, який любив самоту, подружився з балакучим Осликом і несподівано знайшов кохання.\n Зовнішність — лише оболонка, сила — у серці та вірності.\n </p>\n </div>\n\n <aside class=\avatar\ aria-label=\Шрек і друзі\>\n <div class=\ogre\ aria-hidden=\true\>Ш</div>\n <div class=\muted\>Огр із болота, велике серце</div>\n <div class=\badges\ style=\display:flex;gap:8px;flex-wrap:wrap;justify-content:center;\>\n <span class=\badge\>Сміливість</span>\n <span class=\badge\>Вірність</span>\n <span class=\badge\>Самоіронія</span>\n </div>\n </aside>\n </div>\n\n <section class=\card section\ aria-label=\Галерея кадрів\>\n <h2>Галерея кадрів</h2>\n <div class=\gallery\>\n (html comment removed: \n ▶️ Постав свої URL-адреси кадрів/постерів, на які маєш права або які дозволено використовувати.\n Наприклад, статики з офіційних прес-кітів чи дозволені стани з Вікі/ліцензійних сайтів.\n )\n <figure class=\shot\>\n <picture>\n <source srcset=\YOUR_SHREK_IMAGE_URL_1.webp\ type=\image/webp\ />\n <img src=\YOUR_SHREK_IMAGE_URL_1.jpg\ alt=\Шрек у болоті\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n </picture>\n <figcaption class=\cap\>Шрек у своєму болоті</figcaption>\n </figure>\n\n <figure class=\shot\>\n <picture>\n <source srcset=\YOUR_SHREK_IMAGE_URL_2.webp\ type=\image/webp\ />\n <img src=\YOUR_SHREK_IMAGE_URL_2.jpg\ alt=\Шрек і Ослик на мосту\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n </picture>\n <figcaption class=\cap\>Шрек і Ослик: міст через страх</figcaption>\n </figure>\n\n <figure class=\shot\>\n <picture>\n <source srcset=\YOUR_SHREK_IMAGE_URL_3.webp\ type=\image/webp\ />\n <img src=\YOUR_SHREK_IMAGE_URL_3.jpg\ alt=\Фіона та світанок\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n </picture>\n <figcaption class=\cap\>Фіона на світанку</figcaption>\n </figure>\n\n <figure class=\shot\>\n <picture>\n <source srcset=\YOUR_SHREK_IMAGE_URL_4.webp\ type=\image/webp\ />\n <img src=\YOUR_SHREK_IMAGE_URL_4.jpg\ alt=\Дракониха і Ослик\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n </picture>\n <figcaption class=\cap\>Дракониха та Ослик</figcaption>\n </figure>\n\n <figure class=\shot\>\n <picture>\n <source srcset=\YOUR_SHREK_IMAGE_URL_5.webp\ type=\image/webp\ />\n <img src=\YOUR_SHREK_IMAGE_URL_5.jpg\ alt=\Подорож до замку\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n </picture>\n <figcaption class=\cap\>Подорож до замку</figcaption>\n </figure>\n\n <figure class=\shot\>\n <picture>\n <source srcset=\YOUR_SHREK_IMAGE_URL_6.webp\ type=\image/webp\ />\n <img src=\YOUR_SHREK_IMAGE_URL_6.jpg\ alt=\Святкування у болоті\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n </picture>\n <figcaption class=\cap\>Святкування у болоті</figcaption>\n </figure>\n </div>\n </section>\n\n <section class=\card section\ aria-label=\Як все починалося\>\n <h2>Як все починалося</h2>\n <div class=\timeline\>\n <div class=\event\><div class=\k\>Самота в болоті</div><div class=\v\>Шрек жив спокійно на своєму болоті й не прагнув компанії людей, які боялися його за зовнішність.</div></div>\n <div class=\event\><div class=\k\>Несподівані гості</div><div class=\v\>Казкові істоти тікають на його землі від правителя Фаркуада. Щоб повернути тишу, Шрек вирушає домовлятися.</div></div>\n <div class=\event\><div class=\k\>Знайомство з Осликом</div><div class=\v\>Відданий друг приєднується до подорожі — і розтоплює шрекову недовіру.</div></div>\n </div>\n </section>\n\n <section class=\card section\ aria-label=\Порятунок Фіони\>\n <h2>Порятунок Фіони</h2>\n <p>Фаркуад обіцяє повернути болото, якщо Шрек визволить принцесу Фіону з замку, який охороняє дракон. Місія\n перетворюється на щось більше: між героями виникає тепло.</p>\n <p class=\quote\><strong>Твіст:</strong> на світанку з’ясовується, що Фіона теж стає огриницею — її «закляття» розкриває те, ким вона є насправді.</p>\n </section>\n\n <section class=\card section\ aria-label=\Розв’язка та сенс\>\n <h2>Справжня краса</h2>\n <div class=\list\>\n <div class=\li\><strong>Кохання рятує:</strong> Шрек і Фіона обирають одне одного, а не чужі очікування.</div>\n <div class=\li\><strong>Дружба працює:</strong> без Ослика й Драконихи історія не склалася б так щасливо.</div>\n <div class=\li\><strong>Урок:</strong> зовнішність оманлива; прийняття себе відкриває шлях до близьких.</div>\n </div>\n </section>\n\n <footer class=\card\ style=\text-align:center;\>\n <small class=\muted\>Нетривіальна казка за мотивами «Shrek» (DreamWorks, 2001). Галерея: додай власні стани з дозволених джерел.</small>\n </footer>\n</div>\n\n\n,hideSignIn:true,hideMenu:true
You are viewing a single comment's thread from: