GD-ML/AndroidCode

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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16    color: #FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 110px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 32px;30    box-sizing: border-box;31    color: #fff;32    font-size: 40px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .status-icon svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 2.5; }40 41  /* Header */42  .header {43    position: relative;44    margin-top: 120px;45    padding: 0 32px;46    display: flex;47    align-items: center;48    gap: 20px;49  }50  .header .title {51    font-size: 54px;52    font-weight: 600;53    letter-spacing: 0.5px;54  }55  .close-icon {56    width: 56px;57    height: 56px;58  }59  .close-icon svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 8; }60 61  /* Grid */62  .grid {63    margin-top: 24px;64    padding: 0 24px;65    display: grid;66    grid-template-columns: repeat(3, 1fr);67    gap: 24px;68  }69  .tile {70    position: relative;71    border-radius: 10px;72    overflow: hidden;73    background: #111;74  }75  .image-placeholder {76    background: #E0E0E0;77    border: 1px solid #BDBDBD;78    color: #757575;79    display: flex;80    align-items: center;81    justify-content: center;82    font-size: 34px;83    text-align: center;84    aspect-ratio: 1 / 1;85  }86 87  /* Selection badges */88  .badge {89    position: absolute;90    top: 14px;91    right: 14px;92    width: 54px;93    height: 54px;94    border-radius: 10px;95    display: flex;96    align-items: center;97    justify-content: center;98    box-sizing: border-box;99  }100  .badge.unselected {101    border: 3px solid #FFFFFF;102    background: transparent;103  }104  .badge.selected {105    border: 3px solid #FFFFFF;106    background: #1DA1F2;107  }108  .badge svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 5; }109 110  /* Actions row */111  .actions {112    position: absolute;113    bottom: 200px;114    left: 0;115    width: 100%;116    height: 200px;117    display: flex;118    align-items: center;119    justify-content: space-around;120    padding: 0 40px;121    box-sizing: border-box;122    color: #fff;123  }124  .action-item {125    display: flex;126    flex-direction: column;127    align-items: center;128    gap: 16px;129    font-size: 36px;130  }131  .action-icon {132    width: 64px; height: 64px;133  }134  .action-icon svg { width: 64px; height: 64px; stroke: #fff; stroke-width: 5; fill: none; }135 136  /* Ad banner */137  .ad-banner {138    position: absolute;139    bottom: 0;140    left: 0;141    width: 100%;142    height: 200px;143    background: #FFFFFF;144    color: #222;145    box-shadow: 0 -2px 10px rgba(0,0,0,0.25);146    box-sizing: border-box;147    padding: 20px 28px;148    display: flex;149    align-items: center;150    gap: 24px;151  }152  .ad-left {153    display: flex;154    align-items: center;155    gap: 16px;156  }157  .ad-logo {158    width: 96px; height: 96px;159    background: #E0E0E0; border: 1px solid #BDBDBD;160    display: flex; align-items: center; justify-content: center;161    color: #757575; font-size: 20px; border-radius: 8px;162  }163  .ad-text {164    display: flex; flex-direction: column;165  }166  .ad-title { font-size: 40px; font-weight: 600; color: #111; }167  .ad-link { font-size: 34px; color: #1A73E8; margin-top: 6px; }168  .ad-right {169    margin-left: auto;170    display: flex;171    align-items: center;172    gap: 16px;173  }174  .ad-arrow {175    width: 84px; height: 84px; background: #4285F4; border-radius: 12px;176    display: flex; align-items: center; justify-content: center;177  }178  .ad-arrow svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 8; }179  .ad-close {180    position: absolute;181    bottom: 10px; left: 10px;182    width: 34px; height: 34px; border-radius: 50%;183    border: 2px solid #9E9E9E; color: #9E9E9E;184    display: flex; align-items: center; justify-content: center;185    font-size: 22px;186  }187 188  /* Provide extra bottom padding to grid so content doesn't overlap actions */189  .spacer {190    height: 420px;191  }192</style>193</head>194<body>195<div id="render-target">196 197  <!-- Status bar -->198  <div class="status-bar">199    <div class="status-left">2:03</div>200    <div class="status-right">201      <div class="status-icon">202        <svg viewBox="0 0 24 24">203          <circle cx="12" cy="12" r="9"></circle>204        </svg>205      </div>206      <div class="status-icon">207        <svg viewBox="0 0 24 24">208          <path d="M3 12h18"></path>209          <path d="M12 3v18"></path>210        </svg>211      </div>212      <div class="status-icon">213        <svg viewBox="0 0 24 24">214          <rect x="3" y="7" width="18" height="10" rx="2"></rect>215          <path d="M21 10v4"></path>216        </svg>217      </div>218      <div class="status-icon">219        <svg viewBox="0 0 24 24">220          <path d="M3 18c4-6 14-6 18 0"></path>221          <circle cx="12" cy="18" r="2"></circle>222        </svg>223      </div>224      <div class="status-icon">225        <svg viewBox="0 0 24 24">226          <rect x="6" y="3" width="12" height="18" rx="3"></rect>227          <path d="M9 2h6"></path>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Header -->234  <div class="header">235    <div class="close-icon">236      <svg viewBox="0 0 24 24">237        <path d="M5 5 L19 19M19 5 L5 19"></path>238      </svg>239    </div>240    <div class="title">2 Selected</div>241  </div>242 243  <!-- Grid of images -->244  <div class="grid">245    <!-- Row 1 -->246    <div class="tile">247      <div class="image-placeholder">[IMG: Road view]</div>248      <div class="badge selected">249        <svg viewBox="0 0 24 24">250          <path d="M5 12l5 5 9-10"></path>251        </svg>252      </div>253    </div>254    <div class="tile">255      <div class="image-placeholder">[IMG: Dry field with shrubs]</div>256      <div class="badge selected">257        <svg viewBox="0 0 24 24">258          <path d="M5 12l5 5 9-10"></path>259        </svg>260      </div>261    </div>262    <div class="tile">263      <div class="image-placeholder">[IMG: Plant macro]</div>264      <div class="badge unselected"></div>265    </div>266 267    <!-- Row 2 -->268    <div class="tile">269      <div class="image-placeholder">[IMG: Forest landscape 1]</div>270      <div class="badge unselected"></div>271    </div>272    <div class="tile">273      <div class="image-placeholder">[IMG: Forest landscape 2]</div>274      <div class="badge unselected"></div>275    </div>276    <div class="tile">277      <div class="image-placeholder">[IMG: Office desk]</div>278      <div class="badge unselected"></div>279    </div>280 281    <!-- Row 3 -->282    <div class="tile">283      <div class="image-placeholder">[IMG: Under desk cables]</div>284      <div class="badge unselected"></div>285    </div>286    <div class="tile">287      <div class="image-placeholder">[IMG: Legs & shoes]</div>288      <div class="badge unselected"></div>289    </div>290    <div class="tile">291      <div class="image-placeholder">[IMG: Seat close-up]</div>292      <div class="badge unselected"></div>293    </div>294  </div>295 296  <div class="spacer"></div>297 298  <!-- Actions toolbar -->299  <div class="actions">300    <div class="action-item">301      <div class="action-icon">302        <svg viewBox="0 0 24 24">303          <circle cx="6" cy="17" r="3"></circle>304          <circle cx="18" cy="7" r="3"></circle>305          <circle cx="18" cy="17" r="3"></circle>306          <path d="M8.5 15L15.5 9"></path>307          <path d="M8.5 19L15.5 19"></path>308        </svg>309      </div>310      <div>Share</div>311    </div>312    <div class="action-item">313      <div class="action-icon">314        <svg viewBox="0 0 24 24">315          <path d="M6 7h12"></path>316          <path d="M8 7v-2h8v2"></path>317          <rect x="6" y="7" width="12" height="14" rx="2"></rect>318        </svg>319      </div>320      <div>Delete</div>321    </div>322    <div class="action-item">323      <div class="action-icon">324        <svg viewBox="0 0 24 24">325          <rect x="5" y="7" width="12" height="12" rx="2"></rect>326          <rect x="9" y="3" width="12" height="12" rx="2"></rect>327        </svg>328      </div>329      <div>Copy</div>330    </div>331    <div class="action-item">332      <div class="action-icon">333        <svg viewBox="0 0 24 24">334          <rect x="4" y="4" width="12" height="16" rx="2"></rect>335          <path d="M12 8h6v8"></path>336          <path d="M12 12l6-4"></path>337        </svg>338      </div>339      <div>Move</div>340    </div>341  </div>342 343  <!-- Ad banner -->344  <div class="ad-banner">345    <div class="ad-left">346      <div class="ad-logo">[IMG: Organic India]</div>347      <div class="ad-text">348        <div class="ad-title">Experience Organic India Today</div>349        <div class="ad-link">Organic India Store - Sector 18, Noida</div>350      </div>351    </div>352    <div class="ad-right">353      <div class="ad-arrow">354        <svg viewBox="0 0 24 24">355          <path d="M5 12h10"></path>356          <path d="M11 6l6 6-6 6"></path>357        </svg>358      </div>359    </div>360    <div class="ad-close">×</div>361  </div>362 363</div>364</body>365</html>