GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #000;14 font-family: Arial, Helvetica, sans-serif;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 96px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 36px;29 box-sizing: border-box;30 font-size: 34px;31 color: #fff;32 opacity: 0.9;33 }34 .status-left { display: flex; align-items: center; gap: 24px; }35 .status-right { display: flex; align-items: center; gap: 18px; }36 .sys-pill {37 width: 40px; height: 40px; background: #fff; border-radius: 20px; opacity: 0.9;38 }39 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; }40 41 /* Video area */42 .video-area {43 position: absolute;44 top: 96px;45 left: 0;46 width: 1080px;47 height: 980px;48 background: #000;49 }50 .video-actions-top {51 position: absolute;52 top: 28px;53 left: 28px;54 right: 28px;55 display: flex;56 justify-content: space-between;57 align-items: center;58 opacity: 0.9;59 }60 .icon-btn {61 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;62 border-radius: 36px; color: #bbb;63 }64 .video-replay {65 position: absolute;66 top: 420px;67 left: 0; right: 0;68 display: flex; flex-direction: column; align-items: center; gap: 12px;69 color: #bbb;70 font-size: 32px;71 }72 .video-progress {73 position: absolute;74 bottom: 130px;75 left: 36px;76 right: 36px;77 color: #bbb;78 font-size: 30px;79 }80 .progress-bar {81 width: 100%;82 height: 6px;83 background: #1f1f1f;84 border-radius: 3px;85 margin-top: 18px;86 position: relative;87 }88 .progress-fill {89 width: 96%;90 height: 6px;91 background: #3aa5ff;92 border-radius: 3px;93 }94 .progress-knob {95 position: absolute;96 right: -6px;97 top: -10px;98 width: 26px; height: 26px; border-radius: 13px; background: #e0e0e0; border: 3px solid #bdbdbd;99 }100 .icon-dots-vertical { opacity: 0.9; }101 .video-corner {102 position: absolute;103 bottom: 140px;104 right: 36px;105 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: #bbb;106 }107 108 /* Content card */109 .content-card {110 position: absolute;111 top: 1076px;112 left: 0;113 width: 1080px;114 height: 1160px;115 background: #fff;116 color: #222;117 border-top-left-radius: 40px;118 border-top-right-radius: 40px;119 box-sizing: border-box;120 padding: 48px 48px 24px;121 }122 .title {123 font-size: 60px;124 font-weight: 800;125 line-height: 1.1;126 margin-bottom: 40px;127 color: #1b2937;128 }129 .actions-row {130 display: flex; align-items: center; gap: 28px;131 }132 .pill {133 width: 132px; height: 120px;134 border: 1px solid #e0e0e0; border-radius: 24px;135 background: #f6f7f8;136 display: flex; align-items: center; justify-content: center;137 }138 .actions-right {139 margin-left: auto;140 }141 .counts-row {142 display: flex; gap: 130px; margin-top: 16px; margin-left: 18px; color: #5f6b7a; font-size: 36px;143 }144 .description {145 margin-top: 32px;146 font-size: 36px;147 line-height: 1.5;148 color: #3a4755;149 }150 .link { color: #1e88e5; }151 .divider {152 height: 1px; background: #e6e6e6; margin: 40px 0;153 }154 .author-row {155 display: flex; align-items: center; justify-content: space-between;156 }157 .author-left { display: flex; align-items: center; gap: 24px; }158 .avatar {159 width: 100px; height: 100px; border-radius: 50%;160 background: #E0E0E0; border: 1px solid #BDBDBD;161 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;162 }163 .author-info { display: flex; flex-direction: column; }164 .author-name { font-size: 40px; font-weight: 700; color: #1b2937; }165 .author-meta { font-size: 32px; color: #7a8897; }166 .follow-btn {167 padding: 18px 28px; border-radius: 16px; background: #eef1f4; color: #1b2937; font-size: 34px; display: flex; gap: 12px; align-items: center; border: 1px solid #d8dee5;168 }169 .share-btn {170 margin-top: 36px;171 width: 984px; height: 140px;172 border-radius: 28px; background: #1e88e5;173 color: #fff; font-size: 44px; font-weight: 700;174 display: flex; align-items: center; justify-content: center; gap: 18px;175 }176 .more-row {177 margin-top: 40px; display: flex; align-items: center; justify-content: space-between;178 color: #75808f; font-size: 34px; letter-spacing: 0.3px;179 }180 .toggle {181 width: 144px; height: 64px; background: #bcdcf8; border-radius: 32px; position: relative;182 }183 .toggle::after {184 content: ""; width: 56px; height: 56px; border-radius: 28px; background: #1e88e5; position: absolute; right: 4px; top: 4px;185 }186 .video-item {187 margin-top: 24px; display: flex; align-items: center; gap: 24px;188 }189 .thumb {190 width: 220px; height: 130px;191 background: #E0E0E0; border: 1px solid #BDBDBD;192 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;193 }194 .video-info { display: flex; flex-direction: column; }195 .video-title { font-size: 38px; color: #1b2937; font-weight: 700; }196 .video-sub { font-size: 30px; color: #7a8897; }197 .item-menu { margin-left: auto; }198 199 /* Bottom sheet for quality selection */200 .bottom-sheet {201 position: absolute;202 left: 0; right: 0; bottom: 96px;203 width: 1080px; height: 720px;204 background: #fff; color: #222; border-top-left-radius: 28px; border-top-right-radius: 28px;205 box-shadow: 0 -8px 24px rgba(0,0,0,0.18);206 padding: 36px 48px;207 box-sizing: border-box;208 }209 .option {210 display: flex; align-items: center; gap: 28px; font-size: 40px; color: #333;211 padding: 24px 0;212 }213 .radio {214 width: 42px; height: 42px; border-radius: 21px; border: 3px solid #1e88e5; display: flex; align-items: center; justify-content: center;215 }216 .radio .dot { width: 22px; height: 22px; background: #1e88e5; }217 .radio-off { border-color: #c7cdd4; }218 .radio-off .dot { background: transparent; }219 /* Home indicator */220 .home-indicator {221 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);222 width: 280px; height: 12px; background: #ffffff; border-radius: 6px; opacity: 0.85;223 }224 225 /* SVG norm */226 svg { display: block; }227</style>228</head>229<body>230<div id="render-target">231 232 <!-- Status Bar -->233 <div class="status-bar">234 <div class="status-left">235 <div>10:03</div>236 <div class="sys-pill"></div>237 <div class="sys-pill"></div>238 <div class="sys-pill"></div>239 <span style="color:#fff;font-weight:700;">oyo</span>240 <span class="dot"></span>241 </div>242 <div class="status-right">243 <!-- Wi-Fi icon -->244 <svg width="40" height="40" viewBox="0 0 40 40">245 <path d="M6 16c8-6 20-6 28 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>246 <path d="M10 22c6-4 14-4 20 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>247 <path d="M16 28c3-2 5-2 8 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>248 <circle cx="20" cy="32" r="2.5" fill="#fff"/>249 </svg>250 <!-- Battery icon -->251 <svg width="40" height="40" viewBox="0 0 40 40">252 <rect x="6" y="10" width="26" height="18" rx="3" stroke="#fff" stroke-width="3" fill="none"/>253 <rect x="9" y="13" width="20" height="12" fill="#fff"/>254 <rect x="32" y="15" width="3" height="8" rx="1.5" fill="#fff"/>255 </svg>256 </div>257 </div>258 259 <!-- Video Area -->260 <div class="video-area">261 <div class="video-actions-top">262 <div class="icon-btn">263 <svg width="40" height="40" viewBox="0 0 40 40">264 <path d="M8 8 L32 32 M32 8 L8 32" stroke="#cfcfcf" stroke-width="3" stroke-linecap="round" />265 </svg>266 </div>267 <div class="icon-btn icon-dots-vertical">268 <svg width="10" height="40" viewBox="0 0 10 40">269 <circle cx="5" cy="8" r="3.5" fill="#cfcfcf"/>270 <circle cx="5" cy="20" r="3.5" fill="#cfcfcf"/>271 <circle cx="5" cy="32" r="3.5" fill="#cfcfcf"/>272 </svg>273 </div>274 </div>275 276 <div class="video-replay">277 <div>278 <svg width="80" height="80" viewBox="0 0 40 40">279 <path d="M20 8a12 12 0 1 1-8.5 3" stroke="#cfcfcf" stroke-width="3" fill="none" stroke-linecap="round"/>280 <path d="M12 9 L12 18 L5 14 Z" fill="#cfcfcf"/>281 </svg>282 </div>283 <div>Replay</div>284 </div>285 286 <div class="video-progress">287 <div>01:53 / 01:54</div>288 <div class="progress-bar">289 <div class="progress-fill"></div>290 <div class="progress-knob"></div>291 </div>292 </div>293 294 <div class="video-corner">295 <svg width="40" height="40" viewBox="0 0 40 40">296 <path d="M8 14 V8 H14 M26 8 H32 V14 M8 26 V32 H14 M32 26 V32 H26" stroke="#cfcfcf" stroke-width="3" fill="none" stroke-linecap="round"/>297 </svg>298 </div>299 </div>300 301 <!-- Content Card -->302 <div class="content-card">303 <div class="title">Soba Summer Gluten-Free Recipe</div>304 305 <div class="actions-row">306 <div class="pill">307 <svg width="48" height="48" viewBox="0 0 48 48">308 <polygon points="18,14 36,24 18,34" fill="#7a8897"/>309 <rect x="12" y="14" width="4" height="20" fill="#7a8897"/>310 </svg>311 </div>312 <div class="pill">313 <svg width="48" height="48" viewBox="0 0 48 48">314 <path d="M24 37 L12 25 C7 20 9 13 15 12c4-1 7 1 9 4 2-3 5-5 9-4 6 1 8 8 3 13L24 37Z" fill="#7a8897"/>315 </svg>316 </div>317 <div class="pill">318 <svg width="48" height="48" viewBox="0 0 48 48">319 <path d="M10 12h28v18h-16l-8 6v-6h-4z" fill="#7a8897"/>320 </svg>321 </div>322 <div class="pill actions-right">323 <svg width="40" height="40" viewBox="0 0 10 40">324 <circle cx="5" cy="8" r="3.5" fill="#7a8897"/>325 <circle cx="5" cy="20" r="3.5" fill="#7a8897"/>326 <circle cx="5" cy="32" r="3.5" fill="#7a8897"/>327 </svg>328 </div>329 </div>330 331 <div class="counts-row">332 <div>108</div>333 <div>1</div>334 <div>0</div>335 </div>336 337 <div class="description">338 korKitchen does a weekly gluten-free recipe for you to enjoy. It's nutrish & delish! You can see m<span class="link">... more</span>339 </div>340 341 <div class="divider"></div>342 343 <div class="author-row">344 <div class="author-left">345 <div class="avatar">[IMG: User Avatar]</div>346 <div class="author-info">347 <div class="author-name">Maja Kermath</div>348 <div class="author-meta">51 videos</div>349 </div>350 </div>351 <div class="follow-btn">352 <svg width="34" height="34" viewBox="0 0 34 34">353 <path d="M8 18l6 6 12-14" stroke="#1b2937" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>354 </svg>355 <span>Following</span>356 </div>357 </div>358 359 <div class="divider"></div>360 361 <div class="share-btn">362 <svg width="44" height="44" viewBox="0 0 44 44">363 <path d="M22 26v-16m0 0l-8 8m8-8l8 8" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>364 <rect x="10" y="28" width="24" height="8" rx="2" fill="#fff" opacity="0.35"/>365 </svg>366 <span>Share</span>367 </div>368 369 <div class="more-row">370 <div style="font-weight:700; color:#3a4755;">MORE VIDEOS</div>371 <div style="display:flex; align-items:center; gap:18px;">372 <div style="color:#3a4755;">Autoplay</div>373 <div class="toggle"></div>374 </div>375 </div>376 377 <div class="video-item">378 <div class="thumb">[IMG: Video Thumbnail]</div>379 <div class="video-info">380 <div class="video-title">On-the-Go Flow #1</div>381 <div class="video-sub">Maja Kermath</div>382 </div>383 <div class="item-menu">384 <svg width="40" height="40" viewBox="0 0 10 40">385 <circle cx="5" cy="8" r="3.5" fill="#7a8897"/>386 <circle cx="5" cy="20" r="3.5" fill="#7a8897"/>387 <circle cx="5" cy="32" r="3.5" fill="#7a8897"/>388 </svg>389 </div>390 </div>391 </div>392 393 <!-- Bottom Sheet -->394 <div class="bottom-sheet">395 <div class="option">396 <div class="radio"><div class="dot"></div></div>397 <div>Auto</div>398 </div>399 <div class="option">400 <div class="radio radio-off"><div class="dot"></div></div>401 <div>720p</div>402 </div>403 <div class="option">404 <div class="radio radio-off"><div class="dot"></div></div>405 <div>360p</div>406 </div>407 </div>408 409 <!-- Home Indicator -->410 <div class="home-indicator"></div>411</div>412</body>413</html>