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>YouTube Video UI - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #0a0a0a; color: #fff;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0; height: 90px;17 display: flex; align-items: center; padding: 0 34px; color: #fff;18 font-weight: 600; font-size: 32px;19 }20 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 18px; }21 .status-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0.9; }22 .status-battery { width: 36px; height: 20px; border: 3px solid #fff; border-radius: 4px; position: relative; }23 .status-battery:after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 8px; background: #fff; border-radius: 2px; }24 .status-wifi { width: 30px; height: 20px; position: relative; }25 .status-wifi:before, .status-wifi:after { content: ""; position: absolute; left: 0; right: 0; margin: auto; border: 3px solid #fff; border-radius: 16px; }26 .status-wifi:before { top: 0; width: 30px; height: 16px; border-top-color: #fff; border-bottom: none; }27 .status-wifi:after { top: 8px; width: 18px; height: 10px; border-top-color: #fff; border-bottom: none; }28 29 /* Video area */30 .video-area {31 position: absolute; top: 90px; left: 0; width: 100%; height: 720px;32 background: #111;33 }34 .video-frame {35 position: absolute; inset: 0; margin: 0 0; 36 display: flex; align-items: center; justify-content: center;37 background: #E0E0E0; color: #757575; border: 1px solid #BDBDBD;38 font-size: 32px; letter-spacing: 0.2px;39 }40 .video-overlay {41 position: absolute; inset: 0; background: rgba(0,0,0,0.15);42 }43 44 /* top overlay controls */45 .overlay-top {46 position: absolute; top: 16px; left: 24px; right: 24px;47 display: flex; align-items: center; gap: 26px;48 }49 .overlay-top .spacer { flex: 1; }50 .ov-icon {51 width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;52 opacity: 0.95;53 }54 .ov-icon svg { width: 56px; height: 56px; fill: #fff; }55 56 /* center controls */57 .center-controls {58 position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);59 display: flex; align-items: center; justify-content: center; gap: 140px;60 }61 .circle-btn {62 width: 160px; height: 160px; border-radius: 50%;63 background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center;64 }65 .circle-btn svg { width: 88px; height: 88px; fill: #fff; }66 .small-circle {67 width: 120px; height: 120px; border-radius: 50%; background: rgba(0,0,0,0.35);68 display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff; font-weight: 700;69 }70 71 /* caption */72 .caption {73 position: absolute; left: 80px; right: 80px; bottom: 140px;74 background: rgba(0,0,0,0.8); color: #fff; border-radius: 10px;75 padding: 20px 24px; font-size: 36px; line-height: 48px; text-align: center;76 }77 78 /* progress and timestamp */79 .timestamp {80 position: absolute; bottom: 92px; left: 34px; color: #bdbdbd; font-size: 30px;81 }82 .progress {83 position: absolute; bottom: 60px; left: 0; right: 0; height: 8px; background: #2a2a2a;84 }85 .progress .bar { position: absolute; left: 0; top: 0; height: 8px; width: 40%; background: #e53935; }86 .progress .dot { position: absolute; left: calc(40% - 12px); top: -10px; width: 24px; height: 24px; border-radius: 50%; background: #ff5252; }87 88 /* content below video */89 .content {90 position: absolute; top: 840px; left: 0; right: 0; padding: 32px;91 }92 .title {93 font-size: 54px; font-weight: 700; margin-bottom: 16px;94 }95 .meta { color: #9e9e9e; font-size: 30px; margin-bottom: 28px; }96 .channel-row {97 display: flex; align-items: center; justify-content: space-between; margin-top: 10px; margin-bottom: 30px;98 }99 .channel-left { display: flex; align-items: center; gap: 24px; }100 .avatar {101 width: 96px; height: 96px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;102 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;103 }104 .channel-name { font-size: 36px; font-weight: 700; }105 .subs { color: #bdbdbd; font-size: 28px; margin-left: 10px; }106 .subscribe-btn {107 background: #fff; color: #111; padding: 22px 34px; border-radius: 999px; font-weight: 700; font-size: 32px;108 }109 110 .actions {111 display: flex; gap: 24px; margin-top: 24px; margin-bottom: 28px; flex-wrap: wrap;112 }113 .pill {114 display: flex; align-items: center; gap: 16px; background: #161616; color: #fff;115 padding: 22px 26px; border-radius: 24px; font-size: 30px;116 }117 .pill svg { width: 42px; height: 42px; fill: #fff; }118 119 .comments {120 margin-top: 18px; font-size: 36px; color: #bdbdbd; padding: 10px 4px 26px;121 }122 123 /* bottom sheet (settings) */124 .scrim {125 position: absolute; inset: 0; background: rgba(0,0,0,0.55);126 }127 .sheet {128 position: absolute; left: 24px; right: 24px; bottom: 110px;129 background: #212121; border-radius: 34px; padding: 24px 16px 26px;130 box-shadow: 0 8px 24px rgba(0,0,0,0.6);131 }132 .sheet .handle {133 width: 140px; height: 10px; border-radius: 5px; background: #3a3a3a; margin: 12px auto 24px;134 }135 .sheet-item {136 display: flex; align-items: center; gap: 28px; padding: 20px 24px;137 color: #fff; font-size: 34px; border-radius: 16px;138 }139 .sheet-item + .sheet-item { margin-top: 8px; }140 .sheet-item .label { flex: 1; }141 .sheet-item .value { color: #bdbdbd; }142 .sheet-icon {143 width: 64px; height: 64px; border-radius: 16px; background: #2b2b2b; display: flex; align-items: center; justify-content: center;144 }145 .sheet-icon svg { width: 38px; height: 38px; fill: #bdbdbd; }146 147 /* footer nav bar pill */148 .home-indicator {149 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);150 width: 360px; height: 12px; background: #d9d9d9; border-radius: 8px; opacity: 0.7;151 }152</style>153</head>154<body>155<div id="render-target">156 157 <!-- Status bar -->158 <div class="status-bar">159 <div>10:03</div>160 <div class="status-icons">161 <div class="status-dot"></div>162 <div class="status-dot"></div>163 <div class="status-dot"></div>164 <div class="status-dot"></div>165 <div class="status-wifi"></div>166 <div class="status-battery"></div>167 </div>168 </div>169 170 <!-- Video area -->171 <div class="video-area">172 <div class="video-frame">[IMG: Video frame - statue and Kensington Palace]</div>173 <div class="video-overlay"></div>174 175 <!-- Top overlay controls -->176 <div class="overlay-top">177 <div class="ov-icon">178 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>179 </div>180 <div class="ov-icon">181 <svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7V5z"/></svg>182 </div>183 <div class="ov-icon">184 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M16 18c0-3-3-6-6-6"/></svg>185 </div>186 <div class="ov-icon">187 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><text x="7" y="16" font-size="9" fill="#fff">CC</text></svg>188 </div>189 <div class="ov-icon">190 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="3" fill="#0a0a0a"/></svg>191 </div>192 <div class="spacer"></div>193 <div class="ov-icon">194 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" fill="none"/></svg>195 </div>196 </div>197 198 <!-- Center controls -->199 <div class="center-controls">200 <div class="small-circle">10</div>201 <div class="circle-btn">202 <svg viewBox="0 0 24 24"><rect x="7" y="5" width="4" height="14"/><rect x="13" y="5" width="4" height="14"/></svg>203 </div>204 <div class="small-circle">10</div>205 </div>206 207 <!-- Caption -->208 <div class="caption">209 Nearby, Kensington Palace is open to the public year-round.210 </div>211 212 <!-- Timestamp and progress -->213 <div class="timestamp">1:56 / 6:13 · Kensington Palace ›</div>214 <div class="progress">215 <div class="bar"></div>216 <div class="dot"></div>217 </div>218 </div>219 220 <!-- Content below video -->221 <div class="content">222 <div class="title">London Vacation Travel Guide | Expedia</div>223 <div class="meta">5M views · 10y ago · #sightseeing #London #vacation · …more</div>224 225 <div class="channel-row">226 <div class="channel-left">227 <div class="avatar">[IMG: Expedia]</div>228 <div>229 <div class="channel-name">Expedia <span class="subs">1.15M</span></div>230 </div>231 </div>232 <div class="subscribe-btn">Subscribe</div>233 </div>234 235 <div class="actions">236 <div class="pill">237 <svg viewBox="0 0 24 24"><path d="M12 21l-8-7V5c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v9l-4 3z"/></svg>238 <span>30K</span>239 </div>240 <div class="pill">241 <svg viewBox="0 0 24 24"><path d="M4 12h12M12 4l8 8-8 8"/></svg>242 <span>Share</span>243 </div>244 <div class="pill">245 <svg viewBox="0 0 24 24"><circle cx="8" cy="12" r="3"/><circle cx="16" cy="12" r="3"/></svg>246 <span>Remix</span>247 </div>248 <div class="pill">249 <svg viewBox="0 0 24 24"><path d="M12 2v14M5 9l7 7 7-7"/></svg>250 <span>Download</span>251 </div>252 </div>253 254 <div class="comments">Comments 1.7K</div>255 </div>256 257 <!-- Bottom sheet overlay -->258 <div class="scrim"></div>259 <div class="sheet">260 <div class="handle"></div>261 262 <div class="sheet-item">263 <div class="sheet-icon">264 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3" fill="#212121"/></svg>265 </div>266 <div class="label">Quality</div>267 <div class="value">Auto (480p)</div>268 </div>269 270 <div class="sheet-item">271 <div class="sheet-icon">272 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><text x="6" y="15" font-size="9" fill="#bdbdbd">CC</text></svg>273 </div>274 <div class="label">Captions</div>275 <div class="value">English</div>276 </div>277 278 <div class="sheet-item">279 <div class="sheet-icon">280 <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z"/><path d="M12 8v8M8 12h8" fill="#212121"/></svg>281 </div>282 <div class="label">Loop video</div>283 <div class="value">Off</div>284 </div>285 286 <div class="sheet-item">287 <div class="sheet-icon">288 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M6 12h12" stroke="#bdbdbd" stroke-width="2"/></svg>289 </div>290 <div class="label">Ambient mode</div>291 <div class="value">On</div>292 </div>293 294 <div class="sheet-item">295 <div class="sheet-icon">296 <svg viewBox="0 0 24 24"><path d="M4 5l16 0 0 14-16 0zM6 9l4 4-4 4" /></svg>297 </div>298 <div class="label">Report</div>299 <div class="value"></div>300 </div>301 302 <div class="sheet-item">303 <div class="sheet-icon">304 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><text x="10" y="16" font-size="10" fill="#bdbdbd">?</text></svg>305 </div>306 <div class="label">Help & feedback</div>307 <div class="value"></div>308 </div>309 310 <div class="sheet-item">311 <div class="sheet-icon">312 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M8 10h8v4H8z"/></svg>313 </div>314 <div class="label">Playback speed</div>315 <div class="value">Normal</div>316 </div>317 318 <div class="sheet-item">319 <div class="sheet-icon">320 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="12" r="3"/><circle cx="15" cy="12" r="3"/></svg>321 </div>322 <div class="label">Watch in VR</div>323 <div class="value"></div>324 </div>325 </div>326 327 <!-- Home indicator -->328 <div class="home-indicator"></div>329</div>330</body>331</html>