GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Gallery Selection UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 100px;24    padding: 0 32px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #fff;30    font-size: 42px;31    letter-spacing: 0.5px;32  }33  .sb-icons {34    display: flex;35    align-items: center;36    gap: 18px;37  }38  .sb-icon svg { display: block; }39 40  /* Header */41  .header {42    position: absolute;43    top: 100px;44    left: 0;45    width: 1080px;46    height: 130px;47    display: flex;48    align-items: center;49    gap: 20px;50    padding: 0 32px;51    box-sizing: border-box;52  }53  .close-btn {54    width: 64px;55    height: 64px;56    display: flex;57    align-items: center;58    justify-content: center;59  }60  .title {61    font-size: 64px;62    font-weight: 600;63  }64 65  /* Grid of images */66  .grid {67    position: absolute;68    top: 230px;69    left: 0;70    width: 1080px;71    padding: 0 24px;72    box-sizing: border-box;73    display: grid;74    grid-template-columns: repeat(3, 1fr);75    grid-auto-rows: 328px;76    gap: 24px;77  }78  .tile {79    position: relative;80    border-radius: 6px;81    overflow: hidden;82    background: #111;83  }84  .img {85    width: 100%;86    height: 100%;87    background: #E0E0E0;88    border: 1px solid #BDBDBD;89    display: flex;90    align-items: center;91    justify-content: center;92    color: #757575;93    font-size: 30px;94    text-align: center;95  }96  .checkbox {97    position: absolute;98    top: 14px;99    right: 14px;100    width: 60px;101    height: 60px;102    border: 4px solid #fff;103    border-radius: 14px;104    background: rgba(0,0,0,0.35);105    display: flex;106    align-items: center;107    justify-content: center;108    box-sizing: border-box;109  }110  .checkbox.unselected {111    background: rgba(0,0,0,0.2);112  }113  .span-2 {114    grid-column: span 2;115  }116 117  /* Bottom actions */118  .actions {119    position: absolute;120    bottom: 160px;121    left: 0;122    width: 1080px;123    height: 180px;124    display: flex;125    align-items: center;126    justify-content: space-around;127    color: #fff;128  }129  .action {130    width: 160px;131    text-align: center;132  }133  .action svg { display: block; margin: 0 auto 14px auto; }134  .action label {135    font-size: 36px;136    color: #E0E0E0;137  }138 139  /* Ad banner */140  .ad {141    position: absolute;142    bottom: 0;143    left: 0;144    width: 1080px;145    height: 160px;146    background: #fff;147    color: #000;148    box-sizing: border-box;149    padding: 20px 28px;150    display: flex;151    align-items: center;152    justify-content: space-between;153  }154  .ad-left {155    display: flex;156    align-items: center;157    gap: 20px;158  }159  .ad-logo {160    width: 120px;161    height: 100px;162    background: #E0E0E0;163    border: 1px solid #BDBDBD;164    display: flex;165    align-items: center;166    justify-content: center;167    color: #757575;168    font-size: 22px;169  }170  .ad-text {171    line-height: 1.25;172  }173  .ad-title {174    font-size: 40px;175    font-weight: 700;176    color: #000;177  }178  .ad-sub {179    font-size: 34px;180    color: #2b73ff;181    margin-top: 6px;182  }183  .ad-right {184    display: flex;185    align-items: center;186    gap: 24px;187  }188  .ad-close {189    width: 40px;190    height: 40px;191    border-radius: 40px;192    border: 2px solid #999;193    color: #666;194    display: flex;195    align-items: center;196    justify-content: center;197    font-size: 28px;198  }199</style>200</head>201<body>202<div id="render-target">203 204  <!-- Status bar -->205  <div class="status-bar">206    <div class="sb-time">2:03</div>207    <div class="sb-icons">208      <div class="sb-icon">209        <!-- Do not disturb icon -->210        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">211          <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"/>212          <rect x="6" y="11" width="12" height="2" fill="#fff"/>213        </svg>214      </div>215      <div class="sb-icon">216        <!-- Wifi icon -->217        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">218          <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>219          <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>220          <path d="M8 15c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>221          <circle cx="12" cy="18" r="1.5" fill="#fff"/>222        </svg>223      </div>224      <div class="sb-icon">225        <!-- Battery icon -->226        <svg width="50" height="42" viewBox="0 0 28 16" fill="none">227          <rect x="1" y="1" width="22" height="14" rx="2" stroke="#fff" stroke-width="2"/>228          <rect x="24" y="5" width="3" height="6" rx="1.2" fill="#fff"/>229          <rect x="3" y="3" width="16" height="10" fill="#fff"/>230        </svg>231      </div>232    </div>233  </div>234 235  <!-- Header -->236  <div class="header">237    <div class="close-btn">238      <svg width="64" height="64" viewBox="0 0 24 24">239        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#fff" stroke-width="2" stroke-linecap="round"/>240      </svg>241    </div>242    <div class="title">4 Selected</div>243  </div>244 245  <!-- Grid -->246  <div class="grid">247    <!-- Row 1 -->248    <div class="tile">249      <div class="img">[IMG: Road View]</div>250      <div class="checkbox">251        <svg width="36" height="36" viewBox="0 0 24 24">252          <path d="M5 12 L10 17 L19 7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>253        </svg>254      </div>255    </div>256    <div class="tile">257      <div class="img">[IMG: Dry Field Vegetation]</div>258      <div class="checkbox">259        <svg width="36" height="36" viewBox="0 0 24 24">260          <path d="M5 12 L10 17 L19 7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>261        </svg>262      </div>263    </div>264    <div class="tile">265      <div class="img">[IMG: Plant Macro]</div>266      <div class="checkbox">267        <svg width="36" height="36" viewBox="0 0 24 24">268          <path d="M5 12 L10 17 L19 7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>269        </svg>270      </div>271    </div>272 273    <!-- Row 2 -->274    <div class="tile">275      <div class="img">[IMG: Forest Aerial Left]</div>276      <div class="checkbox">277        <svg width="36" height="36" viewBox="0 0 24 24">278          <path d="M5 12 L10 17 L19 7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>279        </svg>280      </div>281    </div>282    <div class="tile">283      <div class="img">[IMG: Forest Aerial Right]</div>284      <div class="checkbox unselected"></div>285    </div>286    <div class="tile">287      <div class="img">[IMG: Office Desk Top]</div>288      <div class="checkbox">289        <svg width="36" height="36" viewBox="0 0 24 24">290          <path d="M5 12 L10 17 L19 7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>291        </svg>292      </div>293    </div>294 295    <!-- Row 3 (left spans 2 columns) -->296    <div class="tile span-2">297      <div class="img">[IMG: Office Under Desk]</div>298      <div class="checkbox">299        <svg width="36" height="36" viewBox="0 0 24 24">300          <path d="M5 12 L10 17 L19 7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>301        </svg>302      </div>303    </div>304    <div class="tile">305      <div class="img">[IMG: Legs with Sneakers]</div>306      <div class="checkbox unselected"></div>307    </div>308  </div>309 310  <!-- Bottom actions -->311  <div class="actions">312    <div class="action">313      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">314        <path d="M4 12c6-6 10-6 16 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>315        <path d="M8 13v5l4-2 4 2v-5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>316      </svg>317      <label>Share</label>318    </div>319    <div class="action">320      <svg width="64" height="64" viewBox="0 0 24 24">321        <rect x="5" y="3" width="14" height="18" rx="2" stroke="#fff" stroke-width="2" fill="none"/>322        <rect x="9" y="1" width="6" height="4" rx="1" fill="#fff"/>323        <path d="M8 10 H16" stroke="#fff" stroke-width="2" stroke-linecap="round"/>324      </svg>325      <label>Delete</label>326    </div>327    <div class="action">328      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">329        <rect x="3" y="4" width="9" height="12" rx="1.5" stroke="#fff" stroke-width="2"/>330        <rect x="12" y="8" width="9" height="12" rx="1.5" stroke="#fff" stroke-width="2"/>331      </svg>332      <label>Copy</label>333    </div>334    <div class="action">335      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">336        <path d="M4 12h10" stroke="#fff" stroke-width="2" stroke-linecap="round"/>337        <path d="M11 7l5 5-5 5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>338        <rect x="4" y="4" width="6" height="16" rx="2" stroke="#fff" stroke-width="2"/>339      </svg>340      <label>Move</label>341    </div>342  </div>343 344  <!-- Ad banner -->345  <div class="ad">346    <div class="ad-left">347      <div class="ad-logo">[IMG: Organic India]</div>348      <div class="ad-text">349        <div class="ad-title">Experience Organic India Today</div>350        <div class="ad-sub">Organic India Store - Sector 18, Noida</div>351      </div>352    </div>353    <div class="ad-right">354      <div class="ad-close">×</div>355      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">356        <path d="M7 5l10 7-10 7V5z" fill="#2b73ff"/>357      </svg>358    </div>359  </div>360 361</div>362</body>363</html>