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>Select items - Gallery</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #212121;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 96px;25    padding: 0 28px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #EDEDED;31    font-size: 38px;32    letter-spacing: 0.5px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 24px;38    color: #EDEDED;39    font-size: 28px;40  }41  .status-icons .battery {42    display: inline-flex;43    align-items: center;44    gap: 10px;45    font-size: 30px;46  }47  .battery-icon {48    width: 46px; height: 24px;49    border: 2px solid #EDEDED;50    border-radius: 3px;51    position: relative;52    box-sizing: border-box;53  }54  .battery-icon::after {55    content: "";56    position: absolute;57    right: -8px; top: 6px;58    width: 6px; height: 12px;59    background: #EDEDED;60    border-radius: 2px;61  }62  .battery-level {63    position: absolute;64    top: 3px; left: 3px;65    height: 16px; width: 32px;66    background: #EDEDED;67  }68 69  /* App bar */70  .app-bar {71    position: absolute;72    top: 96px;73    left: 0;74    width: 100%;75    height: 120px;76    padding: 0 28px;77    box-sizing: border-box;78    display: flex;79    align-items: center;80    gap: 24px;81    color: #FFFFFF;82  }83  .app-title {84    font-size: 48px;85    font-weight: 600;86  }87  .icon-btn {88    width: 72px; height: 72px;89    display: inline-flex; align-items: center; justify-content: center;90  }91  .icon-btn svg { fill: #FFFFFF; opacity: 0.9; }92 93  /* Content area */94  .content {95    position: absolute;96    top: 216px; /* status + app bar */97    bottom: 190px; /* space for bottom actions & gesture bar */98    left: 0; right: 0;99    overflow-y: auto;100    padding-bottom: 40px;101  }102  .section {103    padding: 18px 28px 8px 28px;104  }105  .section h3 {106    margin: 12px 0 18px 0;107    font-size: 40px;108    font-weight: 700;109    color: #FFFFFF;110  }111  .grid {112    display: grid;113    grid-template-columns: repeat(4, 1fr);114    gap: 24px;115  }116 117  .thumb {118    position: relative;119    width: 100%;120    padding-top: 100%; /* square */121    border-radius: 10px;122    overflow: hidden;123    background: #2A2A2A;124  }125  .img-placeholder {126    position: absolute;127    inset: 0;128    display: flex; align-items: center; justify-content: center;129    background: #E0E0E0;130    border: 1px solid #BDBDBD;131    color: #757575;132    font-size: 28px;133    text-align: center;134    padding: 10px;135    box-sizing: border-box;136  }137  .select-ring {138    position: absolute;139    top: 14px; left: 14px;140    width: 54px; height: 54px;141    border-radius: 50%;142    box-sizing: border-box;143    border: 3px solid rgba(255,255,255,0.9);144    background: rgba(0,0,0,0.15);145  }146  .video-badge {147    position: absolute;148    left: 12px; bottom: 12px;149    display: inline-flex; align-items: center; gap: 10px;150    padding: 8px 12px;151    background: rgba(0,0,0,0.55);152    color: #FFF; border-radius: 16px;153    font-size: 26px;154  }155  .video-badge svg { width: 20px; height: 20px; fill: #FFF; }156 157  /* Bottom actions */158  .bottom-actions {159    position: absolute;160    left: 0; right: 0;161    bottom: 64px;162    display: flex;163    justify-content: space-between;164    padding: 0 36px;165    box-sizing: border-box;166  }167  .btn {168    width: 480px;169    height: 120px;170    border-radius: 18px;171    border: 2px solid #444;172    background: #2B2B2B;173    color: #AFAFAF;174    display: flex; align-items: center; justify-content: center;175    gap: 16px;176    font-size: 40px;177    font-weight: 500;178  }179  .btn svg { width: 44px; height: 44px; fill: #AFAFAF; }180 181  /* Gesture pill */182  .gesture-pill {183    position: absolute;184    bottom: 18px; left: 50%;185    transform: translateX(-50%);186    width: 220px; height: 12px;187    background: #D1D1D1;188    border-radius: 8px;189    opacity: 0.9;190  }191 192  /* Scrollbar subtle */193  .content::-webkit-scrollbar { width: 8px; }194  .content::-webkit-scrollbar-thumb { background: #3A3A3A; border-radius: 4px; }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status bar -->201  <div class="status-bar">202    <div class="time">6:14</div>203    <div class="status-icons">204      <!-- Simple status icons -->205      <svg width="28" height="28" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" stroke="#EDEDED" stroke-width="2" fill="none"/></svg>206      <svg width="28" height="28" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h18L12 6 3 18z" fill="#EDEDED"/></svg>207      <div class="battery">208        <span>100%</span>209        <div class="battery-icon"><div class="battery-level"></div></div>210      </div>211    </div>212  </div>213 214  <!-- App bar -->215  <div class="app-bar">216    <div class="icon-btn" aria-label="Close">217      <svg viewBox="0 0 24 24" width="36" height="36"><path d="M18.3 5.71 12 12l6.3 6.29-1.41 1.41L10.59 13.4 4.29 19.7 2.88 18.29 9.17 12 2.88 5.71 4.29 4.29l6.3 6.3 6.3-6.3z"/></svg>218    </div>219    <div class="app-title">Select items</div>220  </div>221 222  <!-- Content -->223  <div class="content">224 225    <div class="section">226      <h3>September</h3>227      <div class="grid">228        <!-- Video thumb -->229        <div class="thumb">230          <div class="img-placeholder">[IMG: Video - Yellow bottle on desk]</div>231          <div class="select-ring"></div>232          <div class="video-badge">233            <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>234            <span>0:12</span>235          </div>236        </div>237        <div class="thumb">238          <div class="img-placeholder">[IMG: View from high-rise window]</div>239          <div class="select-ring"></div>240        </div>241        <div class="thumb">242          <div class="img-placeholder">[IMG: Indoor plant by window]</div>243          <div class="select-ring"></div>244        </div>245        <div class="thumb">246          <div class="img-placeholder">[IMG: Green plants in planter]</div>247          <div class="select-ring"></div>248        </div>249      </div>250    </div>251 252    <div class="section">253      <h3>August</h3>254      <div class="grid" style="grid-template-columns: repeat(3, 1fr);">255        <div class="thumb">256          <div class="img-placeholder">[IMG: Document/Screenshot]</div>257          <div class="select-ring"></div>258        </div>259        <div class="thumb">260          <div class="img-placeholder">[IMG: Triangle drawing]</div>261          <div class="select-ring"></div>262        </div>263        <div class="thumb">264          <div class="img-placeholder">[IMG: Heart doodle]</div>265          <div class="select-ring"></div>266        </div>267      </div>268    </div>269 270    <div class="section">271      <h3>July</h3>272      <div class="grid" style="grid-template-columns: repeat(1, 1fr); width: 260px;">273        <div class="thumb">274          <div class="img-placeholder">[IMG: Landscape view]</div>275          <div class="select-ring"></div>276        </div>277      </div>278    </div>279 280  </div>281 282  <!-- Bottom actions -->283  <div class="bottom-actions">284    <div class="btn">285      <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14l7-3 7 3V7c0-1.1-.9-2-2-2z"/></svg>286      <span>Copy</span>287    </div>288    <div class="btn">289      <svg viewBox="0 0 24 24"><path d="M10 17l5-5-5-5v10zM4 4h2v16H4z"/></svg>290      <span>Move</span>291    </div>292  </div>293 294  <!-- Gesture navigation pill -->295  <div class="gesture-pill"></div>296 297</div>298</body>299</html>