GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Add videos - New playlist</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #111214;14 color: #eaeaea;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 height: 80px;23 width: 100%;24 color: #dcdcdc;25 font-size: 32px;26 }27 .status-bar .time {28 position: absolute;29 left: 32px;30 top: 22px;31 letter-spacing: 1px;32 }33 .status-icons {34 position: absolute;35 right: 28px;36 top: 20px;37 display: flex;38 align-items: center;39 gap: 18px;40 opacity: 0.85;41 }42 .status-icons .dot {43 width: 22px; height: 22px; border-radius: 50%; background: #dcdcdc;44 }45 .status-icons .battery {46 width: 40px; height: 22px; border: 3px solid #dcdcdc; border-radius: 4px; position: relative;47 }48 .status-icons .battery::after {49 content: "";50 position: absolute; right: -8px; top: 5px;51 width: 6px; height: 12px; background: #dcdcdc; border-radius: 2px;52 }53 .status-icons .battery .level {54 position: absolute; left: 3px; top: 3px; bottom: 3px; right: 10px; background: #dcdcdc;55 }56 57 /* App bar */58 .app-bar {59 position: absolute;60 top: 80px;61 left: 0;62 height: 120px;63 width: 100%;64 display: flex;65 align-items: center;66 padding: 0 32px;67 }68 .icon-btn {69 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 32px;70 }71 .title {72 font-size: 56px;73 font-weight: 700;74 margin-left: 18px;75 color: #f2f2f2;76 }77 .next {78 margin-left: auto;79 font-size: 40px;80 color: #3ea6ff;81 font-weight: 600;82 }83 84 /* Content */85 .content {86 position: absolute;87 top: 200px;88 left: 0;89 right: 0;90 bottom: 0;91 padding: 24px 28px 0 28px;92 }93 .section-title {94 font-size: 36px;95 font-weight: 700;96 color: #cfcfcf;97 margin: 16px 0 18px 4px;98 }99 .video-item {100 display: flex;101 align-items: flex-start;102 padding: 18px 6px;103 position: relative;104 }105 .thumb {106 width: 300px; height: 168px;107 background: #E0E0E0; border: 1px solid #BDBDBD;108 color: #555; display: flex; align-items: center; justify-content: center;109 font-size: 26px; text-align: center; border-radius: 8px;110 margin-right: 18px;111 }112 .meta {113 flex: 1;114 padding-right: 100px;115 }116 .meta .v-title {117 font-size: 34px;118 line-height: 1.25;119 color: #f1f1f1;120 margin-bottom: 8px;121 }122 .meta .byline {123 font-size: 26px;124 color: #9aa0a6;125 }126 .checkbox {127 position: absolute;128 right: 24px;129 top: 34px;130 width: 46px; height: 46px; border: 3px solid #7c7c7c; border-radius: 8px;131 }132 133 /* Overlay + Modal */134 .overlay {135 position: absolute;136 left: 0; right: 0; top: 0; bottom: 0;137 background: rgba(0,0,0,0.55);138 }139 .modal {140 position: absolute;141 left: 100px;142 top: 520px;143 width: 880px;144 background: #212327;145 border-radius: 12px;146 box-shadow: 0 20px 60px rgba(0,0,0,0.6);147 padding: 32px 36px 30px 36px;148 }149 .modal .modal-title {150 font-size: 48px;151 font-weight: 800;152 margin-bottom: 26px;153 }154 .input-row {155 margin-top: 10px;156 }157 .input-display {158 font-size: 44px;159 padding: 14px 4px 12px 4px;160 border-bottom: 4px solid #3ea6ff;161 color: #f6f6f6;162 }163 .privacy {164 display: inline-flex;165 align-items: center;166 gap: 12px;167 padding: 12px 18px;168 border-radius: 26px;169 background: #2a2d32;170 color: #d7d7d7;171 font-size: 28px;172 margin-top: 22px;173 }174 .modal-actions {175 display: flex;176 gap: 36px;177 justify-content: flex-end;178 margin-top: 30px;179 font-size: 36px;180 }181 .btn {182 cursor: default;183 }184 .btn.cancel { color: #b0b0b0; }185 .btn.create { color: #3ea6ff; font-weight: 700; }186 187 /* Keyboard (stylized) */188 .keyboard {189 position: absolute;190 left: 0;191 right: 0;192 bottom: 0;193 height: 900px;194 background: #1b1d21;195 border-top: 1px solid #2b2e33;196 box-shadow: 0 -8px 20px rgba(0,0,0,0.6) inset;197 }198 .suggestions {199 height: 110px;200 display: flex;201 align-items: center;202 gap: 18px;203 padding: 18px 24px;204 background: #1f2126;205 border-bottom: 1px solid #2b2e33;206 }207 .chip {208 padding: 10px 18px;209 background: #2a2d33;210 color: #e7e7e7;211 border-radius: 20px;212 font-size: 30px;213 }214 .keys {215 padding: 18px 22px 24px;216 }217 .row {218 display: flex;219 gap: 16px;220 justify-content: center;221 margin: 18px 0;222 }223 .key {224 width: 88px; height: 106px;225 background: #2a2d32;226 border-radius: 16px;227 color: #f7f7f7;228 font-size: 40px;229 display: flex; align-items: center; justify-content: center;230 }231 .key.wide { width: 140px; }232 .key.extra-wide { width: 620px; }233 .key.right-action {234 width: 140px; background: #345bff; color: #ffffff;235 }236 237 /* Bottom gesture bar */238 .home-indicator {239 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);240 width: 340px; height: 8px; background: #9aa0a6; border-radius: 6px; opacity: 0.6;241 }242 243 /* Video list dims above keyboard */244 .content-mask {245 padding-bottom: 940px; /* leave room for keyboard */246 }247</style>248</head>249<body>250<div id="render-target">251 252 <!-- Status bar -->253 <div class="status-bar">254 <div class="time">9:16</div>255 <div class="status-icons">256 <div class="dot"></div>257 <div class="dot"></div>258 <div class="battery">259 <div class="level"></div>260 </div>261 </div>262 </div>263 264 <!-- App bar -->265 <div class="app-bar">266 <div class="icon-btn" aria-label="Close">267 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">268 <path d="M5 5l14 14M19 5L5 19" stroke="#e0e0e0" stroke-width="2.4" stroke-linecap="round"/>269 </svg>270 </div>271 <div class="title">Add videos</div>272 <div class="next">Next</div>273 </div>274 275 <!-- Content list (behind modal) -->276 <div class="content content-mask">277 <div class="section-title">Recently Watched</div>278 279 <div class="video-item">280 <div class="thumb">[IMG: Travel vlog - Rome]</div>281 <div class="meta">282 <div class="v-title">What to do in Rome for 3 days | Italy Travel Vlog 2022</div>283 <div class="byline">Hannah JY Moon • 16:50</div>284 </div>285 <div class="checkbox"></div>286 </div>287 288 <div class="video-item">289 <div class="thumb">[IMG: Cozy room scene]</div>290 <div class="meta">291 <div class="v-title">Evening Room Ambience</div>292 <div class="byline">Relax Channel • 2:31:45</div>293 </div>294 <div class="checkbox"></div>295 </div>296 297 <div class="video-item">298 <div class="thumb">[IMG: Band performance]</div>299 <div class="meta">300 <div class="v-title">Stereophonics - Graffiti On The Train</div>301 <div class="byline">Stereophonics Official • 14M views • 10 years ago</div>302 </div>303 <div class="checkbox"></div>304 </div>305 306 <div class="video-item">307 <div class="thumb">[IMG: Dragon artwork]</div>308 <div class="meta">309 <div class="v-title">Respect 🔥😎</div>310 <div class="byline">GmmRich • 50M views • 1 month ago</div>311 </div>312 <div class="checkbox"></div>313 </div>314 </div>315 316 <!-- Overlay and modal -->317 <div class="overlay"></div>318 <div class="modal">319 <div class="modal-title">New playlist</div>320 <div class="input-row">321 <div class="input-display">My Music Collection</div>322 </div>323 <div class="privacy">324 <svg width="28" height="28" viewBox="0 0 24 24" fill="#d7d7d7" aria-hidden="true">325 <path d="M12 1a5 5 0 00-5 5v3H5a1 1 0 00-1 1v9a3 3 0 003 3h10a3 3 0 003-3v-9a1 1 0 00-1-1h-2V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9z"/>326 </svg>327 Private328 </div>329 <div class="modal-actions">330 <div class="btn cancel">Cancel</div>331 <div class="btn create">Create</div>332 </div>333 </div>334 335 <!-- Keyboard -->336 <div class="keyboard">337 <div class="suggestions">338 <div class="chip">Collection</div>339 <div class="chip">Collections</div>340 <div class="chip">Collection's</div>341 </div>342 343 <div class="keys">344 <div class="row">345 <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 class="key">p</div>346 </div>347 <div class="row">348 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>349 </div>350 <div class="row">351 <div class="key wide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div>352 </div>353 <div class="row">354 <div class="key wide">?123</div>355 <div class="key">,</div>356 <div class="key">🙂</div>357 <div class="key extra-wide"></div>358 <div class="key">.</div>359 <div class="key right-action">✓</div>360 </div>361 </div>362 </div>363 364 <div class="home-indicator"></div>365</div>366</body>367</html>