GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>YouTube Style Bottom Sheet</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#0b0b0b; color:#fff;10 }11 12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; width:100%; height:110px;15 background:rgba(0,0,0,0.35);16 display:flex; align-items:center; padding:0 32px; box-sizing:border-box; font-weight:600;17 }18 .status-left { display:flex; align-items:center; gap:20px; }19 .status-right { margin-left:auto; display:flex; align-items:center; gap:24px; opacity:.9; }20 .dot { width:10px; height:10px; background:#fff; border-radius:50%; display:inline-block; opacity:.8; }21 .icon-wifi, .icon-battery {22 width:32px; height:20px; display:inline-block;23 }24 .icon-wifi { border:2px solid #fff; border-radius:50% 50% 0 0; border-bottom:none; transform:rotate(45deg); }25 .icon-battery { border:2px solid #fff; position:relative; }26 .icon-battery::after { content:""; position:absolute; right:-8px; top:4px; width:6px; height:12px; background:#fff; }27 28 /* Video area */29 .video {30 position:absolute; top:110px; left:0; width:100%; height:680px;31 background:#121212;32 }33 .video .frame {34 position:absolute; left:0; top:0; width:100%; height:100%;35 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;36 display:flex; align-items:center; justify-content:center; font-size:36px; letter-spacing:0.2px;37 }38 .overlay-top {39 position:absolute; top:24px; left:24px; right:24px; display:flex; align-items:center; gap:26px;40 }41 .ov-icon {42 width:72px; height:72px; background:rgba(255,255,255,0.1); border-radius:36px;43 display:flex; align-items:center; justify-content:center;44 }45 .ov-icon-small { width:60px; height:60px; border-radius:30px; }46 .close-x { margin-left:auto; }47 .play-pause {48 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);49 width:120px; height:120px; background:rgba(255,255,255,0.1); border-radius:60px;50 display:flex; align-items:center; justify-content:center;51 }52 .pause-bars {53 width:48px; height:48px; position:relative;54 }55 .pause-bars::before, .pause-bars::after {56 content:""; position:absolute; top:0; width:14px; height:48px; background:#fff; border-radius:3px;57 }58 .pause-bars::before { left:0; }59 .pause-bars::after { right:0; }60 .caption-bubble {61 position:absolute; bottom:130px; left:120px; right:120px;62 background:rgba(0,0,0,0.75); color:#fff; padding:22px 24px; border-radius:6px; font-size:30px; line-height:38px;63 text-align:center;64 }65 66 /* Progress and scrubber */67 .time-row {68 position:absolute; bottom:78px; left:28px; color:#bdbdbd; font-size:28px;69 }70 .progress {71 position:absolute; bottom:40px; left:0; width:100%; height:8px; background:#2a2a2a;72 }73 .progress .bar {74 position:absolute; left:60px; width:960px; height:8px; background:#ff0000;75 }76 .progress .dot {77 position:absolute; left:520px; top:-6px; width:26px; height:26px; background:#e53935; border-radius:50%; border:3px solid #ff8a80;78 }79 80 /* Title and metadata */81 .content {82 position:absolute; top:820px; left:0; width:100%; padding:34px 32px; box-sizing:border-box;83 }84 .title { font-size:48px; font-weight:800; line-height:62px; }85 .meta { margin-top:20px; color:#9e9e9e; font-size:28px; }86 .channel-row {87 margin-top:30px; display:flex; align-items:center; gap:26px;88 }89 .avatar {90 width:84px; height:84px; background:#71c16d; border-radius:42px; display:flex; align-items:center; justify-content:center; color:#0b0b0b; font-weight:700;91 }92 .channel-name { font-size:36px; font-weight:700; }93 .subs-count { margin-left:16px; color:#9e9e9e; font-size:30px; }94 .subscribe-btn {95 margin-left:auto; background:#fff; color:#000; padding:20px 36px; border-radius:36px; font-weight:700; font-size:30px;96 }97 98 /* Bottom sheet */99 .bottom-sheet {100 position:absolute; bottom:0; left:0; width:100%; height:1300px;101 background:#181818; border-top-left-radius:34px; border-top-right-radius:34px;102 box-shadow:0 -8px 30px rgba(0,0,0,0.6);103 padding:30px 32px 60px; box-sizing:border-box;104 }105 .drag-handle {106 width:160px; height:12px; border-radius:6px; background:#3a3a3a;107 margin:0 auto 26px;108 }109 .sheet-item {110 display:flex; align-items:center; padding:28px 16px; border-radius:12px; color:#eee; font-size:36px;111 border-bottom:1px solid rgba(255,255,255,0.06);112 }113 .sheet-item:last-child { border-bottom:none; }114 .sheet-item .left-icon {115 width:64px; height:64px; border-radius:14px; background:#242424; display:flex; align-items:center; justify-content:center; margin-right:26px;116 }117 .sheet-item .labels { display:flex; align-items:center; gap:12px; }118 .sheet-item .value { margin-left:auto; color:#bdbdbd; font-size:34px; }119 .dot-mid { color:#9e9e9e; padding:0 10px; }120 121 /* Simple SVG icons */122 .svg { width:34px; height:34px; }123 .ic-gear path { stroke:#fff; stroke-width:2; fill:none; }124 .ic-cc rect, .ic-cc path { fill:#fff; }125 .ic-loop path, .ic-report path, .ic-help path, .ic-speed path, .ic-info path, .ic-vr path { fill:#fff; }126 127</style>128</head>129<body>130<div id="render-target">131 132 <!-- Status bar -->133 <div class="status-bar">134 <div class="status-left">135 <div style="font-size:40px;">9:57</div>136 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>137 <span class="dot" style="opacity:.5;"></span>138 </div>139 <div class="status-right">140 <div class="icon-wifi"></div>141 <div class="icon-battery"></div>142 </div>143 </div>144 145 <!-- Video area -->146 <div class="video">147 <div class="frame">[IMG: Travel video frame]</div>148 149 <div class="overlay-top">150 <div class="ov-icon ov-icon-small">151 <!-- Back chevron -->152 <svg class="svg" viewBox="0 0 24 24">153 <path d="M15 4 L7 12 L15 20" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>154 </svg>155 </div>156 <div class="ov-icon ov-icon-small">157 <!-- Play triangle (for header small) -->158 <svg class="svg" viewBox="0 0 24 24">159 <polygon points="6,4 20,12 6,20" fill="#fff"></polygon>160 </svg>161 </div>162 <div class="ov-icon ov-icon-small">163 <!-- Cast icon -->164 <svg class="svg" viewBox="0 0 24 24">165 <rect x="3" y="5" width="18" height="14" stroke="#fff" stroke-width="2" fill="none"></rect>166 <path d="M3 17 Q7 17 11 21" stroke="#fff" stroke-width="2" fill="none"></path>167 <path d="M3 13 Q5 13 7 15" stroke="#fff" stroke-width="2" fill="none"></path>168 </svg>169 </div>170 <div class="ov-icon ov-icon-small">171 <!-- CC icon -->172 <svg class="svg ic-cc" viewBox="0 0 24 24">173 <rect x="3" y="6" width="18" height="12" rx="2"></rect>174 <path d="M7 12 h4" stroke="#181818" stroke-width="3" fill="none"></path>175 <path d="M13 12 h4" stroke="#181818" stroke-width="3" fill="none"></path>176 </svg>177 </div>178 <div class="ov-icon ov-icon-small">179 <!-- Gear -->180 <svg class="svg ic-gear" viewBox="0 0 24 24">181 <circle cx="12" cy="12" r="4"></circle>182 <path d="M12 2 v4 M12 18 v4 M2 12 h4 M18 12 h4 M4.5 4.5 l2.8 2.8 M16.7 16.7 l2.8 2.8 M19.5 4.5 l-2.8 2.8 M4.5 19.5 l2.8-2.8"></path>183 </svg>184 </div>185 <div class="ov-icon ov-icon-small close-x">186 <!-- X icon -->187 <svg class="svg" viewBox="0 0 24 24">188 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"></path>189 </svg>190 </div>191 </div>192 193 <div class="play-pause">194 <div class="pause-bars"></div>195 </div>196 197 <div class="caption-bubble">Also, we can just bring the right attachment in a pouch.</div>198 199 <div class="time-row">7:24 / 12:49 • 6. Shopping ></div>200 201 <div class="progress">202 <div class="bar"></div>203 <div class="dot"></div>204 </div>205 </div>206 207 <!-- Title and metadata -->208 <div class="content">209 <div class="title">TOP 10 things to do in SINGAPORE | Travel Guide 4K</div>210 <div class="meta">1.8M views • 3y ago #singapore #travelguide …more</div>211 212 <div class="channel-row">213 <div class="avatar">HP</div>214 <div class="channel-name">Hungry Passport</div>215 <div class="subs-count">244K</div>216 <div class="subscribe-btn">Subscribe</div>217 </div>218 </div>219 220 <!-- Bottom Sheet -->221 <div class="bottom-sheet">222 <div class="drag-handle"></div>223 224 <div class="sheet-item">225 <div class="left-icon">226 <svg class="svg ic-gear" viewBox="0 0 24 24">227 <circle cx="12" cy="12" r="4"></circle>228 <path d="M12 2 v4 M12 18 v4 M2 12 h4 M18 12 h4 M4.5 4.5 l2.8 2.8 M16.7 16.7 l2.8 2.8 M19.5 4.5 l-2.8 2.8 M4.5 19.5 l2.8-2.8"></path>229 </svg>230 </div>231 <div class="labels">232 <div>Quality</div>233 <div class="dot-mid">•</div>234 </div>235 <div class="value">Auto (480p)</div>236 </div>237 238 <div class="sheet-item">239 <div class="left-icon">240 <svg class="svg ic-cc" viewBox="0 0 24 24">241 <rect x="3" y="6" width="18" height="12" rx="2"></rect>242 <text x="7" y="15" font-size="10" font-weight="700" fill="#181818">CC</text>243 </svg>244 </div>245 <div class="labels">246 <div>Captions</div>247 <div class="dot-mid">•</div>248 </div>249 <div class="value">English (United States)</div>250 </div>251 252 <div class="sheet-item">253 <div class="left-icon">254 <svg class="svg ic-loop" viewBox="0 0 24 24">255 <path d="M7 7 h8 l-2 -3 M17 17 h-8 l2 3" fill="none" stroke="#fff" stroke-width="2"></path>256 <path d="M7 7 a5 5 0 0 0 -4 5 a5 5 0 0 0 4 5" fill="none" stroke="#fff" stroke-width="2"></path>257 </svg>258 </div>259 <div class="labels">260 <div>Loop video</div>261 <div class="dot-mid">•</div>262 </div>263 <div class="value">Off</div>264 </div>265 266 <div class="sheet-item">267 <div class="left-icon">268 <svg class="svg ic-info" viewBox="0 0 24 24">269 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"></circle>270 <rect x="11" y="10" width="2" height="7" fill="#fff"></rect>271 <circle cx="12" cy="7" r="1.6" fill="#fff"></circle>272 </svg>273 </div>274 <div class="labels">275 <div>Ambient mode</div>276 <div class="dot-mid">•</div>277 </div>278 <div class="value">On</div>279 </div>280 281 <div class="sheet-item">282 <div class="left-icon">283 <svg class="svg ic-report" viewBox="0 0 24 24">284 <path d="M4 4 H12 L13 7 H20 V18 H4 Z" fill="#fff"></path>285 </svg>286 </div>287 <div class="labels">288 <div>Report</div>289 </div>290 </div>291 292 <div class="sheet-item">293 <div class="left-icon">294 <svg class="svg ic-help" viewBox="0 0 24 24">295 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"></circle>296 <path d="M8 9 a4 4 0 0 1 8 0 c0 2 -2 3 -3 3 v2" stroke="#fff" stroke-width="2" fill="none"></path>297 <circle cx="12" cy="17" r="1.6" fill="#fff"></circle>298 </svg>299 </div>300 <div class="labels">301 <div>Help & feedback</div>302 </div>303 </div>304 305 <div class="sheet-item">306 <div class="left-icon">307 <svg class="svg ic-speed" viewBox="0 0 24 24">308 <path d="M12 4 A8 8 0 1 1 4 12" stroke="#fff" stroke-width="2" fill="none"></path>309 <path d="M12 12 L18 10" stroke="#fff" stroke-width="2"></path>310 </svg>311 </div>312 <div class="labels">313 <div>Playback speed</div>314 <div class="dot-mid">•</div>315 </div>316 <div class="value">Normal</div>317 </div>318 319 <div class="sheet-item">320 <div class="left-icon">321 <svg class="svg ic-info" viewBox="0 0 24 24">322 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"></circle>323 <rect x="11" y="10" width="2" height="7" fill="#fff"></rect>324 <circle cx="12" cy="7" r="1.6" fill="#fff"></circle>325 </svg>326 </div>327 <div class="labels">328 <div>More from Hungry Passport</div>329 </div>330 </div>331 332 <div class="sheet-item">333 <div class="left-icon">334 <svg class="svg ic-vr" viewBox="0 0 24 24">335 <rect x="3" y="7" width="18" height="10" rx="4"></rect>336 <circle cx="9" cy="12" r="2" fill="#181818"></circle>337 <circle cx="15" cy="12" r="2" fill="#181818"></circle>338 </svg>339 </div>340 <div class="labels">341 <div>Watch in VR</div>342 </div>343 </div>344 345 </div>346 347</div>348</body>349</html>