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    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #1f2125;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #fff;26    font-weight: 600;27  }28  .status-left {29    display: flex;30    align-items: center;31    gap: 18px;32    font-size: 34px;33    opacity: 0.95;34  }35  .white-dot {36    width: 22px; height: 22px; background: #fff; border-radius: 50%;37  }38  .status-right {39    display: flex; align-items: center; gap: 22px;40  }41  .status-right svg { fill: #fff; }42 43  /* Header (selection) */44  .header {45    height: 108px;46    display: flex;47    align-items: center;48    padding: 0 24px;49    border-bottom: 1px solid rgba(255,255,255,0.06);50  }51  .header .close {52    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;53  }54  .header .count {55    font-size: 46px; font-weight: 700; letter-spacing: 1px;56    margin-left: 8px;57  }58 59  /* Content area */60  .content {61    position: absolute;62    top: 218px;   /* status (110) + header (108) */63    bottom: 240px; /* space for bottom buttons */64    left: 0; right: 0;65    overflow: hidden;66    padding: 8px 24px 0 24px;67  }68  .section-title {69    color: #c7c7c7;70    font-size: 34px;71    margin: 18px 0 18px 4px;72    font-weight: 600;73  }74 75  .grid {76    display: grid;77    grid-template-columns: repeat(4, 1fr);78    gap: 16px;79  }80 81  .thumb {82    position: relative;83    height: 246px;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    border-radius: 8px;87    display: flex;88    align-items: center; justify-content: center;89    color: #757575;90    font-size: 28px;91    text-align: center;92  }93  .thumb.selected {94    box-shadow: inset 0 0 0 9999px rgba(130,150,255,0.22);95    border-color: #98a9ff;96  }97  .select-dot {98    position: absolute;99    top: 12px; left: 12px;100    width: 54px; height: 54px;101    border-radius: 50%;102    border: 3px solid rgba(255,255,255,0.65);103    background: rgba(0,0,0,0.35);104    display: flex; align-items: center; justify-content: center;105  }106  .thumb.selected .select-dot {107    border: none;108    background: #89a2ff;109  }110  .select-dot svg { width: 32px; height: 32px; fill: #fff; }111 112  /* Bottom action area */113  .action-bar {114    position: absolute;115    left: 0; right: 0; bottom: 84px;116    padding: 18px 28px;117  }118  .actions {119    display: flex; gap: 24px;120    width: 100%;121    justify-content: space-between;122  }123  .btn {124    height: 120px; border-radius: 18px;125    font-size: 40px; font-weight: 600;126    display: flex; align-items: center; justify-content: center;127    gap: 20px;128    flex: 1;129  }130  .btn-outline {131    color: #a9baff;132    border: 3px solid #a9baff;133    background: transparent;134  }135  .btn-filled {136    background: #a9baff;137    color: #111318;138    border: 3px solid #a9baff;139  }140  .btn svg { width: 48px; height: 48px; }141 142  /* Home handle */143  .home-handle {144    position: absolute;145    bottom: 22px; left: 50%;146    transform: translateX(-50%);147    width: 320px; height: 12px; border-radius: 8px; background: #E6E6E6; opacity: 0.9;148  }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Status bar -->155  <div class="status-bar">156    <div class="status-left">157      <div style="min-width:64px;">1:08</div>158      <div class="white-dot"></div>159    </div>160    <div class="status-right">161      <!-- WiFi icon -->162      <svg viewBox="0 0 24 24" width="44" height="44">163        <path d="M2 8c5.5-5 14.5-5 20 0l-2 2c-4-3.7-12-3.7-16 0L2 8zm4 4c3.3-3 8.7-3 12 0l-2 2c-2.3-2-5.7-2-8 0l-2-2zm4 4c1.1-1 2.9-1 4 0l-2 2-2-2z"/>164      </svg>165      <!-- Battery icon -->166      <svg viewBox="0 0 24 24" width="46" height="46">167        <path d="M16 6h2a2 2 0 0 1 2 2v1h2v6h-2v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h10zm0 2H6v8h10V8z"/>168      </svg>169    </div>170  </div>171 172  <!-- Selection header -->173  <div class="header">174    <div class="close" aria-label="Close">175      <svg viewBox="0 0 24 24" width="48" height="48">176        <path fill="#ffffff" d="M18.3 5.7 12 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"/>177      </svg>178    </div>179    <div class="count">4</div>180  </div>181 182  <!-- Content -->183  <div class="content">184    <div class="section-title">September</div>185    <div class="grid">186      <!-- Row 1 -->187      <div class="thumb">188        <div class="select-dot"></div>189        <span>[IMG: Festival Crowd]</span>190      </div>191      <div class="thumb">192        <div class="select-dot"></div>193        <span>[IMG: Music Stage]</span>194      </div>195      <div class="thumb selected">196        <div class="select-dot">197          <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z"/></svg>198        </div>199        <span>[IMG: City Square Aerial]</span>200      </div>201      <div class="thumb selected">202        <div class="select-dot">203          <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z"/></svg>204        </div>205        <span>[IMG: Seaside Town]</span>206      </div>207      <!-- Row 2 -->208      <div class="thumb selected">209        <div class="select-dot">210          <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z"/></svg>211        </div>212        <span>[IMG: Colosseum]</span>213      </div>214      <div class="thumb selected">215        <div class="select-dot">216          <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z"/></svg>217        </div>218        <span>[IMG: European Street]</span>219      </div>220      <div class="thumb">221        <div class="select-dot"></div>222        <span>[IMG: Hotel Interiors Grid]</span>223      </div>224      <div class="thumb">225        <div class="select-dot"></div>226        <span>[IMG: Green Plants]</span>227      </div>228      <!-- Row 3 -->229      <div class="thumb">230        <div class="select-dot"></div>231        <span>[IMG: Phone Sign-in Screen]</span>232      </div>233    </div>234 235    <div class="section-title" style="margin-top: 34px;">July</div>236    <div class="grid" style="grid-template-columns: repeat(4, 1fr);">237      <div class="thumb">238        <div class="select-dot"></div>239        <span>[IMG: Indoor Plant]</span>240      </div>241      <div class="thumb">242        <div class="select-dot"></div>243        <span>[IMG: Harbor at Sunset]</span>244      </div>245      <div class="thumb" style="background: transparent; border: none;"></div>246      <div class="thumb" style="background: transparent; border: none;"></div>247    </div>248  </div>249 250  <!-- Bottom actions -->251  <div class="action-bar">252    <div class="actions">253      <button class="btn btn-outline">254        <svg viewBox="0 0 24 24" fill="currentColor">255          <path d="M16 1H6a2 2 0 0 0-2 2v12h2V3h10V1zm2 4H10a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 14H10V7h8v12z"/>256        </svg>257        <span>Copy</span>258      </button>259      <button class="btn btn-filled">260        <svg viewBox="0 0 24 24" fill="#111318">261          <path d="M10 4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6zM7 12h6l-2.5-2 1.4-1.4L17.8 13l-5.9 4.4L10.5 16 13 14H7v-2z"/>262        </svg>263        <span>Move</span>264      </button>265    </div>266  </div>267 268  <!-- Home indicator -->269  <div class="home-handle"></div>270</div>271</body>272</html>