GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Add videos - UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f0f0f;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    right: 0;22    height: 110px;23    padding: 0 32px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #eaeaea;28    font-size: 38px;29    letter-spacing: 1px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 26px;35    opacity: 0.9;36  }37  .status-icons .dot {38    width: 18px; height: 18px; border-radius: 50%; background: #cfcfcf;39  }40  .wifi, .battery {41    width: 42px; height: 42px;42  }43  .wifi path, .battery rect, .battery path { fill: #eaeaea; }44 45  /* Header */46  .header {47    position: absolute;48    top: 110px;49    left: 0;50    right: 0;51    height: 140px;52    display: flex;53    align-items: center;54    padding: 0 28px;55  }56  .icon-btn {57    width: 100px;58    height: 100px;59    background: transparent;60    border: none;61    display: flex;62    align-items: center;63    justify-content: center;64    cursor: default;65  }66  .title {67    font-size: 60px;68    font-weight: 700;69    margin-left: 4px;70  }71  .next {72    margin-left: auto;73    font-size: 44px;74    color: #61a1ff;75    font-weight: 600;76  }77 78  .selected-info {79    position: absolute;80    top: 250px;81    right: 32px;82    font-size: 36px;83    color: #cfcfcf;84  }85 86  /* Content list */87  .content {88    position: absolute;89    top: 270px;90    left: 0;91    right: 0;92    bottom: 0;93    padding: 30px 24px 24px 24px;94  }95  .section-title {96    font-size: 40px;97    color: #dcdcdc;98    margin: 8px 0 18px 8px;99  }100  .video-row {101    display: flex;102    align-items: flex-start;103    padding: 18px 8px;104    border-radius: 10px;105  }106  .thumb {107    width: 340px;108    height: 190px;109    background: #E0E0E0;110    border: 1px solid #BDBDBD;111    color: #555;112    display: flex;113    align-items: center;114    justify-content: center;115    font-size: 26px;116    position: relative;117    border-radius: 12px;118    overflow: hidden;119  }120  .time-badge {121    position: absolute;122    right: 8px;123    bottom: 8px;124    background: rgba(0,0,0,0.85);125    color: #fff;126    font-size: 26px;127    padding: 6px 10px;128    border-radius: 6px;129  }130  .vinfo {131    margin-left: 22px;132    flex: 1;133    border-bottom: 1px solid rgba(255,255,255,0.05);134    padding-bottom: 18px;135  }136  .vtitle {137    font-size: 40px;138    line-height: 1.25;139    color: #fff;140    margin-top: -4px;141  }142  .vmeta {143    margin-top: 10px;144    font-size: 30px;145    color: #a9a9a9;146  }147  .checkbox {148    width: 60px;149    height: 60px;150    border: 3px solid #8a8a8a;151    border-radius: 10px;152    margin-left: 16px;153    margin-top: 18px;154    opacity: 0.9;155  }156 157  /* Modal overlay and dialog */158  .overlay {159    position: absolute;160    left: 0; top: 0; right: 0; bottom: 0;161    background: rgba(0,0,0,0.55);162  }163  .modal {164    position: absolute;165    left: 110px;166    right: 110px;167    top: 980px;168    background: #1e1e1e;169    border-radius: 16px;170    box-shadow: 0 20px 60px rgba(0,0,0,0.7);171    padding: 46px 44px 38px;172  }173  .modal h2 {174    margin: 0;175    font-size: 56px;176    font-weight: 700;177    color: #fff;178  }179  .input-area {180    margin-top: 30px;181  }182  .text-field {183    width: 100%;184    height: 84px;185    background: transparent;186    border: none;187    border-bottom: 3px solid #3a3a3a;188    color: #fff;189    font-size: 44px;190    outline: none;191  }192  .privacy {193    display: inline-flex;194    align-items: center;195    gap: 16px;196    margin-top: 34px;197    padding: 12px 16px;198    color: #cfcfcf;199    font-size: 40px;200  }201  .actions {202    display: flex;203    justify-content: flex-end;204    gap: 44px;205    margin-top: 36px;206  }207  .btn {208    font-size: 44px;209    padding: 10px 6px;210    color: #79a7ff;211  }212  .btn.cancel {213    color: #c8d2ff;214    opacity: 0.9;215  }216  /* helper small line to mimic list items separator spacing */217  .video-row + .video-row { margin-top: 4px; }218</style>219</head>220<body>221<div id="render-target">222 223  <!-- Status Bar -->224  <div class="status-bar">225    <div>9:15</div>226    <div class="status-icons">227      <div class="dot"></div>228      <svg class="wifi" viewBox="0 0 24 24">229        <path d="M12 18.5l2.5 2.5L12 24l-2.5-3z"></path>230        <path d="M12 16c2.2 0 4 .8 5.5 2.3l-1.6 1.6C14.9 18.8 13.6 18 12 18s-2.9.8-3.9 1.9L6.5 18.3C8 16.8 9.8 16 12 16z"></path>231      </svg>232      <svg class="battery" viewBox="0 0 36 24">233        <rect x="1" y="4" width="28" height="16" rx="3"></rect>234        <rect x="31" y="8" width="4" height="8" rx="1"></rect>235        <rect x="4" y="7" width="22" height="10" fill="#eaeaea"></rect>236      </svg>237    </div>238  </div>239 240  <!-- Header -->241  <div class="header">242    <button class="icon-btn" aria-label="Close">243      <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff">244        <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>245      </svg>246    </button>247    <div class="title">Add videos</div>248    <div class="next">Next</div>249  </div>250 251  <div class="selected-info">0 videos selected</div>252 253  <!-- Content -->254  <div class="content">255    <div class="section-title">Recently Watched</div>256 257    <!-- Row 1 -->258    <div class="video-row">259      <div class="thumb">260        [IMG: Rome travel vlog street]261        <div class="time-badge">16:50</div>262      </div>263      <div class="vinfo">264        <div class="vtitle">What to do in Rome for 3 days | Italy Travel Vlog 2022</div>265        <div class="vmeta">Hannah JY Moon • 145K views • 10 months ago</div>266      </div>267      <div class="checkbox"></div>268    </div>269 270    <!-- Row 2 -->271    <div class="video-row">272      <div class="thumb">273        [IMG: Podcast studio scene]274        <div class="time-badge">58:37</div>275      </div>276      <div class="vinfo">277        <div class="vtitle">This American Life: The Call</div>278        <div class="vmeta">This American Life • 2K views • Streamed 11 days ago</div>279      </div>280      <div class="checkbox"></div>281    </div>282 283    <!-- Row 3 -->284    <div class="video-row">285      <div class="thumb">286        [IMG: Rome vlog arriving in Italy]287        <div class="time-badge">23:14</div>288      </div>289      <div class="vinfo">290        <div class="vtitle">Rome travel vlog | arriving in Italy, lots of exploring & eating | pt. I</div>291        <div class="vmeta">alia zaita • 132K views • 7 months ago</div>292      </div>293      <div class="checkbox"></div>294    </div>295 296    <!-- Row 4 -->297    <div class="video-row">298      <div class="thumb">299        [IMG: Short vertical drawing reaction]300        <div class="time-badge">0:48</div>301      </div>302      <div class="vinfo">303        <div class="vtitle">I drew a guy with black eyes! (Crazy reaction!)</div>304        <div class="vmeta">Devon Rodriguez • 94M views • 1 year ago</div>305      </div>306      <div class="checkbox"></div>307    </div>308 309    <!-- Row 5 -->310    <div class="video-row">311      <div class="thumb">312        [IMG: Volleyball court highlight]313        <div class="time-badge">0:09</div>314      </div>315      <div class="vinfo">316        <div class="vtitle">#shorts #volleyballlife #volleyballnepal #volleyball</div>317        <div class="vmeta">Rai Rodung • 10K views • 11 days ago</div>318      </div>319      <div class="checkbox"></div>320    </div>321 322    <!-- Row 6 -->323    <div class="video-row">324      <div class="thumb">325        [IMG: Funny meme clip outdoor]326        <div class="time-badge">0:13</div>327      </div>328      <div class="vinfo">329        <div class="vtitle">TAHAN TAWA MEME LUCU Semua karna wanita #meme</div>330        <div class="vmeta">TRAVELING STUDIO • 3.1M views • 1 month ago</div>331      </div>332      <div class="checkbox"></div>333    </div>334 335    <!-- Row 7 -->336    <div class="video-row">337      <div class="thumb">338        [IMG: Interview / news clip]339        <div class="time-badge">0:25</div>340      </div>341      <div class="vinfo">342        <div class="vtitle">Polisi yang sangat di hormati dan polisi mampu melindungi</div>343        <div class="vmeta">YUZQI entertainment • 215M views • 1 year ago</div>344      </div>345      <div class="checkbox"></div>346    </div>347  </div>348 349  <!-- Modal -->350  <div class="overlay"></div>351  <div class="modal">352    <h2>New playlist</h2>353    <div class="input-area">354      <input class="text-field" placeholder="Title" />355    </div>356    <div class="privacy">357      <svg width="44" height="44" viewBox="0 0 24 24" fill="#cfcfcf">358        <path d="M12 2a4 4 0 00-4 4v3H6a2 2 0 00-2 2v7a2 2 0 002 2h12a2 2 0 002-2v-7a2 2 0 00-2-2h-2V6a4 4 0 00-4-4zm-2 7V6a2 2 0 114 0v3h-4z"/>359      </svg>360      Private361    </div>362    <div class="actions">363      <div class="btn cancel">Cancel</div>364      <div class="btn">Create</div>365    </div>366  </div>367 368</div>369</body>370</html>