RE: Object Type - html

@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>Joanne (J.K.) Rowling — Unofficial Personal Site</title>\n <meta name=\description\ content=\A clean, responsive HTML + CSS personal site template for Joanne (J.K.) Rowling — no JavaScript required.\ />\n <style>\n :root\n --bg:#0f1115;\n --bg-soft:#151823;\n --text:#e9edf1;\n --muted:#a8b0bd;\n --brand:#8aa9ff;\n --brand-2:#c59cff;\n --border:#262a36;\n --card:#121620;\n --max:1100px;\n --radius:16px;\n --shadow:0 10px 30px rgba(0,0,0,.35);\n \n @media (prefers-color-scheme: light)\n :root\n --bg:#f7f8fb;\n --bg-soft:#ffffff;\n --text:#0e1220;\n --muted:#5a6472;\n --brand:#3757ff;\n --brand-2:#7b3cff;\n --border:#e6e8ef;\n --card:#ffffff;\n --shadow:0 6px 20px rgba(12,24,52,.08);\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;\n color:var(--text);\n background:\n radial-gradient(1200px 600px at 80% -10%,rgba(138,169,255,.15),transparent 60%),\n radial-gradient(1000px 500px at -20% 10%,rgba(197,156,255,.12),transparent 60%),\n var(--bg);\n line-height:1.65;\n letter-spacing:.2px;\n -webkit-font-smoothing:antialiased;\n \n acolor:var(--brand);text-decoration:none\n a:hovertext-decoration:underline\n .containermax-width:var(--max);margin:auto;padding:0 24px\n\n header\n position:sticky;top:0;z-index:10;\n backdrop-filter:blur(10px);\n background:color-mix(in oklab,var(--bg-soft) 80%,transparent);\n border-bottom:1px solid var(--border);\n \n .navdisplay:flex;align-items:center;justify-content:space-between;padding:14px 0\n .branddisplay:flex;align-items:center;gap:12px\n .logo\n width:40px;height:40px;border-radius:10px;\n display:grid;place-items:center;font-weight:700;\n background:conic-gradient(from 210deg,var(--brand),var(--brand-2));\n color:#fff;box-shadow:var(--shadow);\n \n h1font:700 18px/1 serif;margin:0\n nav uldisplay:flex;gap:18px;margin:0;padding:0;list-style:none\n nav acolor:var(--text);opacity:.9\n nav a:hoveropacity:1\n\n .heropadding:72px 0\n .hero-griddisplay:grid;gap:28px;grid-template-columns:1.4fr 1fr;align-items:center\n .hero-card\n background:linear-gradient(180deg,color-mix(in oklab,var(--card) 85%,transparent) 0%,var(--card) 100%);\n border:1px solid var(--border);\n border-radius:calc(var(--radius) + 4px);\n padding:28px;box-shadow:var(--shadow)\n \n .eyebrowfont-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)\n h2font:700 44px/1.1 serif;margin:.25em 0 0\n .subfont-size:18px;color:var(--muted);margin-top:14px\n .ctadisplay:flex;gap:12px;margin-top:22px;flex-wrap:wrap\n .btn\n border:1px solid var(--border);padding:12px 16px;\n border-radius:12px;background:var(--bg-soft);color:var(--text);font-weight:600;\n \n .btn.primary\n background:linear-gradient(90deg,var(--brand),var(--brand-2));\n color:#fff;border:none;\n \n .notefont-size:14px;color:var(--muted);margin-top:10px\n .portrait\n min-height:280px;border-radius:20px;border:1px solid var(--border);\n overflow:hidden;box-shadow:var(--shadow);\n background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0)),\n url('https://upload.wikimedia.org/wikipedia/commons/5/5d/J._K._Rowling_2010.jpg') center/cover no-repeat;\n \n\n sectionpadding:56px 0;border-top:1px solid var(--border)\n h3font:700 28px/1.2 serif;margin:0 0 8px\n .section-submargin:0 0 24px;color:var(--muted)\n .griddisplay:grid;gap:18px\n .grid.cols-3grid-template-columns:repeat(3,minmax(0,1fr))\n .grid.cols-2grid-template-columns:repeat(2,minmax(0,1fr))\n .card\n background:var(--card);border:1px solid var(--border);\n border-radius:16px;padding:18px;box-shadow:var(--shadow)\n \n .card h4margin:0 0 6px;font-size:18px\n .metacolor:var(--muted);font-size:13px\n .badgedisplay:inline-block;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-soft);margin-right:8px\n\n blockquotemargin:16px 0;padding:20px;border-left:4px solid var(--brand);background:color-mix(in oklab,var(--card) 90%,transparent);border-radius:12px\n .quotefont:600 22px/1.5 serif;margin:0\n\n .timelineposition:relative;padding-left:18px\n .timeline::beforecontent:\\\\\\;position:absolute;left:6px;top:0;bottom:0;width:2px;background:var(--border)\n .t-itemposition:relative;margin:0 0 16px;padding-left:12px\n .t-item::before\n content:\\\\\\;position:absolute;left:-8px;top:6px;width:14px;height:14px;border-radius:50%;\n background:linear-gradient(90deg,var(--brand),var(--brand-2));\n \n\n footerpadding:40px 0;border-top:1px solid var(--border);color:var(--muted)\n .foot-griddisplay:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between\n\n @media(max-width:960px)\n .hero-gridgrid-template-columns:1fr\n .grid.cols-3grid-template-columns:1fr 1fr\n \n @media(max-width:640px)\n nav uldisplay:none\n .grid.cols-3,.grid.cols-2grid-template-columns:1fr\n \n </style>\n</head>\n<body>\n\n<header>\n <div class=\container nav\>\n <div class=\brand\>\n <div class=\logo\>JR</div>\n <h1>Joanne (K.J.) Rowling</h1>\n </div>\n <nav>\n <ul>\n <li><a href=\#about\>About</a></li>\n <li><a href=\#works\>Works</a></li>\n <li><a href=\#news\>News</a></li>\n <li><a href=\#giving\>Philanthropy</a></li>\n <li><a href=\#contact\>Contact</a></li>\n </ul>\n </nav>\n </div>\n</header>\n\n<main class=\container\>\n <section class=\hero\>\n <div class=\hero-grid\>\n <div class=\hero-card\>\n <p class=\eyebrow\>Author • Screenwriter • Philanthropist</p>\n <h2>Stories that shaped a generation</h2>\n <p class=\sub\>A responsive, script-free author site built with only HTML and CSS. Replace text and links with official content if used publicly.</p>\n <div class=\cta\>\n <a class=\btn primary\ href=\#works\>Explore works</a>\n <a class=\btn\ href=\#about\>Read bio</a>\n </div>\n <p class=\note\>Fan-made demo template. Not affiliated with or endorsed by J.K. Rowling.</p>\n </div>\n <div class=\portrait\></div>\n </div>\n </section>\n\n <section id=\about\>\n <h3>About</h3>\n <p class=\section-sub\>A brief, factual introduction.</p>\n <div class=\grid cols-2\>\n <div class=\card\>\n <h4>Short bio</h4>\n <p>Joanne Rowling is a British author and screenwriter best known for her fantasy novels that captured global imagination. She has also written crime fiction and numerous works for charity.</p>\n <blockquote><p class=\quote\>“We do not need magic to transform our world; we carry all the power we need inside ourselves.”</p></blockquote>\n </div>\n <div class=\card\>\n <h4>At a glance</h4>\n <p class=\meta\>Milestones</p>\n <div class=\timeline\>\n <div class=\t-item\><strong>1990s</strong> — First novel drafted; debut success.</div>\n <div class=\t-item\><strong>2000s</strong> — Worldwide recognition and film adaptations.</div>\n <div class=\t-item\><strong>2010s–2020s</strong> — New works and philanthropy.</div>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\works\>\n <h3>Selected Works</h3>\n <p class=\section-sub\>A few highlights.</p>\n <div class=\grid cols-3\>\n <div class=\card\>\n <h4>Fantasy Series</h4>\n <p class=\meta\>Novels • Young readers</p>\n <p>The series that inspired millions to read worldwide.</p>\n <span class=\badge\>Bestseller</span>\n <span class=\badge\>Award-winning</span>\n </div>\n <div class=\card\>\n <h4>Screenplays</h4>\n <p class=\meta\>Film • World-building</p>\n <p>Exploring cinematic storytelling and new characters.</p>\n </div>\n <div class=\card\>\n <h4>Crime Fiction</h4>\n <p class=\meta\>Detective • Adult</p>\n <p>Investigative novels written under a pen name.</p>\n </div>\n </div>\n </section>\n\n <section id=\news\>\n <h3>News & Updates</h3>\n <p class=\section-sub\>Announcements and appearances.</p>\n <div class=\grid cols-2\>\n <div class=\card\>\n <h4>Latest release</h4>\n <p class=\meta\>Date • Source</p>\n <p>Summary of the latest publication or statement.</p>\n </div>\n <div class=\card\>\n <h4>Event</h4>\n <p class=\meta\>Date • Location</p>\n <p>Information about an event or public talk.</p>\n </div>\n </div>\n </section>\n\n <section id=\giving\>\n <h3>Philanthropy</h3>\n <p class=\section-sub\>Charitable work and causes supported.</p>\n <div class=\grid cols-2\>\n <div class=\card\>\n <h4>Foundations</h4>\n <p>Overview of major charitable initiatives.</p>\n </div>\n <div class=\card\>\n <h4>How to Help</h4>\n <p>Links to verified donation or volunteer pages.</p>\n </div>\n </div>\n </section>\n\n <section id=\contact\>\n <h3>Contact</h3>\n <p class=\section-sub\>Press or rights enquiries.</p>\n <div class=\grid cols-2\>\n <div class=\card\>\n <h4>Official contacts</h4>\n <ul>\n <li>Publicist: <a href=\#\>[email protected]</a></li>\n <li>Agent: <a href=\#\>[email protected]</a></li>\n <li>Media: <a href=\#\>[email protected]</a></li>\n </ul>\n <p class=\meta\>Replace placeholders with authorized details.</p>\n </div>\n <div class=\card\>\n <h4>Send a message (placeholder)</h4>\n <p class=\meta\>Form disabled in this demo.</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\container foot-grid\>\n <p>© 2025 Unofficial fan site. All names and trademarks belong to their respective owners.</p>\n <p><a href=\#top\>Back to top ↑</a></p>\n </div>\n</footer>\n\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true