GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Office Files UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #141712; /* deep olive/black */14    color: #D7D8C8;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #EAEADB;30    font-size: 36px;31    letter-spacing: 0.5px;32  }33  .status-left { display: flex; align-items: center; gap: 18px; }34  .status-right { display: flex; align-items: center; gap: 20px; }35  .status-dot { width: 10px; height: 10px; background: #C8C9B6; border-radius: 50%; opacity: 0.8; }36 37  /* App bar */38  .app-bar {39    position: absolute;40    top: 96px;41    left: 0;42    width: 1080px;43    height: 120px;44    padding: 0 36px;45    box-sizing: border-box;46    display: flex;47    align-items: center;48    justify-content: space-between;49    background: #1D2017;50    color: #E5E6D4;51  }52  .app-left { display: flex; align-items: center; gap: 28px; }53  .app-title { font-size: 54px; font-weight: 600; }54  .app-right { display: flex; align-items: center; gap: 36px; }55  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #D7D8C8; stroke-width: 5; }56 57  /* Sort row */58  .sort-row {59    position: absolute;60    top: 216px;61    left: 0;62    width: 1080px;63    height: 90px;64    padding: 0 48px;65    box-sizing: border-box;66    display: flex;67    align-items: center;68    justify-content: space-between;69    color: #C9CCAF;70    font-size: 38px;71  }72 73  /* Grid of items */74  .grid {75    position: absolute;76    top: 306px;77    left: 0;78    width: 1080px;79    padding: 0 48px;80    box-sizing: border-box;81    display: grid;82    grid-template-columns: 1fr 1fr;83    grid-gap: 48px;84  }85  .tile {86    background: transparent;87  }88  .thumb {89    height: 260px;90    background: #2A2D22;91    border-radius: 36px;92    padding: 24px;93    box-sizing: border-box;94    position: relative;95  }96  .thumb-inner {97    height: 212px;98    background: #E0E0E0;99    border: 1px solid #BDBDBD;100    border-radius: 24px;101    display: flex;102    justify-content: center;103    align-items: center;104    color: #757575;105    font-size: 32px;106  }107  .thumb-badge {108    position: absolute;109    right: 24px;110    bottom: 24px;111    width: 60px;112    height: 60px;113    background: #353A2A;114    border-radius: 50%;115    display: flex;116    align-items: center;117    justify-content: center;118  }119  .file-row {120    display: flex;121    align-items: center;122    gap: 18px;123    margin-top: 18px;124  }125  .filetype {126    width: 56px;127    height: 56px;128    border-radius: 8px;129    display: flex;130    align-items: center;131    justify-content: center;132    font-weight: 700;133    font-size: 28px;134  }135  .filetype.word { background: #2D3A5A; color: #A9C1FF; }136  .filetype.docs { background: #214B7C; color: #93B8FF; }137  .filename { font-size: 36px; color: #E0E1D1; flex: 1; }138  .kebab {139    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;140  }141  .kebab span {142    width: 8px; height: 8px; background: #C9CCAF; border-radius: 50%; display: block; margin: 2px 0;143  }144 145  /* Floating + button */146  .fab {147    position: absolute;148    right: 48px;149    bottom: 420px;150    width: 120px;151    height: 120px;152    background: #3A412B;153    border-radius: 28px;154    display: flex;155    align-items: center;156    justify-content: center;157    box-shadow: 0 10px 20px rgba(0,0,0,0.35);158  }159  .fab svg { width: 64px; height: 64px; stroke: #F3F4E7; stroke-width: 8; }160 161  /* Snackbar */162  .snackbar {163    position: absolute;164    left: 50%;165    transform: translateX(-50%);166    bottom: 300px;167    width: 960px;168    background: #F0F1E7;169    color: #34362B;170    border-radius: 22px;171    padding: 26px 32px;172    text-align: left;173    font-size: 36px;174    box-shadow: 0 8px 16px rgba(0,0,0,0.25);175  }176 177  /* Bottom navigation */178  .bottom-nav {179    position: absolute;180    left: 0;181    bottom: 110px;182    width: 1080px;183    height: 170px;184    background: #1D2017;185    display: flex;186    align-items: center;187    justify-content: space-around;188    color: #C9CCAF;189  }190  .nav-item {191    display: flex;192    flex-direction: column;193    align-items: center;194    gap: 12px;195    font-size: 30px;196  }197  .nav-item svg { width: 56px; height: 56px; stroke: #C9CCAF; stroke-width: 5; fill: none; }198  .active {199    color: #F2F3E9;200  }201  .active .icon-wrap {202    width: 88px; height: 88px; background: #3A412B; border-radius: 24px;203    display: flex; align-items: center; justify-content: center;204  }205  .active svg { stroke: #F2F3E9; }206 207  /* Home gesture pill */208  .home-pill {209    position: absolute;210    bottom: 32px;211    left: 50%;212    transform: translateX(-50%);213    width: 320px;214    height: 14px;215    background: #EDEDE5;216    border-radius: 8px;217    opacity: 0.9;218  }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Status bar -->225  <div class="status-bar">226    <div class="status-left">227      <div>5:28</div>228      <div class="status-dot"></div>229      <div class="status-dot"></div>230      <div class="status-dot"></div>231    </div>232    <div class="status-right">233      <!-- Wifi -->234      <svg viewBox="0 0 24 24">235        <path d="M2 8c5-4 15-4 20 0"/>236        <path d="M5 11c4-3 10-3 14 0"/>237        <path d="M8 14c3-2 5-2 8 0"/>238        <circle cx="12" cy="18" r="1.5" fill="#EAEADB"></circle>239      </svg>240      <!-- Battery -->241      <svg viewBox="0 0 28 24">242        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#EAEADB"></rect>243        <rect x="4" y="8" width="12" height="8" fill="#EAEADB"></rect>244        <rect x="22" y="9" width="3" height="6" fill="#EAEADB"></rect>245      </svg>246    </div>247  </div>248 249  <!-- App bar -->250  <div class="app-bar">251    <div class="app-left">252      <div class="icon-btn">253        <svg viewBox="0 0 24 24">254          <path d="M15 5l-7 7 7 7"/>255        </svg>256      </div>257      <div class="app-title">Office</div>258    </div>259    <div class="app-right">260      <div class="icon-btn">261        <!-- search -->262        <svg viewBox="0 0 24 24">263          <circle cx="11" cy="11" r="7"></circle>264          <line x1="16.5" y1="16.5" x2="22" y2="22"></line>265        </svg>266      </div>267      <div class="icon-btn">268        <!-- more vertical -->269        <svg viewBox="0 0 24 24">270          <circle cx="12" cy="5" r="2.2" fill="#D7D8C8" stroke="none"></circle>271          <circle cx="12" cy="12" r="2.2" fill="#D7D8C8" stroke="none"></circle>272          <circle cx="12" cy="19" r="2.2" fill="#D7D8C8" stroke="none"></circle>273        </svg>274      </div>275    </div>276  </div>277 278  <!-- Sort row -->279  <div class="sort-row">280    <div>Name ↑</div>281    <div class="icon-btn">282      <!-- list/grid icon (list) -->283      <svg viewBox="0 0 24 24">284        <line x1="4" y1="6" x2="20" y2="6"></line>285        <line x1="4" y1="12" x2="20" y2="12"></line>286        <line x1="4" y1="18" x2="20" y2="18"></line>287      </svg>288    </div>289  </div>290 291  <!-- Grid tiles -->292  <div class="grid">293    <!-- Tile 1 -->294    <div class="tile">295      <div class="thumb">296        <div class="thumb-inner">[IMG: Document thumbnail]</div>297        <div class="thumb-badge">298          <svg viewBox="0 0 24 24">299            <circle cx="9" cy="9" r="7" fill="none" stroke="#C9CCAF" stroke-width="2"></circle>300            <path d="M7 9l2 2 4-4" stroke="#C9CCAF" stroke-width="2" fill="none"></path>301          </svg>302        </div>303      </div>304      <div class="file-row">305        <div class="filetype word">W</div>306        <div class="filename">Month finance.docx</div>307        <div class="kebab">308          <span></span><span></span><span></span>309        </div>310      </div>311    </div>312 313    <!-- Tile 2 -->314    <div class="tile">315      <div class="thumb">316        <div class="thumb-inner">[IMG: Document thumbnail]</div>317        <div class="thumb-badge">318          <svg viewBox="0 0 24 24">319            <path d="M6 12l4 4 8-8" stroke="#C9CCAF" stroke-width="2" fill="none"></path>320          </svg>321        </div>322      </div>323      <div class="file-row">324        <div class="filetype docs">E</div>325        <div class="filename">Report</div>326        <div class="kebab">327          <span></span><span></span><span></span>328        </div>329      </div>330    </div>331  </div>332 333  <!-- Floating Add Button -->334  <div class="fab">335    <svg viewBox="0 0 24 24">336      <line x1="12" y1="5" x2="12" y2="19"></line>337      <line x1="5" y1="12" x2="19" y2="12"></line>338    </svg>339  </div>340 341  <!-- Snackbar -->342  <div class="snackbar">File will be made available offline</div>343 344  <!-- Bottom Navigation -->345  <div class="bottom-nav">346    <div class="nav-item">347      <svg viewBox="0 0 24 24">348        <path d="M3 11l9-7 9 7"></path>349        <path d="M5 10v10h14V10"></path>350      </svg>351      <div>Home</div>352    </div>353    <div class="nav-item">354      <svg viewBox="0 0 24 24">355        <path d="M12 2l3 6 7 .9-5 4.6 1.6 7.5L12 17l-6.6 4 1.6-7.5-5-4.6 7-.9z"></path>356      </svg>357      <div>Starred</div>358    </div>359    <div class="nav-item">360      <svg viewBox="0 0 24 24">361        <circle cx="9" cy="8" r="3"></circle>362        <circle cx="16" cy="10" r="2.5"></circle>363        <path d="M3 20c1.5-4.5 10.5-4.5 12 0"></path>364        <path d="M12 20c.8-2.3 4.5-2.8 6 0"></path>365      </svg>366      <div>Shared</div>367    </div>368    <div class="nav-item active">369      <div class="icon-wrap">370        <svg viewBox="0 0 24 24">371          <path d="M3 7h7l2 2h9v10H3z"></path>372        </svg>373      </div>374      <div>Files</div>375    </div>376  </div>377 378  <!-- Home gesture pill -->379  <div class="home-pill"></div>380 381</div>382</body>383</html>