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; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #000000;15 color: #ffffff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 90px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 36px;29 font-weight: 600;30 font-size: 36px;31 color: #fff;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; display: inline-block; }39 .signal-bar {40 width: 36px; height: 28px; display: inline-block; position: relative;41 }42 .signal-bar span {43 position: absolute; bottom: 0; width: 6px; background: #fff; border-radius: 2px;44 }45 .signal-bar span:nth-child(1){ left: 0; height: 10px;}46 .signal-bar span:nth-child(2){ left: 10px; height: 16px;}47 .signal-bar span:nth-child(3){ left: 20px; height: 22px;}48 .signal-bar span:nth-child(4){ left: 30px; height: 28px;}49 .battery {50 width: 40px; height: 22px; border: 2px solid #fff; border-radius: 4px; position: relative; display: inline-block;51 }52 .battery::after {53 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px;54 }55 .battery-fill { position: absolute; left: 2px; top: 2px; height: 16px; width: 28px; background: #fff; }56 57 /* Video Area */58 .video-area {59 position: absolute;60 top: 90px;61 left: 0;62 width: 100%;63 height: 820px;64 background: #000;65 }66 .video-close {67 position: absolute; left: 36px; top: 140px; width: 72px; height: 72px; opacity: 0.9;68 }69 .video-menu {70 position: absolute; right: 36px; top: 300px; width: 16px; height: 64px; display: flex; align-items: center; justify-content: space-between; flex-direction: column; opacity: 0.8;71 }72 .video-menu .dot {73 width: 10px; height: 10px; background: #bdbdbd;74 }75 .replay-wrap {76 position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); text-align: center; opacity: 0.9;77 }78 .replay-icon { width: 96px; height: 96px; margin: 0 auto; }79 .replay-text { margin-top: 12px; font-size: 36px; color: #bdbdbd; }80 .fs-icon {81 position: absolute; right: 36px; bottom: 120px; width: 60px; height: 60px; opacity: 0.9;82 }83 84 .progress-wrap {85 position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; display: flex; align-items: flex-start; padding: 24px 36px 24px 36px; box-sizing: border-box;86 }87 .time-text { font-size: 30px; color: #cfd8dc; margin-right: 24px; }88 .progress-bar {89 flex: 1; height: 6px; background: #263238; border-radius: 3px; position: relative; top: 18px;90 }91 .progress-fill {92 position: absolute; left: 0; top: 0; height: 6px; width: 86%; background: #4fc3f7; border-radius: 3px;93 }94 .progress-knob {95 position: absolute; right: -12px; top: -9px; width: 24px; height: 24px; border-radius: 50%; background: #e0f7fa; border: 2px solid #4fc3f7;96 }97 98 /* Content area under video */99 .content {100 position: absolute;101 top: 910px;102 left: 0;103 width: 100%;104 height: 1490px;105 background: #ffffff;106 color: #222;107 border-top-left-radius: 42px;108 border-top-right-radius: 42px;109 box-sizing: border-box;110 padding: 48px 36px 240px 36px;111 }112 .title {113 font-size: 56px; font-weight: 800; color: #2e4057; line-height: 1.2; margin-bottom: 36px;114 }115 .actions-row {116 display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;117 }118 .actions-left {119 display: flex; gap: 24px; align-items: center;120 }121 .act-btn {122 width: 144px; height: 120px; border: 2px solid #e0e0e0; border-radius: 24px; display: flex; align-items: center; justify-content: center; background: #fafafa;123 }124 .act-counts {125 display: flex; gap: 130px; margin-top: 12px; margin-left: 12px; color: #616161; font-size: 30px;126 }127 .menu-pill {128 width: 108px; height: 108px; border-radius: 24px; background: #f5f5f5; border: 2px solid #e0e0e0; display: flex; align-items: center; justify-content: center; margin-right: 12px;129 }130 .menu-vert {131 width: 8px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;132 }133 .menu-vert .dot { width: 10px; height: 10px; background: #9e9e9e; }134 135 .desc {136 font-size: 34px; line-height: 1.5; color: #455a64; margin-top: 18px;137 }138 .desc .more { color: #1e88e5; }139 140 .divider { height: 2px; background: #eeeeee; margin: 36px 0; }141 142 .author-row {143 display: flex; align-items: center; justify-content: space-between;144 }145 .author-left { display: flex; align-items: center; gap: 24px; }146 .avatar {147 width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 1px solid #BDBDBD; background: #E0E0E0; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;148 }149 .author-text .name { font-size: 40px; font-weight: 700; color: #263238; }150 .author-text .sub { font-size: 30px; color: #90a4ae; margin-top: 6px; }151 .follow-btn {152 background: #f1f3f4; color: #263238; border: 2px solid #e0e0e0; border-radius: 18px; padding: 18px 28px; font-size: 34px; display: inline-flex; align-items: center; gap: 14px;153 }154 155 .share-cta {156 margin: 30px 0 24px 0;157 width: 100%;158 background: #1e88e5;159 color: #fff;160 border-radius: 36px;161 height: 150px;162 display: flex; align-items: center; justify-content: center; gap: 24px;163 font-size: 44px; font-weight: 700;164 }165 166 .more-videos-header {167 display: flex; align-items: center; justify-content: space-between; margin-top: 36px; margin-bottom: 18px;168 }169 .more-videos-header .label { font-size: 34px; color: #37474f; letter-spacing: 1px; }170 .toggle {171 display: inline-flex; align-items: center; gap: 18px; font-size: 32px; color: #607d8b;172 }173 .switch {174 width: 120px; height: 64px; background: #bbdefb; border-radius: 32px; position: relative;175 }176 .switch::after {177 content: ""; width: 58px; height: 58px; background: #2196f3; border-radius: 50%; position: absolute; right: 3px; top: 3px;178 }179 180 .video-card {181 display: flex; align-items: flex-start; margin-top: 24px; gap: 24px;182 }183 .thumb {184 width: 480px; height: 270px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; position: relative;185 }186 .timestamp {187 position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,0.7); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 26px;188 }189 .video-info {190 flex: 1;191 }192 .video-title { font-size: 40px; font-weight: 700; color: #263238; }193 .video-meta { font-size: 30px; color: #90a4ae; margin-top: 8px; }194 .card-menu {195 width: 48px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; margin-left: auto; margin-right: 24px;196 }197 .card-menu .dot { width: 10px; height: 10px; background: #9e9e9e; }198 199 /* Bottom sheet overlay */200 .bottom-sheet {201 position: absolute;202 left: 0; right: 0; bottom: 0;203 width: 100%;204 height: 380px;205 background: #ffffff;206 border-top-left-radius: 28px;207 border-top-right-radius: 28px;208 box-shadow: 0 -10px 30px rgba(0,0,0,0.35);209 color: #263238;210 padding: 24px 36px;211 box-sizing: border-box;212 }213 .sheet-row {214 display: flex; align-items: center; justify-content: space-between; padding: 24px 0;215 border-bottom: 2px solid #eeeeee; font-size: 40px;216 }217 .sheet-row:last-child { border-bottom: none; }218 .sheet-left { display: inline-flex; align-items: center; gap: 24px; }219 .sheet-right { color: #607d8b; font-size: 38px; }220 .home-pill {221 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);222 width: 240px; height: 10px; background: #dcdcdc; border-radius: 5px;223 }224 225 /* Simple icon helpers */226 .icon { display: inline-block; }227 svg { display: block; }228</style>229</head>230<body>231<div id="render-target">232 233 <!-- Status bar -->234 <div class="status-bar">235 <div>10:02</div>236 <div class="status-icons">237 <span class="dot"></span>238 <span class="dot"></span>239 <span class="dot"></span>240 <span style="margin-left:6px; font-weight:700;">ovo</span>241 <span class="dot" style="margin-left:12px;"></span>242 <div class="signal-bar">243 <span></span><span></span><span></span><span></span>244 </div>245 <div class="battery"><div class="battery-fill"></div></div>246 </div>247 </div>248 249 <!-- Video area -->250 <div class="video-area">251 <!-- Close (X) -->252 <div class="video-close">253 <svg width="72" height="72" viewBox="0 0 24 24">254 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#b0bec5" stroke-width="2.5" stroke-linecap="round" fill="none"/>255 </svg>256 </div>257 258 <!-- Vertical menu dots -->259 <div class="video-menu">260 <span class="dot"></span>261 <span class="dot"></span>262 <span class="dot"></span>263 </div>264 265 <!-- Replay -->266 <div class="replay-wrap">267 <svg class="replay-icon" viewBox="0 0 48 48">268 <circle cx="24" cy="24" r="20" stroke="#b0bec5" stroke-width="2.5" fill="none" />269 <path d="M20 14 L14 18 L20 22" fill="none" stroke="#b0bec5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>270 <path d="M14 18 C15 12, 22 10, 28 12 C34 14, 38 20, 36 26" fill="none" stroke="#b0bec5" stroke-width="2.5" stroke-linecap="round"/>271 </svg>272 <div class="replay-text">Replay</div>273 </div>274 275 <!-- Fullscreen icon -->276 <div class="fs-icon">277 <svg viewBox="0 0 24 24" width="60" height="60">278 <path d="M3 9 V3 H9 M15 3 H21 V9 M21 15 V21 H15 M9 21 H3 V15" stroke="#b0bec5" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>279 </svg>280 </div>281 282 <!-- Progress + time -->283 <div class="progress-wrap">284 <div class="time-text">01:53 / 01:54</div>285 <div class="progress-bar">286 <div class="progress-fill"></div>287 <div class="progress-knob"></div>288 </div>289 </div>290 </div>291 292 <!-- Content area -->293 <div class="content">294 295 <div class="title">Soba Summer Gluten-Free Recipe</div>296 297 <div class="actions-row">298 <div class="actions-left">299 <div class="act-btn">300 <svg class="icon" viewBox="0 0 24 24" width="44" height="44">301 <polygon points="8,5 19,12 8,19" fill="none" stroke="#90a4ae" stroke-width="2.5" stroke-linejoin="round"/>302 </svg>303 </div>304 <div class="act-btn">305 <svg class="icon" viewBox="0 0 24 24" width="44" height="44">306 <path d="M12 20 L5 13 C2 10, 4 6, 8 6 C10 6, 12 8, 12 9 C12 8, 14 6, 16 6 C20 6, 22 10, 19 13 Z" fill="none" stroke="#90a4ae" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>307 </svg>308 </div>309 <div class="act-btn">310 <svg class="icon" viewBox="0 0 24 24" width="44" height="44">311 <path d="M4 5 H20 V15 H12 L8 19 V15 H4 Z" fill="none" stroke="#90a4ae" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>312 </svg>313 </div>314 </div>315 <div class="menu-pill">316 <div class="menu-vert">317 <span class="dot"></span>318 <span class="dot"></span>319 <span class="dot"></span>320 </div>321 </div>322 </div>323 324 <div class="act-counts">325 <span>108</span>326 <span>1</span>327 <span>0</span>328 </div>329 330 <div class="desc">331 korKitchen does a weekly gluten-free recipe for you to enjoy. It's nutrish & delish! You can see m… <span class="more">more</span>332 </div>333 334 <div class="divider"></div>335 336 <div class="author-row">337 <div class="author-left">338 <div class="avatar">[IMG: Author Avatar]</div>339 <div class="author-text">340 <div class="name">Maja Kermath</div>341 <div class="sub">51 videos</div>342 </div>343 </div>344 <div class="follow-btn">345 <svg viewBox="0 0 24 24" width="32" height="32">346 <path d="M5 12 L10 17 L19 8" fill="none" stroke="#4caf50" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>347 </svg>348 <span>Following</span>349 </div>350 </div>351 352 <div class="divider"></div>353 354 <div class="share-cta">355 <svg viewBox="0 0 24 24" width="48" height="48">356 <path d="M16 7 C18 7, 19 9, 19 11 C19 13, 18 15, 16 15 M8 12 L16 8 M8 12 L16 16 M8 12 C6 12, 5 14, 5 16 C5 18, 6 20, 8 20" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>357 </svg>358 <span>Share</span>359 </div>360 361 <div class="more-videos-header">362 <div class="label">MORE VIDEOS</div>363 <div class="toggle">364 <span>Autoplay</span>365 <div class="switch"></div>366 </div>367 </div>368 369 <div class="video-card">370 <div class="thumb">[IMG: Video Thumbnail]371 <div class="timestamp">02:55</div>372 </div>373 <div class="video-info">374 <div class="video-title">On-the-Go Flow #1</div>375 <div class="video-meta">Maja Kermath</div>376 <div class="video-meta">763 views • 10 years ago</div>377 </div>378 <div class="card-menu">379 <span class="dot"></span>380 <span class="dot"></span>381 <span class="dot"></span>382 </div>383 </div>384 385 </div>386 387 <!-- Bottom sheet -->388 <div class="bottom-sheet">389 <div class="sheet-row">390 <div class="sheet-left">391 <svg viewBox="0 0 24 24" width="44" height="44">392 <path d="M12 2 L14 8 L20 8 L15 12 L17 18 L12 14 L7 18 L9 12 L4 8 L10 8 Z" fill="none" stroke="#455a64" stroke-width="2"/>393 </svg>394 <span>Quality</span>395 </div>396 <div class="sheet-right">Auto</div>397 </div>398 <div class="sheet-row">399 <div class="sheet-left">400 <svg viewBox="0 0 24 24" width="44" height="44">401 <path d="M5 12 L14 7 V10 L19 7 V17 L14 14 V17 Z" fill="none" stroke="#455a64" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>402 </svg>403 <span>Speed</span>404 </div>405 <div class="sheet-right">Normal</div>406 </div>407 <div class="home-pill"></div>408 </div>409 410</div>411</body>412</html>