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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #24262B;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    height: 90px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 28px;27    letter-spacing: 0.5px;28  }29  .status-left { display: flex; align-items: center; gap: 14px; }30  .status-right { display: flex; align-items: center; gap: 18px; }31  .dot { width: 10px; height: 10px; background: #9AA0A6; border-radius: 50%; opacity: .7; }32 33  /* Top toolbar */34  .toolbar {35    height: 120px;36    border-bottom: 1px solid #2E3137;37    display: flex;38    align-items: center;39    justify-content: space-between;40    padding: 0 22px;41    background: #26292F;42  }43  .toolbar-left {44    display: flex;45    align-items: center;46    gap: 18px;47  }48  .toolbar-left .count {49    font-size: 42px;50    font-weight: 600;51    color: #EAEFFB;52  }53  .toolbar-actions {54    display: flex;55    align-items: center;56    gap: 42px;57  }58  .icon-btn svg { width: 44px; height: 44px; fill: #EDEFF6; }59 60  /* Section title */61  .section-title {62    padding: 28px 36px 16px 36px;63    font-size: 44px;64    font-weight: 700;65    color: #D7DBE7;66  }67 68  /* Grid */69  .grid {70    padding: 0 36px;71    display: grid;72    grid-template-columns: repeat(4, 1fr);73    gap: 24px;74  }75  .tile {76    position: relative;77    width: 100%;78    height: 234px;79    border-radius: 8px;80    background: #3C4456;81    overflow: hidden;82  }83  .tile .img {84    position: absolute;85    inset: 10px;86    background: #E0E0E0;87    border: 1px solid #BDBDBD;88    display: flex;89    align-items: center;90    justify-content: center;91    color: #757575;92    font-size: 26px;93    text-align: center;94    padding: 8px;95  }96  .check-badge {97    position: absolute;98    top: 10px;99    left: 10px;100    width: 54px;101    height: 54px;102    border-radius: 50%;103    background: #6F88F9;104    display: flex;105    align-items: center;106    justify-content: center;107    box-shadow: 0 0 0 4px rgba(255,255,255,0.15);108  }109  .check-badge svg { width: 30px; height: 30px; fill: #FFFFFF; }110 111  /* Bottom navigation */112  .bottom-bar {113    position: absolute;114    left: 0;115    right: 0;116    bottom: 96px;117    height: 140px;118    background: #26292F;119    border-top: 1px solid #2F3339;120    display: flex;121    justify-content: space-around;122    align-items: center;123  }124  .nav-item {125    width: 280px;126    height: 100%;127    display: flex;128    align-items: center;129    justify-content: center;130    gap: 14px;131    color: #A3A8B3;132    font-size: 32px;133  }134  .nav-item svg { width: 44px; height: 44px; }135  .nav-item.active { color: #7FA3FF; }136  .nav-item.active svg path { fill: #7FA3FF; }137  .nav-item svg path { fill: #A3A8B3; }138 139  /* Gesture bar */140  .gesture {141    position: absolute;142    bottom: 30px;143    left: 50%;144    transform: translateX(-50%);145    width: 300px;146    height: 8px;147    background: #FFFFFF;148    opacity: 0.85;149    border-radius: 8px;150  }151 152  /* Simple buttons */153  .x-btn {154    width: 56px; height: 56px; border-radius: 50%;155    display: flex; align-items: center; justify-content: center;156  }157  .x-btn svg { width: 40px; height: 40px; fill: #EDEFF6; }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Status Bar -->164  <div class="status-bar">165    <div class="status-left">166      <span>10:33</span>167      <div class="dot"></div>168      <div class="dot"></div>169      <div class="dot"></div>170    </div>171    <div class="status-right">172      <!-- WiFi -->173      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#EDEDED" d="M12 18.5a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 12 18.5zm6.3-7.2a9.9 9.9 0 0 0-12.6 0l1.4 1.4a7.9 7.9 0 0 1 9.9 0l1.3-1.4zm-3.1 3.2a6.1 6.1 0 0 0-6.4 0l1.5 1.6a3.9 3.9 0 0 1 3.3 0l1.6-1.6z"/></svg>174      <!-- Battery -->175      <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#EDEDED" d="M16 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v1h-2v-1H8a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h8zm-8 2v6h8V9H8z"/></svg>176      <span>100%</span>177    </div>178  </div>179 180  <!-- Toolbar -->181  <div class="toolbar">182    <div class="toolbar-left">183      <div class="x-btn">184        <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>185      </div>186      <div class="count">5</div>187    </div>188    <div class="toolbar-actions">189      <!-- Share -->190      <div class="icon-btn">191        <svg viewBox="0 0 24 24"><path d="M18 16a3 3 0 0 0-2.4 1.2l-6-3A3 3 0 0 0 9 12a3 3 0 0 0-.4-1.2l6-3A3 3 0 1 0 14 6a3 3 0 0 0 .4 1.2l-6 3A3 3 0 1 0 6 15a3 3 0 0 0 2.4-1.2l6 3A3 3 0 1 0 18 16z"/></svg>192      </div>193      <!-- Delete -->194      <div class="icon-btn">195        <svg viewBox="0 0 24 24"><path d="M9 3h6l1 2h4v2H4V5h4l1-2zm1 6h2v9h-2V9zm4 0h2v9h-2V9z"/></svg>196      </div>197      <!-- More (vertical) -->198      <div class="icon-btn">199        <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 5zm0 9a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 14zm0 9a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 23z"/></svg>200      </div>201    </div>202  </div>203 204  <!-- Section -->205  <div class="section-title">September</div>206 207  <!-- Grid of selected photos -->208  <div class="grid">209    <div class="tile">210      <div class="check-badge">211        <svg viewBox="0 0 24 24"><path d="M9.2 16.2L4.8 11.8l1.4-1.4 3 3 7.6-7.6 1.4 1.4z"/></svg>212      </div>213      <div class="img">[IMG: Palace Interior]</div>214    </div>215    <div class="tile">216      <div class="check-badge">217        <svg viewBox="0 0 24 24"><path d="M9.2 16.2L4.8 11.8l1.4-1.4 3 3 7.6-7.6 1.4 1.4z"/></svg>218      </div>219      <div class="img">[IMG: Castle at Sunset]</div>220    </div>221    <div class="tile">222      <div class="check-badge">223        <svg viewBox="0 0 24 24"><path d="M9.2 16.2L4.8 11.8l1.4-1.4 3 3 7.6-7.6 1.4 1.4z"/></svg>224      </div>225      <div class="img">[IMG: Museum by River]</div>226    </div>227    <div class="tile">228      <div class="check-badge">229        <svg viewBox="0 0 24 24"><path d="M9.2 16.2L4.8 11.8l1.4-1.4 3 3 7.6-7.6 1.4 1.4z"/></svg>230      </div>231      <div class="img">[IMG: City Canal]</div>232    </div>233    <div class="tile">234      <div class="check-badge">235        <svg viewBox="0 0 24 24"><path d="M9.2 16.2L4.8 11.8l1.4-1.4 3 3 7.6-7.6 1.4 1.4z"/></svg>236      </div>237      <div class="img">[IMG: Stone Towers]</div>238    </div>239  </div>240 241  <!-- Bottom Navigation -->242  <div class="bottom-bar">243    <div class="nav-item active">244      <svg viewBox="0 0 24 24"><path d="M3 18h18v2H3v-2zm9-12l7 6h-4v5H9v-5H5l7-6z"/></svg>245      <span>Photos</span>246    </div>247    <div class="nav-item">248      <svg viewBox="0 0 24 24"><path d="M10 4l2 2h8v12H4V4h6zm-4 4v8h12V8h-6.8L9.2 6H6z"/></svg>249      <span>Folders</span>250    </div>251  </div>252 253  <!-- Gesture pill -->254  <div class="gesture"></div>255</div>256</body>257</html>