{"id":26167,"date":"2025-09-11T16:41:19","date_gmt":"2025-09-11T07:41:19","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26167"},"modified":"2025-09-11T16:41:21","modified_gmt":"2025-09-11T07:41:21","slug":"x%e9%a2%a8%e3%82%b5%e3%82%a4%e3%83%88-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26167","title":{"rendered":"X\u98a8\u30b5\u30a4\u30c8.html"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!doctype html>\n&lt;html lang=\"ja\">\n&lt;head>\n&lt;meta charset=\"utf-8\" \/>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n&lt;title>X-like UI \u2013 Polished (Left-aligned)&lt;\/title>\n&lt;style>\n\/* ===== Design Tokens ===== *\/\n:root{\n  \/* colors *\/\n  --bg: #0b0d10;\n  --surface: #0e1116;\n  --panel: rgba(16,18,24,.75);\n  --card: #0f1319;\n  --line: #1c2230;          \/* single-pixel separators *\/\n  --text: #e7ecf3;\n  --muted: #9aa7ba;\n  --accent: #1da1f2;\n  --accent-2: #7dd3fc;\n  --accent-3: #60a5fa;\n\n  \/* radius &amp; shadow *\/\n  --r: 14px;\n  --shadow-sm: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px rgba(0,0,0,.35);\n  --shadow-card: 0 10px 30px rgba(0,0,0,.25);\n\n  \/* layout *\/\n  --col-left: 84px;\n  --col-center-min: 360px;\n  --col-center-max: 720px;\n  --col-right-min: 280px;\n  --col-right-max: 420px;\n\n  \/* NEW: tighter left gutter for center column *\/\n  --gutter-x: 10px;\n\n  \/* motion *\/\n  --e1: cubic-bezier(.2,.8,.2,1);\n}\n*{box-sizing:border-box}\nhtml,body{height:100%}\nbody{\n  margin:0;\n  background:\n    radial-gradient(1200px 600px at 10% -10%, rgba(29,161,242,.15), transparent 40%),\n    radial-gradient(800px 500px at 110% -10%, rgba(96,165,250,.12), transparent 40%),\n    var(--bg);\n  color:var(--text);\n  font:14px\/1.55 ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans JP\", \"Hiragino Kaku Gothic ProN\", \"Helvetica Neue\", Arial;\n}\n\n\/* focus ring *\/\n:where(a,button,&#91;role=\"button\"],input,textarea,.sb-btn,.ic-btn,.plus,.btn,.btn-ghost,.btn-primary){outline:none}\n:where(a,button,&#91;role=\"button\"],input,textarea,.sb-btn,.ic-btn,.plus,.btn,.btn-ghost,.btn-primary):focus-visible{\n  box-shadow:0 0 0 3px rgba(29,161,242,.35);\n  border-radius:10px;\n}\n\n\/* ===== Layout ===== *\/\n.app{\n  display:grid; gap:0;\n  grid-template-columns: var(--col-left) minmax(var(--col-center-min),var(--col-center-max)) minmax(var(--col-right-min),var(--col-right-max));\n  height:100%;\n  max-width:1280px;\n  margin:0 auto;\n}\n.sidebar{\n  position:sticky; top:0; height:100vh;\n  backdrop-filter: blur(10px);\n  background:linear-gradient(180deg, rgba(16,18,24,.7), rgba(16,18,24,.3));\n  \/* NOTE: borders are drawn via ::after to avoid subpixel drift *\/\n  padding:10px 8px; display:flex; flex-direction:column; gap:6px;\n}\n.sb-btn{\n  border-radius:999px; padding:12px 14px; cursor:pointer;\n  display:flex; align-items:center; gap:14px; transition:background .2s var(--e1), transform .12s var(--e1);\n}\n.sb-btn:hover{background:rgba(255,255,255,.04)}\n.sb-btn:active{transform:translateY(1px)}\n.sb-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:999px}\n.sb-btn .label{font-weight:700;letter-spacing:.02em}\n\n.compose-fab{\n  position:fixed; left:18px; bottom:18px; z-index:50; cursor:pointer;\n  border:none; color:#fff; font-weight:800; letter-spacing:.02em;\n  border-radius:999px; padding:12px 18px;\n  background:linear-gradient(135deg, var(--accent), var(--accent-3));\n  box-shadow:0 10px 30px rgba(29,161,242,.35);\n  transition: transform .12s var(--e1), filter .2s var(--e1);\n}\n.compose-fab:hover{filter:brightness(1.05)}\n.compose-fab:active{transform:translateY(1px)}\n.you-chip{\n  position:fixed; left:18px; bottom:84px; width:48px;height:48px;border-radius:999px;\n  display:grid;place-items:center;font-weight:900; background:conic-gradient(from 180deg at 50% 50%, #0f629e, #0c3c68 70%, #0f629e);\n  color:#fff; border:1px solid rgba(255,255,255,.08);\n}\n\n.main{\n  position:relative; \/* for ::after separator *\/\n  min-height:100vh; background:rgba(0,0,0,.25);\n  backdrop-filter: blur(6px);\n}\n.rightcol{\n  padding:14px; position:sticky; top:0; height:100vh; overflow:auto;\n}\n.searchbar{\n  display:flex; align-items:center; gap:10px; padding:10px 14px;\n  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);\n  border-radius:999px;\n}\n\n\/* ===== Single-pixel separators (no drift) ===== *\/\n.sidebar::after,\n.main::after{\n  content:\"\";\n  position:absolute; top:0; bottom:0; width:1px; background:var(--line);\n  pointer-events:none; z-index:10;\n}\n.sidebar::after{ right:0; }  \/* Sidebar \u2194 Main *\/\n.main::after{ right:0; }     \/* Main \u2194 Right column *\/\n\n\/* ===== Header Tabs ===== *\/\n.header-title{padding:10px var(--gutter-x); font-size:20px; font-weight:900; border-bottom:1px solid var(--line)}\n.tabs{\n  position:sticky; top:0; z-index:6;\n  display:flex; gap:24px; padding:0 var(--gutter-x);        \/* &lt;&lt;&lt; tightened left padding *\/\n  background:linear-gradient(180deg, rgba(14,17,22,.8), rgba(14,17,22,.55));\n  backdrop-filter: saturate(120%) blur(8px);\n  border-bottom:1px solid var(--line);\n}\n.tab{\n  padding:16px 6px; cursor:pointer; color:var(--muted); font-weight:800; border-bottom:3px solid transparent;\n  transition:color .2s var(--e1), border-color .2s var(--e1);\n}\n.tab.active{color:var(--text); border-color:var(--accent)}\n\n\/* ===== Composer ===== *\/\n.composer{\n  padding:14px var(--gutter-x);                               \/* &lt;&lt;&lt; tightened *\/\n  border-bottom:1px solid var(--line); display:flex; gap:12px;\n  background:linear-gradient(180deg, rgba(17,22,29,.8), rgba(17,22,29,.4));\n}\n.avatar{\n  width:42px; height:42px; border-radius:999px; display:grid; place-items:center; font-weight:900; letter-spacing:.02em;\n  color:#fff; border:1px solid rgba(255,255,255,.08);\n  background:radial-gradient(120% 120% at 20% 15%, #1e81c5, #0f2a43 70%);\n}\n.composer-box{flex:1}\n.composer textarea{\n  width:100%; min-height:76px; resize:vertical; background:transparent; border:none; color:var(--text);\n  outline:none; font-size:18px; caret-color:var(--accent);\n}\n.reply-scope{color:var(--accent);font-weight:700;font-size:13px}\n.row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px}\n.icons{display:flex; gap:8px}\n.ic-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;cursor:pointer;transition:background .2s}\n.ic-btn:hover{background:rgba(255,255,255,.06)}\n.post-btn{\n  border:none; color:#0b1220; font-weight:900; letter-spacing:.02em;\n  padding:9px 18px; border-radius:999px; cursor:not-allowed;\n  background:linear-gradient(135deg, #6b7280 0%, #9aa7ba 100%);\n  filter:saturate(.7); opacity:.7; transition:filter .2s, transform .12s;\n}\n.post-btn.enabled{\n  cursor:pointer; opacity:1; color:#fff; filter:none;\n  background:linear-gradient(135deg, var(--accent), var(--accent-3));\n  box-shadow:0 12px 30px rgba(29,161,242,.3);\n}\n.post-btn.enabled:hover{filter:brightness(1.05)}\n.post-btn.enabled:active{transform:translateY(1px)}\n\n\/* ===== Cards ===== *\/\n.card{\n  border-bottom:1px solid var(--line); display:flex; gap:12px;\n  padding:14px var(--gutter-x);                                 \/* &lt;&lt;&lt; tightened *\/\n  background:linear-gradient(180deg, rgba(16,20,27,.5), rgba(16,20,27,.25));\n}\n.meta{display:flex; gap:6px; color:var(--muted)}\n.name{font-weight:900}\n.handle{color:var(--muted)}\n.hash a{color:var(--accent)}\n.post-img{\n  border-radius:18px; border:1px solid rgba(255,255,255,.06); width:100%; margin-top:10px;\n  box-shadow:var(--shadow-card)\n}\n.actions{display:flex; gap:26px; margin-top:8px; color:var(--muted)}\n.action{display:flex; gap:6px; align-items:center; cursor:pointer; transition:color .15s}\n.action:hover{color:var(--accent)}\n\n\/* ===== Right column ===== *\/\n.rightcol .rc-card{\n  background:linear-gradient(180deg, rgba(17,22,29,.65), rgba(17,22,29,.35));\n  border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden; margin-top:12px; box-shadow:var(--shadow-sm)\n}\n.rc-title{font-weight:900; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06)}\n.rc-item{padding:12px 16px; border-top:1px solid rgba(255,255,255,.04)}\n.chip{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08);\n  padding:4px 10px; border-radius:999px; color:var(--muted); font-size:12px}\n\n\/* ===== Subtabs \/ Explore ===== *\/\n.subtabs{display:flex; gap:18px; padding:10px var(--gutter-x); border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}  \/* &lt;&lt;&lt; tightened *\/\n.subtab{padding:10px 2px; color:var(--muted); font-weight:800; cursor:pointer; border-bottom:3px solid transparent}\n.subtab.active{color:var(--text); border-color:var(--accent)}\n\n\/* ===== Empties \/ Profile \/ Lists ===== *\/\n.empty{display:grid; place-items:center; padding:72px var(--gutter-x); color:var(--muted); text-align:center}\n.empty h2{margin:0 0 6px; color:var(--text)}\n.cover{height:170px; background:\n  radial-gradient(70% 120% at 10% 0%, rgba(29,161,242,.25), transparent 40%),\n  radial-gradient(60% 120% at 100% 0%, rgba(96,165,250,.2), transparent 40%),\n  linear-gradient(180deg,#121722,#0b0f17)}\n.prof-wrap{padding:0 var(--gutter-x) 16px}\n.prof-row{display:flex; justify-content:space-between; align-items:end; margin-top:-36px}\n.pfp{width:96px;height:96px;border-radius:999px;border:4px solid var(--surface);background:radial-gradient(120% 120% at 20% 15%, #1e81c5, #0f2a43 70%);display:grid;place-items:center;color:#fff;font-weight:900}\n.btn{background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:999px; padding:8px 14px; cursor:pointer; transition:background .2s}\n.btn:hover{background:rgba(255,255,255,.05)}\n.alert{background:rgba(18,42,24,.65); border:1px solid #165c36; color:#a9f2b7; border-radius:14px; padding:12px 14px; margin:12px var(--gutter-x); display:flex; gap:10px; align-items:center}\n.check{width:18px;height:18px;border-radius:4px;border:2px solid #a9f2b7;display:grid;place-items:center}\n\n.list-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px}\n.list-pill{width:44px;height:44px;border-radius:12px; background:linear-gradient(135deg,#374151,#1f2937)}\n.plus{width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center}\n\n\/* ===== Grok ===== *\/\n.grok{display:grid; place-items:center; padding:44px var(--gutter-x)}\n.grok .logo{font-size:28px; font-weight:1000; display:flex; align-items:center; gap:10px}\n.grok .input{margin-top:18px; display:flex; gap:8px; width:min(680px,90vw)}\n.grok .input input{flex:1; padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:#0c1118; color:#fff; transition:border .2s}\n.grok .input input:focus{border-color:rgba(125,211,252,.6)}\n.grok .input button{padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(135deg,#10151f,#0e131b); color:#fff}\n.grok .tools{display:flex; gap:8px; margin-top:12px}\n\n\/* ===== E2EE Page ===== *\/\n.e2ee{padding:56px var(--gutter-x); text-align:center}\n.e2ee h1{font-size:26px; margin:0 0 12px}\n.bullet{display:flex; gap:10px; align-items:flex-start; justify-content:center; color:#cfd9ea}\n.e2ee .cta{display:flex; gap:12px; justify-content:center; margin-top:18px}\n.btn-ghost{border:1px solid rgba(255,255,255,.18); background:transparent; color:#fff; padding:10px 14px; border-radius:999px}\n.btn-primary{border:1px solid rgba(29,161,242,.55); background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#001e33; font-weight:900; padding:10px 16px; border-radius:999px}\n\n\/* ===== Modal ===== *\/\n.modal-backdrop{\n  position:fixed; inset:0; background:rgba(4,8,12,.6); display:none; align-items:center; justify-content:center; z-index:100;\n  animation:fadeIn .2s var(--e1);\n}\n@keyframes fadeIn{from{opacity:0}to{opacity:1}}\n.modal{\n  width:min(640px,92vw); background:linear-gradient(180deg, rgba(14,18,24,.95), rgba(14,18,24,.85));\n  border:1px solid rgba(255,255,255,.12); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card)\n}\n.modal .top{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.06)}\n.close-x{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;cursor:pointer;transition:background .2s}\n.close-x:hover{background:rgba(255,255,255,.06)}\n.small{font-size:12px;color:var(--muted)}\n\n\/* ===== Toast ===== *\/\n.toast{\n  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);\n  bottom:20px; background:rgba(18,22,28,.92); border:1px solid rgba(255,255,255,.12);\n  padding:10px 14px; border-radius:999px; display:none; gap:10px; align-items:center; z-index:120;\n  box-shadow:var(--shadow-card); animation:slideUp .25s var(--e1);\n}\n.toast .view{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px}\n@keyframes slideUp{from{opacity:0; transform:translateX(-50%) translateY(40px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}\n\n\/* ===== Utilities ===== *\/\n.hide{display:none !important}\n\n\/* ===== Responsive ===== *\/\n@media (max-width:1100px){\n  .app{grid-template-columns: 72px 1fr}\n  .rightcol{display:none}\n}\n@media (max-width:520px){\n  .sb-btn .label{display:none}\n  .sidebar{align-items:center}\n}\n&lt;\/style>\n&lt;\/head>\n&lt;body>\n&lt;div class=\"app\">\n  &lt;!-- Sidebar -->\n  &lt;aside class=\"sidebar\" aria-label=\"Sidebar\">\n    &lt;div class=\"sb-btn\" data-nav=\"home\">&lt;div class=\"sb-icon\">\ud83c\udfe0&lt;\/div>&lt;div class=\"label\">Home&lt;\/div>&lt;\/div>\n    &lt;div class=\"sb-btn\" data-nav=\"explore\">&lt;div class=\"sb-icon\">\ud83d\udd0e&lt;\/div>&lt;div class=\"label\">Explore&lt;\/div>&lt;\/div>\n    &lt;div class=\"sb-btn\" data-nav=\"notifications\">&lt;div class=\"sb-icon\">\ud83d\udd14&lt;\/div>&lt;div class=\"label\">Notifications&lt;\/div>&lt;\/div>\n    &lt;div class=\"sb-btn\" data-nav=\"messages\">&lt;div class=\"sb-icon\">\u2709\ufe0f&lt;\/div>&lt;div class=\"label\">Messages&lt;\/div>&lt;\/div>\n    &lt;div class=\"sb-btn\" data-nav=\"grok\">&lt;div class=\"sb-icon\">\u26a1&lt;\/div>&lt;div class=\"label\">Grok&lt;\/div>&lt;\/div>\n    &lt;div class=\"sb-btn\" data-nav=\"lists\">&lt;div class=\"sb-icon\">\ud83d\uddc2\ufe0f&lt;\/div>&lt;div class=\"label\">Lists&lt;\/div>&lt;\/div>\n    &lt;div class=\"sb-btn\" data-nav=\"profile\">&lt;div class=\"sb-icon\">\ud83d\udc64&lt;\/div>&lt;div class=\"label\">Profile&lt;\/div>&lt;\/div>\n    &lt;div class=\"sb-btn\" data-nav=\"encrypted\">&lt;div class=\"sb-icon\">\ud83d\udd12&lt;\/div>&lt;div class=\"label\">Chat&lt;\/div>&lt;\/div>\n  &lt;\/aside>\n\n  &lt;!-- Main -->\n  &lt;main class=\"main\" id=\"main\">\n    &lt;!-- Home -->\n    &lt;section id=\"view-home\" role=\"region\" aria-label=\"Home timeline\">\n      &lt;div class=\"tabs\">\n        &lt;div class=\"tab active\" data-home-tab=\"foryou\">For you&lt;\/div>\n        &lt;div class=\"tab\" data-home-tab=\"following\">Following&lt;\/div>\n      &lt;\/div>\n\n      &lt;div class=\"composer\">\n        &lt;div class=\"avatar\">\u88d5\u5e73&lt;\/div>\n        &lt;div class=\"composer-box\">\n          &lt;div class=\"reply-scope\">Everyone can reply&lt;\/div>\n          &lt;textarea id=\"compose-input\" placeholder=\"What\u2019s happening?\">&lt;\/textarea>\n          &lt;div class=\"row\">\n            &lt;div class=\"icons\" aria-label=\"Composer actions\">\n              &lt;div class=\"ic-btn\" title=\"Media\">\ud83d\uddbc\ufe0f&lt;\/div>\n              &lt;div class=\"ic-btn\" title=\"GIF\">\ud83c\udf00&lt;\/div>\n              &lt;div class=\"ic-btn\" title=\"Poll\">\ud83d\udcca&lt;\/div>\n              &lt;div class=\"ic-btn\" title=\"Emoji\">\ud83d\ude0a&lt;\/div>\n              &lt;div class=\"ic-btn\" title=\"Schedule\">\ud83d\uddd3\ufe0f&lt;\/div>\n              &lt;div class=\"ic-btn\" title=\"Location\">\ud83d\udccd&lt;\/div>\n            &lt;\/div>\n            &lt;button id=\"post-btn\" class=\"post-btn\" disabled>Post&lt;\/button>\n          &lt;\/div>\n        &lt;\/div>\n      &lt;\/div>\n\n      &lt;article class=\"card\">\n        &lt;div class=\"avatar\">H&lt;\/div>\n        &lt;div style=\"flex:1\">\n          &lt;div class=\"meta\">&lt;span class=\"name\">HANA&lt;\/span>&lt;span class=\"handle\">@HANA__BRAVE \u00b7 9h&lt;\/span>&lt;\/div>\n          &lt;div>\ud83c\udf82 &lt;span class=\"hash\">&lt;a href=\"#\">#HAPPYJISOODAY&lt;\/a>&lt;\/span>&lt;br\/>Happy Birthday JISOO \ud83e\udd0d&lt;br\/>&lt;span class=\"hash\">&lt;a href=\"#\">#HANA&lt;\/a> &lt;a href=\"#\">#JISOO&lt;\/a>&lt;\/span>&lt;\/div>\n          &lt;img class=\"post-img\" alt=\"sample\" src=\"https:\/\/picsum.photos\/seed\/jisoo\/720\/380\" \/>\n          &lt;div class=\"actions\">\n            &lt;div class=\"action\">\ud83d\udcac &lt;span>24&lt;\/span>&lt;\/div>\n            &lt;div class=\"action\">\ud83d\udd01 &lt;span>10&lt;\/span>&lt;\/div>\n            &lt;div class=\"action\">\u2764\ufe0f &lt;span>128&lt;\/span>&lt;\/div>\n            &lt;div class=\"action\">\u2197\ufe0f&lt;\/div>\n          &lt;\/div>\n        &lt;\/div>\n      &lt;\/article>\n\n      &lt;article class=\"card\">\n        &lt;div class=\"avatar\">X&lt;\/div>\n        &lt;div style=\"flex:1\">\n          &lt;div class=\"meta\">&lt;span class=\"name\">MTV VMA \u00b7 LIVE&lt;\/span>&lt;span class=\"handle\"> \u00b7 now&lt;\/span>&lt;\/div>\n          &lt;div class=\"hash\">&lt;a href=\"#\">#VMAs&lt;\/a>&lt;\/div>\n          &lt;img class=\"post-img\" alt=\"vmas\" src=\"https:\/\/picsum.photos\/seed\/vma\/720\/300\" \/>\n          &lt;div class=\"actions\">\n            &lt;div class=\"action\">\ud83d\udcac &lt;span>8&lt;\/span>&lt;\/div>\n            &lt;div class=\"action\">\ud83d\udd01 &lt;span>3&lt;\/span>&lt;\/div>\n            &lt;div class=\"action\">\u2764\ufe0f &lt;span>42&lt;\/span>&lt;\/div>\n            &lt;div class=\"action\">\u2197\ufe0f&lt;\/div>\n          &lt;\/div>\n        &lt;\/div>\n      &lt;\/article>\n\n      &lt;div id=\"feed-anchor\">&lt;\/div>\n    &lt;\/section>\n\n    &lt;!-- Explore -->\n    &lt;section id=\"view-explore\" class=\"hide\" role=\"region\" aria-label=\"Explore\">\n      &lt;div class=\"header-title\">\n        &lt;div class=\"searchbar\">&lt;span>\ud83d\udd0e&lt;\/span>&lt;input style=\"flex:1;background:transparent;border:none;color:#fff;outline:none\" placeholder=\"Search\" \/>&lt;\/div>\n      &lt;\/div>\n      &lt;div class=\"subtabs\">\n        &lt;div class=\"subtab active\">For You&lt;\/div>\n        &lt;div class=\"subtab\">Trending&lt;\/div>\n        &lt;div class=\"subtab\">News&lt;\/div>\n        &lt;div class=\"subtab\">Sports&lt;\/div>\n        &lt;div class=\"subtab\">Entertainment&lt;\/div>\n      &lt;\/div>\n      &lt;article class=\"card\">\n        &lt;div class=\"avatar\">T&lt;\/div>\n        &lt;div style=\"flex:1\">\n          &lt;div class=\"meta\">&lt;span class=\"name\">Tokyo 2025&lt;\/span>&lt;span class=\"handle\"> \u00b7 promoted&lt;\/span>&lt;\/div>\n          &lt;img class=\"post-img\" alt=\"tokyo\" src=\"https:\/\/picsum.photos\/seed\/tokyo2025\/720\/260\" \/>\n        &lt;\/div>\n      &lt;\/article>\n    &lt;\/section>\n\n    &lt;!-- Notifications -->\n    &lt;section id=\"view-notifications\" class=\"hide\" role=\"region\" aria-label=\"Notifications\">\n      &lt;div class=\"tabs\">\n        &lt;div class=\"tab active\">All&lt;\/div>\n        &lt;div class=\"tab\">Verified&lt;\/div>\n        &lt;div class=\"tab\">Mentions&lt;\/div>\n      &lt;\/div>\n      &lt;div class=\"empty\">\n        &lt;div>\n          &lt;h2>Nothing to see here \u2014 yet&lt;\/h2>\n          &lt;div>From likes to reposts and a whole lot more, this is where all the action happens.&lt;\/div>\n        &lt;\/div>\n      &lt;\/div>\n    &lt;\/section>\n\n    &lt;!-- Messages -->\n    &lt;section id=\"view-messages\" class=\"hide\" role=\"region\" aria-label=\"Messages\">\n      &lt;div class=\"inbox\" style=\"min-height:60vh\">\n        &lt;div class=\"dm-left\" style=\"border-right:1px solid var(--line)\">\n          &lt;div style=\"padding:16px\">\n            &lt;h3 style=\"margin:4px 0\">Welcome to your inbox!&lt;\/h3>\n            &lt;div class=\"muted\">Drop a line, share posts and more with private conversations between you and others on X.&lt;\/div>\n            &lt;div style=\"height:10px\">&lt;\/div>\n            &lt;button class=\"btn\">Write a message&lt;\/button>\n          &lt;\/div>\n        &lt;\/div>\n        &lt;div>\n          &lt;div class=\"empty\">\n            &lt;div>\n              &lt;h2>Select a message&lt;\/h2>\n              &lt;div class=\"muted\">Choose from your existing conversations, start a new one, or just keep swimming.&lt;\/div>\n              &lt;div style=\"height:10px\">&lt;\/div>\n              &lt;button class=\"btn\">New message&lt;\/button>\n            &lt;\/div>\n          &lt;\/div>\n        &lt;\/div>\n      &lt;\/div>\n    &lt;\/section>\n\n    &lt;!-- Lists -->\n    &lt;section id=\"view-lists\" class=\"hide\" role=\"region\" aria-label=\"Lists\">\n      &lt;div class=\"header-title\">Lists&lt;\/div>\n      &lt;div style=\"padding:16px\">\n        &lt;div class=\"muted\" style=\"padding:8px 16px\">Discover new Lists&lt;\/div>\n        &lt;div class=\"rc-card\" role=\"list\">\n          &lt;div class=\"list-row\">\n            &lt;div style=\"display:flex;gap:12px;align-items:center\">\n              &lt;div class=\"list-pill\">&lt;\/div>\n              &lt;div>\n                &lt;div>J.League \u00b7 &lt;span class=\"muted\">60 members&lt;\/span>&lt;\/div>\n                &lt;div class=\"muted\">2K followers including @sascha348&lt;\/div>\n              &lt;\/div>\n            &lt;\/div>\n            &lt;div class=\"plus\">\uff0b&lt;\/div>\n          &lt;\/div>\n          &lt;div class=\"list-row\">\n            &lt;div style=\"display:flex;gap:12px;align-items:center\">\n              &lt;div class=\"list-pill\">&lt;\/div>\n              &lt;div>\n                &lt;div>Official Accounts \u00b7 &lt;span class=\"muted\">83 members&lt;\/span>&lt;\/div>\n                &lt;div class=\"muted\">263 followers including @dencetuno&lt;\/div>\n              &lt;\/div>\n            &lt;\/div>\n            &lt;div class=\"plus\">\uff0b&lt;\/div>\n          &lt;\/div>\n          &lt;div class=\"list-row\">\n            &lt;div style=\"display:flex;gap:12px;align-items:center\">\n              &lt;div class=\"list-pill\">&lt;\/div>\n              &lt;div>\n                &lt;div>kitchen \u00b7 &lt;span class=\"muted\">52 members&lt;\/span>&lt;\/div>\n                &lt;div class=\"muted\">181 followers including @Carolina_3254&lt;\/div>\n              &lt;\/div>\n            &lt;\/div>\n            &lt;div class=\"plus\">\uff0b&lt;\/div>\n          &lt;\/div>\n        &lt;\/div>\n\n        &lt;div class=\"muted\" style=\"padding:22px 16px 8px\">Your Lists&lt;\/div>\n        &lt;div class=\"empty\" style=\"opacity:.75\">&lt;div>You haven't created or followed any Lists. When you do, they'll show up here.&lt;\/div>&lt;\/div>\n      &lt;\/div>\n    &lt;\/section>\n\n    &lt;!-- Profile -->\n    &lt;section id=\"view-profile\" class=\"hide\" role=\"region\" aria-label=\"Profile\">\n      &lt;div class=\"cover\">&lt;\/div>\n      &lt;div class=\"prof-wrap\">\n        &lt;div class=\"prof-row\">\n          &lt;div class=\"pfp\">\u88d5\u5e73&lt;\/div>\n          &lt;button class=\"btn\">Edit profile&lt;\/button>\n        &lt;\/div>\n        &lt;h2 style=\"margin:10px 0 0\">\u9577\u7559\u88d5\u5e73&lt;\/h2>\n        &lt;div class=\"muted\">@PingZhang89719 \u00b7 Joined September 2025&lt;\/div>\n        &lt;div style=\"height:8px\">&lt;\/div>\n        &lt;div class=\"muted\">0 Following \u00b7 0 Followers&lt;\/div>\n      &lt;\/div>\n      &lt;div class=\"alert\">\n        &lt;div class=\"check\">\u2714&lt;\/div>\n        &lt;div>\n          &lt;div class=\"name\" style=\"font-weight:900\">You aren\u2019t verified yet&lt;\/div>\n          &lt;div class=\"muted\">Get verified for boosted replies, analytics, ad-free browsing, and more.&lt;\/div>\n        &lt;\/div>\n      &lt;\/div>\n      &lt;article class=\"card\">\n        &lt;div class=\"avatar\">\u88d5\u5e73&lt;\/div>\n        &lt;div style=\"flex:1\">\n          &lt;div class=\"meta\">&lt;span class=\"name\">\u9577\u7559\u88d5\u5e73&lt;\/span>&lt;span class=\"handle\"> \u00b7 1m&lt;\/span>&lt;\/div>\n          &lt;div>\u306f\u3058\u3081\u307e\u3057\u305f\u3002&lt;\/div>\n        &lt;\/div>\n      &lt;\/article>\n    &lt;\/section>\n\n    &lt;!-- Grok -->\n    &lt;section id=\"view-grok\" class=\"hide\" role=\"region\" aria-label=\"Grok\">\n      &lt;div class=\"grok\">\n        &lt;div class=\"logo\">\u26a1 &lt;span>Grok&lt;\/span>&lt;\/div>\n        &lt;div class=\"muted\">Ask anything&lt;\/div>\n        &lt;div class=\"input\">\n          &lt;input placeholder=\"Ask anything\" \/>\n          &lt;button>\u27a4&lt;\/button>\n        &lt;\/div>\n        &lt;div class=\"tools\">\n          &lt;button class=\"btn\">Create Images&lt;\/button>\n          &lt;button class=\"btn\">Edit Image&lt;\/button>\n        &lt;\/div>\n        &lt;div class=\"muted\" style=\"margin-top:16px\">Fast \u25be &amp;nbsp; \u00b7 &amp;nbsp; History&lt;\/div>\n      &lt;\/div>\n    &lt;\/section>\n\n    &lt;!-- Encrypted Chat -->\n    &lt;section id=\"view-encrypted\" class=\"hide\" role=\"region\" aria-label=\"Encrypted Chat\">\n      &lt;div class=\"e2ee\">\n        &lt;h1>Meet new Chat, now fully encrypted.&lt;\/h1>\n        &lt;div class=\"muted\">X Chat are now protected with end-to-end encryption on all your devices.&lt;\/div>\n        &lt;div style=\"height:12px\">&lt;\/div>\n        &lt;div class=\"bullet\">\ud83d\udd12 &lt;div>&lt;b>End-to-End Encryption&lt;\/b>&lt;br\/>Your messages are protected across devices.&lt;\/div>&lt;\/div>\n        &lt;div class=\"bullet\">\ud83d\udee1\ufe0f &lt;div>&lt;b>Uncompromising Privacy&lt;\/b>&lt;br\/>No one \u2014 not even X \u2014 can access or read your messages.&lt;\/div>&lt;\/div>\n        &lt;div class=\"cta\">\n          &lt;button class=\"btn-ghost\">Maybe later&lt;\/button>\n          &lt;button class=\"btn-primary\">Set up now&lt;\/button>\n        &lt;\/div>\n      &lt;\/div>\n    &lt;\/section>\n  &lt;\/main>\n\n  &lt;!-- Right -->\n  &lt;aside class=\"rightcol\" aria-label=\"Right column\">\n    &lt;div class=\"rc-card\">\n      &lt;div class=\"rc-title\">What\u2019s happening&lt;\/div>\n      &lt;div class=\"rc-item\">&lt;b>MTV Video Music Awards 2025&lt;\/b>&lt;div class=\"muted\">LIVE&lt;\/div>&lt;\/div>\n      &lt;div class=\"rc-item\">&lt;b>\u6771\u4eac2025 \u4e16\u754c\u9678\u4e0a&lt;\/b>&lt;div class=\"muted\">Trending \u00b7 8,724 posts&lt;\/div>&lt;\/div>\n      &lt;div class=\"rc-item\">&lt;b>JISOO&lt;\/b>&lt;div class=\"chip\">K-POP \u00b7 Trending&lt;\/div>&lt;\/div>\n    &lt;\/div>\n    &lt;div class=\"rc-card\">\n      &lt;div class=\"rc-title\">Who to follow&lt;\/div>\n      &lt;div class=\"rc-item\">\ud83c\udd7f\ufe0f &lt;b>Product Dev&lt;\/b> \u00b7 &lt;span class=\"muted\">@buildhub&lt;\/span> &lt;button class=\"btn\" style=\"float:right\">Follow&lt;\/button>&lt;\/div>\n      &lt;div class=\"rc-item\">\ud83e\udde0 &lt;b>AI Lab&lt;\/b> \u00b7 &lt;span class=\"muted\">@ailab&lt;\/span> &lt;button class=\"btn\" style=\"float:right\">Follow&lt;\/button>&lt;\/div>\n    &lt;\/div>\n  &lt;\/aside>\n&lt;\/div>\n\n&lt;!-- Floating -->\n&lt;button class=\"compose-fab\" id=\"open-compose\">Post&lt;\/button>\n&lt;div class=\"you-chip\">\u88d5\u5e73&lt;\/div>\n\n&lt;!-- Modal -->\n&lt;div class=\"modal-backdrop\" id=\"composer-modal\" aria-hidden=\"true\">\n  &lt;div class=\"modal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"New post\">\n    &lt;div class=\"top\">\n      &lt;div class=\"close-x\" id=\"close-compose\">\u2715&lt;\/div>\n      &lt;a class=\"small\" href=\"#\" id=\"drafts-link\">Drafts&lt;\/a>\n    &lt;\/div>\n    &lt;div class=\"composer\" style=\"border:none\">\n      &lt;div class=\"avatar\">\u88d5\u5e73&lt;\/div>\n      &lt;div class=\"composer-box\">\n        &lt;div class=\"reply-scope\">Everyone can reply&lt;\/div>\n        &lt;textarea id=\"modal-input\" placeholder=\"What\u2019s happening?\">&lt;\/textarea>\n        &lt;div class=\"row\">\n          &lt;div class=\"icons\">\n            &lt;div class=\"ic-btn\">\ud83d\uddbc\ufe0f&lt;\/div>&lt;div class=\"ic-btn\">\ud83c\udf00&lt;\/div>&lt;div class=\"ic-btn\">\ud83d\udcca&lt;\/div>&lt;div class=\"ic-btn\">\ud83d\ude0a&lt;\/div>&lt;div class=\"ic-btn\">\ud83d\uddd3\ufe0f&lt;\/div>&lt;div class=\"ic-btn\">\ud83d\udccd&lt;\/div>\n          &lt;\/div>\n          &lt;button id=\"modal-post\" class=\"post-btn\" disabled>Post&lt;\/button>\n        &lt;\/div>\n      &lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/div>\n\n&lt;!-- Toast -->\n&lt;div class=\"toast\" id=\"toast\">\n  &lt;div>\u2705 Your post was sent.&lt;\/div>\n  &lt;a class=\"view\" href=\"#feed-anchor\">View&lt;\/a>\n&lt;\/div>\n\n&lt;script>\n\/* ---------- Router ---------- *\/\nconst views = {\n  home: document.getElementById('view-home'),\n  explore: document.getElementById('view-explore'),\n  notifications: document.getElementById('view-notifications'),\n  messages: document.getElementById('view-messages'),\n  lists: document.getElementById('view-lists'),\n  profile: document.getElementById('view-profile'),\n  grok: document.getElementById('view-grok'),\n  encrypted: document.getElementById('view-encrypted'),\n};\nfunction show(view){\n  for(const k in views){ views&#91;k].classList.add('hide'); }\n  (views&#91;view]||views.home).classList.remove('hide');\n  window.location.hash = view;\n}\ndocument.querySelectorAll('.sb-btn').forEach(btn=>{\n  btn.addEventListener('click', ()=>show(btn.dataset.nav));\n});\nwindow.addEventListener('load', ()=>{\n  const v = location.hash.replace('#','');\n  if(v &amp;&amp; views&#91;v]) show(v);\n});\n\n\/* ---------- Composer (inline) ---------- *\/\nconst composeInput = document.getElementById('compose-input');\nconst postBtn = document.getElementById('post-btn');\ncomposeInput.addEventListener('input',()=>{\n  const on = composeInput.value.trim().length>0;\n  postBtn.disabled = !on; postBtn.classList.toggle('enabled', on);\n});\npostBtn.addEventListener('click', ()=>{\n  addPost(composeInput.value.trim());\n  composeInput.value=''; postBtn.disabled=true; postBtn.classList.remove('enabled');\n  showToast();\n});\n\n\/* ---------- Composer (modal) ---------- *\/\nconst modal = document.getElementById('composer-modal');\nconst openCompose = document.getElementById('open-compose');\nconst closeCompose = document.getElementById('close-compose');\nconst modalInput = document.getElementById('modal-input');\nconst modalPost = document.getElementById('modal-post');\n\nopenCompose.addEventListener('click', ()=>{ modal.style.display='flex'; modalInput.focus(); });\ncloseCompose.addEventListener('click', ()=>{ modal.style.display='none'; });\n\nmodalInput.addEventListener('input', ()=>{\n  const on = modalInput.value.trim().length>0;\n  modalPost.disabled = !on; modalPost.classList.toggle('enabled', on);\n});\nmodalPost.addEventListener('click', ()=>{\n  addPost(modalInput.value.trim());\n  modalInput.value=''; modalPost.disabled=true; modalPost.classList.remove('enabled');\n  modal.style.display='none'; showToast();\n});\nmodal.addEventListener('click', (e)=>{ if(e.target===modal) modal.style.display='none'; });\n\n\/* ---------- Add Post ---------- *\/\nfunction addPost(text){\n  if(!text) return;\n  const card = document.createElement('article');\n  card.className='card';\n  card.innerHTML = `\n    &lt;div class=\"avatar\">\u88d5\u5e73&lt;\/div>\n    &lt;div style=\"flex:1\">\n      &lt;div class=\"meta\">&lt;span class=\"name\">\u9577\u7559\u88d5\u5e73&lt;\/span>&lt;span class=\"handle\"> \u00b7 now&lt;\/span>&lt;\/div>\n      &lt;div>${escapeHTML(text)}&lt;\/div>\n      &lt;div class=\"actions\">\n        &lt;div class=\"action\">\ud83d\udcac &lt;span>0&lt;\/span>&lt;\/div>\n        &lt;div class=\"action\">\ud83d\udd01 &lt;span>0&lt;\/span>&lt;\/div>\n        &lt;div class=\"action\">\u2764\ufe0f &lt;span>0&lt;\/span>&lt;\/div>\n        &lt;div class=\"action\">\u2197\ufe0f&lt;\/div>\n      &lt;\/div>\n    &lt;\/div>`;\n  const anchor = document.getElementById('feed-anchor');\n  anchor.parentNode.insertBefore(card, anchor);\n}\nfunction escapeHTML(s){return s.replaceAll('&amp;','&amp;amp;').replaceAll('&lt;','&amp;lt;').replaceAll('>','&amp;gt;')}\n\n\/* ---------- Toast ---------- *\/\nconst toast = document.getElementById('toast');\nfunction showToast(){\n  toast.style.display='flex';\n  clearTimeout(showToast._t);\n  showToast._t = setTimeout(()=> toast.style.display='none', 2600);\n}\n\n\/* ---------- Home tab visual only ---------- *\/\ndocument.querySelectorAll('&#91;data-home-tab]').forEach(t=>{\n  t.addEventListener('click', ()=>{\n    document.querySelectorAll('&#91;data-home-tab]').forEach(x=>x.classList.remove('active'));\n    t.classList.add('active');\n  });\n});\n&lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[4,6,87],"tags":[3],"class_list":{"0":"post-26167","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-programming","7":"category-web","9":"tag-programming"},"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26167"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26167\/revisions"}],"predecessor-version":[{"id":26168,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26167\/revisions\/26168"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26167"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}