GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Gallery Selection UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Roboto, Arial, sans-serif;12  }13  #render-target {14    position: relative;15    overflow: hidden;16    width: 1080px;17    height: 2400px;18    background: #1f1f1f;19    color: #fff;20  }21 22  /* Status bar */23  .status-bar {24    height: 120px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #fff;30    font-weight: 500;31    letter-spacing: 0.5px;32  }33  .status-left {34    display: flex;35    align-items: center;36    gap: 22px;37    font-size: 40px;38  }39  .status-dot {40    width: 28px;41    height: 28px;42    border-radius: 50%;43    background: #fff;44  }45  .status-right {46    display: flex;47    align-items: center;48    gap: 28px;49  }50  .icon {51    width: 44px;52    height: 44px;53  }54 55  /* App bar */56  .app-bar {57    height: 110px;58    padding: 0 36px;59    display: flex;60    align-items: center;61    gap: 28px;62  }63  .close-btn {64    width: 64px;65    height: 64px;66    display: inline-flex;67    align-items: center;68    justify-content: center;69  }70  .count {71    font-size: 56px;72    font-weight: 600;73  }74 75  /* Sections */76  .content {77    padding: 20px 36px 260px;78  }79  .section-title {80    font-size: 48px;81    font-weight: 700;82    margin: 26px 0 24px;83    color: #e9e9e9;84  }85 86  /* Grid */87  .grid {88    display: grid;89    grid-template-columns: repeat(4, 1fr);90    grid-gap: 24px;91  }92  .thumb {93    position: relative;94    width: 100%;95    height: 234px;96    background: #E0E0E0;97    border: 1px solid #BDBDBD;98    display: flex;99    align-items: center;100    justify-content: center;101    color: #757575;102    font-size: 30px;103    text-align: center;104    overflow: hidden;105    border-radius: 6px;106  }107  .thumb.selected {108    outline: 10px solid #2f3f59;109    box-shadow: inset 0 0 0 4px #2f3f59;110  }111 112  /* Selection indicators */113  .select-indicator {114    position: absolute;115    top: 14px;116    left: 14px;117    width: 54px;118    height: 54px;119    border-radius: 50%;120    border: 4px solid #dcdcdc;121    background: transparent;122    box-sizing: border-box;123  }124  .thumb.selected .select-indicator {125    border-color: #7aa3ff;126    background: #7aa3ff;127    display: flex;128    align-items: center;129    justify-content: center;130  }131  .thumb.selected .select-indicator svg {132    width: 30px;133    height: 30px;134    fill: none;135    stroke: #102a4d;136    stroke-width: 8;137  }138 139  /* Bottom actions */140  .actions-bar {141    position: absolute;142    left: 36px;143    right: 36px;144    bottom: 160px;145    display: flex;146    gap: 30px;147  }148  .btn {149    flex: 1;150    height: 120px;151    border-radius: 24px;152    display: inline-flex;153    align-items: center;154    justify-content: center;155    gap: 22px;156    font-size: 42px;157    font-weight: 600;158    letter-spacing: 0.3px;159    color: #cfe1ff;160    border: 3px solid #8fb3ff;161    background: transparent;162  }163  .btn svg {164    width: 56px;165    height: 56px;166  }167  .btn.primary {168    background: #9fb9ff;169    color: #0b1f44;170    border-color: #9fb9ff;171  }172 173  /* Home indicator */174  .home-indicator {175    position: absolute;176    bottom: 52px;177    left: 50%;178    transform: translateX(-50%);179    width: 440px;180    height: 10px;181    background: #eaeaea;182    border-radius: 8px;183    opacity: 0.9;184  }185</style>186</head>187<body>188<div id="render-target">189  <!-- Status Bar -->190  <div class="status-bar">191    <div class="status-left">192      <div>1:08</div>193      <div class="status-dot"></div>194    </div>195    <div class="status-right">196      <!-- Wi-Fi icon -->197      <svg class="icon" viewBox="0 0 24 24">198        <path fill="#ffffff" d="M2 8c5.5-5 14.5-5 20 0l-2 2c-4.5-4-11.5-4-16 0L2 8zm4 4c3.5-3 8.5-3 12 0l-2 2c-2.5-2-5.5-2-8 0l-2-2zm4 4c1.5-1 3.5-1 5 0l-2.5 2.5L10 16z"/>199      </svg>200      <!-- Battery icon -->201      <svg class="icon" viewBox="0 0 24 24">202        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#ffffff"></rect>203        <rect x="20" y="9" width="2" height="6" fill="#ffffff"></rect>204        <rect x="4" y="8" width="14" height="8" fill="#1f1f1f"></rect>205        <rect x="4" y="8" width="10" height="8" fill="#ffffff"></rect>206      </svg>207    </div>208  </div>209 210  <!-- App Bar -->211  <div class="app-bar">212    <div class="close-btn">213      <svg viewBox="0 0 24 24">214        <path d="M5 5l14 14M19 5L5 19" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>215      </svg>216    </div>217    <div class="count">1</div>218  </div>219 220  <!-- Content -->221  <div class="content">222    <div class="section-title">September</div>223    <div class="grid">224      <!-- Row 1 -->225      <div class="thumb">226        <div class="select-indicator"></div>227        <div>[IMG: Concert Crowd]</div>228      </div>229      <div class="thumb">230        <div class="select-indicator"></div>231        <div>[IMG: Festival Stage]</div>232      </div>233      <div class="thumb selected">234        <div class="select-indicator">235          <svg viewBox="0 0 24 24">236            <path d="M5 12l4 4 10-10"/>237          </svg>238        </div>239        <div>[IMG: Vatican City Aerial]</div>240      </div>241      <div class="thumb">242        <div class="select-indicator"></div>243        <div>[IMG: Cliffside Town]</div>244      </div>245 246      <!-- Row 2 -->247      <div class="thumb">248        <div class="select-indicator"></div>249        <div>[IMG: Colosseum]</div>250      </div>251      <div class="thumb">252        <div class="select-indicator"></div>253        <div>[IMG: European Street]</div>254      </div>255      <div class="thumb">256        <div class="select-indicator"></div>257        <div>[IMG: Hotel Interiors Grid]</div>258      </div>259      <div class="thumb">260        <div class="select-indicator"></div>261        <div>[IMG: Plants]</div>262      </div>263 264      <!-- Row 3 -->265      <div class="thumb">266        <div class="select-indicator"></div>267        <div>[IMG: Sign-in Screen]</div>268      </div>269    </div>270 271    <div class="section-title" style="margin-top: 46px;">July</div>272    <div class="grid" style="grid-template-columns: repeat(4, 1fr);">273      <div class="thumb">274        <div class="select-indicator"></div>275        <div>[IMG: Palm Plant]</div>276      </div>277      <div class="thumb">278        <div class="select-indicator"></div>279        <div>[IMG: Harbor at Sunset]</div>280      </div>281    </div>282  </div>283 284  <!-- Bottom actions -->285  <div class="actions-bar">286    <div class="btn">287      <svg viewBox="0 0 24 24">288        <rect x="3" y="6" width="12" height="12" rx="2" ry="2" fill="none" stroke="#8fb3ff" stroke-width="2"></rect>289        <rect x="9" y="10" width="12" height="12" rx="2" ry="2" fill="none" stroke="#8fb3ff" stroke-width="2"></rect>290      </svg>291      <span>Copy</span>292    </div>293    <div class="btn primary">294      <svg viewBox="0 0 24 24">295        <path d="M3 6h12l5 5v7a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z" fill="#0b1f44"></path>296        <path d="M12 10v4h4" stroke="#9fb9ff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>297      </svg>298      <span>Move</span>299    </div>300  </div>301 302  <!-- Home indicator -->303  <div class="home-indicator"></div>304</div>305</body>306</html>