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; height: 2400px;10 position: relative; overflow: hidden;11 background: #121212; color: #FFFFFF;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 }14 15 /* Status bar */16 .status-bar {17 height: 96px;18 background: #000000;19 display: flex;20 align-items: center;21 padding: 0 36px;22 font-size: 36px;23 letter-spacing: 0.5px;24 }25 .status-icons {26 margin-left: auto;27 display: flex;28 align-items: center;29 gap: 22px;30 }31 .dot { width: 14px; height: 14px; background: #FFFFFF; border-radius: 50%; opacity: 0.9; }32 .battery {33 width: 52px; height: 26px; border: 3px solid #fff; border-radius: 6px; position: relative;34 }35 .battery::after { content: ""; position: absolute; right: -10px; top: 6px; width: 8px; height: 14px; background: #fff; border-radius: 2px; }36 .battery .level { position: absolute; left: 4px; top: 4px; height: 16px; width: 34px; background: #8BC34A; }37 38 /* App bar */39 .appbar {40 position: relative;41 height: 132px;42 display: flex;43 align-items: center;44 padding: 0 24px;45 border-bottom: 1px solid #1E1E1E;46 }47 .appbar .left {48 width: 120px; display: flex; align-items: center; justify-content: flex-start;49 }50 .appbar .center {51 position: absolute; left: 50%; transform: translateX(-50%);52 font-size: 44px; font-weight: 600;53 }54 .appbar .right {55 margin-left: auto; font-size: 36px; color: #4EA4FF; font-weight: 600;56 }57 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }58 .icon-btn svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }59 60 /* Header row */61 .header-row {62 display: flex; align-items: baseline;63 padding: 32px 28px 20px 28px;64 }65 .header-row .title {66 font-size: 36px; font-weight: 600;67 }68 .header-row .count {69 margin-left: auto; font-size: 32px; color: #B0B0B0;70 }71 72 /* List */73 .list { padding: 0 24px 160px 24px; }74 .item {75 display: flex; align-items: flex-start;76 margin-bottom: 42px;77 }78 .thumb {79 width: 360px; height: 202px;80 background: #E0E0E0; border: 1px solid #BDBDBD;81 border-radius: 18px;82 display: flex; align-items: center; justify-content: center;83 color: #757575;84 position: relative;85 flex-shrink: 0;86 }87 .thumb.vevo { border: 3px solid #E6C54A; }88 .thumb .label { font-size: 28px; text-align: center; padding: 0 16px; }89 .duration {90 position: absolute; right: 12px; bottom: 12px;91 background: rgba(0,0,0,0.85); color: #fff;92 font-size: 28px; padding: 8px 12px; border-radius: 8px;93 }94 .pill {95 position: absolute; right: 12px; top: 12px;96 background: #D32F2F; color: #fff; font-size: 26px;97 padding: 6px 12px; border-radius: 14px; font-weight: 600;98 }99 .vevo-tag {100 position: absolute; left: 12px; bottom: 12px;101 background: rgba(0,0,0,0.85); color: #fff; font-size: 24px;102 padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px;103 }104 .meta {105 flex: 1; padding: 2px 22px;106 }107 .title-text {108 font-size: 34px; line-height: 44px; color: #F1F1F1;109 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;110 }111 .channel {112 margin-top: 8px; font-size: 28px; color: #BDBDBD;113 }114 .stats {115 margin-top: 6px; font-size: 26px; color: #9E9E9E;116 }117 .checkbox {118 width: 54px; height: 54px; border: 3px solid #808080; border-radius: 8px;119 margin-left: 16px; margin-top: 6px;120 }121 122 /* Floating preview overlay */123 .floating-preview {124 position: absolute; left: 600px; top: 1080px;125 width: 420px; height: 236px;126 background: #0A0A0A; border-radius: 18px;127 box-shadow: 0 12px 30px rgba(0,0,0,0.6);128 display: flex; align-items: center; justify-content: center;129 border: 1px solid #2A2A2A;130 }131 .floating-preview .thumb {132 width: 392px; height: 220px; border-radius: 16px;133 }134 135 /* Gesture bar */136 .gesture {137 position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);138 width: 300px; height: 12px; background: #D0D0D0; border-radius: 8px; opacity: 0.85;139 }140</style>141</head>142<body>143<div id="render-target">144 145 <!-- Status Bar -->146 <div class="status-bar">147 <div>8:27</div>148 <div class="status-icons">149 <div class="dot"></div>150 <div class="dot" style="opacity:0.6;"></div>151 <div class="dot" style="opacity:0.8;"></div>152 <div class="battery"><div class="level"></div></div>153 </div>154 </div>155 156 <!-- App Bar -->157 <div class="appbar">158 <div class="left">159 <div class="icon-btn" aria-label="Close">160 <svg viewBox="0 0 24 24">161 <path d="M5 5 L19 19 M19 5 L5 19"></path>162 </svg>163 </div>164 </div>165 <div class="center">Add videos</div>166 <div class="right">Next</div>167 </div>168 169 <!-- Header Row -->170 <div class="header-row">171 <div class="title">Recently Watched</div>172 <div class="count">0 videos selected</div>173 </div>174 175 <!-- List -->176 <div class="list">177 178 <!-- Item 1 -->179 <div class="item">180 <div class="thumb">181 <div class="label">[IMG: Fashion street & runway montage]</div>182 <div class="pill">LIVE</div>183 <div class="duration">8:03</div>184 </div>185 <div class="meta">186 <div class="title-text">🍁 Autumn outfits inspo. Milan's fashion life in anticipation of M...</div>187 <div class="channel">MILAN ON TREND Live</div>188 <div class="stats">13K views • 1 day ago</div>189 </div>190 <div class="checkbox"></div>191 </div>192 193 <!-- Item 2 -->194 <div class="item">195 <div class="thumb vevo">196 <div class="label">[IMG: Pavarotti & James Brown performance]</div>197 <div class="vevo-tag">vevo</div>198 <div class="duration">4:59</div>199 </div>200 <div class="meta">201 <div class="title-text">Luciano Pavarotti, James Brown - It's A Man's Man's Man's World</div>202 <div class="channel">Luciano Pavarotti</div>203 <div class="stats">92M views • 4 years ago</div>204 </div>205 <div class="checkbox"></div>206 </div>207 208 <!-- Item 3 -->209 <div class="item">210 <div class="thumb">211 <div class="label">[IMG: Catwalk fashion show with lattice backdrop]</div>212 <div class="duration">15:38</div>213 </div>214 <div class="meta">215 <div class="title-text">FIRDAWS | FULL FASHION SHOW</div>216 <div class="channel">SERGEI SHUBENTSEV</div>217 <div class="stats">527K views • 6 years ago</div>218 </div>219 <div class="checkbox"></div>220 </div>221 222 <!-- Item 4 -->223 <div class="item">224 <div class="thumb">225 <div class="label">[IMG: Arabic bridal fashion collage]</div>226 <div class="duration">1:11</div>227 </div>228 <div class="meta">229 <div class="title-text">Arabic makeup/Arabic Jewellery /hairstyle /arabic dr...</div>230 <div class="channel">fashion trend minsha</div>231 <div class="stats">2.9K views • 1 year ago</div>232 </div>233 <div class="checkbox"></div>234 </div>235 236 <!-- Item 5 -->237 <div class="item">238 <div class="thumb vevo">239 <div class="label">[IMG: Stage performance with podium and microphone]</div>240 <div class="vevo-tag">vevo</div>241 <div class="duration">4:31</div>242 </div>243 <div class="meta">244 <div class="title-text">Ma... - H...</div>245 <div class="channel">Luc...</div>246 <div class="stats">9.7M views • ...</div>247 </div>248 <div class="checkbox"></div>249 </div>250 251 <!-- Item 6 -->252 <div class="item">253 <div class="thumb">254 <div class="label">[IMG: Comedy short in kitchen]</div>255 <div class="duration">1:01</div>256 </div>257 <div class="meta">258 <div class="title-text">Crazy... Le...</div>259 <div class="channel">DesSoFunny</div>260 <div class="stats">9.5M views • 3 weeks ago</div>261 </div>262 <div class="checkbox"></div>263 </div>264 265 <!-- Item 7 -->266 <div class="item">267 <div class="thumb">268 <div class="label">[IMG: Child on couch reacts to mom’s comment]</div>269 <div class="duration">0:25</div>270 </div>271 <div class="meta">272 <div class="title-text">Toddler goes into denial when mom tells her it’s Football Satu...</div>273 <div class="channel">Majically News</div>274 <div class="stats">23M views • 9 months ago</div>275 </div>276 <div class="checkbox"></div>277 </div>278 279 <!-- Item 8 -->280 <div class="item">281 <div class="thumb">282 <div class="label">[IMG: Pavarotti & Celine Dion duet on stage]</div>283 <div class="duration">5:06</div>284 </div>285 <div class="meta">286 <div class="title-text">Luciano Pavarotti & Celine Dion - I Hate You Then I Love You</div>287 <div class="channel">glennSuperdude</div>288 <div class="stats">29M views • 10 years ago</div>289 </div>290 <div class="checkbox"></div>291 </div>292 293 <!-- Item 9 -->294 <div class="item">295 <div class="thumb vevo">296 <div class="label">[IMG: Pavarotti & Bryan Adams live concert]</div>297 <div class="vevo-tag">vevo</div>298 <div class="duration">3:19</div>299 </div>300 <div class="meta">301 <div class="title-text">Luciano Pavarotti, Bryan Adams - 'O Sole Mio (Live)</div>302 <div class="channel">Luciano Pavarotti</div>303 <div class="stats">3.9M views • 4 years ago</div>304 </div>305 <div class="checkbox"></div>306 </div>307 308 </div>309 310 <!-- Floating mini-player preview -->311 <div class="floating-preview">312 <div class="thumb">313 <div class="label">[IMG: Purple sketch artwork thumbnail]</div>314 </div>315 </div>316 317 <!-- Gesture bar -->318 <div class="gesture"></div>319 320</div>321</body>322</html>