GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Drive Dark</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #0f1412; /* dark app background */13    color: #e6e6e6;14  }15 16  /* Status bar */17  .status-bar {18    height: 120px;19    padding: 0 48px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #d9d9d9;24    font-weight: 600;25    letter-spacing: 0.5px;26  }27  .status-left { font-size: 48px; }28  .status-right { display: flex; gap: 28px; align-items: center; }29  .status-icon svg { width: 48px; height: 48px; fill: #d9d9d9; }30 31  /* Search row */32  .search-row {33    padding: 24px 48px 24px 48px;34    display: grid;35    grid-template-columns: 120px 1fr 120px;36    align-items: center;37    column-gap: 32px;38  }39  .hamburger {40    width: 120px; height: 120px;41    display: flex; align-items: center; justify-content: center;42    border-radius: 60px;43  }44  .hamburger svg { width: 72px; height: 72px; fill: #d7e8d0; }45  .search-box {46    height: 120px;47    background: #1f2b23;48    border-radius: 80px;49    color: #cfe3c6;50    font-size: 54px;51    display: flex; align-items: center;52    padding: 0 48px;53  }54  .avatar {55    width: 120px; height: 120px;56    border-radius: 60px;57    background: #284a36;58    color: #d7f0d2;59    font-weight: 700;60    display: flex; align-items: center; justify-content: center;61    font-size: 60px;62  }63 64  /* Tabs */65  .tabs {66    display: flex;67    padding: 16px 60px 0 60px;68    gap: 100px;69    font-size: 54px;70    color: #cfd6cf;71  }72  .tab {73    position: relative;74    padding: 24px 0;75    opacity: 0.7;76  }77  .tab.active { opacity: 1; color: #cfe3c6; }78  .tab.active::after {79    content: "";80    position: absolute;81    left: 0; bottom: 0;82    width: 260px; height: 10px;83    background: #7fbf6e;84    border-radius: 6px;85  }86 87  /* Card list */88  .list {89    padding-top: 24px;90  }91  .card {92    margin: 24px 48px 24px 48px;93    background: #121715;94    border-radius: 36px;95    box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;96  }97  .card-header {98    display: grid;99    grid-template-columns: 140px 1fr 120px;100    align-items: center;101    padding: 40px 36px 0 36px;102    gap: 24px;103  }104  .file-icon {105    width: 100px; height: 100px;106    border-radius: 18px;107    display: flex; align-items: center; justify-content: center;108    font-weight: 700;109    font-size: 40px;110  }111  .file-icon.pdf {112    background: #6a2b2b; color: #ffdcdc;113  }114  .file-icon.doc {115    background: #2b4f8a; color: #dbe9ff;116  }117  .title {118    font-size: 56px;119    font-weight: 700;120    color: #eaeaea;121  }122  .more {123    display: flex; align-items: center; justify-content: center;124  }125  .more svg { width: 64px; height: 64px; fill: #bfbfbf; opacity: 0.9; }126 127  .thumb {128    margin: 36px;129    height: 520px;130    border-radius: 24px;131    background: #E0E0E0;132    border: 1px solid #BDBDBD;133    display: flex; align-items: center; justify-content: center;134    color: #5f5f5f;135    font-size: 54px;136    font-weight: 600;137  }138 139  .activity {140    display: flex; align-items: center; gap: 28px;141    padding: 0 48px 40px 48px;142    color: #c9d2c9;143    font-size: 48px;144  }145  .avatar.small {146    width: 100px; height: 100px; font-size: 52px; border-radius: 50px;147    background: #284a36; color: #d7f0d2;148  }149 150  /* Floating action button */151  .fab {152    position: absolute;153    right: 60px;154    bottom: 420px; /* above bottom nav */155    width: 180px; height: 180px;156    background: #2f4a35;157    border-radius: 90px;158    display: flex; align-items: center; justify-content: center;159    color: #e8ffe0;160    font-size: 120px;161    box-shadow: 0 8px 20px rgba(0,0,0,0.5);162    border: 2px solid #2f4a35;163  }164 165  /* Bottom navigation */166  .bottom-nav {167    position: absolute;168    bottom: 0; left: 0; right: 0;169    height: 240px;170    background: #0e1311;171    display: grid;172    grid-template-columns: repeat(4, 1fr);173    align-items: center;174    padding: 0 36px;175    border-top: 1px solid rgba(255,255,255,0.06);176  }177  .nav-item {178    display: flex; flex-direction: column; align-items: center; justify-content: center;179    gap: 20px; color: #cfd2cf; font-size: 44px;180  }181  .nav-item svg { width: 78px; height: 78px; fill: #cfd2cf; }182  .nav-item.active {183    color: #eaf6e6;184  }185  .nav-item.active .pill {186    width: 220px; height: 110px;187    background: #293725;188    border-radius: 56px;189    display: flex; align-items: center; justify-content: center;190    margin-bottom: 10px;191  }192  .nav-item .label { font-size: 44px; }193 194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Status bar -->200  <div class="status-bar">201    <div class="status-left">9:47</div>202    <div class="status-right">203      <div class="status-icon">204        <!-- WiFi -->205        <svg viewBox="0 0 24 24"><path d="M12 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6.6-6.2l1.4 1.4C8.1 11.1 10 10.5 12 10.5s3.9.6 5.2 2.7l1.4-1.4C16.9 9.1 14.6 8.3 12 8.3s-4.9.8-6.6 3.5zm-3.3-3.3l1.4 1.4C6.6 7.2 9.2 6.4 12 6.4s5.4.8 8.5 3.5l1.4-1.4C18.9 5.1 15.6 4 12 4S5.1 5.1 2.1 8.5z"/></svg>206      </div>207      <div class="status-icon">208        <!-- Cellular -->209        <svg viewBox="0 0 24 24"><path d="M2 22h3v-8H2v8zm5 0h3V8H7v14zm5 0h3V4h-3v18zm5 0h3V2h-3v20z"/></svg>210      </div>211      <div class="status-icon">212        <!-- Battery -->213        <svg viewBox="0 0 24 24"><path d="M20 7h2v10h-2V7zm-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 14H4V7h14v12z"/></svg>214      </div>215    </div>216  </div>217 218  <!-- Search and header row -->219  <div class="search-row">220    <div class="hamburger">221      <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>222    </div>223    <div class="search-box">Search in Drive</div>224    <div class="avatar">C</div>225  </div>226 227  <!-- Tabs -->228  <div class="tabs">229    <div class="tab active">Suggested</div>230    <div class="tab">Notifications</div>231  </div>232 233  <!-- List of cards -->234  <div class="list">235 236    <!-- PDF card -->237    <div class="card">238      <div class="card-header">239        <div class="file-icon pdf">PDF</div>240        <div class="title">dinner-vegetable (3).pdf</div>241        <div class="more">242          <svg viewBox="0 0 24 24"><path d="M12 2a2 2 0 012 2 2 2 0 11-4 0 2 2 0 012-2zm0 8a2 2 0 012 2 2 2 0 11-4 0 2 2 0 012-2zm0 8a2 2 0 012 2 2 2 0 11-4 0 2 2 0 012-2z"/></svg>243        </div>244      </div>245      <div class="thumb">[IMG: PDF Thumbnail]</div>246      <div class="activity">247        <div class="avatar small">C</div>248        <div>You opened today</div>249      </div>250    </div>251 252    <!-- Docs card -->253    <div class="card">254      <div class="card-header">255        <div class="file-icon doc">📄</div>256        <div class="title">Shopping list</div>257        <div class="more">258          <svg viewBox="0 0 24 24"><path d="M12 2a2 2 0 012 2 2 2 0 11-4 0 2 2 0 012-2zm0 8a2 2 0 012 2 2 2 0 11-4 0 2 2 0 012-2zm0 8a2 2 0 012 2 2 2 0 11-4 0 2 2 0 012-2z"/></svg>259        </div>260      </div>261      <div class="thumb">[IMG: Docs Thumbnail]</div>262      <div class="activity">263        <div class="avatar small">C</div>264        <div>You modified in the past month</div>265      </div>266    </div>267 268  </div>269 270  <!-- Floating action button -->271  <div class="fab">+</div>272 273  <!-- Bottom navigation -->274  <div class="bottom-nav">275    <div class="nav-item active">276      <div class="pill">277        <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>278      </div>279      <div class="label">Home</div>280    </div>281    <div class="nav-item">282      <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>283      <div class="label">Starred</div>284    </div>285    <div class="nav-item">286      <svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 3-1.34 3-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm8 0c-.46 0-1 .03-1.58.08 1.88.86 3.58 2.22 3.58 3.92v2H24v-2c0-2.66-5.33-4-8-4z"/></svg>287      <div class="label">Shared</div>288    </div>289    <div class="nav-item">290      <svg viewBox="0 0 24 24"><path d="M6 2h9l5 5v15H6V2zm9 1.5V8h5.5L15 3.5zM8 12h8v2H8v-2zm0 4h8v2H8v-2z"/></svg>291      <div class="label">Files</div>292    </div>293  </div>294 295</div>296</body>297</html>