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 - New playlist</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #121212;20 color: #fff;21 }22 23 /* Top app bar */24 .status-pad {25 height: 60px;26 background: #0f0f0f;27 }28 .app-bar {29 height: 120px;30 display: flex;31 align-items: center;32 padding: 0 32px;33 box-sizing: border-box;34 background: #0f0f0f;35 }36 .app-bar .left {37 display: flex;38 align-items: center;39 gap: 24px;40 flex: 1;41 }42 .app-bar .title {43 font-size: 40px;44 font-weight: 600;45 letter-spacing: 0.2px;46 }47 .icon-btn {48 width: 64px;49 height: 64px;50 border-radius: 32px;51 display: inline-flex;52 align-items: center;53 justify-content: center;54 background: transparent;55 }56 .app-bar .right {57 font-size: 36px;58 color: #5ea0ff;59 font-weight: 600;60 }61 62 /* Section header */63 .section-header {64 padding: 24px 32px 12px 32px;65 display: flex;66 align-items: center;67 justify-content: space-between;68 color: #bdbdbd;69 font-size: 30px;70 }71 72 /* List */73 .list {74 padding: 0 24px 24px 24px;75 box-sizing: border-box;76 }77 .video-item {78 display: flex;79 align-items: center;80 gap: 24px;81 padding: 18px 8px;82 }83 .thumb {84 width: 320px;85 height: 180px;86 background: #E0E0E0;87 border: 1px solid #BDBDBD;88 display: flex;89 justify-content: center;90 align-items: center;91 color: #757575;92 font-size: 28px;93 position: relative;94 border-radius: 12px;95 overflow: hidden;96 }97 .duration {98 position: absolute;99 right: 8px;100 bottom: 8px;101 background: rgba(0,0,0,0.7);102 padding: 6px 10px;103 border-radius: 8px;104 font-size: 26px;105 color: #fff;106 }107 .meta {108 flex: 1;109 min-width: 0;110 }111 .title-line {112 font-size: 32px;113 color: #eaeaea;114 white-space: nowrap;115 overflow: hidden;116 text-overflow: ellipsis;117 }118 .subtle {119 margin-top: 8px;120 font-size: 26px;121 color: #9e9e9e;122 }123 .live-pill {124 display: inline-block;125 background: #d32f2f;126 color: #fff;127 font-size: 24px;128 padding: 4px 10px;129 border-radius: 8px;130 margin-left: 8px;131 }132 .checkbox {133 width: 56px;134 height: 56px;135 border-radius: 8px;136 border: 2px solid #757575;137 display: flex;138 align-items: center;139 justify-content: center;140 }141 .checkbox.checked {142 background: #1976d2;143 border-color: #1976d2;144 }145 146 /* Floating selected preview (bottom-right) */147 .floating-preview {148 position: absolute;149 right: 48px;150 bottom: 920px;151 width: 360px;152 height: 540px;153 background: #0a0a0a;154 border-radius: 28px;155 box-shadow: 0 24px 60px rgba(0,0,0,0.6);156 overflow: hidden;157 }158 .floating-preview .img {159 width: 100%;160 height: 100%;161 background: #E0E0E0;162 border: 1px solid #BDBDBD;163 display: flex;164 align-items: center;165 justify-content: center;166 color: #757575;167 font-size: 28px;168 }169 170 /* Dialog: New playlist */171 .dialog-backdrop {172 position: absolute;173 left: 0; top: 0; right: 0; bottom: 0;174 background: rgba(0,0,0,0.35);175 }176 .dialog {177 position: absolute;178 left: 50%;179 top: 780px;180 transform: translateX(-50%);181 width: 860px;182 background: #262626;183 border-radius: 16px;184 box-shadow: 0 24px 60px rgba(0,0,0,0.7);185 padding: 32px 32px 28px 32px;186 box-sizing: border-box;187 }188 .dialog-title {189 font-size: 40px;190 font-weight: 600;191 margin-bottom: 28px;192 }193 .field {194 margin-bottom: 22px;195 }196 .input {197 font-size: 34px;198 padding: 8px 0;199 border: none;200 outline: none;201 background: transparent;202 color: #eaeaea;203 width: 100%;204 }205 .underline {206 height: 3px;207 background: #1e88e5;208 margin-top: 8px;209 }210 .chip {211 display: inline-flex;212 align-items: center;213 gap: 10px;214 padding: 10px 16px;215 border-radius: 999px;216 background: #3a3a3a;217 color: #d6d6d6;218 font-size: 26px;219 border: 1px solid #555;220 }221 .dialog-actions {222 display: flex;223 justify-content: flex-end;224 gap: 28px;225 margin-top: 26px;226 }227 .btn-text {228 font-size: 34px;229 font-weight: 600;230 color: #5ea0ff;231 cursor: default;232 }233 234 /* Keyboard */235 .keyboard {236 position: absolute;237 left: 0;238 bottom: 72px;239 width: 100%;240 height: 760px;241 background: #1b1b1b;242 border-top-left-radius: 18px;243 border-top-right-radius: 18px;244 box-shadow: 0 -12px 40px rgba(0,0,0,0.6);245 padding: 20px 24px;246 box-sizing: border-box;247 }248 .kb-tools {249 display: flex;250 gap: 28px;251 align-items: center;252 margin-bottom: 14px;253 }254 .tool {255 display: inline-flex;256 align-items: center;257 gap: 10px;258 color: #bdbdbd;259 font-size: 28px;260 }261 .key-row {262 display: flex;263 justify-content: center;264 gap: 16px;265 margin: 22px 0;266 padding: 0 16px;267 }268 .key {269 min-width: 84px;270 height: 110px;271 border-radius: 26px;272 background: #2c2c2c;273 color: #f5f5f5;274 display: inline-flex;275 align-items: center;276 justify-content: center;277 font-size: 40px;278 box-shadow: inset 0 -6px 0 rgba(255,255,255,0.03);279 }280 .key.wide { min-width: 140px; }281 .key.extra-wide { min-width: 220px; }282 .key.enter {283 background: #8ec8ff;284 color: #0e2a45;285 font-weight: 700;286 }287 .key.light {288 background: #3a3a3a;289 color: #d6d6d6;290 }291 292 /* Home indicator */293 .home-indicator {294 position: absolute;295 left: 50%;296 bottom: 16px;297 transform: translateX(-50%);298 width: 300px;299 height: 12px;300 background: #e6e6e6;301 border-radius: 12px;302 opacity: 0.9;303 }304 305 /* Simple SVG icons */306 svg { display: block; }307</style>308</head>309<body>310<div id="render-target">311 312 <div class="status-pad"></div>313 <div class="app-bar">314 <div class="left">315 <div class="icon-btn" aria-label="Close">316 <svg width="28" height="28" viewBox="0 0 24 24">317 <path d="M5 5L19 19M19 5L5 19" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round"/>318 </svg>319 </div>320 <div class="title">Add videos</div>321 </div>322 <div class="right">Next</div>323 </div>324 325 <div class="section-header">326 <div>Recently Watched</div>327 <div>1 video selected</div>328 </div>329 330 <div class="list">331 <!-- Item 1 (selected) -->332 <div class="video-item">333 <div class="thumb">334 [IMG: Video thumbnail]335 <div class="duration">3:08</div>336 </div>337 <div class="meta">338 <div class="title-line">🍁 Autumn outfits inspo. Milan’s fashion life in anticipation of M...</div>339 <div class="subtle">527K views • 6 years ago</div>340 </div>341 <div class="checkbox checked">342 <svg width="28" height="28" viewBox="0 0 24 24">343 <path d="M6 12l4 4 8-8" stroke="#fff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>344 </svg>345 </div>346 </div>347 348 <!-- Item 2 -->349 <div class="video-item">350 <div class="thumb">351 [IMG: Video thumbnail]352 <div class="duration">1:11</div>353 </div>354 <div class="meta">355 <div class="title-line">Arabic makeup / Arabic jewelry set styling</div>356 <div class="subtle">2.9K views • 1 year ago</div>357 </div>358 <div class="checkbox"></div>359 </div>360 361 <!-- Item 3 -->362 <div class="video-item">363 <div class="thumb">364 [IMG: Video thumbnail]365 <div class="duration">4:31</div>366 </div>367 <div class="meta">368 <div class="title-line">Man gives speech — Highlights</div>369 <div class="subtle">9.7M views • 4 years ago</div>370 </div>371 <div class="checkbox"></div>372 </div>373 374 <!-- Item 4 (example with LIVE tag) -->375 <div class="video-item">376 <div class="thumb">377 [IMG: Video thumbnail]378 <div class="duration">LIVE</div>379 </div>380 <div class="meta">381 <div class="title-line">Street fashion stream <span class="live-pill">LIVE</span></div>382 <div class="subtle">Streaming now</div>383 </div>384 <div class="checkbox"></div>385 </div>386 </div>387 388 <!-- Floating selected video preview -->389 <div class="floating-preview">390 <div class="img">[IMG: Selected video preview]</div>391 </div>392 393 <!-- Dialog overlay -->394 <div class="dialog-backdrop"></div>395 <div class="dialog">396 <div class="dialog-title">New playlist</div>397 <div class="field">398 <div class="input" contenteditable="false">Title</div>399 <div class="underline"></div>400 </div>401 <div class="chip">402 <svg width="20" height="20" viewBox="0 0 24 24">403 <path d="M7 10V8a5 5 0 0110 0v2h1a1 1 0 011 1v7a1 1 0 01-1 1H6a1 1 0 01-1-1v-7a1 1 0 011-1h1zm2 0h6V8a3 3 0 10-6 0v2z" fill="#d6d6d6"/>404 </svg>405 Private406 </div>407 <div class="dialog-actions">408 <div class="btn-text" style="color:#a7c6ff;">Cancel</div>409 <div class="btn-text">Create</div>410 </div>411 </div>412 413 <!-- Keyboard -->414 <div class="keyboard">415 <div class="kb-tools">416 <div class="tool">417 <svg width="28" height="28" viewBox="0 0 24 24">418 <path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" fill="#bdbdbd"/>419 </svg>420 </div>421 <div class="tool">422 <svg width="28" height="28" viewBox="0 0 24 24">423 <path d="M12 3l3 6-6 12 0-9-6-3 9 0z" fill="#bdbdbd"/>424 </svg>425 GIF426 </div>427 <div class="tool">428 <svg width="28" height="28" viewBox="0 0 24 24">429 <path d="M5 12h14M12 5v14" stroke="#bdbdbd" stroke-width="2"/>430 </svg>431 Gx432 </div>433 <div class="tool">434 <svg width="28" height="28" viewBox="0 0 24 24">435 <circle cx="12" cy="12" r="8" fill="#bdbdbd"/>436 </svg>437 </div>438 <div class="tool">439 <svg width="28" height="28" viewBox="0 0 24 24">440 <path d="M4 18h16M6 12h12M8 6h8" stroke="#bdbdbd" stroke-width="2"/>441 </svg>442 </div>443 </div>444 445 <div class="key-row">446 <div class="key">Q</div><div class="key">W</div><div class="key">E</div><div class="key">R</div><div class="key">T</div><div class="key">Y</div><div class="key">U</div><div class="key">I</div><div class="key">O</div><div clas