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 - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #1f1a17;15    color: #e8e1d6;16  }17 18  /* Utility */19  .row { display: flex; align-items: center; }20  .spacer-24 { height: 24px; }21  .spacer-32 { height: 32px; }22  .muted { color: #b9b1a6; }23  .divider { height: 1px; background: #3b342f; margin: 18px 32px 0 32px; }24  .section-title { font-size: 22px; letter-spacing: 0.02em; margin: 24px 32px 12px 32px; }25  .uppercase { text-transform: uppercase; font-size: 18px; letter-spacing: 0.12em; color: #cfc6bb; margin: 28px 32px 16px 32px; }26 27  /* Status bar */28  .status-bar {29    height: 80px;30    padding: 0 28px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #f2ebdf;35    font-weight: 500;36  }37  .status-left { font-size: 38px; }38  .status-right { display: flex; gap: 18px; }39  .status-icon svg { width: 34px; height: 34px; fill: #f2ebdf; opacity: 0.9; }40 41  /* Search row */42  .search-row { padding: 8px 32px 0 32px; display: flex; align-items: center; gap: 22px; }43  .hamburger {44    width: 70px; height: 70px; border-radius: 18px;45    background: #2a241f; border: 1px solid #3b342f;46    display: flex; align-items: center; justify-content: center;47  }48  .hamburger svg { width: 40px; height: 40px; stroke: #e8e1d6; stroke-width: 6; }49  .search-input {50    flex: 1;51    height: 84px;52    border-radius: 28px;53    background: #2a241f;54    border: 1px solid #3b342f;55    display: flex; align-items: center; justify-content: space-between;56    padding: 0 26px;57    color: #d7cfc5;58    font-size: 32px;59  }60  .search-placeholder { opacity: 0.9; }61  .more-vert { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }62  .more-vert svg { width: 34px; height: 34px; fill: #d7cfc5; }63 64  /* Chips */65  .chips { padding: 20px 32px 8px 32px; display: flex; gap: 22px; }66  .chip {67    display: flex; align-items: center; gap: 16px;68    border-radius: 22px; padding: 18px 26px;69    background: #261f1c; border: 2px solid #3a3330;70    color: #e8e1d6; font-size: 30px;71  }72  .chip .icon {73    width: 46px; height: 46px; border-radius: 12px;74    display: flex; align-items: center; justify-content: center;75  }76  .chip.images { border-color: #f3b7bb55; }77  .chip.images .icon svg { fill: #f3b7bb; }78  .chip.audio { border-color: #c9a4f055; }79  .chip.audio .icon svg { fill: #c9a4f0; }80  .chip.videos { border-color: #8fd3a455; }81  .chip.videos .icon svg { fill: #8fd3a4; }82  .chip.docs { border-color: #8fdbe455; }83  .chip.docs .icon svg { fill: #8fdbe4; }84 85  /* Browse files apps */86  .apps { padding: 6px 32px 0 32px; display: flex; gap: 48px; align-items: flex-start; }87  .app-card { width: 200px; display: flex; flex-direction: column; align-items: center; gap: 12px; }88  .app-icon {89    width: 120px; height: 120px; border-radius: 28px;90    background: #2a241f; border: 1px solid #3b342f;91    display: flex; align-items: center; justify-content: center;92  }93  .app-icon svg { width: 74px; height: 74px; }94  .app-name { font-size: 26px; text-align: center; }95  .app-sub { font-size: 22px; color: #b9b1a6; text-align: center; }96  .grid-toggle { margin-left: auto; margin-right: 32px; width: 64px; height: 64px; border-radius: 16px; border: 1px solid #3b342f; display: flex; align-items: center; justify-content: center; background: #2a241f; }97  .grid-toggle svg { width: 36px; height: 36px; fill: #d7cfc5; }98 99  /* Recent list */100  .list { margin-top: 8px; }101  .list-item {102    display: flex; align-items: center;103    padding: 22px 32px;104    gap: 26px;105  }106  .file-icon {107    width: 72px; height: 96px; border-radius: 14px;108    display: flex; align-items: center; justify-content: center;109    font-size: 24px; font-weight: 700;110  }111  .file-icon.pdf { background: #d16a6a; color: #2b0f0f; }112  .file-icon.txt { background: #57c8d6; color: #0d2a2e; }113  .file-icon.img { background: #2a241f; border: 1px solid #3b342f; }114  .file-icon.img .thumb {115    width: 64px; height: 76px; background: #E0E0E0; border: 1px solid #BDBDBD;116    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 16px; border-radius: 8px;117  }118  .file-info { flex: 1; }119  .file-title { font-size: 30px; margin-bottom: 8px; }120  .file-sub { font-size: 24px; color: #b9b1a6; }121  .file-actions { display: flex; gap: 14px; flex-direction: column; }122  .btn-icon {123    width: 48px; height: 48px; border-radius: 12px; background: #2a241f; border: 1px solid #3b342f;124    display: flex; align-items: center; justify-content: center;125  }126  .btn-icon svg { width: 28px; height: 28px; fill: #d7cfc5; }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Status bar -->133  <div class="status-bar">134    <div class="status-left">7:40</div>135    <div class="status-right">136      <div class="status-icon">137        <!-- mail/message icon placeholder -->138        <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3zM4 6l8 5 8-5"/></svg>139      </div>140      <div class="status-icon">141        <!-- signal -->142        <svg viewBox="0 0 24 24"><path d="M2 20h2v-2H2zm4 0h2v-6H6zm4 0h2v-10h-2zm4 0h2V6h-2zm4 0h2V2h-2z"/></svg>143      </div>144      <div class="status-icon">145        <!-- cloud -->146        <svg viewBox="0 0 24 24"><path d="M6 18h11a4 4 0 0 0 0-8h-1a5 5 0 0 0-9-2 4 4 0 0 0-1 8z"/></svg>147      </div>148      <div class="status-icon">149        <!-- wifi -->150        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0M12 20l2-2-2-2-2 2z" stroke="#f2ebdf" fill="none" stroke-width="2"/></svg>151      </div>152      <div class="status-icon">153        <!-- battery -->154        <svg viewBox="0 0 24 24"><path d="M2 8h16v8H2z"/><path d="M18 10h3v4h-3z"/></svg>155      </div>156    </div>157  </div>158 159  <!-- Search -->160  <div class="search-row">161    <div class="hamburger">162      <svg viewBox="0 0 24 24" fill="none">163        <path d="M3 6h18M3 12h18M3 18h18" />164      </svg>165    </div>166    <div class="search-input">167      <div class="search-placeholder">Search this phone</div>168      <div class="more-vert">169        <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>170      </div>171    </div>172  </div>173 174  <!-- Chips -->175  <div class="chips">176    <div class="chip images">177      <div class="icon">178        <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3zM6 12l3-3 4 5 3-4 2 3"/></svg>179      </div>180      Images181    </div>182    <div class="chip audio">183      <div class="icon">184        <svg viewBox="0 0 24 24"><path d="M6 5v12a4 4 0 1 0 4-4V7h8V5z"/></svg>185      </div>186      Audio187    </div>188    <div class="chip videos">189      <div class="icon">190        <svg viewBox="0 0 24 24"><path d="M3 5h14v14H3z"/><path d="M17 9l4-2v10l-4-2z"/></svg>191      </div>192      Videos193    </div>194    <div class="chip docs">195      <div class="icon">196        <svg viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6z"/><path d="M15 3v5h5"/></svg>197      </div>198      Documents199    </div>200  </div>201 202  <div class="uppercase">Browse files in other apps</div>203 204  <!-- Apps -->205  <div class="apps">206    <div class="app-card">207      <div class="app-icon">208        <!-- bug reports icon -->209        <svg viewBox="0 0 24 24" fill="#8fdbe4"><path d="M11 4l1-2 1 2h2l1 2-2 2v10H9V8L7 6l1-2z"/><path d="M4 12h16M6 16h12"/></svg>210      </div>211      <div class="app-name">Bug reports</div>212    </div>213    <div class="app-card">214      <div class="app-icon">215        <!-- Drive icon simplified -->216        <svg viewBox="0 0 24 24"><path d="M8 4l4-1 4 1 4 6-4 6H8L4 10z" fill="#8fd3a4"/></svg>217      </div>218      <div class="app-name">Drive</div>219      <div class="app-sub">dbwscratch.test.id…</div>220    </div>221    <div class="app-card">222      <div class="app-icon">223        <svg viewBox="0 0 24 24"><path d="M8 4l4-1 4 1 4 6-4 6H8L4 10z" fill="#8fd3a4"/></svg>224      </div>225      <div class="app-name">Drive</div>226      <div class="app-sub">naomirousseau5@…</div>227    </div>228    <div class="app-card">229      <div class="app-icon">230        <!-- Dropbox simplified -->231        <svg viewBox="0 0 24 24" fill="#57c8d6"><path d="M6 5l6 4-6 4-6-4zM18 5l6 4-6 4-6-4zM6 17l6-4 6 4-6 4z"/></svg>232      </div>233      <div class="app-name">Dropbox</div>234    </div>235    <div class="grid-toggle">236      <svg viewBox="0 0 24 24"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg>237    </div>238  </div>239 240  <!-- Recent files -->241  <div class="section-title">Recent files</div>242 243  <div class="list">244    <div class="list-item">245      <div class="file-icon pdf">PDF</div>246      <div class="file-info">247        <div class="file-title">Italy file.pdf</div>248        <div class="file-sub">Nov 16, 25.87 MB, PDF document</div>249      </div>250      <div class="file-actions">251        <div class="btn-icon">252          <!-- open in full -->253          <svg viewBox="0 0 24 24"><path d="M4 13v7h7v-2H6v-5zM20 11V4h-7v2h5v5zM9 15l6-6"/></svg>254        </div>255        <div class="btn-icon">256          <!-- expand arrows -->257          <svg viewBox="0 0 24 24"><path d="M4 4h7v2H6v5H4zM20 20h-7v-2h5v-5h2z"/></svg>258        </div>259      </div>260    </div>261    <div class="divider"></div>262 263    <div class="list-item">264      <div class="file-icon pdf">PDF</div>265      <div class="file-info">266        <div class="file-title">Amsterdam-2.pdf</div>267        <div class="file-sub">Nov 16, 8.45 MB, PDF document</div>268      </div>269      <div class="file-actions">270        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 13v7h7v-2H6v-5zM20 11V4h-7v2h5v5zM9 15l6-6"/></svg></div>271        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 4h7v2H6v5H4zM20 20h-7v-2h5v-5h2z"/></svg></div>272      </div>273    </div>274    <div class="divider"></div>275 276    <div class="list-item">277      <div class="file-icon txt">278        <!-- doc icon -->279        <svg viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6zM15 3v5h5" fill="#0d2a2e"/></svg>280      </div>281      <div class="file-info">282        <div class="file-title">screenshot.txt</div>283        <div class="file-sub">Nov 16, 375 kB, TXT document</div>284      </div>285      <div class="file-actions">286        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 13v7h7v-2H6v-5zM20 11V4h-7v2h5v5zM9 15l6-6"/></svg></div>287        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 4h7v2H6v5H4zM20 20h-7v-2h5v-5h2z"/></svg></div>288      </div>289    </div>290    <div class="divider"></div>291 292    <div class="list-item">293      <div class="file-icon txt">294        <svg viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6zM15 3v5h5" fill="#0d2a2e"/></svg>295      </div>296      <div class="file-info">297        <div class="file-title">actuation_result.txt</div>298        <div class="file-sub">Nov 16, 8 B, TXT document</div>299      </div>300      <div class="file-actions">301        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 13v7h7v-2H6v-5zM20 11V4h-7v2h5v5zM9 15l6-6"/></svg></div>302        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 4h7v2H6v5H4zM20 20h-7v-2h5v-5h2z"/></svg></div>303      </div>304    </div>305    <div class="divider"></div>306 307    <div class="list-item">308      <div class="file-icon txt">309        <svg viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6zM15 3v5h5" fill="#0d2a2e"/></svg>310      </div>311      <div class="file-info">312        <div class="file-title">os_info.txt</div>313        <div class="file-sub">Nov 16, 32 B, TXT document</div>314      </div>315      <div class="file-actions">316        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 13v7h7v-2H6v-5zM20 11V4h-7v2h5v5zM9 15l6-6"/></svg></div>317        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 4h7v2H6v5H4zM20 20h-7v-2h5v-5h2z"/></svg></div>318      </div>319    </div>320    <div class="divider"></div>321 322    <div class="list-item">323      <div class="file-icon txt">324        <svg viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6zM15 3v5h5" fill="#0d2a2e"/></svg>325      </div>326      <div class="file-info">327        <div class="file-title">agents.txt</div>328        <div class="file-sub">Nov 16, 1.15 kB, TXT document</div>329      </div>330      <div class="file-actions">331        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 13v7h7v-2H6v-5zM20 11V4h-7v2h5v5zM9 15l6-6"/></svg></div>332        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 4h7v2H6v5H4zM20 20h-7v-2h5v-5h2z"/></svg></div>333      </div>334    </div>335    <div class="divider"></div>336 337    <div class="list-item">338      <div class="file-icon img">339        <div class="thumb">[IMG: PNG]</div>340      </div>341      <div class="file-info">342        <div class="file-title">fitbitshare_2123586381.PNG</div>343        <div class="file-sub">Oct 30, 93.48 kB, PNG image</div>344      </div>345      <div class="file-actions">346        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 13v7h7v-2H6v-5zM20 11V4h-7v2h5v5zM9 15l6-6"/></svg></div>347        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 4h7v2H6v5H4zM20 20h-7v-2h5v-5h2z"/></svg></div>348      </div>349    </div>350    <div class="divider"></div>351 352    <div class="list-item">353      <div class="file-icon img">354        <div class="thumb">[IMG: PNG]</div>355      </div>356      <div class="file-info">357        <div class="file-title">fitbitshare_2123101703.PNG</div>358        <div class="file-sub">Oct 30, PNG image</div>359      </div>360      <div class="file-actions">361        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 13v7h7v-2H6v-5zM20 11V4h-7v2h5v5zM9 15l6-6"/></svg></div>362        <div class="btn-icon"><svg viewBox="0 0 24 24"><path d="M4 4h7v2H6v5H4zM20 20h-7v-2h5v-5h2z"/></svg></div>363      </div>364    </div>365  </div>366 367</div>368</body>369</html>