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>File Manager - doc x (1)</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #17181B;15    color: #EDEDED;16    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #0F1115;27    display: flex;28    align-items: center;29    padding: 0 36px;30    box-sizing: border-box;31  }32  .status-time {33    font-size: 40px;34    font-weight: 600;35    letter-spacing: 0.5px;36    color: #F5F5F5;37  }38  .status-icons {39    margin-left: auto;40    display: flex;41    align-items: center;42    gap: 26px;43  }44  .icon {45    width: 42px;46    height: 42px;47    display: inline-flex;48    align-items: center;49    justify-content: center;50    opacity: 0.9;51  }52  .icon svg { width: 100%; height: 100%; fill: #F3F4F6; }53 54  /* App bar */55  .app-bar {56    position: absolute;57    top: 120px;58    left: 0;59    width: 1080px;60    height: 120px;61    background: #1B1C20;62    display: flex;63    align-items: center;64    box-sizing: border-box;65    padding: 0 24px 0 16px;66    border-bottom: 1px solid #24262B;67  }68  .app-bar .left {69    display: flex;70    align-items: center;71    gap: 18px;72  }73  .app-title {74    font-size: 44px;75    font-weight: 600;76    color: #E5E7EB;77  }78  .app-actions {79    margin-left: auto;80    display: flex;81    align-items: center;82    gap: 28px;83  }84  .circle-btn {85    width: 72px;86    height: 72px;87    border-radius: 36px;88    display: inline-flex;89    align-items: center;90    justify-content: center;91  }92 93  /* Filter chips row */94  .chips {95    position: absolute;96    top: 260px;97    left: 0;98    width: 1080px;99    padding: 18px 24px;100    box-sizing: border-box;101    display: flex;102    gap: 18px;103  }104  .chip {105    display: inline-flex;106    align-items: center;107    gap: 14px;108    padding: 18px 26px;109    border: 2px solid #374151;110    border-radius: 32px;111    color: #D1D5DB;112    font-size: 34px;113    white-space: nowrap;114    background: transparent;115  }116  .chip .icon { width: 36px; height: 36px; opacity: 0.85; }117 118  /* File list section */119  .list {120    position: absolute;121    top: 360px;122    left: 0;123    width: 1080px;124    padding: 26px 24px;125    box-sizing: border-box;126  }127  .file-row {128    width: 100%;129    background: #1E2025;130    border: 1px solid #25272D;131    border-radius: 20px;132    height: 170px;133    display: flex;134    align-items: center;135    padding: 24px;136    box-sizing: border-box;137  }138  .thumb {139    width: 120px;140    height: 120px;141    background: #E0E0E0;142    border: 1px solid #BDBDBD;143    border-radius: 12px;144    display: flex;145    align-items: center;146    justify-content: center;147    color: #757575;148    font-size: 26px;149    text-align: center;150  }151  .file-info {152    margin-left: 28px;153    display: flex;154    flex-direction: column;155    gap: 10px;156  }157  .file-name {158    font-size: 42px;159    color: #EDEDED;160    font-weight: 600;161  }162  .file-meta {163    font-size: 30px;164    color: #A3A3A3;165  }166  .row-actions {167    margin-left: auto;168    padding-right: 8px;169  }170  .kebab {171    width: 18px;172    height: 18px;173    display: inline-block;174    position: relative;175  }176  .kebab::before, .kebab::after, .kebab span {177    content: "";178    position: absolute;179    left: 50%;180    transform: translateX(-50%);181    width: 6px;182    height: 6px;183    background: #C7C7CC;184    border-radius: 50%;185  }186  .kebab::before { top: 0; }187  .kebab span { top: 50%; transform: translate(-50%, -50%); }188  .kebab::after { bottom: 0; }189 190  /* Bottom gesture bar */191  .gesture {192    position: absolute;193    bottom: 22px;194    left: 50%;195    transform: translateX(-50%);196    width: 360px;197    height: 10px;198    background: #E5E7EB;199    border-radius: 8px;200    opacity: 0.9;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status Bar -->208  <div class="status-bar">209    <div class="status-time">10:45</div>210    <div class="status-icons">211      <!-- simple mail/cloud placeholder icon -->212      <div class="icon" title="notif">213        <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4z" opacity="0.25"/><path d="M4 6l8 5 8-5" fill="#F3F4F6"/></svg>214      </div>215      <!-- signal/wifi -->216      <div class="icon" title="wifi">217        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#F3F4F6" stroke-width="2" fill="none"/><path d="M5 12c4-3 10-3 14 0" stroke="#F3F4F6" stroke-width="2" fill="none"/><circle cx="12" cy="17" r="2" fill="#F3F4F6"/></svg>218      </div>219      <!-- battery -->220      <div class="icon" title="battery">221        <svg viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" fill="#F3F4F6"/><rect x="20" y="10" width="2" height="4" rx="1" fill="#F3F4F6"/></svg>222      </div>223    </div>224  </div>225 226  <!-- App Bar -->227  <div class="app-bar">228    <div class="left">229      <div class="circle-btn" aria-label="Back">230        <svg width="46" height="46" viewBox="0 0 24 24" fill="#E5E7EB"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12l10-9 1.5 1.5z"/></svg>231      </div>232      <div class="app-title">doc x (1)</div>233    </div>234    <div class="app-actions">235      <!-- Close X -->236      <div class="circle-btn" title="Close">237        <svg viewBox="0 0 24 24" fill="#E5E7EB"><path d="M6 6l12 12M18 6L6 18" stroke="#E5E7EB" stroke-width="2" fill="none" stroke-linecap="round"/></svg>238      </div>239      <!-- Grid icon -->240      <div class="circle-btn" title="Grid">241        <svg viewBox="0 0 24 24" fill="#E5E7EB"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>242      </div>243      <!-- Overflow -->244      <div class="circle-btn" title="More">245        <svg viewBox="0 0 24 24" fill="#E5E7EB"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>246      </div>247    </div>248  </div>249 250  <!-- Filter Chips -->251  <div class="chips">252    <div class="chip">253      <span class="icon">254        <svg viewBox="0 0 24 24" fill="#D1D5DB"><path d="M7 7a3 3 0 016 0v7a3 3 0 11-6 0V7zm8 1h2a3 3 0 013 3v3a3 3 0 11-6 0V8z"/></svg>255      </span>256      Audio257    </div>258    <div class="chip">259      <span class="icon">260        <svg viewBox="0 0 24 24" fill="#D1D5DB"><path d="M6 2h12a2 2 0 012 2v16l-6-4-6 4V4a2 2 0 012-2z"/></svg>261      </span>262      Documents &amp; other263    </div>264    <div class="chip">265      <span class="icon">266        <svg viewBox="0 0 24 24" fill="#D1D5DB"><path d="M4 5h16v14H4z" opacity="0.35"/><path d="M4 15l4-5 3 4 2-3 7 9H4z"/></svg>267      </span>268      Images269    </div>270  </div>271 272  <!-- File Row -->273  <div class="list">274    <div class="file-row">275      <div class="thumb">[IMG: Image thumbnail]</div>276      <div class="file-info">277        <div class="file-name">Doc X.jpg</div>278        <div class="file-meta">12.77 kB, Jul 7</div>279      </div>280      <div class="row-actions">281        <div class="kebab"><span></span></div>282      </div>283    </div>284  </div>285 286  <!-- Gesture Bar -->287  <div class="gesture"></div>288</div>289</body>290</html>