Object Type - htmlf76wz (52)in #waivio-object-type • 21 days ago Object Type - html created #waivio-object #waivio
Waivio object "first html" has been created
wiv01 added name(en-US):
first html
Waivio object "first html01102025" has been created
wiv01 added name(en-US):
first html01102025
@wiv01 added htmlContent (English):
code:
javascript\n<style>\n /* ==== Business Card (Лендінг-візитка) — self-contained, no JS ==== */\n :root \n --max-w: 1080px;\n --gap: 20px;\n --radius: 16px;\n --bg: #0b0c10;\n --fg: #eaf0f4;\n --muted: #a8b3bd;\n --card: #151a22;\n --accent: #6C5CE7;\n --accent-2: #20C997;\n color-scheme: light dark;\n \n @media (prefers-color-scheme: light) \n :root \n --bg: #f7f9fb;\n --fg: #0b0c10;\n --muted: #5e6a77;\n --card: #ffffff;\n --accent: #6C5CE7;\n --accent-2: #20C997;\n \n \n\n .gpt-block \n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, \Helvetica Neue\, Arial, \Noto Sans\, \Apple Color Emoji\, \Segoe UI Emoji\, \Segoe UI Symbol\, \Noto Color Emoji\, sans-serif;\n color: var(--fg);\n background: radial-gradient(1200px 800px at 100% -20%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%),\n radial-gradient(900px 600px at -10% 110%, color-mix(in oklab, var(--accent-2) 22%, transparent) 0%, transparent 60%),\n var(--bg);\n padding: 28px;\n border-radius: var(--radius);\n max-width: var(--max-w);\n margin: 0 auto;\n box-shadow: 0 10px 40px rgba(0,0,0,.24);\n \n\n .gpt-block .container display: grid; gap: var(--gap); \n\n /* Header / Hero */\n .hero \n display: grid;\n grid-template-columns: 1.3fr .9fr;\n gap: clamp(20px, 4vw, 48px);\n align-items: center;\n background: linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent) 0%, transparent 100%);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: var(--radius);\n padding: clamp(20px, 4vw, 40px);\n position: relative;\n overflow: hidden;\n \n @media (max-width: 880px) \n .hero grid-template-columns: 1fr; \n \n\n .eyebrow \n display: inline-flex; align-items: center; gap: 10px;\n font-size: 14px; color: var(--muted);\n letter-spacing: .04em; text-transform: uppercase;\n \n .eyebrow .dot width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); \n\n .title \n font-size: clamp(28px, 5vw, 48px);\n line-height: 1.08;\n margin: 8px 0 12px;\n font-weight: 800;\n letter-spacing: -0.02em;\n \n .subtitle \n font-size: clamp(16px, 2.2vw, 18px);\n color: var(--muted);\n max-width: 60ch;\n \n\n .hero-actions \n display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px;\n \n .btn \n --_bg: var(--accent);\n --_fg: #fff;\n display: inline-flex; align-items: center; gap: 10px;\n padding: 12px 16px;\n border-radius: 12px;\n text-decoration: none;\n font-weight: 600;\n border: 1px solid color-mix(in oklab, var(--_bg) 18%, transparent);\n background: var(--_bg);\n color: var(--_fg);\n transition: transform .12s ease, box-shadow .12s ease, background .2s ease;\n box-shadow: 0 6px 22px color-mix(in oklab, var(--_bg) 30%, transparent);\n \n .btn:hover transform: translateY(-1px); \n .btn.secondary \n --_bg: color-mix(in oklab, var(--card) 90%, var(--bg));\n --_fg: var(--fg);\n border-color: color-mix(in oklab, var(--fg) 12%, transparent);\n box-shadow: none;\n \n\n /* Avatar Card */\n .card \n background: var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: var(--radius);\n padding: clamp(16px, 3vw, 22px);\n display: grid; gap: 14px;\n \n .avatar \n width: clamp(96px, 22vw, 128px); height: clamp(96px, 22vw, 128px);\n border-radius: 24px;\n background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent));\n display: grid; place-items: center;\n color: white; font-weight: 800; font-size: clamp(32px, 7vw, 42px);\n box-shadow: inset 0 0 24px rgba(255,255,255,.12);\n \n .meta color: var(--muted); font-size: 14px; \n .badges display: flex; flex-wrap: wrap; gap: 8px; \n .badge \n font-size: 12.5px; color: var(--fg);\n background: color-mix(in oklab, var(--fg) 10%, transparent);\n border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);\n padding: 6px 10px; border-radius: 999px;\n \n\n /* Sections */\n .section \n background: var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: var(--radius);\n padding: clamp(18px, 3.6vw, 28px);\n \n .section h2 \n font-size: clamp(20px, 3vw, 28px);\n margin: 0 0 12px;\n letter-spacing: -0.01em;\n \n .grid display: grid; gap: 14px; \n @media (min-width: 860px) \n .grid.cols-2 grid-template-columns: 1fr 1fr; \n .grid.cols-3 grid-template-columns: repeat(3, 1fr); \n \n\n .list \n display: grid; gap: 10px;\n \n .list-item \n display: grid; gap: 6px;\n padding: 12px;\n border: 1px dashed color-mix(in oklab, var(--fg) 14%, transparent);\n border-radius: 12px;\n background: color-mix(in oklab, var(--card) 80%, var(--bg));\n \n .list-item .k color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; \n .list-item .v font-weight: 600; \n\n /* Skills chips */\n .chips display: flex; flex-wrap: wrap; gap: 8px; \n .chip \n font-size: 13px; padding: 8px 10px;\n border-radius: 10px;\n background: color-mix(in oklab, var(--accent) 18%, transparent);\n border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);\n \n\n /* Project cards */\n .project \n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: 14px;\n padding: 14px;\n background: linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, transparent), transparent);\n display: grid; gap: 10px;\n \n .project h3 margin: 0; font-size: 18px; \n .project p margin: 0; color: var(--muted); \n .project .stack display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; \n .stack .tag \n font-size: 12px; padding: 6px 8px; border-radius: 8px;\n background: color-mix(in oklab, var(--fg) 10%, transparent);\n border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);\n \n\n /* Footer */\n .footer \n display: grid; gap: 10px; justify-items: center;\n color: var(--muted); font-size: 14px; padding-top: 8px;\n \n .links display: flex; gap: 12px; flex-wrap: wrap; \n .link \n color: var(--fg); text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--fg) 30%, transparent);\n \n\n /* Responsive helpers */\n .sr position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); \n</style>\n\n<div class=\gpt-block\ role=\region\ aria-label=\Лендінг-візитка\>\n <div class=\container\>\n (html comment removed: HERO )\n <section class=\hero\>\n <div>\n <div class=\eyebrow\><span class=\dot\></span> Київ, Україна</div>\n <h1 class=\title\>Люся (Людмила Колосова)</h1>\n <p class=\subtitle\>\n Front-end інженерка (React) та будівниця продуктів. Спеціалізуюся на\n редакторах контенту (<strong>Slate.js</strong>), пайплайнах <strong>remark/rehype</strong>,\n кастомних ембедах, SEO/OG-метаданих і красивому, швидкому UI.\n Люблю структуру, чисті інтерфейси, спорт і креатив.\n </p>\n <div class=\hero-actions\>\n <a class=\btn\ href=\#\ rel=\noopener nofollow ugc\ target=\_blank\ aria-label=\Написати в Telegram\>\n (html comment removed: Telegram icon )\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M9.94 15.54L9.8 19.1c.36 0 .52-.16.7-.36l1.68-1.6 3.48 2.56c.64.36 1.1.18 1.28-.6l2.32-10.9c.2-.9-.32-1.26-.94-1.04L3.98 10.3c-.88.34-.86.82-.15 1.04l3.62 1.14 8.4-5.3c.4-.24.76-.1.46.14\/></svg>\n Telegram\n </a>\n <a class=\btn secondary\ href=\mailto:[email protected]\ aria-label=\Написати на email\>\n (html comment removed: Mail icon )\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4l-8 5L4 8V6l8 5l8-5z\/></svg>\n Email\n </a>\n <a class=\btn secondary\ href=\#\ download aria-label=\Завантажити CV\>CV.pdf</a>\n </div>\n </div>\n\n <aside class=\card\ aria-label=\Профіль та швидкі факти\>\n <div class=\avatar\ aria-hidden=\true\>Л</div>\n <div class=\meta\>Працюю з React-екосистемою, створюю редактори, інструменти для контенту та інтеграції з соцплатформами.</div>\n <div class=\badges\>\n <span class=\badge\>React</span>\n <span class=\badge\>Slate.js</span>\n <span class=\badge\>remark / rehype</span>\n <span class=\badge\>Ant Design</span>\n <span class=\badge\>Redux</span>\n <span class=\badge\>OpenGraph / SEO</span>\n </div>\n </aside>\n </section>\n\n (html comment removed: ABOUT / VALUES )\n <section class=\section\>\n <h2>Про мене</h2>\n <div class=\grid cols-2\>\n <div class=\list\>\n <div class=\list-item\>\n <div class=\k\>Фокус</div>\n <div class=\v\>Редактори контенту, кастомні тулбари, ембеди (YouTube, TikTok, Hive/3Speak/DBuzz/DTube), таблиці, списки, медіа-галереї.</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Фронтенд</div>\n <div class=\v\>React, сучасні хуки, керування станом, чисті компоненти, перформанс і доступність.</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Контент-пайплайни</div>\n <div class=\v\>remark/rehype, sanitize-html, канонікали, OG-теги, превʼю, парсери, рендерери.</div>\n </div>\n </div>\n <div class=\list\>\n <div class=\list-item\>\n <div class=\k\>Проекти</div>\n <div class=\v\>Waivio: фронтенд із глибокою інтеграцією редактора, ембедів і карт (Pigeon-maps).</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Стиль</div>\n <div class=\v\>Чітка структура, мінімалізм, акуратна типографіка. Люблю доводити UX до ідеального стану.</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Особисте</div>\n <div class=\v\>Фітнес, фото, сімʼя та невеличкі крипто-інвестиції — тримаю баланс між справами й життям.</div>\n </div>\n </div>\n </div>\n </section>\n\n (html comment removed: SKILLS )\n <section class=\section\>\n <h2>Стек та навички</h2>\n <div class=\chips\>\n <span class=\chip\>React 18+</span>\n <span class=\chip\>Slate.js (custom nodes/voids)</span>\n <span class=\chip\>remark / rehype</span>\n <span class=\chip\>sanitize-html</span>\n <span class=\chip\>Ant Design</span>\n <span class=\chip\>Redux Toolkit</span>\n <span class=\chip\>OpenGraph / SEO</span>\n <span class=\chip\>Pigeon-maps</span>\n <span class=\chip\>iFrame / Shadow DOM sandbox</span>\n <span class=\chip\>UX & контент-системи</span>\n </div>\n </section>\n\n (html comment removed: PROJECTS )\n <section class=\section\>\n <h2>Обрані роботи</h2>\n <div class=\grid cols-2\>\n <article class=\project\>\n <h3>Waivio — контент-платформа</h3>\n <p>Фронтенд із просунутим редактором: таблиці, списки, зображення, відео, ембеди (YouTube/TikTok/3Speak/DBuzz), карти та безпечний HTML-рендер.</p>\n <div class=\stack\>\n <span class=\tag\>React</span><span class=\tag\>Slate.js</span><span class=\tag\>remark/rehype</span><span class=\tag\>sanitize-html</span><span class=\tag\>AntD</span>\n </div>\n </article>\n <article class=\project\>\n <h3>Редактор з кастомними тулбарами</h3>\n <p>Власні інлайн/блок тулбари, обробка «плюс-кнопки», list/table інсерти, гарячі клавіші, пастинг HTML у Slate без поломок.</p>\n <div class=\stack\>\n <span class=\tag\>Slate plugins</span><span class=\tag\>UX</span><span class=\tag\>Content parsing</span>\n </div>\n </article>\n </div>\n </section>\n\n (html comment removed: CONTACT )\n <section class=\section\>\n <h2>Звʼязатися</h2>\n <div class=\grid cols-3\>\n <div class=\list-item\>\n <div class=\k\>Email</div>\n <div class=\v\><a class=\link\ href=\mailto:[email protected]\>[email protected]</a></div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Telegram</div>\n <div class=\v\><a class=\link\ href=\#\ rel=\noopener nofollow ugc\ target=\_blank\>@ваш_нік</a></div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Соцмережі</div>\n <div class=\v\>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Instagram</a> ·\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>LinkedIn</a>\n </div>\n </div>\n </div>\n </section>\n\n (html comment removed: FOOTER )\n <footer class=\footer\ role=\contentinfo\>\n <div class=\links\>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Портфоліо</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Резюме (PDF)</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Блог</a>\n </div>\n <div>© <span data-year></span> Люся — Київ, Україна</div>\n </footer>\n </div>\n</div>\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:
javascript\n<style>\n /* ==== Business Card (Лендінг-візитка) — self-contained, no JS ==== */\n :root \n --max-w: 1080px;\n --gap: 20px;\n --radius: 16px;\n --bg: #0b0c10;\n --fg: #eaf0f4;\n --muted: #a8b3bd;\n --card: #151a22;\n --accent: #6C5CE7;\n --accent-2: #20C997;\n color-scheme: light dark;\n \n @media (prefers-color-scheme: light) \n :root \n --bg: #f7f9fb;\n --fg: #0b0c10;\n --muted: #5e6a77;\n --card: #ffffff;\n --accent: #6C5CE7;\n --accent-2: #20C997;\n \n \n\n .gpt-block \n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, \Helvetica Neue\, Arial, \Noto Sans\, \Apple Color Emoji\, \Segoe UI Emoji\, \Segoe UI Symbol\, \Noto Color Emoji\, sans-serif;\n color: var(--fg);\n background: radial-gradient(1200px 800px at 100% -20%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%),\n radial-gradient(900px 600px at -10% 110%, color-mix(in oklab, var(--accent-2) 22%, transparent) 0%, transparent 60%),\n var(--bg);\n padding: 28px;\n border-radius: var(--radius);\n max-width: var(--max-w);\n margin: 0 auto;\n box-shadow: 0 10px 40px rgba(0,0,0,.24);\n \n\n .gpt-block .container display: grid; gap: var(--gap); \n\n /* Header / Hero */\n .hero \n display: grid;\n grid-template-columns: 1.3fr .9fr;\n gap: clamp(20px, 4vw, 48px);\n align-items: center;\n background: linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent) 0%, transparent 100%);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: var(--radius);\n padding: clamp(20px, 4vw, 40px);\n position: relative;\n overflow: hidden;\n \n @media (max-width: 880px) \n .hero grid-template-columns: 1fr; \n \n\n .eyebrow \n display: inline-flex; align-items: center; gap: 10px;\n font-size: 14px; color: var(--muted);\n letter-spacing: .04em; text-transform: uppercase;\n \n .eyebrow .dot width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); \n\n .title \n font-size: clamp(28px, 5vw, 48px);\n line-height: 1.08;\n margin: 8px 0 12px;\n font-weight: 800;\n letter-spacing: -0.02em;\n \n .subtitle \n font-size: clamp(16px, 2.2vw, 18px);\n color: var(--muted);\n max-width: 60ch;\n \n\n .hero-actions \n display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px;\n \n .btn \n --_bg: var(--accent);\n --_fg: #fff;\n display: inline-flex; align-items: center; gap: 10px;\n padding: 12px 16px;\n border-radius: 12px;\n text-decoration: none;\n font-weight: 600;\n border: 1px solid color-mix(in oklab, var(--_bg) 18%, transparent);\n background: var(--_bg);\n color: var(--_fg);\n transition: transform .12s ease, box-shadow .12s ease, background .2s ease;\n box-shadow: 0 6px 22px color-mix(in oklab, var(--_bg) 30%, transparent);\n \n .btn:hover transform: translateY(-1px); \n .btn.secondary \n --_bg: color-mix(in oklab, var(--card) 90%, var(--bg));\n --_fg: var(--fg);\n border-color: color-mix(in oklab, var(--fg) 12%, transparent);\n box-shadow: none;\n \n\n /* Avatar Card */\n .card \n background: var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: var(--radius);\n padding: clamp(16px, 3vw, 22px);\n display: grid; gap: 14px;\n \n .avatar \n width: clamp(96px, 22vw, 128px); height: clamp(96px, 22vw, 128px);\n border-radius: 24px;\n background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent));\n display: grid; place-items: center;\n color: white; font-weight: 800; font-size: clamp(32px, 7vw, 42px);\n box-shadow: inset 0 0 24px rgba(255,255,255,.12);\n \n .meta color: var(--muted); font-size: 14px; \n .badges display: flex; flex-wrap: wrap; gap: 8px; \n .badge \n font-size: 12.5px; color: var(--fg);\n background: color-mix(in oklab, var(--fg) 10%, transparent);\n border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);\n padding: 6px 10px; border-radius: 999px;\n \n\n /* Sections */\n .section \n background: var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: var(--radius);\n padding: clamp(18px, 3.6vw, 28px);\n \n .section h2 \n font-size: clamp(20px, 3vw, 28px);\n margin: 0 0 12px;\n letter-spacing: -0.01em;\n \n .grid display: grid; gap: 14px; \n @media (min-width: 860px) \n .grid.cols-2 grid-template-columns: 1fr 1fr; \n .grid.cols-3 grid-template-columns: repeat(3, 1fr); \n \n\n .list \n display: grid; gap: 10px;\n \n .list-item \n display: grid; gap: 6px;\n padding: 12px;\n border: 1px dashed color-mix(in oklab, var(--fg) 14%, transparent);\n border-radius: 12px;\n background: color-mix(in oklab, var(--card) 80%, var(--bg));\n \n .list-item .k color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; \n .list-item .v font-weight: 600; \n\n /* Skills chips */\n .chips display: flex; flex-wrap: wrap; gap: 8px; \n .chip \n font-size: 13px; padding: 8px 10px;\n border-radius: 10px;\n background: color-mix(in oklab, var(--accent) 18%, transparent);\n border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);\n \n\n /* Project cards */\n .project \n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: 14px;\n padding: 14px;\n background: linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, transparent), transparent);\n display: grid; gap: 10px;\n \n .project h3 margin: 0; font-size: 18px; \n .project p margin: 0; color: var(--muted); \n .project .stack display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; \n .stack .tag \n font-size: 12px; padding: 6px 8px; border-radius: 8px;\n background: color-mix(in oklab, var(--fg) 10%, transparent);\n border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);\n \n\n /* Footer */\n .footer \n display: grid; gap: 10px; justify-items: center;\n color: var(--muted); font-size: 14px; padding-top: 8px;\n \n .links display: flex; gap: 12px; flex-wrap: wrap; \n .link \n color: var(--fg); text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--fg) 30%, transparent);\n \n\n /* Responsive helpers */\n .sr position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); \n</style>\n\n<div class=\gpt-block\ role=\region\ aria-label=\Лендінг-візитка\>\n <div class=\container\>\n (html comment removed: HERO )\n <section class=\hero\>\n <div>\n <div class=\eyebrow\><span class=\dot\></span> Київ, Україна</div>\n <h1 class=\title\>Люся (Людмила Колосова)</h1>\n <p class=\subtitle\>\n Front-end інженерка (React) та будівниця продуктів. Спеціалізуюся на\n редакторах контенту (<strong>Slate.js</strong>), пайплайнах <strong>remark/rehype</strong>,\n кастомних ембедах, SEO/OG-метаданих і красивому, швидкому UI.\n Люблю структуру, чисті інтерфейси, спорт і креатив.\n </p>\n <div class=\hero-actions\>\n <a class=\btn\ href=\#\ rel=\noopener nofollow ugc\ target=\_blank\ aria-label=\Написати в Telegram\>\n (html comment removed: Telegram icon )\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M9.94 15.54L9.8 19.1c.36 0 .52-.16.7-.36l1.68-1.6 3.48 2.56c.64.36 1.1.18 1.28-.6l2.32-10.9c.2-.9-.32-1.26-.94-1.04L3.98 10.3c-.88.34-.86.82-.15 1.04l3.62 1.14 8.4-5.3c.4-.24.76-.1.46.14\/></svg>\n Telegram\n </a>\n <a class=\btn secondary\ href=\mailto:[email protected]\ aria-label=\Написати на email\>\n (html comment removed: Mail icon )\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4l-8 5L4 8V6l8 5l8-5z\/></svg>\n Email\n </a>\n <a class=\btn secondary\ href=\#\ download aria-label=\Завантажити CV\>CV.pdf</a>\n </div>\n </div>\n\n <aside class=\card\ aria-label=\Профіль та швидкі факти\>\n <div class=\avatar\ aria-hidden=\true\>Л</div>\n <div class=\meta\>Працюю з React-екосистемою, створюю редактори, інструменти для контенту та інтеграції з соцплатформами.</div>\n <div class=\badges\>\n <span class=\badge\>React</span>\n <span class=\badge\>Slate.js</span>\n <span class=\badge\>remark / rehype</span>\n <span class=\badge\>Ant Design</span>\n <span class=\badge\>Redux</span>\n <span class=\badge\>OpenGraph / SEO</span>\n </div>\n </aside>\n </section>\n\n (html comment removed: ABOUT / VALUES )\n <section class=\section\>\n <h2>Про мене</h2>\n <div class=\grid cols-2\>\n <div class=\list\>\n <div class=\list-item\>\n <div class=\k\>Фокус</div>\n <div class=\v\>Редактори контенту, кастомні тулбари, ембеди (YouTube, TikTok, Hive/3Speak/DBuzz/DTube), таблиці, списки, медіа-галереї.</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Фронтенд</div>\n <div class=\v\>React, сучасні хуки, керування станом, чисті компоненти, перформанс і доступність.</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Контент-пайплайни</div>\n <div class=\v\>remark/rehype, sanitize-html, канонікали, OG-теги, превʼю, парсери, рендерери.</div>\n </div>\n </div>\n <div class=\list\>\n <div class=\list-item\>\n <div class=\k\>Проекти</div>\n <div class=\v\>Waivio: фронтенд із глибокою інтеграцією редактора, ембедів і карт (Pigeon-maps).</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Стиль</div>\n <div class=\v\>Чітка структура, мінімалізм, акуратна типографіка. Люблю доводити UX до ідеального стану.</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Особисте</div>\n <div class=\v\>Фітнес, фото, сімʼя та невеличкі крипто-інвестиції — тримаю баланс між справами й життям.</div>\n </div>\n </div>\n </div>\n </section>\n\n (html comment removed: SKILLS )\n <section class=\section\>\n <h2>Стек та навички</h2>\n <div class=\chips\>\n <span class=\chip\>React 18+</span>\n <span class=\chip\>Slate.js (custom nodes/voids)</span>\n <span class=\chip\>remark / rehype</span>\n <span class=\chip\>sanitize-html</span>\n <span class=\chip\>Ant Design</span>\n <span class=\chip\>Redux Toolkit</span>\n <span class=\chip\>OpenGraph / SEO</span>\n <span class=\chip\>Pigeon-maps</span>\n <span class=\chip\>iFrame / Shadow DOM sandbox</span>\n <span class=\chip\>UX & контент-системи</span>\n </div>\n </section>\n\n (html comment removed: PROJECTS )\n <section class=\section\>\n <h2>Обрані роботи</h2>\n <div class=\grid cols-2\>\n <article class=\project\>\n <h3>Waivio — контент-платформа</h3>\n <p>Фронтенд із просунутим редактором: таблиці, списки, зображення, відео, ембеди (YouTube/TikTok/3Speak/DBuzz), карти та безпечний HTML-рендер.</p>\n <div class=\stack\>\n <span class=\tag\>React</span><span class=\tag\>Slate.js</span><span class=\tag\>remark/rehype</span><span class=\tag\>sanitize-html</span><span class=\tag\>AntD</span>\n </div>\n </article>\n <article class=\project\>\n <h3>Редактор з кастомними тулбарами</h3>\n <p>Власні інлайн/блок тулбари, обробка «плюс-кнопки», list/table інсерти, гарячі клавіші, пастинг HTML у Slate без поломок.</p>\n <div class=\stack\>\n <span class=\tag\>Slate plugins</span><span class=\tag\>UX</span><span class=\tag\>Content parsing</span>\n </div>\n </article>\n </div>\n </section>\n\n (html comment removed: CONTACT )\n <section class=\section\>\n <h2>Звʼязатися</h2>\n <div class=\grid cols-3\>\n <div class=\list-item\>\n <div class=\k\>Email</div>\n <div class=\v\><a class=\link\ href=\mailto:[email protected]\>[email protected]</a></div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Telegram</div>\n <div class=\v\><a class=\link\ href=\#\ rel=\noopener nofollow ugc\ target=\_blank\>@ваш_нік</a></div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Соцмережі</div>\n <div class=\v\>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Instagram</a> ·\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>LinkedIn</a>\n </div>\n </div>\n </div>\n </section>\n\n (html comment removed: FOOTER )\n <footer class=\footer\ role=\contentinfo\>\n <div class=\links\>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Портфоліо</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Резюме (PDF)</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Блог</a>\n </div>\n <div>© <span data-year></span> Люся — Київ, Україна</div>\n </footer>\n </div>\n</div>\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:
javascript\n<style>\n /* ==== Business Card (Лендінг-візитка) — self-contained, no JS ==== */\n :root \n --max-w: 1080px;\n --gap: 20px;\n --radius: 16px;\n --bg: #0b0c10;\n --fg: #eaf0f4;\n --muted: #a8b3bd;\n --card: #151a22;\n --accent: #6C5CE7;\n --accent-2: #20C997;\n color-scheme: light dark;\n \n @media (prefers-color-scheme: light) \n :root \n --bg: #f7f9fb;\n --fg: #0b0c10;\n --muted: #5e6a77;\n --card: #ffffff;\n --accent: #6C5CE7;\n --accent-2: #20C997;\n \n \n\n .gpt-block \n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, \Helvetica Neue\, Arial, \Noto Sans\, \Apple Color Emoji\, \Segoe UI Emoji\, \Segoe UI Symbol\, \Noto Color Emoji\, sans-serif;\n color: var(--fg);\n background: radial-gradient(1200px 800px at 100% -20%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%),\n radial-gradient(900px 600px at -10% 110%, color-mix(in oklab, var(--accent-2) 22%, transparent) 0%, transparent 60%),\n var(--bg);\n padding: 28px;\n border-radius: var(--radius);\n max-width: var(--max-w);\n margin: 0 auto;\n box-shadow: 0 10px 40px rgba(0,0,0,.24);\n \n\n .gpt-block .container display: grid; gap: var(--gap); \n\n /* Header / Hero */\n .hero \n display: grid;\n grid-template-columns: 1.3fr .9fr;\n gap: clamp(20px, 4vw, 48px);\n align-items: center;\n background: linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent) 0%, transparent 100%);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: var(--radius);\n padding: clamp(20px, 4vw, 40px);\n position: relative;\n overflow: hidden;\n \n @media (max-width: 880px) \n .hero grid-template-columns: 1fr; \n \n\n .eyebrow \n display: inline-flex; align-items: center; gap: 10px;\n font-size: 14px; color: var(--muted);\n letter-spacing: .04em; text-transform: uppercase;\n \n .eyebrow .dot width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); \n\n .title \n font-size: clamp(28px, 5vw, 48px);\n line-height: 1.08;\n margin: 8px 0 12px;\n font-weight: 800;\n letter-spacing: -0.02em;\n \n .subtitle \n font-size: clamp(16px, 2.2vw, 18px);\n color: var(--muted);\n max-width: 60ch;\n \n\n .hero-actions \n display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px;\n \n .btn \n --_bg: var(--accent);\n --_fg: #fff;\n display: inline-flex; align-items: center; gap: 10px;\n padding: 12px 16px;\n border-radius: 12px;\n text-decoration: none;\n font-weight: 600;\n border: 1px solid color-mix(in oklab, var(--_bg) 18%, transparent);\n background: var(--_bg);\n color: var(--_fg);\n transition: transform .12s ease, box-shadow .12s ease, background .2s ease;\n box-shadow: 0 6px 22px color-mix(in oklab, var(--_bg) 30%, transparent);\n \n .btn:hover transform: translateY(-1px); \n .btn.secondary \n --_bg: color-mix(in oklab, var(--card) 90%, var(--bg));\n --_fg: var(--fg);\n border-color: color-mix(in oklab, var(--fg) 12%, transparent);\n box-shadow: none;\n \n\n /* Avatar Card */\n .card \n background: var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: var(--radius);\n padding: clamp(16px, 3vw, 22px);\n display: grid; gap: 14px;\n \n .avatar \n width: clamp(96px, 22vw, 128px); height: clamp(96px, 22vw, 128px);\n border-radius: 24px;\n background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent));\n display: grid; place-items: center;\n color: white; font-weight: 800; font-size: clamp(32px, 7vw, 42px);\n box-shadow: inset 0 0 24px rgba(255,255,255,.12);\n \n .meta color: var(--muted); font-size: 14px; \n .badges display: flex; flex-wrap: wrap; gap: 8px; \n .badge \n font-size: 12.5px; color: var(--fg);\n background: color-mix(in oklab, var(--fg) 10%, transparent);\n border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);\n padding: 6px 10px; border-radius: 999px;\n \n\n /* Sections */\n .section \n background: var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: var(--radius);\n padding: clamp(18px, 3.6vw, 28px);\n \n .section h2 \n font-size: clamp(20px, 3vw, 28px);\n margin: 0 0 12px;\n letter-spacing: -0.01em;\n \n .grid display: grid; gap: 14px; \n @media (min-width: 860px) \n .grid.cols-2 grid-template-columns: 1fr 1fr; \n .grid.cols-3 grid-template-columns: repeat(3, 1fr); \n \n\n .list \n display: grid; gap: 10px;\n \n .list-item \n display: grid; gap: 6px;\n padding: 12px;\n border: 1px dashed color-mix(in oklab, var(--fg) 14%, transparent);\n border-radius: 12px;\n background: color-mix(in oklab, var(--card) 80%, var(--bg));\n \n .list-item .k color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; \n .list-item .v font-weight: 600; \n\n /* Skills chips */\n .chips display: flex; flex-wrap: wrap; gap: 8px; \n .chip \n font-size: 13px; padding: 8px 10px;\n border-radius: 10px;\n background: color-mix(in oklab, var(--accent) 18%, transparent);\n border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);\n \n\n /* Project cards */\n .project \n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n border-radius: 14px;\n padding: 14px;\n background: linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, transparent), transparent);\n display: grid; gap: 10px;\n \n .project h3 margin: 0; font-size: 18px; \n .project p margin: 0; color: var(--muted); \n .project .stack display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; \n .stack .tag \n font-size: 12px; padding: 6px 8px; border-radius: 8px;\n background: color-mix(in oklab, var(--fg) 10%, transparent);\n border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);\n \n\n /* Footer */\n .footer \n display: grid; gap: 10px; justify-items: center;\n color: var(--muted); font-size: 14px; padding-top: 8px;\n \n .links display: flex; gap: 12px; flex-wrap: wrap; \n .link \n color: var(--fg); text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--fg) 30%, transparent);\n \n\n /* Responsive helpers */\n .sr position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); \n</style>\n\n<div class=\gpt-block\ role=\region\ aria-label=\Лендінг-візитка\>\n <div class=\container\>\n (html comment removed: HERO )\n <section class=\hero\>\n <div>\n <div class=\eyebrow\><span class=\dot\></span> Київ, Україна</div>\n <h1 class=\title\>Люся (Людмила Колосова)</h1>\n <p class=\subtitle\>\n Front-end інженерка (React) та будівниця продуктів. Спеціалізуюся на\n редакторах контенту (<strong>Slate.js</strong>), пайплайнах <strong>remark/rehype</strong>,\n кастомних ембедах, SEO/OG-метаданих і красивому, швидкому UI.\n Люблю структуру, чисті інтерфейси, спорт і креатив.\n </p>\n <div class=\hero-actions\>\n <a class=\btn\ href=\#\ rel=\noopener nofollow ugc\ target=\_blank\ aria-label=\Написати в Telegram\>\n (html comment removed: Telegram icon )\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M9.94 15.54L9.8 19.1c.36 0 .52-.16.7-.36l1.68-1.6 3.48 2.56c.64.36 1.1.18 1.28-.6l2.32-10.9c.2-.9-.32-1.26-.94-1.04L3.98 10.3c-.88.34-.86.82-.15 1.04l3.62 1.14 8.4-5.3c.4-.24.76-.1.46.14\/></svg>\n Telegram\n </a>\n <a class=\btn secondary\ href=\mailto:[email protected]\ aria-label=\Написати на email\>\n (html comment removed: Mail icon )\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4l-8 5L4 8V6l8 5l8-5z\/></svg>\n Email\n </a>\n <a class=\btn secondary\ href=\#\ download aria-label=\Завантажити CV\>CV.pdf</a>\n </div>\n </div>\n\n <aside class=\card\ aria-label=\Профіль та швидкі факти\>\n <div class=\avatar\ aria-hidden=\true\>Л</div>\n <div class=\meta\>Працюю з React-екосистемою, створюю редактори, інструменти для контенту та інтеграції з соцплатформами.</div>\n <div class=\badges\>\n <span class=\badge\>React</span>\n <span class=\badge\>Slate.js</span>\n <span class=\badge\>remark / rehype</span>\n <span class=\badge\>Ant Design</span>\n <span class=\badge\>Redux</span>\n <span class=\badge\>OpenGraph / SEO</span>\n </div>\n </aside>\n </section>\n\n (html comment removed: ABOUT / VALUES )\n <section class=\section\>\n <h2>Про мене</h2>\n <div class=\grid cols-2\>\n <div class=\list\>\n <div class=\list-item\>\n <div class=\k\>Фокус</div>\n <div class=\v\>Редактори контенту, кастомні тулбари, ембеди (YouTube, TikTok, Hive/3Speak/DBuzz/DTube), таблиці, списки, медіа-галереї.</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Фронтенд</div>\n <div class=\v\>React, сучасні хуки, керування станом, чисті компоненти, перформанс і доступність.</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Контент-пайплайни</div>\n <div class=\v\>remark/rehype, sanitize-html, канонікали, OG-теги, превʼю, парсери, рендерери.</div>\n </div>\n </div>\n <div class=\list\>\n <div class=\list-item\>\n <div class=\k\>Проекти</div>\n <div class=\v\>Waivio: фронтенд із глибокою інтеграцією редактора, ембедів і карт (Pigeon-maps).</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Стиль</div>\n <div class=\v\>Чітка структура, мінімалізм, акуратна типографіка. Люблю доводити UX до ідеального стану.</div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Особисте</div>\n <div class=\v\>Фітнес, фото, сімʼя та невеличкі крипто-інвестиції — тримаю баланс між справами й життям.</div>\n </div>\n </div>\n </div>\n </section>\n\n (html comment removed: SKILLS )\n <section class=\section\>\n <h2>Стек та навички</h2>\n <div class=\chips\>\n <span class=\chip\>React 18+</span>\n <span class=\chip\>Slate.js (custom nodes/voids)</span>\n <span class=\chip\>remark / rehype</span>\n <span class=\chip\>sanitize-html</span>\n <span class=\chip\>Ant Design</span>\n <span class=\chip\>Redux Toolkit</span>\n <span class=\chip\>OpenGraph / SEO</span>\n <span class=\chip\>Pigeon-maps</span>\n <span class=\chip\>iFrame / Shadow DOM sandbox</span>\n <span class=\chip\>UX & контент-системи</span>\n </div>\n </section>\n\n (html comment removed: PROJECTS )\n <section class=\section\>\n <h2>Обрані роботи</h2>\n <div class=\grid cols-2\>\n <article class=\project\>\n <h3>Waivio — контент-платформа</h3>\n <p>Фронтенд із просунутим редактором: таблиці, списки, зображення, відео, ембеди (YouTube/TikTok/3Speak/DBuzz), карти та безпечний HTML-рендер.</p>\n <div class=\stack\>\n <span class=\tag\>React</span><span class=\tag\>Slate.js</span><span class=\tag\>remark/rehype</span><span class=\tag\>sanitize-html</span><span class=\tag\>AntD</span>\n </div>\n </article>\n <article class=\project\>\n <h3>Редактор з кастомними тулбарами</h3>\n <p>Власні інлайн/блок тулбари, обробка «плюс-кнопки», list/table інсерти, гарячі клавіші, пастинг HTML у Slate без поломок.</p>\n <div class=\stack\>\n <span class=\tag\>Slate plugins</span><span class=\tag\>UX</span><span class=\tag\>Content parsing</span>\n </div>\n </article>\n </div>\n </section>\n\n (html comment removed: CONTACT )\n <section class=\section\>\n <h2>Звʼязатися</h2>\n <div class=\grid cols-3\>\n <div class=\list-item\>\n <div class=\k\>Email</div>\n <div class=\v\><a class=\link\ href=\mailto:[email protected]\>[email protected]</a></div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Telegram</div>\n <div class=\v\><a class=\link\ href=\#\ rel=\noopener nofollow ugc\ target=\_blank\>@ваш_нік</a></div>\n </div>\n <div class=\list-item\>\n <div class=\k\>Соцмережі</div>\n <div class=\v\>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Instagram</a> ·\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>LinkedIn</a>\n </div>\n </div>\n </div>\n </section>\n\n (html comment removed: FOOTER )\n <footer class=\footer\ role=\contentinfo\>\n <div class=\links\>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Портфоліо</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Резюме (PDF)</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Блог</a>\n </div>\n <div>© <span data-year></span> Люся — Київ, Україна</div>\n </footer>\n </div>\n</div>\n\n,hideSignIn:false,hideMenu:false@wiv01 added htmlContent (English):
code:
javascript\n<style>\n /* ── Pastel calling card for Люся — scoped, no JS ── */\n :root color-scheme: light dark; \n .gpt-block \n --bg: #faf7fb; /* lavender milk */\n --fg: #1e1b2e; /* ink */\n --muted: #6b6a78;\n --card: #ffffff;\n --ring: #e9e2ff;\n --accent: #b79cff; /* soft lilac */\n --accent-2: #9ee0d9; /* mint */\n --accent-3: #ffd6e7; /* blush */\n --radius: 18px;\n --gap: 22px;\n --maxw: 1040px;\n font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, \Helvetica Neue\, Arial, \Noto Sans\, sans-serif;\n color: var(--fg);\n padding: 28px;\n border-radius: var(--radius);\n max-width: var(--maxw);\n margin: 0 auto;\n background:\n radial-gradient(900px 600px at -10% 0%, color-mix(in oklab, var(--accent) 22%, transparent) 0, transparent 60%),\n radial-gradient(900px 700px at 110% 110%, color-mix(in oklab, var(--accent-2) 18%, transparent) 0, transparent 60%),\n linear-gradient(180deg, #fff, var(--bg));\n box-shadow: 0 12px 40px rgba(73, 59, 112, .08);\n \n\n .gpt-block .grid display: grid; gap: var(--gap); \n .gpt-block .card \n background: var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);\n border-radius: var(--radius);\n padding: clamp(16px, 3vw, 28px);\n box-shadow:\n 0 1px 0 rgba(0,0,0,.02),\n 0 10px 30px rgba(183, 156, 255, .08);\n \n\n /* Hero */\n .hero \n display: grid;\n grid-template-columns: 1.25fr .9fr;\n gap: clamp(18px, 4vw, 40px);\n align-items: center;\n overflow: clip;\n position: relative;\n isolation: isolate;\n \n @media (max-width: 880px) .hero grid-template-columns: 1fr; \n\n .ribbon \n display: inline-grid; grid-auto-flow: column; gap: 10px; align-items: center;\n font-size: 13px; letter-spacing: .06em; text-transform: uppercase;\n color: var(--muted);\n \n .ribbon .dot \n width: 8px; height: 8px; border-radius: 999px;\n background: var(--accent);\n box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 25%, transparent);\n \n\n .title \n font-size: clamp(28px, 5vw, 48px);\n line-height: 1.06;\n letter-spacing: -0.02em;\n margin: 8px 0 12px;\n font-weight: 800;\n \n .subtitle \n color: var(--muted);\n font-size: clamp(16px, 2.2vw, 18px);\n max-width: 60ch;\n \n\n .actions display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; \n .btn \n --_bg: var(--accent);\n --_fg: #121016;\n display: inline-flex; align-items: center; gap: 10px;\n padding: 12px 16px; border-radius: 14px; text-decoration: none; font-weight: 700;\n background:\n linear-gradient(180deg, color-mix(in oklab, var(--_bg) 88%, #fff 0%), color-mix(in oklab, var(--_bg) 72%, #fff 0%));\n color: var(--_fg);\n border: 1px solid color-mix(in oklab, var(--_bg) 28%, transparent);\n box-shadow: 0 10px 24px color-mix(in oklab, var(--_bg) 26%, transparent);\n transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;\n \n .btn:hover transform: translateY(-1px); filter: saturate(1.05); \n .btn.secondary --_bg: var(--accent-3); \n\n .avatarCard \n display: grid; gap: 14px; justify-items: center; text-align: center;\n background:\n radial-gradient(220px 160px at 30% 10%, color-mix(in oklab, var(--accent-2) 28%, transparent) 0, transparent 70%),\n var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);\n border-radius: calc(var(--radius) + 4px);\n padding: clamp(16px, 3vw, 26px);\n \n .avatar \n width: clamp(92px, 22vw, 128px); height: clamp(92px, 22vw, 128px);\n border-radius: 28px;\n background:\n conic-gradient(from 240deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));\n display: grid; place-items: center; color: #1a132b;\n font-size: clamp(34px, 6.5vw, 44px); font-weight: 900;\n box-shadow: inset 0 0 24px rgba(255,255,255,.35);\n \n .kicker color: var(--muted); font-size: 13.5px; \n .badges display:flex; flex-wrap:wrap; gap:8px; justify-content:center; \n .badge \n font-size: 12.5px; padding: 7px 10px; border-radius: 999px;\n background: color-mix(in oklab, var(--fg) 8%, transparent);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n \n\n /* Sections */\n .section h2 margin: 0 0 10px; font-size: clamp(18px, 2.6vw, 24px); letter-spacing:-.01em; \n .muted color: var(--muted); \n .cols display:grid; gap: 14px; \n @media (min-width: 860px) .cols.cols-2 grid-template-columns: 1fr 1fr; \n\n .pill \n display:inline-flex; align-items:center; gap:8px;\n padding: 8px 12px; border-radius: 999px;\n border: 1px dashed color-mix(in oklab, var(--fg) 18%, transparent);\n background: color-mix(in oklab, var(--accent-2) 16%, transparent);\n font-size: 13px;\n \n\n .list display:grid; gap: 10px; \n .li \n background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--accent-3) 10%, #fff));\n border: 1px solid var(--ring);\n padding: 12px 14px; border-radius: 14px;\n \n .li strong font-weight: 700; \n\n /* Footer */\n .footer \n display:grid; gap: 8px; justify-items:center; text-align:center; color: var(--muted);\n \n .links display:flex; gap:12px; flex-wrap:wrap; \n .link color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in oklab, var(--fg) 30%, transparent); \n</style>\n\n<div class=\gpt-block\ role=\region\ aria-label=\ніжна візитка\>\n <div class=\grid hero card\>\n <div>\n <div class=\ribbon\><span class=\dot\ aria-hidden=\true\></span> Київ, Україна</div>\n <h1 class=\title\>Люся — спокійна сила інтерфейсів</h1>\n <p class=\subtitle\>\n Ти про людей і про відчуття від продукту. Обираєш ясність замість шуму, турбуєшся про дрібниці,\n любиш акуратну типографіку, швидкість і чистоту у коді. Твої інструменти — <strong>React</strong>,\n редактори контенту (<strong>Slate</strong>), пайплайни <strong>remark/rehype</strong> та уважність до деталей.\n </p>\n <div class=\actions\>\n <a class=\btn\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\ aria-label=\Написати в Telegram\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M21.8 5.2L3.9 12.1c-.7.3-.7 1.2 0 1.4l4.7 1.5 1.5 4.7c.2.7 1.1.7 1.4 0l6.9-17.9c.3-.8-.5-1.6-1.3-1.3Z\/></svg>\n Telegram\n </a>\n <a class=\btn secondary\ href=\mailto:[email protected]\ aria-label=\Email\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M12 3a9 9 0 1 0 6.4 15.3l.1.7h2l-1.1-6.5A4.9 4.9 0 0 0 12 7a5 5 0 0 0 0 10c1.3 0 2.4-.5 3.2-1.4v1.1A7 7 0 1 1 19 12v1a2 2 0 0 1-4 0V9h-2v4a4 4 0 1 0 8 0v-1A9 9 0 0 0 12 3Z\/></svg>\n Email\n </a>\n </div>\n </div>\n\n <aside class=\avatarCard\ aria-label=\портрет і інфо\>\n <div class=\avatar\ aria-hidden=\true\>Л</div>\n <div class=\kicker\>Front-end · React · Content systems</div>\n <div class=\badges\ aria-label=\теги\>\n <span class=\badge\>React 18</span>\n <span class=\badge\>Slate.js</span>\n <span class=\badge\>remark · rehype</span>\n <span class=\badge\>sanitize-html</span>\n <span class=\badge\>UX тонкість</span>\n </div>\n </aside>\n </div>\n\n <section class=\card section\ aria-label=\про тебе\>\n <h2>Твій вайб — ніжність без кітчу</h2>\n <div class=\cols cols-2\>\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 <div class=\list\>\n <div class=\li\><strong>Редактори як інструменти творчості:</strong> таблиці, списки, ембеди, медіа — все “грає”.</div>\n <div class=\li\><strong>Технічна чистота:</strong> безпечний HTML, OG/SEO, надійні пайплайни.</div>\n <div class=\li\><strong>Мʼякі кольори,</strong> пастель і повітря — твій природний простір.</div>\n </div>\n </div>\n </section>\n\n <section class=\card section\ aria-label=\що робиш найкраще\>\n <h2>Де ти особливо сильна</h2>\n <div class=\list\>\n <div class=\pill\ aria-label=\напрям\>Редактори без болю</div>\n <div class=\pill\ aria-label=\напрям\>Чисті інтерфейси</div>\n <div class=\pill\ aria-label=\напрям\>Ембеди та медіа</div>\n <div class=\pill\ aria-label=\напрям\>SEO · OG · превʼю</div>\n <div class=\pill\ aria-label=\напрям\>Безпечний HTML рендер</div>\n </div>\n </section>\n\n <footer class=\footer\ role=\contentinfo\>\n <div class=\links\ aria-label=\посилання\>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Портфоліо</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Резюме</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Instagram</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>LinkedIn</a>\n </div>\n <small class=\muted\>© <span data-year></span> Люся · створено у ніжних тонах</small>\n </footer>\n</div>\n\n\n,hideSignIn:true,hideMenu:trueWaivio object "test html 03100919" has been created
wiv01 added name(en-US):
test html 03100919
Waivio object "test html 03101348" has been created
wiv01 added name(en-US):
test html 03101348
Waivio object "test html 03101729" has been created
wiv01 added name(en-US):
test html 03101729
@wiv01 added title (English):
test
Waivio object "test html 06100926" has been created
wiv01 added name(en-US):
test html 06100926
Waivio object "test html 06100934" has been created
wiv01 added name(en-US):
test html 06100934
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:trueWaivio object "first html01102025" has been created
wiv01 added name(en-US):
first html01102025
Waivio object "first html08102025" has been created
wiv01 added name(en-US):
first html08102025
Waivio object "first html08102025 02" has been created
wiv01 added name(en-US):
first html08102025 02
Waivio object "test html 08101118" has been created
wiv01 added name(en-US):
test html 08101118
@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\ />\n <title>John – CV</title>\n <meta name=\description\ content=\CV website for John – skills, experience, projects, and contact.\ />\n <meta property=\og:title\ content=\John – CV\ />\n <meta property=\og:description\ content=\Skills, experience, projects, and contact.\ />\n <meta name=\theme-color\ content=\#0ea5e9\ />\n <style>\n /* ===== CSS RESET (modern, minimal) ===== */\n *,*::before,*::afterbox-sizing:border-box\n html,bodyheight:100%\n bodymargin:0;line-height:1.6;-webkit-font-smoothing:antialiased\n img,svg,videodisplay:block;max-width:100%\n input,button,textarea,selectfont:inherit\n\n /* ===== THEME & TOKENS ===== */\n :root\n --bg: #0b1020;\n --panel: #11162a;\n --muted: #a9b1c7;\n --text: #e6e9f4;\n --brand: #0ea5e9;\n --brand-2: #22d3ee;\n --ring: #38bdf8;\n --ok: #10b981;\n --warn: #f59e0b;\n --err: #ef4444;\n --card-radius: 18px;\n --shadow: 0 10px 30px rgba(0,0,0,.25);\n \n .light\n --bg:#f7f8fc; --panel:#ffffff; --muted:#5b6375; --text:#0e1220;\n --brand:#0ea5e9; --brand-2:#06b6d4; --ring:#0284c7;\n --ok:#059669; --warn:#b45309; --err:#b91c1c;\n --shadow:0 10px 30px rgba(2,6,23,.08);\n \n\n body\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, \Apple Color Emoji\,\Segoe UI Emoji\;\n background: radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.12), transparent 60%),\n radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.12), transparent 60%),\n var(--bg);\n color: var(--text);\n \n acolor:var(--brand);text-decoration:none\n a:hovertext-decoration:underline\n\n .containerwidth:min(1100px, 92vw);margin-inline:auto\n\n /* ===== NAVBAR ===== */\n header\n position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(8px);\n background: color-mix(in oklch, var(--bg) 80%, transparent);\n border-bottom:1px solid color-mix(in oklch, var(--panel) 70%, transparent);\n \n .navdisplay:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0\n .logodisplay:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px\n .logo .badgedisplay:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)\n .logo .badge spanfont-weight:900;color:white\n nav apadding:8px 12px;border-radius:12px\n nav a:hoverbackground:color-mix(in oklch, var(--panel) 84%, transparent)\n .actionsdisplay:flex;align-items:center;gap:8px\n .btndisplay:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);background:var(--panel);box-shadow:var(--shadow);cursor:pointer\n .btn:hovertransform:translateY(-1px)\n\n /* ===== HERO ===== */\n .herodisplay:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding:42px 0 26px\n .hero-carddisplay:grid;gap:18px;background:linear-gradient(180deg,color-mix(in oklch, var(--panel) 92%, transparent),color-mix(in oklch, var(--panel) 98%, transparent));padding:26px;border-radius:var(--card-radius);box-shadow:var(--shadow)\n .hero h1font-size:clamp(28px, 2.2rem, 48px);line-height:1.15;margin:0\n .hero pmargin:0;color:var(--muted)\n .hero .metadisplay:flex;flex-wrap:wrap;gap:10px 12px\n .chipdisplay:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);border-radius:999px;background:var(--panel)\n\n .griddisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px\n .col-8grid-column:span 8\n .col-4grid-column:span 4\n @media (max-width: 900px)\n .gridgrid-template-columns:1fr\n .col-8,.col-4grid-column:1/-1\n \n\n /* ===== CARDS ===== */\n .cardbackground:var(--panel);border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);border-radius:var(--card-radius);padding:20px;box-shadow:var(--shadow)\n .card h3margin-top:0\n\n /* ===== SECTIONS ===== */\n sectionpadding:22px 0\n .section-titledisplay:flex;align-items:center;justify-content:space-between;margin:6px 0 14px\n .section-title h2margin:0;font-size:1.4rem\n .section-title .lineheight:1px;background:color-mix(in oklch, var(--panel) 75%, transparent);flex:1;margin-left:12px\n\n /* ===== LISTS ===== */\n .timelineposition:relative;padding-left:22px\n .timeline::beforecontent:\\;position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:color-mix(in oklch, var(--brand) 30%, var(--panel))\n .itemmargin:0 0 16px\n .item .whenfont-size:.9rem;color:var(--muted)\n .item .wherefont-weight:600\n .item .whatmargin:.25rem 0\n\n .skillsdisplay:flex;flex-wrap:wrap;gap:10px\n .skillpadding:8px 12px;border-radius:999px;border:1px dashed color-mix(in oklch, var(--panel) 70%, transparent)\n\n /* ===== PROJECTS ===== */\n .projectsdisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px\n .projectgrid-column:span 6\n @media (max-width: 800px).projectgrid-column:1/-1\n .project .thumbaspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,color-mix(in oklch,var(--brand) 10%,var(--panel)),color-mix(in oklch,var(--brand-2) 10%,var(--panel)));display:grid;place-items:center;border:1px solid color-mix(in oklch, var(--panel) 70%, transparent)\n .project .metadisplay:flex;align-items:center;justify-content:space-between;margin-top:10px\n\n /* ===== CONTACT ===== */\n formdisplay:grid;gap:12px\n labelfont-weight:600\n input, textareabackground:var(--panel);border:1px solid color-mix(in oklch, var(--panel) 70%, transparent);border-radius:12px;padding:12px 14px;color:var(--text)\n textareamin-height:120px\n .inlinedisplay:flex;gap:10px;align-items:center\n .inline inputflex:1\n\n /* ===== FOOTER ===== */\n footerpadding:28px 0;color:var(--muted)\n\n /* ===== UTIL ===== */\n .sr-onlyposition:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0\n .hiddendisplay:none\n </style>\n</head>\n<body>\n <header>\n <div class=\container nav\>\n <div class=\logo\ aria-label=\John home\>\n <div class=\badge\ aria-hidden=\true\><span>J</span></div>\n <span>John</span>\n </div>\n <nav aria-label=\Primary\>\n <a href=\#about\>About</a>\n <a href=\#experience\>Experience</a>\n <a href=\#projects\>Projects</a>\n <a href=\#contact\>Contact</a>\n </nav>\n <div class=\actions\>\n <button id=\themeToggle\ class=\btn\ type=\button\ aria-label=\Toggle theme\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 3a9 9 0 1 0 9 9 1 1 0 0 1 1-1 1 1 0 0 0 .67-1.74A11 11 0 0 1 13.74 1.33 1 1 0 0 0 12 2a1 1 0 0 1-1 1Z\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Theme\n </button>\n <a class=\btn\ href=\#\ id=\downloadCV\ download>Download CV</a>\n </div>\n </div>\n </header>\n\n <main class=\container\>\n (html comment removed: HERO )\n <section class=\hero\ id=\home\>\n <div class=\hero-card\>\n <h1>John — Software Professional</h1>\n <p>Passionate about building reliable, user‑centric web applications. I focus on performant front‑ends, clean APIs, and thoughtful UX.</p>\n <div class=\meta\>\n <span class=\chip\ title=\Location\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 22s8-6.75 8-12a8 8 0 1 0-16 0c0 5.25 8 12 8 12Z\ stroke=\currentColor\ stroke-width=\1.6\/><circle cx=\12\ cy=\10\ r=\3\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Remote • EU\n </span>\n <span class=\chip\ title=\Email\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z\ stroke=\currentColor\ stroke-width=\1.6\/><path d=\m4 7 8 6 8-6\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n <button type=\button\ id=\copyEmail\ class=\btn\ style=\padding:6px 10px\>[email protected]</button>\n </span>\n <span class=\chip\ title=\Open to opportunities\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 3v18M3 12h18\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Open to work\n </span>\n </div>\n </div>\n </section>\n\n (html comment removed: ABOUT )\n <section id=\about\>\n <div class=\section-title\><h2>About</h2><div class=\line\></div></div>\n <div class=\grid\>\n <article class=\card col-8\>\n <p>Hi, I’m John. I specialize in crafting modern, accessible web experiences. My toolkit includes HTML, CSS, JavaScript/TypeScript, and popular frameworks. I care about DX, maintainability, and measurable impact.</p>\n <ul>\n <li>Strengths: problem‑solving, communicating trade‑offs, mentoring.</li>\n <li>Interests: performance audits, design systems, testing strategy.</li>\n </ul>\n </article>\n <aside class=\card col-4\>\n <h3>Quick Facts</h3>\n <div class=\skills\>\n <span class=\skill\>HTML5</span>\n <span class=\skill\>CSS / Tailwind</span>\n <span class=\skill\>JavaScript / TS</span>\n <span class=\skill\>React / Vue</span>\n <span class=\skill\>Node / Express</span>\n <span class=\skill\>REST / GraphQL</span>\n <span class=\skill\>Playwright / Jest</span>\n <span class=\skill\>Git / CI</span>\n </div>\n </aside>\n </div>\n </section>\n\n (html comment removed: EXPERIENCE )\n <section id=\experience\>\n <div class=\section-title\><h2>Experience</h2><div class=\line\></div></div>\n <div class=\grid\>\n <div class=\card col-8\>\n <div class=\timeline\ id=\experienceList\>\n <div class=\item\>\n <div class=\when\>2023 — Present</div>\n <div class=\where\>Senior Frontend Engineer • Acme Corp</div>\n <p class=\what\>Led migration to a component library, reducing UI defects by 35% and improving build times by 40%.</p>\n </div>\n <div class=\item\>\n <div class=\when\>2020 — 2023</div>\n <div class=\where\>Full‑stack Developer • Nimbus</div>\n <p class=\what\>Shipped analytics dashboards; introduced e2e testing increasing release confidence and cadence.</p>\n </div>\n <div class=\item\>\n <div class=\when\>2018 — 2020</div>\n <div class=\where\>Frontend Developer • Studio XYZ</div>\n <p class=\what\>Built high‑performing marketing sites and internal tools with a11y best practices.</p>\n </div>\n </div>\n </div>\n <aside class=\card col-4\>\n <h3>Core Skills</h3>\n <ul>\n <li>Semantic, accessible UI</li>\n <li>SPA/MPA architecture</li>\n <li>Design systems</li>\n <li>Automated testing</li>\n <li>Performance optimization</li>\n </ul>\n </aside>\n </div>\n </section>\n\n (html comment removed: PROJECTS )\n <section id=\projects\>\n <div class=\section-title\>\n <h2>Projects</h2>\n <div class=\line\></div>\n </div>\n <div class=\inline\ style=\margin-bottom:10px\>\n <input id=\projectSearch\ type=\search\ placeholder=\Filter projects by keyword…\ aria-label=\Filter projects\ />\n <button class=\btn\ type=\button\ id=\clearFilter\>Clear</button>\n </div>\n <div class=\projects\ id=\projectGrid\>\n <article class=\card project\ data-tags=\react charts dashboard\>\n <div class=\thumb\ aria-hidden=\true\>📊</div>\n <div class=\meta\><strong>InsightDash</strong><span class=\muted\>React • Charts</span></div>\n <p>Interactive analytics dashboard with lazy‑loaded modules and client‑side caching.</p>\n <a href=\#\ aria-label=\Open project InsightDash\>View</a>\n </article>\n <article class=\card project\ data-tags=\node api performance\>\n <div class=\thumb\ aria-hidden=\true\>⚙️</div>\n <div class=\meta\><strong>FastAPI Kit</strong><span class=\muted\>Node • REST</span></div>\n <p>Boilerplate for high‑throughput APIs with structured logging and rate limiting.</p>\n <a href=\#\ aria-label=\Open project FastAPI Kit\>View</a>\n </article>\n <article class=\card project\ data-tags=\ui library design-system\>\n <div class=\thumb\ aria-hidden=\true\>🧩</div>\n <div class=\meta\><strong>Feather UI</strong><span class=\muted\>Design System</span></div>\n <p>Composable UI library with a11y primitives and tokens for theming.</p>\n <a href=\#\ aria-label=\Open project Feather UI\>View</a>\n </article>\n <article class=\card project\ data-tags=\testing e2e playwright\>\n <div class=\thumb\ aria-hidden=\true\>🧪</div>\n <div class=\meta\><strong>SpecPilot</strong><span class=\muted\>Testing</span></div>\n <p>E2E testing starter with Playwright + visual regression and PR checks.</p>\n <a href=\#\ aria-label=\Open project SpecPilot\>View</a>\n </article>\n </div>\n </section>\n\n (html comment removed: EDUCATION )\n <section id=\education\>\n <div class=\section-title\><h2>Education</h2><div class=\line\></div></div>\n <div class=\card\>\n <ul class=\timeline\>\n <li class=\item\><div class=\when\>2014 — 2018</div><div class=\where\>B.Sc. Computer Science • Tech University</div><p class=\what\>Graduated with honors. Focus on HCI and distributed systems.</p></li>\n </ul>\n </div>\n </section>\n\n (html comment removed: CONTACT )\n <section id=\contact\>\n <div class=\section-title\><h2>Contact</h2><div class=\line\></div></div>\n <div class=\grid\>\n <div class=\card col-8\>\n <form id=\contactForm\ novalidate>\n <div>\n <label for=\name\>Name</label>\n <input id=\name\ name=\name\ autocomplete=\name\ required placeholder=\Your name\ />\n </div>\n <div>\n <label for=\email\>Email</label>\n <input id=\email\ name=\email\ type=\email\ autocomplete=\email\ required placeholder=\[email protected]\ />\n </div>\n <div>\n <label for=\message\>Message</label>\n <textarea id=\message\ name=\message\ required placeholder=\Say hi!\ ></textarea>\n </div>\n <div class=\inline\>\n <button class=\btn\ type=\submit\>Send</button>\n <span id=\formStatus\ role=\status\ aria-live=\polite\></span>\n </div>\n </form>\n </div>\n <aside class=\card col-4\>\n <h3>Links</h3>\n <ul>\n <li><a href=\#\ rel=\me\>LinkedIn</a></li>\n <li><a href=\#\ rel=\me\>GitHub</a></li>\n <li><a href=\#\ rel=\me\>Twitter</a></li>\n </ul>\n </aside>\n </div>\n </section>\n </main>\n\n <footer class=\container\>\n <small>© <span id=\year\></span> John. Built with HTML, CSS & JS.</small>\n </footer>\n\n <script>\n // ===== Theme Toggle =====\n (function()\n const KEY = 'prefers-light';\n const btn = document.getElementById('themeToggle');\n const set = (on)=> document.documentElement.classList.toggle('light', !!on); \n set(localStorage.getItem(KEY)==='1');\n btn.addEventListener('click', ()=>\n const to = !document.documentElement.classList.contains('light');\n set(to); localStorage.setItem(KEY, to ? '1':'0');\n );\n )();\n\n // ===== Smooth Scroll for same-page links =====\n document.querySelectorAll('a[href^=\#\]').forEach(a=>\n a.addEventListener('click', e=>\n const id = a.getAttribute('href').slice(1);\n const el = document.getElementById(id);\n if(el) e.preventDefault(); el.scrollIntoView(behavior:'smooth', block:'start'); \n )\n )\n\n // ===== Projects Filter =====\n const search = document.getElementById('projectSearch');\n const clearBtn = document.getElementById('clearFilter');\n const grid = document.getElementById('projectGrid');\n function applyFilter()\n const q = search.value.trim().toLowerCase();\n [...grid.children].forEach(card=>\n const tags = (card.getAttribute('data-tags')||'').toLowerCase();\n const text = card.textContent.toLowerCase();\n const match = !q || tags.includes(q) || text.includes(q);\n card.classList.toggle('hidden', !match);\n );\n \n search.addEventListener('input', applyFilter);\n clearBtn.addEventListener('click', ()=> search.value=''; applyFilter(); search.focus(); );\n\n // ===== Copy email =====\n const copyBtn = document.getElementById('copyEmail');\n copyBtn.addEventListener('click', async ()=>\n try\n await navigator.clipboard.writeText('[email protected]');\n copyBtn.textContent = 'Copied!';\n setTimeout(()=> copyBtn.textContent = '[email protected]', 1500);\n catch(e)\n alert('Copy failed');\n \n );\n\n // ===== Download CV (auto-generate simple text file) =====\n const dl = document.getElementById('downloadCV');\n dl.addEventListener('click', (e)=>\n const txt = `John\\nSoftware Professional\\n\\nSkills: HTML, CSS, JS, React, Node\\nExperience: Acme (2023–), Nimbus (2020–2023), Studio XYZ (2018–2020)`;\n const blob = new Blob([txt], type:'text/plain');\n const url = URL.createObjectURL(blob);\n dl.href = url; dl.download = 'John-CV.txt';\n setTimeout(()=>URL.revokeObjectURL(url), 30000);\n );\n\n // ===== Contact Form (client-side demo) =====\n document.getElementById('contactForm').addEventListener('submit', (e)=>\n e.preventDefault();\n const form = e.currentTarget;\n const status = document.getElementById('formStatus');\n if(!form.checkValidity())\n status.textContent = 'Please fill all fields correctly.'; status.style.color = 'var(--warn)'; return;\n \n // Simulate async submit\n status.textContent = 'Sending…';\n setTimeout(()=>\n status.textContent = 'Thanks! Your message has been sent (demo).';\n status.style.color = 'var(--ok)';\n form.reset();\n , 800);\n );\n\n // ===== Year =====\n document.getElementById('year').textContent = new Date().getFullYear();\n </script>\n</body>\n</html>\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\ />\n <title>John – CV2222222</title>\n <meta name=\description\ content=\CV website for John – skills, experience, projects, and contact.\ />\n <meta property=\og:title\ content=\John – CV\ />\n <meta property=\og:description\ content=\Skills, experience, projects, and contact.\ />\n <meta name=\theme-color\ content=\#0ea5e9\ />\n <style>\n /* ===== CSS RESET (modern, minimal) ===== */\n *,*::before,*::afterbox-sizing:border-box\n html,bodyheight:100%\n bodymargin:0;line-height:1.6;-webkit-font-smoothing:antialiased\n img,svg,videodisplay:block;max-width:100%\n input,button,textarea,selectfont:inherit\n\n /* ===== THEME & TOKENS ===== */\n :root\n --bg: #0b1020;\n --panel: #11162a;\n --muted: #a9b1c7;\n --text: #e6e9f4;\n --brand: #0ea5e9;\n --brand-2: #22d3ee;\n --ring: #38bdf8;\n --ok: #10b981;\n --warn: #f59e0b;\n --err: #ef4444;\n --card-radius: 18px;\n --shadow: 0 10px 30px rgba(0,0,0,.25);\n \n .light\n --bg:#f7f8fc; --panel:#ffffff; --muted:#5b6375; --text:#0e1220;\n --brand:#0ea5e9; --brand-2:#06b6d4; --ring:#0284c7;\n --ok:#059669; --warn:#b45309; --err:#b91c1c;\n --shadow:0 10px 30px rgba(2,6,23,.08);\n \n\n body\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, \Apple Color Emoji\,\Segoe UI Emoji\;\n background: radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.12), transparent 60%),\n radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.12), transparent 60%),\n var(--bg);\n color: var(--text);\n \n acolor:var(--brand);text-decoration:none\n a:hovertext-decoration:underline\n\n .containerwidth:min(1100px, 92vw);margin-inline:auto\n\n /* ===== NAVBAR ===== */\n header\n position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(8px);\n background: color-mix(in oklch, var(--bg) 80%, transparent);\n border-bottom:1px solid color-mix(in oklch, var(--panel) 70%, transparent);\n \n .navdisplay:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0\n .logodisplay:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px\n .logo .badgedisplay:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)\n .logo .badge spanfont-weight:900;color:white\n nav apadding:8px 12px;border-radius:12px\n nav a:hoverbackground:color-mix(in oklch, var(--panel) 84%, transparent)\n .actionsdisplay:flex;align-items:center;gap:8px\n .btndisplay:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);background:var(--panel);box-shadow:var(--shadow);cursor:pointer\n .btn:hovertransform:translateY(-1px)\n\n /* ===== HERO ===== */\n .herodisplay:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding:42px 0 26px\n .hero-carddisplay:grid;gap:18px;background:linear-gradient(180deg,color-mix(in oklch, var(--panel) 92%, transparent),color-mix(in oklch, var(--panel) 98%, transparent));padding:26px;border-radius:var(--card-radius);box-shadow:var(--shadow)\n .hero h1font-size:clamp(28px, 2.2rem, 48px);line-height:1.15;margin:0\n .hero pmargin:0;color:var(--muted)\n .hero .metadisplay:flex;flex-wrap:wrap;gap:10px 12px\n .chipdisplay:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);border-radius:999px;background:var(--panel)\n\n .griddisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px\n .col-8grid-column:span 8\n .col-4grid-column:span 4\n @media (max-width: 900px)\n .gridgrid-template-columns:1fr\n .col-8,.col-4grid-column:1/-1\n \n\n /* ===== CARDS ===== */\n .cardbackground:var(--panel);border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);border-radius:var(--card-radius);padding:20px;box-shadow:var(--shadow)\n .card h3margin-top:0\n\n /* ===== SECTIONS ===== */\n sectionpadding:22px 0\n .section-titledisplay:flex;align-items:center;justify-content:space-between;margin:6px 0 14px\n .section-title h2margin:0;font-size:1.4rem\n .section-title .lineheight:1px;background:color-mix(in oklch, var(--panel) 75%, transparent);flex:1;margin-left:12px\n\n /* ===== LISTS ===== */\n .timelineposition:relative;padding-left:22px\n .timeline::beforecontent:\\;position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:color-mix(in oklch, var(--brand) 30%, var(--panel))\n .itemmargin:0 0 16px\n .item .whenfont-size:.9rem;color:var(--muted)\n .item .wherefont-weight:600\n .item .whatmargin:.25rem 0\n\n .skillsdisplay:flex;flex-wrap:wrap;gap:10px\n .skillpadding:8px 12px;border-radius:999px;border:1px dashed color-mix(in oklch, var(--panel) 70%, transparent)\n\n /* ===== PROJECTS ===== */\n .projectsdisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px\n .projectgrid-column:span 6\n @media (max-width: 800px).projectgrid-column:1/-1\n .project .thumbaspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,color-mix(in oklch,var(--brand) 10%,var(--panel)),color-mix(in oklch,var(--brand-2) 10%,var(--panel)));display:grid;place-items:center;border:1px solid color-mix(in oklch, var(--panel) 70%, transparent)\n .project .metadisplay:flex;align-items:center;justify-content:space-between;margin-top:10px\n\n /* ===== CONTACT ===== */\n formdisplay:grid;gap:12px\n labelfont-weight:600\n input, textareabackground:var(--panel);border:1px solid color-mix(in oklch, var(--panel) 70%, transparent);border-radius:12px;padding:12px 14px;color:var(--text)\n textareamin-height:120px\n .inlinedisplay:flex;gap:10px;align-items:center\n .inline inputflex:1\n\n /* ===== FOOTER ===== */\n footerpadding:28px 0;color:var(--muted)\n\n /* ===== UTIL ===== */\n .sr-onlyposition:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0\n .hiddendisplay:none\n </style>\n</head>\n<body>\n <header>\n <div class=\container nav\>\n <div class=\logo\ aria-label=\John home\>\n <div class=\badge\ aria-hidden=\true\><span>J</span></div>\n <span>John</span>\n </div>\n <nav aria-label=\Primary\>\n <a href=\#about\>About</a>\n <a href=\#experience\>Experience</a>\n <a href=\#projects\>Projects</a>\n <a href=\#contact\>Contact</a>\n </nav>\n <div class=\actions\>\n <button id=\themeToggle\ class=\btn\ type=\button\ aria-label=\Toggle theme\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 3a9 9 0 1 0 9 9 1 1 0 0 1 1-1 1 1 0 0 0 .67-1.74A11 11 0 0 1 13.74 1.33 1 1 0 0 0 12 2a1 1 0 0 1-1 1Z\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Theme\n </button>\n <a class=\btn\ href=\#\ id=\downloadCV\ download>Download CV</a>\n </div>\n </div>\n </header>\n\n <main class=\container\>\n (html comment removed: HERO )\n <section class=\hero\ id=\home\>\n <div class=\hero-card\>\n <h1>John — Software Professional</h1>\n <p>Passionate about building reliable, user‑centric web applications. I focus on performant front‑ends, clean APIs, and thoughtful UX.</p>\n <div class=\meta\>\n <span class=\chip\ title=\Location\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 22s8-6.75 8-12a8 8 0 1 0-16 0c0 5.25 8 12 8 12Z\ stroke=\currentColor\ stroke-width=\1.6\/><circle cx=\12\ cy=\10\ r=\3\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Remote • EU\n </span>\n <span class=\chip\ title=\Email\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z\ stroke=\currentColor\ stroke-width=\1.6\/><path d=\m4 7 8 6 8-6\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n <button type=\button\ id=\copyEmail\ class=\btn\ style=\padding:6px 10px\>[email protected]</button>\n </span>\n <span class=\chip\ title=\Open to opportunities\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 3v18M3 12h18\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Open to work\n </span>\n </div>\n </div>\n </section>\n\n (html comment removed: ABOUT )\n <section id=\about\>\n <div class=\section-title\><h2>About</h2><div class=\line\></div></div>\n <div class=\grid\>\n <article class=\card col-8\>\n <p>Hi, I’m John. I specialize in crafting modern, accessible web experiences. My toolkit includes HTML, CSS, JavaScript/TypeScript, and popular frameworks. I care about DX, maintainability, and measurable impact.</p>\n <ul>\n <li>Strengths: problem‑solving, communicating trade‑offs, mentoring.</li>\n <li>Interests: performance audits, design systems, testing strategy.</li>\n </ul>\n </article>\n <aside class=\card col-4\>\n <h3>Quick Facts</h3>\n <div class=\skills\>\n <span class=\skill\>HTML5</span>\n <span class=\skill\>CSS / Tailwind</span>\n <span class=\skill\>JavaScript / TS</span>\n <span class=\skill\>React / Vue</span>\n <span class=\skill\>Node / Express</span>\n <span class=\skill\>REST / GraphQL</span>\n <span class=\skill\>Playwright / Jest</span>\n <span class=\skill\>Git / CI</span>\n </div>\n </aside>\n </div>\n </section>\n\n (html comment removed: EXPERIENCE )\n <section id=\experience\>\n <div class=\section-title\><h2>Experience</h2><div class=\line\></div></div>\n <div class=\grid\>\n <div class=\card col-8\>\n <div class=\timeline\ id=\experienceList\>\n <div class=\item\>\n <div class=\when\>2023 — Present</div>\n <div class=\where\>Senior Frontend Engineer • Acme Corp</div>\n <p class=\what\>Led migration to a component library, reducing UI defects by 35% and improving build times by 40%.</p>\n </div>\n <div class=\item\>\n <div class=\when\>2020 — 2023</div>\n <div class=\where\>Full‑stack Developer • Nimbus</div>\n <p class=\what\>Shipped analytics dashboards; introduced e2e testing increasing release confidence and cadence.</p>\n </div>\n <div class=\item\>\n <div class=\when\>2018 — 2020</div>\n <div class=\where\>Frontend Developer • Studio XYZ</div>\n <p class=\what\>Built high‑performing marketing sites and internal tools with a11y best practices.</p>\n </div>\n </div>\n </div>\n <aside class=\card col-4\>\n <h3>Core Skills</h3>\n <ul>\n <li>Semantic, accessible UI</li>\n <li>SPA/MPA architecture</li>\n <li>Design systems</li>\n <li>Automated testing</li>\n <li>Performance optimization</li>\n </ul>\n </aside>\n </div>\n </section>\n\n (html comment removed: PROJECTS )\n <section id=\projects\>\n <div class=\section-title\>\n <h2>Projects</h2>\n <div class=\line\></div>\n </div>\n <div class=\inline\ style=\margin-bottom:10px\>\n <input id=\projectSearch\ type=\search\ placeholder=\Filter projects by keyword…\ aria-label=\Filter projects\ />\n <button class=\btn\ type=\button\ id=\clearFilter\>Clear</button>\n </div>\n <div class=\projects\ id=\projectGrid\>\n <article class=\card project\ data-tags=\react charts dashboard\>\n <div class=\thumb\ aria-hidden=\true\>📊</div>\n <div class=\meta\><strong>InsightDash</strong><span class=\muted\>React • Charts</span></div>\n <p>Interactive analytics dashboard with lazy‑loaded modules and client‑side caching.</p>\n <a href=\#\ aria-label=\Open project InsightDash\>View</a>\n </article>\n <article class=\card project\ data-tags=\node api performance\>\n <div class=\thumb\ aria-hidden=\true\>⚙️</div>\n <div class=\meta\><strong>FastAPI Kit</strong><span class=\muted\>Node • REST</span></div>\n <p>Boilerplate for high‑throughput APIs with structured logging and rate limiting.</p>\n <a href=\#\ aria-label=\Open project FastAPI Kit\>View</a>\n </article>\n <article class=\card project\ data-tags=\ui library design-system\>\n <div class=\thumb\ aria-hidden=\true\>🧩</div>\n <div class=\meta\><strong>Feather UI</strong><span class=\muted\>Design System</span></div>\n <p>Composable UI library with a11y primitives and tokens for theming.</p>\n <a href=\#\ aria-label=\Open project Feather UI\>View</a>\n </article>\n <article class=\card project\ data-tags=\testing e2e playwright\>\n <div class=\thumb\ aria-hidden=\true\>🧪</div>\n <div class=\meta\><strong>SpecPilot</strong><span class=\muted\>Testing</span></div>\n <p>E2E testing starter with Playwright + visual regression and PR checks.</p>\n <a href=\#\ aria-label=\Open project SpecPilot\>View</a>\n </article>\n </div>\n </section>\n\n (html comment removed: EDUCATION )\n <section id=\education\>\n <div class=\section-title\><h2>Education</h2><div class=\line\></div></div>\n <div class=\card\>\n <ul class=\timeline\>\n <li class=\item\><div class=\when\>2014 — 2018</div><div class=\where\>B.Sc. Computer Science • Tech University</div><p class=\what\>Graduated with honors. Focus on HCI and distributed systems.</p></li>\n </ul>\n </div>\n </section>\n\n (html comment removed: CONTACT )\n <section id=\contact\>\n <div class=\section-title\><h2>Contact</h2><div class=\line\></div></div>\n <div class=\grid\>\n <div class=\card col-8\>\n <form id=\contactForm\ novalidate>\n <div>\n <label for=\name\>Name</label>\n <input id=\name\ name=\name\ autocomplete=\name\ required placeholder=\Your name\ />\n </div>\n <div>\n <label for=\email\>Email</label>\n <input id=\email\ name=\email\ type=\email\ autocomplete=\email\ required placeholder=\[email protected]\ />\n </div>\n <div>\n <label for=\message\>Message</label>\n <textarea id=\message\ name=\message\ required placeholder=\Say hi!\ ></textarea>\n </div>\n <div class=\inline\>\n <button class=\btn\ type=\submit\>Send</button>\n <span id=\formStatus\ role=\status\ aria-live=\polite\></span>\n </div>\n </form>\n </div>\n <aside class=\card col-4\>\n <h3>Links</h3>\n <ul>\n <li><a href=\#\ rel=\me\>LinkedIn</a></li>\n <li><a href=\#\ rel=\me\>GitHub</a></li>\n <li><a href=\#\ rel=\me\>Twitter</a></li>\n </ul>\n </aside>\n </div>\n </section>\n </main>\n\n <footer class=\container\>\n <small>© <span id=\year\></span> John. Built with HTML, CSS & JS.</small>\n </footer>\n</body>\n</html>\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\ />\n <title>John – CV</title>\n <meta name=\description\ content=\CV website for John – skills, experience, projects, and contact.\ />\n <meta property=\og:title\ content=\John – CV\ />\n <meta property=\og:description\ content=\Skills, experience, projects, and contact.\ />\n <meta name=\theme-color\ content=\#0ea5e9\ />\n <style>\n /* ===== CSS RESET (modern, minimal) ===== */\n *,*::before,*::afterbox-sizing:border-box\n html,bodyheight:100%\n bodymargin:0;line-height:1.6;-webkit-font-smoothing:antialiased\n img,svg,videodisplay:block;max-width:100%\n input,button,textarea,selectfont:inherit\n\n /* ===== THEME & TOKENS ===== */\n :root\n --bg: #0b1020;\n --panel: #11162a;\n --muted: #a9b1c7;\n --text: #e6e9f4;\n --brand: #0ea5e9;\n --brand-2: #22d3ee;\n --ring: #38bdf8;\n --ok: #10b981;\n --warn: #f59e0b;\n --err: #ef4444;\n --card-radius: 18px;\n --shadow: 0 10px 30px rgba(0,0,0,.25);\n \n .light\n --bg:#f7f8fc; --panel:#ffffff; --muted:#5b6375; --text:#0e1220;\n --brand:#0ea5e9; --brand-2:#06b6d4; --ring:#0284c7;\n --ok:#059669; --warn:#b45309; --err:#b91c1c;\n --shadow:0 10px 30px rgba(2,6,23,.08);\n \n\n body\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, \Apple Color Emoji\,\Segoe UI Emoji\;\n background: radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.12), transparent 60%),\n radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.12), transparent 60%),\n var(--bg);\n color: var(--text);\n \n acolor:var(--brand);text-decoration:none\n a:hovertext-decoration:underline\n\n .containerwidth:min(1100px, 92vw);margin-inline:auto\n\n /* ===== NAVBAR ===== */\n header\n position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(8px);\n background: color-mix(in oklch, var(--bg) 80%, transparent);\n border-bottom:1px solid color-mix(in oklch, var(--panel) 70%, transparent);\n \n .navdisplay:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0\n .logodisplay:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px\n .logo .badgedisplay:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)\n .logo .badge spanfont-weight:900;color:white\n nav apadding:8px 12px;border-radius:12px\n nav a:hoverbackground:color-mix(in oklch, var(--panel) 84%, transparent)\n .actionsdisplay:flex;align-items:center;gap:8px\n .btndisplay:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);background:var(--panel);box-shadow:var(--shadow);cursor:pointer\n .btn:hovertransform:translateY(-1px)\n\n /* ===== HERO ===== */\n .herodisplay:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding:42px 0 26px\n .hero-carddisplay:grid;gap:18px;background:linear-gradient(180deg,color-mix(in oklch, var(--panel) 92%, transparent),color-mix(in oklch, var(--panel) 98%, transparent));padding:26px;border-radius:var(--card-radius);box-shadow:var(--shadow)\n .hero h1font-size:clamp(28px, 2.2rem, 48px);line-height:1.15;margin:0\n .hero pmargin:0;color:var(--muted)\n .hero .metadisplay:flex;flex-wrap:wrap;gap:10px 12px\n .chipdisplay:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);border-radius:999px;background:var(--panel)\n\n .griddisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px\n .col-8grid-column:span 8\n .col-4grid-column:span 4\n @media (max-width: 900px)\n .gridgrid-template-columns:1fr\n .col-8,.col-4grid-column:1/-1\n \n\n /* ===== CARDS ===== */\n .cardbackground:var(--panel);border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);border-radius:var(--card-radius);padding:20px;box-shadow:var(--shadow)\n .card h3margin-top:0\n\n /* ===== SECTIONS ===== */\n sectionpadding:22px 0\n .section-titledisplay:flex;align-items:center;justify-content:space-between;margin:6px 0 14px\n .section-title h2margin:0;font-size:1.4rem\n .section-title .lineheight:1px;background:color-mix(in oklch, var(--panel) 75%, transparent);flex:1;margin-left:12px\n\n /* ===== LISTS ===== */\n .timelineposition:relative;padding-left:22px\n .timeline::beforecontent:\\;position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:color-mix(in oklch, var(--brand) 30%, var(--panel))\n .itemmargin:0 0 16px\n .item .whenfont-size:.9rem;color:var(--muted)\n .item .wherefont-weight:600\n .item .whatmargin:.25rem 0\n\n .skillsdisplay:flex;flex-wrap:wrap;gap:10px\n .skillpadding:8px 12px;border-radius:999px;border:1px dashed color-mix(in oklch, var(--panel) 70%, transparent)\n\n /* ===== PROJECTS ===== */\n .projectsdisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px\n .projectgrid-column:span 6\n @media (max-width: 800px).projectgrid-column:1/-1\n .project .thumbaspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,color-mix(in oklch,var(--brand) 10%,var(--panel)),color-mix(in oklch,var(--brand-2) 10%,var(--panel)));display:grid;place-items:center;border:1px solid color-mix(in oklch, var(--panel) 70%, transparent)\n .project .metadisplay:flex;align-items:center;justify-content:space-between;margin-top:10px\n\n /* ===== CONTACT ===== */\n formdisplay:grid;gap:12px\n labelfont-weight:600\n input, textareabackground:var(--panel);border:1px solid color-mix(in oklch, var(--panel) 70%, transparent);border-radius:12px;padding:12px 14px;color:var(--text)\n textareamin-height:120px\n .inlinedisplay:flex;gap:10px;align-items:center\n .inline inputflex:1\n\n /* ===== FOOTER ===== */\n footerpadding:28px 0;color:var(--muted)\n\n /* ===== UTIL ===== */\n .sr-onlyposition:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0\n .hiddendisplay:none\n </style>\n</head>\n<body>\n <header>\n <div class=\container nav\>\n <div class=\logo\ aria-label=\John home\>\n <div class=\badge\ aria-hidden=\true\><span>J</span></div>\n <span>John</span>\n </div>\n <nav aria-label=\Primary\>\n <a href=\#about\>About</a>\n <a href=\#experience\>Experience</a>\n <a href=\#projects\>Projects</a>\n <a href=\#contact\>Contact</a>\n </nav>\n <div class=\actions\>\n <button id=\themeToggle\ class=\btn\ type=\button\ aria-label=\Toggle theme\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 3a9 9 0 1 0 9 9 1 1 0 0 1 1-1 1 1 0 0 0 .67-1.74A11 11 0 0 1 13.74 1.33 1 1 0 0 0 12 2a1 1 0 0 1-1 1Z\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Theme\n </button>\n <a class=\btn\ href=\#\ id=\downloadCV\ download>Download CV</a>\n </div>\n </div>\n </header>\n\n <main class=\container\>\n (html comment removed: HERO )\n <section class=\hero\ id=\home\>\n <div class=\hero-card\>\n <h1>John — Software Professional</h1>\n <p>Passionate about building reliable, user‑centric web applications. I focus on performant front‑ends, clean APIs, and thoughtful UX.</p>\n <div class=\meta\>\n <span class=\chip\ title=\Location\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 22s8-6.75 8-12a8 8 0 1 0-16 0c0 5.25 8 12 8 12Z\ stroke=\currentColor\ stroke-width=\1.6\/><circle cx=\12\ cy=\10\ r=\3\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Remote • EU\n </span>\n <span class=\chip\ title=\Email\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z\ stroke=\currentColor\ stroke-width=\1.6\/><path d=\m4 7 8 6 8-6\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n <button type=\button\ id=\copyEmail\ class=\btn\ style=\padding:6px 10px\>[email protected]</button>\n </span>\n <span class=\chip\ title=\Open to opportunities\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 3v18M3 12h18\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Open to work\n </span>\n </div>\n </div>\n </section>\n\n (html comment removed: ABOUT )\n <section id=\about\>\n <div class=\section-title\><h2>About</h2><div class=\line\></div></div>\n <div class=\grid\>\n <article class=\card col-8\>\n <p>Hi, I’m John. I specialize in crafting modern, accessible web experiences. My toolkit includes HTML, CSS, JavaScript/TypeScript, and popular frameworks. I care about DX, maintainability, and measurable impact.</p>\n <ul>\n <li>Strengths: problem‑solving, communicating trade‑offs, mentoring.</li>\n <li>Interests: performance audits, design systems, testing strategy.</li>\n </ul>\n </article>\n <aside class=\card col-4\>\n <h3>Quick Facts</h3>\n <div class=\skills\>\n <span class=\skill\>HTML5</span>\n <span class=\skill\>CSS / Tailwind</span>\n <span class=\skill\>JavaScript / TS</span>\n <span class=\skill\>React / Vue</span>\n <span class=\skill\>Node / Express</span>\n <span class=\skill\>REST / GraphQL</span>\n <span class=\skill\>Playwright / Jest</span>\n <span class=\skill\>Git / CI</span>\n </div>\n </aside>\n </div>\n </section>\n\n (html comment removed: EXPERIENCE )\n <section id=\experience\>\n <div class=\section-title\><h2>Experience</h2><div class=\line\></div></div>\n <div class=\grid\>\n <div class=\card col-8\>\n <div class=\timeline\ id=\experienceList\>\n <div class=\item\>\n <div class=\when\>2023 — Present</div>\n <div class=\where\>Senior Frontend Engineer • Acme Corp</div>\n <p class=\what\>Led migration to a component library, reducing UI defects by 35% and improving build times by 40%.</p>\n </div>\n <div class=\item\>\n <div class=\when\>2020 — 2023</div>\n <div class=\where\>Full‑stack Developer • Nimbus</div>\n <p class=\what\>Shipped analytics dashboards; introduced e2e testing increasing release confidence and cadence.</p>\n </div>\n <div class=\item\>\n <div class=\when\>2018 — 2020</div>\n <div class=\where\>Frontend Developer • Studio XYZ</div>\n <p class=\what\>Built high‑performing marketing sites and internal tools with a11y best practices.</p>\n </div>\n </div>\n </div>\n <aside class=\card col-4\>\n <h3>Core Skills</h3>\n <ul>\n <li>Semantic, accessible UI</li>\n <li>SPA/MPA architecture</li>\n <li>Design systems</li>\n <li>Automated testing</li>\n <li>Performance optimization</li>\n </ul>\n </aside>\n </div>\n </section>\n\n (html comment removed: PROJECTS )\n <section id=\projects\>\n <div class=\section-title\>\n <h2>Projects</h2>\n <div class=\line\></div>\n </div>\n <div class=\inline\ style=\margin-bottom:10px\>\n <input id=\projectSearch\ type=\search\ placeholder=\Filter projects by keyword…\ aria-label=\Filter projects\ />\n <button class=\btn\ type=\button\ id=\clearFilter\>Clear</button>\n </div>\n <div class=\projects\ id=\projectGrid\>\n <article class=\card project\ data-tags=\react charts dashboard\>\n <div class=\thumb\ aria-hidden=\true\>📊</div>\n <div class=\meta\><strong>InsightDash</strong><span class=\muted\>React • Charts</span></div>\n <p>Interactive analytics dashboard with lazy‑loaded modules and client‑side caching.</p>\n <a href=\#\ aria-label=\Open project InsightDash\>View</a>\n </article>\n <article class=\card project\ data-tags=\node api performance\>\n <div class=\thumb\ aria-hidden=\true\>⚙️</div>\n <div class=\meta\><strong>FastAPI Kit</strong><span class=\muted\>Node • REST</span></div>\n <p>Boilerplate for high‑throughput APIs with structured logging and rate limiting.</p>\n <a href=\#\ aria-label=\Open project FastAPI Kit\>View</a>\n </article>\n <article class=\card project\ data-tags=\ui library design-system\>\n <div class=\thumb\ aria-hidden=\true\>🧩</div>\n <div class=\meta\><strong>Feather UI</strong><span class=\muted\>Design System</span></div>\n <p>Composable UI library with a11y primitives and tokens for theming.</p>\n <a href=\#\ aria-label=\Open project Feather UI\>View</a>\n </article>\n <article class=\card project\ data-tags=\testing e2e playwright\>\n <div class=\thumb\ aria-hidden=\true\>🧪</div>\n <div class=\meta\><strong>SpecPilot</strong><span class=\muted\>Testing</span></div>\n <p>E2E testing starter with Playwright + visual regression and PR checks.</p>\n <a href=\#\ aria-label=\Open project SpecPilot\>View</a>\n </article>\n </div>\n </section>\n\n (html comment removed: EDUCATION )\n <section id=\education\>\n <div class=\section-title\><h2>Education</h2><div class=\line\></div></div>\n <div class=\card\>\n <ul class=\timeline\>\n <li class=\item\><div class=\when\>2014 — 2018</div><div class=\where\>B.Sc. Computer Science • Tech University</div><p class=\what\>Graduated with honors. Focus on HCI and distributed systems.</p></li>\n </ul>\n </div>\n </section>\n\n (html comment removed: CONTACT )\n <section id=\contact\>\n <div class=\section-title\><h2>Contact</h2><div class=\line\></div></div>\n <div class=\grid\>\n <div class=\card col-8\>\n <form id=\contactForm\ novalidate>\n <div>\n <label for=\name\>Name</label>\n <input id=\name\ name=\name\ autocomplete=\name\ required placeholder=\Your name\ />\n </div>\n <div>\n <label for=\email\>Email</label>\n <input id=\email\ name=\email\ type=\email\ autocomplete=\email\ required placeholder=\[email protected]\ />\n </div>\n <div>\n <label for=\message\>Message</label>\n <textarea id=\message\ name=\message\ required placeholder=\Say hi!\ ></textarea>\n </div>\n <div class=\inline\>\n <button class=\btn\ type=\submit\>Send</button>\n <span id=\formStatus\ role=\status\ aria-live=\polite\></span>\n </div>\n </form>\n </div>\n <aside class=\card col-4\>\n <h3>Links</h3>\n <ul>\n <li><a href=\#\ rel=\me\>LinkedIn</a></li>\n <li><a href=\#\ rel=\me\>GitHub</a></li>\n <li><a href=\#\ rel=\me\>Twitter</a></li>\n </ul>\n </aside>\n </div>\n </section>\n </main>\n\n <footer class=\container\>\n <small>© <span id=\year\></span> John. Built with HTML, CSS & JS.</small>\n </footer>\n\n <script>\n // ===== Theme Toggle =====\n (function()\n const KEY = 'prefers-light';\n const btn = document.getElementById('themeToggle');\n const set = (on)=> document.documentElement.classList.toggle('light', !!on); \n set(localStorage.getItem(KEY)==='1');\n btn.addEventListener('click', ()=>\n const to = !document.documentElement.classList.contains('light');\n set(to); localStorage.setItem(KEY, to ? '1':'0');\n );\n )();\n\n // ===== Smooth Scroll for same-page links =====\n document.querySelectorAll('a[href^=\#\]').forEach(a=>\n a.addEventListener('click', e=>\n const id = a.getAttribute('href').slice(1);\n const el = document.getElementById(id);\n if(el) e.preventDefault(); el.scrollIntoView(behavior:'smooth', block:'start'); \n )\n )\n\n // ===== Projects Filter =====\n const search = document.getElementById('projectSearch');\n const clearBtn = document.getElementById('clearFilter');\n const grid = document.getElementById('projectGrid');\n function applyFilter()\n const q = search.value.trim().toLowerCase();\n [...grid.children].forEach(card=>\n const tags = (card.getAttribute('data-tags')||'').toLowerCase();\n const text = card.textContent.toLowerCase();\n const match = !q || tags.includes(q) || text.includes(q);\n card.classList.toggle('hidden', !match);\n );\n \n search.addEventListener('input', applyFilter);\n clearBtn.addEventListener('click', ()=> search.value=''; applyFilter(); search.focus(); );\n\n // ===== Copy email =====\n const copyBtn = document.getElementById('copyEmail');\n copyBtn.addEventListener('click', async ()=>\n try\n await navigator.clipboard.writeText('[email protected]');\n copyBtn.textContent = 'Copied!';\n setTimeout(()=> copyBtn.textContent = '[email protected]', 1500);\n catch(e)\n alert('Copy failed');\n \n );\n\n // ===== Download CV (auto-generate simple text file) =====\n const dl = document.getElementById('downloadCV');\n dl.addEventListener('click', (e)=>\n const txt = `John\\nSoftware Professional\\n\\nSkills: HTML, CSS, JS, React, Node\\nExperience: Acme (2023–), Nimbus (2020–2023), Studio XYZ (2018–2020)`;\n const blob = new Blob([txt], type:'text/plain');\n const url = URL.createObjectURL(blob);\n dl.href = url; dl.download = 'John-CV.txt';\n setTimeout(()=>URL.revokeObjectURL(url), 30000);\n );\n\n // ===== Contact Form (client-side demo) =====\n document.getElementById('contactForm').addEventListener('submit', (e)=>\n e.preventDefault();\n const form = e.currentTarget;\n const status = document.getElementById('formStatus');\n if(!form.checkValidity())\n status.textContent = 'Please fill all fields correctly.'; status.style.color = 'var(--warn)'; return;\n \n // Simulate async submit\n status.textContent = 'Sending…';\n setTimeout(()=>\n status.textContent = 'Thanks! Your message has been sent (demo).';\n status.style.color = 'var(--ok)';\n form.reset();\n , 800);\n );\n\n // ===== Year =====\n document.getElementById('year').textContent = new Date().getFullYear();\n </script>\n</body>\n</html>\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\ />\n <title>John – CV</title>\n <meta name=\description\ content=\CV website for John – skills, experience, projects, and contact.\ />\n <meta property=\og:title\ content=\John – CV\ />\n <meta property=\og:description\ content=\Skills, experience, projects, and contact.\ />\n <meta name=\theme-color\ content=\#0ea5e9\ />\n <style>\n /* ===== CSS RESET (modern, minimal) ===== */\n *,*::before,*::afterbox-sizing:border-box\n html,bodyheight:100%\n bodymargin:0;line-height:1.6;-webkit-font-smoothing:antialiased\n img,svg,videodisplay:block;max-width:100%\n input,button,textarea,selectfont:inherit\n\n /* ===== THEME & TOKENS ===== */\n :root\n --bg: #0b1020;\n --panel: #11162a;\n --muted: #a9b1c7;\n --text: #e6e9f4;\n --brand: #0ea5e9;\n --brand-2: #22d3ee;\n --ring: #38bdf8;\n --ok: #10b981;\n --warn: #f59e0b;\n --err: #ef4444;\n --card-radius: 18px;\n --shadow: 0 10px 30px rgba(0,0,0,.25);\n \n .light\n --bg:#f7f8fc; --panel:#ffffff; --muted:#5b6375; --text:#0e1220;\n --brand:#0ea5e9; --brand-2:#06b6d4; --ring:#0284c7;\n --ok:#059669; --warn:#b45309; --err:#b91c1c;\n --shadow:0 10px 30px rgba(2,6,23,.08);\n \n\n body\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, \Apple Color Emoji\,\Segoe UI Emoji\;\n background: radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.12), transparent 60%),\n radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.12), transparent 60%),\n var(--bg);\n color: var(--text);\n \n acolor:var(--brand);text-decoration:none\n a:hovertext-decoration:underline\n\n .containerwidth:min(1100px, 92vw);margin-inline:auto\n\n /* ===== NAVBAR ===== */\n header\n position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(8px);\n background: color-mix(in oklch, var(--bg) 80%, transparent);\n border-bottom:1px solid color-mix(in oklch, var(--panel) 70%, transparent);\n \n .navdisplay:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0\n .logodisplay:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px\n .logo .badgedisplay:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)\n .logo .badge spanfont-weight:900;color:white\n nav apadding:8px 12px;border-radius:12px\n nav a:hoverbackground:color-mix(in oklch, var(--panel) 84%, transparent)\n .actionsdisplay:flex;align-items:center;gap:8px\n .btndisplay:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);background:var(--panel);box-shadow:var(--shadow);cursor:pointer\n .btn:hovertransform:translateY(-1px)\n\n /* ===== HERO ===== */\n .herodisplay:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding:42px 0 26px\n .hero-carddisplay:grid;gap:18px;background:linear-gradient(180deg,color-mix(in oklch, var(--panel) 92%, transparent),color-mix(in oklch, var(--panel) 98%, transparent));padding:26px;border-radius:var(--card-radius);box-shadow:var(--shadow)\n .hero h1font-size:clamp(28px, 2.2rem, 48px);line-height:1.15;margin:0\n .hero pmargin:0;color:var(--muted)\n .hero .metadisplay:flex;flex-wrap:wrap;gap:10px 12px\n .chipdisplay:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);border-radius:999px;background:var(--panel)\n\n .griddisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px\n .col-8grid-column:span 8\n .col-4grid-column:span 4\n @media (max-width: 900px)\n .gridgrid-template-columns:1fr\n .col-8,.col-4grid-column:1/-1\n \n\n /* ===== CARDS ===== */\n .cardbackground:var(--panel);border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);border-radius:var(--card-radius);padding:20px;box-shadow:var(--shadow)\n .card h3margin-top:0\n\n /* ===== SECTIONS ===== */\n sectionpadding:22px 0\n .section-titledisplay:flex;align-items:center;justify-content:space-between;margin:6px 0 14px\n .section-title h2margin:0;font-size:1.4rem\n .section-title .lineheight:1px;background:color-mix(in oklch, var(--panel) 75%, transparent);flex:1;margin-left:12px\n\n /* ===== LISTS ===== */\n .timelineposition:relative;padding-left:22px\n .timeline::beforecontent:\\;position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:color-mix(in oklch, var(--brand) 30%, var(--panel))\n .itemmargin:0 0 16px\n .item .whenfont-size:.9rem;color:var(--muted)\n .item .wherefont-weight:600\n .item .whatmargin:.25rem 0\n\n .skillsdisplay:flex;flex-wrap:wrap;gap:10px\n .skillpadding:8px 12px;border-radius:999px;border:1px dashed color-mix(in oklch, var(--panel) 70%, transparent)\n\n /* ===== PROJECTS ===== */\n .projectsdisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px\n .projectgrid-column:span 6\n @media (max-width: 800px).projectgrid-column:1/-1\n .project .thumbaspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,color-mix(in oklch,var(--brand) 10%,var(--panel)),color-mix(in oklch,var(--brand-2) 10%,var(--panel)));display:grid;place-items:center;border:1px solid color-mix(in oklch, var(--panel) 70%, transparent)\n .project .metadisplay:flex;align-items:center;justify-content:space-between;margin-top:10px\n\n /* ===== CONTACT ===== */\n formdisplay:grid;gap:12px\n labelfont-weight:600\n input, textareabackground:var(--panel);border:1px solid color-mix(in oklch, var(--panel) 70%, transparent);border-radius:12px;padding:12px 14px;color:var(--text)\n textareamin-height:120px\n .inlinedisplay:flex;gap:10px;align-items:center\n .inline inputflex:1\n\n /* ===== FOOTER ===== */\n footerpadding:28px 0;color:var(--muted)\n\n /* ===== UTIL ===== */\n .sr-onlyposition:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0\n .hiddendisplay:none\n </style>\n</head>\n<body>\n <header>\n <div class=\container nav\>\n <div class=\logo\ aria-label=\John home\>\n <div class=\badge\ aria-hidden=\true\><span>J</span></div>\n <span>John</span>\n </div>\n <nav aria-label=\Primary\>\n <a href=\#about\>About</a>\n <a href=\#experience\>Experience</a>\n <a href=\#projects\>Projects</a>\n <a href=\#contact\>Contact</a>\n </nav>\n <div class=\actions\>\n <button id=\themeToggle\ class=\btn\ type=\button\ aria-label=\Toggle theme\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 3a9 9 0 1 0 9 9 1 1 0 0 1 1-1 1 1 0 0 0 .67-1.74A11 11 0 0 1 13.74 1.33 1 1 0 0 0 12 2a1 1 0 0 1-1 1Z\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Theme\n </button>\n <a class=\btn\ href=\#\ id=\downloadCV\ download>Download CV</a>\n </div>\n </div>\n </header>\n\n <main class=\container\>\n (html comment removed: HERO )\n <section class=\hero\ id=\home\>\n <div class=\hero-card\>\n <h1>John — Software Professional</h1>\n <p>Passionate about building reliable, user‑centric web applications. I focus on performant front‑ends, clean APIs, and thoughtful UX.</p>\n <div class=\meta\>\n <span class=\chip\ title=\Location\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 22s8-6.75 8-12a8 8 0 1 0-16 0c0 5.25 8 12 8 12Z\ stroke=\currentColor\ stroke-width=\1.6\/><circle cx=\12\ cy=\10\ r=\3\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Remote • EU\n </span>\n <span class=\chip\ title=\Email\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z\ stroke=\currentColor\ stroke-width=\1.6\/><path d=\m4 7 8 6 8-6\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n <button type=\button\ id=\copyEmail\ class=\btn\ style=\padding:6px 10px\>[email protected]</button>\n </span>\n <span class=\chip\ title=\Open to opportunities\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 3v18M3 12h18\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Open to work\n </span>\n </div>\n </div>\n </section>\n\n (html comment removed: ABOUT )\n <section id=\about\>\n <div class=\section-title\><h2>About</h2><div class=\line\></div></div>\n <div class=\grid\>\n <article class=\card col-8\>\n <p>Hi, I’m John. I specialize in crafting modern, accessible web experiences. My toolkit includes HTML, CSS, JavaScript/TypeScript, and popular frameworks. I care about DX, maintainability, and measurable impact.</p>\n <ul>\n <li>Strengths: problem‑solving, communicating trade‑offs, mentoring.</li>\n <li>Interests: performance audits, design systems, testing strategy.</li>\n </ul>\n </article>\n <aside class=\card col-4\>\n <h3>Quick Facts</h3>\n <div class=\skills\>\n <span class=\skill\>HTML5</span>\n <span class=\skill\>CSS / Tailwind</span>\n <span class=\skill\>JavaScript / TS</span>\n <span class=\skill\>React / Vue</span>\n <span class=\skill\>Node / Express</span>\n <span class=\skill\>REST / GraphQL</span>\n <span class=\skill\>Playwright / Jest</span>\n <span class=\skill\>Git / CI</span>\n </div>\n </aside>\n </div>\n </section>\n\n (html comment removed: EXPERIENCE )\n <section id=\experience\>\n <div class=\section-title\><h2>Experience</h2><div class=\line\></div></div>\n <div class=\grid\>\n <div class=\card col-8\>\n <div class=\timeline\ id=\experienceList\>\n <div class=\item\>\n <div class=\when\>2023 — Present</div>\n <div class=\where\>Senior Frontend Engineer • Acme Corp</div>\n <p class=\what\>Led migration to a component library, reducing UI defects by 35% and improving build times by 40%.</p>\n </div>\n <div class=\item\>\n <div class=\when\>2020 — 2023</div>\n <div class=\where\>Full‑stack Developer • Nimbus</div>\n <p class=\what\>Shipped analytics dashboards; introduced e2e testing increasing release confidence and cadence.</p>\n </div>\n <div class=\item\>\n <div class=\when\>2018 — 2020</div>\n <div class=\where\>Frontend Developer • Studio XYZ</div>\n <p class=\what\>Built high‑performing marketing sites and internal tools with a11y best practices.</p>\n </div>\n </div>\n </div>\n <aside class=\card col-4\>\n <h3>Core Skills</h3>\n <ul>\n <li>Semantic, accessible UI</li>\n <li>SPA/MPA architecture</li>\n <li>Design systems</li>\n <li>Automated testing</li>\n <li>Performance optimization</li>\n </ul>\n </aside>\n </div>\n </section>\n\n (html comment removed: PROJECTS )\n <section id=\projects\>\n <div class=\section-title\>\n <h2>Projects</h2>\n <div class=\line\></div>\n </div>\n <div class=\inline\ style=\margin-bottom:10px\>\n <input id=\projectSearch\ type=\search\ placeholder=\Filter projects by keyword…\ aria-label=\Filter projects\ />\n <button class=\btn\ type=\button\ id=\clearFilter\>Clear</button>\n </div>\n <div class=\projects\ id=\projectGrid\>\n <article class=\card project\ data-tags=\react charts dashboard\>\n <div class=\thumb\ aria-hidden=\true\>📊</div>\n <div class=\meta\><strong>InsightDash</strong><span class=\muted\>React • Charts</span></div>\n <p>Interactive analytics dashboard with lazy‑loaded modules and client‑side caching.</p>\n <a href=\#\ aria-label=\Open project InsightDash\>View</a>\n </article>\n <article class=\card project\ data-tags=\node api performance\>\n <div class=\thumb\ aria-hidden=\true\>⚙️</div>\n <div class=\meta\><strong>FastAPI Kit</strong><span class=\muted\>Node • REST</span></div>\n <p>Boilerplate for high‑throughput APIs with structured logging and rate limiting.</p>\n <a href=\#\ aria-label=\Open project FastAPI Kit\>View</a>\n </article>\n <article class=\card project\ data-tags=\ui library design-system\>\n <div class=\thumb\ aria-hidden=\true\>🧩</div>\n <div class=\meta\><strong>Feather UI</strong><span class=\muted\>Design System</span></div>\n <p>Composable UI library with a11y primitives and tokens for theming.</p>\n <a href=\#\ aria-label=\Open project Feather UI\>View</a>\n </article>\n <article class=\card project\ data-tags=\testing e2e playwright\>\n <div class=\thumb\ aria-hidden=\true\>🧪</div>\n <div class=\meta\><strong>SpecPilot</strong><span class=\muted\>Testing</span></div>\n <p>E2E testing starter with Playwright + visual regression and PR checks.</p>\n <a href=\#\ aria-label=\Open project SpecPilot\>View</a>\n </article>\n </div>\n </section>\n\n (html comment removed: EDUCATION )\n <section id=\education\>\n <div class=\section-title\><h2>Education</h2><div class=\line\></div></div>\n <div class=\card\>\n <ul class=\timeline\>\n <li class=\item\><div class=\when\>2014 — 2018</div><div class=\where\>B.Sc. Computer Science • Tech University</div><p class=\what\>Graduated with honors. Focus on HCI and distributed systems.</p></li>\n </ul>\n </div>\n </section>\n\n (html comment removed: CONTACT )\n <section id=\contact\>\n <div class=\section-title\><h2>Contact</h2><div class=\line\></div></div>\n <div class=\grid\>\n <div class=\card col-8\>\n <form id=\contactForm\ novalidate>\n <div>\n <label for=\name\>Name</label>\n <input id=\name\ name=\name\ autocomplete=\name\ required placeholder=\Your name\ />\n </div>\n <div>\n <label for=\email\>Email</label>\n <input id=\email\ name=\email\ type=\email\ autocomplete=\email\ required placeholder=\[email protected]\ />\n </div>\n <div>\n <label for=\message\>Message</label>\n <textarea id=\message\ name=\message\ required placeholder=\Say hi!\ ></textarea>\n </div>\n <div class=\inline\>\n <button class=\btn\ type=\submit\>Send</button>\n <span id=\formStatus\ role=\status\ aria-live=\polite\></span>\n </div>\n </form>\n </div>\n <aside class=\card col-4\>\n <h3>Links</h3>\n <ul>\n <li><a href=\#\ rel=\me\>LinkedIn</a></li>\n <li><a href=\#\ rel=\me\>GitHub</a></li>\n <li><a href=\#\ rel=\me\>Twitter</a></li>\n </ul>\n </aside>\n </div>\n </section>\n </main>\n\n <footer class=\container\>\n <small>© <span id=\year\></span> John. Built with HTML, CSS & JS.</small>\n </footer>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:trueWaivio object "test html 09101310" has been created
wiv01 added name(en-US):
test html 09101310
@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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\#home\>Home</a></li>\n <li><a href=\#about\>About</a></li>\n <li><a href=\#services\>Services</a></li>\n <li><a href=\#team\>Team</a></li>\n <li><a href=\#testimonials\>Testimonials</a></li>\n <li><a href=\#contact\>Contact</a></li>\n <li><a href=\#book\>Book</a></li>\n </ul>\n </nav>\n <a class=\btn\ href=\#book\ aria-label=\Book an appointment\>Book Now</a>\n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\#book\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\#services\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\#book\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact )\n <section id=\contact\ class=\section\>\n <div class=\container\>\n <h2>Contact Us</h2>\n <div class=\grid\ style=\grid-template-columns:1.1fr .9fr; align-items:start;\>\n <form action=\#\ method=\post\ aria-label=\Contact form\>\n <div class=\form-grid\>\n <input type=\text\ name=\name\ placeholder=\Your Name\ required aria-label=\Your Name\ />\n <input type=\tel\ name=\phone\ placeholder=\Phone\ required aria-label=\Phone\ />\n <input class=\wide\ type=\email\ name=\email\ placeholder=\Email\ aria-label=\Email\ />\n <textarea class=\wide\ name=\message\ placeholder=\How can we help?\ required aria-label=\Message\></textarea>\n </div>\n <button class=\btn\ type=\submit\>Send Message</button>\n </form>\n <aside>\n <div class=\card\ style=\margin-bottom:16px\>\n <h3 style=\margin-top:0\>Clinic Details</h3>\n <p class=\subtle\>Address</p>\n <p>123 Rustaveli Ave, Tbilisi</p>\n <p class=\subtle\>Phone</p>\n <p><a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n <p class=\subtle\>Email</p>\n <p><a href=\mailto:[email protected]\ style=\color:var(--dark); text-decoration:none\>[email protected]</a></p>\n </div>\n <div class=\card\>\n <h3 style=\margin-top:0\>Find Us</h3>\n <div style=\overflow:hidden; border-radius:12px; border:1px solid #e6f4ee\>\n <iframe title=\Google Map\ src=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\ width=\100%\ height=\220\ style=\border:0\ loading=\lazy\></iframe>\n </div>\n </div>\n </aside>\n </div>\n </div>\n </section>\n\n (html comment removed: Book Appointment )\n <section id=\book\ class=\section about\>\n <div class=\container\>\n <h2>Book an Appointment</h2>\n <form action=\#\ method=\post\ aria-label=\Appointment form\ class=\card\ style=\padding:20px;\>\n <div class=\form-grid\>\n <input type=\text\ name=\fullname\ placeholder=\Full Name\ required aria-label=\Full Name\ />\n <input type=\tel\ name=\phone\ placeholder=\Phone\ required aria-label=\Phone\ />\n <input type=\email\ name=\email\ placeholder=\Email\ aria-label=\Email\ />\n <select name=\service\ required aria-label=\Service\>\n <option value=\\ disabled selected>Select a service</option>\n <option>Routine Check‑up</option>\n <option>Vaccinations</option>\n <option>Diagnostics</option>\n <option>Surgery</option>\n <option>Grooming</option>\n <option>Emergency</option>\n </select>\n <input type=\date\ name=\date\ required aria-label=\Preferred Date\ />\n <input type=\time\ name=\time\ aria-label=\Preferred Time\ />\n <textarea class=\wide\ name=\notes\ placeholder=\Tell us about your pet (name, age, breed) and the reason for visit\ aria-label=\Notes\></textarea>\n </div>\n <button class=\btn\ type=\submit\>Request Booking</button>\n </form>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\#home\>Home</a></li>\n <li><a href=\#about\>About</a></li>\n <li><a href=\#services\>Services</a></li>\n <li><a href=\#team\>Team</a></li>\n <li><a href=\#testimonials\>Testimonials</a></li>\n <li><a href=\#contact\>Contact</a></li>\n <li><a href=\#book\>Book</a></li>\n </ul>\n </nav>\n <a class=\btn\ href=\#book\ aria-label=\Book an appointment\>Book Now</a>\n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\#book\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\#services\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\#book\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact )\n <section id=\contact\ class=\section\>\n <div class=\container\>\n <h2>Contact Us</h2>\n <div class=\grid\ style=\grid-template-columns:1.1fr .9fr; align-items:start;\>\n <form action=\#\ method=\post\ aria-label=\Contact form\>\n <div class=\form-grid\>\n <input type=\text\ name=\name\ placeholder=\Your Name\ required aria-label=\Your Name\ />\n <input type=\tel\ name=\phone\ placeholder=\Phone\ required aria-label=\Phone\ />\n <input class=\wide\ type=\email\ name=\email\ placeholder=\Email\ aria-label=\Email\ />\n <textarea class=\wide\ name=\message\ placeholder=\How can we help?\ required aria-label=\Message\></textarea>\n </div>\n <button class=\btn\ type=\submit\>Send Message</button>\n </form>\n <aside>\n <div class=\card\ style=\margin-bottom:16px\>\n <h3 style=\margin-top:0\>Clinic Details</h3>\n <p class=\subtle\>Address</p>\n <p>123 Rustaveli Ave, Tbilisi</p>\n <p class=\subtle\>Phone</p>\n <p><a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n <p class=\subtle\>Email</p>\n <p><a href=\mailto:[email protected]\ style=\color:var(--dark); text-decoration:none\>[email protected]</a></p>\n </div>\n <div class=\card\>\n <h3 style=\margin-top:0\>Find Us</h3>\n <div style=\overflow:hidden; border-radius:12px; border:1px solid #e6f4ee\>\n <iframe title=\Google Map\ src=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\ width=\100%\ height=\220\ style=\border:0\ loading=\lazy\></iframe>\n </div>\n </div>\n </aside>\n </div>\n </div>\n </section>\n\n (html comment removed: Book Appointment )\n <section id=\book\ class=\section about\>\n <div class=\container\>\n <h2>Book an Appointment</h2>\n <form action=\#\ method=\post\ aria-label=\Appointment form\ class=\card\ style=\padding:20px;\>\n <div class=\form-grid\>\n <input type=\text\ name=\fullname\ placeholder=\Full Name\ required aria-label=\Full Name\ />\n <input type=\tel\ name=\phone\ placeholder=\Phone\ required aria-label=\Phone\ />\n <input type=\email\ name=\email\ placeholder=\Email\ aria-label=\Email\ />\n <select name=\service\ required aria-label=\Service\>\n <option value=\\ disabled selected>Select a service</option>\n <option>Routine Check‑up</option>\n <option>Vaccinations</option>\n <option>Diagnostics</option>\n <option>Surgery</option>\n <option>Grooming</option>\n <option>Emergency</option>\n </select>\n <input type=\date\ name=\date\ required aria-label=\Preferred Date\ />\n <input type=\time\ name=\time\ aria-label=\Preferred Time\ />\n <textarea class=\wide\ name=\notes\ placeholder=\Tell us about your pet (name, age, breed) and the reason for visit\ aria-label=\Notes\></textarea>\n </div>\n <button class=\btn\ type=\submit\>Request Booking</button>\n </form>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\#home\>Home</a></li>\n <li><a href=\#about\>About</a></li>\n <li><a href=\#services\>Services</a></li>\n <li><a href=\#team\>Team</a></li>\n <li><a href=\#testimonials\>Testimonials</a></li>\n <li><a href=\#contact\>Contact</a></li>\n <li><a href=\#book\>Book</a></li>\n </ul>\n </nav>\n <a class=\btn\ href=\#book\ aria-label=\Book an appointment\>Book Now</a>\n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\#book\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\#services\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\#book\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact )\n <section id=\contact\ class=\section\>\n <div class=\container\>\n <h2>Contact Us</h2>\n <div class=\grid\ style=\grid-template-columns:1.1fr .9fr; align-items:start;\>\n <form action=\#\ method=\post\ aria-label=\Contact form\>\n <div class=\form-grid\>\n <input type=\text\ name=\name\ placeholder=\Your Name\ required aria-label=\Your Name\ />\n <input type=\tel\ name=\phone\ placeholder=\Phone\ required aria-label=\Phone\ />\n <input class=\wide\ type=\email\ name=\email\ placeholder=\Email\ aria-label=\Email\ />\n <textarea class=\wide\ name=\message\ placeholder=\How can we help?\ required aria-label=\Message\></textarea>\n </div>\n <button class=\btn\ type=\submit\>Send Message</button>\n </form>\n <aside>\n <div class=\card\ style=\margin-bottom:16px\>\n <h3 style=\margin-top:0\>Clinic Details</h3>\n <p class=\subtle\>Address</p>\n <p>123 Rustaveli Ave, Tbilisi</p>\n <p class=\subtle\>Phone</p>\n <p><a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n <p class=\subtle\>Email</p>\n <p><a href=\mailto:[email protected]\ style=\color:var(--dark); text-decoration:none\>[email protected]</a></p>\n </div>\n <div class=\card\>\n <h3 style=\margin-top:0\>Find Us</h3>\n <div style=\overflow:hidden; border-radius:12px; border:1px solid #e6f4ee\>\n <iframe title=\Google Map\ src=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\ width=\100%\ height=\220\ style=\border:0\ loading=\lazy\></iframe>\n </div>\n </div>\n </aside>\n </div>\n </div>\n </section>\n\n (html comment removed: Book Appointment )\n <section id=\book\ class=\section about\>\n <div class=\container\>\n <h2>Book an Appointment</h2>\n <form action=\#\ method=\post\ aria-label=\Appointment form\ class=\card\ style=\padding:20px;\>\n <div class=\form-grid\>\n <input type=\text\ name=\fullname\ placeholder=\Full Name\ required aria-label=\Full Name\ />\n <input type=\tel\ name=\phone\ placeholder=\Phone\ required aria-label=\Phone\ />\n <input type=\email\ name=\email\ placeholder=\Email\ aria-label=\Email\ />\n <select name=\service\ required aria-label=\Service\>\n <option value=\\ disabled selected>Select a service</option>\n <option>Routine Check‑up</option>\n <option>Vaccinations</option>\n <option>Diagnostics</option>\n <option>Surgery</option>\n <option>Grooming</option>\n <option>Emergency</option>\n </select>\n <input type=\date\ name=\date\ required aria-label=\Preferred Date\ />\n <input type=\time\ name=\time\ aria-label=\Preferred Time\ />\n <textarea class=\wide\ name=\notes\ placeholder=\Tell us about your pet (name, age, breed) and the reason for visit\ aria-label=\Notes\></textarea>\n </div>\n <button class=\btn\ type=\submit\>Request Booking</button>\n </form>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\#home\>Home</a></li>\n <li><a href=\#about\>About</a></li>\n <li><a href=\#services\>Services</a></li>\n <li><a href=\#team\>Team</a></li>\n <li><a href=\#testimonials\>Testimonials</a></li>\n <li><a href=\#contact\>Contact</a></li>\n <li><a href=\#book\>Book</a></li>\n </ul>\n </nav>\n <a class=\btn\ href=\#book\ aria-label=\Book an appointment\>Book Now</a>\n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\#book\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\#services\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\#book\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact )\n <section id=\contact\ class=\section\>\n <div class=\container\>\n <h2>Contact Us</h2>\n <div class=\grid\ style=\grid-template-columns:1.1fr .9fr; align-items:start;\>\n <form action=\#\ method=\post\ aria-label=\Contact form\>\n <div class=\form-grid\>\n <input type=\text\ name=\name\ placeholder=\Your Name\ required aria-label=\Your Name\ />\n <input type=\tel\ name=\phone\ placeholder=\Phone\ required aria-label=\Phone\ />\n <input class=\wide\ type=\email\ name=\email\ placeholder=\Email\ aria-label=\Email\ />\n <textarea class=\wide\ name=\message\ placeholder=\How can we help?\ required aria-label=\Message\></textarea>\n </div>\n <button class=\btn\ type=\submit\>Send Message</button>\n </form>\n <aside>\n <div class=\card\ style=\margin-bottom:16px\>\n <h3 style=\margin-top:0\>Clinic Details</h3>\n <p class=\subtle\>Address</p>\n <p>123 Rustaveli Ave, Tbilisi</p>\n <p class=\subtle\>Phone</p>\n <p><a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n <p class=\subtle\>Email</p>\n <p><a href=\mailto:[email protected]\ style=\color:var(--dark); text-decoration:none\>[email protected]</a></p>\n </div>\n <div class=\card\>\n <h3 style=\margin-top:0\>Find Us</h3>\n <div style=\overflow:hidden; border-radius:12px; border:1px solid #e6f4ee\>\n <iframe title=\Google Map\ src=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\ width=\100%\ height=\220\ style=\border:0\ loading=\lazy\></iframe>\n </div>\n </div>\n </aside>\n </div>\n </div>\n </section>\n\n (html comment removed: Book Appointment )\n <section id=\book\ class=\section about\>\n <div class=\container\>\n <h2>Book an Appointment</h2>\n <form action=\#\ method=\post\ aria-label=\Appointment form\ class=\card\ style=\padding:20px;\>\n <div class=\form-grid\>\n <input type=\text\ name=\fullname\ placeholder=\Full Name\ required aria-label=\Full Name\ />\n <input type=\tel\ name=\phone\ placeholder=\Phone\ required aria-label=\Phone\ />\n <input type=\email\ name=\email\ placeholder=\Email\ aria-label=\Email\ />\n <select name=\service\ required aria-label=\Service\>\n <option value=\\ disabled selected>Select a service</option>\n <option>Routine Check‑up</option>\n <option>Vaccinations</option>\n <option>Diagnostics</option>\n <option>Surgery</option>\n <option>Grooming</option>\n <option>Emergency</option>\n </select>\n <input type=\date\ name=\date\ required aria-label=\Preferred Date\ />\n <input type=\time\ name=\time\ aria-label=\Preferred Time\ />\n <textarea class=\wide\ name=\notes\ placeholder=\Tell us about your pet (name, age, breed) and the reason for visit\ aria-label=\Notes\></textarea>\n </div>\n <button class=\btn\ type=\submit\>Request Booking</button>\n </form>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\#home\>Home</a></li>\n <li><a href=\#about\>About</a></li>\n <li><a href=\#services\>Services</a></li>\n <li><a href=\#team\>Team</a></li>\n <li><a href=\#testimonials\>Testimonials</a></li>\n <li><a href=\#contact\>Contact</a></li>\n <li><a href=\#book\>Book</a></li>\n </ul>\n </nav>\n <a class=\btn\ href=\#book\ aria-label=\Book an appointment\>Book Now</a>\n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\#book\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\#services\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\#book\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:\n\n
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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* CTA blocks */\n .ctabackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n .cta-griddisplay:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))\n .cta-cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); display:grid; gap:12px\n .pillwidth:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .cta-actionsdisplay:flex; gap:12px; flex-wrap:wrap; align-items:center\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Home</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>About us</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/fuq-test-newsfeed/newsfeed\>News</a></li>\n </ul>\n </nav>\n \n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/rnb-widget-test-1/widget\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact (cta blocks) )\n <section id=\contact\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>💬</div>\n <h2 style=\margin:6px 0 4px\>Have a question?</h2>\n <p>Chat with our team for quick answers about services, prices, or your pet’s needs.</p>\n <ul>\n <li>Typical reply: within a few hours</li>\n <li>Share photos or videos of symptoms</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://waiviodev.com/@wiv01/threads\>Contact Us</a>\n <small>or call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></small>\n </div>\n </article>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>📍</div>\n <h3 style=\margin:6px 0 4px\>Visit the clinic</h3>\n <p>123 Rustaveli Ave, Tbilisi · Mon–Sat 09:00–20:00 · Sun 10:00–16:00</p>\n <a class=\btn btn-outline\ href=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\>Open in Maps</a>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Book (cta block) )\n <section id=\book\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>🗓️</div>\n <h2 style=\margin:6px 0 4px\>Book an Appointment</h2>\n <p>Choose your service and preferred time. We’ll confirm by phone or email.</p>\n <ul>\n <li>Routine care, vaccines, diagnostics, surgery, grooming</li>\n <li>Same‑day slots often available</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book Online</a>\n <small>No payment required to reserve.</small>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\n\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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* CTA blocks */\n .ctabackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n .cta-griddisplay:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))\n .cta-cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); display:grid; gap:12px\n .pillwidth:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .cta-actionsdisplay:flex; gap:12px; flex-wrap:wrap; align-items:center\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Home</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>About us</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/fuq-test-newsfeed/newsfeed\>News</a></li>\n </ul>\n </nav>\n \n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/rnb-widget-test-1/widget\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact (cta blocks) )\n <section id=\contact\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>💬</div>\n <h2 style=\margin:6px 0 4px\>Have a question?</h2>\n <p>Chat with our team for quick answers about services, prices, or your pet’s needs.</p>\n <ul>\n <li>Typical reply: within a few hours</li>\n <li>Share photos or videos of symptoms</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://waiviodev.com/@wiv01/threads\>Contact Us</a>\n <small>or call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></small>\n </div>\n </article>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>📍</div>\n <h3 style=\margin:6px 0 4px\>Visit the clinic</h3>\n <p>123 Rustaveli Ave, Tbilisi · Mon–Sat 09:00–20:00 · Sun 10:00–16:00</p>\n <a class=\btn btn-outline\ href=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\>Open in Maps</a>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Book (cta block) )\n <section id=\book\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>🗓️</div>\n <h2 style=\margin:6px 0 4px\>Book an Appointment</h2>\n <p>Choose your service and preferred time. We’ll confirm by phone or email.</p>\n <ul>\n <li>Routine care, vaccines, diagnostics, surgery, grooming</li>\n <li>Same‑day slots often available</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book Online</a>\n <small>No payment required to reserve.</small>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:\n\n
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\ />\n <title>PetCare — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* CTA blocks */\n .ctabackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n .cta-griddisplay:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))\n .cta-cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); display:grid; gap:12px\n .pillwidth:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .cta-actionsdisplay:flex; gap:12px; flex-wrap:wrap; align-items:center\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Home</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>About us</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/fuq-test-newsfeed/newsfeed\>News</a></li>\n </ul>\n </nav>\n \n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/rnb-widget-test-1/widget\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact (cta blocks) )\n <section id=\contact\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>💬</div>\n <h2 style=\margin:6px 0 4px\>Have a question?</h2>\n <p>Chat with our team for quick answers about services, prices, or your pet’s needs.</p>\n <ul>\n <li>Typical reply: within a few hours</li>\n <li>Share photos or videos of symptoms</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://waiviodev.com/@wiv01/threads\>Contact Us</a>\n <small>or call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></small>\n </div>\n </article>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>📍</div>\n <h3 style=\margin:6px 0 4px\>Visit the clinic</h3>\n <p>123 Rustaveli Ave, Tbilisi · Mon–Sat 09:00–20:00 · Sun 10:00–16:00</p>\n <a class=\btn btn-outline\ href=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\>Open in Maps</a>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Book (cta block) )\n <section id=\book\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>🗓️</div>\n <h2 style=\margin:6px 0 4px\>Book an Appointment</h2>\n <p>Choose your service and preferred time. We’ll confirm by phone or email.</p>\n <ul>\n <li>Routine care, vaccines, diagnostics, surgery, grooming</li>\n <li>Same‑day slots often available</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book Online</a>\n <small>No payment required to reserve.</small>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\n\n\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:\n\n
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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* CTA blocks */\n .ctabackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n .cta-griddisplay:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))\n .cta-cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); display:grid; gap:12px\n .pillwidth:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .cta-actionsdisplay:flex; gap:12px; flex-wrap:wrap; align-items:center\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Home</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>About us</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/fuq-test-newsfeed/newsfeed\>News</a></li>\n </ul>\n </nav>\n \n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/rnb-widget-test-1/widget\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact (cta blocks) )\n <section id=\contact\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>💬</div>\n <h2 style=\margin:6px 0 4px\>Have a question?</h2>\n <p>Chat with our team for quick answers about services, prices, or your pet’s needs.</p>\n <ul>\n <li>Typical reply: within a few hours</li>\n <li>Share photos or videos of symptoms</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://waiviodev.com/@wiv01/threads\>Contact Us</a>\n <small>or call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></small>\n </div>\n </article>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>📍</div>\n <h3 style=\margin:6px 0 4px\>Visit the clinic</h3>\n <p>123 Rustaveli Ave, Tbilisi · Mon–Sat 09:00–20:00 · Sun 10:00–16:00</p>\n <a class=\btn btn-outline\ href=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\>Open in Maps</a>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Book (cta block) )\n <section id=\book\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>🗓️</div>\n <h2 style=\margin:6px 0 4px\>Book an Appointment</h2>\n <p>Choose your service and preferred time. We’ll confirm by phone or email.</p>\n <ul>\n <li>Routine care, vaccines, diagnostics, surgery, grooming</li>\n <li>Same‑day slots often available</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book Online</a>\n <small>No payment required to reserve.</small>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\n\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<!DOCTYPE html>\n<html lang=\en\>\n<head>\n <meta charset=\UTF-8\ />\n <meta name=\viewport\ content=\width=device-width, initial-scale=1\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\#home\>Home</a></li>\n <li><a href=\#about\>About</a></li>\n <li><a href=\#services\>Services</a></li>\n <li><a href=\#team\>Team</a></li>\n <li><a href=\#testimonials\>Testimonials</a></li>\n <li><a href=\#contact\>Contact</a></li>\n <li><a href=\#book\>Book</a></li>\n </ul>\n </nav>\n <a class=\btn\ href=\#book\ aria-label=\Book an appointment\>Book Now</a>\n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\#book\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\#services\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\#book\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact )\n <section id=\contact\ class=\section\>\n <div class=\container\>\n <h2>Contact Us</h2>\n <div class=\grid\ style=\grid-template-columns:1.1fr .9fr; align-items:start;\>\n <form action=\#\ method=\post\ aria-label=\Contact form\>\n <div class=\form-grid\>\n <input type=\text\ name=\name\ placeholder=\Your Name\ required aria-label=\Your Name\ />\n <input type=\tel\ name=\phone\ placeholder=\Phone\ required aria-label=\Phone\ />\n <input class=\wide\ type=\email\ name=\email\ placeholder=\Email\ aria-label=\Email\ />\n <textarea class=\wide\ name=\message\ placeholder=\How can we help?\ required aria-label=\Message\></textarea>\n </div>\n <button class=\btn\ type=\submit\>Send Message</button>\n </form>\n <aside>\n <div class=\card\ style=\margin-bottom:16px\>\n <h3 style=\margin-top:0\>Clinic Details</h3>\n <p class=\subtle\>Address</p>\n <p>123 Rustaveli Ave, Tbilisi</p>\n <p class=\subtle\>Phone</p>\n <p><a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n <p class=\subtle\>Email</p>\n <p><a href=\mailto:[email protected]\ style=\color:var(--dark); text-decoration:none\>[email protected]</a></p>\n </div>\n <div class=\card\>\n <h3 style=\margin-top:0\>Find Us</h3>\n <div style=\overflow:hidden; border-radius:12px; border:1px solid #e6f4ee\>\n <iframe title=\Google Map\ src=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\ width=\100%\ height=\220\ style=\border:0\ loading=\lazy\></iframe>\n </div>\n </div>\n </aside>\n </div>\n </div>\n </section>\n\n (html comment removed: Book Appointment )\n <section id=\book\ class=\section about\>\n <div class=\container\>\n <h2>Book an Appointment</h2>\n <form action=\#\ method=\post\ aria-label=\Appointment form\ class=\card\ style=\padding:20px;\>\n <div class=\form-grid\>\n <input type=\text\ name=\fullname\ placeholder=\Full Name\ required aria-label=\Full Name\ />\n <input type=\tel\ name=\phone\ placeholder=\Phone\ required aria-label=\Phone\ />\n <input type=\email\ name=\email\ placeholder=\Email\ aria-label=\Email\ />\n <select name=\service\ required aria-label=\Service\>\n <option value=\\ disabled selected>Select a service</option>\n <option>Routine Check‑up</option>\n <option>Vaccinations</option>\n <option>Diagnostics</option>\n <option>Surgery</option>\n <option>Grooming</option>\n <option>Emergency</option>\n </select>\n <input type=\date\ name=\date\ required aria-label=\Preferred Date\ />\n <input type=\time\ name=\time\ aria-label=\Preferred Time\ />\n <textarea class=\wide\ name=\notes\ placeholder=\Tell us about your pet (name, age, breed) and the reason for visit\ aria-label=\Notes\></textarea>\n </div>\n <button class=\btn\ type=\submit\>Request Booking</button>\n </form>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:\n\n
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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* CTA blocks */\n .ctabackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n .cta-griddisplay:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))\n .cta-cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); display:grid; gap:12px\n .pillwidth:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .cta-actionsdisplay:flex; gap:12px; flex-wrap:wrap; align-items:center\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Home</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>About us</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/fuq-test-newsfeed/newsfeed\>News</a></li>\n </ul>\n </nav>\n \n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/rnb-widget-test-1/widget\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact (cta blocks) )\n <section id=\contact\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>💬</div>\n <h2 style=\margin:6px 0 4px\>Have a question?</h2>\n <p>Chat with our team for quick answers about services, prices, or your pet’s needs.</p>\n <ul>\n <li>Typical reply: within a few hours</li>\n <li>Share photos or videos of symptoms</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://waiviodev.com/@wiv01/threads\>Contact Us</a>\n <small>or call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></small>\n </div>\n </article>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>📍</div>\n <h3 style=\margin:6px 0 4px\>Visit the clinic</h3>\n <p>123 Rustaveli Ave, Tbilisi · Mon–Sat 09:00–20:00 · Sun 10:00–16:00</p>\n <a class=\btn btn-outline\ href=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\>Open in Maps</a>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Book (cta block) )\n <section id=\book\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>🗓️</div>\n <h2 style=\margin:6px 0 4px\>Book an Appointment</h2>\n <p>Choose your service and preferred time. We’ll confirm by phone or email.</p>\n <ul>\n <li>Routine care, vaccines, diagnostics, surgery, grooming</li>\n <li>Same‑day slots often available</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book Online</a>\n <small>No payment required to reserve.</small>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\n\n\n\n,hideSignIn:true,hideMenu:trueWaivio object "test html 09101535" has been created
wiv01 added name(en-US):
test html 09101535
@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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* CTA blocks */\n .ctabackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n .cta-griddisplay:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))\n .cta-cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); display:grid; gap:12px\n .pillwidth:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .cta-actionsdisplay:flex; gap:12px; flex-wrap:wrap; align-items:center\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Home</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>About us</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/fuq-test-newsfeed/newsfeed\>News</a></li>\n </ul>\n </nav>\n \n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/rnb-widget-test-1/widget\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact (cta blocks) )\n <section id=\contact\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>💬</div>\n <h2 style=\margin:6px 0 4px\>Have a question?</h2>\n <p>Chat with our team for quick answers about services, prices, or your pet’s needs.</p>\n <ul>\n <li>Typical reply: within a few hours</li>\n <li>Share photos or videos of symptoms</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://waiviodev.com/@wiv01/threads\>Contact Us</a>\n <small>or call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></small>\n </div>\n </article>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>📍</div>\n <h3 style=\margin:6px 0 4px\>Visit the clinic</h3>\n <p>123 Rustaveli Ave, Tbilisi · Mon–Sat 09:00–20:00 · Sun 10:00–16:00</p>\n <a class=\btn btn-outline\ href=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\>Open in Maps</a>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Book (cta block) )\n <section id=\book\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>🗓️</div>\n <h2 style=\margin:6px 0 4px\>Book an Appointment</h2>\n <p>Choose your service and preferred time. We’ll confirm by phone or email.</p>\n <ul>\n <li>Routine care, vaccines, diagnostics, surgery, grooming</li>\n <li>Same‑day slots often available</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book Online</a>\n <small>No payment required to reserve.</small>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:trueWaivio object "test html 09101624" has been created
wiv01 added name(en-US):
test html 09101624
@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\ />\n <title>PetCare Tbilisi — Veterinary Clinic</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --green:#74C69D;\n --blue:#ADE8F4;\n --dark:#333333;\n --bg:#ffffff;\n --muted:#f7faf9;\n --radius:14px;\n --shadow:0 10px 25px rgba(0,0,0,0.08);\n \n *box-sizing:border-box\n htmlscroll-behavior:smooth\n body\n margin:0;\n font-family:\Poppins\, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n color:var(--dark);\n background:var(--bg);\n line-height:1.6;\n \n /* Layout helpers */\n .containerwidth:min(1100px, 92vw); margin-inline:auto\n .sectionpadding:72px 0\n .griddisplay:grid; gap:24px\n .btndisplay:inline-block; padding:14px 22px; border-radius:999px; background:var(--green); color:#fff; text-decoration:none; font-weight:600; transition:transform .08s ease, filter .2s ease\n .btn:hoverfilter:brightness(.95)\n .btn:activetransform:translateY(1px)\n .btn-outlinebackground:#fff; color:var(--green); border:2px solid var(--green)\n\n /* Header / Nav */\n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:rgba(255,255,255,.85); border-bottom:1px solid #e7efe9;\n \n .navdisplay:flex; align-items:center; justify-content:space-between; padding:16px 0\n .branddisplay:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px\n .brand .logowidth:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .brand spanfont-size:1.05rem\n nav uldisplay:flex; list-style:none; gap:18px; padding:0; margin:0\n nav acolor:var(--dark); text-decoration:none; font-weight:500\n nav a:hovercolor:var(--green)\n\n /* Hero */\n .herodisplay:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0\n .hero-cardbackground:linear-gradient(160deg, var(--blue), #e9fbff); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)\n .hero h1font-size:clamp(1.8rem, 2.8vw + 1rem, 3rem); margin:.2em 0\n .hero popacity:.85\n .hero-ctadisplay:flex; gap:12px; margin-top:18px; flex-wrap:wrap\n .hero-badgedisplay:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6f4ee; padding:10px 14px; border-radius:999px; font-size:.95rem; box-shadow:var(--shadow)\n\n /* Cards */\n .cardsgrid-template-columns:repeat(auto-fit, minmax(230px, 1fr))\n .cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)\n .card h3margin:.2em 0 .2em\n .card pmargin:0; opacity:.9\n .iconfont-size:28px\n\n /* About */\n .aboutbackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n\n /* Services */\n .services .carddisplay:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start\n\n /* Team */\n .team .memberdisplay:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; background:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)\n .avatarwidth:80px; height:80px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n\n /* Testimonials */\n .testimonials .quotebackground:#fff; border-left:5px solid var(--green); padding:18px 20px; border-radius:12px; box-shadow:var(--shadow)\n .quote smalldisplay:block; margin-top:8px; opacity:.8; font-weight:600\n\n /* Contact */\n formdisplay:grid; gap:14px\n input, textarea, selectwidth:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe8e2; font:inherit\n textareamin-height:120px\n .form-griddisplay:grid; gap:14px; grid-template-columns:repeat(2,1fr)\n .form-grid .widegrid-column:1/-1\n\n /* Footer */\n footerborder-top:1px solid #e7efe9; background:#fff\n .footer-wrapdisplay:grid; gap:18px; grid-template-columns:1.2fr 1fr; padding:26px 0\n .subtleopacity:.8\n\n /* Utilities */\n h2font-size:clamp(1.4rem, 1.2vw + 1rem, 2rem); margin:0 0 18px\n .section-headdisplay:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px\n\n /* CTA blocks */\n .ctabackground:var(--muted); border-top:1px solid #e7efe9; border-bottom:1px solid #e7efe9\n .cta-griddisplay:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))\n .cta-cardbackground:#fff; border:1px solid #eaf2ee; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); display:grid; gap:12px\n .pillwidth:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--green), var(--blue)); display:grid; place-items:center; color:#fff; font-weight:700\n .cta-actionsdisplay:flex; gap:12px; flex-wrap:wrap; align-items:center\n\n /* Responsive */\n @media (max-width: 900px)\n .herogrid-template-columns:1fr\n .footer-wrapgrid-template-columns:1fr\n .form-gridgrid-template-columns:1fr\n nav uldisplay:none\n \n </style>\n</head>\n<body>\n (html comment removed: Header )\n <header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <nav aria-label=\Primary\>\n <ul>\n <li><a href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Home</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>About us</a></li>\n <li><a href=\https://443.socialgifts.pp.ua/object/fuq-test-newsfeed/newsfeed\>News</a></li>\n </ul>\n </nav>\n \n </div>\n </header>\n\n (html comment removed: Hero / Home )\n <main id=\home\ class=\container hero\>\n <div>\n <span class=\hero-badge\>Trusted Veterinary Care in Tbilisi</span>\n <h1>Warm, Professional Care for Your Best Friend</h1>\n <p>From routine check‑ups to emergency care, PetCare Tbilisi offers modern facilities and a compassionate team dedicated to your pet’s health.</p>\n <div class=\hero-cta\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book an Appointment</a>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/rnb-widget-test-1/widget\>View Services</a>\n </div>\n </div>\n <div class=\hero-card\ role=\img\ aria-label=\Happy pet with vet\>\n <p><strong>Why choose us?</strong></p>\n <ul>\n <li>Experienced veterinarians & friendly staff</li>\n <li>Modern diagnostics: X‑ray, ultrasound, in‑house lab</li>\n <li>Transparent pricing & convenient online booking</li>\n <li>Emergency help available</li>\n </ul>\n </div>\n </main>\n\n (html comment removed: Highlights )\n <section class=\section\>\n <div class=\container grid cards\>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🩺</div>\n <h3>Comprehensive Care</h3>\n <p>Wellness exams, vaccinations, and tailored treatment plans.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>⏱️</div>\n <h3>Fast & Responsive</h3>\n <p>Same‑day appointments and efficient service when you need it.</p>\n </article>\n <article class=\card\>\n <div class=\icon\ aria-hidden=\true\>🤝</div>\n <h3>Trusted by Owners</h3>\n <p>Clear communication, kind handling, and happy pets.</p>\n </article>\n </div>\n </section>\n\n (html comment removed: About )\n <section id=\about\ class=\section about\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>About PetCare Tbilisi</h2>\n </div>\n <p>Founded with a simple mission — <em>to make pets and people feel safe</em> — PetCare Tbilisi blends modern medicine with warm hospitality. Our clinic is equipped for preventive care, diagnostics, and surgery, all delivered by a team that treats your pet like family.</p>\n </div>\n </section>\n\n (html comment removed: Services )\n <section id=\services\ class=\section services\>\n <div class=\container\>\n <div class=\section-head\>\n <h2>Services</h2>\n <a class=\btn btn-outline\ href=\https://443.socialgifts.pp.ua/object/mor-test-list-not-bad-advice\>Need something specific?</a>\n </div>\n <div class=\grid cards\>\n <article class=\card\>\n <div class=\icon\>🩺</div>\n <div>\n <h3>Routine Check‑ups</h3>\n <p>Comprehensive wellness exams and health screenings.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>💉</div>\n <div>\n <h3>Vaccinations</h3>\n <p>Core and lifestyle vaccines tailored to your pet.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧪</div>\n <div>\n <h3>Diagnostics</h3>\n <p>In‑house lab, X‑ray, and ultrasound for quick answers.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🧑⚕️</div>\n <div>\n <h3>Surgery</h3>\n <p>Modern surgical suite with advanced monitoring.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>✂️</div>\n <div>\n <h3>Grooming</h3>\n <p>Bathing, trimming, and coat care for comfort and hygiene.</p>\n </div>\n </article>\n <article class=\card\>\n <div class=\icon\>🚑</div>\n <div>\n <h3>Emergency Help</h3>\n <p>Rapid triage and urgent treatment when minutes matter.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Team )\n <section id=\team\ class=\section team\>\n <div class=\container\>\n <h2>Meet Our Veterinarians</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>NB</div>\n <div>\n <h3 style=\margin:0\>Dr. Nino Beridze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Chief Veterinarian</p>\n <p style=\margin:0; opacity:.9\>10+ years in small‑animal internal medicine and surgery.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>GK</div>\n <div>\n <h3 style=\margin:0\>Dr. Giorgi Kapanadze</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Surgeon</p>\n <p style=\margin:0; opacity:.9\>Soft‑tissue and orthopedic procedures with gentle care.</p>\n </div>\n </article>\n <article class=\member\>\n <div class=\avatar\ aria-hidden=\true\>ST</div>\n <div>\n <h3 style=\margin:0\>Dr. Salome Tsereteli</h3>\n <p style=\margin:.2em 0 .4em; font-weight:600\>Preventive Care</p>\n <p style=\margin:0; opacity:.9\>Wellness plans, vaccinations, and nutrition guidance.</p>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Testimonials )\n <section id=\testimonials\ class=\section testimonials about\>\n <div class=\container\>\n <h2>What Clients Say</h2>\n <div class=\grid\ style=\grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:10px;\>\n <blockquote class=\quote\>“The team was so kind during Luna’s surgery. Clear updates and a smooth recovery!”<small>— Mariam & Luna</small></blockquote>\n <blockquote class=\quote\>“Quick emergency help late at night — Rex is happy and healthy thanks to PetCare!”<small>— Dato & Rex</small></blockquote>\n <blockquote class=\quote\>“Beautiful clinic, friendly staff, and fair prices. Booking online was effortless.”<small>— Ana & Mimoza</small></blockquote>\n </div>\n </div>\n </section>\n\n (html comment removed: Contact (cta blocks) )\n <section id=\contact\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>💬</div>\n <h2 style=\margin:6px 0 4px\>Have a question?</h2>\n <p>Chat with our team for quick answers about services, prices, or your pet’s needs.</p>\n <ul>\n <li>Typical reply: within a few hours</li>\n <li>Share photos or videos of symptoms</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://waiviodev.com/@wiv01/threads\>Contact Us</a>\n <small>or call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></small>\n </div>\n </article>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>📍</div>\n <h3 style=\margin:6px 0 4px\>Visit the clinic</h3>\n <p>123 Rustaveli Ave, Tbilisi · Mon–Sat 09:00–20:00 · Sun 10:00–16:00</p>\n <a class=\btn btn-outline\ href=\https://maps.google.com/maps?q=tbilisi&t=&z=13&ie=UTF8&iwloc=&output=embed\>Open in Maps</a>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Book (cta block) )\n <section id=\book\ class=\section cta\>\n <div class=\container\>\n <div class=\cta-grid\>\n <article class=\cta-card\>\n <div class=\pill\ aria-hidden=\true\>🗓️</div>\n <h2 style=\margin:6px 0 4px\>Book an Appointment</h2>\n <p>Choose your service and preferred time. We’ll confirm by phone or email.</p>\n <ul>\n <li>Routine care, vaccines, diagnostics, surgery, grooming</li>\n <li>Same‑day slots often available</li>\n </ul>\n <div class=\cta-actions\>\n <a class=\btn\ href=\https://443.socialgifts.pp.ua/object/hkn-test-page-20030940\>Book Online</a>\n <small>No payment required to reserve.</small>\n </div>\n </article>\n </div>\n </div>\n </section>\n\n (html comment removed: Footer )\n <footer>\n <div class=\container footer-wrap\>\n <div>\n <div class=\brand\ style=\margin-bottom:8px\>\n <div class=\logo\>PC</div>\n <span>PetCare Tbilisi</span>\n </div>\n <p class=\subtle\>© <span id=\y\>2025</span> PetCare Tbilisi. All rights reserved.</p>\n </div>\n <div>\n <p class=\subtle\>Hours</p>\n <p>Mon–Sat: 09:00–20:00 · Sun: 10:00–16:00</p>\n <p class=\subtle\>Emergency</p>\n <p>Call <a href=\tel:+995555123456\ style=\color:var(--dark); text-decoration:none\>+995 555 123 456</a></p>\n </div>\n </div>\n </footer>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:trueWaivio object "test html 10100930" has been created
Waivio object "test html 13101118" has been created
wiv01 added name(en-US):
test html 13101118
@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\ />\n <title>Bruce Wayne — Totally Normal CV</title>\n <link rel=\preconnect\ href=\https://fonts.googleapis.com\>\n <link rel=\preconnect\ href=\https://fonts.gstatic.com\ crossorigin>\n <link href=\https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Montserrat:wght@700;900&display=swap\ rel=\stylesheet\>\n <style>\n :root\n --bg: #0b0f14;\n --panel: #0f1520;\n --ink: #eaf2ff;\n --ink-dim: #a9b8d6;\n --accent: #ffd400;\n --accent-2: #8ea7ff;\n --muted: #101826;\n --success: #36d399;\n --danger: #f87272;\n --shadow: 0 10px 30px rgba(0,0,0,.35);\n --radius: 18px;\n \n\n * box-sizing: border-box; \n html, body height: 100%; \n body\n margin:0;\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, \Helvetica Neue\, Arial, \Noto Sans\, \Apple Color Emoji\, \Segoe UI Emoji\;\n color: var(--ink);\n background: radial-gradient(1200px 800px at 70% -10%, #1b2233 0%, #0b0f14 50%, #06080c 100%);\n line-height: 1.6;\n \n\n .wrap\n max-width: 1100px;\n margin: 40px auto;\n padding: 0 20px 60px;\n \n\n header.hero\n position: relative;\n border: 1px solid rgba(255,255,255,.08);\n background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)),\n radial-gradient(80% 120% at 100% 0%, #121a2b 0%, #0f1520 60%, #0b0f14 100%);\n border-radius: var(--radius);\n padding: 42px 32px;\n box-shadow: var(--shadow);\n overflow: hidden;\n \n\n .badge\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: #0b0f14;\n border: 1px solid rgba(255,255,255,.08);\n border-radius: 999px;\n padding: 8px 14px;\n color: var(--ink-dim);\n font-size: 12px;\n letter-spacing: .08em;\n text-transform: uppercase;\n \n .badge .dot\n width: 8px; height: 8px; border-radius: 50%; background: var(--accent);\n box-shadow: 0 0 10px var(--accent);\n \n\n .hero h1\n font-family: Montserrat, Inter, sans-serif;\n margin: 14px 0 10px;\n font-size: clamp(32px, 6vw, 64px);\n line-height: 1.05;\n letter-spacing: -0.02em;\n \n .hero p.tagline\n margin: 0 0 14px;\n font-size: clamp(14px, 2.2vw, 18px);\n color: var(--ink-dim);\n \n\n .grid\n display: grid;\n grid-template-columns: 1.1fr .9fr;\n gap: 24px;\n margin-top: 26px;\n \n\n .card\n background: var(--panel);\n border: 1px solid rgba(255,255,255,.08);\n border-radius: var(--radius);\n padding: 22px;\n box-shadow: var(--shadow);\n \n\n .card h3\n margin: 0 0 14px;\n font-size: 18px;\n letter-spacing: .02em;\n text-transform: uppercase;\n color: var(--accent-2);\n \n\n .kv display:grid; grid-template-columns: 140px 1fr; gap: 10px 16px; \n .kv div padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.06); \n .kv strong color: var(--ink-dim); font-weight: 600; \n\n .skills display:flex; flex-wrap: wrap; gap: 10px; \n .chip\n padding: 8px 12px;\n background: #0c1220;\n border: 1px solid rgba(255,255,255,.08);\n border-radius: 999px;\n font-size: 13px;\n \n\n ul.timeline\n list-style: none; padding: 0; margin: 0;\n display: grid; gap: 18px;\n \n .timeline li\n position: relative; padding-left: 26px;\n \n .timeline li::before\n content:\\; position:absolute; left:7px; top:6px; width:10px; height:10px; border-radius:50%; background: var(--accent);\n box-shadow: 0 0 10px var(--accent);\n \n .when color: var(--ink-dim); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; \n .role font-weight: 700; \n .org color: var(--ink-dim); \n\n .banner\n position:absolute; inset:auto -5% -40px -5%; height: 220px;\n pointer-events:none; opacity:.18;\n background:\n radial-gradient(60% 120% at 30% 40%, #ffd400 0%, rgba(255,212,0,0) 60%),\n radial-gradient(60% 120% at 70% 10%, #8ea7ff 0%, rgba(142,167,255,0) 60%);\n filter: blur(40px);\n \n\n .bat\n position:absolute; right: 24px; bottom: 12px; width: clamp(90px, 18vw, 180px); aspect-ratio: 16/8;\n background: conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.12), rgba(255,255,255,0) 50%);\n -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=\http://www.w3.org/2000/svg\ viewBox=\0 0 640 320\><path fill=\%23fff\ d=\M57 163c22-15 46-18 71-12 28 7 48 13 72 1 21-10 31-29 44-47 17 23 27 46 53 46s36-23 53-46c13 18 23 37 44 47 24 12 44 6 72-1 25-6 49-3 71 12-41 8-66 31-74 69-6-31-28-42-54-37-26 6-38 25-43 49-7-34-29-51-68-51s-61 17-68 51c-5-24-17-43-43-49-26-5-48 6-54 37-8-38-33-61-74-69z\/></svg>') center/contain no-repeat;\n opacity:.6;\n \n\n .section-title\n margin: 30px 0 12px;\n font-size: 20px;\n letter-spacing: .08em;\n text-transform: uppercase;\n color: var(--accent);\n \n\n .cols display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; \n .note color: var(--ink-dim); font-size: 14px; \n\n footer\n margin-top: 22px; text-align: center; color: var(--ink-dim); font-size: 14px;\n \n\n /* Responsive */\n @media (max-width: 900px)\n .grid grid-template-columns: 1fr; \n \n @media (max-width: 560px)\n .kv grid-template-columns: 1fr; \n .cols grid-template-columns: 1fr; \n \n\n /* Print friendly */\n @media print\n body background: #fff; color:#000; \n header.hero, .card box-shadow:none; background:#fff; border-color:#ddd; \n .banner, .bat display:none; \n .badge border-color:#aaa; \n \n </style>\n</head>\n<body>\n <div class=\wrap\>\n <header class=\hero\>\n <span class=\badge\><span class=\dot\></span> Totally Normal Resume</span>\n <h1>Bruce Wayne</h1>\n <p class=\tagline\>Philanthropist • Night Shift Enthusiast • \Very into bats for no particular reason\</p>\n\n <div class=\grid\>\n <section class=\card\>\n <h3>About</h3>\n <p>\n Strategic problem‑solver with a knack for disappearing mid‑meeting right before something dramatic happens. \n Passionate about civic infrastructure, crime reduction, and rooftop gargoyles.\n </p>\n <div class=\section-title\>Core Skills</div>\n <div class=\skills\>\n <span class=\chip\>Stealth project delivery</span>\n <span class=\chip\>Advanced gadget ops</span>\n <span class=\chip\>Agile (very)</span>\n <span class=\chip\>Risk analysis (high)</span>\n <span class=\chip\>Martial negotiations</span>\n <span class=\chip\>Cave architecture</span>\n <span class=\chip\>Orphan empathy</span>\n <span class=\chip\>Glide path planning</span>\n </div>\n </section>\n\n <aside class=\card\>\n <h3>Details</h3>\n <div class=\kv\>\n <div><strong>Location</strong></div>\n <div>Gotham City (various rooftops)</div>\n <div><strong>Phone</strong></div>\n <div>(Bat) – please shine light</div>\n <div><strong>Email</strong></div>\n <div>[email protected]</div>\n <div><strong>Website</strong></div>\n <div>wayne.enterprises/careers</div>\n </div>\n </aside>\n </div>\n\n <div class=\banner\ aria-hidden=\true\></div>\n <div class=\bat\ aria-hidden=\true\ title=\definitely not a clue\></div>\n </header>\n\n <main class=\grid\ style=\margin-top:24px\>\n <section class=\card\>\n <h3>Experience</h3>\n <ul class=\timeline\>\n <li>\n <div class=\when\>2005 — Present</div>\n <div class=\role\>Chief Vigilance Officer <span class=\org\>@ Night Ops (freelance)</span></div>\n <div>Reduced key‑risk metrics across urban districts using a combination of predictive analytics, community engagement, and very dramatic entrances.</div>\n </li>\n <li>\n <div class=\when\>2016 — 2018</div>\n <div class=\role\>Team Lead <span class=\org\>@ Justice League</span></div>\n <div>Coordinated cross‑functional heroes. Managed stakeholders ranging from Atlanteans to Kryptonians. Wore power armor. Twice.</div>\n </li>\n <li>\n <div class=\when\>2000 — 2005</div>\n <div class=\role\>R&D Benefactor <span class=\org\>@ Wayne Enterprises</span></div>\n <div>Accelerated skunkworks pipeline; insisted prototypes include matte‑black option.</div>\n </li>\n </ul>\n </section>\n\n <section class=\card\>\n <h3>Education & Training</h3>\n <ul class=\timeline\>\n <li>\n <div class=\when\>Various</div>\n <div class=\role\>Post‑grad fieldwork <span class=\org\>@ League of… extracurriculars</span></div>\n <div>Specializations in stealth, ethics, and creative use of grapnels.</div>\n </li>\n <li>\n <div class=\when\>Earlier</div>\n <div class=\role\>Bachelor of Business <span class=\org\>@ Gotham U</span></div>\n <div>Thesis: \Scaling family businesses while maintaining alter‑ego work‑life balance\</div>\n </li>\n </ul>\n </section>\n\n <section class=\card\>\n <h3>Notable Achievements</h3>\n <div class=\cols\>\n <div>\n <div class=\section-title\>City Impact</div>\n <p>Helped lower late‑night clown activity by significant margins. Introduced sustainable, bat‑themed transit solutions.</p>\n </div>\n <div>\n <div class=\section-title\>Awards</div>\n <p>\Most Mysterious Board Member\ (8×), \Best Use of a Cape in Business\ (lifetime).</p>\n </div>\n <div>\n <div class=\section-title\>Publications</div>\n <p><em>On Grappling with Problems: A Hook‑First Approach</em> (self‑published, limited circulation).</p>\n </div>\n </div>\n </section>\n\n <section class=\card\>\n <h3>Hobbies</h3>\n <p>Night flights, detective sudoku, cave acoustics, mentoring exceptionally acrobatic interns.</p>\n <div class=\section-title\>References</div>\n <p class=\note\>Available upon signal. Commissioner G. prefers sky‑based communications.</p>\n </section>\n </main>\n\n <footer>\n © Wayne Enterprises — If this résumé smells like guano, that’s purely coincidental.\n </footer>\n </div>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:trueHTTP is in use instead of HTTPS and no protocol redirection is in place. Do not enter sensitive information in this website as your data won't be encrypted.
Read about HTTP unsafety: [1] [2]
_ Vote for our WITNESS to support this FREE service!
Waivio object "test html 14101128" has been created
wiv01 added name(en-US):
test html 14101128
@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\ />\n <title>Snowball — The Fluffy White Cat</title>\n <meta name=\description\ content=\Snowball is a fluffy white cat influencer. Book collaborations, browse photos, and follow his adventures.\ />\n <meta property=\og:title\ content=\Snowball — The Fluffy White Cat\ />\n <meta property=\og:description\ content=\Fluffy. Friendly. Famous. Follow Snowball the cat.\ />\n <meta property=\og:type\ content=\website\ />\n <meta name=\theme-color\ content=\#ffffff\ />\n <style>\n :root\n --bg:#f8fafc; /* light slate */\n --panel:#ffffff; /* white */\n --ink:#0f172a; /* slate-900 */\n --muted:#475569; /* slate-600 */\n --brand:#7c3aed; /* violet-600 */\n --brand-2:#14b8a6; /* teal-500 */\n --ring:rgba(124,58,237,.35);\n --shadow:0 8px 30px rgba(2,8,23,.08);\n --radius:22px;\n \n\n *box-sizing:border-box\n html,bodyheight:100%\n body\n margin:0;\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \Apple Color Emoji\,\Segoe UI Emoji\;\n color:var(--ink);\n background: radial-gradient(1200px 600px at 15% -10%, #eef2ff 0%, transparent 60%),\n radial-gradient(1000px 500px at 110% 10%, #ecfeff 0%, transparent 55%),\n var(--bg);\n line-height:1.6;\n \n acolor:var(--brand); text-decoration:none\n a:hover text-decoration:underline \n\n /* Layout */\n .container width:min(1100px, 92vw); margin-inline:auto \n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));\n border-bottom:1px solid #e2e8f0;\n \n .nav display:flex; align-items:center; justify-content:space-between; padding:14px 0 \n .logo display:flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:.3px \n .logo .paw width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(from 220deg, var(--brand), var(--brand-2)); color:white; box-shadow:var(--shadow) \n .nav a.btn padding:.6rem 1rem; border-radius:999px; background:var(--ink); color:white; box-shadow:var(--shadow) \n .nav a.btn:hover filter:brightness(1.05) \n\n /* Hero */\n .hero display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:70px 0 \n .tag display:inline-block; padding:.35rem .65rem; border-radius:999px; background:#eef2ff; color:#4338ca; font-weight:600; letter-spacing:.2px \n h1 font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height:1.1; margin:.6rem 0 \n .hero p color:var(--muted); font-size: clamp(1rem, 1.2vw, 1.15rem)\n .stats display:flex; gap:22px; margin:26px 0 0 \n .stat background:var(--panel); border-radius:18px; padding:14px 16px; box-shadow:var(--shadow); text-align:center; min-width:120px \n .stat b font-size:1.4rem \n .hero .actions display:flex; gap:12px; margin-top:24px \n .btn-primary background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:white; padding:.8rem 1.1rem; border-radius:12px; display:inline-block; box-shadow:var(--shadow)\n .btn-ghost padding:.8rem 1.1rem; border-radius:12px; border:1px solid #e5e7eb; background:white \n\n .cat-card position:relative; aspect-ratio:1/1; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); border:1px solid #e5e7eb; background:white \n .cat-card .img width:100%; height:100%; background-size:cover; background-position:center \n .cat-card::after content:\\; position:absolute; inset:auto 12px 12px 12px; height:48px; border-radius:16px; background:rgba(255,255,255,.82); backdrop-filter: blur(6px); box-shadow:var(--shadow) \n .cat-badge position:absolute; right:16px; top:16px; background:white; border-radius:999px; padding:.4rem .7rem; box-shadow:var(--shadow); font-weight:700 \n\n /* Sections */\n section padding:70px 0 \n .panel background:var(--panel); border:1px solid #e5e7eb; border-radius:var(--radius); box-shadow:var(--shadow); padding:26px \n\n /* About */\n .about display:grid; grid-template-columns: 1fr 1fr; gap:26px; align-items:center \n .about p color:var(--muted) \n\n /* Gallery */\n .grid display:grid; grid-template-columns: repeat(3, 1fr); gap:14px \n .grid .tile border-radius:18px; overflow:hidden; border:1px solid #e5e7eb; background:#fff; aspect-ratio:1/1; background-size:cover; background-position:center; box-shadow:var(--shadow) \n\n /* Collab Cards */\n .cards display:grid; grid-template-columns: repeat(3, 1fr); gap:18px \n .card border:1px solid #e5e7eb; border-radius:18px; background:white; box-shadow:var(--shadow); padding:20px \n .card h3 margin:.2rem 0 .4rem \n .card p color:var(--muted); margin:0 \n\n /* Socials */\n .socials display:flex; flex-wrap:wrap; gap:12px \n .chip border:1px solid #e5e7eb; border-radius:999px; padding:.55rem .9rem; background:white; display:inline-flex; align-items:center; gap:.5rem; box-shadow:var(--shadow) \n .dot width:8px; height:8px; border-radius:999px; background:var(--brand) \n\n /* Contact (CSS-only, no JS) */\n form display:grid; gap:12px \n input, textarea font:inherit; padding:.85rem 1rem; border-radius:12px; border:1px solid #e5e7eb; background:white \n input:focus, textarea:focus outline:3px solid var(--ring) \n textarea min-height:120px; resize:vertical \n .note color:var(--muted); font-size:.95rem \n\n footer padding:40px 0; color:var(--muted); text-align:center \n\n /* Responsive */\n @media (max-width: 900px)\n .hero grid-template-columns:1fr; padding:42px 0 \n .about grid-template-columns: 1fr \n .grid grid-template-columns: repeat(2, 1fr) \n .cards grid-template-columns: 1fr \n \n\n /* Fun hover */\n .wiggle display:inline-block; transition: transform .15s ease \n .wiggle:hover transform: rotate(-6deg) scale(1.02) \n </style>\n</head>\n<body>\n <header>\n <div class=\container nav\ role=\navigation\ aria-label=\Main\>\n <div class=\logo\>\n <span class=\paw\ aria-hidden=\true\>🐾</span>\n <span>Snowball</span>\n </div>\n <nav class=\links\ aria-label=\Primary\>\n <a href=\#about\>About</a>\n · \n <a href=\#gallery\>Gallery</a>\n · \n <a href=\#collabs\>Collabs</a>\n · \n <a href=\#contact\ class=\btn\>Book Now</a>\n </nav>\n </div>\n </header>\n\n <main>\n (html comment removed: HERO )\n <section class=\container hero\ id=\home\>\n <div>\n <span class=\tag\>Fluffy • White • Iconic</span>\n <h1>Meet <span class=\wiggle\>Snowball</span> — the influencer cat melting the internet</h1>\n <p>Snowball is a photogenic, fluffy white cat with a knack for cozy poses and brand-friendly vibes. From premium pet treats to lifestyle products, Snowball creates purrfectly engaging content for audiences of all ages.</p>\n <div class=\stats\ aria-label=\Social Stats\>\n <div class=\stat\><b>1.2M</b><br><small>Followers</small></div>\n <div class=\stat\><b>9.4%</b><br><small>Engagement</small></div>\n <div class=\stat\><b>1,100+</b><br><small>Posts</small></div>\n </div>\n <div class=\actions\>\n <a href=\#contact\ class=\btn-primary\>Book a Collab</a>\n <a href=\#gallery\ class=\btn-ghost\>See Photos</a>\n </div>\n </div>\n <div class=\cat-card\ aria-hidden=\true\>\n <span class=\cat-badge\>⭐ Top Creator</span>\n (html comment removed: Replace the URL below with your cat's portrait )\n <div class=\img\ style=\background-image:url('https://images.unsplash.com/photo-1519052537078-e6302a4968d4?q=80&w=1400&auto=format&fit=crop');\></div>\n </div>\n </section>\n\n (html comment removed: ABOUT )\n <section id=\about\>\n <div class=\container about\>\n <div class=\panel\>\n <h2>About Snowball</h2>\n <p>Snowball is a friendly, fluffy, white cat who loves sunbeams, cardboard castles, and camera time. His audience adores gentle humor, soft aesthetics, and educational tidbits about cat care. Snowball partners with brands that value quality and kindness.</p>\n <ul>\n <li>Clean, calming visuals tailored to lifestyle & pet brands</li>\n <li>Short-form + photo content, formatted for Reels/TikTok/Stories</li>\n <li>Flexible usage rights & whitelisting available</li>\n </ul>\n </div>\n <div class=\panel\>\n <h2>Highlights</h2>\n <p class=\note\>Recent wins from the last 12 months</p>\n <div class=\cards\>\n <div class=\card\>\n <h3>Product Launch Success</h3>\n <p>Helped a boutique pet brand sell out a limited-run toy line in 48 hours.</p>\n </div>\n <div class=\card\>\n <h3>Community Giveback</h3>\n <p>Raised funds for local shelters via cozy livestream naps (they loved it!).</p>\n </div>\n <div class=\card\>\n <h3>Global Reach</h3>\n <p>Content localized in 6 languages and featured by major pet blogs.</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n (html comment removed: GALLERY )\n <section id=\gallery\>\n <div class=\container\>\n <h2>Gallery</h2>\n <p class=\note\>Swap these images with your own brand shots. Keep square crops for best layout.</p>\n <div class=\grid\ aria-label=\Photo gallery\>\n (html comment removed: Replace image URLs with your photos of the white fluffy cat )\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=1000&auto=format&fit=crop');\></div>\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1555685812-4b943f1cb0eb?q=80&w=1000&auto=format&fit=crop');\></div>\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1541782814459-bb2af2f05b55?q=80&w=1000&auto=format&fit=crop');\></div>\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1511044568932-338cba0ad803?q=80&w=1000&auto=format&fit=crop');\></div>\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?q=80&w=1000&auto=format&fit=crop');\></div>\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1494256997604-768d1f608cac?q=80&w=1000&auto=format&fit=crop');\></div>\n </div>\n </div>\n </section>\n\n (html comment removed: COLLAB OPTIONS )\n <section id=\collabs\>\n <div class=\container\>\n <h2>Collaboration Packages</h2>\n <div class=\cards\ role=\list\>\n <article class=\card\ role=\listitem\>\n <h3>Starter Meow</h3>\n <p>1 feed post + 2 stories, basic styling, brand tag & link-in-bio for 48h.</p>\n </article>\n <article class=\card\ role=\listitem\>\n <h3>Cozy Creator</h3>\n <p>2 feed posts + 3 stories + 1 Reel (15–30s), simple prop setup, link-in-bio 7 days.</p>\n </article>\n <article class=\card\ role=\listitem\>\n <h3>Deluxe Purr</h3>\n <p>Full shoot direction, 10 edited photos, 2 Reels (30–45s), usage rights for ads.</p>\n </article>\n </div>\n <p class=\note\ style=\margin-top:10px\>Custom bundles available for product launches and seasonal campaigns.</p>\n </div>\n </section>\n\n (html comment removed: SOCIALS & CONTACT )\n <section id=\contact\>\n <div class=\container\>\n <div class=\panel\>\n <h2>Follow & Contact</h2>\n <p class=\note\>Update these with your real handles and email.</p>\n <div class=\socials\ aria-label=\Social links\>\n <a class=\chip\ href=\#\ aria-label=\Instagram\>\n <span class=\dot\ aria-hidden=\true\></span> @snowball.cat\n </a>\n <a class=\chip\ href=\#\ aria-label=\TikTok\>\n <span class=\dot\ aria-hidden=\true\></span> @snowballtok\n </a>\n <a class=\chip\ href=\#\ aria-label=\YouTube\>\n <span class=\dot\ aria-hidden=\true\></span> SnowballTV\n </a>\n <a class=\chip\ href=\#\ aria-label=\Email\>\n <span class=\dot\ aria-hidden=\true\></span> [email protected]\n </a>\n </div>\n <hr style=\margin:22px 0;border:none;border-top:1px solid #e5e7eb\ aria-hidden=\true\ />\n <form action=\#\ method=\get\ aria-label=\Contact form (decorative)\>\n (html comment removed: Note: This is static HTML (no JS backend). Connect to your form endpoint later. )\n <label>\n <span>Name</span>\n <input name=\name\ placeholder=\Your name\ required />\n </label>\n <label>\n <span>Brand</span>\n <input name=\brand\ placeholder=\Company or product\ />\n </label>\n <label>\n <span>Message</span>\n <textarea name=\message\ placeholder=\Tell us about your campaign\></textarea>\n </label>\n <button class=\btn-primary\ type=\submit\ aria-disabled=\true\ title=\This is a demo button\>Send Inquiry</button>\n <p class=\note\>This is a demo site—wire the form to your email or service like Formspree when you're ready.</p>\n </form>\n </div>\n </div>\n </section>\n </main>\n\n <footer>\n <div class=\container\>\n © <span id=\year\>2025</span> Snowball • Made with ❤️ and cat naps\n </div>\n </footer>\n\n (html comment removed: Tiny progressive enhancement: set current year without heavy JS frameworks )\n</body>\n</html>\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\ />\n <title>Snowball — The Fluffy White Cat</title>\n <meta name=\description\ content=\Snowball is a fluffy white cat influencer. Book collaborations, browse photos, and follow his adventures.\ />\n <meta property=\og:title\ content=\Snowball — The Fluffy White Cat\ />\n <meta property=\og:description\ content=\Fluffy. Friendly. Famous. Follow Snowball the cat.\ />\n <meta property=\og:type\ content=\website\ />\n <meta name=\theme-color\ content=\#ffffff\ />\n <style>\n :root\n --bg:#f8fafc; /* light slate */\n --panel:#ffffff; /* white */\n --ink:#0f172a; /* slate-900 */\n --muted:#475569; /* slate-600 */\n --brand:#7c3aed; /* violet-600 */\n --brand-2:#14b8a6; /* teal-500 */\n --ring:rgba(124,58,237,.35);\n --shadow:0 8px 30px rgba(2,8,23,.08);\n --radius:22px;\n \n\n *box-sizing:border-box\n html,bodyheight:100%\n body\n margin:0;\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \Apple Color Emoji\,\Segoe UI Emoji\;\n color:var(--ink);\n background: radial-gradient(1200px 600px at 15% -10%, #eef2ff 0%, transparent 60%),\n radial-gradient(1000px 500px at 110% 10%, #ecfeff 0%, transparent 55%),\n var(--bg);\n line-height:1.6;\n \n acolor:var(--brand); text-decoration:none\n a:hover text-decoration:underline \n\n /* Layout */\n .container width:min(1100px, 92vw); margin-inline:auto \n header\n position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);\n background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));\n border-bottom:1px solid #e2e8f0;\n \n .nav display:flex; align-items:center; justify-content:space-between; padding:14px 0 \n .logo display:flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:.3px \n .logo .paw width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(from 220deg, var(--brand), var(--brand-2)); color:white; box-shadow:var(--shadow) \n .nav a.btn padding:.6rem 1rem; border-radius:999px; background:var(--ink); color:white; box-shadow:var(--shadow) \n .nav a.btn:hover filter:brightness(1.05) \n\n /* Hero */\n .hero display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:70px 0 \n .tag display:inline-block; padding:.35rem .65rem; border-radius:999px; background:#eef2ff; color:#4338ca; font-weight:600; letter-spacing:.2px \n h1 font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height:1.1; margin:.6rem 0 \n .hero p color:var(--muted); font-size: clamp(1rem, 1.2vw, 1.15rem)\n .stats display:flex; gap:22px; margin:26px 0 0 \n .stat background:var(--panel); border-radius:18px; padding:14px 16px; box-shadow:var(--shadow); text-align:center; min-width:120px \n .stat b font-size:1.4rem \n .hero .actions display:flex; gap:12px; margin-top:24px \n .btn-primary background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:white; padding:.8rem 1.1rem; border-radius:12px; display:inline-block; box-shadow:var(--shadow)\n .btn-ghost padding:.8rem 1.1rem; border-radius:12px; border:1px solid #e5e7eb; background:white \n\n .cat-card position:relative; aspect-ratio:1/1; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); border:1px solid #e5e7eb; background:white \n .cat-card .img width:100%; height:100%; background-size:cover; background-position:center \n .cat-card::after content:\\; position:absolute; inset:auto 12px 12px 12px; height:48px; border-radius:16px; background:rgba(255,255,255,.82); backdrop-filter: blur(6px); box-shadow:var(--shadow) \n .cat-badge position:absolute; right:16px; top:16px; background:white; border-radius:999px; padding:.4rem .7rem; box-shadow:var(--shadow); font-weight:700 \n\n /* Sections */\n section padding:70px 0 \n .panel background:var(--panel); border:1px solid #e5e7eb; border-radius:var(--radius); box-shadow:var(--shadow); padding:26px \n\n /* About */\n .about display:grid; grid-template-columns: 1fr 1fr; gap:26px; align-items:center \n .about p color:var(--muted) \n\n /* Gallery */\n .grid display:grid; grid-template-columns: repeat(3, 1fr); gap:14px \n .grid .tile border-radius:18px; overflow:hidden; border:1px solid #e5e7eb; background:#fff; aspect-ratio:1/1; background-size:cover; background-position:center; box-shadow:var(--shadow) \n\n /* Collab Cards */\n .cards display:grid; grid-template-columns: repeat(3, 1fr); gap:18px \n .card border:1px solid #e5e7eb; border-radius:18px; background:white; box-shadow:var(--shadow); padding:20px \n .card h3 margin:.2rem 0 .4rem \n .card p color:var(--muted); margin:0 \n\n /* Socials */\n .socials display:flex; flex-wrap:wrap; gap:12px \n .chip border:1px solid #e5e7eb; border-radius:999px; padding:.55rem .9rem; background:white; display:inline-flex; align-items:center; gap:.5rem; box-shadow:var(--shadow) \n .dot width:8px; height:8px; border-radius:999px; background:var(--brand) \n\n /* Contact (CSS-only, no JS) */\n form display:grid; gap:12px \n input, textarea font:inherit; padding:.85rem 1rem; border-radius:12px; border:1px solid #e5e7eb; background:white \n input:focus, textarea:focus outline:3px solid var(--ring) \n textarea min-height:120px; resize:vertical \n .note color:var(--muted); font-size:.95rem \n\n footer padding:40px 0; color:var(--muted); text-align:center \n\n /* Responsive */\n @media (max-width: 900px)\n .hero grid-template-columns:1fr; padding:42px 0 \n .about grid-template-columns: 1fr \n .grid grid-template-columns: repeat(2, 1fr) \n .cards grid-template-columns: 1fr \n \n\n /* Fun hover */\n .wiggle display:inline-block; transition: transform .15s ease \n .wiggle:hover transform: rotate(-6deg) scale(1.02) \n </style>\n</head>\n<body>\n <header>\n <div class=\container nav\ role=\navigation\ aria-label=\Main\>\n <div class=\logo\>\n <span class=\paw\ aria-hidden=\true\>🐾</span>\n <span>Snowball</span>\n </div>\n <nav class=\links\ aria-label=\Primary\>\n <a href=\#about\>About</a>\n · \n <a href=\#gallery\>Gallery</a>\n · \n <a href=\#collabs\>Collabs</a>\n · \n <a href=\#contact\ class=\btn\>Book Now</a>\n </nav>\n </div>\n </header>\n\n <main>\n (html comment removed: HERO )\n <section class=\container hero\ id=\home\>\n <div>\n <span class=\tag\>Fluffy • White • Iconic</span>\n <h1>Meet <span class=\wiggle\>Snowball</span> — the influencer cat melting the internet</h1>\n <p>Snowball is a photogenic, fluffy white cat with a knack for cozy poses and brand-friendly vibes. From premium pet treats to lifestyle products, Snowball creates purrfectly engaging content for audiences of all ages.</p>\n <div class=\stats\ aria-label=\Social Stats\>\n <div class=\stat\><b>1.2M</b><br><small>Followers</small></div>\n <div class=\stat\><b>9.4%</b><br><small>Engagement</small></div>\n <div class=\stat\><b>1,100+</b><br><small>Posts</small></div>\n </div>\n <div class=\actions\>\n <a href=\#contact\ class=\btn-primary\>Book a Collab</a>\n <a href=\#gallery\ class=\btn-ghost\>See Photos</a>\n </div>\n </div>\n <div class=\cat-card\ aria-hidden=\true\>\n <span class=\cat-badge\>⭐ Top Creator</span>\n (html comment removed: Replace the URL below with your cat's portrait )\n <div class=\img\ style=\background-image:url('https://images.unsplash.com/photo-1519052537078-e6302a4968d4?q=80&w=1400&auto=format&fit=crop');\></div>\n </div>\n </section>\n\n (html comment removed: ABOUT )\n <section id=\about\>\n <div class=\container about\>\n <div class=\panel\>\n <h2>About Snowball</h2>\n <p>Snowball is a friendly, fluffy, white cat who loves sunbeams, cardboard castles, and camera time. His audience adores gentle humor, soft aesthetics, and educational tidbits about cat care. Snowball partners with brands that value quality and kindness.</p>\n <ul>\n <li>Clean, calming visuals tailored to lifestyle & pet brands</li>\n <li>Short-form + photo content, formatted for Reels/TikTok/Stories</li>\n <li>Flexible usage rights & whitelisting available</li>\n </ul>\n </div>\n <div class=\panel\>\n <h2>Highlights</h2>\n <p class=\note\>Recent wins from the last 12 months</p>\n <div class=\cards\>\n <div class=\card\>\n <h3>Product Launch Success</h3>\n <p>Helped a boutique pet brand sell out a limited-run toy line in 48 hours.</p>\n </div>\n <div class=\card\>\n <h3>Community Giveback</h3>\n <p>Raised funds for local shelters via cozy livestream naps (they loved it!).</p>\n </div>\n <div class=\card\>\n <h3>Global Reach</h3>\n <p>Content localized in 6 languages and featured by major pet blogs.</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n (html comment removed: GALLERY )\n <section id=\gallery\>\n <div class=\container\>\n <h2>Gallery</h2>\n <p class=\note\>Swap these images with your own brand shots. Keep square crops for best layout.</p>\n <div class=\grid\ aria-label=\Photo gallery\>\n (html comment removed: Replace image URLs with your photos of the white fluffy cat )\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?q=80&w=1000&auto=format&fit=crop');\></div>\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1555685812-4b943f1cb0eb?q=80&w=1000&auto=format&fit=crop');\></div>\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1541782814459-bb2af2f05b55?q=80&w=1000&auto=format&fit=crop');\></div>\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1511044568932-338cba0ad803?q=80&w=1000&auto=format&fit=crop');\></div>\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?q=80&w=1000&auto=format&fit=crop');\></div>\n <div class=\tile\ style=\background-image:url('https://images.unsplash.com/photo-1494256997604-768d1f608cac?q=80&w=1000&auto=format&fit=crop');\></div>\n </div>\n </div>\n </section>\n\n (html comment removed: COLLAB OPTIONS )\n <section id=\collabs\>\n <div class=\container\>\n <h2>Collaboration Packages</h2>\n <div class=\cards\ role=\list\>\n <article class=\card\ role=\listitem\>\n <h3>Starter Meow</h3>\n <p>1 feed post + 2 stories, basic styling, brand tag & link-in-bio for 48h.</p>\n </article>\n <article class=\card\ role=\listitem\>\n <h3>Cozy Creator</h3>\n <p>2 feed posts + 3 stories + 1 Reel (15–30s), simple prop setup, link-in-bio 7 days.</p>\n </article>\n <article class=\card\ role=\listitem\>\n <h3>Deluxe Purr</h3>\n <p>Full shoot direction, 10 edited photos, 2 Reels (30–45s), usage rights for ads.</p>\n </article>\n </div>\n <p class=\note\ style=\margin-top:10px\>Custom bundles available for product launches and seasonal campaigns.</p>\n </div>\n </section>\n\n (html comment removed: SOCIALS & CONTACT )\n <section id=\contact\>\n <div class=\container\>\n <div class=\panel\>\n <h2>Follow & Contact</h2>\n <p class=\note\>Update these with your real handles and email.</p>\n <div class=\socials\ aria-label=\Social links\>\n <a class=\chip\ href=\#\ aria-label=\Instagram\>\n <span class=\dot\ aria-hidden=\true\></span> @snowball.cat\n </a>\n <a class=\chip\ href=\#\ aria-label=\TikTok\>\n <span class=\dot\ aria-hidden=\true\></span> @snowballtok\n </a>\n <a class=\chip\ href=\#\ aria-label=\YouTube\>\n <span class=\dot\ aria-hidden=\true\></span> SnowballTV\n </a>\n <a class=\chip\ href=\#\ aria-label=\Email\>\n <span class=\dot\ aria-hidden=\true\></span> [email protected]\n </a>\n </div>\n <hr style=\margin:22px 0;border:none;border-top:1px solid #e5e7eb\ aria-hidden=\true\ />\n <form action=\#\ method=\get\ aria-label=\Contact form (decorative)\>\n (html comment removed: Note: This is static HTML (no JS backend). Connect to your form endpoint later. )\n <label>\n <span>Name</span>\n <input name=\name\ placeholder=\Your name\ required />\n </label>\n <label>\n <span>Brand</span>\n <input name=\brand\ placeholder=\Company or product\ />\n </label>\n <label>\n <span>Message</span>\n <textarea name=\message\ placeholder=\Tell us about your campaign\></textarea>\n </label>\n <button class=\btn-primary\ type=\submit\ aria-disabled=\true\ title=\This is a demo button\>Send Inquiry</button>\n <p class=\note\>This is a demo site—wire the form to your email or service like Formspree when you're ready.</p>\n </form>\n </div>\n </div>\n </section>\n </main>\n\n <footer>\n <div class=\container\>\n © <span id=\year\>2025</span> Snowball • Made with ❤️ and cat naps\n </div>\n </footer>\n\n (html comment removed: Tiny progressive enhancement: set current year without heavy JS frameworks )\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:trueWaivio object "WanderVerse" has been created
@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>WanderVerse - Travel Blog</title>\n <style>\n body \n margin: 0;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #f9f9f9;\n color: #333;\n line-height: 1.6;\n \n nav \n display: flex;\n justify-content: center;\n gap: 30px;\n background-color: rgba(0,0,0,0.6);\n position: fixed;\n width: 100%;\n top: 0;\n padding: 15px 0;\n z-index: 10;\n \n nav a \n color: white;\n text-decoration: none;\n font-weight: bold;\n transition: color 0.3s ease;\n \n nav a:hover \n color: #ffdd00;\n \n header \n background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e') no-repeat center center/cover;\n color: white;\n height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding-top: 80px;\n \n header h1 \n font-size: 3.5rem;\n margin-bottom: 10px;\n text-shadow: 2px 2px 8px rgba(0,0,0,0.6);\n \n header p \n font-size: 1.5rem;\n max-width: 600px;\n text-shadow: 1px 1px 5px rgba(0,0,0,0.5);\n \n section \n padding: 60px 20px;\n max-width: 1000px;\n margin: auto;\n \n .about \n background-color: #fff;\n border-radius: 12px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n padding: 40px;\n \n .about h2 \n color: #0077b6;\n margin-bottom: 20px;\n \n .contact \n text-align: center;\n background-color: #0077b6;\n color: white;\n padding: 60px 20px;\n \n .contact a \n color: #ffdd00;\n text-decoration: none;\n font-weight: bold;\n \n footer \n text-align: center;\n padding: 15px;\n background-color: #023e8a;\n color: #fff;\n \n </style>\n</head>\n<body>\n <nav>\n <a href=\https://shopper-paradise.com/object/7ujfq-shop\>Shop</a>\n <a href=\https://shopper-paradise.com/object/41sbwx-books\>Books</a>\n <a href=\https://shopper-paradise.com/object/vpe-camp-life/newsfeed\>Camp life</a>\n <a href=\https://shopper-paradise.com/object/ljc-legal\>Legal</a>\n </nav>\n\n <header>\n <h1>WanderVerse</h1>\n <p>Exploring the world, one story at a time. Join me as I uncover hidden gems and unforgettable journeys.</p>\n </header>\n\n <section class=\about\>\n <h2>About Me</h2>\n <p>Hello, fellow travelers! I'm Alex — a lifelong wanderer, storyteller, and explorer at heart. This blog is my personal travel diary where I share honest travel experiences, photography, and tips from around the globe. Whether you're a weekend adventurer or a full-time nomad, I hope my stories inspire your next journey.</p>\n </section>\n\n <section class=\contact\>\n <h2>Contact Me</h2>\n <p>Have questions, collaboration ideas, or just want to say hi?</p>\n <p>Email me at <a href=\mailto:[email protected]\>[email protected]</a></p>\n </section>\n\n <footer>\n <p>© 2025 WanderVerse | All Rights Reserved</p>\n </footer>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:trueWaivio object "Datafiniti Product Data Schema" has been created
wiv01 added name(en-US):
Datafiniti Product Data Schema
@wiv01 added htmlContent (English):
code:
javascript\n<!DOCTYPE html><html lang=\en\><head><meta charset=\UTF-8\><meta name=\viewport\ content=\width=device-width, initial-scale=1.0\><title>Datafiniti Product Data Schema</title><style> body font-family: 'Segoe UI', sans-serif; margin: 0; background: #fff; color: #333; header background: #f87007; color: white; padding: 2rem 1rem; text-align: center; .container max-width: 1000px; margin: 2rem auto; padding: 1rem; h1, h2 text-align: center; table width: 100%; border-collapse: collapse; margin-top: 2rem; table-layout: fixed; word-wrap: break-word; th, td border: 1px solid #ddd; padding: 0.75rem; text-align: left; vertical-align: top; word-break: break-word; th background: #f87007; color: white; tr:nth-child(even) background: #f9f9f9; td code background: #f2f2f2; padding: 0.2rem 0.4rem; border-radius: 4px; white-space: pre-line; td white-space: pre-line; td[data-label=\Field Name\], td[data-label=\Example Value (in JSON)\] vertical-align: middle; a color: #f87007; a:visited color: #f87007; td[data-label=\Description\] line-height: 1.6; @media (max-width: 768px) table, thead, tbody, th, td, tr display: block; tr margin-bottom: 1rem; th display: none; td border: none; position: relative; padding-left: 50%; td::before content: attr(data-label); position: absolute; left: 1rem; top: 0; font-weight: bold; color: #f87007; footer text-align: center; margin: 2rem 0; color: #777;</style></head><body><header> <h1>Datafiniti Product Data Schema</h1> </header><div class=\container\><p>The product data schema below lists all available fields in a product record. Note that actual product records (actually, most of them) may not have every field present.</p><table><thead><tr><th style=\width: 23%;\>Field Name</th><th style=\width: 37%;\>Example Value (in JSON)</th><th style=\width: 40%;\>Description</th></tr></thead><tbody><tr><td data-label=\Field Name\><code>asins</code></td><td data-label=\Example Value (in JSON)\><code>\asins\: \B0009XCFRE\</code></td><td data-label=\Description\>The ASIN (Amazon identifier) used for this product.<br>Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>brand</code></td><td data-label=\Example Value (in JSON)\><code>\brand\: \Sumsung Electronics\</code></td><td data-label=\Description\>The brand name of this product as presented by the data source.<br>Field type: text</td></tr><tr><td data-label=\Field Name\><code>categories</code></td><td data-label=\Example Value (in JSON)\><code>\categories\: [ \Home Improvement\, \Heating, Cooling, & Air Quality\, \Heaters\, \Propane Heaters\ ]</code></td><td data-label=\Description\>A list of category keywords used for this product across multiple sources.<br>Field type: text</td></tr><tr><td data-label=\Field Name\><code>canonicalBrand</code></td><td data-label=\Example Value (in JSON)\><code>\canonicalBrand\: \Sumsung\</code></td><td data-label=\Description\>The canonical brand name after normalization of the name from the source.<br>Field type: text</td></tr><tr><td data-label=\Field Name\><code>colors</code></td><td data-label=\Example Value (in JSON)\><code>\colors\: [ \White\, \Black\ ]</code></td><td data-label=\Description\>A list of colors available for this product.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>count</code></td><td data-label=\Example Value (in JSON)\><code>\count\: \30\</code></td><td data-label=\Description\>The number of units included in the product packaging. Can include a description of the unit.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>dateAdded</code></td><td data-label=\Example Value (in JSON)\><code>\dateAdded\: \2017-01-08T19:12:13Z\</code></td><td data-label=\Description\>The date this product was first added to the product database.
Field type: date</td></tr><tr><td data-label=\Field Name\><code>dateUpdated</code></td><td data-label=\Example Value (in JSON)\><code>\dateUpdated\: \2017-01-08T19:12:13Z\</code></td><td data-label=\Description\>The most recent date this product was updated or seen by our system.
Field type: date</td></tr><tr><td data-label=\Field Name\><code>descriptions</code></td><td data-label=\Example Value (in JSON)\><code>\descriptions\: [ \dateSeen\: \2017-01-08T19:12:13Z\, \sourceURLs\: [ \https://www.domain.com/p/123\ ], \value\: \Now you can enjoy cooking your favorite food.\ , \sourceURLs\: [ \http://www.website.com/4567\ ], \value\: \The Worthington Pro Grade 20 lb. Empty Propane Tank goes with your gas barbecue grill (sold separately) and accommodates 4.7 gallons of gas.\ ]</code></td><td data-label=\Description\>Descriptions across sources; includes <code>dateSeen</code>, <code>sourceURLs</code>, and text <code>value</code>.</td></tr><tr><td data-label=\Field Name\><code>dimension</code></td><td data-label=\Example Value (in JSON)\><code>dimension: \23 in x 43.7 in x 30 in\, dimension: \16 ft x 22 ft\, dimension: \15 mm x 42 mm x 34 mm\</code></td><td data-label=\Description\>Product dimensions (L × W × H) with units. <a href=\https://docs.datafiniti.co/docs/dimensions-normalization\>Normalization</a></td></tr><tr><td data-label=\Field Name\><code>domains</code></td><td data-label=\Example Value (in JSON)\><code>\domains\: [ \www.domain.com\, \www.website.com\ ]</code></td><td data-label=\Description\>A list of each unique domain found in the sourceURLs field.
Field type: domain</td></tr><tr><td data-label=\Field Name\><code>ean</code></td><td data-label=\Example Value (in JSON)\><code>\ean\: [ \0014045125963\, \0014045125965\ ]</code></td><td data-label=\Description\>The EAN codes for this product. There may be more than one EAN in the list when a product has multiple variations,
each using a different EAN.
<a href=\https://en.wikipedia.org/wiki/International_Article_Number\>Learn more about EANs</a>.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>ean13</code></td><td data-label=\Example Value (in JSON)\><code>\ean13\:\0014045125963\</code></td><td data-label=\Description\>The EAN-13 code for this product.
<a href=\https://en.wikipedia.org/wiki/International_Article_Number\>Learn more about EANs</a>.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>ean8</code></td><td data-label=\Example Value (in JSON)\><code>\ean8\:\96385074\</code></td><td data-label=\Description\>The EAN-8 code for this product.
<a href=\https://en.wikipedia.org/wiki/International_Article_Number\>Learn more about EANs</a>.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>features</code></td><td data-label=\Example Value (in JSON)\><code>\features\: [ \key\: \Count\, \replace\: \true\, \value\: [ \1\ ] , \key\: \Included\, \value\: [ \Batteries\ ] ]</code></td><td data-label=\Description\>A list of features associated with this product. The feature list can be collected from specific feature sections available on product listings for the product. It can also serve as a catch-all field for miscellaneous characteristics of this product that don't make sense to include as top-level fields.
Field type: nested

Each feature contains:
key: A label for this feature.
Field type: text

replace: Flag indicating value field is replaced versus appended.
Field type: boolean

value: A list of possible values for this feature.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>financingAndLeasing</code></td><td data-label=\Example Value (in JSON)\><code>\financingAndLeasing\: [ \additionalDetails\: [ \acquisitionFee: $925\, \mileOverageFee: $0.30/mile\ ], \apr\: 4.15, \currency\: \USD\, \dateSeen\: [ \2018-09-20T04:00:00Z\ ], \description\: \Well equipped with features\, \disclaimers\: \Offer not valid in Puerto Rico. Lease financing available\, \dueAtSigningMax\: 7694, \dueAtSigningMin\: 7694, \milesPerYear\: 22500, \monthlyPaymentMax\: 1269, \monthlyPaymentMin\: 1269, \name\: \2018 Civic Si Coupe 6 Speed Manual Featured Special Lease\, \offerStartDate\: \2018-10-31T00:00:00.000Z\, \offerEndDate\: \2018-09-05T00:00:00.000Z\, \term\: \36 months\, \type\: \leasing\, \securityDepositMax\: 0, \securityDepositMin\: 0, \sourceURLs\: [ ] ]</code></td><td data-label=\Description\>Financing/lease terms; includes <code>apr</code>, <code>term</code>, payments, due, dates, and <code>sourceURLs</code>.</td></tr><tr><td data-label=\Field Name\><code>flavors</code></td><td data-label=\Example Value (in JSON)\><code>\flavors\: [ \Fruit Punch\, \Berry\, \Grape\ ]</code></td><td data-label=\Description\>A list of flavors available for this product.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>gtins</code></td><td data-label=\Example Value (in JSON)\><code>\gtins\: [ \0014045125963\, \0014045125965\, \014045125963\, \014045125961\, \425261\, \3882215542\ ]</code></td><td data-label=\Description\>A list of all Global Trade Identifier Numbers for this product. Values will include all ean, isbn, and upc values.
<a href=\https://en.wikipedia.org/wiki/Global_Trade_Item_Number\>Learn more about GTINs</a>.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>imageURLs</code></td><td data-label=\Example Value (in JSON)\><code>\imageURLs\: [ \https://i5.images.com/asr.jpeg\ ]</code></td><td data-label=\Description\>A list of image URLs for this product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>isbn</code></td><td data-label=\Example Value (in JSON)\><code>\isbn\: \3882215542\</code></td><td data-label=\Description\>The ISBN code for this product.
<a href=\https://en.wikipedia.org/wiki/International_Standard_Book_Number\>Learn more about ISBNs</a>.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>keys</code></td><td data-label=\Example Value (in JSON)\><code>\keys\: [ \014045125963\, \0014045125963\, \worthington/299581\ ]</code></td><td data-label=\Description\>A list of internal Datafiniti identifiers for this product. The keys field is used to merge raw data from individual sources into the master Datafiniti record. <a href=\https://docs.datafiniti.co/docs/how-product-records-are-merged\>Learn how this works</a>
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>manufacturer</code></td><td data-label=\Example Value (in JSON)\><code>\manufacturer\: \Worthington\</code></td><td data-label=\Description\>The manufacturer of this product.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>manufacturerNumber</code></td><td data-label=\Example Value (in JSON)\><code>\manufacturerNumber\: \299581\</code></td><td data-label=\Description\>The manufacturer or model number of this product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>merchants</code></td><td data-label=\Example Value (in JSON)\><code>\merchants\: [ \address\: \2801 S Ih 35\, \availability\: \...\, \city\: \Austin\, \country\: \US\, \dateSeen\: \2017-01-08T19:12:13Z\, \isPrivateSeller\: false \name\: \Zappysales\, \phone\: \5127131234\, \postalCode\: \78701\, \province\: \TX\ , \dateSeen\: [ \2017-01-08T19:12:13Z\ ], \name\: \Next Day Mro, Llc\ ]</code></td><td data-label=\Description\>Merchants selling the product; includes contact/location and <code>dateSeen</code>.</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceAmount</code></td><td data-label=\Example Value (in JSON)\><code>\mostRecentPriceAmount\: 85</code></td><td data-label=\Description\>The product's most recent price amount scraped.
Field type: float</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceAvailability</code></td><td data-label=\Example Value (in JSON)\><code>\mostRecentPriceAvailability\: \true\</code></td><td data-label=\Description\>The product's most recent price availability scraped.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceByDomain</code></td><td data-label=\Example Value (in JSON)\><code>\mostRecentPriceByDomain\: [ \amount\: 79.95, \availability\: \true\, \currency\: \USD\, \isSale\: \true\, \domain\: \www.nordstrom.com\, \sourceURL\: \https://www.nordstrom.com/s/sea-level-multifit-cross-front-bikini-top/5746068\, \date\: \2022-03-29T16:43:23.440Z\, \firstDateSeen\: \2022-03-29T16:59:38.617Z\ ], , \amount\: 89.95, \availability\: \true\, \currency\: \USD\, \isSale\: \false\, \domain\: \www.sephora.com\, \sourceURL\: \https://www.sephora.com/s/5746068\, \date\: \2022-03-29T16:40:43.440Z\ ]</code></td><td data-label=\Description\>Latest price per domain: amount, availability, currency, <code>isSale</code>, domain, <code>sourceURL</code>, dates.</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceColor</code></td><td data-label=\Example Value (in JSON)\><code>\mostRecentPriceColor\: \Torrid - coral with shimmer\</code></td><td data-label=\Description\>The most recent color(s) available for this product.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceCondition</code></td><td data-label=\Example Value (in JSON)\><code>\condition\: \Used\</code></td><td data-label=\Description\>The condition most recently scrape of the product when being sold at this price.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceCurrency</code></td><td data-label=\Example Value (in JSON)\><code>\mostRecentPriceCurrency\: \USD\</code></td><td data-label=\Description\>The currency listed for mostRecentPriceAmount.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceDate</code></td><td data-label=\Example Value (in JSON)\><code>\mostRecentPriceDate\: \2022-03-29T19:26:49.157Z\</code></td><td data-label=\Description\>The most recent price date of the product record.
Field type: date</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceDomain</code></td><td data-label=\Example Value (in JSON)\><code>\mostRecentPriceDomain\: \www.nordstrom.com\</code></td><td data-label=\Description\>The domain of the most recent price scraped by Datafiniti
Field type: domain</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceIsSale</code></td><td data-label=\Example Value (in JSON)\><code>\mostRecentPriceIsSale\: \true\</code></td><td data-label=\Description\>A true/false for whether or not this price is a sale/discounted price.
Field type: boolean</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceSize</code></td><td data-label=\Example Value (in JSON)\><code>mostRecentPriceSize: \M\</code></td><td data-label=\Description\>The size associated with this mostRecentPrice.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>mostRecentPriceSourceURL</code></td><td data-label=\Example Value (in JSON)\><code>\mostRecentPriceSourceURL\: \https://www.nordstrom.com/s/ara-gloria-gore-tex-waterproof-bootie-women/5684497\</code></td><td data-label=\Description\>The most recent URL used to generate data for this product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>name</code></td><td data-label=\Example Value (in JSON)\><code>\name\: \Worthington 20-lb Tank\</code></td><td data-label=\Description\>The product's name.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>prices</code></td><td data-label=\Example Value (in JSON)\><code>\prices\: [ \amountMin\: 59.96, \amountMax\: 59.96, \availability\: \true\, \color\: \Red\, \condition\: \New\, \count\: \15\, \currency\: \USD\, \dateSeen\: [ \2016-06-10T00:00:00Z\ ], \flavor\: \Cherry\, \isSale\: \false\, \isSold\: \false\, \merchant\: \domain.com\, \offer\: \22% off\, \returnPolicy\: \90-Day\, \shipping\: \FREE shipping\, \size\: \S\, \sourceURLs\: [ \https://www.domain.com/p/123\, \warranty\: \...\ ] , \amountMin\: 62.06, \amountMax\: 72.06, \condition\: \new\, \currency\: \USD\, \dateSeen\: [ \2016-10-28T00:00:00Z\ ], \merchant\: \MRO - website.com\, \sourceURLs\: [ \http://www.website.com/4567\ ] ]</code></td><td data-label=\Description\>Per-source prices: amount/range, availability, condition, options, dates, <code>sourceURLs</code>.</td></tr><tr><td data-label=\Field Name\><code>primaryCategories</code></td><td data-label=\Example Value (in JSON)\><code>\primaryCategories\: [ \Electronics\ ]</code></td><td data-label=\Description\>A list of standardized categories to which this product belongs. Category values can be found <a href=\https://docs.datafiniti.co/docs/possible-values-for-product-fields\>here</a>.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>primaryImageURLs</code></td><td data-label=\Example Value (in JSON)\><code>\primaryImageURLs: [ \https://www.amazon.com/i/123.jpg\ \https://www.target.com/i/abc.jpg\ ]</code></td><td data-label=\Description\>A list of URLs for the primary images taken from each domain sourced in this record. This list will only contain 1 URL per domain.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>quantities</code></td><td data-label=\Example Value (in JSON)\><code>\quantities\: [ \dateSeen\: [ \2013-06-02T16:00:00Z\, \2014-05-01T14:00:00Z\ ], \sourceURLs\: [ \http://www.website.com/4567\ ], \value\: 20 ]</code></td><td data-label=\Description\>Observed stock per source; includes <code>dateSeen</code>, <code>sourceURLs</code>, and <code>value</code>.</td></tr><tr><td data-label=\Field Name\><code>reviews</code></td><td data-label=\Example Value (in JSON)\><code>\reviews\: [ \date\: \2015-06-16T00:00:00Z\, \dateSeen\: \2016-05-15T00:00:00Z\, \didPurchase\: true, \doRecommend\: true, \id\: \1234\ \numHelpful\: 4, \rating\: 4, \sourceURLs\: [ \http://www.website.com/4567\ ], \text\: \Nice tank at a below average cost for propane tanks.\, \title\: \Solid Propane Tank\, \userCity\: \...\, \username\: \Cole33\, \userProvince\: \...\ , \date\: \2015-01-06T00:00:00Z\, \dateSeen\: [ \2016-05-15T00:00:00Z\ ], \rating\: 5, \sourceURLs\: [ \https://www.domain.com/p/123\ ], \text\: \Holds propane and does not leak. Completed the given gift.\, \title\: \tanked\, \username\: \joel01\ ]</code></td><td data-label=\Description\>User reviews: <code>rating</code>, text, dates, <code>didPurchase</code>/<code>doRecommend</code>, <code>numHelpful</code>, <code>sourceURLs</code>.</td></tr><tr><td data-label=\Field Name\><code>sdsURLs</code></td><td data-label=\Example Value (in JSON)\><code>\sdsURLs\: [ \https://images.homedepot-static.com/catalog /pdfImages/8c/8c72c7b4-1d29-41a3-b8ba-43699e42d44b.pdf\ ]</code></td><td data-label=\Description\>A list of URLs that lead to SDS for the given record.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>secondaryCategories</code></td><td data-label=\Example Value (in JSON)\><code>\secondaryCategories\: [ \Cell Phones\ ]</code></td><td data-label=\Description\>A list of second level standardized categories to which this product belongs.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>sizes</code></td><td data-label=\Example Value (in JSON)\><code>\sizes\: [ \Large\, \Medium\, \Small\ ]</code></td><td data-label=\Description\>A list of sizes available for this product.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>skus</code></td><td data-label=\Example Value (in JSON)\><code>\skus\: [ \sourceURLs\: [ \http://www.web.com/p/123\ ], \value\: \1234XK6\ ]</code></td><td data-label=\Description\>A list of SKUs for this product. SKUs are typically specific to individual retailers or websites.
Field type: nested

SKU objects may contain:
_ sourceURLs: A list of URLs where this SKU was seen.
Field type: keyword

value: The actual SKU.
Field type: text</td></tr><tr><td data-label=\Field Name\><code>sourceURLs</code></td><td data-label=\Example Value (in JSON)\><code>\sourceURLs\: [ \https://www.domain.com/p/123, \http://www.website.com/4567\ ]</code></td><td data-label=\Description\>A list of URLs used to generate data for this product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>taxonomy</code></td><td data-label=\Example Value (in JSON)\><code>\taxonomy\ : [ \automotive > motorcycle & powersports > parts > wheels & tires > tires & accessories > tires & inner tubes > motorcycle & scooter > motorcycle > street\ ]</code></td><td data-label=\Description\>Hierarchical classification(s) of a product.
Field type: taxonomy</td></tr><tr><td data-label=\Field Name\><code>taxonomyLevel1</code></td><td data-label=\Example Value (in JSON)\><code>\taxonomyLevel1\ : [ \automotive\ ]</code></td><td data-label=\Description\>Top level classification of a product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>taxonomyLevel2</code></td><td data-label=\Example Value (in JSON)\><code>\taxonomyLevel2\ : [ \motorcycle & powersports\ ]</code></td><td data-label=\Description\>Second level classification of a product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>taxonomyLevel3</code></td><td data-label=\Example Value (in JSON)\><code>\taxonomyLevel3\ : [ \parts\ ]</code></td><td data-label=\Description\>Third level classification of a product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>taxonomyLevel4</code></td><td data-label=\Example Value (in JSON)\><code>\taxonomyLevel4\ : [ \wheels & tires\ ]</code></td><td data-label=\Description\>Fourth level classification of a product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>taxonomyLevel5</code></td><td data-label=\Example Value (in JSON)\><code>\taxonomyLevel5\ : [ \tires & accessories\ ]</code></td><td data-label=\Description\>Fifth level classification of a product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>taxonomyLevel6</code></td><td data-label=\Example Value (in JSON)\><code>\taxonomyLevel6\ : [ \tires & inner tubes\ ]</code></td><td data-label=\Description\>Sixth level classification of a product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>taxonomyLevel7</code></td><td data-label=\Example Value (in JSON)\><code>\taxonomyLevel7\ : [ \motorcycle & scooter\ ]</code></td><td data-label=\Description\>Seventh level classification of a product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>taxonomyLevel8</code></td><td data-label=\Example Value (in JSON)\><code>\taxonomyLevel8\ : [ \motorcycle\ ]</code></td><td data-label=\Description\>Eighth level classification of a product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>taxonomyLevel9</code></td><td data-label=\Example Value (in JSON)\><code>\taxonomyLevel9\ : [ \street\ ]</code></td><td data-label=\Description\>Ninth level classification of a product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>upc</code></td><td data-label=\Example Value (in JSON)\><code>\upc\: [ \014045125963\, \014045125961\ ]</code></td><td data-label=\Description\>The UPC code for this product. There may be more than one UPC in the list when a product has multiple variations, each using a different UPC. <a href=\https://en.wikipedia.org/wiki/Universal_Product_Code\>Learn more about UPCs</a>.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>upca</code></td><td data-label=\Example Value (in JSON)\><code>\upca\:\014045125963\</code></td><td data-label=\Description\>The UPC-A code for this product. <a href=\https://en.wikipedia.org/wiki/Universal_Product_Code\>Learn more about UPCs</a>.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>upce</code></td><td data-label=\Example Value (in JSON)\><code>\upce\:\425261\</code></td><td data-label=\Description\>The UPC-E code for this product. <a href=\https://en.wikipedia.org/wiki/Universal_Product_Code\>Learn more about UPCs</a>.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>vin</code></td><td data-label=\Example Value (in JSON)\><code>\vin\: \1FTMF1ET8EFB00361\</code></td><td data-label=\Description\>The VIN code for this product. This is specific to car listings. <a href=\https://en.wikipedia.org/wiki/Vehicle_identification_number\>Learn more about VINs</a>.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>websiteIDs</code></td><td data-label=\Example Value (in JSON)\><code>\websiteIDs\: [ \domain.com-123\, \website.com-4567\ ]</code></td><td data-label=\Description\>A list of website IDs for this product. Website IDs are tied to a specific online retailer. They are the unique identifier used by website. They are used by Datafiniti when other unique identifiers are not available for a product.
Field type: keyword</td></tr><tr><td data-label=\Field Name\><code>weight</code></td><td data-label=\Example Value (in JSON)\><code>\weight\: \20 lbs\</code></td><td data-label=\Description\>The weight of the product. Units included.
Field type: text</td></tr></tbody></table><p>Original source <a href=\https://docs.datafiniti.co/docs/product-data-schema\>https://docs.datafiniti.co/docs/product-data-schema</a>.</p></div><footer>© 2025 Built with Waivio Social Sites ❤️</footer></body></html>\n\n\n,hideSignIn:true,hideMenu:trueWaivio object "test html 16101204" has been created
wiv01 added name(en-US):
test html 16101204
Waivio object "test html 16101458" has been created
wiv01 added name(en-US):
test html 16101458
@wiv01 added htmlContent (English):
code:\n\n
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>Joan Rowling — Official Site</title>\n <style>\n * \n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Poppins', sans-serif;\n \n body \n background: linear-gradient(135deg, #f3f4f7, #ffffff);\n color: #222;\n line-height: 1.6;\n \n header \n position: sticky;\n top: 0;\n background: #fff;\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n z-index: 1000;\n \n nav \n max-width: 1100px;\n margin: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n \n nav h1 \n font-size: 1.4rem;\n color: #333;\n font-weight: 600;\n letter-spacing: 1px;\n \n nav a \n color: #333;\n text-decoration: none;\n margin-left: 1.2rem;\n font-weight: 500;\n transition: color 0.3s;\n \n nav a:hover \n color: #0066cc;\n \n\n .hero \n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n max-width: 1100px;\n margin: 3rem auto;\n padding: 0 2rem;\n \n .hero-text \n flex: 1 1 450px;\n \n .hero-text h2 \n font-size: 2.5rem;\n color: #111;\n margin-bottom: 1rem;\n \n .hero-text p \n color: #555;\n margin-bottom: 1.5rem;\n \n .hero-text a \n display: inline-block;\n background: #0066cc;\n color: #fff;\n padding: 0.75rem 1.5rem;\n border-radius: 8px;\n text-decoration: none;\n transition: background 0.3s;\n \n .hero-text a:hover \n background: #004999;\n \n .hero-img img \n width: 280px;\n border-radius: 50%;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n \n\n section \n max-width: 1000px;\n margin: 3rem auto;\n padding: 0 2rem;\n \n section h2 \n text-align: center;\n margin-bottom: 1.5rem;\n font-size: 2rem;\n color: #111;\n \n section p, section li \n color: #444;\n margin-bottom: 0.5rem;\n \n ul \n list-style: none;\n padding: 0;\n \n .card \n background: #fff;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.05);\n padding: 1.5rem;\n margin-bottom: 1.5rem;\n transition: transform 0.3s, box-shadow 0.3s;\n \n .card:hover \n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(0,0,0,0.08);\n \n\n footer \n text-align: center;\n padding: 2rem 1rem;\n background: #f7f8fa;\n color: #777;\n font-size: 0.9rem;\n border-top: 1px solid #e0e0e0;\n \n\n a.button \n display: inline-block;\n padding: 0.75rem 1.5rem;\n background: #0066cc;\n color: #fff;\n text-decoration: none;\n border-radius: 8px;\n transition: background 0.3s;\n \n a.button:hover \n background: #004999;\n \n\n @media (max-width: 768px) \n .hero-text h2 font-size: 2rem; \n nav flex-direction: column; \n \n </style>\n</head>\n<body>\n <header>\n <nav>\n <h1>Joan Rowling</h1>\n <div>\n <a href=\https://didicherednyk.site/object/ljc-legal\>About</a>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Works</a>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Awards</a>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Contact</a>\n </div>\n </nav>\n </header>\n\n <section class=\hero\>\n <div class=\hero-text\>\n <h2>Joan Rowling — Author, Speaker & Philanthropist</h2>\n <p>Official site of acclaimed author Joan Rowling. Explore her literary journey, charitable work, and contributions to global storytelling.</p>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Discover More</a>\n </div>\n <div class=\hero-img\>\n <img src=\https://upload.wikimedia.org/wikipedia/commons/5/5d/J._K._Rowling_2010.jpg\ alt=\Joan Rowling portrait\>\n </div>\n </section>\n\n <section>\n <h2>Biography</h2>\n <div class=\card\>\n <p>Joan Rowling is a British author best known for creating the Harry Potter series, one of the most beloved literary franchises in the world. Her works have inspired millions, promoting imagination, courage, and compassion.</p>\n <p>Beyond literature, she is recognized for her philanthropic initiatives, including foundations focused on children's welfare, equality, and literacy.</p>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Read More</a>\n </div>\n </section>\n\n <section>\n <h2>Selected Works</h2>\n <div class=\card\>\n <ul>\n <li><strong>Harry Potter Series</strong> — A seven-book saga that shaped a generation.</li>\n <li><strong>The Casual Vacancy</strong> — A powerful contemporary novel.</li>\n <li><strong>Cormoran Strike Series</strong> (as Robert Galbraith) — Gripping modern detective fiction.</li>\n </ul>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Explore Works</a>\n </div>\n </section>\n\n <section>\n <h2>Awards & Recognition</h2>\n <div class=\card\>\n <ul>\n <li>Order of the British Empire (OBE) — 2001</li>\n <li>British Book Awards — Author of the Year</li>\n <li>Legion of Honour — France, 2009</li>\n </ul>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Full List of Awards</a>\n </div>\n </section>\n\n <section>\n <h2>Contact</h2>\n <div class=\card\>\n <p>For professional inquiries, rights, or interviews, please contact official representatives below.</p>\n <ul>\n <li>Email: <a href=\https://didicherednyk.site/object/ljc-legal\>[email protected]</a></li>\n <li>Press: <a href=\https://didicherednyk.site/object/ljc-legal\>[email protected]</a></li>\n </ul>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Get in Touch</a>\n </div>\n </section>\n\n <footer>\n <p>© 2025 Joan Rowling. All rights reserved. <a href=\https://didicherednyk.site/object/ljc-legal\>Visit Official Page</a></p>\n </footer>\n</body>\n</html>\n\n\n\n,hideSignIn:true,hideMenu:true@wiv01 added htmlContent (English):
code:\n\n
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>Joan Rowling — Official Site</title>\n <style>\n * \n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Poppins', sans-serif;\n \n body \n background: linear-gradient(135deg, #f3f4f7, #ffffff);\n color: #222;\n line-height: 1.6;\n \n header \n position: sticky;\n top: 0;\n background: #fff;\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n z-index: 1000;\n \n nav \n max-width: 1100px;\n margin: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n \n nav h1 \n font-size: 1.4rem;\n color: #333;\n font-weight: 600;\n letter-spacing: 1px;\n \n nav a \n color: #333;\n text-decoration: none;\n margin-left: 1.2rem;\n font-weight: 500;\n transition: color 0.3s;\n \n nav a:hover \n color: #0066cc;\n \n\n .hero \n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n max-width: 1100px;\n margin: 3rem auto;\n padding: 0 2rem;\n \n .hero-text \n flex: 1 1 450px;\n \n .hero-text h2 \n font-size: 2.5rem;\n color: #111;\n margin-bottom: 1rem;\n \n .hero-text p \n color: #555;\n margin-bottom: 1.5rem;\n \n .hero-text a \n display: inline-block;\n background: #0066cc;\n color: #fff;\n padding: 0.75rem 1.5rem;\n border-radius: 8px;\n text-decoration: none;\n transition: background 0.3s;\n \n .hero-text a:hover \n background: #004999;\n \n .hero-img img \n width: 280px;\n border-radius: 50%;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n \n\n section \n max-width: 1000px;\n margin: 3rem auto;\n padding: 0 2rem;\n \n section h2 \n text-align: center;\n margin-bottom: 1.5rem;\n font-size: 2rem;\n color: #111;\n \n section p, section li \n color: #444;\n margin-bottom: 0.5rem;\n \n ul \n list-style: none;\n padding: 0;\n \n .card \n background: #fff;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.05);\n padding: 1.5rem;\n margin-bottom: 1.5rem;\n transition: transform 0.3s, box-shadow 0.3s;\n \n .card:hover \n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(0,0,0,0.08);\n \n\n footer \n text-align: center;\n padding: 2rem 1rem;\n background: #f7f8fa;\n color: #777;\n font-size: 0.9rem;\n border-top: 1px solid #e0e0e0;\n \n\n a.button \n display: inline-block;\n padding: 0.75rem 1.5rem;\n background: #0066cc;\n color: #fff;\n text-decoration: none;\n border-radius: 8px;\n transition: background 0.3s;\n \n a.button:hover \n background: #004999;\n \n\n @media (max-width: 768px) \n .hero-text h2 font-size: 2rem; \n nav flex-direction: column; \n \n </style>\n</head>\n<body>\n <header>\n <nav>\n <h1>Joan Rowling</h1>\n <div>\n <a href=\https://didicherednyk.site/object/ljc-legal\>About</a>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Works</a>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Awards</a>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Contact</a>\n </div>\n </nav>\n </header>\n\n <section class=\hero\>\n <div class=\hero-text\>\n <h2>Joan Rowling — Author, Speaker & Philanthropist</h2>\n <p>Official site of acclaimed author Joan Rowling. Explore her literary journey, charitable work, and contributions to global storytelling.</p>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Discover More</a>\n </div>\n <div class=\hero-img\>\n <img src=\https://upload.wikimedia.org/wikipedia/commons/5/5d/J._K._Rowling_2010.jpg\ alt=\Joan Rowling portrait\>\n </div>\n </section>\n\n <section>\n <h2>Biography</h2>\n <div class=\card\>\n <p>Joan Rowling is a British author best known for creating the Harry Potter series, one of the most beloved literary franchises in the world. Her works have inspired millions, promoting imagination, courage, and compassion.</p>\n <p>Beyond literature, she is recognized for her philanthropic initiatives, including foundations focused on children's welfare, equality, and literacy.</p>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Read More</a>\n </div>\n </section>\n\n <section>\n <h2>Selected Works</h2>\n <div class=\card\>\n <ul>\n <li><strong>Harry Potter Series</strong> — A seven-book saga that shaped a generation.</li>\n <li><strong>The Casual Vacancy</strong> — A powerful contemporary novel.</li>\n <li><strong>Cormoran Strike Series</strong> (as Robert Galbraith) — Gripping modern detective fiction.</li>\n </ul>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Explore Works</a>\n </div>\n </section>\n\n <section>\n <h2>Awards & Recognition</h2>\n <div class=\card\>\n <ul>\n <li>Order of the British Empire (OBE) — 2001</li>\n <li>British Book Awards — Author of the Year</li>\n <li>Legion of Honour — France, 2009</li>\n </ul>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Full List of Awards</a>\n </div>\n </section>\n\n <section>\n <h2>Contact</h2>\n <div class=\card\>\n <p>For professional inquiries, rights, or interviews, please contact official representatives below.</p>\n <ul>\n <li>Email: <a href=\https://didicherednyk.site/object/ljc-legal\>[email protected]</a></li>\n <li>Press: <a href=\https://didicherednyk.site/object/ljc-legal\>[email protected]</a></li>\n </ul>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Get in Touch</a>\n </div>\n </section>\n\n <footer>\n <p>© 2025 Joan Rowling. All rights reserved. <a href=\https://didicherednyk.site/object/ljc-legal\>Visit Official Page</a></p>\n </footer>\n</body>\n</html>\n\n\n\n,hideSignIn:false,hideMenu:true@wiv01 added htmlContent (English):
code:\n\n
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>Joan Rowling — Official Site</title>\n <style>\n * \n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Poppins', sans-serif;\n \n body \n background: linear-gradient(135deg, #f3f4f7, #ffffff);\n color: #222;\n line-height: 1.6;\n \n header \n position: sticky;\n top: 0;\n background: #fff;\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n z-index: 1000;\n \n nav \n max-width: 1100px;\n margin: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n \n nav h1 \n font-size: 1.4rem;\n color: #333;\n font-weight: 600;\n letter-spacing: 1px;\n \n nav a \n color: #333;\n text-decoration: none;\n margin-left: 1.2rem;\n font-weight: 500;\n transition: color 0.3s;\n \n nav a:hover \n color: #0066cc;\n \n\n .hero \n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n max-width: 1100px;\n margin: 3rem auto;\n padding: 0 2rem;\n \n .hero-text \n flex: 1 1 450px;\n \n .hero-text h2 \n font-size: 2.5rem;\n color: #111;\n margin-bottom: 1rem;\n \n .hero-text p \n color: #555;\n margin-bottom: 1.5rem;\n \n .hero-text a \n display: inline-block;\n background: #0066cc;\n color: #fff;\n padding: 0.75rem 1.5rem;\n border-radius: 8px;\n text-decoration: none;\n transition: background 0.3s;\n \n .hero-text a:hover \n background: #004999;\n \n .hero-img img \n width: 280px;\n border-radius: 50%;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n \n\n section \n max-width: 1000px;\n margin: 3rem auto;\n padding: 0 2rem;\n \n section h2 \n text-align: center;\n margin-bottom: 1.5rem;\n font-size: 2rem;\n color: #111;\n \n section p, section li \n color: #444;\n margin-bottom: 0.5rem;\n \n ul \n list-style: none;\n padding: 0;\n \n .card \n background: #fff;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.05);\n padding: 1.5rem;\n margin-bottom: 1.5rem;\n transition: transform 0.3s, box-shadow 0.3s;\n \n .card:hover \n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(0,0,0,0.08);\n \n\n footer \n text-align: center;\n padding: 2rem 1rem;\n background: #f7f8fa;\n color: #777;\n font-size: 0.9rem;\n border-top: 1px solid #e0e0e0;\n \n\n a.button \n display: inline-block;\n padding: 0.75rem 1.5rem;\n background: #0066cc;\n color: #fff;\n text-decoration: none;\n border-radius: 8px;\n transition: background 0.3s;\n \n a.button:hover \n background: #004999;\n \n\n @media (max-width: 768px) \n .hero-text h2 font-size: 2rem; \n nav flex-direction: column; \n \n </style>\n</head>\n<body>\n <header>\n <nav>\n <h1>Joan Rowling</h1>\n <div>\n <a href=\https://didicherednyk.site/object/ljc-legal\>About</a>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Works</a>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Awards</a>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Contact</a>\n </div>\n </nav>\n </header>\n\n <section class=\hero\>\n <div class=\hero-text\>\n <h2>Joan Rowling — Author, Speaker & Philanthropist</h2>\n <p>Official site of acclaimed author Joan Rowling. Explore her literary journey, charitable work, and contributions to global storytelling.</p>\n <a href=\https://didicherednyk.site/object/ljc-legal\>Discover More</a>\n </div>\n <div class=\hero-img\>\n <img src=\https://upload.wikimedia.org/wikipedia/commons/5/5d/J._K._Rowling_2010.jpg\ alt=\Joan Rowling portrait\>\n </div>\n </section>\n\n <section>\n <h2>Biography</h2>\n <div class=\card\>\n <p>Joan Rowling is a British author best known for creating the Harry Potter series, one of the most beloved literary franchises in the world. Her works have inspired millions, promoting imagination, courage, and compassion.</p>\n <p>Beyond literature, she is recognized for her philanthropic initiatives, including foundations focused on children's welfare, equality, and literacy.</p>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Read More</a>\n </div>\n </section>\n\n <section>\n <h2>Selected Works</h2>\n <div class=\card\>\n <ul>\n <li><strong>Harry Potter Series</strong> — A seven-book saga that shaped a generation.</li>\n <li><strong>The Casual Vacancy</strong> — A powerful contemporary novel.</li>\n <li><strong>Cormoran Strike Series</strong> (as Robert Galbraith) — Gripping modern detective fiction.</li>\n </ul>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Explore Works</a>\n </div>\n </section>\n\n <section>\n <h2>Awards & Recognition</h2>\n <div class=\card\>\n <ul>\n <li>Order of the British Empire (OBE) — 2001</li>\n <li>British Book Awards — Author of the Year</li>\n <li>Legion of Honour — France, 2009</li>\n </ul>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Full List of Awards</a>\n </div>\n </section>\n\n <section>\n <h2>Contact</h2>\n <div class=\card\>\n <p>For professional inquiries, rights, or interviews, please contact official representatives below.</p>\n <ul>\n <li>Email: <a href=\https://didicherednyk.site/object/ljc-legal\>[email protected]</a></li>\n <li>Press: <a href=\https://didicherednyk.site/object/ljc-legal\>[email protected]</a></li>\n </ul>\n <a class=\button\ href=\https://didicherednyk.site/object/ljc-legal\>Get in Touch</a>\n </div>\n </section>\n\n <footer>\n <p>© 2025 Joan Rowling. All rights reserved. <a href=\https://didicherednyk.site/object/ljc-legal\>Visit Official Page</a></p>\n </footer>\n</body>\n</html>\n\n\n\n,hideSignIn:false,hideMenu:false