GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Rendered UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #0f0f0f;14 color: #fff;15 border-radius: 42px;16 box-shadow: 0 30px 80px rgba(0,0,0,0.55);17 font-family: "Roboto", "Segoe UI", Arial, sans-serif;18 }19 20 /* Header */21 .header {22 position: absolute;23 top: 48px;24 left: 0;25 right: 0;26 height: 120px;27 }28 .header .title {29 position: absolute;30 left: 120px;31 top: 28px;32 font-size: 48px;33 font-weight: 600;34 color: #e6e6e6;35 letter-spacing: 0.2px;36 }37 .icon-btn {38 position: absolute;39 left: 24px;40 top: 18px;41 width: 80px;42 height: 80px;43 background: transparent;44 border: none;45 padding: 0;46 cursor: default;47 }48 .icon-btn svg { width: 64px; height: 64px; }49 .icon-btn svg path { stroke: #bdbdbd; stroke-width: 8; stroke-linecap: round; }50 .next {51 position: absolute;52 right: 24px;53 top: 32px;54 font-size: 44px;55 color: #4FA3FF;56 font-weight: 500;57 }58 59 /* Section header */60 .subheader {61 position: absolute;62 top: 168px;63 left: 24px;64 right: 24px;65 display: flex;66 align-items: center;67 justify-content: space-between;68 }69 .subheader .label {70 font-size: 36px;71 color: #b7b7b7;72 }73 .subheader .count {74 font-size: 32px;75 color: #b7b7b7;76 }77 78 /* List */79 .list {80 position: absolute;81 top: 228px;82 left: 0;83 right: 0;84 bottom: 900px;85 overflow: hidden;86 }87 .item {88 display: flex;89 align-items: flex-start;90 margin: 18px 24px;91 padding: 0;92 height: 220px;93 }94 .thumb {95 width: 360px;96 height: 200px;97 background: #E0E0E0;98 border: 1px solid #BDBDBD;99 border-radius: 16px;100 display: flex;101 align-items: center;102 justify-content: center;103 color: #757575;104 font-size: 26px;105 position: relative;106 }107 .thumb .badge {108 position: absolute;109 top: 10px;110 left: 10px;111 background: #D32F2F;112 color: #fff;113 font-size: 24px;114 padding: 6px 10px;115 border-radius: 8px;116 }117 .info {118 flex: 1;119 margin-left: 24px;120 padding-top: 6px;121 }122 .info .t1 {123 font-size: 34px;124 line-height: 42px;125 color: #f1f1f1;126 max-width: 580px;127 }128 .info .meta {129 margin-top: 8px;130 font-size: 28px;131 color: #9f9f9f;132 }133 .checkbox,134 .checkbox.checked {135 width: 60px;136 height: 60px;137 border-radius: 10px;138 margin-left: 12px;139 margin-top: 8px;140 }141 .checkbox {142 border: 3px solid #bdbdbd;143 box-sizing: border-box;144 }145 .checkbox.checked {146 background: #1976D2;147 border: 3px solid #1976D2;148 display: flex;149 align-items: center;150 justify-content: center;151 }152 .checkbox.checked svg {153 width: 36px; height: 36px;154 }155 .checkbox.checked svg path {156 fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;157 }158 159 /* Dialog */160 .dialog {161 position: absolute;162 left: 90px;163 top: 760px;164 width: 900px;165 background: #2a2a2a;166 border-radius: 18px;167 box-shadow: 0 14px 36px rgba(0,0,0,0.65);168 padding: 36px 36px 28px;169 }170 .dialog .dlg-title {171 font-size: 48px;172 font-weight: 600;173 margin-bottom: 28px;174 color: #ffffff;175 }176 .dialog .input {177 font-size: 40px;178 color: #ffffff;179 padding: 8px 0 12px;180 border-bottom: 3px solid #4FA3FF;181 }182 .dialog .privacy {183 margin-top: 26px;184 }185 .pill {186 display: inline-flex;187 align-items: center;188 background: #444;189 color: #ddd;190 border-radius: 12px;191 padding: 10px 16px;192 border: 1px solid #575757;193 font-size: 28px;194 }195 .pill svg {196 width: 26px; height: 26px; margin-right: 10px;197 }198 .pill svg path {199 stroke: #ddd; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round;200 }201 .dialog .actions {202 margin-top: 34px;203 display: flex;204 justify-content: flex-end;205 align-items: center;206 }207 .dialog .btn {208 font-size: 40px;209 margin-left: 36px;210 color: #8fb8ff;211 cursor: default;212 }213 .dialog .btn.cancel { color: #bdbdbd; }214 .dialog .btn.create { color: #4FA3FF; font-weight: 600; }215 216 /* Keyboard */217 .keyboard {218 position: absolute;219 left: 0;220 right: 0;221 bottom: 0;222 height: 880px;223 background: #1b1b1b;224 border-top: 1px solid #2a2a2a;225 }226 .suggestion-bar {227 height: 90px;228 display: flex;229 align-items: center;230 padding: 0 24px;231 color: #e0e0e0;232 font-size: 36px;233 }234 .suggestion-bar .label { flex: 1; }235 .suggestion-bar .mic {236 width: 64px; height: 64px; border-radius: 32px;237 background: #333; display: flex; align-items: center; justify-content: center;238 }239 .suggestion-bar .mic svg { width: 32px; height: 32px; fill: none; stroke: #cfcfcf; stroke-width: 3; }240 241 .keys { padding: 16px 24px; }242 .key-row { display: flex; justify-content: space-between; margin-bottom: 22px; }243 .key {244 flex: 1;245 height: 120px;246 margin: 0 8px;247 border-radius: 26px;248 background: #2a2a2a;249 color: #ffffff;250 font-size: 44px;251 display: flex; align-items: center; justify-content: center;252 box-shadow: inset 0 -4px 0 rgba(255,255,255,0.05);253 }254 .key.small { flex: 0 0 96px; }255 .key.wide { flex: 2.8; }256 .key.enter {257 flex: 0 0 120px;258 background: #bfe6ff; color: #0b3b73; font-weight: 700;259 }260 .mode { background: #8ea1af; color: #0d2b40; font-weight: 700; }261 .emoji { background: #3b3b3b; }262 .comma, .period { background: #2a2a2a; }263 .backspace svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 3; }264 .shift svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 3; }265 266 /* Home pill */267 .home-pill {268 position: absolute;269 bottom: 18px;270 left: 50%;271 transform: translateX(-50%);272 width: 260px;273 height: 10px;274 background: rgba(255,255,255,0.55);275 border-radius: 8px;276 }277</style>278</head>279<body>280<div id="render-target">281 282 <!-- Top header -->283 <div class="header">284 <button class="icon-btn" aria-label="Close">285 <svg viewBox="0 0 24 24">286 <path d="M4 4 L20 20"></path>287 <path d="M20 4 L4 20"></path>288 </svg>289 </button>290 <div class="title">Add videos</div>291 <div class="next">Next</div>292 </div>293 294 <!-- Recently watched row -->295 <div class="subheader">296 <div class="label">Recently Watched</div>297 <div class="count">1 video selected</div>298 </div>299 300 <!-- Video list -->301 <div class="list">302 <div class="item">303 <div class="thumb">304 <div class="badge">LIVE</div>305 [IMG: Fashion outfits thumbnail]306 </div>307 <div class="info">308 <div class="t1">Autumn outfits inspo. Milan's fashion life...</div>309 <div class="meta">527K views · 6 years ago</div>310 </div>311 <div class="checkbox checked" aria-checked="true">312 <svg viewBox="0 0 24 24">313 <path d="M4 12 L10 18 L20 6"></path>314 </svg>315 </div>316 </div>317 318 <div class="item">319 <div class="thumb">[IMG: Cultural event thumbnail]</div>320 <div class="info">321 <div class="t1">Classical performance clip</div>322 <div class="meta">9.7M views · 4 years ago</div>323 </div>324 <div class="checkbox" aria-checked="false"></div>325 </div>326 327 <div class="item">328 <div class="thumb">[IMG: Beauty & makeup tutorial thumbnail]</div>329 <div class="info">330 <div class="t1">Arabic makeup tutorial and fashion showcase</div>331 <div class="meta">2.9M views · 3 years ago</div>332 </div>333 <div class="checkbox" aria-checked="false"></div>334 </div>335 </div>336 337 <!-- New playlist dialog -->338 <div class="dialog" role="dialog" aria-label="New playlist">339 <div class="dlg-title">New playlist</div>340 <div class="input">Luciano Pavarotti</div>341 <div class="privacy">342 <span class="pill">343 <svg viewBox="0 0 24 24">344 <path d="M6 10 H18 V20 H6 Z"></path>345 <path d="M8 10 V6 A4 4 0 0 1 16 6 V10"></path>346 </svg>347 Private348 </span>349 </div>350 <div class="actions">351 <div class="btn cancel">Cancel</div>352 <div class="btn create">Create</div>353 </div>354 </div>355 356 <!-- Keyboard -->357 <div class="keyboard">358 <div class="suggestion-bar">359 <div class="label">Pavarotti</div>360 <div class="mic" aria-label="Voice input">361 <svg viewBox="0 0 24 24">362 <path d="M12 4 A4 4 0 0 1 16 8 V12 A4 4 0 0 1 8 12 V8 A4 4 0 0 1 12 4 Z"></path>363 <path d="M5 12 C5 16 9 18 12 18 C15 18 19 16 19 12"></path>364 <path d="M12 18 V22"></path>365 </svg>366 </div>367 </div>368 369 <div class="keys">370 <div class="key-row">371 <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>372 <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>373 </div>374 <div class="key-row">375 <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>376 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>377 </div>378 <div class="key-row">379 <div class="key small shift" aria-label="Shift">380 <svg viewBox="0 0 24 24"><path d="M12 4 L4 12 H9 V20 H15 V12 H20 Z"></path></svg>381 </div>382 <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>383 <div class="key">n</div><div class="key">m</div>384 <div class="key small backspace" aria-label="Backspace">385 <svg viewBox="0 0 24 24"><path d="M4 12 L10 6 H20 V18 H10 Z M12 9 L16 13 M16 9 L12 13"></path></svg>386 </div>387 </div>388 <div class="key-row">389 <div class="key small mode">?123</div>390 <div class="key small comma">,</div>391 <div class="key small emoji">😊</div>392 <div class="key wide">space</div>393 <div class="key small period">.</div>394 <div class="key enter">✓</div>395 </div>396 </div>397 </div>398 399 <div class="home-pill"></div>400</div>401</body>402</html>