@wiv01 added htmlContent (English):
code:javascript\n<style>\n /* ── Shrek Story — swampy, cozy, no JS ── */\n :root color-scheme: light dark; \n .shrek \n --bg: #0e2a0f; /* deep swamp */\n --bg-2: #143d15;\n --card: #0f2f11;\n --ring: #2f6f34;\n --fg: #e8ffe9;\n --muted: #b9d9bd;\n --accent: #74c476; /* soft moss */\n --accent-2: #b2df8a; /* pale lime */\n --radius: 18px;\n --gap: 20px;\n --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;\n border-radius: var(--radius);\n max-width: var(--maxw);\n margin: 0 auto;\n box-shadow: 0 10px 40px rgba(0,0,0,.35);\n \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\n /* Hero */\n .hero \n display: grid; gap: clamp(16px, 4vw, 36px);\n grid-template-columns: 1.2fr .8fr;\n align-items: center;\n \n @media (max-width: 880px) .hero grid-template-columns: 1fr; \n\n .eyebrow \n display: inline-flex; align-items: center; gap: 10px;\n font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);\n \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\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 \n display: grid; place-items: center; text-align: center; gap: 12px;\n background:\n radial-gradient(240px 180px at 30% 10%, color-mix(in oklab, var(--accent-2) 35%, transparent) 0, transparent 70%),\n 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);\n padding: clamp(16px, 3vw, 24px);\n \n .ogre \n width: clamp(96px, 22vw, 128px); height: clamp(96px, 22vw, 128px);\n border-radius: 28px;\n background: conic-gradient(from 220deg, #88d06b, #6abf59, #c9f27a, #88d06b);\n color: #173117; font-weight: 900; font-size: clamp(36px, 6.5vw, 46px);\n display: grid; place-items: center;\n 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 /* Sections */\n .section h2 margin: 0 0 10px; font-size: clamp(18px, 2.6vw, 26px); letter-spacing: -.01em; \n .muted color: var(--muted); \n\n .timeline display: grid; gap: 12px; \n .event \n display: grid; gap: 6px;\n padding: 12px;\n border: 1px dashed color-mix(in oklab, var(--ring) 70%, transparent);\n border-radius: 14px;\n background: color-mix(in oklab, var(--card) 75%, transparent);\n \n .event .k font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); \n .event .v font-weight: 600; \n\n .quote \n border-left: 4px solid var(--accent);\n padding: 10px 14px;\n background: color-mix(in oklab, var(--accent) 18%, transparent);\n border-radius: 10px;\n color: var(--fg);\n \n\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</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=\timeline\>\n <div class=\event\>\n <div class=\k\>Самота в болоті</div>\n <div class=\v\>Шрек жив спокійно на своєму болоті й не прагнув слави чи компанії людей, які боялися його за зовнішність.</div>\n </div>\n <div class=\event\>\n <div class=\k\>Несподівані гості</div>\n <div class=\v\>Казкові істоти тікають на його землі від правителя Фаркуада. Щоб повернути тишу, Шрек вирушає домовлятися.</div>\n </div>\n <div class=\event\>\n <div class=\k\>Знайомство з Осликом</div>\n <div class=\v\>Балакучий, але відданий друг приєднується до подорожі — і розтоплює шрекову недовіру до світу.</div>\n </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 <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 <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: