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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #222426;15    color: #fff;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    right: 0;25    height: 88px;26    background: #2b2d30;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 28px;31    box-sizing: border-box;32    color: #fff;33    font-size: 32px;34    letter-spacing: .5px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 18px;40  }41  .status-icon svg { width: 34px; height: 34px; fill: #fff; opacity: .9; }42 43  /* Top app bar */44  .top-bar {45    position: absolute;46    top: 88px;47    left: 0;48    right: 0;49    height: 132px;50    background: #2b2d30;51    border-bottom: 1px solid #3a3d41;52    display: flex;53    align-items: center;54    padding: 0 24px;55    box-sizing: border-box;56  }57  .top-left {58    display: flex;59    align-items: center;60    gap: 22px;61  }62  .top-title {63    font-size: 46px;64    font-weight: 600;65  }66  .top-actions {67    margin-left: auto;68    display: flex;69    align-items: center;70    gap: 34px;71  }72  .icon-btn svg { width: 46px; height: 46px; fill: #e8eaed; }73 74  /* Content */75  .content {76    position: absolute;77    top: 220px; /* 88 + 132 */78    left: 0;79    right: 0;80    bottom: 170px; /* reserve for bottom bar */81    overflow: hidden;82  }83  .section {84    padding: 26px 24px 0 24px;85  }86  .section h3 {87    margin: 0;88    font-size: 36px;89    font-weight: 700;90    color: #e4e7eb;91  }92  .grid {93    margin-top: 20px;94    padding: 0 24px;95    display: grid;96    grid-template-columns: repeat(4, 1fr);97    grid-gap: 16px;98    box-sizing: border-box;99  }100  .thumb {101    position: relative;102    height: 220px;103    background: #E0E0E0;104    border: 1px solid #BDBDBD;105    display: flex;106    align-items: center;107    justify-content: center;108    color: #757575;109    font-size: 26px;110    text-align: center;111  }112  .select-ring {113    position: absolute;114    top: 12px;115    left: 12px;116    width: 44px;117    height: 44px;118    border-radius: 50%;119    border: 4px solid #e9e9e9;120    background: transparent;121    box-shadow: 0 0 0 2px rgba(0,0,0,0.45);122  }123 124  /* Bottom navigation */125  .bottom-bar {126    position: absolute;127    left: 0;128    bottom: 0;129    width: 100%;130    height: 160px;131    background: #2b2d30;132    border-top: 1px solid #3a3d41;133    display: flex;134    align-items: center;135    justify-content: space-around;136    box-sizing: border-box;137    padding-bottom: 18px;138  }139  .nav-item {140    display: flex;141    flex-direction: column;142    align-items: center;143    gap: 10px;144    color: #bfc5cc;145    font-size: 28px;146  }147  .nav-item svg { width: 46px; height: 46px; }148  .nav-item.active { color: #8ab4f8; }149  .nav-item.active svg { fill: #8ab4f8; }150  .nav-item svg { fill: #bfc5cc; }151 152  /* Home pill */153  .home-pill {154    position: absolute;155    left: 50%;156    bottom: 10px;157    transform: translateX(-50%);158    width: 220px;159    height: 10px;160    background: #fff;161    border-radius: 6px;162    opacity: .9;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status bar -->170  <div class="status-bar">171    <div class="status-left">10:32</div>172    <div class="status-right">173      <div class="status-icon">174        <!-- Wi-Fi icon -->175        <svg viewBox="0 0 24 24">176          <path d="M12 18.5l2.2-2.2c-1.2-1.2-3.2-1.2-4.4 0L12 18.5zm-4-4 1.7 1.7c2.3-2.3 6.3-2.3 8.6 0L20 14.5c-4.4-4.4-11.6-4.4-16 0zm-4-4 1.7 1.7c6.7-6.7 17.6-6.7 24.3 0L28 10.5C20.4 2.9 7.6 2.9 0 10.5z" />177        </svg>178      </div>179      <div class="status-icon">180        <!-- Battery icon -->181        <svg viewBox="0 0 24 24">182          <rect x="1" y="7" width="18" height="10" rx="2" ry="2"></rect>183          <rect x="20" y="10" width="3" height="4"></rect>184        </svg>185      </div>186      <div style="font-size:28px; opacity:.95;">100%</div>187    </div>188  </div>189 190  <!-- Top app bar -->191  <div class="top-bar">192    <div class="top-left">193      <!-- Close (X) icon -->194      <svg width="44" height="44" viewBox="0 0 24 24" class="icon-btn">195        <path d="M6 6l12 12M18 6L6 18" stroke="#e8eaed" stroke-width="2.5" stroke-linecap="round"/>196      </svg>197      <div class="top-title">Select items</div>198    </div>199    <div class="top-actions">200      <!-- Share -->201      <svg viewBox="0 0 24 24" class="icon-btn">202        <path d="M15 8V4l6 6-6 6v-4H9V8h6z"></path>203      </svg>204      <!-- Delete -->205      <svg viewBox="0 0 24 24" class="icon-btn">206        <path d="M6 7h12l-1 13H7L6 7zm3-3h6l1 2H8l1-2z"></path>207      </svg>208      <!-- More (vertical) -->209      <svg viewBox="0 0 24 24" class="icon-btn">210        <circle cx="12" cy="5" r="2.2"></circle>211        <circle cx="12" cy="12" r="2.2"></circle>212        <circle cx="12" cy="19" r="2.2"></circle>213      </svg>214    </div>215  </div>216 217  <!-- Content area -->218  <div class="content">219    <div class="section">220      <h3>September</h3>221    </div>222 223    <div class="grid">224      <div class="thumb">225        <div class="select-ring"></div>226        [IMG: Ornate hall interior]227      </div>228      <div class="thumb">229        <div class="select-ring"></div>230        [IMG: Castle on hill]231      </div>232      <div class="thumb">233        <div class="select-ring"></div>234        [IMG: Riverside building at dusk]235      </div>236      <div class="thumb">237        <div class="select-ring"></div>238        [IMG: Museum by river]239      </div>240 241      <div class="thumb">242        <div class="select-ring"></div>243        [IMG: Historic building wide]244      </div>245      <!-- Empty cells to mimic grid spacing; leave blank to show dark area -->246    </div>247  </div>248 249  <!-- Bottom navigation -->250  <div class="bottom-bar">251    <div class="nav-item active">252      <!-- Photo icon -->253      <svg viewBox="0 0 24 24">254        <path d="M4 6h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm6 6 2-3 4 6H6l3-4zM9 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>255      </svg>256      <div>Photos</div>257    </div>258    <div class="nav-item">259      <!-- Folder icon -->260      <svg viewBox="0 0 24 24">261        <path d="M3 6h6l2 2h10v9a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"></path>262      </svg>263      <div>Folders</div>264    </div>265  </div>266 267  <div class="home-pill"></div>268</div>269</body>270</html>