You are viewing a single comment's thread from:RE: Object Type - htmlView the full contextf76wz (52)in #waivio-object-type • last month Waivio object "test html 07101446" has been created
wiv01 added name(en-US):
test html 07101446
@wiv01 added htmlContent (English):
code:
javascript\n<!doctype html>\n<html lang=\uk\>\n<head>\n \n \n <style>\n .card font-family: system-ui, sans-serif; border:1px solid #e5e7eb; border-radius:12px; padding:16px; \n .title margin:0 0 8px; font-size:18px; \n .muted color:#6b7280; \n </style>\n</head>\n<body>\n <div class=\card\>\n <h3 class=\title\>Тест скрипта і тайтла</h3>\n <p id=\status\ class=\muted\>JS не виконався</p>\n </div>\n\n \n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true@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@wiv01 added htmlContent (English):
code:
javascript\n\n<div class=\invite\ role=\region\ aria-label=\Весільне запрошення\>\n <div class=\card\>\n <div style=\display:grid; gap: 16px; justify-items:center; text-align:center;\>\n <span class=\kicker\>Запрошення на весілля</span>\n\n <h1 class=\names\>\n Ім’я Нареченої\n <span class=\and\>та</span>\n Ім’я Нареченого\n </h1>\n\n <div class=\line\><span class=\monogram\>SAVE · THE · DATE</span></div>\n\n <div class=\details\>\n <div class=\bigdate\>Субота, 24 травня 2026 · 16:00</div>\n <div>\n Урочистість відбудеться за адресою:\n <span class=\venue\>Заміський комплекс “Лавандовий Сад”, вул. Польова, 12</span>\n </div>\n <div>Фуршет та святкування одразу після церемонії</div>\n <div>Dress code: пастельні тони (крем, пудра, шавлія)</div>\n\n <div class=\cta\>\n <a class=\btn\ href=\mailto:[email protected]\ target=\_blank\ rel=\noopener nofollow ugc\>Підтвердити присутність</a>\n <a class=\btn\ href=\tel:+380XXXXXXXXX\>Телефон для зв’язку</a>\n </div>\n\n <div class=\note\>Просимо повідомити про присутність до 1 травня 2026</div>\n </div>\n </div>\n </div>\n</div>\n\n\n,hideSignIn:true,hideMenu:true@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@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@wiv01 added htmlContent (English):
code:
javascript\n<!DOCTYPE html>\n<html lang=\en\>\n<head>\n <meta charset=\UTF-8\ />\n <meta name=\viewport\ content=\width=device-width, initial-scale=1.0\ />\n <title>Alice — CEO & Campaign Leader</title>\n <style>\n body margin:0;font-family:Arial, sans-serif;background:#ffe6f2;color:#4a0033;\n header background:#ffb6c1;position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;\n header a.logo font-weight:bold;color:#4a0033;text-decoration:none;font-size:20px;\n nav a margin:0 10px;color:#4a0033;text-decoration:none;font-weight:bold;\n nav a:hover text-decoration:underline;\n section max-width:900px;margin:auto;padding:40px 20px;\n h1,h2 color:#b30059;\n .btn display:inline-block;padding:10px 20px;margin:5px;background:#ff69b4;color:white;text-decoration:none;border-radius:8px;\n .btn.alt background:white;color:#b30059;border:2px solid #ff69b4;\n .campaign background:white;padding:20px;margin:10px 0;border-radius:10px;border:1px solid #ffb6c1;\n footer text-align:center;padding:20px;background:#ffb6c1;\n iframe width:100%;height:300px;border:none;border-radius:10px;\n form input, form textarea width:100%;padding:10px;margin:5px 0;border:1px solid #ffb6c1;border-radius:6px;\n form button background:#ff69b4;color:white;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;\n </style>\n</head>\n<body>\n <header>\n <a href=\#home\ class=\logo\>Alice</a>\n <nav>\n <a href=\#home\>Home</a>\n <a href=\#about\>About</a>\n <a href=\#campaigns\>Campaigns</a>\n <a href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>Page</a>\n <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n <a href=\#contact\>Contact</a>\n </nav>\n </header>\n\n <section id=\home\>\n <h1>Alice — CEO & Campaign Leader</h1>\n <p>I’m Alice, a CEO who designs and delivers high-impact, multi-channel campaigns. I lead cross-functional teams from strategy to execution — turning brand vision into measurable growth.</p>\n <a class=\btn\ href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>View Page</a>\n <a class=\btn alt\ href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n </section>\n\n <section id=\about\>\n <h2>About</h2>\n <p>With a background in brand, growth, and product marketing, I’ve orchestrated campaigns that scale globally and resonate locally. My leadership style is decisive yet collaborative — aligning stakeholders, simplifying complexity, and shipping with quality and speed.</p>\n </section>\n\n <section id=\campaigns\>\n <h2>Featured Campaigns</h2>\n <div class=\campaign\>\n <h3>Global Awareness Drive (2023 — Present)</h3>\n <p>Led multi-market campaigns across social, search, and OOH to grow reach by 240% while keeping CAC steady.</p>\n </div>\n <div class=\campaign\>\n <h3>Product Launch Sprint (2024)</h3>\n <p>Delivered a 10-week GTM sprint from zero to launch, coordinating brand, dev, PR, and paid media workstreams.</p>\n </div>\n <div class=\campaign\>\n <h3>Community Impact Program (2022 — 2024)</h3>\n <p>Built a community-led advocacy engine featuring micro-grants and UGC that doubled retention in core regions.</p>\n </div>\n </section>\n\n <section>\n <h2>Newsfeed Preview</h2>\n <p>If the preview does not load, <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>open the newsfeed here</a>.</p>\n <iframe src=\https://wiv.socialgifts.pp.ua\></iframe>\n </section>\n\n <section id=\contact\>\n <h2>Contact</h2>\n <form onsubmit=\alert('Thanks! Your message has been noted.');return false;\>\n <input type=\text\ placeholder=\Your name\ required>\n <input type=\email\ placeholder=\Email\ required>\n <input type=\text\ placeholder=\Subject\>\n <textarea rows=\5\ placeholder=\Message\ required></textarea>\n <button type=\submit\>Send</button>\n </form>\n </section>\n\n <footer>\n © 2025 Alice — All rights reserved | <a href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>Page</a> · <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n </footer>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:
javascript\n\n<!DOCTYPE html>\n\n<html lang=\en\>\n\n<head>\n\n <meta charset=\UTF-8\ />\n\n <meta name=\viewport\ content=\width=device-width, initial-scale=1.0\ />\n\n <title>Alice — CEO & Campaign Leader11111</title>\n\n <style>\n\n body margin:0;font-family:Arial, sans-serif;background:#ffe6f2;color:#4a0033;\n\n header background:#ffb6c1;position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;\n\n header a.logo font-weight:bold;color:#4a0033;text-decoration:none;font-size:20px;\n\n nav a margin:0 10px;color:#4a0033;text-decoration:none;font-weight:bold;\n\n nav a:hover text-decoration:underline;\n\n section max-width:900px;margin:auto;padding:40px 20px;\n\n h1,h2 color:#b30059;\n\n .btn display:inline-block;padding:10px 20px;margin:5px;background:#ff69b4;color:white;text-decoration:none;border-radius:8px;\n\n .btn.alt background:white;color:#b30059;border:2px solid #ff69b4;\n\n .campaign background:white;padding:20px;margin:10px 0;border-radius:10px;border:1px solid #ffb6c1;\n\n footer text-align:center;padding:20px;background:#ffb6c1;\n\n iframe width:100%;height:300px;border:none;border-radius:10px;\n\n form input, form textarea width:100%;padding:10px;margin:5px 0;border:1px solid #ffb6c1;border-radius:6px;\n\n form button background:#ff69b4;color:white;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;\n\n </style>\n\n</head>\n\n<body>\n\n <header>\n\n <a href=\#home\ class=\logo\>Alice</a>\n\n <nav>\n\n <a href=\#home\>Home</a>\n\n <a href=\#about\>About</a>\n\n <a href=\#campaigns\>Campaigns</a>\n\n <a href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>Page</a>\n\n <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n\n <a href=\#contact\>Contact</a>\n\n </nav>\n\n </header>\n\n <section id=\home\>\n\n <h1>Alice — CEO & Campaign Leader</h1>\n\n <p>I’m Alice, a CEO who designs and delivers high-impact, multi-channel campaigns. I lead cross-functional teams from strategy to execution — turning brand vision into measurable growth.</p>\n\n <a class=\btn\ href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>View Page</a>\n\n <a class=\btn alt\ href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n\n </section>\n\n <section id=\about\>\n\n <h2>About</h2>\n\n <p>With a background in brand, growth, and product marketing, I’ve orchestrated campaigns that scale globally and resonate locally. My leadership style is decisive yet collaborative — aligning stakeholders, simplifying complexity, and shipping with quality and speed.</p>\n\n </section>\n\n <section id=\campaigns\>\n\n <h2>Featured Campaigns</h2>\n\n <div class=\campaign\>\n\n <h3>Global Awareness Drive (2023 — Present)</h3>\n\n <p>Led multi-market campaigns across social, search, and OOH to grow reach by 240% while keeping CAC steady.</p>\n\n </div>\n\n <div class=\campaign\>\n\n <h3>Product Launch Sprint (2024)</h3>\n\n <p>Delivered a 10-week GTM sprint from zero to launch, coordinating brand, dev, PR, and paid media workstreams.</p>\n\n </div>\n\n <div class=\campaign\>\n\n <h3>Community Impact Program (2022 — 2024)</h3>\n\n <p>Built a community-led advocacy engine featuring micro-grants and UGC that doubled retention in core regions.</p>\n\n </div>\n\n </section>\n\n <section>\n\n <h2>Newsfeed Preview</h2>\n\n <p>If the preview does not load, <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>open the newsfeed here</a>.</p>\n\n <iframe src=\https://wiv.socialgifts.pp.ua\></iframe>\n\n </section>\n\n <section id=\contact\>\n\n <h2>Contact</h2>\n\n <form onsubmit=\alert('Thanks! Your message has been noted.');return false;\>\n\n <input type=\text\ placeholder=\Your name\ required>\n\n <input type=\email\ placeholder=\Email\ required>\n\n <input type=\text\ placeholder=\Subject\>\n\n <textarea rows=\5\ placeholder=\Message\ required></textarea>\n\n <button type=\submit\>Send</button>\n\n </form>\n\n </section>\n\n <footer>\n\n © 2025 Alice — All rights reserved | <a href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>Page</a> · <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n\n </footer>\n\n</body>\n\n</html>\n\n\n\n,hideSignIn:true,hideMenu:false@wiv01 added htmlContent (English):
code:
javascript\n\n<!DOCTYPE html>\n\n<html lang=\en\>\n\n<head>\n\n <meta charset=\UTF-8\ />\n\n <meta name=\viewport\ content=\width=device-width, initial-scale=1.0\ />\n\n <title>Alice — CEO & Campaign Leader345345345</title>\n\n <style>\n\n body margin:0;font-family:Arial, sans-serif;background:#ffe6f2;color:#4a0033;\n\n header background:#ffb6c1;position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;\n\n header a.logo font-weight:bold;color:#4a0033;text-decoration:none;font-size:20px;\n\n nav a margin:0 10px;color:#4a0033;text-decoration:none;font-weight:bold;\n\n nav a:hover text-decoration:underline;\n\n section max-width:900px;margin:auto;padding:40px 20px;\n\n h1,h2 color:#b30059;\n\n .btn display:inline-block;padding:10px 20px;margin:5px;background:#ff69b4;color:white;text-decoration:none;border-radius:8px;\n\n .btn.alt background:white;color:#b30059;border:2px solid #ff69b4;\n\n .campaign background:white;padding:20px;margin:10px 0;border-radius:10px;border:1px solid #ffb6c1;\n\n footer text-align:center;padding:20px;background:#ffb6c1;\n\n iframe width:100%;height:300px;border:none;border-radius:10px;\n\n form input, form textarea width:100%;padding:10px;margin:5px 0;border:1px solid #ffb6c1;border-radius:6px;\n\n form button background:#ff69b4;color:white;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;\n\n </style>\n\n</head>\n\n<body>\n\n <header>\n\n <a href=\#home\ class=\logo\>Alice</a>\n\n <nav>\n\n <a href=\#home\>Home</a>\n\n <a href=\#about\>About</a>\n\n <a href=\#campaigns\>Campaigns</a>\n\n <a href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>Page</a>\n\n <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n\n <a href=\#contact\>Contact</a>\n\n </nav>\n\n </header>\n\n <section id=\home\>\n\n <h1>Alice — CEO & Campaign Leader</h1>\n\n <p>I’m Alice, a CEO who designs and delivers high-impact, multi-channel campaigns. I lead cross-functional teams from strategy to execution — turning brand vision into measurable growth.</p>\n\n <a class=\btn\ href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>View Page</a>\n\n <a class=\btn alt\ href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n\n </section>\n\n <section id=\about\>\n\n <h2>About</h2>\n\n <p>With a background in brand, growth, and product marketing, I’ve orchestrated campaigns that scale globally and resonate locally. My leadership style is decisive yet collaborative — aligning stakeholders, simplifying complexity, and shipping with quality and speed.</p>\n\n </section>\n\n <section id=\campaigns\>\n\n <h2>Featured Campaigns</h2>\n\n <div class=\campaign\>\n\n <h3>Global Awareness Drive (2023 — Present)</h3>\n\n <p>Led multi-market campaigns across social, search, and OOH to grow reach by 240% while keeping CAC steady.</p>\n\n </div>\n\n <div class=\campaign\>\n\n <h3>Product Launch Sprint (2024)</h3>\n\n <p>Delivered a 10-week GTM sprint from zero to launch, coordinating brand, dev, PR, and paid media workstreams.</p>\n\n </div>\n\n <div class=\campaign\>\n\n <h3>Community Impact Program (2022 — 2024)</h3>\n\n <p>Built a community-led advocacy engine featuring micro-grants and UGC that doubled retention in core regions.</p>\n\n </div>\n\n </section>\n\n <section>\n\n <h2>Newsfeed Preview</h2>\n\n <p>If the preview does not load, <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>open the newsfeed here</a>.</p>\n\n <iframe src=\https://wiv.socialgifts.pp.ua\></iframe>\n\n </section>\n\n <section id=\contact\>\n\n <h2>Contact</h2>\n\n <form onsubmit=\alert('Thanks! Your message has been noted.');return false;\>\n\n <input type=\text\ placeholder=\Your name\ required>\n\n <input type=\email\ placeholder=\Email\ required>\n\n <input type=\text\ placeholder=\Subject\>\n\n <textarea rows=\5\ placeholder=\Message\ required></textarea>\n\n <button type=\submit\>Send</button>\n\n </form>\n\n </section>\n\n <footer>\n\n © 2025 Alice — All rights reserved | <a href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>Page</a> · <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n\n </footer>\n\n</body>\n\n</html>\n\n\n\n,hideSignIn:false,hideMenu:true@wiv01 added htmlContent (English):
code:
javascript\n\n<!DOCTYPE html>\n\n<html lang=\en\>\n\n<head>\n\n <meta charset=\UTF-8\ />\n\n <meta name=\viewport\ content=\width=device-width, initial-scale=1.0\ />\n\n <title>Alice — CEO & Campaign Leader345345345345</title>\n\n <style>\n\n body margin:0;font-family:Arial, sans-serif;background:#ffe6f2;color:#4a0033;\n\n header background:#ffb6c1;position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;\n\n header a.logo font-weight:bold;color:#4a0033;text-decoration:none;font-size:20px;\n\n nav a margin:0 10px;color:#4a0033;text-decoration:none;font-weight:bold;\n\n nav a:hover text-decoration:underline;\n\n section max-width:900px;margin:auto;padding:40px 20px;\n\n h1,h2 color:#b30059;\n\n .btn display:inline-block;padding:10px 20px;margin:5px;background:#ff69b4;color:white;text-decoration:none;border-radius:8px;\n\n .btn.alt background:white;color:#b30059;border:2px solid #ff69b4;\n\n .campaign background:white;padding:20px;margin:10px 0;border-radius:10px;border:1px solid #ffb6c1;\n\n footer text-align:center;padding:20px;background:#ffb6c1;\n\n iframe width:100%;height:300px;border:none;border-radius:10px;\n\n form input, form textarea width:100%;padding:10px;margin:5px 0;border:1px solid #ffb6c1;border-radius:6px;\n\n form button background:#ff69b4;color:white;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;\n\n </style>\n\n</head>\n\n<body>\n\n <header>\n\n <a href=\#home\ class=\logo\>Alice</a>\n\n <nav>\n\n <a href=\#home\>Home</a>\n\n <a href=\#about\>About</a>\n\n <a href=\#campaigns\>Campaigns</a>\n\n <a href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>Page</a>\n\n <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n\n <a href=\#contact\>Contact</a>\n\n </nav>\n\n </header>\n\n <section id=\home\>\n\n <h1>Alice — CEO & Campaign Leader</h1>\n\n <p>I’m Alice, a CEO who designs and delivers high-impact, multi-channel campaigns. I lead cross-functional teams from strategy to execution — turning brand vision into measurable growth.</p>\n\n <a class=\btn\ href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>View Page</a>\n\n <a class=\btn alt\ href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n\n </section>\n\n <section id=\about\>\n\n <h2>About</h2>\n\n <p>With a background in brand, growth, and product marketing, I’ve orchestrated campaigns that scale globally and resonate locally. My leadership style is decisive yet collaborative — aligning stakeholders, simplifying complexity, and shipping with quality and speed.</p>\n\n </section>\n\n <section id=\campaigns\>\n\n <h2>Featured Campaigns</h2>\n\n <div class=\campaign\>\n\n <h3>Global Awareness Drive (2023 — Present)</h3>\n\n <p>Led multi-market campaigns across social, search, and OOH to grow reach by 240% while keeping CAC steady.</p>\n\n </div>\n\n <div class=\campaign\>\n\n <h3>Product Launch Sprint (2024)</h3>\n\n <p>Delivered a 10-week GTM sprint from zero to launch, coordinating brand, dev, PR, and paid media workstreams.</p>\n\n </div>\n\n <div class=\campaign\>\n\n <h3>Community Impact Program (2022 — 2024)</h3>\n\n <p>Built a community-led advocacy engine featuring micro-grants and UGC that doubled retention in core regions.</p>\n\n </div>\n\n </section>\n\n <section>\n\n <h2>Newsfeed Preview</h2>\n\n <p>If the preview does not load, <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>open the newsfeed here</a>.</p>\n\n <iframe src=\https://wiv.socialgifts.pp.ua\></iframe>\n\n </section>\n\n <section id=\contact\>\n\n <h2>Contact</h2>\n\n <form onsubmit=\alert('Thanks! Your message has been noted.');return false;\>\n\n <input type=\text\ placeholder=\Your name\ required>\n\n <input type=\email\ placeholder=\Email\ required>\n\n <input type=\text\ placeholder=\Subject\>\n\n <textarea rows=\5\ placeholder=\Message\ required></textarea>\n\n <button type=\submit\>Send</button>\n\n </form>\n\n </section>\n\n <footer>\n\n © 2025 Alice — All rights reserved | <a href=\https://www.waivio.com/object/ajo-test-page-06121045/page\ target=\_blank\>Page</a> · <a href=\https://wiv.socialgifts.pp.ua\ target=\_blank\>Newsfeed</a>\n\n </footer>\n\n</body>\n\n</html>\n\n\n\n,hideSignIn:false,hideMenu:false@wiv01 added htmlContent (English):
code:
javascript\n<!doctype html>\n<html lang=\uk\>\n<head>\n \n \n <style>\n .card font-family: system-ui, sans-serif; border:1px solid #e5e7eb; border-radius:12px; padding:16px; \n .title margin:0 0 8px; font-size:18px; \n .muted color:#6b7280; \n </style>\n</head>\n<body>\n <div class=\card\>\n <h3 class=\title\>Тест скрипта і тайтла</h3>\n <p id=\status\ class=\muted\>JS не виконався</p>\n </div>\n\n \n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:
javascript\n\n<!doctype html>\n\n<html lang=\uk\>\n\n<head>\n\n <meta charset=\utf-8\ />\n\n <title>INTERNAL TITLE — не має бути видно в UI</title>\n\n <style>\n\n .card font-family: system-ui, sans-serif; border:1px solid #e5e7eb; border-radius:12px; padding:16px; \n\n .title margin:0 0 8px; font-size:18px; \n\n .muted color:#6b7280; \n\n </style>\n\n</head>\n\n<body>\n\n <div class=\card\>\n\n <h3 class=\title\>Тест скрипта і тайтла</h3>\n\n <p id=\status\ class=\muted\>JS не виконався</p>\n\n </div>\n\n</body>\n\n</html>\n\n\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:
javascript\n\n<!doctype html>\n\n<html lang=\uk\>\n\n<head>\n\n <meta charset=\utf-8\ />\n\n <title>INTERNAL TITLE — не має бути видно в UI</title>\n\n <style>\n\n .card font-family: system-ui, sans-serif; border:1px solid #e5e7eb; border-radius:12px; padding:16px; \n\n .title margin:0 0 8px; font-size:18px; \n\n .muted color:#6b7280; \n\n </style>\n\n</head>\n\n<body>\n\n <div class=\card\>\n\n <h3 class=\title\>Тест скрипта і тайтла</h3>\n\n <p id=\status\ class=\muted\>JS не виконався</p>\n\n </div>\n\n</body>\n\n</html>\n\n\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:
javascript\n<!doctype html>\n<html lang=\uk\>\n<head>\n <meta charset=\utf-8\ />\n <title>INTERNAL TITLE — не має бути видно в UI</title>\n <style>\n .card font-family: system-ui, sans-serif; border:1px solid #e5e7eb; border-radius:12px; padding:16px; \n .title margin:0 0 8px; font-size:18px; \n .muted color:#6b7280; \n </style>\n</head>\n<body>\n <div class=\card\>\n <h3 class=\title\>Тест скрипта і тайтла</h3>\n <p id=\status\ class=\muted\>JS не виконався</p>\n </div>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true@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@wiv01 added htmlContent (English):
code:
javascript\n\n<style>\n\n /* ── Shrek Story — with stills gallery (no JS) ── */\n\n :root color-scheme: light dark; \n\n .shrek \n\n --bg: #0e2a0f; --bg-2: #143d15; --card: #0f2f11; --ring: #2f6f34;\n\n --fg: #e8ffe9; --muted: #b9d9bd; --accent: #74c476; --accent-2: #b2df8a;\n\n --radius: 18px; --gap: 20px; --maxw: 1080px;\n\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, \Helvetica Neue\, Arial, sans-serif;\n\n color: var(--fg);\n\n background:\n\n radial-gradient(900px 600px at -10% -10%, color-mix(in oklab, var(--accent) 25%, transparent) 0, transparent 60%),\n\n radial-gradient(900px 600px at 110% 110%, color-mix(in oklab, var(--accent-2) 20%, transparent) 0, transparent 60%),\n\n linear-gradient(180deg, var(--bg), var(--bg-2));\n\n padding: 28px; border-radius: var(--radius); max-width: var(--maxw); margin: 0 auto;\n\n box-shadow: 0 10px 40px rgba(0,0,0,.35);\n\n \n\n .grid display: grid; gap: var(--gap); \n\n .card \n\n background: linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), transparent);\n\n border: 1px solid color-mix(in oklab, var(--ring) 60%, transparent);\n\n border-radius: var(--radius);\n\n padding: clamp(16px, 3.2vw, 28px);\n\n \n\n .hero display: grid; gap: clamp(16px, 4vw, 36px); grid-template-columns: 1.2fr .8fr; align-items: center; \n\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\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\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\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\n border: 1px solid color-mix(in oklab, var(--ring) 60%, transparent);\n\n border-radius: calc(var(--radius) + 6px); padding: clamp(16px, 3vw, 24px);\n\n \n\n .ogre width: clamp(96px, 22vw, 128px); height: clamp(96px, 22vw, 128px); border-radius: 28px;\n\n background: conic-gradient(from 220deg, #88d06b, #6abf59, #c9f27a, #88d06b); color: #173117; font-weight: 900; font-size: clamp(36px, 6.5vw, 46px);\n\n display: grid; place-items: center; box-shadow: inset 0 0 24px rgba(255,255,255,.2);\n\n \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\n .muted color: var(--muted); \n\n .timeline display: grid; gap: 12px; \n\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\n .event .k font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); \n\n .event .v font-weight: 600; \n\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\n .list display: grid; gap: 10px; \n\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\n .gallery display: grid; gap: 12px; \n\n @media (min-width: 720px) .gallery grid-template-columns: repeat(3, 1fr); \n\n .shot \n\n overflow: hidden; border-radius: 14px; border: 1px solid color-mix(in oklab, var(--ring) 60%, transparent);\n\n background: color-mix(in oklab, var(--card) 85%, transparent);\n\n \n\n .shot picture, .shot img display: block; width: 100%; height: auto; \n\n .cap font-size: 13px; color: var(--muted); padding: 8px 6px 0 6px; \n\n</style>\n\n<div class=\shrek\ role=\region\ aria-label=\Історія Шрека\>\n\n <div class=\grid card hero\>\n\n <div>\n\n <div class=\eyebrow\><span class=\dot\ aria-hidden=\true\></span> Фар-Фар-Авей</div>\n\n <h1 class=\title\>Шрек: історія про те, що важить всередині</h1>\n\n <p class=\subtitle\>\n\n Казка про огра, який любив самоту, подружився з балакучим Осликом і несподівано знайшов кохання.\n\n Зовнішність — лише оболонка, сила — у серці та вірності.\n\n </p>\n\n </div>\n\n <aside class=\avatar\ aria-label=\Шрек і друзі\>\n\n <div class=\ogre\ aria-hidden=\true\>Ш</div>\n\n <div class=\muted\>Огр із болота, велике серце</div>\n\n <div class=\badges\ style=\display:flex;gap:8px;flex-wrap:wrap;justify-content:center;\>\n\n <span class=\badge\>Сміливість</span>\n\n <span class=\badge\>Вірність</span>\n\n <span class=\badge\>Самоіронія</span>\n\n </div>\n\n </aside>\n\n </div>\n\n <section class=\card section\ aria-label=\Галерея кадрів\>\n\n <h2>Галерея кадрів</h2>\n\n <div class=\gallery\>\n\n (html comment removed: \n\n ▶️ Постав свої URL-адреси кадрів/постерів, на які маєш права або які дозволено використовувати.\n\n Наприклад, статики з офіційних прес-кітів чи дозволені стани з Вікі/ліцензійних сайтів.\n\n )\n\n <figure class=\shot\>\n\n <picture>\n\n <source srcset=\YOUR_SHREK_IMAGE_URL_1.webp\ type=\image/webp\ />\n\n <img src=\YOUR_SHREK_IMAGE_URL_1.jpg\ alt=\Шрек у болоті\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n\n </picture>\n\n <figcaption class=\cap\>Шрек у своєму болоті</figcaption>\n\n </figure>\n\n <figure class=\shot\>\n\n <picture>\n\n <source srcset=\YOUR_SHREK_IMAGE_URL_2.webp\ type=\image/webp\ />\n\n <img src=\YOUR_SHREK_IMAGE_URL_2.jpg\ alt=\Шрек і Ослик на мосту\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n\n </picture>\n\n <figcaption class=\cap\>Шрек і Ослик: міст через страх</figcaption>\n\n </figure>\n\n <figure class=\shot\>\n\n <picture>\n\n <source srcset=\YOUR_SHREK_IMAGE_URL_3.webp\ type=\image/webp\ />\n\n <img src=\YOUR_SHREK_IMAGE_URL_3.jpg\ alt=\Фіона та світанок\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n\n </picture>\n\n <figcaption class=\cap\>Фіона на світанку</figcaption>\n\n </figure>\n\n <figure class=\shot\>\n\n <picture>\n\n <source srcset=\YOUR_SHREK_IMAGE_URL_4.webp\ type=\image/webp\ />\n\n <img src=\YOUR_SHREK_IMAGE_URL_4.jpg\ alt=\Дракониха і Ослик\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n\n </picture>\n\n <figcaption class=\cap\>Дракониха та Ослик</figcaption>\n\n </figure>\n\n <figure class=\shot\>\n\n <picture>\n\n <source srcset=\YOUR_SHREK_IMAGE_URL_5.webp\ type=\image/webp\ />\n\n <img src=\YOUR_SHREK_IMAGE_URL_5.jpg\ alt=\Подорож до замку\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n\n </picture>\n\n <figcaption class=\cap\>Подорож до замку</figcaption>\n\n </figure>\n\n <figure class=\shot\>\n\n <picture>\n\n <source srcset=\YOUR_SHREK_IMAGE_URL_6.webp\ type=\image/webp\ />\n\n <img src=\YOUR_SHREK_IMAGE_URL_6.jpg\ alt=\Святкування у болоті\ loading=\lazy\ decoding=\async\ referrerpolicy=\no-referrer\ />\n\n </picture>\n\n <figcaption class=\cap\>Святкування у болоті</figcaption>\n\n </figure>\n\n </div>\n\n </section>\n\n <section class=\card section\ aria-label=\Як все починалося\>\n\n <h2>Як все починалося</h2>\n\n <div class=\timeline\>\n\n <div class=\event\><div class=\k\>Самота в болоті</div><div class=\v\>Шрек жив спокійно на своєму болоті й не прагнув компанії людей, які боялися його за зовнішність.</div></div>\n\n <div class=\event\><div class=\k\>Несподівані гості</div><div class=\v\>Казкові істоти тікають на його землі від правителя Фаркуада. Щоб повернути тишу, Шрек вирушає домовлятися.</div></div>\n\n <div class=\event\><div class=\k\>Знайомство з Осликом</div><div class=\v\>Відданий друг приєднується до подорожі — і розтоплює шрекову недовіру.</div></div>\n\n </div>\n\n </section>\n\n <section class=\card section\ aria-label=\Порятунок Фіони\>\n\n <h2>Порятунок Фіони</h2>\n\n <p>Фаркуад обіцяє повернути болото, якщо Шрек визволить принцесу Фіону з замку, який охороняє дракон. Місія\n\n перетворюється на щось більше: між героями виникає тепло.</p>\n\n <p class=\quote\><strong>Твіст:</strong> на світанку з’ясовується, що Фіона теж стає огриницею — її «закляття» розкриває те, ким вона є насправді.</p>\n\n </section>\n\n <section class=\card section\ aria-label=\Розв’язка та сенс\>\n\n <h2>Справжня краса</h2>\n\n <div class=\list\>\n\n <div class=\li\><strong>Кохання рятує:</strong> Шрек і Фіона обирають одне одного, а не чужі очікування.</div>\n\n <div class=\li\><strong>Дружба працює:</strong> без Ослика й Драконихи історія не склалася б так щасливо.</div>\n\n <div class=\li\><strong>Урок:</strong> зовнішність оманлива; прийняття себе відкриває шлях до близьких.</div>\n\n </div>\n\n </section>\n\n <footer class=\card\ style=\text-align:center;\>\n\n <small class=\muted\>Нетривіальна казка за мотивами «Shrek» (DreamWorks, 2001). Галерея: додай власні стани з дозволених джерел.</small>\n\n </footer>\n\n</div>\n\n\n,hideSignIn:true,hideMenu:true@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@wiv01 added htmlContent (English):
code:
javascript\n<style>\n /* ── Wedding Invitation — elegant, pastel, no JS ── */\n :root color-scheme: light dark; \n .invite \n --paper: #fffaf6; /* warm paper */\n --ink: #2a2438; /* deep ink */\n --muted: #6d667a; /* soft text */\n --accent: #e8c6cf; /* blush */\n --accent-2: #cfe7e2; /* mint mist */\n --gold: #d9c7a0; /* soft gold */\n --ring: #eadfd7;\n --maxw: 760px;\n --radius: 24px;\n --gap: 18px;\n\n font-family: ui-serif, \Georgia\, \Times New Roman\, Times, serif;\n color: var(--ink);\n max-width: var(--maxw);\n margin: 0 auto;\n padding: 28px;\n background:\n radial-gradient(800px 520px at 0% 0%, color-mix(in oklab, var(--accent) 24%, transparent) 0%, transparent 60%),\n radial-gradient(900px 560px at 100% 100%, color-mix(in oklab, var(--accent-2) 22%, transparent) 0%, transparent 60%),\n var(--paper);\n border-radius: var(--radius);\n box-shadow: 0 12px 40px rgba(50, 36, 68, .12);\n border: 1px solid var(--ring);\n \n\n .card \n background:\n linear-gradient(180deg, color-mix(in oklab, var(--paper) 80%, #fff) 0%, #fff 100%);\n border: 1px solid var(--ring);\n border-radius: calc(var(--radius) - 6px);\n padding: clamp(20px, 4vw, 40px);\n position: relative;\n overflow: clip;\n \n\n .card::before,\n .card::after \n content: \\;\n position: absolute;\n inset: -2px -2px auto auto;\n width: 180px; height: 180px;\n background:\n radial-gradient(120px 90px at 70% 20%, color-mix(in oklab, var(--accent) 40%, transparent) 0%, transparent 70%),\n radial-gradient(120px 90px at 20% 70%, color-mix(in oklab, var(--accent-2) 36%, transparent) 0%, transparent 70%);\n opacity: .5;\n filter: blur(0.2px);\n border-bottom-left-radius: 100%;\n pointer-events: none;\n \n .card::after inset: auto auto -2px -2px; transform: rotate(180deg); \n\n .kicker \n display: inline-block;\n font-family: ui-sans-serif, system-ui, \Segoe UI\, Roboto, Inter, Arial, sans-serif;\n font-size: 13px;\n letter-spacing: .18em;\n text-transform: uppercase;\n color: var(--muted);\n border: 1px dashed color-mix(in oklab, var(--muted) 40%, transparent);\n padding: 8px 10px;\n border-radius: 999px;\n background: color-mix(in oklab, var(--paper) 40%, transparent);\n \n\n .names \n margin: 14px 0 10px;\n font-size: clamp(34px, 6vw, 56px);\n line-height: 1.05;\n letter-spacing: .02em;\n font-weight: 700;\n text-align: center;\n font-variant-ligatures: discretionary-ligatures;\n background: linear-gradient(90deg, var(--ink), color-mix(in oklab, var(--ink) 88%, var(--gold)));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n \n\n .and \n display: inline-block;\n font-family: ui-sans-serif, system-ui, \Segoe UI\, Inter, Arial, sans-serif;\n font-weight: 600;\n letter-spacing: .18em;\n text-transform: uppercase;\n font-size: clamp(10px, 1.4vw, 12px);\n color: var(--muted);\n margin: 0 12px;\n vertical-align: middle;\n \n\n .line \n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n gap: 10px;\n margin: 8px 0 18px;\n \n .line::before, .line::after \n content: \\;\n height: 1px;\n background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gold) 60%, #c9b98f), transparent);\n \n .monogram \n font-family: ui-sans-serif, system-ui, \Segoe UI\, Inter, Arial, sans-serif;\n font-weight: 700;\n letter-spacing: .24em;\n font-size: 12px;\n color: color-mix(in oklab, var(--ink) 70%, var(--gold));\n border: 1px solid color-mix(in oklab, var(--gold) 70%, transparent);\n border-radius: 999px;\n padding: 6px 10px;\n background: color-mix(in oklab, var(--gold) 14%, transparent);\n \n\n .details \n display: grid;\n gap: 10px;\n justify-items: center;\n text-align: center;\n color: var(--muted);\n font-size: 16px;\n line-height: 1.6;\n \n\n .bigdate \n font-family: ui-sans-serif, system-ui, \Segoe UI\, Inter, Arial, sans-serif;\n font-weight: 700;\n font-size: clamp(18px, 2.6vw, 22px);\n color: var(--ink);\n letter-spacing: .06em;\n \n\n .venue font-weight: 600; color: var(--ink); \n\n .cta margin-top: 16px; display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; \n .btn \n --_bg: color-mix(in oklab, var(--gold) 35%, #fff);\n --_border: color-mix(in oklab, var(--gold) 65%, transparent);\n font-family: ui-sans-serif, system-ui, Inter, Arial, sans-serif;\n font-weight: 600;\n font-size: 14px;\n text-decoration: none;\n color: var(--ink);\n background: var(--_bg);\n border: 1px solid var(--_border);\n border-radius: 999px;\n padding: 10px 14px;\n transition: transform .12s ease, box-shadow .12s ease;\n box-shadow: 0 6px 18px rgba(217, 199, 160, .18);\n \n .btn:hover transform: translateY(-1px); \n\n .note margin-top: 10px; font-size: 13px; color: var(--muted); \n\n @media print \n .invite \n box-shadow: none; border: none;\n -webkit-print-color-adjust: exact; print-color-adjust: exact;\n \n \n</style>\n\n<div class=\invite\ role=\region\ aria-label=\Весільне запрошення\>\n <div class=\card\>\n <div style=\display:grid; gap: 16px; justify-items:center; text-align:center;\>\n <span class=\kicker\>Запрошення на весілля</span>\n\n <h1 class=\names\>\n Ім’я Нареченої\n <span class=\and\>та</span>\n Ім’я Нареченого\n </h1>\n\n <div class=\line\><span class=\monogram\>SAVE · THE · DATE</span></div>\n\n <div class=\details\>\n <div class=\bigdate\>Субота, 24 травня 2026 · 16:00</div>\n <div>\n Урочистість відбудеться за адресою:\n <span class=\venue\>Заміський комплекс “Лавандовий Сад”, вул. Польова, 12</span>\n </div>\n <div>Фуршет та святкування одразу після церемонії</div>\n <div>Dress code: пастельні тони (крем, пудра, шавлія)</div>\n\n <div class=\cta\>\n <a class=\btn\ href=\mailto:[email protected]\ target=\_blank\ rel=\noopener nofollow ugc\>Підтвердити присутність</a>\n <a class=\btn\ href=\tel:+380XXXXXXXXX\>Телефон для зв’язку</a>\n </div>\n\n <div class=\note\>Просимо повідомити про присутність до 1 травня 2026</div>\n </div>\n </div>\n </div>\n</div>\n\n\n,hideSignIn:true,hideMenu:true