GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock - Google Drive Dark</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #111916; /* deep dark greenish */13    color: #E9ECEA;14    font-family: Roboto, Arial, sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 130px;22    padding: 0 48px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #DDE4DF;27    font-weight: 600;28    letter-spacing: 1px;29    font-size: 52px;30  }31  .sb-right { display: flex; align-items: center; gap: 28px; }32  .icon-wifi, .icon-battery, .icon-cell { display: inline-block; }33  .icon-wifi svg, .icon-battery svg, .icon-cell svg { width: 60px; height: 60px; fill: none; stroke: #DDE4DF; stroke-width: 8; }34 35  /* Search bar */36  .search-wrap {37    position: absolute;38    top: 160px;39    left: 48px;40    right: 48px;41  }42  .search-bar {43    height: 140px;44    background: #18221E;45    border-radius: 80px;46    display: flex;47    align-items: center;48    padding: 0 40px;49    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);50  }51  .hamburger { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; margin-right: 20px; }52  .hamburger svg { width: 72px; height: 72px; fill: none; stroke: #C9D1CB; stroke-width: 12; }53  .search-placeholder { flex: 1; color: #C9D1CB; font-size: 54px; }54  .profile {55    width: 120px; height: 120px;56    background: #1E2B25;57    border-radius: 50%;58    border: 2px solid rgba(255,255,255,0.1);59    display: flex; align-items: center; justify-content: center;60    font-weight: 700; color: #BFE0D0; font-size: 56px;61  }62 63  /* Tabs */64  .tabs {65    position: absolute;66    top: 340px;67    left: 48px; right: 48px;68    height: 120px;69    display: flex; align-items: flex-end; gap: 60px;70  }71  .tab {72    font-size: 56px;73    color: #A9B5AE;74    padding-bottom: 28px;75  }76  .tab.active {77    color: #CFE0D7;78    border-bottom: 8px solid #7FB38B;79  }80 81  /* List area */82  .content {83    position: absolute;84    top: 520px; left: 0; right: 0;85    padding: 0 48px;86  }87  .file-card { margin-bottom: 80px; }88  .file-header {89    display: flex; align-items: center; justify-content: space-between;90    margin-bottom: 28px;91  }92  .file-left { display: flex; align-items: center; gap: 28px; }93  .badge {94    width: 72px; height: 72px; border-radius: 12px;95    display: flex; align-items: center; justify-content: center;96    font-size: 34px; font-weight: 700; color: #fff;97  }98  .badge.red { background: #CF4B46; }99  .badge.blue { background: #456FD9; }100  .file-name { font-size: 56px; color: #DDE4DF; }101  .kebab { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }102  .kebab svg { width: 18px; height: 60px; fill: #C9D1CB; }103 104  .thumb {105    width: 1344px; height: 520px;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    border-radius: 28px;109    display: flex; align-items: center; justify-content: center;110    color: #757575; font-size: 44px;111  }112 113  .meta-row {114    display: flex; align-items: center; gap: 24px;115    margin-top: 32px;116    color: #A9B5AE; font-size: 48px;117  }118  .avatar {119    width: 92px; height: 92px; border-radius: 50%;120    background: #224236; color: #CFE0D7; display: flex; align-items: center; justify-content: center;121    font-size: 48px; font-weight: 700;122  }123 124  /* Bottom item preview */125  .thumb.small { height: 420px; }126 127  /* Bottom sheet */128  .bottom-sheet {129    position: absolute;130    left: 0; right: 0; bottom: 0;131    height: 980px;132    background: #1A241F;133    border-top-left-radius: 80px;134    border-top-right-radius: 80px;135    box-shadow: 0 -20px 60px rgba(0,0,0,0.45);136    padding: 120px 80px;137  }138  .sheet-grid {139    display: grid;140    grid-template-columns: repeat(3, 1fr);141    grid-row-gap: 120px;142    grid-column-gap: 40px;143  }144  .sheet-item {145    display: flex; flex-direction: column; align-items: center; gap: 28px;146    color: #DDE4DF;147  }148  .circle-icon {149    width: 180px; height: 180px; border-radius: 50%;150    background: #202C26;151    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);152    display: flex; align-items: center; justify-content: center;153  }154  .circle-icon svg { width: 100px; height: 100px; }155  .item-label { font-size: 48px; color: #C9D1CB; }156 157  /* Simple colored doc icons */158  .doc-blue { fill: #4A77F2; }159  .doc-green { fill: #39A86B; }160  .doc-orange { fill: #E38C2E; }161 162  /* Home indicator */163  .home-indicator {164    position: absolute;165    bottom: 42px;166    left: 50%; transform: translateX(-50%);167    width: 680px; height: 16px; border-radius: 12px;168    background: #FFFFFF;169    opacity: 0.9;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status bar -->177  <div class="status-bar">178    <div>9:43</div>179    <div class="sb-right">180      <span class="icon-wifi">181        <svg viewBox="0 0 24 24">182          <path d="M2 8c5-4 15-4 20 0M6 12c3-2 9-2 12 0M10 16c2-1 4-1 6 0M12 20l2-2-2-2-2 2 2 2z" />183        </svg>184      </span>185      <span class="icon-cell">186        <svg viewBox="0 0 24 24">187          <path d="M3 20h2M7 16h2M11 12h2M15 8h2" />188        </svg>189      </span>190      <span class="icon-battery">191        <svg viewBox="0 0 24 24">192          <rect x="2" y="6" width="18" height="12" rx="2" />193          <rect x="21" y="10" width="2" height="4" />194          <rect x="4" y="8" width="12" height="8" fill="#DDE4DF" stroke="none"/>195        </svg>196      </span>197    </div>198  </div>199 200  <!-- Search bar -->201  <div class="search-wrap">202    <div class="search-bar">203      <div class="hamburger">204        <svg viewBox="0 0 24 24">205          <path d="M3 6h18M3 12h18M3 18h18" />206        </svg>207      </div>208      <div class="search-placeholder">Search in Drive</div>209      <div class="profile">C</div>210    </div>211  </div>212 213  <!-- Tabs -->214  <div class="tabs">215    <div class="tab active">Suggested</div>216    <div class="tab">Notifications</div>217  </div>218 219  <!-- Content list -->220  <div class="content">221 222    <!-- PDF item -->223    <div class="file-card">224      <div class="file-header">225        <div class="file-left">226          <div class="badge red">PDF</div>227          <div class="file-name">dinner-vegetable (3).pdf</div>228        </div>229        <div class="kebab">230          <svg viewBox="0 0 24 24">231            <circle cx="12" cy="4" r="3"></circle>232            <circle cx="12" cy="12" r="3"></circle>233            <circle cx="12" cy="20" r="3"></circle>234          </svg>235        </div>236      </div>237      <div class="thumb">[IMG: Menu PDF Thumbnail]</div>238      <div class="meta-row">239        <div class="avatar">C</div>240        <div>You opened today</div>241      </div>242    </div>243 244    <!-- Docs item -->245    <div class="file-card">246      <div class="file-header">247        <div class="file-left">248          <div class="badge blue">DOC</div>249          <div class="file-name">Shopping list</div>250        </div>251        <div class="kebab">252          <svg viewBox="0 0 24 24">253            <circle cx="12" cy="4" r="3"></circle>254            <circle cx="12" cy="12" r="3"></circle>255            <circle cx="12" cy="20" r="3"></circle>256          </svg>257        </div>258      </div>259      <div class="thumb small">[IMG: Document Preview]</div>260    </div>261 262  </div>263 264  <!-- Bottom sheet actions -->265  <div class="bottom-sheet">266    <div class="sheet-grid">267      <!-- Folder -->268      <div class="sheet-item">269        <div class="circle-icon">270          <svg viewBox="0 0 24 24" stroke="#CFE0D7" stroke-width="1.6" fill="none">271            <path d="M3 18V6h7l2 2h9v10H3z" fill="#6A7A70" stroke="none"/>272            <path d="M3 8h22" stroke="#CFE0D7" opacity="0.4"/>273          </svg>274        </div>275        <div class="item-label">Folder</div>276      </div>277 278      <!-- Upload -->279      <div class="sheet-item">280        <div class="circle-icon">281          <svg viewBox="0 0 24 24" stroke="#CFE0D7" stroke-width="2" fill="none">282            <path d="M12 4v10M6 10l6-6 6 6" />283            <path d="M4 20h16" />284          </svg>285        </div>286        <div class="item-label">Upload</div>287      </div>288 289      <!-- Scan -->290      <div class="sheet-item">291        <div class="circle-icon">292          <svg viewBox="0 0 24 24" stroke="#CFE0D7" stroke-width="2" fill="none">293            <path d="M3 8V5h3M18 5h3v3M21 16v3h-3M6 19H3v-3" />294            <rect x="7" y="7" width="10" height="10" rx="2" />295            <rect x="11" y="11" width="2" height="2" fill="#CFE0D7" stroke="none"/>296          </svg>297        </div>298        <div class="item-label">Scan</div>299      </div>300 301      <!-- Google Docs -->302      <div class="sheet-item">303        <div class="circle-icon">304          <svg viewBox="0 0 24 24">305            <rect x="5" y="3" width="14" height="18" rx="2" class="doc-blue"></rect>306            <rect x="7.5" y="7" width="9" height="1.8" fill="#fff"></rect>307            <rect x="7.5" y="10" width="9" height="1.8" fill="#fff"></rect>308            <rect x="7.5" y="13" width="9" height="1.8" fill="#fff"></rect>309          </svg>310        </div>311        <div class="item-label">Google Docs</div>312      </div>313 314      <!-- Google Sheets -->315      <div class="sheet-item">316        <div class="circle-icon">317          <svg viewBox="0 0 24 24">318            <rect x="4" y="3" width="16" height="18" rx="2" class="doc-green"></rect>319            <path d="M7 7h10M7 11h10M7 15h10" stroke="#fff" stroke-width="1.8" />320            <path d="M10 6v12M14 6v12" stroke="#fff" stroke-width="1.8" />321          </svg>322        </div>323        <div class="item-label">Google Sheets</div>324      </div>325 326      <!-- Google Slides -->327      <div class="sheet-item">328        <div class="circle-icon">329          <svg viewBox="0 0 24 24">330            <rect x="5" y="3" width="14" height="18" rx="2" class="doc-orange"></rect>331            <rect x="7.5" y="8.5" width="9" height="7" rx="1.2" fill="#fff"></rect>332          </svg>333        </div>334        <div class="item-label">Google Slides</div>335      </div>336    </div>337  </div>338 339  <!-- Home indicator -->340  <div class="home-indicator"></div>341 342</div>343</body>344</html>