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</title>7<style>8  :root{9    --bg:#202124;10    --card:#2a2b2f;11    --text:#e8eaed;12    --muted:#b0b3b8;13    --accent:#8ab4f8;14    --accent-dark:#6e9ef2;15    --border:#3a3b3f;16  }17  body{ margin:0; padding:0; background:transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }18  #render-target{19    width:1080px; height:2400px;20    position:relative; overflow:hidden;21    background:var(--bg); color:var(--text);22  }23 24  /* Status bar */25  .status-bar{26    position:absolute; left:0; top:0; right:0; height:96px;27    display:flex; align-items:center; padding:0 28px;28    color:var(--text); font-size:38px;29  }30  .status-bar .right{ margin-left:auto; display:flex; align-items:center; gap:22px; color:var(--text); }31  .icon{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; }32  .icon svg{ width:36px; height:36px; fill:currentColor; }33 34  /* Top app bar (selection) */35  .top-bar{36    position:absolute; left:0; right:0; top:96px; height:120px;37    display:flex; align-items:center; gap:28px;38    padding:0 24px;39    border-bottom:1px solid var(--border);40  }41  .top-bar .x{42    width:84px; height:84px; display:flex; align-items:center; justify-content:center; color:var(--text);43  }44  .top-bar .count{ font-size:56px; font-weight:500; }45 46  /* Scroll content */47  .content{48    position:absolute; left:0; right:0; top:216px; bottom:260px;49    overflow-y:auto; padding:18px 20px 120px;50  }51  .section-title{52    font-size:44px; font-weight:500; margin:24px 6px 18px; color:var(--text);53  }54 55  .grid{56    display:grid; grid-template-columns: repeat(3, 1fr);57    gap:22px; padding:0 6px 6px;58  }59 60  .thumb{61    position:relative; background:var(--card); border-radius:8px; overflow:hidden;62    border:1px solid var(--border);63    height:300px;64  }65 66  /* Image placeholder rule */67  .thumb .img{68    position:absolute; inset:0;69    display:flex; align-items:center; justify-content:center;70    background:#E0E0E0; color:#757575;71    border:1px solid #BDBDBD;72    font-size:30px; text-align:center; padding:8px;73  }74 75  /* Selection circles */76  .select-circle{77    position:absolute; top:10px; left:10px; width:48px; height:48px; border-radius:50%;78    display:flex; align-items:center; justify-content:center;79    background:rgba(255,255,255,0.08); border:3px solid rgba(255,255,255,0.7);80  }81  .select-circle svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:8px; }82  .select-circle.selected{83    background:var(--accent-dark); border-color:var(--accent-dark);84  }85 86  /* Video badge (time + play) */87  .badge{88    position:absolute; left:10px; bottom:10px;89    background:rgba(0,0,0,0.6); color:#fff; font-size:28px;90    padding:6px 10px; border-radius:12px; display:flex; align-items:center; gap:8px;91  }92  .badge .play{93    width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;94  }95  .badge .play svg{ width:22px; height:22px; fill:#fff; }96 97  /* Bottom actions */98  .footer{99    position:absolute; left:0; right:0; bottom:78px; height:182px;100    display:flex; align-items:flex-end; justify-content:center; gap:28px;101    padding:0 36px;102  }103  .btn{104    height:120px; border-radius:18px; font-size:42px; font-weight:500;105    padding:0 36px; min-width:460px;106    display:flex; align-items:center; justify-content:center; letter-spacing:0.5px;107    border:2px solid var(--accent);108  }109  .btn.outline{ color:var(--accent); background:transparent; }110  .btn.filled{ color:#0b1021; background:var(--accent); border-color:var(--accent); }111 112  /* Gesture bar */113  .gesture{114    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);115    width:240px; height:10px; background:#fff; border-radius:6px; opacity:0.85;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status Bar -->123  <div class="status-bar">124    <div>6:14</div>125    <div class="right">126      <div class="icon" title="Do not disturb">127        <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 .001 18.001A9 9 0 0 0 12 3Zm-6 8h12v2H6z"/></svg>128      </div>129      <div class="icon" title="Wi‑Fi">130        <svg viewBox="0 0 24 24"><path d="M12 18.5l-2.5-2.5a3.5 3.5 0 0 1 5 0L12 18.5Zm7-7a10 10 0 0 0-14 0l-1.4-1.4a12 12 0 0 1 16.8 0L19 11.5Zm-3.5 3.5a6 6 0 0 0-7 0L8 13.6a8 8 0 0 1 8 0l-0.5 1.4Z"/></svg>131      </div>132      <div style="display:flex; align-items:center; gap:8px;">133        <div class="icon" title="Battery">134          <svg viewBox="0 0 24 24">135            <path d="M2 8a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V8z"/>136            <rect x="20" y="10" width="2" height="4" rx="1" ry="1" fill="currentColor"/>137          </svg>138        </div>139        <div style="font-size:34px;">100%</div>140      </div>141    </div>142  </div>143 144  <!-- Top App Bar -->145  <div class="top-bar">146    <div class="x" aria-label="Close">147      <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">148        <path d="M5 5L19 19M19 5L5 19"/>149      </svg>150    </div>151    <div class="count">2</div>152  </div>153 154  <!-- Content -->155  <div class="content">156    <div class="section-title">September</div>157    <div class="grid">158      <div class="thumb">159        <div class="img">[IMG: Yellow bottle on desk]</div>160        <div class="select-circle">161          <svg viewBox="0 0 24 24"><path d="M6 12l4 4 8-8"/></svg>162        </div>163        <div class="badge">164          <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>165          <span>0:12</span>166        </div>167      </div>168      <div class="thumb">169        <div class="img">[IMG: Aerial landscape photo]</div>170        <div class="select-circle">171          <svg viewBox="0 0 24 24"><path d="M6 12l4 4 8-8"/></svg>172        </div>173      </div>174      <div class="thumb">175        <div class="img">[IMG: Plant by window]</div>176        <div class="select-circle selected">177          <svg viewBox="0 0 24 24"><path d="M6 12l4 4 8-8"/></svg>178        </div>179      </div>180      <div class="thumb">181        <div class="img">[IMG: Indoor plants in white planter]</div>182        <div class="select-circle selected">183          <svg viewBox="0 0 24 24"><path d="M6 12l4 4 8-8"/></svg>184        </div>185      </div>186    </div>187 188    <div class="section-title">August</div>189    <div class="grid">190      <div class="thumb">191        <div class="img">[IMG: Blurred note screenshot]</div>192        <div class="select-circle">193          <svg viewBox="0 0 24 24"><path d="M6 12l4 4 8-8"/></svg>194        </div>195      </div>196      <div class="thumb">197        <div class="img">[IMG: Triangle sketch]</div>198        <div class="select-circle">199          <svg viewBox="0 0 24 24"><path d="M6 12l4 4 8-8"/></svg>200        </div>201      </div>202      <div class="thumb">203        <div class="img">[IMG: Heart doodle]</div>204        <div class="select-circle">205          <svg viewBox="0 0 24 24"><path d="M6 12l4 4 8-8"/></svg>206        </div>207      </div>208    </div>209 210    <div class="section-title">July</div>211    <div class="grid">212      <div class="thumb">213        <div class="img">[IMG: Landscape view from window]</div>214        <div class="select-circle">215          <svg viewBox="0 0 24 24"><path d="M6 12l4 4 8-8"/></svg>216        </div>217      </div>218      <div></div>219      <div></div>220    </div>221  </div>222 223  <!-- Bottom Actions -->224  <div class="footer">225    <div class="btn outline">226      <svg viewBox="0 0 24 24" width="42" height="42" style="margin-right:12px; fill:currentColor;"><path d="M16 1H4a3 3 0 0 0-3 3v12h2V4a1 1 0 0 1 1-1h12V1ZM9 6h11a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H9Z"/></svg>227      Copy228    </div>229    <div class="btn filled">230      <svg viewBox="0 0 24 24" width="42" height="42" style="margin-right:12px; fill:#0b1021;"><path d="M5 11h9.59l-4.3-4.29L12 5l7 7-7 7-1.71-1.71 4.3-4.29H5v-2z"/></svg>231      Move232    </div>233  </div>234 235  <!-- Gesture bar -->236  <div class="gesture"></div>237</div>238</body>239</html>