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>Gallery Selection Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #000000;15 font-family: Arial, Helvetica, sans-serif;16 color: #FFFFFF;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0;23 width: 100%;24 height: 90px;25 padding: 0 28px;26 display: flex;27 align-items: center;28 box-sizing: border-box;29 color: #FFFFFF;30 font-size: 34px;31 letter-spacing: 0.5px;32 }33 .status-bar .right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 22px;38 }39 .status-icon svg { display: block; }40 41 /* Title bar */42 .title-bar {43 position: absolute;44 top: 90px; left: 0;45 width: 100%;46 height: 130px;47 display: flex;48 align-items: center;49 padding: 0 28px;50 box-sizing: border-box;51 color: #FFFFFF;52 }53 .back-btn {54 width: 64px; height: 64px;55 display: inline-flex;56 justify-content: center;57 align-items: center;58 margin-right: 18px;59 }60 .title-text {61 font-size: 56px;62 font-weight: 600;63 }64 65 /* Grid */66 .grid {67 position: absolute;68 top: 220px;69 left: 0; right: 0;70 padding: 24px;71 box-sizing: border-box;72 display: grid;73 grid-template-columns: repeat(3, 1fr);74 grid-gap: 18px;75 }76 .thumb {77 position: relative;78 width: 100%;79 /* square tiles */80 height: 0;81 padding-bottom: 100%;82 background: #E0E0E0;83 border: 1px solid #BDBDBD;84 overflow: hidden;85 }86 .img-label {87 position: absolute;88 inset: 0;89 display: flex;90 justify-content: center;91 align-items: center;92 color: #757575;93 font-size: 30px;94 text-align: center;95 padding: 10px;96 box-sizing: border-box;97 }98 .checkbox {99 position: absolute;100 top: 16px; right: 16px;101 width: 56px; height: 56px;102 border-radius: 10px;103 border: 4px solid rgba(255,255,255,0.95);104 display: flex;105 justify-content: center;106 align-items: center;107 background: transparent;108 }109 .checkbox svg { width: 34px; height: 34px; opacity: 0; }110 .thumb.selected .checkbox {111 background: #2ecc71;112 border-color: #d9f9e5;113 }114 .thumb.selected .checkbox svg { opacity: 1; }115 116 /* Bottom action bar */117 .actions {118 position: absolute;119 left: 0; right: 0;120 bottom: 170px; /* leaves room for ad */121 height: 230px;122 display: flex;123 justify-content: space-around;124 align-items: center;125 color: #EDEDED;126 }127 .action {128 width: 180px;129 text-align: center;130 }131 .action svg {132 display: block;133 margin: 0 auto 18px;134 }135 .action span {136 font-size: 34px;137 color: #E0E0E0;138 }139 140 /* Ad banner */141 .ad-banner {142 position: absolute;143 left: 0; bottom: 0;144 width: 100%;145 height: 170px;146 background: #FFFFFF;147 color: #0a2540;148 box-sizing: border-box;149 padding: 22px 28px;150 }151 .ad-close {152 position: absolute;153 right: 18px; top: 12px;154 width: 44px; height: 44px;155 border-radius: 22px;156 background: #E6F2FA;157 display: flex;158 justify-content: center;159 align-items: center;160 }161 .ad-content {162 display: flex;163 height: 100%;164 align-items: center;165 gap: 20px;166 }167 .ad-badge {168 font-size: 24px;169 color: #1976d2;170 border: 1px solid #BBDEFB;171 padding: 6px 10px;172 border-radius: 6px;173 white-space: nowrap;174 }175 .ad-headline {176 font-size: 42px;177 color: #0a54c5;178 font-weight: 700;179 white-space: nowrap;180 }181 .ad-sub {182 font-size: 26px;183 color: #4a4a4a;184 }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- STATUS BAR -->191 <div class="status-bar">192 <div class="time">2:03</div>193 <div class="right">194 <div class="status-icon">195 <!-- Do not disturb: circle with horizontal bar -->196 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">197 <circle cx="12" cy="12" r="10" stroke="#FFFFFF" stroke-width="2"/>198 <rect x="6" y="11" width="12" height="2" fill="#FFFFFF"/>199 </svg>200 </div>201 <div class="status-icon">202 <!-- WiFi -->203 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">204 <path d="M2 8c5.5-4.5 14.5-4.5 20 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>205 <path d="M5 12c3.5-3 10.5-3 14 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>206 <path d="M8 16c2-1.8 6-1.8 8 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>207 <circle cx="12" cy="19" r="1.6" fill="#FFFFFF"/>208 </svg>209 </div>210 <div class="status-icon">211 <!-- Battery -->212 <svg width="44" height="36" viewBox="0 0 28 16" fill="none">213 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#FFFFFF" stroke-width="2"/>214 <rect x="3" y="5" width="14" height="6" rx="1" fill="#FFFFFF"/>215 <rect x="23.5" y="6" width="3" height="4" rx="1" fill="#FFFFFF"/>216 </svg>217 </div>218 </div>219 </div>220 221 <!-- TITLE BAR -->222 <div class="title-bar">223 <div class="back-btn" aria-label="Back">224 <svg width="64" height="64" viewBox="0 0 24 24">225 <path d="M4 4 L20 20 M20 4 L4 20" stroke="#FFFFFF" stroke-width="2.8" stroke-linecap="round"/>226 </svg>227 </div>228 <div class="title-text">1 Selected</div>229 </div>230 231 <!-- IMAGE GRID -->232 <div class="grid">233 <div class="thumb selected">234 <div class="img-label">[IMG: Road beside trees]</div>235 <div class="checkbox" aria-label="Selected">236 <svg viewBox="0 0 24 24">237 <path d="M5 12l4 4 10-10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>238 </svg>239 </div>240 </div>241 <div class="thumb">242 <div class="img-label">[IMG: Dry field top view]</div>243 <div class="checkbox">244 <svg viewBox="0 0 24 24">245 <path d="M5 12l4 4 10-10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>246 </svg>247 </div>248 </div>249 <div class="thumb">250 <div class="img-label">[IMG: Plant stem close-up]</div>251 <div class="checkbox">252 <svg viewBox="0 0 24 24">253 <path d="M5 12l4 4 10-10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 </div>257 258 <div class="thumb">259 <div class="img-label">[IMG: Green forest panorama]</div>260 <div class="checkbox">261 <svg viewBox="0 0 24 24">262 <path d="M5 12l4 4 10-10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>263 </svg>264 </div>265 </div>266 <div class="thumb">267 <div class="img-label">[IMG: Trees and fields]</div>268 <div class="checkbox">269 <svg viewBox="0 0 24 24">270 <path d="M5 12l4 4 10-10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>271 </svg>272 </div>273 </div>274 <div class="thumb">275 <div class="img-label">[IMG: Office desk with chairs]</div>276 <div class="checkbox">277 <svg viewBox="0 0 24 24">278 <path d="M5 12l4 4 10-10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>279 </svg>280 </div>281 </div>282 283 <div class="thumb">284 <div class="img-label">[IMG: Workstation under desk]</div>285 <div class="checkbox">286 <svg viewBox="0 0 24 24">287 <path d="M5 12l4 4 10-10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>288 </svg>289 </div>290 </div>291 <div class="thumb">292 <div class="img-label">[IMG: Feet near chair wheels]</div>293 <div class="checkbox">294 <svg viewBox="0 0 24 24">295 <path d="M5 12l4 4 10-10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>296 </svg>297 </div>298 </div>299 <div class="thumb">300 <div class="img-label">[IMG: Office floor close-up]</div>301 <div class="checkbox">302 <svg viewBox="0 0 24 24">303 <path d="M5 12l4 4 10-10" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>304 </svg>305 </div>306 </div>307 </div>308 309 <!-- ACTIONS -->310 <div class="actions">311 <div class="action">312 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">313 <circle cx="6" cy="12" r="2" fill="#FFFFFF"/>314 <circle cx="18" cy="6" r="2" fill="#FFFFFF"/>315 <circle cx="18" cy="18" r="2" fill="#FFFFFF"/>316 <path d="M7.7 11l7.2-4.5M7.7 13l7.2 4.5" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>317 </svg>318 <span>Share</span>319 </div>320 <div class="action">321 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">322 <path d="M4 7h16" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>323 <rect x="6" y="7" width="12" height="12" rx="2" stroke="#FFFFFF" stroke-width="2"/>324 <rect x="9" y="3" width="6" height="3" rx="1" fill="#FFFFFF"/>325 </svg>326 <span>Delete</span>327 </div>328 <div class="action">329 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">330 <rect x="6" y="6" width="12" height="12" rx="2" stroke="#FFFFFF" stroke-width="2"/>331 <rect x="3" y="9" width="12" height="12" rx="2" stroke="#FFFFFF" stroke-width="2" opacity="0.5"/>332 </svg>333 <span>Copy</span>334 </div>335 <div class="action">336 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">337 <path d="M4 12h12" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>338 <path d="M12 6l6 6-6 6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>339 </svg>340 <span>Move</span>341 </div>342 </div>343 344 <!-- AD BANNER -->345 <div class="ad-banner">346 <div class="ad-close">347 <svg width="20" height="20" viewBox="0 0 24 24">348 <path d="M5 5L19 19M19 5L5 19" stroke="#1976d2" stroke-width="2" stroke-linecap="round"/>349 </svg>350 </div>351 <div class="ad-content">352 <div class="ad-badge">Tata AIA Life Insurance</div>353 <div class="ad-headline">Get a ₹1,00,00,000 Life Cover</div>354 <div class="ad-sub">#TataAIAKaBharosa</div>355 </div>356 </div>357 358</div>359</body>360</html>