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>Add videos - Mock UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #FFFFFF;16 font-family: Roboto, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 height: 90px;22 padding: 0 32px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #fff;27 font-size: 36px;28 }29 .status-icons {30 display: flex;31 align-items: center;32 gap: 22px;33 }34 .dot { width: 14px; height: 14px; background: #bbb; border-radius: 50%; }35 .icon-battery {36 width: 40px; height: 24px; border: 2px solid #bbb; border-radius: 4px; position: relative;37 }38 .icon-battery::after {39 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #bbb; border-radius: 2px;40 }41 .icon-battery .level { position: absolute; left: 3px; top: 3px; width: 28px; height: 16px; background: #bbb; }42 43 /* Header */44 .header {45 height: 120px;46 display: flex;47 align-items: center;48 padding: 0 24px;49 border-bottom: 1px solid #1f1f1f;50 }51 .header .left {52 width: 120px;53 display: flex;54 align-items: center;55 justify-content: center;56 }57 .header .title {58 flex: 1;59 font-size: 44px;60 font-weight: 500;61 }62 .header .right {63 width: 160px;64 text-align: right;65 font-size: 36px;66 color: #3EA6FF;67 font-weight: 500;68 }69 .subnote {70 padding: 18px 24px 8px 24px;71 font-size: 30px;72 color: #9E9E9E;73 text-align: right;74 }75 76 .section-title {77 padding: 8px 24px 16px 24px;78 font-size: 36px;79 font-weight: 500;80 }81 82 /* List */83 .video-list { padding: 0 24px 24px 24px; }84 .video-item {85 display: flex;86 align-items: flex-start;87 margin-bottom: 28px;88 position: relative;89 }90 .thumb {91 width: 320px;92 height: 180px;93 background: #E0E0E0;94 border: 1px solid #BDBDBD;95 border-radius: 18px;96 display: flex;97 align-items: center;98 justify-content: center;99 color: #757575;100 font-size: 28px;101 position: relative;102 overflow: hidden;103 }104 .thumb.vevo { border: 4px solid #F5D04E; }105 .duration {106 position: absolute;107 right: 8px; bottom: 8px;108 background: rgba(0,0,0,0.85);109 color: #fff;110 font-size: 26px;111 padding: 6px 10px;112 border-radius: 8px;113 }114 .badge-live {115 position: absolute;116 right: 8px; top: 8px;117 background: #D32F2F;118 color: #fff;119 font-size: 22px;120 padding: 6px 10px;121 border-radius: 8px;122 font-weight: 600;123 }124 .content {125 flex: 1;126 margin-left: 24px;127 padding-right: 24px;128 }129 .title {130 font-size: 36px;131 line-height: 44px;132 margin-top: 2px;133 margin-bottom: 8px;134 }135 .meta {136 font-size: 28px;137 color: #9E9E9E;138 }139 .checkbox {140 width: 56px;141 height: 56px;142 border: 3px solid #696969;143 border-radius: 8px;144 margin-top: 6px;145 }146 .checkbox.checked {147 border-color: #3EA6FF;148 background: #3EA6FF;149 display: flex;150 align-items: center;151 justify-content: center;152 }153 .checkbox.checked svg { width: 32px; height: 32px; }154 155 /* Mini player overlay */156 .mini-player {157 position: absolute;158 right: 80px;159 top: 1060px;160 width: 520px;161 height: 290px;162 background: #101010;163 border-radius: 28px;164 box-shadow: 0 8px 24px rgba(0,0,0,0.6);165 overflow: hidden;166 border: 1px solid #232323;167 display: flex;168 align-items: center;169 justify-content: center;170 }171 .mini-player .img {172 width: 100%;173 height: 100%;174 background: #E0E0E0;175 border-top-left-radius: 28px;176 border-top-right-radius: 28px;177 border-bottom-left-radius: 28px;178 border-bottom-right-radius: 28px;179 border: 1px solid #BDBDBD;180 color: #757575;181 display: flex;182 align-items: center;183 justify-content: center;184 font-size: 28px;185 }186 187 /* Bottom scrubber bar hint */188 .scrubber {189 position: absolute;190 bottom: 44px;191 left: 50%;192 transform: translateX(-50%);193 width: 280px;194 height: 10px;195 background: #2a2a2a;196 border-radius: 6px;197 }198 199 /* Simple icons */200 .icon-close { width: 48px; height: 48px; }201</style>202</head>203<body>204<div id="render-target">205 206 <!-- Status bar -->207 <div class="status-bar">208 <div>8:28</div>209 <div class="status-icons">210 <div class="dot"></div>211 <div class="dot"></div>212 <div class="dot"></div>213 <svg width="28" height="24" viewBox="0 0 28 24">214 <path d="M2 20 L14 4 L26 20" stroke="#bbb" stroke-width="3" fill="none"/>215 </svg>216 <div class="icon-battery">217 <div class="level"></div>218 </div>219 </div>220 </div>221 222 <!-- Header -->223 <div class="header">224 <div class="left">225 <svg class="icon-close" viewBox="0 0 24 24">226 <path d="M4 4 L20 20 M20 4 L4 20" stroke="#fff" stroke-width="3" stroke-linecap="round"/>227 </svg>228 </div>229 <div class="title">Add videos</div>230 <div class="right">Next</div>231 </div>232 233 <div class="subnote">1 video selected</div>234 235 <div class="section-title">Recently Watched</div>236 237 <div class="video-list">238 239 <!-- Item 1 -->240 <div class="video-item">241 <div class="thumb">242 <div>[IMG: Fashion video thumbnail]</div>243 <div class="badge-live">LIVE</div>244 <div class="duration">8:03</div>245 </div>246 <div class="content">247 <div class="title">Autumn outfits inspo. Milan's fashion life in anticipation of M...</div>248 <div class="meta">MILAN ON TREND Live • 13K views • 1 day ago</div>249 </div>250 <div class="checkbox"></div>251 </div>252 253 <!-- Item 2 (selected) -->254 <div class="video-item">255 <div class="thumb vevo">256 <div>[IMG: Concert performance thumbnail]</div>257 <div class="duration">4:59</div>258 </div>259 <div class="content">260 <div class="title">Luciano Pavarotti, James Brown - It's A Man's Man's Man's World...</div>261 <div class="meta">Luciano Pavarotti • 92M views • 4 years ago</div>262 </div>263 <div class="checkbox checked">264 <svg viewBox="0 0 24 24">265 <path d="M5 12 L10 17 L19 7" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>266 </svg>267 </div>268 </div>269 270 <!-- Item 3 -->271 <div class="video-item">272 <div class="thumb">273 <div>[IMG: Runway show thumbnail]</div>274 <div class="duration">15:38</div>275 </div>276 <div class="content">277 <div class="title">FIRDAWS | FULL FASHION SHOW</div>278 <div class="meta">SERGEI SHUBENTSEV • 527K views • 6 years ago</div>279 </div>280 <div class="checkbox"></div>281 </div>282 283 <!-- Item 4 -->284 <div class="video-item">285 <div class="thumb">286 <div>[IMG: Traditional fashion thumbnail]</div>287 <div class="duration">1:11</div>288 </div>289 <div class="content">290 <div class="title">Arabic makeup/Arabic Jewellery /hairstyle /arabic dr...</div>291 <div class="meta">fashion trend minsha • 2.9K views • 1 year ago</div>292 </div>293 <div class="checkbox"></div>294 </div>295 296 <!-- Item 5 -->297 <div class="video-item">298 <div class="thumb vevo">299 <div>[IMG: Stage performance thumbnail]</div>300 <div class="duration">4:31</div>301 </div>302 <div class="content">303 <div class="title">Maria Callas - H...</div>304 <div class="meta">Classical music channel • 9.7M views • 5 years ago</div>305 </div>306 <div class="checkbox"></div>307 </div>308 309 <!-- Item 6 -->310 <div class="video-item">311 <div class="thumb">312 <div>[IMG: Home video thumbnail]</div>313 <div class="duration">1:01</div>314 </div>315 <div class="content">316 <div class="title">Crazy challenge at home</div>317 <div class="meta">DesSoFunny • 9.5M views • 3 weeks ago</div>318 </div>319 <div class="checkbox"></div>320 </div>321 322 <!-- Item 7 -->323 <div class="video-item">324 <div class="thumb">325 <div>[IMG: News short thumbnail]</div>326 <div class="duration">0:25</div>327 </div>328 <div class="content">329 <div class="title">Toddler goes into denial when mom tells her it’s Football Satu...</div>330 <div class="meta">Majically News • 23M views • 9 months ago</div>331 </div>332 <div class="checkbox"></div>333 </div>334 335 <!-- Item 8 -->336 <div class="video-item">337 <div class="thumb">338 <div>[IMG: Duet performance thumbnail]</div>339 <div class="duration">5:06</div>340 </div>341 <div class="content">342 <div class="title">Luciano Pavarotti & Celine Dion - I Hate You Then I Love You</div>343 <div class="meta">glennSuperdude • 29M views • 10 years ago</div>344 </div>345 <div class="checkbox"></div>346 </div>347 348 <!-- Item 9 -->349 <div class="video-item">350 <div class="thumb vevo">351 <div>[IMG: Live concert thumbnail]</div>352 <div class="duration">3:19</div>353 </div>354 <div class="content">355 <div class="title">Luciano Pavarotti, Bryan Adams - 'O Sole Mio (Live)</div>356 <div class="meta">Luciano Pavarotti • 3.9M views • 4 years ago</div>357 </div>358 <div class="checkbox"></div>359 </div>360 361 </div>362 363 <!-- Floating mini player -->364 <div class="mini-player">365 <div class="img">[IMG: Mini player preview]</div>366 </div>367 368 <!-- Bottom scrubber hint -->369 <div class="scrubber"></div>370 371</div>372</body>373</html>