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>Drive Action Sheet UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121416;20    color: #E6E7E8;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    height: 96px;29    width: 100%;30    background: #0f1113;31    display: flex;32    align-items: center;33    padding: 0 36px;34    box-sizing: border-box;35    font-size: 34px;36    color: #fff;37  }38  .sb-left {39    display: flex;40    align-items: center;41    gap: 20px;42  }43  .sb-right {44    margin-left: auto;45    display: flex;46    align-items: center;47    gap: 22px;48  }49  .dot {50    width: 10px;51    height: 10px;52    background: #fff;53    border-radius: 50%;54    opacity: 0.9;55  }56  .icon-battery, .icon-wifi {57    width: 40px;58    height: 40px;59  }60  .icon-wifi path, .icon-battery path {61    fill: none;62    stroke: #fff;63    stroke-width: 5;64    stroke-linecap: round;65    stroke-linejoin: round;66    opacity: 0.9;67  }68 69  /* App header with search */70  .app-header {71    position: absolute;72    top: 96px;73    left: 0;74    width: 100%;75    padding: 20px 36px;76    box-sizing: border-box;77  }78  .search-row {79    display: flex;80    align-items: center;81    gap: 24px;82  }83  .hamburger {84    width: 72px;85    height: 72px;86    display: flex;87    align-items: center;88    justify-content: center;89  }90  .hamburger svg { width: 46px; height: 46px; }91  .hamburger path { stroke: #cfd8dc; stroke-width: 8; stroke-linecap: round; }92 93  .search-pill {94    flex: 1;95    height: 88px;96    background: #1a1e22;97    border-radius: 44px;98    display: flex;99    align-items: center;100    padding: 0 30px;101    box-sizing: border-box;102    color: #9aa4ad;103    font-size: 36px;104  }105  .avatar {106    width: 76px;107    height: 76px;108    border-radius: 50%;109    background: #6a4d3b;110    color: #f1e3d5;111    display: flex;112    align-items: center;113    justify-content: center;114    font-weight: bold;115    font-size: 36px;116  }117 118  /* Tabs */119  .tabs {120    margin-top: 26px;121    display: flex;122    gap: 40px;123    padding-left: 120px; /* aligns with search field text start */124    color: #9aa4ad;125    font-size: 34px;126    position: relative;127  }128  .tab-active {129    color: #cfd8dc;130  }131  .indicator {132    position: absolute;133    left: 120px;134    bottom: -8px;135    width: 160px;136    height: 6px;137    background: #5b8bd6;138    border-radius: 3px;139  }140 141  /* Background file row (behind sheet) */142  .file-row {143    position: absolute;144    top: 280px;145    left: 0;146    width: 100%;147    padding: 24px 36px;148    box-sizing: border-box;149    display: flex;150    align-items: center;151    gap: 24px;152    color: #cfd8dc;153  }154  .img-thumb {155    width: 78px;156    height: 78px;157    background: #E0E0E0;158    border: 1px solid #BDBDBD;159    display: flex;160    justify-content: center;161    align-items: center;162    color: #757575;163    font-size: 22px;164    border-radius: 10px;165  }166  .file-name {167    font-size: 34px;168    flex: 1;169  }170  .more-vert {171    width: 46px;172    height: 46px;173  }174  .more-vert circle { fill: #9aa4ad; }175 176  /* Bottom Sheet */177  .sheet {178    position: absolute;179    bottom: 0;180    left: 0;181    width: 100%;182    height: 1840px;183    background: #242b31;184    border-top-left-radius: 46px;185    border-top-right-radius: 46px;186    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);187    overflow: hidden;188  }189  .sheet-header {190    display: flex;191    align-items: center;192    gap: 22px;193    padding: 34px 36px 28px 36px;194    box-sizing: border-box;195    border-bottom: 1px solid rgba(255,255,255,0.06);196    font-size: 36px;197    color: #e9edf0;198  }199  .sheet-header .img-thumb {200    width: 64px;201    height: 64px;202    font-size: 18px;203  }204 205  .menu {206    display: flex;207    flex-direction: column;208  }209  .menu-item {210    display: flex;211    align-items: center;212    gap: 28px;213    padding: 32px 36px;214    font-size: 38px;215    color: #e2e6ea;216  }217  .menu-item .micon {218    width: 50px;219    height: 50px;220  }221  .menu-item svg path,222  .menu-item svg rect,223  .menu-item svg circle,224  .menu-item svg polyline,225  .menu-item svg line {226    stroke: #c3ccd3;227    stroke-width: 6;228    stroke-linecap: round;229    stroke-linejoin: round;230    fill: none;231  }232  .divider {233    height: 1px;234    background: rgba(255,255,255,0.08);235    margin: 16px 36px;236  }237 238  /* bottom safe area hint */239  .home-handle {240    position: absolute;241    bottom: 24px;242    left: 50%;243    transform: translateX(-50%);244    width: 300px;245    height: 12px;246    background: #d0d4d8;247    border-radius: 6px;248    opacity: 0.6;249  }250</style>251</head>252<body>253<div id="render-target">254  <!-- Status Bar -->255  <div class="status-bar">256    <div class="sb-left">257      <div>6:10</div>258      <div class="dot"></div>259      <div class="dot"></div>260      <div class="dot"></div>261      <div class="dot"></div>262      <div class="dot" style="margin-left:6px;"></div>263    </div>264    <div class="sb-right">265      <svg class="icon-wifi" viewBox="0 0 24 24">266        <path d="M2 8c5-4 15-4 20 0M5 11c4-3 10-3 14 0M8 14c3-2 7-2 10 0M12 18l0.01 0"></path>267      </svg>268      <svg class="icon-battery" viewBox="0 0 28 24">269        <path d="M2 6h18v12H2zM22 10v4"></path>270      </svg>271    </div>272  </div>273 274  <!-- App Header -->275  <div class="app-header">276    <div class="search-row">277      <div class="hamburger">278        <svg viewBox="0 0 48 48">279          <path d="M6 10h36M6 24h36M6 38h36"></path>280        </svg>281      </div>282      <div class="search-pill">Search in Drive</div>283      <div class="avatar">C</div>284    </div>285    <div class="tabs">286      <div class="tab-active">Suggested</div>287      <div>Notifications</div>288      <div class="indicator"></div>289    </div>290  </div>291 292  <!-- Background file row (partially visible behind sheet) -->293  <div class="file-row">294    <div class="img-thumb">[IMG]</div>295    <div class="file-name">Riviera maya.jpg</div>296    <svg class="more-vert" viewBox="0 0 24 24">297      <circle cx="12" cy="5" r="2"></circle>298      <circle cx="12" cy="12" r="2"></circle>299      <circle cx="12" cy="19" r="2"></circle>300    </svg>301  </div>302 303  <!-- Bottom Sheet -->304  <div class="sheet">305    <div class="sheet-header">306      <div class="img-thumb">[IMG]</div>307      <div>Riviera maya.jpg</div>308    </div>309    <div class="menu">310 311      <div class="menu-item">312        <svg class="micon" viewBox="0 0 24 24">313          <path d="M12 5v10M12 5l-3 3M12 5l3 3"></path>314          <path d="M5 19h14"></path>315        </svg>316        <div>Share</div>317      </div>318 319      <div class="menu-item">320        <svg class="micon" viewBox="0 0 24 24">321          <circle cx="8" cy="10" r="3"></circle>322          <circle cx="16" cy="13" r="3"></circle>323          <path d="M5 17c3-2 9-2 12 0"></path>324        </svg>325        <div>Manage access</div>326      </div>327 328      <div class="menu-item">329        <svg class="micon" viewBox="0 0 24 24">330          <path d="M12 3l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"></path>331        </svg>332        <div>Add to Starred</div>333      </div>334 335      <div class="menu-item">336        <svg class="micon" viewBox="0 0 24 24">337          <circle cx="12" cy="12" r="9"></circle>338          <path d="M8 12l2 2 4-4"></path>339        </svg>340        <div>Make available offline</div>341      </div>342 343      <div class="divider"></div>344 345      <div class="menu-item">346        <svg class="micon" viewBox="0 0 24 24">347          <path d="M7 12c3-3 7-3 10 0"></path>348          <path d="M5 15c4-4 10-4 14 0"></path>349        </svg>350        <div>Copy link</div>351      </div>352 353      <div class="menu-item">354        <svg class="micon" viewBox="0 0 24 24">355          <rect x="5" y="5" width="10" height="10" rx="2"></rect>356          <rect x="9" y="9" width="10" height="10" rx="2"></rect>357        </svg>358        <div>Make a copy</div>359      </div>360 361      <div class="menu-item">362        <svg class="micon" viewBox="0 0 24 24">363          <path d="M5 12h9"></path>364          <path d="M12 8l4 4-4 4"></path>365        </svg>366        <div>Send a copy</div>367      </div>368 369      <div class="divider"></div>370 371      <div class="menu-item">372        <svg class="micon" viewBox="0 0 24 24">373          <path d="M4 4h16v6H4z"></path>374          <path d="M4 14h16"></path>375        </svg>376        <div>Open with</div>377      </div>378 379      <div class="menu-item">380        <svg class="micon" viewBox="0 0 24 24">381          <path d="M12 5v10"></path>382          <path d="M8 11l4 4 4-4"></path>383          <path d="M4 19h16"></path>384        </svg>385        <div>Download</div>386      </div>387 388      <div class="menu-item">389        <svg class="micon" viewBox="0 0 24 24">390          <path d="M5 19l14-14"></path>391          <path d="M5 5h6v6"></path>392        </svg>393        <div>Rename</div>394      </div>395 396      <div class="menu-item">397        <svg class="micon" viewBox="0 0 24 24">398          <path d="M3 7h18v10H3z"></path>399          <path d="M7 7V4h10v3"></path>400        </svg>401        <div>Show file location</div>402      </div>403 404      <div class="menu-item">405        <svg class="micon" viewBox="0 0 24 24">406          <path d="M7 12c3-3 7-3 10 0"></path>407          <path d="M12 4v6"></path>408          <path d="M9 7h6"></path>409        </svg>410        <div>Add shortcut to Drive</div>411      </div>412    </div>413 414    <div class="home-handle"></div>415  </div>416</div>417</body>418</html>