GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Video Detail UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; border-radius:28px;12 }13 14 /* Video Player */15 .player {16 position:absolute; top:0; left:0; width:1080px; height:980px; background:#000;17 }18 .statusbar {19 position:absolute; top:24px; left:24px; right:24px; height:40px; color:#fff; font-weight:600; font-size:32px;20 display:flex; align-items:center; justify-content:space-between; opacity:0.9;21 }22 .status-left { display:flex; align-items:center; gap:16px; }23 .status-center { display:flex; align-items:center; gap:14px; }24 .status-dot { width:18px; height:18px; border-radius:50%; background:#fff; opacity:0.85; }25 .status-right { display:flex; align-items:center; gap:16px; }26 .icon-shape { width:24px; height:24px; border-radius:4px; border:2px solid #fff; opacity:0.9; }27 .battery {28 width:42px; height:24px; border:2px solid #fff; border-radius:4px; position:relative;29 }30 .battery::after {31 content:""; position:absolute; right:-6px; top:7px; width:6px; height:10px; background:#fff; border-radius:2px;32 }33 .battery .level { position:absolute; left:3px; top:3px; width:28px; height:16px; background:#fff; }34 35 .player .close {36 position:absolute; left:32px; top:160px; color:#fff; font-size:64px; line-height:1;37 }38 .player .menu {39 position:absolute; right:32px; top:160px; width:12px; display:flex; flex-direction:column; gap:10px; align-items:center;40 }41 .player .menu span { width:12px; height:12px; background:#fff; border-radius:50%; opacity:0.9; }42 43 .replay {44 position:absolute; top:430px; left:0; right:0; display:flex; flex-direction:column; align-items:center; color:#fff;45 gap:18px;46 }47 .replay svg { width:96px; height:96px; }48 .replay .label { font-size:34px; font-weight:600; opacity:0.95; }49 50 .time-row {51 position:absolute; bottom:110px; left:40px; display:flex; align-items:center; gap:24px; color:#dbe9ff; font-size:30px; font-weight:600;52 }53 .seek {54 position:absolute; left:0; right:0; bottom:70px; height:6px;55 margin:0 40px;56 background:#1f2a33; border-radius:3px;57 }58 .seek .progress { width:92%; height:100%; background:#3ea6ff; border-radius:3px; }59 .seek .knob { position:absolute; right:30px; top:-12px; width:28px; height:28px; background:#fff; border-radius:50%; border:2px solid #e6e6e6; }60 61 .fullscreen {62 position:absolute; right:34px; bottom:130px; width:44px; height:44px;63 }64 .fullscreen svg { width:44px; height:44px; }65 66 /* Content Panel */67 .content {68 position:absolute; top:980px; left:0; width:1080px; height:auto; background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;69 box-shadow: 0 -2px 0 rgba(0,0,0,0.06) inset;70 }71 .content-inner { padding:40px; }72 73 .title {74 font-size:56px; font-weight:800; color:#0f172a; letter-spacing:0.2px; margin-bottom:40px;75 }76 77 .actions {78 display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:26px;79 }80 .actions-left { display:flex; gap:34px; }81 .action {82 display:flex; flex-direction:column; align-items:center; gap:14px;83 }84 .action .btn {85 width:120px; height:120px; border:2px solid #dde3ea; border-radius:24px; display:flex; align-items:center; justify-content:center;86 background:#ffffff;87 }88 .action .btn svg { width:52px; height:52px; }89 .action .count { font-size:30px; color:#334155; font-weight:700; }90 .actions .kebab {91 width:96px; height:96px; border-radius:24px; border:2px solid #dde3ea; display:flex; align-items:center; justify-content:center;92 }93 .actions .kebab .dot { width:12px; height:12px; background:#475569; border-radius:50%; margin:4px 0; }94 .actions .kebab .dots { display:flex; flex-direction:column; align-items:center; }95 96 .desc {97 font-size:34px; line-height:1.5; color:#334155; margin:14px 4px 30px 4px;98 }99 .desc .more { color:#2563eb; font-weight:700; text-decoration:none; }100 101 .divider { height:1px; background:#e5e7eb; margin:26px 0 30px; }102 103 .author-row {104 display:flex; align-items:center; justify-content:space-between; margin-bottom:30px;105 }106 .author-left { display:flex; align-items:center; gap:24px; }107 .avatar {108 width:96px; height:96px; border-radius:50%; overflow:hidden; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; background:#E0E0E0; color:#757575; font-size:24px;109 }110 .author-name { font-size:40px; font-weight:800; color:#0f172a; }111 .author-sub { font-size:30px; color:#64748b; margin-top:6px; }112 113 .follow-btn {114 background:#eef2f7; color:#0f172a; border:2px solid #dbe2ea; border-radius:18px; font-size:32px; font-weight:700;115 padding:18px 26px; display:flex; align-items:center; gap:12px;116 }117 .follow-btn svg { width:28px; height:28px; }118 119 .share-btn {120 margin:34px 0 36px; width:100%; height:130px; background:#3b82f6; color:#fff; border:none; border-radius:26px;121 display:flex; align-items:center; justify-content:center; gap:18px; font-size:40px; font-weight:800; box-shadow:0 6px 14px rgba(59,130,246,0.35);122 }123 .share-btn svg { width:44px; height:44px; }124 125 .more-row {126 display:flex; align-items:center; justify-content:space-between; margin:12px 0 24px;127 }128 .more-title { font-size:32px; color:#334155; letter-spacing:1px; font-weight:800; }129 .toggle {130 display:flex; align-items:center; gap:18px; font-size:32px; color:#64748b;131 }132 .switch {133 width:132px; height:64px; background:#bfdbfe; border-radius:32px; position:relative;134 }135 .switch::after {136 content:""; position:absolute; left:72px; top:6px; width:52px; height:52px; background:#3b82f6; border-radius:26px; box-shadow:0 2px 6px rgba(0,0,0,0.2);137 }138 139 .video-item { padding:18px 0; border-bottom:1px solid #e5e7eb; display:flex; align-items:flex-start; }140 .thumb {141 width:480px; height:270px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;142 display:flex; align-items:center; justify-content:center; position:relative; border-radius:12px; overflow:hidden;143 }144 .duration {145 position:absolute; right:12px; bottom:12px; background:#111; color:#fff; font-size:28px; padding:6px 10px; border-radius:8px; opacity:0.95;146 }147 .details { flex:1; padding-left:26px; }148 .v-title { font-size:36px; font-weight:800; color:#0f172a; margin-bottom:10px; }149 .v-author { font-size:30px; color:#475569; margin-bottom:6px; }150 .v-meta { font-size:28px; color:#64748b; }151 .item-menu { width:20px; display:flex; flex-direction:column; gap:10px; align-items:center; margin-left:20px; margin-top:6px; }152 .item-menu span { width:10px; height:10px; background:#94a3b8; border-radius:50%; }153 154 /* Floating quick actions */155 .floating {156 position:absolute; left:50%; bottom:260px; transform:translateX(-50%);157 background:#fff; border:2px solid #e5e7eb; border-radius:40px; box-shadow:0 10px 30px rgba(0,0,0,0.2);158 display:flex; align-items:center; gap:20px; padding:24px 36px;159 }160 .floating .circle {161 width:84px; height:84px; background:#fff; border:2px solid #e5e7eb; border-radius:42px; display:flex; align-items:center; justify-content:center;162 }163 .floating .circle svg { width:42px; height:42px; }164 .home-indicator {165 position:absolute; bottom:18px; left:50%; transform:translateX(-50%);166 width:320px; height:12px; border-radius:6px; background:#e5e7eb;167 }168 169 /* Placeholder image label text */170 .img-label { font-size:26px; padding:0 10px; text-align:center; }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Video Player -->177 <div class="player">178 <div class="statusbar">179 <div class="status-left">180 <div>9:58</div>181 </div>182 <div class="status-center">183 <div class="status-dot"></div>184 <div class="status-dot"></div>185 <div class="status-dot"></div>186 <div style="width:8px; height:8px; background:#fff; border-radius:50%;"></div>187 </div>188 <div class="status-right">189 <div class="icon-shape"></div>190 <div class="battery"><div class="level"></div></div>191 </div>192 </div>193 194 <div class="close">✕</div>195 196 <div class="menu">197 <span></span><span></span><span></span>198 </div>199 200 <div class="replay">201 <svg viewBox="0 0 24 24">202 <path d="M12 5c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>203 <path d="M8 8l-3-3v6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>204 </svg>205 <div class="label">Replay</div>206 </div>207 208 <div class="time-row">209 <div>01:53 / 01:54</div>210 </div>211 212 <div class="fullscreen">213 <svg viewBox="0 0 24 24">214 <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>215 </svg>216 </div>217 218 <div class="seek">219 <div class="progress"></div>220 <div class="knob"></div>221 </div>222 </div>223 224 <!-- Content Panel -->225 <div class="content">226 <div class="content-inner">227 <div class="title">Soba Summer Gluten-Free Recipe</div>228 229 <div class="actions">230 <div class="actions-left">231 <div class="action">232 <div class="btn">233 <svg viewBox="0 0 24 24">234 <path d="M8 5l10 7-10 7V5z" fill="#3b82f6"/>235 <rect x="2" y="2" width="20" height="20" rx="4" fill="none" stroke="#94a3b8" stroke-width="2"/>236 </svg>237 </div>238 <div class="count">108</div>239 </div>240 <div class="action">241 <div class="btn">242 <svg viewBox="0 0 24 24">243 <path d="M12 21s-6-4.3-8-7.2C2 11 3.8 7.5 7 8.1c2 .4 3 1.9 3 1.9s1-1.5 3-1.9c3.2-.6 5 2.9 3 5.7C18 16.7 12 21 12 21z" fill="none" stroke="#ef4444" stroke-width="2" stroke-linejoin="round"/>244 </svg>245 </div>246 <div class="count">1</div>247 </div>248 <div class="action">249 <div class="btn">250 <svg viewBox="0 0 24 24">251 <path d="M4 5h16v10H8l-4 4z" fill="none" stroke="#64748b" stroke-width="2" stroke-linejoin="round"/>252 </svg>253 </div>254 <div class="count">0</div>255 </div>256 </div>257 <div class="kebab">258 <div class="dots">259 <div class="dot"></div>260 <div class="dot"></div>261 <div class="dot"></div>262 </div>263 </div>264 </div>265 266 <div class="desc">267 korKitchen does a weekly gluten-free recipe for you to enjoy. It's nutrish & delish! You can see m<span class="more">... more</span>268 </div>269 270 <div class="divider"></div>271 272 <div class="author-row">273 <div class="author-left">274 <div class="avatar">[IMG: User Avatar]</div>275 <div>276 <div class="author-name">Maja Kermath</div>277 <div class="author-sub">51 videos</div>278 </div>279 </div>280 <div class="follow-btn">281 <svg viewBox="0 0 24 24">282 <path d="M4 12l5 5 11-11" fill="none" stroke="#0f172a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>283 </svg>284 Following285 </div>286 </div>287 288 <button class="share-btn">289 <svg viewBox="0 0 24 24">290 <path d="M12 4v12M12 4l5 5M12 4L7 9" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>291 <path d="M5 20h14v-6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>292 </svg>293 Share294 </button>295 296 <div class="more-row">297 <div class="more-title">MORE VIDEOS</div>298 <div class="toggle">299 <div>Autoplay</div>300 <div class="switch"></div>301 </div>302 </div>303 304 <!-- Video list item 1 -->305 <div class="video-item">306 <div class="thumb">307 <div class="img-label">[IMG: Video Thumbnail]</div>308 <div class="duration">02:55</div>309 </div>310 <div class="details">311 <div class="v-title">On-the-Go Flow #1</div>312 <div class="v-author">Maja Kermath</div>313 <div class="v-meta">763 views • 10 years ago</div>314 </div>315 <div class="item-menu"><span></span><span></span><span></span></div>316 </div>317 318 <!-- Video list item 2 -->319 <div class="video-item">320 <div class="thumb">321 <div class="img-label">[IMG: Video Thumbnail]</div>322 <div class="duration">01:36</div>323 </div>324 <div class="details">325 <div class="v-title">Kor180 Beauties</div>326 <div class="v-author">Maja Kermath</div>327 <div class="v-meta">— views • — years ago</div>328 </div>329 <div class="item-menu"><span></span><span></span><span></span></div>330 </div>331 332 </div>333 </div>334 335 <!-- Floating quick actions -->336 <div class="floating">337 <div class="circle">338 <svg viewBox="0 0 24 24">339 <path d="M8 5l10 7-10 7V5z" fill="#0f172a"/>340 </svg>341 </div>342 <div class="circle">343 <svg viewBox="0 0 24 24">344 <path d="M4 5h16v10H8l-4 4z" fill="none" stroke="#0f172a" stroke-width="2" stroke-linejoin="round"/>345 </svg>346 </div>347 </div>348 349 <div class="home-indicator"></div>350</div>351</body>352</html>