GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Photo Picker 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: radial-gradient(1200px 900px at 50% -200px, #335a45 0%, #1f3d31 40%, #152923 65%, #0f1e1a 100%);14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    color: #eaeaea;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 40px;28    box-sizing: border-box;29    font-weight: 600;30    letter-spacing: 0.5px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .icon {38    width: 34px;39    height: 34px;40    display: inline-flex;41    align-items: center;42    justify-content: center;43  }44  .icon svg { width: 100%; height: 100%; fill: #eaeaea; }45 46  /* Bottom sheet (photo picker) */47  .sheet {48    position: absolute;49    left: 0;50    right: 0;51    bottom: 0;52    top: 260px;53    background: #2d2d31;54    border-top-left-radius: 36px;55    border-top-right-radius: 36px;56    color: #f0f0f0;57    box-shadow: 0 -8px 30px rgba(0,0,0,0.5);58  }59  .handle {60    width: 140px;61    height: 10px;62    background: #6b6b6f;63    border-radius: 6px;64    position: absolute;65    top: 14px;66    left: 50%;67    transform: translateX(-50%);68  }69  .sheet-inner {70    padding: 56px 36px 24px;71  }72  .top-row {73    display: flex;74    align-items: center;75    justify-content: space-between;76    margin-top: -6px;77  }78  .header-text {79    text-align: center;80    color: #e6e6ea;81    font-size: 34px;82    line-height: 1.2;83    margin-bottom: 28px;84  }85  .tabs {86    display: inline-flex;87    background: #3a3a40;88    padding: 6px;89    border-radius: 26px;90    gap: 8px;91  }92  .tab {93    padding: 14px 36px;94    border-radius: 26px;95    font-weight: 700;96    font-size: 30px;97    color: #d9d7ff;98    background: #cfcaff;99    color: #212121;100  }101  .tab.secondary {102    background: transparent;103    color: #d7d7dd;104  }105  .controls {106    display: flex;107    align-items: center;108    gap: 14px;109  }110  .control-btn {111    width: 72px;112    height: 72px;113    display: inline-flex;114    align-items: center;115    justify-content: center;116    border-radius: 18px;117    color: #f5f5f7;118  }119  .subtitle {120    margin: 26px 0 18px;121    color: #cfcfd7;122    font-size: 32px;123    font-weight: 600;124  }125 126  /* Grid */127  .grid {128    display: grid;129    grid-template-columns: repeat(3, 1fr);130    grid-gap: 16px;131  }132  .img-tile {133    height: 320px;134    background: #E0E0E0;135    border: 1px solid #BDBDBD;136    color: #5f5f5f;137    font-size: 28px;138    display: flex;139    align-items: center;140    justify-content: center;141    text-align: center;142    border-radius: 6px;143  }144 145  /* Bottom gesture bar inside sheet */146  .gesture {147    position: absolute;148    bottom: 18px;149    left: 50%;150    transform: translateX(-50%);151    width: 420px;152    height: 10px;153    background: #e9e9ef;154    border-radius: 6px;155    opacity: 0.85;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Status Bar -->163  <div class="status-bar">164    <div class="status-left" style="font-size:40px;">9:25</div>165    <div class="status-right">166      <div class="icon" title="Wi-Fi">167        <svg viewBox="0 0 24 24"><path d="M12 20.5c-.7 0-1.25-.55-1.25-1.25S11.3 18 12 18s1.25.55 1.25 1.25S12.7 20.5 12 20.5zm5.35-4.85l-1.43 1.43c-2.18-2.18-5.66-2.18-7.84 0L6.65 15.65c2.96-2.96 7.74-2.96 10.7 0zm3.18-3.18l-1.43 1.43c-4.93-4.94-12.97-4.94-17.9 0L.77 12.47c5.72-5.72 15.04-5.72 20.76 0z"/></svg>168      </div>169      <div class="icon" title="Battery">170        <svg viewBox="0 0 24 24"><path d="M16 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v1h-2v-1H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h10zm1 2H6v6h11V9z"/></svg>171      </div>172    </div>173  </div>174 175  <!-- Bottom Sheet -->176  <div class="sheet">177    <div class="handle"></div>178    <div class="sheet-inner">179 180      <div class="top-row">181        <div class="control-btn" title="Close">182          <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.3 1.4L10.6 13.4 4.3 19.7 3 18.3 9.3 12 3 5.7 4.3 4.3l6.3 6.3 6.4-6.3z"/></svg>183        </div>184        <div class="tabs">185          <div class="tab">Photos</div>186          <div class="tab secondary">Albums</div>187        </div>188        <div class="control-btn" title="Menu">189          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>190        </div>191      </div>192 193      <div class="header-text">This app can only access the photos you select</div>194 195      <div class="subtitle">Recent</div>196 197      <div class="grid">198        <div class="img-tile">[IMG: Magenta card graphic]</div>199        <div class="img-tile">[IMG: Black placeholder / empty image]</div>200        <div class="img-tile">[IMG: Greeting card - "Merry Christmas John"]</div>201 202        <div class="img-tile">[IMG: Abstract dark wallpaper]</div>203        <div class="img-tile">[IMG: Abstract dark wallpaper]</div>204        <div class="img-tile">[IMG: Screenshot - App pinning info]</div>205 206        <div class="img-tile">[IMG: Earbuds close-up]</div>207        <div class="img-tile">[IMG: Indoor plant in pot]</div>208        <div class="img-tile">[IMG: Indoor plant duplicate]</div>209 210        <div class="img-tile">[IMG: Wi‑Fi settings with password field]</div>211        <div class="img-tile">[IMG: Wi‑Fi settings (show password ticked)]</div>212        <div class="img-tile">[IMG: Smartphone back with LED ring]</div>213 214        <div class="img-tile">[IMG: Smartphone back close-up]</div>215        <div class="img-tile">[IMG: Smartphone back angled]</div>216        <div class="img-tile">[IMG: Additional photo placeholder]</div>217      </div>218    </div>219 220    <div class="gesture"></div>221  </div>222 223</div>224</body>225</html>