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>Files - Selection UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #2a221f; color: #eee;13    font-family: "Segoe UI", Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 80px; padding: 0 32px;20    display: flex; align-items: center; justify-content: space-between;21    font-size: 32px; color: #f0f0f0;22  }23  .status-right { display: flex; align-items: center; gap: 22px; }24  .status-icon svg { width: 36px; height: 36px; fill: none; stroke: #e8e8e8; stroke-width: 2.5; }25 26  /* App bar */27  .app-bar {28    position: absolute; top: 80px; left: 0; right: 0;29    height: 140px; padding: 0 28px;30    display: flex; align-items: center; justify-content: space-between;31  }32  .app-left { display: flex; align-items: center; gap: 24px; }33  .app-left .icon-btn { width: 64px; height: 64px; border-radius: 32px; display: grid; place-items: center; }34  .app-left .icon-btn svg { width: 40px; height: 40px; stroke: #e9e3de; stroke-width: 4; }35  .app-title { font-size: 48px; font-weight: 600; letter-spacing: 0.5px; }36  .app-right { display: flex; align-items: center; gap: 24px; }37  .app-right .action { font-size: 40px; color: #e9e3de; }38  .ellipsis { width: 48px; height: 48px; display: grid; place-items: center; }39  .ellipsis svg { width: 12px; height: 36px; fill: #d9cdc4; }40 41  /* Filter chips */42  .filters {43    position: absolute; top: 220px; left: 0; right: 0;44    padding: 8px 28px 0;45    display: flex; gap: 18px;46  }47  .pill {48    display: flex; align-items: center; gap: 16px;49    border: 2px solid #3f3530; color: #e6ddd6;50    border-radius: 28px; padding: 16px 22px;51    font-size: 34px; background: rgba(255,255,255,0.03);52  }53  .pill .picon { width: 44px; height: 44px; display: grid; place-items: center; }54  .pill svg { width: 36px; height: 36px; }55 56  /* Section headers */57  .section-label {58    position: absolute; top: 340px; left: 32px;59    font-size: 26px; letter-spacing: 2px; color: #b5a79e;60  }61 62  /* Other apps row */63  .apps-row {64    position: absolute; top: 392px; left: 0; right: 0;65    padding: 0 32px;66    display: flex; gap: 48px; align-items: flex-start;67  }68  .app-icon {69    width: 128px; display: flex; flex-direction: column; align-items: center; gap: 16px;70  }71  .app-icon .circle {72    width: 104px; height: 104px; border-radius: 52px;73    display: grid; place-items: center; border: 2px solid #4a3f39;74    background: #3a302b;75  }76  .app-icon .label { font-size: 30px; color: #e6ddd6; text-align: center; }77 78  /* Recent files header */79  .recent-label {80    position: absolute; top: 560px; left: 32px;81    font-size: 32px; color: #d9cdc4;82  }83 84  /* File list */85  .file-list {86    position: absolute; top: 610px; left: 0; right: 0; bottom: 0;87    padding: 0 0; overflow: hidden;88  }89  .file-item {90    display: flex; align-items: center;91    padding: 32px 32px;92    border-top: 1px solid #3a2f2b;93    border-bottom: 1px solid #3a2f2b;94    height: 160px;95  }96  .file-item.selected { background: #3b281f; }97  .left-check {98    width: 80px; display: grid; place-items: center; margin-right: 8px;99  }100  .check-icon { width: 56px; height: 56px; }101  .doc-icon {102    width: 80px; height: 80px; border-radius: 14px;103    display: grid; place-items: center; margin-right: 28px;104    font-weight: 700; font-size: 26px;105  }106  .doc-pdf { background: #c96b6b; color: #fff; }107  .doc-txt { background: #4a7fa5; color: #fff; }108  .doc-generic { background: #6b8cc9; color: #fff; }109  .file-details { flex: 1; display: flex; flex-direction: column; gap: 8px; }110  .file-title { font-size: 40px; color: #f2ece7; }111  .file-meta { font-size: 28px; color: #c7bdb6; }112  .file-actions { width: 100px; display: grid; place-items: center; }113  .expand-btn {114    width: 56px; height: 56px; border-radius: 12px;115    border: 2px solid #4a3f39; display: grid; place-items: center;116  }117  .expand-btn svg { width: 36px; height: 36px; stroke: #d9cdc4; stroke-width: 2.5; fill: none; }118 119  /* Divider accent for selected region */120  .thin-divider { height: 2px; background: #4a3f39; margin: 0 32px; }121 122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status bar -->128  <div class="status-bar">129    <div class="status-left">8:43</div>130    <div class="status-right">131      <span style="font-size:28px; color:#cfc6bf;">20°</span>132      <span class="status-icon">133        <svg viewBox="0 0 24 24"><path d="M12 2l2 4-2 4-2-4 2-4zM4 8l2 4-2 4-2-4 2-4zm16 0l2 4-2 4-2-4 2-4zM12 14l2 4-2 4-2-4 2-4z"/></svg>134      </span>135      <span class="status-icon">136        <svg viewBox="0 0 24 24"><path d="M3 18c3-3 6-4 9-4s6 1 9 4"/><circle cx="12" cy="18" r="2"/></svg>137      </span>138      <span class="status-icon">139        <svg viewBox="0 0 24 24"><path d="M2 7h20v10H2z"/><path d="M22 7v10" /></svg>140      </span>141      <span class="status-icon">142        <svg viewBox="0 0 24 24"><path d="M7 20h10" /><path d="M8 4h8l1 10H7l1-10z"/></svg>143      </span>144    </div>145  </div>146 147  <!-- App bar -->148  <div class="app-bar">149    <div class="app-left">150      <div class="icon-btn">151        <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>152      </div>153      <div class="app-title">1 selected</div>154    </div>155    <div class="app-right">156      <div class="action">Select</div>157      <div class="ellipsis">158        <svg viewBox="0 0 6 18"><circle cx="3" cy="3" r="3"/><circle cx="3" cy="9" r="3"/><circle cx="3" cy="15" r="3"/></svg>159      </div>160    </div>161  </div>162 163  <!-- Filters -->164  <div class="filters">165    <div class="pill">166      <div class="picon">167        <svg viewBox="0 0 24 24" stroke="#f08a8a" fill="none" stroke-width="2.2">168          <rect x="3" y="5" width="18" height="14" rx="2"></rect>169          <path d="M7 15l4-4 4 4"></path>170          <circle cx="9" cy="9" r="1.5"></circle>171        </svg>172      </div>173      Images174    </div>175    <div class="pill">176      <div class="picon">177        <svg viewBox="0 0 24 24" stroke="#ae88f0" fill="none" stroke-width="2.2">178          <path d="M9 4v12a3 3 0 1 0 3-3h-3"></path>179        </svg>180      </div>181      Audio182    </div>183    <div class="pill">184      <div class="picon">185        <svg viewBox="0 0 24 24" stroke="#7bd27f" fill="none" stroke-width="2">186          <rect x="3" y="6" width="18" height="12" rx="2"></rect>187          <path d="M3 10h18" stroke="#7bd27f"></path>188          <path d="M10 9l6 3-6 3z" fill="#7bd27f" stroke="none"></path>189        </svg>190      </div>191      Videos192    </div>193    <div class="pill">194      <div class="picon">195        <svg viewBox="0 0 24 24" stroke="#58c7c2" fill="none" stroke-width="2.2">196          <path d="M6 3h9l3 3v15H6z"></path>197          <path d="M15 3v3h3"></path>198        </svg>199      </div>200      Documents201    </div>202  </div>203 204  <!-- Section label -->205  <div class="section-label">BROWSE FILES IN OTHER APPS</div>206 207  <!-- Other apps -->208  <div class="apps-row">209    <div class="app-icon">210      <div class="circle">211        <svg viewBox="0 0 48 48" width="64" height="64">212          <rect x="6" y="8" width="36" height="28" rx="4" fill="#f08a8a"></rect>213          <path d="M8 26l8-6 8 6 8-4 8 6" stroke="#fff" stroke-width="3" fill="none"/>214        </svg>215      </div>216      <div class="label">Gallery</div>217    </div>218    <div class="app-icon">219      <div class="circle">220        <svg viewBox="0 0 48 48" width="64" height="64">221          <path d="M20 6v24a8 8 0 1 0 8-8h-8" stroke="#ae88f0" stroke-width="4" fill="none"/>222        </svg>223      </div>224      <div class="label">Media</div>225    </div>226    <div class="app-icon">227      <div class="circle">228        <svg viewBox="0 0 48 48" width="64" height="64">229          <circle cx="24" cy="24" r="18" fill="#7bd27f"></circle>230          <polygon points="20,16 34,24 20,32" fill="#2a221f"></polygon>231        </svg>232      </div>233      <div class="label">Photos</div>234    </div>235    <div class="app-icon">236      <div class="circle">237        <svg viewBox="0 0 48 48" width="64" height="64">238          <rect x="10" y="8" width="28" height="32" rx="4" fill="#d2453f"></rect>239          <path d="M28 8v8h8" stroke="#fff" stroke-width="3" fill="none"/>240        </svg>241      </div>242      <div class="label">Adobe Acro...</div>243    </div>244  </div>245 246  <!-- Recent files -->247  <div class="recent-label">Recent files</div>248 249  <div class="file-list">250    <div class="file-item">251      <div class="left-check" style="visibility:hidden;">252        <svg class="check-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#c5b8af" stroke-width="2" fill="none"/><path d="M7 12l3 3 7-7" stroke="#c5b8af" stroke-width="2" fill="none"/></svg>253      </div>254      <div class="doc-icon doc-pdf">PDF</div>255      <div class="file-details">256        <div class="file-title">Summer Dance Workshop.pdf</div>257        <div class="file-meta">8:12 AM, 133 kB, PDF document</div>258      </div>259      <div class="file-actions">260        <div class="expand-btn">261          <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6"/></svg>262        </div>263      </div>264    </div>265 266    <div class="file-item selected">267      <div class="left-check">268        <svg class="check-icon" viewBox="0 0 24 24">269          <circle cx="12" cy="12" r="10" stroke="#e1d2c7" stroke-width="2" fill="none"/>270          <path d="M7 12l3 3 7-7" stroke="#e1d2c7" stroke-width="2" fill="none"/>271        </svg>272      </div>273      <div class="doc-icon doc-pdf">PDF</div>274      <div class="file-details">275        <div class="file-title">Rome Itinerary.pdf</div>276        <div class="file-meta">8:11 AM, 1.99 MB, PDF document</div>277      </div>278      <div class="file-actions">279        <div class="expand-btn">280          <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6"/></svg>281        </div>282      </div>283    </div>284 285    <div class="file-item">286      <div class="left-check" style="visibility:hidden;">287        <svg class="check-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#c5b8af" stroke-width="2" fill="none"/><path d="M7 12l3 3 7-7" stroke="#c5b8af" stroke-width="2" fill="none"/></svg>288      </div>289      <div class="doc-icon doc-pdf">PDF</div>290      <div class="file-details">291        <div class="file-title">Yale courses.pdf</div>292        <div class="file-meta">8:10 AM, 65.36 kB, PDF document</div>293      </div>294      <div class="file-actions">295        <div class="expand-btn">296          <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6"/></svg>297        </div>298      </div>299    </div>300 301    <div class="file-item">302      <div class="left-check" style="visibility:hidden;">303        <svg class="check-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#c5b8af" stroke-width="2" fill="none"/><path d="M7 12l3 3 7-7" stroke="#c5b8af" stroke-width="2" fill="none"/></svg>304      </div>305      <div class="doc-icon doc-pdf">PDF</div>306      <div class="file-details">307        <div class="file-title">ycps-2021-2022.pdf</div>308        <div class="file-meta">8:09 AM, 5.79 MB, PDF document</div>309      </div>310      <div class="file-actions">311        <div class="expand-btn">312          <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6"/></svg>313        </div>314      </div>315    </div>316 317    <div class="file-item">318      <div class="left-check" style="visibility:hidden;">319        <svg class="check-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#c5b8af" stroke-width="2" fill="none"/><path d="M7 12l3 3 7-7" stroke="#c5b8af" stroke-width="2" fill="none"/></svg>320      </div>321      <div class="doc-icon doc-txt">TXT</div>322      <div class="file-details">323        <div class="file-title">screenshot.txt</div>324        <div class="file-meta">Nov 7, 426 kB, TXT document</div>325      </div>326      <div class="file-actions">327        <div class="expand-btn">328          <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6"/></svg>329        </div>330      </div>331    </div>332 333    <div class="file-item">334      <div class="left-check" style="visibility:hidden;">335        <svg class="check-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#c5b8af" stroke-width="2" fill="none"/><path d="M7 12l3 3 7-7" stroke="#c5b8af" stroke-width="2" fill="none"/></svg>336      </div>337      <div class="doc-icon doc-txt">TXT</div>338      <div class="file-details">339        <div class="file-title">actuation_result.txt</div>340        <div class="file-meta">Nov 7, 8 B, TXT document</div>341      </div>342      <div class="file-actions">343        <div class="expand-btn">344          <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6"/></svg>345        </div>346      </div>347    </div>348 349    <div class="file-item">350      <div class="left-check" style="visibility:hidden;">351        <svg class="check-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#c5b8af" stroke-width="2" fill="none"/><path d="M7 12l3 3 7-7" stroke="#c5b8af" stroke-width="2" fill="none"/></svg>352      </div>353      <div class="doc-icon doc-txt">TXT</div>354      <div class="file-details">355        <div class="file-title">agents.txt</div>356        <div class="file-meta">Nov 7, 1.15 kB, TXT document</div>357      </div>358      <div class="file-actions">359        <div class="expand-btn">360          <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6"/></svg>361        </div>362      </div>363    </div>364 365    <div class="file-item">366      <div class="left-check" style="visibility:hidden;">367        <svg class="check-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#c5b8af" stroke-width="2" fill="none"/><path d="M7 12l3 3 7-7" stroke="#c5b8af" stroke-width="2" fill="none"/></svg>368      </div>369      <div class="doc-icon doc-txt">TXT</div>370      <div class="file-details">371        <div class="file-title">os_info.txt</div>372        <div class="file-meta">Nov 7, 32 B, TXT document</div>373      </div>374      <div class="file-actions">375        <div class="expand-btn">376          <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6"/></svg>377        </div>378      </div>379    </div>380 381  </div>382 383</div>384</body>385</html>