GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android Files UI - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1440px; height: 3120px;9    position: relative; overflow: hidden;10    background: #121212; color: #EAEAEA;11  }12 13  /* Status bar */14  .status-bar {15    height: 120px;16    padding: 0 40px;17    display: flex; align-items: center; justify-content: space-between;18    color: #EAEAEA; font-weight: 600; font-size: 48px;19  }20  .status-icons { display: flex; align-items: center; gap: 24px; }21  .sb-icon { width: 48px; height: 48px; opacity: 0.9; }22  .battery {23    width: 70px; height: 36px; border: 3px solid #EAEAEA; border-radius: 6px; position: relative;24  }25  .battery::after { content: ""; position: absolute; right: -14px; top: 10px; width: 10px; height: 16px; background: #EAEAEA; border-radius: 2px; }26  .battery-fill { position: absolute; left: 4px; top: 4px; height: 24px; width: 46px; background: #EAEAEA; }27 28  /* App bar with search */29  .app-bar { padding: 10px 40px 30px 40px; }30  .search-row { display: flex; align-items: center; gap: 32px; }31  .hamburger {32    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 18px;33    background: #1F1F1F;34  }35  .hamburger svg { width: 60px; height: 60px; }36  .search-field {37    flex: 1; height: 120px; border-radius: 28px; background: #1E1E1E; border: 1px solid #2A2A2A;38    display: flex; align-items: center; padding: 0 40px; font-size: 48px; color: #BDBDBD;39  }40  .dots {41    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 18px;42    background: #1F1F1F;43  }44 45  /* Chips */46  .chip-row { display: flex; gap: 24px; padding: 36px 0 10px 0; }47  .chip {48    display: inline-flex; align-items: center; gap: 18px;49    padding: 24px 34px; border-radius: 26px;50    background: #1E1E1E; border: 1px solid #2E2E2E; color: #DADADA; font-size: 44px;51  }52  .chip.selected { background: #263B2B; border-color: #2B5D3B; color: #C9F3D1; }53  .chip-icon {54    width: 52px; height: 52px; border-radius: 10px; background: #303030; display: inline-flex; align-items: center; justify-content: center;55  }56 57  /* Section header */58  .section-title { margin-top: 30px; font-size: 42px; color: #C5C5C5; letter-spacing: 0.5px; }59 60  /* Round app shortcuts */61  .app-shortcuts {62    display: flex; gap: 120px; padding: 40px 0 20px 0; align-items: center;63  }64  .shortcut {65    width: 190px; display: flex; flex-direction: column; align-items: center; gap: 22px;66    color: #DADADA; font-size: 46px;67  }68  .shortcut .circle {69    width: 160px; height: 160px; border-radius: 50%; background: #1F1F1F; border: 1px solid #2A2A2A;70    display: flex; align-items: center; justify-content: center;71  }72 73  /* Files header */74  .files-header {75    display: flex; align-items: center; justify-content: space-between;76    margin-top: 20px; padding-right: 40px;77  }78  .files-header h2 { font-size: 56px; margin: 0; }79  .grid-btn {80    width: 86px; height: 86px; border-radius: 14px; background: #1F1F1F; border: 1px solid #2A2A2A;81    display: flex; align-items: center; justify-content: center;82  }83 84  /* File list */85  .files-list { margin-top: 10px; border-top: 1px solid #2A2A2A; }86  .file-item {87    display: grid;88    grid-template-columns: 140px 1fr 220px;89    align-items: center;90    padding: 40px;91    border-bottom: 1px solid #2A2A2A;92  }93  .file-icon.doc {94    width: 86px; height: 100px; border: 3px solid #7AD5F8; border-radius: 12px; position: relative;95    background: #17232C;96  }97  .file-icon.doc::after {98    content: ""; position: absolute; right: 0; top: 0; width: 28px; height: 28px; background: #7AD5F8;99    clip-path: polygon(0 0, 100% 0, 100% 100%);100    border-top-right-radius: 10px;101  }102  .file-icon.pdf {103    width: 86px; height: 100px; border-radius: 12px; background: #DA5B57; display: flex; align-items: center; justify-content: center;104    color: #fff; font-weight: 700; font-size: 40px;105  }106 107  .file-meta { display: flex; flex-direction: column; gap: 16px; }108  .file-title { font-size: 56px; font-weight: 700; color: #FFFFFF; }109  .file-sub { font-size: 40px; color: #A0A0A0; }110 111  .actions {112    display: grid; grid-template-columns: 1fr 1fr; gap: 26px;113    justify-items: end;114  }115  .action-btn {116    width: 86px; height: 86px; border-radius: 14px; background: #1F1F1F; border: 1px solid #2A2A2A;117    display: flex; align-items: center; justify-content: center;118  }119  .action-btn svg { width: 50px; height: 50px; }120 121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Status bar -->127  <div class="status-bar">128    <div>9:44</div>129    <div class="status-icons">130      <!-- simple icons -->131      <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="none" stroke="#EAEAEA" stroke-width="3"/></svg>132      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3" fill="none" stroke="#EAEAEA" stroke-width="3"/><path d="M5 12h14" stroke="#EAEAEA" stroke-width="3"/></svg>133      <div class="battery"><div class="battery-fill"></div></div>134    </div>135  </div>136 137  <!-- App bar & search -->138  <div class="app-bar">139    <div class="search-row">140      <div class="hamburger">141        <svg viewBox="0 0 24 24">142          <path d="M3 5h18M3 12h18M3 19h18" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round"/>143        </svg>144      </div>145      <div class="search-field">Search this phone</div>146      <div class="dots">147        <svg viewBox="0 0 24 24">148          <circle cx="5" cy="12" r="2.5" fill="#EAEAEA"/><circle cx="12" cy="12" r="2.5" fill="#EAEAEA"/><circle cx="19" cy="12" r="2.5" fill="#EAEAEA"/>149        </svg>150      </div>151    </div>152 153    <!-- Chips -->154    <div class="chip-row">155      <div class="chip selected">156        <div class="chip-icon">157          <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2" fill="none" stroke="#C9F3D1" stroke-width="2"/><path d="M7 9h10M7 13h10" stroke="#C9F3D1" stroke-width="2"/></svg>158        </div>159        Documents160      </div>161      <div class="chip">162        <div class="chip-icon">163          <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" fill="none" stroke="#BDBDBD" stroke-width="2"/><circle cx="12" cy="12" r="5" fill="none" stroke="#BDBDBD" stroke-width="2"/></svg>164        </div>165        Images166      </div>167      <div class="chip">168        <div class="chip-icon">169          <svg viewBox="0 0 24 24"><path d="M4 18V6l8 6 8-6v12l-8-6-8 6z" fill="none" stroke="#BDBDBD" stroke-width="2"/></svg>170        </div>171        Audio172      </div>173      <div class="chip">174        <div class="chip-icon">175          <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2" fill="none" stroke="#BDBDBD" stroke-width="2"/><path d="M8 16h8" stroke="#BDBDBD" stroke-width="2"/></svg>176        </div>177        Videos178      </div>179    </div>180 181    <div class="section-title">BROWSE FILES IN OTHER APPS</div>182 183    <!-- Shortcuts row -->184    <div class="app-shortcuts">185      <div class="shortcut">186        <div class="circle">187          <svg viewBox="0 0 24 24">188            <rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#DADADA" stroke-width="2"/>189            <path d="M4 12h16" stroke="#DADADA" stroke-width="2"/>190          </svg>191        </div>192        Media193      </div>194      <div class="shortcut">195        <div class="circle">196          <svg viewBox="0 0 24 24">197            <circle cx="12" cy="12" r="7" fill="none" stroke="#DADADA" stroke-width="2"/>198            <circle cx="12" cy="12" r="2.5" fill="#DADADA"/>199          </svg>200        </div>201        Photos202      </div>203      <div class="shortcut">204        <div class="circle">205          <svg viewBox="0 0 24 24">206            <rect x="6" y="4" width="12" height="16" rx="2" fill="none" stroke="#DADADA" stroke-width="2"/>207            <path d="M12 8v8M8 12h8" stroke="#DADADA" stroke-width="2"/>208          </svg>209        </div>210        Bug reports211      </div>212      <div class="shortcut">213        <div class="circle">214          <svg viewBox="0 0 24 24">215            <path d="M12 3l4 6-4 12-4-12 4-6z" fill="none" stroke="#DADADA" stroke-width="2"/>216          </svg>217        </div>218        System traces219      </div>220    </div>221 222    <!-- Files header -->223    <div class="files-header">224      <h2>Files</h2>225      <div class="grid-btn">226        <svg viewBox="0 0 24 24">227          <rect x="3" y="3" width="8" height="8" fill="none" stroke="#EAEAEA" stroke-width="2"/>228          <rect x="13" y="3" width="8" height="8" fill="none" stroke="#EAEAEA" stroke-width="2"/>229          <rect x="3" y="13" width="8" height="8" fill="none" stroke="#EAEAEA" stroke-width="2"/>230          <rect x="13" y="13" width="8" height="8" fill="none" stroke="#EAEAEA" stroke-width="2"/>231        </svg>232      </div>233    </div>234  </div>235 236  <!-- File list -->237  <div class="files-list">238 239    <div class="file-item">240      <div class="file-icon doc"></div>241      <div class="file-meta">242        <div class="file-title">screenshot.txt</div>243        <div class="file-sub">Nov 7, 483 kB, TXT document</div>244      </div>245      <div class="actions">246        <div class="action-btn">247          <svg viewBox="0 0 24 24">248            <path d="M8 8h8v8H8z" fill="none" stroke="#EAEAEA" stroke-width="2"/>249            <path d="M12 5v5M12 19v-5M5 12h5M19 12h-5" stroke="#EAEAEA" stroke-width="2"/>250          </svg>251        </div>252        <div class="action-btn">253          <svg viewBox="0 0 24 24">254            <path d="M6 6h12v12H6z" fill="none" stroke="#EAEAEA" stroke-width="2"/>255            <path d="M9 9l6 6M15 9l-6 6" stroke="#EAEAEA" stroke-width="2"/>256          </svg>257        </div>258      </div>259    </div>260 261    <div class="file-item">262      <div class="file-icon doc"></div>263      <div class="file-meta">264        <div class="file-title">actuation_result.txt</div>265        <div class="file-sub">Nov 7, 8 B, TXT document</div>266      </div>267      <div class="actions">268        <div class="action-btn">269          <svg viewBox="0 0 24 24"><path d="M8 8h8v8H8z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M12 5v5M12 19v-5M5 12h5M19 12h-5" stroke="#EAEAEA" stroke-width="2"/></svg>270        </div>271        <div class="action-btn">272          <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M9 9l6 6M15 9l-6 6" stroke="#EAEAEA" stroke-width="2"/></svg>273        </div>274      </div>275    </div>276 277    <div class="file-item">278      <div class="file-icon doc"></div>279      <div class="file-meta">280        <div class="file-title">agents.txt</div>281        <div class="file-sub">Nov 7, 1.15 kB, TXT document</div>282      </div>283      <div class="actions">284        <div class="action-btn">285          <svg viewBox="0 0 24 24"><path d="M8 8h8v8H8z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M12 5v5M12 19v-5M5 12h5M19 12h-5" stroke="#EAEAEA" stroke-width="2"/></svg>286        </div>287        <div class="action-btn">288          <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M9 9l6 6M15 9l-6 6" stroke="#EAEAEA" stroke-width="2"/></svg>289        </div>290      </div>291    </div>292 293    <div class="file-item">294      <div class="file-icon doc"></div>295      <div class="file-meta">296        <div class="file-title">os_info.txt</div>297        <div class="file-sub">Nov 7, 32 B, TXT document</div>298      </div>299      <div class="actions">300        <div class="action-btn">301          <svg viewBox="0 0 24 24"><path d="M8 8h8v8H8z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M12 5v5M12 19v-5M5 12h5M19 12h-5" stroke="#EAEAEA" stroke-width="2"/></svg>302        </div>303        <div class="action-btn">304          <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M9 9l6 6M15 9l-6 6" stroke="#EAEAEA" stroke-width="2"/></svg>305        </div>306      </div>307    </div>308 309    <div class="file-item">310      <div class="file-icon pdf">PDF</div>311      <div class="file-meta">312        <div class="file-title">Shopping list.pdf</div>313        <div class="file-sub">Oct 9, 776 B, PDF document</div>314      </div>315      <div class="actions">316        <div class="action-btn">317          <svg viewBox="0 0 24 24"><path d="M8 8h8v8H8z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M12 5v5M12 19v-5M5 12h5M19 12h-5" stroke="#EAEAEA" stroke-width="2"/></svg>318        </div>319        <div class="action-btn">320          <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M9 9l6 6M15 9l-6 6" stroke="#EAEAEA" stroke-width="2"/></svg>321        </div>322      </div>323    </div>324 325    <div class="file-item">326      <div class="file-icon pdf">PDF</div>327      <div class="file-meta">328        <div class="file-title">08.24_dinner-veg (3).pdf</div>329        <div class="file-sub">Aug 25, 257 kB, PDF document</div>330      </div>331      <div class="actions">332        <div class="action-btn">333          <svg viewBox="0 0 24 24"><path d="M8 8h8v8H8z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M12 5v5M12 19v-5M5 12h5M19 12h-5" stroke="#EAEAEA" stroke-width="2"/></svg>334        </div>335        <div class="action-btn">336          <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M9 9l6 6M15 9l-6 6" stroke="#EAEAEA" stroke-width="2"/></svg>337        </div>338      </div>339    </div>340 341    <div class="file-item">342      <div class="file-icon pdf">PDF</div>343      <div class="file-meta">344        <div class="file-title">08.24_dinner (4).pdf</div>345        <div class="file-sub">Aug 25, 278 kB, PDF document</div>346      </div>347      <div class="actions">348        <div class="action-btn">349          <svg viewBox="0 0 24 24"><path d="M8 8h8v8H8z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M12 5v5M12 19v-5M5 12h5M19 12h-5" stroke="#EAEAEA" stroke-width="2"/></svg>350        </div>351        <div class="action-btn">352          <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M9 9l6 6M15 9l-6 6" stroke="#EAEAEA" stroke-width="2"/></svg>353        </div>354      </div>355    </div>356 357    <div class="file-item">358      <div class="file-icon pdf">PDF</div>359      <div class="file-meta">360        <div class="file-title">08.24_dinner-veg (2).pdf</div>361        <div class="file-sub">Aug 25, PDF document</div>362      </div>363      <div class="actions">364        <div class="action-btn">365          <svg viewBox="0 0 24 24"><path d="M8 8h8v8H8z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M12 5v5M12 19v-5M5 12h5M19 12h-5" stroke="#EAEAEA" stroke-width="2"/></svg>366        </div>367        <div class="action-btn">368          <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z" fill="none" stroke="#EAEAEA" stroke-width="2"/><path d="M9 9l6 6M15 9l-6 6" stroke="#EAEAEA" stroke-width="2"/></svg>369        </div>370      </div>371    </div>372 373  </div>374 375</div>376</body>377</html>