GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4  <meta charset="UTF-8" />5  <meta name="viewport" content="width=1080, initial-scale=1.0" />6  <title>Drive - Dark UI Mock</title>7  <style>8    body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9    * { box-sizing: border-box; }10    #render-target {11      width: 1080px;12      height: 2400px;13      position: relative;14      overflow: hidden;15      background: #121212;16      color: #EDEDED;17    }18 19    /* Status bar */20    .status-bar {21      height: 90px;22      padding: 0 32px;23      display: flex;24      align-items: center;25      justify-content: space-between;26      color: #EDEDED;27      font-size: 32px;28      opacity: 0.95;29    }30    .status-right {31      display: flex;32      align-items: center;33      gap: 20px;34    }35    .icon-battery, .icon-wifi {36      width: 36px; height: 24px;37      display: inline-block;38    }39 40    /* Top search pill */41    .top-area {42      padding: 20px 28px 8px 28px;43    }44    .search-pill {45      background: #1F1F1F;46      border-radius: 40px;47      height: 96px;48      display: flex;49      align-items: center;50      padding: 0 20px;51      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);52    }53    .hamburger {54      width: 56px; height: 56px;55      display: flex; align-items: center; justify-content: center;56      margin-right: 16px;57    }58    .search-placeholder {59      color: #9E9E9E;60      font-size: 34px;61      flex: 1;62    }63    .avatar {64      width: 72px; height: 72px; border-radius: 50%;65      background: #A23A5A;66      color: #FFF;67      display: flex; align-items: center; justify-content: center;68      font-weight: bold;69      font-size: 34px;70    }71 72    /* Tabs */73    .tabs {74      display: flex;75      gap: 44px;76      padding: 20px 28px 0 28px;77      color: #9EA1A4;78      font-size: 34px;79    }80    .tab {81      position: relative;82      padding: 18px 6px;83    }84    .tab.active {85      color: #EDEDED;86    }87    .tab.active::after {88      content: '';89      position: absolute;90      left: 0; right: 0; bottom: 6px;91      height: 6px; border-radius: 3px;92      background: #5E9CFF;93      width: 160px;94    }95 96    /* List/content area */97    .content {98      padding: 18px 28px 0 28px;99    }100    .file-row {101      display: flex;102      align-items: center;103      justify-content: space-between;104      margin: 30px 0 16px 0;105    }106    .left-info {107      display: flex; align-items: center; gap: 18px;108    }109    .pdf-chip {110      background: #D64C4C;111      color: #111;112      font-weight: bold;113      border-radius: 10px;114      padding: 10px 14px;115      font-size: 26px;116      color: #FCEAEA;117    }118    .file-title {119      color: #CFCFCF;120      font-size: 40px;121      font-weight: 700;122      letter-spacing: 0.2px;123    }124    .dots {125      width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; opacity: 0.8;126    }127 128    .preview-card {129      background: #1B1B1B;130      border-radius: 26px;131      padding: 24px;132      box-shadow: 0 2px 0 rgba(0,0,0,0.18);133    }134    .img-placeholder {135      width: 100%;136      height: 360px;137      background: #E0E0E0;138      border: 1px solid #BDBDBD;139      border-radius: 14px;140      display: flex; align-items: center; justify-content: center;141      color: #757575;142      font-size: 30px;143    }144 145    .activity {146      display: flex; align-items: center; gap: 18px;147      padding: 24px 0 8px 0;148      color: #B9B9B9;149      font-size: 34px;150    }151    .activity .a-ava {152      width: 64px; height: 64px; border-radius: 50%;153      background: #AC2E5B; color: #FFF;154      display: flex; align-items: center; justify-content: center;155      font-weight: bold;156    }157 158    /* Bottom sheet */159    .bottom-sheet {160      position: absolute;161      left: 0; right: 0; bottom: 80px;162      height: 520px;163      background: #2B333B;164      border-top-left-radius: 28px;165      border-top-right-radius: 28px;166      box-shadow: 0 -6px 24px rgba(0,0,0,0.45);167      padding: 34px 40px;168    }169    .sheet-grid {170      display: grid;171      grid-template-columns: repeat(3, 1fr);172      gap: 54px 64px;173      margin-top: 8px;174    }175    .sheet-item {176      display: flex; flex-direction: column; align-items: center; justify-content: center;177      color: #D9DDE1;178      font-size: 28px;179    }180    .circle-icon {181      width: 122px; height: 122px; border-radius: 50%;182      border: 2px solid rgba(255,255,255,0.35);183      display: flex; align-items: center; justify-content: center;184      margin-bottom: 16px;185      position: relative;186    }187    .pill {188      position: absolute; left: 50%; transform: translateX(-50%);189      bottom: 18px;190      width: 320px; height: 10px; background: rgba(255,255,255,0.85);191      border-radius: 6px;192    }193    /* Helper colors for Drive file type glyphs inside circles */194    .gdocs { width: 60px; height: 80px; background: #2E7CF6; border-radius: 6px; }195    .gsheets { width: 60px; height: 60px; background: #1DBA59; border-radius: 8px; position: relative; }196    .gslides { width: 70px; height: 50px; background: #F2A200; border-radius: 4px; }197    .folder-shape {198      width: 84px; height: 60px; position: relative;199    }200    .folder-shape::before, .folder-shape::after {201      content: '';202      position: absolute; left: 0;203      background: none; border: 2px solid rgba(255,255,255,0.6);204      border-radius: 6px;205    }206    .folder-shape::before { width: 64px; height: 16px; top: -4px; border-bottom: none; }207    .folder-shape::after { width: 84px; height: 52px; top: 10px; }208    .upload-arrow, .scan-frame {209      width: 64px; height: 64px;210    }211    .scan-frame {212      border: 2px solid rgba(255,255,255,0.6);213      border-radius: 10px;214      position: relative;215    }216    .scan-frame::after {217      content: ''; position: absolute; left: 8px; right: 8px; top: 30px; height: 2px; background: rgba(255,255,255,0.6);218    }219  </style>220</head>221<body>222  <div id="render-target">223 224    <!-- Status bar -->225    <div class="status-bar">226      <div>8:27</div>227      <div class="status-right">228        <!-- Simple WiFi icon -->229        <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">230          <path d="M2 8c5.5-4.5 14.5-4.5 20 0"></path>231          <path d="M5 11c4-3 10-3 14 0"></path>232          <path d="M8 14c2.5-2 5.5-2 8 0"></path>233          <circle cx="12" cy="18" r="1.6" fill="#EDEDED"></circle>234        </svg>235        <!-- Simple battery -->236        <svg class="icon-battery" viewBox="0 0 30 18" fill="none" stroke="#EDEDED" stroke-width="2">237          <rect x="1" y="3" width="24" height="12" rx="2"></rect>238          <rect x="26" y="6" width="3" height="6"></rect>239          <rect x="3" y="5" width="18" height="8" fill="#EDEDED"></rect>240        </svg>241      </div>242    </div>243 244    <!-- Top search pill -->245    <div class="top-area">246      <div class="search-pill">247        <div class="hamburger">248          <svg width="36" height="36" viewBox="0 0 24 24" fill="#CFCFCF">249            <rect x="3" y="6" width="18" height="2"></rect>250            <rect x="3" y="11" width="18" height="2"></rect>251            <rect x="3" y="16" width="18" height="2"></rect>252          </svg>253        </div>254        <div class="search-placeholder">Search in Drive</div>255        <div class="avatar">C</div>256      </div>257    </div>258 259    <!-- Tabs -->260    <div class="tabs">261      <div class="tab active">Suggested</div>262      <div class="tab">Notifications</div>263    </div>264 265    <!-- Content list -->266    <div class="content">267      <!-- First file -->268      <div class="file-row">269        <div class="left-info">270          <div class="pdf-chip">PDF</div>271          <div class="file-title">Amsterdam.pdf</div>272        </div>273        <div class="dots">274          <svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD">275            <circle cx="12" cy="5" r="2"></circle>276            <circle cx="12" cy="12" r="2"></circle>277            <circle cx="12" cy="19" r="2"></circle>278          </svg>279        </div>280      </div>281 282      <div class="preview-card">283        <div class="img-placeholder">[IMG: PDF preview]</div>284      </div>285 286      <div class="activity">287        <div class="a-ava">C</div>288        <div>You opened today</div>289      </div>290 291      <!-- Second file (partially hidden by bottom sheet) -->292      <div class="file-row" style="margin-top: 36px;">293        <div class="left-info">294          <div class="pdf-chip">PDF</div>295          <div class="file-title">Venice tour.pdf</div>296        </div>297        <div class="dots">298          <svg width="28" height="28" viewBox="0 0 24 24" fill="#BDBDBD">299            <circle cx="12" cy="5" r="2"></circle>300            <circle cx="12" cy="12" r="2"></circle>301            <circle cx="12" cy="19" r="2"></circle>302          </svg>303        </div>304      </div>305 306      <div class="preview-card" style="height: 420px;">307        <div class="img-placeholder" style="height: 340px;">[IMG: PDF preview]</div>308      </div>309    </div>310 311    <!-- Bottom sheet with actions -->312    <div class="bottom-sheet">313      <div class="sheet-grid">314        <div class="sheet-item">315          <div class="circle-icon">316            <div class="folder-shape"></div>317          </div>318          <div>Folder</div>319        </div>320        <div class="sheet-item">321          <div class="circle-icon">322            <svg class="upload-arrow" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">323              <path d="M12 16V6"></path>324              <path d="M8 9l4-4 4 4"></path>325              <rect x="4" y="16" width="16" height="4" rx="1" fill="none" stroke="#EDEDED"></rect>326            </svg>327          </div>328          <div>Upload</div>329        </div>330        <div class="sheet-item">331          <div class="circle-icon">332            <div class="scan-frame"></div>333          </div>334          <div>Scan</div>335        </div>336        <div class="sheet-item">337          <div class="circle-icon">338            <div class="gdocs"></div>339          </div>340          <div>Google Docs</div>341        </div>342        <div class="sheet-item">343          <div class="circle-icon">344            <div class="gsheets"></div>345          </div>346          <div>Google Sheets</div>347        </div>348        <div class="sheet-item">349          <div class="circle-icon">350            <div class="gslides"></div>351          </div>352          <div>Google Slides</div>353        </div>354      </div>355    </div>356 357    <!-- Gesture pill -->358    <div class="pill"></div>359 360  </div>361</body>362</html>