GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Gallery - New Album Dialog</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #0A0A0A;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 color: #FFFFFF;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 }29 .status-time {30 font-size: 38px;31 font-weight: 600;32 letter-spacing: 0.5px;33 }34 .status-icons {35 margin-left: auto;36 display: flex;37 align-items: center;38 gap: 22px;39 }40 .status-dot {41 width: 12px; height: 12px; background: #FFFFFF; border-radius: 50%;42 opacity: 0.9;43 }44 .icon-signal, .icon-wifi, .icon-battery {45 width: 40px; height: 26px;46 }47 48 /* Header: selection */49 .header {50 position: absolute;51 top: 120px;52 left: 0;53 width: 1080px;54 height: 100px;55 display: flex;56 align-items: center;57 padding: 0 28px;58 box-sizing: border-box;59 color: #EAEAEA;60 }61 .close-btn {62 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;63 margin-right: 20px;64 }65 .header-title {66 font-size: 44px;67 font-weight: 600;68 }69 70 /* Grid of thumbnails */71 .grid {72 position: absolute;73 top: 240px;74 left: 0;75 width: 1080px;76 padding: 24px;77 box-sizing: border-box;78 display: grid;79 grid-template-columns: repeat(3, 1fr);80 grid-auto-rows: 300px;81 gap: 24px;82 }83 .thumb {84 position: relative;85 background: #E0E0E0;86 border: 1px solid #BDBDBD;87 display: flex;88 align-items: center;89 justify-content: center;90 color: #757575;91 font-size: 28px;92 letter-spacing: 0.3px;93 overflow: hidden;94 }95 .check-wrap {96 position: absolute;97 top: 12px;98 right: 12px;99 width: 50px; height: 50px;100 background: rgba(0,0,0,0.35);101 border-radius: 10px;102 display: flex; align-items: center; justify-content: center;103 }104 .check-icon {105 width: 36px; height: 36px;106 }107 108 /* Bottom action bar */109 .actions {110 position: absolute;111 bottom: 760px; /* sits above ad and keyboard */112 left: 0;113 width: 1080px;114 height: 120px;115 display: flex;116 align-items: center;117 justify-content: space-around;118 color: #EDEDED;119 }120 .action {121 display: flex;122 flex-direction: column;123 align-items: center;124 gap: 10px;125 }126 .action svg { width: 56px; height: 56px; }127 .action-label { font-size: 28px; color: #DADADA; }128 129 /* Ad banner */130 .ad-banner {131 position: absolute;132 bottom: 670px;133 left: 20px;134 width: 1040px;135 height: 120px;136 background: #F1F1F1;137 border: 1px solid #D0D0D0;138 border-radius: 12px;139 display: flex;140 align-items: center;141 padding: 16px 24px;142 box-sizing: border-box;143 gap: 18px;144 z-index: 10;145 }146 .ad-logo {147 width: 120px; height: 88px; background: #E0E0E0; border: 1px solid #BDBDBD;148 display: flex; align-items: center; justify-content: center; color: #666; font-size: 22px;149 border-radius: 8px;150 }151 .ad-text { flex: 1; color: #333; }152 .ad-title { font-size: 34px; font-weight: 700; color: #2E7D32; }153 .ad-sub { font-size: 26px; color: #777; }154 .ad-arrow {155 width: 50px; height: 50px;156 }157 158 /* Dim overlay + modal dialog */159 .modal-overlay {160 position: absolute;161 top: 0; left: 0;162 width: 1080px; height: 2400px;163 background: rgba(0,0,0,0.50);164 z-index: 5;165 }166 .modal {167 position: absolute;168 left: 70px;169 top: 920px;170 width: 940px;171 height: 430px;172 background: #2C2C2C;173 border-radius: 28px;174 box-shadow: 0 20px 50px rgba(0,0,0,0.6);175 color: #FFFFFF;176 z-index: 6;177 padding: 34px;178 box-sizing: border-box;179 }180 .modal-title {181 font-size: 44px;182 font-weight: 600;183 margin-bottom: 40px;184 }185 .input-row {186 position: relative;187 margin: 10px 6px 50px 6px;188 height: 68px;189 }190 .input-placeholder {191 position: absolute; top: 0; left: 0;192 font-size: 32px; color: #AFAFAF;193 }194 .underline {195 position: absolute; bottom: 0; left: 0;196 width: 100%; height: 2px; background: #9E9E9E;197 }198 .underline-accent {199 position: absolute; bottom: 0; left: 0;200 width: 110px; height: 2px; background: #66D9B8;201 }202 .modal-actions {203 position: absolute;204 bottom: 24px; left: 34px; right: 34px;205 display: flex; align-items: center; justify-content: space-between;206 }207 .modal-btn {208 font-size: 36px; color: #FFFFFF;209 }210 .modal-btn.right { text-transform: lowercase; }211 212 /* Keyboard */213 .keyboard {214 position: absolute;215 bottom: 40px;216 left: 0;217 width: 1080px;218 height: 760px;219 background: #1B1B1B;220 z-index: 10;221 box-shadow: 0 -10px 20px rgba(0,0,0,0.4);222 }223 .kbd-top {224 height: 100px;225 display: flex; align-items: center; gap: 40px;226 padding: 0 30px; box-sizing: border-box;227 }228 .kbd-top .round {229 width: 72px; height: 72px; border-radius: 20px; background: #2A2A2A; display: flex; align-items: center; justify-content: center; color: #DDD; font-size: 26px;230 }231 .kbd-rows { padding: 6px 16px; box-sizing: border-box; }232 .row { display: flex; gap: 14px; justify-content: center; margin: 18px 0; }233 .key {234 height: 110px; min-width: 90px;235 background: #292929; color: #F2F2F2;236 border-radius: 18px; display: flex; align-items: center; justify-content: center;237 font-size: 40px; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);238 }239 .key.wide { min-width: 140px; }240 .space { flex: 1; height: 110px; background: #292929; border-radius: 22px; }241 .enter {242 min-width: 150px; height: 110px;243 background: #C8FAD9; color: #1A1A1A; border-radius: 20px; font-size: 40px; font-weight: 600;244 }245 .kbd-bottom {246 display: flex; align-items: center; gap: 14px; padding: 0 18px; box-sizing: border-box;247 }248 .key.alt { background: #A8B8A2; color: #0B0B0B; font-weight: 600; }249 250 /* Gesture bar */251 .gesture {252 position: absolute; bottom: 12px; left: 440px;253 width: 200px; height: 10px; background: #FFFFFF; border-radius: 8px; opacity: 0.9;254 z-index: 12;255 }256</style>257</head>258<body>259<div id="render-target">260 261 <!-- Status bar -->262 <div class="status-bar">263 <div class="status-time">2:05</div>264 <div class="status-icons">265 <!-- simple placeholders for status icons -->266 <svg class="icon-signal" viewBox="0 0 40 26">267 <rect x="0" y="18" width="6" height="8" fill="#FFFFFF" opacity="0.9"></rect>268 <rect x="10" y="14" width="6" height="12" fill="#FFFFFF" opacity="0.9"></rect>269 <rect x="20" y="10" width="6" height="16" fill="#FFFFFF" opacity="0.9"></rect>270 <rect x="30" y="6" width="6" height="20" fill="#FFFFFF" opacity="0.9"></rect>271 </svg>272 <svg class="icon-wifi" viewBox="0 0 40 26">273 <path d="M2 10 C10 2,30 2,38 10" stroke="#FFFFFF" stroke-width="3" fill="none" />274 <path d="M7 15 C14 9,26 9,33 15" stroke="#FFFFFF" stroke-width="3" fill="none" />275 <circle cx="20" cy="20" r="3" fill="#FFFFFF"></circle>276 </svg>277 <svg class="icon-battery" viewBox="0 0 40 26">278 <rect x="2" y="6" width="32" height="14" stroke="#FFFFFF" stroke-width="2" fill="none"></rect>279 <rect x="36" y="10" width="3" height="6" fill="#FFFFFF"></rect>280 <rect x="5" y="8" width="26" height="10" fill="#FFFFFF"></rect>281 </svg>282 </div>283 </div>284 285 <!-- Header -->286 <div class="header">287 <div class="close-btn">288 <svg viewBox="0 0 60 60">289 <line x1="14" y1="14" x2="46" y2="46" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"></line>290 <line x1="46" y1="14" x2="14" y2="46" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round"></line>291 </svg>292 </div>293 <div class="header-title">5 Selected</div>294 </div>295 296 <!-- Grid -->297 <div class="grid">298 <div class="thumb"><span>[IMG: Road]</span>299 <div class="check-wrap">300 <svg class="check-icon" viewBox="0 0 36 36">301 <rect x="3" y="3" width="30" height="30" rx="6" ry="6" fill="none" stroke="#D0D0D0" stroke-width="3"/>302 <path d="M10 18 L16 24 L26 12" stroke="#D0D0D0" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>303 </svg>304 </div>305 </div>306 <div class="thumb"><span>[IMG: Grassland]</span>307 <div class="check-wrap">308 <svg class="check-icon" viewBox="0 0 36 36">309 <rect x="3" y="3" width="30" height="30" rx="6" ry="6" fill="none" stroke="#D0D0D0" stroke-width="3"/>310 <path d="M10 18 L16 24 L26 12" stroke="#D0D0D0" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>311 </svg>312 </div>313 </div>314 <div class="thumb"><span>[IMG: Plant Close]</span>315 <div class="check-wrap">316 <svg class="check-icon" viewBox="0 0 36 36">317 <rect x="3" y="3" width="30" height="30" rx="6" ry="6" fill="none" stroke="#D0D0D0" stroke-width="3"/>318 <path d="M10 18 L16 24 L26 12" stroke="#D0D0D0" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>319 </svg>320 </div>321 </div>322 323 <div class="thumb"><span>[IMG: Forest Hill]</span>324 <div class="check-wrap">325 <svg class="check-icon" viewBox="0 0 36 36">326 <rect x="3" y="3" width="30" height="30" rx="6" ry="6" fill="none" stroke="#D0D0D0" stroke-width="3"/>327 <path d="M10 18 L16 24 L26 12" stroke="#D0D0D0" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>328 </svg>329 </div>330 </div>331 <div class="thumb"><span>[IMG: Desk]</span>332 <div class="check-wrap">333 <svg class="check-icon" viewBox="0 0 36 36">334 <rect x="3" y="3" width="30" height="30" rx="6" ry="6" fill="none" stroke="#D0D0D0" stroke-width="3"/>335 <path d="M10 18 L16 24 L26 12" stroke="#D0D0D0" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>336 </svg>337 </div>338 </div>339 <div class="thumb"><span>[IMG: Legs]</span>340 <div class="check-wrap">341 <svg class="check-icon" viewBox="0 0 36 36">342 <rect x="3" y="3" width="30" height="30" rx="6" ry="6" fill="none" stroke="#D0D0D0" stroke-width="3"/>343 <path d="M10 18 L16 24 L26 12" stroke="#D0D0D0" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>344 </svg>345 </div>346 </div>347 </div>348 349 <!-- Actions -->350 <div class="actions">351 <div class="action">352 <svg viewBox="0 0 56 56">353 <path d="M28 8 L28 34" stroke="#EDEDED" stroke-width="4" stroke-linecap="round"/>354 <path d="M18 18 L28 8 L38 18" stroke="#EDEDED" stroke-width="4" stroke-linecap="round" fill="none"/>355 <rect x="12" y="34" width="32" height="14" rx="6" ry="6" fill="none" stroke="#EDEDED" stroke-width="3"/>356 </svg>357 <div class="action-label">Share</div>358 </div>359 <div class="action">360 <svg viewBox="0 0 56 56">361 <rect x="14" y="18" width="28" height="28" rx="4" ry="4" stroke="#EDEDED" stroke-width="4" fill="none"/>362 <rect x="20" y="10" width="16" height="6" fill="none" stroke="#EDEDED" stroke-width="4"/>363 </svg>364 <div class="action-label">Delete</div>365 </div>366 <div class="action">367 <svg viewBox="0 0 56 56">368 <rect x="12" y="12" width="24" height="24" fill="none" stroke="#EDEDED" stroke-width="3"/>369 <rect x="20" y="20" width="24" height="24" fill="none" stroke="#EDEDED" stroke-width="3"/>370 </svg>371 <div class="action-label">Copy</div>372 </div>373 <div class="action">374 <svg viewBox="0 0 56 56">375 <path d="M14 28 H36" stroke="#EDEDED" stroke-width="4" stroke-linecap="round"/>376 <path d="M30 20 L38 28 L30 36" stroke="#EDEDED" stroke-width="4" stroke-linecap="round" fill="none"/>377 </svg>378 <div class="action-label">Move</div>379 </div>380 </div>381 382 <!-- Ad banner -->383 <div class="ad-banner">384 <div class="ad-logo">[IMG: Ad Logo]</div>385 <div class="ad-text">386 <div class="ad-title">Noida OPEN 10:30AM–9PM</div>387 <div class="ad-sub">Gate Number 2, Metro Station, Shop No...</div>388 </div>389 <svg class="ad-arrow" viewBox="0 0 50 50">390 <path d="M18 12 L32 25 L18 38" stroke="#2E7D32" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>391 </svg>392 </div>393 394 <!-- Dim overlay and modal -->395 <div class="modal-overlay"></div>396 <div class="modal">397 <div class="modal-title">New album</div>398 <div class="input-row">399 <div class="input-placeholder">Enter album name</div>400 <div class="underline"></div>401 <div class="underline-accent"></div>402 </div>403 <div class="modal-actions">404 <div class="modal-btn">Cancel</div>405 <div class="modal-btn right">ok</div>406 </div>407 </div>408 409 <!-- Keyboard -->410 <div class="keyboard">411 <div class="kbd-top">412 <div class="round">↕</div>413 <div class="round">🙂</div>414 <div class="round">GIF</div>415 <div class="round">⚙</div>416 <div class="round">Gᴛ</div>417 <div class="round">🎨</div>418 </div>419 <div class="kbd-rows">420 <div class="row">421 <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>422 <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>423 </div>424 <div class="row">425 <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>426 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>427 </div>428 <div class="row">429 <div class="key wide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div>430 <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>431 <div class="key wide">⌫</div>432 </div>433 <div class="row kbd-bottom">434 <div class="key alt">?123</div>435 <div class="key">,</div>436 <div class="key">🙂</div>437 <div class="space"></div>438 <div class="key">.</div>439 <div class="enter">↵</div>440 </div>441 </div>442 </div>443 444 <!-- Gesture bar -->445 <div class="gesture"></div>446</div>447</body>448</html>