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>Dark Files App Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0b0b0b;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    height: 72px;21    background: #222;22    display: flex;23    align-items: center;24    padding: 0 32px;25    font-size: 28px;26    color: #eaeaea;27    letter-spacing: 1px;28  }29  .status-right {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 18px;34  }35  .status-icon {36    width: 26px;37    height: 26px;38    opacity: 0.9;39  }40 41  /* Header */42  .header {43    height: 140px;44    background: #1a1a1a;45    display: flex;46    align-items: center;47    padding: 0 28px;48    border-bottom: 1px solid #1f1f1f;49  }50  .avatar {51    width: 72px;52    height: 72px;53    border-radius: 50%;54    background: #2b2b2b;55    display: flex;56    justify-content: center;57    align-items: center;58    margin-right: 22px;59  }60  .avatar svg { width: 42px; height: 42px; fill: #bdbdbd; }61  .title {62    font-size: 46px;63    font-weight: 700;64  }65  .header-actions {66    margin-left: auto;67    display: flex;68    align-items: center;69    gap: 36px;70  }71  .hdr-ic { width: 40px; height: 40px; fill: #d9d9d9; opacity: 0.9; }72 73  /* Content area */74  .content {75    position: absolute;76    top: 212px; /* status + header */77    bottom: 150px; /* bottom nav */78    left: 0;79    right: 0;80    overflow: hidden auto;81    padding: 24px 24px 0 24px;82  }83  .section-title {84    font-size: 34px;85    color: #cfcfcf;86    margin: 8px 8px 18px 8px;87  }88 89  .file-list { margin: 0 8px; }90  .file-item {91    display: flex;92    align-items: center;93    padding: 18px 0;94    position: relative;95  }96  .thumb {97    width: 96px;98    height: 96px;99    background: #E0E0E0;100    border: 1px solid #BDBDBD;101    color: #757575;102    display: flex;103    align-items: center;104    justify-content: center;105    font-size: 20px;106    border-radius: 10px;107    margin-right: 22px;108  }109  .file-meta { flex: 1; }110  .file-title {111    font-size: 34px;112    color: #fff;113    margin-bottom: 6px;114  }115  .file-sub {116    font-size: 26px;117    color: #9a9a9a;118  }119  .dots {120    width: 36px;121    height: 36px;122    opacity: 0.8;123    margin-left: 12px;124  }125  .divider {126    height: 1px;127    background: #242424;128    margin-left: 118px;129  }130 131  .offline-section { margin: 36px 8px 0 8px; }132  .card {133    background: #2a2a2a;134    color: #d7d7d7;135    padding: 28px;136    border-radius: 18px;137    font-size: 28px;138    line-height: 1.35;139  }140 141  /* Bottom Navigation */142  .bottom-nav {143    position: absolute;144    bottom: 0;145    left: 0; right: 0;146    height: 150px;147    background: #111;148    border-top: 1px solid #1f1f1f;149    display: flex;150    align-items: center;151    justify-content: space-around;152    padding-bottom: 10px;153  }154  .nav-item {155    display: flex;156    flex-direction: column;157    align-items: center;158    gap: 8px;159    color: #b7b7b7;160    font-size: 24px;161  }162  .nav-item svg { width: 44px; height: 44px; }163  .nav-item.active { color: #1da1ff; }164  .nav-item.active svg { fill: #1da1ff; }165  .nav-item svg { fill: #b7b7b7; }166 167  /* Floating Action Button */168  .fab {169    position: absolute;170    right: 36px;171    bottom: 220px;172    width: 116px;173    height: 116px;174    background: #0a84ff;175    border-radius: 50%;176    display: flex;177    align-items: center;178    justify-content: center;179    box-shadow: 0 8px 18px rgba(0,0,0,0.4);180  }181  .fab svg { width: 54px; height: 54px; fill: #031f3a; }182 183  /* Gesture bar */184  .gesture {185    position: absolute;186    bottom: 12px;187    left: 50%;188    transform: translateX(-50%);189    width: 360px;190    height: 10px;191    background: #e9e9e9;192    border-radius: 8px;193    opacity: 0.9;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status Bar -->201  <div class="status-bar">202    <div>7:43</div>203    <div class="status-right">204      <!-- small mock status icons -->205      <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="10" width="18" height="10" rx="2" fill="#eaeaea"/><rect x="6" y="8" width="12" height="2" fill="#eaeaea"/></svg>206      <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 18h18v2H3zM6 14h12v2H6zM9 10h6v2H9z" fill="#eaeaea"/></svg>207      <svg class="status-icon" viewBox="0 0 24 24"><path d="M4 12h16v8H4z" fill="none" stroke="#eaeaea" stroke-width="2"/><path d="M8 12v-2a4 4 0 018 0v2" fill="none" stroke="#eaeaea" stroke-width="2"/></svg>208      <svg class="status-icon" viewBox="0 0 24 24"><path d="M12 4a6 6 0 016 6v2h-4l-2 3-2-3H6v-2a6 6 0 016-6z" fill="#eaeaea"/></svg>209      <svg class="status-icon" viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zm14-4V6a1 1 0 00-1-1H6a1 1 0 00-1 1v10h14z" fill="#eaeaea"/></svg>210    </div>211  </div>212 213  <!-- Header -->214  <div class="header">215    <div class="avatar">216      <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-7 2-7 4v2h14v-2c0-2-3-4-7-4z"/></svg>217    </div>218    <div class="title">Home</div>219    <div class="header-actions">220      <!-- diamond -->221      <svg class="hdr-ic" viewBox="0 0 24 24"><path d="M12 3l7 7-7 11-7-11 7-7z"/></svg>222      <!-- plus -->223      <svg class="hdr-ic" viewBox="0 0 24 24"><path d="M11 4h2v16h-2zM4 11h16v2H4z"/></svg>224      <!-- cast -->225      <svg class="hdr-ic" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#d9d9d9" stroke-width="2"/><path d="M3 18a4 4 0 014 4" fill="none" stroke="#d9d9d9" stroke-width="2"/><path d="M3 14a8 8 0 018 8" fill="none" stroke="#d9d9d9" stroke-width="2"/></svg>226      <!-- search -->227      <svg class="hdr-ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#d9d9d9" stroke-width="2" fill="none"/><path d="M16 16l5 5" stroke="#d9d9d9" stroke-width="2"/></svg>228    </div>229  </div>230 231  <!-- Content -->232  <div class="content">233    <div class="section-title">Recent files</div>234 235    <div class="file-list">236      <!-- Item 1 -->237      <div class="file-item">238        <div class="thumb">[IMG: Doc]</div>239        <div class="file-meta">240          <div class="file-title">Venice tour</div>241          <div class="file-sub">5.7 MB · Just now</div>242        </div>243        <svg class="dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#9a9a9a"/><circle cx="12" cy="12" r="2" fill="#9a9a9a"/><circle cx="12" cy="19" r="2" fill="#9a9a9a"/></svg>244      </div>245      <div class="divider"></div>246 247      <!-- Item 2 -->248      <div class="file-item">249        <div class="thumb">[IMG: Doc]</div>250        <div class="file-meta">251          <div class="file-title">Tomorrowland</div>252          <div class="file-sub">👥 2.3 MB · Yesterday at 2:41 PM</div>253        </div>254        <svg class="dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#9a9a9a"/><circle cx="12" cy="12" r="2" fill="#9a9a9a"/><circle cx="12" cy="19" r="2" fill="#9a9a9a"/></svg>255      </div>256      <div class="divider"></div>257 258      <!-- Item 3 -->259      <div class="file-item">260        <div class="thumb">[IMG: Doc]</div>261        <div class="file-meta">262          <div class="file-title">Italy file</div>263          <div class="file-sub">24.7 MB · Yesterday at 2:07 PM</div>264        </div>265        <svg class="dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#9a9a9a"/><circle cx="12" cy="12" r="2" fill="#9a9a9a"/><circle cx="12" cy="19" r="2" fill="#9a9a9a"/></svg>266      </div>267      <div class="divider"></div>268 269      <!-- Item 4 -->270      <div class="file-item">271        <div class="thumb">[IMG: Doc]</div>272        <div class="file-meta">273          <div class="file-title">Amsterdam (1)</div>274          <div class="file-sub">8.1 MB · Yesterday at 2:06 PM</div>275        </div>276        <svg class="dots" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#9a9a9a"/><circle cx="12" cy="12" r="2" fill="#9a9a9a"/><circle cx="12" cy="19" r="2" fill="#9a9a9a"/></svg>277      </div>278    </div>279 280    <div class="offline-section">281      <div class="section-title" style="margin-bottom: 12px;">Offline files</div>282      <div class="card">283        Tap the ⋮ icon next to a file, and select "Make available offline" to view it wherever you go.284      </div>285    </div>286  </div>287 288  <!-- Floating Action Button -->289  <div class="fab" title="Camera">290    <svg viewBox="0 0 24 24">291      <path d="M9 7l1.5-2h3L15 7h3a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V9a2 2 0 012-2h3z" fill="#051b33"/>292      <circle cx="12" cy="13" r="4" fill="#0b2747"/>293      <circle cx="12" cy="13" r="2.2" fill="#0a84ff"/>294    </svg>295  </div>296 297  <!-- Bottom Navigation -->298  <div class="bottom-nav">299    <div class="nav-item active">300      <svg viewBox="0 0 24 24"><path d="M12 3l9 8v9a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1v-9l9-8z"/></svg>301      <div>Home</div>302    </div>303    <div class="nav-item">304      <svg viewBox="0 0 24 24"><path d="M4 5h16v14H4zM8 5v14M16 5v14" /></svg>305      <div>Files</div>306    </div>307    <div class="nav-item">308      <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zM3 21v-1c0-3.3 4-5 9-5s9 1.7 9 5v1H3z"/></svg>309      <div>Shared</div>310    </div>311    <div class="nav-item">312      <svg viewBox="0 0 24 24"><path d="M4 19l6-4 3 2 7-6v8H4zM4 5h16v4L13 16l-3-2-6 4V5z"/></svg>313      <div>Photos</div>314    </div>315    <div class="nav-item">316      <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.4 0-8 2-8 5v2h16v-2c0-3-3.6-5-8-5z"/></svg>317      <div>Me</div>318    </div>319  </div>320 321  <div class="gesture"></div>322</div>323</body>324</html>