GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Drive Mobile UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #F7F8F4;13    color: #2b2b2b;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    padding: 20px 32px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    font-size: 36px;29    color: #3b3b3b;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 22px;35  }36  .dot { width: 10px; height: 10px; background:#3b3b3b; border-radius:50%; display:inline-block; }37  .battery {38    width: 48px; height: 24px; border: 3px solid #3b3b3b; border-radius: 5px; position: relative;39  }40  .battery::after {41    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background:#3b3b3b; border-radius: 2px;42  }43  .battery .level {44    position: absolute; left: 3px; top: 3px; height: 16px; width: 28px; background:#3b3b3b;45  }46 47  /* Search bar area */48  .top-area {49    position: absolute;50    top: 90px;51    left: 0;52    width: 1080px;53    padding: 24px 32px;54    box-sizing: border-box;55  }56  .search-pill {57    height: 112px;58    background: #E8EEE5;59    border-radius: 60px;60    display: flex;61    align-items: center;62    padding: 0 28px;63    box-sizing: border-box;64    gap: 24px;65  }66  .hamburger svg { width: 44px; height: 44px; }67  .search-text {68    font-size: 38px;69    color: #6c7a6c;70    flex: 1;71  }72  .avatar {73    width: 92px; height: 92px; border-radius: 46px; background: #9B7A6F; color: #fff;74    display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 40px;75  }76 77  /* Tabs */78  .tabs {79    margin-top: 26px;80    display: flex;81    gap: 60px;82    padding-left: 10px;83  }84  .tab {85    font-size: 42px;86    color: #59665b;87    padding-bottom: 18px;88  }89  .tab.active {90    color: #237A42;91    border-bottom: 8px solid #237A42;92  }93 94  .divider {95    margin-top: 22px;96    width: 1080px;97    height: 2px;98    background: #E2E4E0;99  }100 101  /* Grid list */102  .grid {103    position: absolute;104    top: 390px;105    left: 0;106    width: 1080px;107    padding: 0 60px;108    box-sizing: border-box;109    display: grid;110    grid-template-columns: repeat(2, 1fr);111    gap: 60px 60px;112  }113  .tile {114    width: 450px;115  }116  .icon-area {117    width: 450px;118    height: 300px;119    border-radius: 24px;120    background: #E7E9E6;121    display: flex;122    align-items: center; justify-content: center;123  }124  .folder-icon {125    width: 300px; height: 200px;126  }127  .folder-green { fill:#41A260; }128  .folder-dark  { fill:#3E4640; }129 130  .group-badge {131    position:absolute;132    right: 48px;133    bottom: 110px;134    background: #314137;135    width: 80px; height: 60px;136    border-radius: 12px;137    display:flex; align-items:center; justify-content:center;138  }139  .group-badge svg { width: 56px; height: 56px; fill:#DCE3DD; }140 141  .img-placeholder {142    width: 450px;143    height: 300px;144    background:#E0E0E0;145    border:1px solid #BDBDBD;146    border-radius: 24px;147    display:flex; align-items:center; justify-content:center;148    color:#757575; font-size:34px; text-align:center; padding: 0 20px; box-sizing: border-box;149  }150 151  .caption-row {152    margin-top: 22px;153    display:flex; align-items:center; justify-content: space-between;154  }155  .caption {156    font-size: 42px;157  }158  .ellipsis {159    width: 18px; display:flex; flex-direction: column; gap: 10px; align-items:center; margin-right: 8px;160  }161  .ellipsis span {162    width: 10px; height: 10px; background:#4b4b4b; border-radius:50%;163  }164 165  /* Floating add button */166  .fab {167    position: absolute;168    right: 54px;169    bottom: 370px;170    width: 180px; height: 180px;171    background: #D6E6D3;172    border-radius: 40px;173    box-shadow: 0 8px 20px rgba(0,0,0,0.15);174    display:flex; align-items:center; justify-content:center;175  }176  .fab svg { width: 90px; height: 90px; stroke:#254A2F; stroke-width: 14; }177 178  /* Bottom navigation */179  .bottom-nav {180    position: absolute;181    bottom: 0;182    left: 0;183    width: 1080px;184    height: 210px;185    background: #E9EFE6;186    display:flex; align-items:center; justify-content: space-around;187    padding-top: 30px;188    box-sizing: border-box;189  }190  .nav-item {191    width: 200px;192    text-align:center;193    color:#405548;194  }195  .nav-icon {196    width: 88px; height: 88px; margin: 0 auto 18px auto;197  }198  .nav-label { font-size: 36px; }199 200  .active-bubble {201    background:#D6E6D3; width: 120px; height: 88px; border-radius: 40px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px auto;202  }203  .active-bubble svg { width: 64px; height: 64px; fill:#2C6A3E; }204 205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status Bar -->211  <div class="status-bar">212    <div>10:16</div>213    <div class="status-icons">214      <span class="dot"></span>215      <span class="dot"></span>216      <span class="dot"></span>217      <div class="battery"><div class="level"></div></div>218    </div>219  </div>220 221  <!-- Search / Top Area -->222  <div class="top-area">223    <div class="search-pill">224      <div class="hamburger">225        <svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="2" fill="#3C4A3E"/><rect x="2" y="11" width="20" height="2" fill="#3C4A3E"/><rect x="2" y="18" width="20" height="2" fill="#3C4A3E"/></svg>226      </div>227      <div class="search-text">Search in Drive</div>228      <div class="avatar">C</div>229    </div>230 231    <div class="tabs">232      <div class="tab active">My Drive</div>233      <div class="tab">Computers</div>234    </div>235    <div class="divider"></div>236  </div>237 238  <!-- Grid Content -->239  <div class="grid">240 241    <!-- Tile: Green folder -->242    <div class="tile">243      <div class="icon-area" style="background:#DDEEDD;">244        <svg class="folder-icon" viewBox="0 0 120 80">245          <path class="folder-green" d="M10 22 h24 l10 10 h56 a10 10 0 0 1 10 10 v28 a10 10 0 0 1-10 10 H20 a10 10 0 0 1-10-10 V32 a10 10 0 0 1 10-10z"/>246        </svg>247      </div>248      <div class="caption-row">249        <div class="caption">Green</div>250        <div class="ellipsis"><span></span><span></span><span></span></div>251      </div>252    </div>253 254    <!-- Tile: Memories folder with group badge -->255    <div class="tile" style="position:relative;">256      <div class="icon-area" style="background:#E7E9E6;">257        <svg class="folder-icon" viewBox="0 0 120 80">258          <path class="folder-dark" d="M10 22 h24 l10 10 h56 a10 10 0 0 1 10 10 v28 a10 10 0 0 1-10 10 H20 a10 10 0 0 1-10-10 V32 a10 10 0 0 1 10-10z"/>259        </svg>260      </div>261      <div class="group-badge">262        <svg viewBox="0 0 24 24">263          <circle cx="9" cy="10" r="4"/>264          <circle cx="16" cy="12" r="3"/>265          <rect x="5" y="16" width="14" height="5" rx="2"/>266        </svg>267      </div>268      <div class="caption-row">269        <div class="caption">Memories</div>270        <div class="ellipsis"><span></span><span></span><span></span></div>271      </div>272    </div>273 274    <!-- Tile: Untitled folder -->275    <div class="tile">276      <div class="icon-area">277        <svg class="folder-icon" viewBox="0 0 120 80">278          <path class="folder-dark" d="M10 22 h24 l10 10 h56 a10 10 0 0 1 10 10 v28 a10 10 0 0 1-10 10 H20 a10 10 0 0 1-10-10 V32 a10 10 0 0 1 10-10z"/>279        </svg>280      </div>281      <div class="caption-row">282        <div class="caption">Untitled<br>folder</div>283        <div class="ellipsis"><span></span><span></span><span></span></div>284      </div>285    </div>286 287    <!-- Tile: Image preview behance_download -->288    <div class="tile">289      <div class="img-placeholder">[IMG: Office plant photo preview]</div>290      <div class="caption-row">291        <div class="caption" style="font-size:40px; line-height:42px;">behance_do<br>wnload_16...</div>292        <div class="ellipsis"><span></span><span></span><span></span></div>293      </div>294    </div>295 296    <!-- Tile: Plant image -->297    <div class="tile">298      <div class="img-placeholder">[IMG: Wide office wall & plant]</div>299      <div class="caption-row">300        <div class="caption">Plant</div>301        <div class="ellipsis"><span></span><span></span><span></span></div>302      </div>303    </div>304 305  </div>306 307  <!-- Floating Add Button -->308  <div class="fab">309    <svg viewBox="0 0 48 48" fill="none">310      <path d="M24 8 v32 M8 24 h32" />311    </svg>312  </div>313 314  <!-- Bottom Navigation -->315  <div class="bottom-nav">316    <div class="nav-item">317      <svg class="nav-icon" viewBox="0 0 24 24" fill="#2C6A3E">318        <path d="M12 4l9 8h-3v8h-12v-8h-3z"/>319      </svg>320      <div class="nav-label">Home</div>321    </div>322    <div class="nav-item">323      <svg class="nav-icon" viewBox="0 0 24 24" fill="#2C6A3E">324        <path d="M12 2l3 7 7 1-5 5 2 7-7-4-7 4 2-7-5-5 7-1z"/>325      </svg>326      <div class="nav-label">Starred</div>327    </div>328    <div class="nav-item">329      <svg class="nav-icon" viewBox="0 0 24 24" fill="#2C6A3E">330        <circle cx="8" cy="10" r="4"/><circle cx="16" cy="12" r="3"/><rect x="5" y="16" width="14" height="5" rx="2"/>331      </svg>332      <div class="nav-label">Shared</div>333    </div>334    <div class="nav-item">335      <div class="active-bubble">336        <svg viewBox="0 0 24 24">337          <path d="M3 7h5l3 3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V10a3 3 0 0 1 3-3z"/>338        </svg>339      </div>340      <div class="nav-label">Files</div>341    </div>342  </div>343 344</div>345</body>346</html>