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 { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #FFFFFF;15  }16 17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 24px;21    left: 36px;22    right: 36px;23    height: 64px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #FFFFFF;28    font-size: 36px;29    letter-spacing: 0.5px;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 16px;35  }36  .status-dot {37    width: 26px;38    height: 26px;39    border-radius: 50%;40    background: #FFFFFF;41    display: inline-block;42  }43  .status-right {44    display: flex;45    align-items: center;46    gap: 24px;47  }48  .icon {49    width: 40px;50    height: 40px;51  }52 53  /* Selection header */54  .selection-header {55    position: absolute;56    top: 98px;57    left: 24px;58    right: 24px;59    height: 104px;60    display: flex;61    align-items: center;62    justify-content: flex-start;63    gap: 28px;64  }65  .close-btn {66    width: 64px;67    height: 64px;68    border-radius: 8px;69    display: inline-flex;70    align-items: center;71    justify-content: center;72  }73  .close-btn svg { width: 44px; height: 44px; }74  .selected-count {75    font-size: 48px;76    font-weight: 600;77    margin-left: 8px;78  }79 80  /* Section title */81  .section-title {82    position: relative;83    margin: 220px 24px 18px 24px;84    font-size: 44px;85    font-weight: 700;86    color: #E0E0E0;87  }88 89  /* Grid */90  .grid {91    position: relative;92    margin: 0 24px;93    display: grid;94    grid-template-columns: repeat(4, 1fr);95    gap: 16px;96  }97  .thumb {98    position: relative;99    background: #E0E0E0;100    border: 1px solid #BDBDBD;101    height: 220px;102    display: flex;103    align-items: center;104    justify-content: center;105    color: #424242;106    font-size: 26px;107    text-align: center;108    border-radius: 8px;109    overflow: hidden;110  }111 112  /* Selection circles */113  .select-circle {114    position: absolute;115    top: 10px;116    left: 10px;117    width: 52px;118    height: 52px;119    border-radius: 50%;120    border: 4px solid #CFCFCF;121    box-sizing: border-box;122    background: rgba(18,18,18,0.6);123  }124  .thumb.selected .select-circle {125    background: #7697FF;126    border: none;127    display: flex;128    align-items: center;129    justify-content: center;130  }131  .thumb.selected .select-circle svg {132    width: 30px;133    height: 30px;134    fill: none;135    stroke: #FFFFFF;136    stroke-width: 6;137    stroke-linecap: round;138    stroke-linejoin: round;139  }140 141  /* Second section title */142  .section-title.july {143    margin-top: 48px;144  }145 146  /* Bottom action bar */147  .bottom-actions {148    position: absolute;149    left: 24px;150    right: 24px;151    bottom: 150px;152    display: flex;153    gap: 28px;154    justify-content: flex-start;155  }156  .btn {157    height: 120px;158    flex: 0 0 480px;159    border-radius: 24px;160    display: flex;161    align-items: center;162    justify-content: center;163    gap: 18px;164    font-size: 40px;165    font-weight: 600;166  }167  .btn.copy {168    border: 3px solid #AFC2FF;169    color: #AFC2FF;170    background: transparent;171  }172  .btn.move {173    background: #AFC2FF;174    color: #121212;175  }176  .btn svg { width: 54px; height: 54px; }177 178  /* Home indicator */179  .home-indicator {180    position: absolute;181    left: 50%;182    bottom: 44px;183    transform: translateX(-50%);184    width: 360px;185    height: 14px;186    background: #ECECEC;187    border-radius: 8px;188    opacity: 0.85;189  }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status bar -->196  <div class="statusbar">197    <div class="status-left">198      <div>1:08</div>199      <span class="status-dot"></span>200    </div>201    <div class="status-right">202      <!-- Wi-Fi icon -->203      <svg class="icon" viewBox="0 0 24 24">204        <path fill="#FFFFFF" d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm7-8.5a12.9 12.9 0 0 0-14 0l1.6 1.9a10 10 0 0 1 10.8 0L19 11.5ZM12 6a18.4 18.4 0 0 0-9 2.6l1.7 2a16 16 0 0 1 14.6 0l1.7-2A18.3 18.3 0 0 0 12 6Z"/>205      </svg>206      <!-- Battery icon -->207      <svg class="icon" viewBox="0 0 24 24">208        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>209        <rect x="4" y="8" width="14" height="8" fill="#FFFFFF"/>210        <rect x="20" y="10" width="2" height="4" fill="#FFFFFF"/>211      </svg>212    </div>213  </div>214 215  <!-- Selection header -->216  <div class="selection-header">217    <div class="close-btn">218      <svg viewBox="0 0 24 24">219        <path d="M18.3 5.7L12 12m0 0L5.7 18.3M12 12l6.3 6.3M12 12L5.7 5.7" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>220      </svg>221    </div>222    <div class="selected-count">2</div>223  </div>224 225  <!-- Section: September -->226  <div class="section-title">September</div>227  <div class="grid" style="margin-bottom: 24px;">228    <!-- Row 1 -->229    <div class="thumb">230      <div class="select-circle"></div>231      <div>[IMG: Festival Crowd]</div>232    </div>233    <div class="thumb">234      <div class="select-circle"></div>235      <div>[IMG: Festival Stage]</div>236    </div>237    <div class="thumb selected">238      <div class="select-circle">239        <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>240      </div>241      <div>[IMG: Vatican at Sunset]</div>242    </div>243    <div class="thumb selected">244      <div class="select-circle">245        <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>246      </div>247      <div>[IMG: Coastal Village]</div>248    </div>249 250    <!-- Row 2 -->251    <div class="thumb">252      <div class="select-circle"></div>253      <div>[IMG: Colosseum]</div>254    </div>255    <div class="thumb">256      <div class="select-circle"></div>257      <div>[IMG: European Street]</div>258    </div>259    <div class="thumb">260      <div class="select-circle"></div>261      <div>[IMG: Interior Collage]</div>262    </div>263    <div class="thumb">264      <div class="select-circle"></div>265      <div>[IMG: Plants]</div>266    </div>267 268    <!-- Row 3 -->269    <div class="thumb" style="grid-column: span 1;">270      <div class="select-circle"></div>271      <div>[IMG: Phone Sign-in Screenshot]</div>272    </div>273    <!-- Empty cells to visually align like screenshot -->274    <div class="thumb" style="visibility:hidden;"></div>275    <div class="thumb" style="visibility:hidden;"></div>276    <div class="thumb" style="visibility:hidden;"></div>277  </div>278 279  <!-- Section: July -->280  <div class="section-title july">July</div>281  <div class="grid">282    <div class="thumb">283      <div class="select-circle"></div>284      <div>[IMG: Palm Leaves]</div>285    </div>286    <div class="thumb">287      <div class="select-circle"></div>288      <div>[IMG: Boats at Sunset]</div>289    </div>290    <!-- Empty placeholders to complete 4-column grid -->291    <div class="thumb" style="visibility:hidden;"></div>292    <div class="thumb" style="visibility:hidden;"></div>293  </div>294 295  <!-- Bottom actions -->296  <div class="bottom-actions">297    <div class="btn copy">298      <svg viewBox="0 0 24 24">299        <rect x="9" y="9" width="10" height="10" rx="2" ry="2" fill="none" stroke="#AFC2FF" stroke-width="2"/>300        <rect x="5" y="5" width="10" height="10" rx="2" ry="2" fill="none" stroke="#AFC2FF" stroke-width="2"/>301      </svg>302      <span>Copy</span>303    </div>304    <div class="btn move">305      <svg viewBox="0 0 24 24">306        <path d="M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" fill="#121212"/>307        <path d="M11 12l4 4m0 0l-4 4m4-4H9" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>308      </svg>309      <span>Move</span>310    </div>311  </div>312 313  <!-- Home indicator -->314  <div class="home-indicator"></div>315</div>316</body>317</html>