GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Add videos - Mock UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    color: #e0e0e0;23    font-size: 36px;24    letter-spacing: 1px;25  }26  .status-icons {27    margin-left: auto;28    display: flex;29    gap: 28px;30    align-items: center;31  }32  .status-icons svg { width: 40px; height: 40px; fill: #e0e0e0; }33 34  /* Top navigation */35  .top-nav {36    height: 120px;37    display: flex;38    align-items: center;39    padding: 0 36px;40    border-bottom: 1px solid #222;41  }42  .nav-left {43    display: flex;44    align-items: center;45    gap: 26px;46  }47  .nav-title {48    font-size: 48px;49    font-weight: 600;50  }51  .nav-right {52    margin-left: auto;53    font-size: 42px;54    color: #4da3ff;55    font-weight: 600;56  }57  .back-icon svg { width: 56px; height: 56px; fill: #fff; }58 59  /* Header row */60  .header-row {61    display: flex;62    align-items: center;63    padding: 30px 36px 18px 36px;64  }65  .header-row .left {66    font-size: 40px;67    font-weight: 600;68  }69  .header-row .right {70    margin-left: auto;71    font-size: 34px;72    color: #a0a0a0;73  }74 75  /* List */76  .list {77    padding: 0 24px 24px 24px;78  }79  .item {80    display: flex;81    padding: 24px 12px;82    border-bottom: 1px solid #1e1e1e;83    align-items: center;84  }85  .thumb {86    width: 320px;87    height: 180px;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    color: #757575;91    border-radius: 12px;92    display: flex;93    justify-content: center;94    align-items: center;95    position: relative;96    font-size: 28px;97    text-align: center;98    padding: 6px;99  }100  .duration {101    position: absolute;102    right: 10px;103    bottom: 10px;104    background: rgba(0,0,0,0.8);105    color: #fff;106    font-size: 28px;107    padding: 6px 10px;108    border-radius: 6px;109  }110  .vevo {111    position: absolute;112    left: 10px;113    bottom: 10px;114    background: rgba(255,255,255,0.9);115    color: #111;116    font-size: 22px;117    padding: 4px 8px;118    border-radius: 6px;119  }120  .details {121    flex: 1;122    padding-left: 28px;123  }124  .title {125    font-size: 40px;126    line-height: 48px;127    font-weight: 600;128    margin-bottom: 10px;129    color: #fff;130  }131  .channel {132    font-size: 34px;133    color: #cfcfcf;134    margin-bottom: 6px;135  }136  .meta {137    font-size: 32px;138    color: #9e9e9e;139  }140  .checkbox {141    width: 56px;142    height: 56px;143    border: 4px solid #8e8e8e;144    border-radius: 10px;145    margin-left: 22px;146    box-sizing: border-box;147  }148 149  /* Scroll area mimic */150  .scroller {151    height: 2050px;152    overflow: hidden;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status bar -->160  <div class="status-bar">161    <div>9:40</div>162    <div class="status-icons">163      <!-- Airplane-like icon -->164      <svg viewBox="0 0 24 24"><path d="M2 12l20-8-6 8 6 8-20-8 6 8v-6z"/></svg>165      <!-- Wifi -->166      <svg viewBox="0 0 24 24"><path d="M12 20l3-3-3-3-3 3 3 3zm-6-6l6-6 6 6 2-2-8-8-8 8 2 2z"/></svg>167      <!-- Battery -->168      <svg viewBox="0 0 26 24"><path d="M22 7h2v10h-2V7zM3 6h18v12H3V6zm2 2v8h14V8H5z"/></svg>169    </div>170  </div>171 172  <!-- Top navigation -->173  <div class="top-nav">174    <div class="nav-left">175      <div class="back-icon">176        <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7v14z"/></svg>177      </div>178      <div class="nav-title">Add videos</div>179    </div>180    <div class="nav-right">Next</div>181  </div>182 183  <!-- Header row -->184  <div class="header-row">185    <div class="left">Recently Watched</div>186    <div class="right">0 videos selected</div>187  </div>188 189  <!-- List -->190  <div class="list scroller">191 192    <!-- Item 1 -->193    <div class="item">194      <div class="thumb">195        [IMG: 4*TOWN music video thumbnail]196        <div class="duration">3:02</div>197        <div class="vevo">vevo</div>198      </div>199      <div class="details">200        <div class="title">4*TOWN (From Disney and Pixar’s Turning Red) - Nobody …</div>201        <div class="channel">DisneyMusicVEVO</div>202        <div class="meta">233M views · 1 year ago</div>203      </div>204      <div class="checkbox"></div>205    </div>206 207    <!-- Item 2 -->208    <div class="item">209      <div class="thumb">210        [IMG: Pop music video thumbnail]211        <div class="duration">4:12</div>212        <div class="vevo">vevo</div>213      </div>214      <div class="details">215        <div class="title">Katy Perry - Part Of Me (Official)</div>216        <div class="channel">Katy Perry</div>217        <div class="meta">948M views · 11 years ago</div>218      </div>219      <div class="checkbox"></div>220    </div>221 222    <!-- Item 3 -->223    <div class="item">224      <div class="thumb">225        [IMG: Colorful jungle-themed music video thumbnail]226        <div class="duration">4:30</div>227        <div class="vevo">vevo</div>228      </div>229      <div class="details">230        <div class="title">Katy Perry - Roar</div>231        <div class="channel">Katy Perry</div>232        <div class="meta">3.8B views · 9 years ago</div>233      </div>234      <div class="checkbox"></div>235    </div>236 237    <!-- Item 4 -->238    <div class="item">239      <div class="thumb">240        [IMG: Cats dancing meme clip thumbnail]241        <div class="duration">0:19</div>242      </div>243      <div class="details">244        <div class="title">Nhảy theo điệu nhảy của các chú mèo nào các bạn ơi</div>245        <div class="channel">Thai Le</div>246        <div class="meta">148M views · 3 years ago</div>247      </div>248      <div class="checkbox"></div>249    </div>250 251    <!-- Item 5 -->252    <div class="item">253      <div class="thumb">254        [IMG: Party scene music video thumbnail]255        <div class="duration">4:01</div>256        <div class="vevo">vevo</div>257      </div>258      <div class="details">259        <div class="title">Katy Perry - Chained To The Rhythm (Official) ft. Skip Marley</div>260        <div class="channel">Katy Perry</div>261        <div class="meta">735M views · 6 years ago</div>262      </div>263      <div class="checkbox"></div>264    </div>265 266    <!-- Item 6 -->267    <div class="item">268      <div class="thumb">269        [IMG: 24 hours MOMOS challenge thumbnail]270        <div class="duration">13:04</div>271      </div>272      <div class="details">273        <div class="title">I only ate MOMOS for 24 hours challenge// Challenge Video// …</div>274        <div class="channel">Mehak Dhawan 96</div>275        <div class="meta">15K views · 2 years ago</div>276      </div>277      <div class="checkbox"></div>278    </div>279 280    <!-- Item 7 -->281    <div class="item">282      <div class="thumb">283        [IMG: Dark Horse music video thumbnail]284        <div class="duration">3:45</div>285        <div class="vevo">vevo</div>286      </div>287      <div class="details">288        <div class="title">Katy Perry - Dark Horse ft. Juicy J</div>289        <div class="channel">Katy Perry</div>290        <div class="meta">3.5B views · 9 years ago</div>291      </div>292      <div class="checkbox"></div>293    </div>294 295    <!-- Item 8 -->296    <div class="item">297      <div class="thumb">298        [IMG: Bon Appétit music video thumbnail]299        <div class="duration">4:18</div>300        <div class="vevo">vevo</div>301      </div>302      <div class="details">303        <div class="title">Katy Perry - Bon Appétit (Official) ft. Migos</div>304        <div class="channel">Katy Perry</div>305        <div class="meta">1.2B views · 6 years ago</div>306      </div>307      <div class="checkbox"></div>308    </div>309 310    <!-- Item 9 -->311    <div class="item">312      <div class="thumb">313        [IMG: Class 10 History lecture thumbnail]314        <div class="duration">2:37:05</div>315      </div>316      <div class="details">317        <div class="title">Rise of Nationalism in Europe Full Chapter | Class 10 History …</div>318        <div class="channel">Shubham Pathak</div>319        <div class="meta">1.1M views · Streamed 1 year ago</div>320      </div>321      <div class="checkbox"></div>322    </div>323 324  </div>325 326</div>327</body>328</html>