GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>UI Rendering - Add videos</title>5<style>6 body { margin:0; padding:0; background:transparent; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#0f0f0f; color:#ffffff;11 font-family: Roboto, Arial, sans-serif;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; right:0; height:110px;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 40px; font-size:42px; color:#fff;19 }20 .status-icons { display:flex; align-items:center; gap:24px; }21 .icon-wifi, .icon-battery, .icon-dot {22 width:40px; height:40px;23 }24 .icon-wifi svg, .icon-battery svg, .icon-dot svg { width:100%; height:100%; }25 26 /* Header */27 .header {28 position:absolute; left:0; right:0; top:110px; height:120px;29 display:flex; align-items:center; padding:0 40px;30 }31 .close-btn {32 width:72px; height:72px; margin-right:18px;33 }34 .close-btn svg { width:100%; height:100%; }35 .title { font-size:58px; font-weight:600; flex:1; }36 .header-right {37 display:flex; align-items:flex-end; flex-direction:column; gap:8px;38 }39 .next-link { color:#48a6ff; font-size:44px; }40 .selected-count { font-size:32px; color:#b0b0b0; }41 42 /* Content area */43 .content { position:absolute; top:230px; left:0; right:0; bottom:880px; padding:0 24px; }44 .section-title { font-size:42px; color:#cfcfcf; padding:0 24px 12px; }45 .video-item {46 position:relative;47 display:flex; align-items:center;48 padding:26px 24px;49 }50 .thumb {51 width:280px; height:160px;52 background:#E0E0E0; border:1px solid #BDBDBD;53 display:flex; justify-content:center; align-items:center;54 color:#757575; font-size:26px; border-radius:8px; margin-right:24px;55 position:relative;56 }57 .duration {58 position:absolute; right:8px; bottom:8px;59 background:rgba(0,0,0,0.7); padding:6px 10px; border-radius:8px;60 font-size:26px;61 }62 .video-info { flex:1; }63 .video-title { font-size:38px; line-height:1.25; margin-bottom:8px; color:#fff; }64 .video-meta { font-size:28px; color:#9e9e9e; }65 .checkbox {66 width:56px; height:56px; border-radius:8px; border:2px solid #7a7a7a;67 display:flex; justify-content:center; align-items:center; margin-left:18px;68 }69 .checkbox.selected {70 background:#3ea6ff; border-color:#3ea6ff;71 }72 .checkbox svg { width:34px; height:34px; }73 74 /* Dialog */75 .dialog {76 position:absolute; left:120px; top:480px; width:840px;77 background:#212121; border-radius:18px;78 box-shadow:0 10px 40px rgba(0,0,0,0.6);79 padding:40px 40px 30px;80 }81 .dialog-title { font-size:56px; font-weight:700; margin-bottom:30px; }82 .input-field {83 margin-top:6px; margin-bottom:26px;84 padding:14px 0; font-size:40px; color:#cfcfcf;85 border-bottom:4px solid #3ea6ff;86 }87 .privacy-row { display:flex; align-items:center; gap:18px; color:#cfcfcf; font-size:34px; margin:14px 0 50px; }88 .privacy-row .lock { width:40px; height:40px; }89 .dialog-actions { display:flex; justify-content:flex-end; gap:36px; }90 .btn { font-size:40px; padding:12px 6px; color:#9ecfff; }91 .btn.primary { color:#3ea6ff; font-weight:600; }92 93 /* Keyboard */94 .keyboard {95 position:absolute; left:0; right:0; bottom:0; height:880px;96 background:#1a1a1a; border-top:1px solid #2b2b2b;97 }98 .kb-topbar {99 height:120px; display:flex; align-items:center; justify-content:space-between;100 padding:0 26px;101 }102 .round {103 width:86px; height:86px; border-radius:43px; background:#2b2b2b;104 display:flex; align-items:center; justify-content:center;105 }106 .kb-icons { display:flex; align-items:center; gap:22px; }107 .kb-icon {108 width:86px; height:86px; border-radius:16px; background:#2b2b2b;109 display:flex; align-items:center; justify-content:center; color:#dcdcdc; font-size:30px;110 }111 112 .row { display:flex; justify-content:center; padding:8px 12px; }113 .key {114 width:90px; height:120px; margin:10px; background:#2b2b2b; border-radius:18px;115 display:flex; align-items:center; justify-content:center;116 font-size:44px; color:#fff;117 }118 .key.wide { width:160px; }119 .key.extra-wide { width:520px; }120 .key.tall-round {121 width:120px; height:120px; border-radius:60px;122 background:#3a3a3a;123 }124 .key.dark { background:#3a3a3a; }125 .enter {126 width:120px; height:120px; border-radius:60px;127 background:#8fa8ff; color:#0f0f0f; font-weight:700;128 }129</style>130</head>131<body>132<div id="render-target">133 134 <!-- Status Bar -->135 <div class="status-bar">136 <div>9:43</div>137 <div class="status-icons">138 <div class="icon-wifi">139 <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 20l-2-2h4l-2 2zm-7-7a11 11 0 0114 0l-2 2a8 8 0 00-10 0l-2-2zm-3-4a16 16 0 0120 0l-2 2a13 13 0 00-16 0l-2-2z"/></svg>140 </div>141 <div class="icon-battery">142 <svg viewBox="0 0 24 24" fill="#fff"><path d="M2 7h16v10H2V7zm18 3h2v4h-2v-4z"/></svg>143 </div>144 <div class="icon-dot">145 <svg viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>146 </div>147 </div>148 </div>149 150 <!-- Header -->151 <div class="header">152 <div class="close-btn">153 <svg viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">154 <path d="M5 5l14 14M19 5L5 19"/>155 </svg>156 </div>157 <div class="title">Add videos</div>158 <div class="header-right">159 <div class="next-link">Next</div>160 <div class="selected-count">2 videos selected</div>161 </div>162 </div>163 164 <!-- Content -->165 <div class="content">166 <div class="section-title">Recently Watched</div>167 168 <!-- Video item 1 -->169 <div class="video-item">170 <div class="thumb">171 [IMG: Animated music video thumbnail]172 <div class="duration">0:08</div>173 </div>174 <div class="video-info">175 <div class="video-title">4*TOWN (From Disney and Pixar’s Turning Red) - Nobody Like U</div>176 <div class="video-meta">DisneyMusicVEVO</div>177 </div>178 <div class="checkbox selected">179 <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16l-4-4 2-2 2 2 6-6 2 2-8 8z"/></svg>180 </div>181 </div>182 183 <!-- Video item 2 -->184 <div class="video-item">185 <div class="thumb">186 [IMG: Short clip thumbnail]187 <div class="duration">0:19</div>188 </div>189 <div class="video-info">190 <div class="video-title">Nhay theo điệu nhảy của các chú mèo nào các bạn ơi</div>191 <div class="video-meta">Thai Le • 148M views • 3 years ago</div>192 </div>193 <div class="checkbox selected">194 <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16l-4-4 2-2 2 2 6-6 2 2-8 8z"/></svg>195 </div>196 </div>197 198 <!-- Video item 3 -->199 <div class="video-item">200 <div class="thumb">201 [IMG: Pop music video thumbnail]202 <div class="duration">4:01</div>203 </div>204 <div class="video-info">205 <div class="video-title">Katy Perry - Chained To The Rhythm (Official) ft. Skip Marley</div>206 <div class="video-meta">Katy Perry • 735M views • 6 years ago</div>207 </div>208 <div class="checkbox">209 <svg viewBox="0 0 24 24" stroke="#7a7a7a" stroke-width="2" fill="none"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>210 </div>211 </div>212 </div>213 214 <!-- Dialog: New playlist -->215 <div class="dialog">216 <div class="dialog-title">New playlist</div>217 <div class="input-field">Title</div>218 <div class="privacy-row">219 <div class="lock">220 <svg viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 2a5 5 0 00-5 5v3H5v12h14V10h-2V7a5 5 0 00-5-5zm3 8H9V7a3 3 0 016 0v3z"/></svg>221 </div>222 <div>Private</div>223 </div>224 <div class="dialog-actions">225 <div class="btn">Cancel</div>226 <div class="btn primary">Create</div>227 </div>228 </div>229 230 <!-- Keyboard -->231 <div class="keyboard">232 <div class="kb-topbar">233 <div class="round">234 <svg viewBox="0 0 24 24" fill="#dcdcdc"><path d="M15 18l-6-6 6-6v12z"/></svg>235 </div>236 <div class="kb-icons">237 <div class="kb-icon">GIF</div>238 <div class="kb-icon">239 <svg viewBox="0 0 24 24" fill="#dcdcdc"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 5h3v2h-3v6h-2V7h2z"/></svg>240 </div>241 <div class="kb-icon">242 <svg viewBox="0 0 24 24" fill="#dcdcdc"><path d="M12 15a3 3 0 110-6 3 3 0 010 6zm7-3a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>243 </div>244 <div class="kb-icon">Gx</div>245 <div class="kb-icon">⋮</div>246 </div>247 <div class="round">248 <svg viewBox="0 0 24 24" fill="#dcdcdc"><path d="M12 3a4 4 0 014 4v3h3v10H5V10h3V7a4 4 0 014-4z"/></svg>249 </div>250 </div>251 252 <!-- Number row -->253 <div class="row">254 <div class="key">1</div>255 <div class="key">2</div>256 <div class="key">3</div>257 <div class="key">4</div>258 <div class="key">5</div>259 <div class="key">6</div>260 <div class="key">7</div>261 <div class="key">8</div>262 <div class="key">9</div>263 <div class="key">0</div>264 </div>265 266 <!-- QWERTY row -->267 <div class="row">268 <div class="key">Q</div>269 <div class="key">W</div>270 <div class="key">E</div>271 <div class="key">R</div>272 <div class="key">T</div>273 <div class="key">Y</div>274 <div class="key">U</div>275 <div class="key">I</div>276 <div class="key">O</div>277 <div class="key">P</div>278 </div>279 280 <!-- ASDF row -->281 <div class="row">282 <div class="key">A</div>283 <div class="key">S</div>284 <div class="key">D</div>285 <div class="key">F</div>286 <div class="key">G</div>287 <div class="key">H</div>288 <div class="key">J</div>289 <div class="key">K</div>290 <div class="key">L</div>291 </div>292 293 <!-- ZXCV row -->294 <div class="row">295 <div class="key dark">⇧</div>296 <div class="key">Z</div>297 <div class="key">X</div>298 <div class="key">C</div>299 <div class="key">V</div>300 <div class="key">B</div>301 <div class="key">N</div>302 <div class="key">M</div>303 <div class="key dark">304 <svg viewBox="0 0 24 24" fill="#fff"><path d="M6 6l12 12H6l12-12z"/></svg>305 </div>306 </div>307 308 <!-- Bottom row -->309 <div class="row">310 <div class="key wide">?123</div>311 <div class="key wide">,</div>312 <div class="key wide">😊</div>313 <div class="key extra-wide"></div>314 <div class="key wide">.</div>315 <div class="enter">✓</div>316 </div>317 </div>318 319</div>320</body>321</html>