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 Mock</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: #121212;15    color: #EDEDED;16    font-family: "Roboto", "Segoe UI", Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 96px;25    width: 100%;26    background: #181818;27    display: flex;28    align-items: center;29    padding: 0 36px;30    box-sizing: border-box;31    font-size: 34px;32    letter-spacing: 0.3px;33  }34  .status-left, .status-right {35    display: flex;36    align-items: center;37  }38  .status-left { gap: 20px; }39  .status-right { margin-left: auto; gap: 24px; }40  .status-icon svg { width: 36px; height: 36px; fill: #EDEDED; opacity: 0.85; }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 96px;46    left: 0;47    height: 126px;48    width: 100%;49    background: #1A1A1A;50    display: flex;51    align-items: center;52    box-sizing: border-box;53    padding: 0 28px;54  }55  .app-title {56    font-size: 44px;57    font-weight: 500;58    margin-left: 18px;59  }60  .app-actions {61    margin-left: auto;62    display: flex;63    align-items: center;64    gap: 30px;65  }66  .icon-btn {67    width: 56px;68    height: 56px;69    display: inline-flex;70    align-items: center;71    justify-content: center;72  }73  .icon-btn svg { width: 40px; height: 40px; fill: #EDEDED; opacity: 0.92; }74 75  /* Filter chips */76  .chip-row {77    position: absolute;78    top: 222px;79    left: 0;80    width: 100%;81    height: 106px;82    background: #1A1A1A;83    display: flex;84    align-items: center;85    padding: 0 28px;86    box-sizing: border-box;87    gap: 16px;88  }89  .chip {90    display: inline-flex;91    align-items: center;92    gap: 14px;93    padding: 18px 26px;94    border: 1px solid #3A3A3A;95    border-radius: 26px;96    font-size: 32px;97    color: #EDEDED;98    background: #212121;99  }100  .chip svg { width: 34px; height: 34px; fill: #CFCFCF; }101 102  /* File list area */103  .content {104    position: absolute;105    top: 328px;106    left: 0;107    right: 0;108    bottom: 120px;109    padding: 24px 24px;110    box-sizing: border-box;111  }112  .file-item {113    width: 100%;114    display: flex;115    align-items: center;116    padding: 18px 12px;117    border-radius: 18px;118    background: #161616;119  }120  .thumb {121    width: 120px;122    height: 120px;123    background: #E0E0E0;124    border: 1px solid #BDBDBD;125    display: flex;126    align-items: center;127    justify-content: center;128    color: #757575;129    font-size: 26px;130    border-radius: 12px;131    margin-right: 24px;132  }133  .file-info {134    flex: 1;135    display: flex;136    flex-direction: column;137  }138  .file-name {139    font-size: 40px;140    line-height: 1.2;141    margin-bottom: 8px;142    color: #FFFFFF;143  }144  .file-meta {145    font-size: 28px;146    color: #9E9E9E;147  }148  .file-more {149    width: 56px;150    height: 56px;151    display: inline-flex;152    align-items: center;153    justify-content: center;154    margin-left: 12px;155  }156  .file-more svg { width: 36px; height: 36px; fill: #CFCFCF; }157 158  /* Context menu */159  .context-menu {160    position: absolute;161    top: 780px;162    right: 60px;163    width: 560px;164    background: #1E1E1E;165    border-radius: 24px;166    box-shadow: 0 18px 36px rgba(0,0,0,0.6);167    overflow: hidden;168  }169  .menu-item {170    padding: 26px 34px;171    font-size: 36px;172    color: #EDEDED;173    border-bottom: 1px solid #2A2A2A;174  }175  .menu-item:last-child { border-bottom: none; }176 177  /* Bottom nav pill */178  .nav-pill {179    position: absolute;180    bottom: 42px;181    left: 50%;182    transform: translateX(-50%);183    width: 280px;184    height: 12px;185    border-radius: 8px;186    background: #EAEAEA;187    opacity: 0.9;188  }189</style>190</head>191<body>192<div id="render-target">193  <!-- Status Bar -->194  <div class="status-bar">195    <div class="status-left">196      <div class="time">10:46</div>197      <div class="status-icon">198        <!-- Mail icon -->199        <svg viewBox="0 0 24 24"><path d="M2 6h20v12H2V6zm10 5L3 7v10h18V7l-9 4z"/></svg>200      </div>201      <div class="status-icon">202        <!-- Cloud icon -->203        <svg viewBox="0 0 24 24"><path d="M6 15a4 4 0 010-8 5 5 0 019.6 1.2A3.5 3.5 0 0118 15H6z"/></svg>204      </div>205    </div>206    <div class="status-right">207      <div class="status-icon">208        <!-- Wi-Fi -->209        <svg viewBox="0 0 24 24"><path d="M12 18l2 2-2 2-2-2 2-2zm-6-7a12 12 0 0112 0l-2 2a8 8 0 00-8 0l-2-2zm3-3a16 16 0 0110 0l-2 2a12 12 0 00-6 0l-2-2z"/></svg>210      </div>211      <div class="status-icon">212        <!-- Battery -->213        <svg viewBox="0 0 24 24"><path d="M2 8h16v8H2V8zm18 3h2v2h-2v-2z"/></svg>214      </div>215    </div>216  </div>217 218  <!-- App Bar -->219  <div class="app-bar">220    <div class="icon-btn">221      <!-- Back arrow -->222      <svg viewBox="0 0 24 24"><path d="M15 4l-8 8 8 8 2-2-6-6 6-6-2-2z"/></svg>223    </div>224    <div class="app-title">doc x (1)</div>225    <div class="app-actions">226      <div class="icon-btn">227        <!-- Close (X) -->228        <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/></svg>229      </div>230      <div class="icon-btn">231        <!-- Grid icon -->232        <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>233      </div>234      <div class="icon-btn">235        <!-- Vertical more -->236        <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>237      </div>238    </div>239  </div>240 241  <!-- Filter chips -->242  <div class="chip-row">243    <div class="chip">244      <svg viewBox="0 0 24 24"><path d="M6 12a6 6 0 0112 0v4h-2v-4a4 4 0 00-8 0v4H6v-4z"/></svg>245      <span>Audio</span>246    </div>247    <div class="chip">248      <svg viewBox="0 0 24 24"><path d="M4 3h12l4 4v14H4V3zm12 1v4h4"/></svg>249      <span>Documents & other</span>250    </div>251    <div class="chip">252      <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm3 11l4-5 3 4 4-6 4 7"/></svg>253      <span>Images</span>254    </div>255  </div>256 257  <!-- Content -->258  <div class="content">259    <div class="file-item">260      <div class="thumb">[IMG: File Thumbnail]</div>261      <div class="file-info">262        <div class="file-name">Doc X.jpg</div>263        <div class="file-meta">12.77 kB, Jul 7</div>264      </div>265      <div class="file-more">266        <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>267      </div>268    </div>269  </div>270 271  <!-- Context menu -->272  <div class="context-menu">273    <div class="menu-item">Select</div>274    <div class="menu-item">Share</div>275    <div class="menu-item">Open with</div>276    <div class="menu-item">Rename</div>277    <div class="menu-item">Add to Favorites</div>278    <div class="menu-item">Move to Trash</div>279    <div class="menu-item">Move to</div>280    <div class="menu-item">Move to Safe folder</div>281    <div class="menu-item">Copy to</div>282    <div class="menu-item">Back up to Google Drive</div>283    <div class="menu-item">File info</div>284  </div>285 286  <!-- Bottom nav pill -->287  <div class="nav-pill"></div>288</div>289</body>290</html>