GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Drive 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: #0f1719;13    color: #e8f1ef;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 28px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #d7dfdd;24    font-size: 34px;25    letter-spacing: 1px;26    opacity: 0.95;27  }28  .status-right {29    display: flex; align-items:center; gap:20px;30  }31  .sb-icon { width: 34px; height: 34px; opacity: .85; }32 33  /* Search */34  .search-wrap { padding: 18px 28px 8px; }35  .search-bar {36    height: 124px;37    background: #1a2427;38    border-radius: 64px;39    display: flex;40    align-items: center;41    padding: 0 30px;42    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);43  }44  .hamburger {45    width: 64px; height: 64px; margin-right: 18px; display:flex; align-items:center; justify-content:center;46  }47  .hamburger svg { fill:#c9d5d2 }48  .search-text { flex:1; color:#b8c6c2; font-size: 40px; }49  .avatar {50    width: 90px; height: 90px; border-radius: 50%;51    background:#ef7d26; color:#fff; display:flex; align-items:center; justify-content:center;52    font-weight: 700; font-size: 46px; margin-left: 16px;53  }54 55  /* Tabs */56  .tabs {57    display: flex; gap: 46px; padding: 10px 44px 8px; align-items: flex-end;58    border-bottom: 1px solid rgba(255,255,255,0.06);59  }60  .tab {61    font-size: 44px; padding: 22px 0; color:#8ea29d;62    position: relative; cursor: default;63  }64  .tab.active { color:#4ad08a; }65  .tab.active::after {66    content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px; background:#4ad08a; border-radius:4px;67  }68 69  /* Sort row */70  .sort-row {71    padding: 26px 40px 8px;72    display:flex; align-items:center; justify-content:space-between;73    font-size: 38px; color:#cbd7d3;74  }75  .sort-row .name { display:flex; align-items:center; gap:12px; }76  .sort-row .arrow { color:#8fd7a8; font-size: 34px; }77 78  .toggle-icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }79  .toggle-icon svg { fill:#c9d5d2; opacity:.9; }80 81  /* Grid of items */82  .grid {83    padding: 8px 26px 220px;84    display: flex; flex-wrap: wrap; gap: 36px 34px;85  }86  .card {87    width: 500px;88    background: transparent;89  }90  .thumb {91    height: 300px;92    border-radius: 26px;93    background:#1b2529;94    border:1px solid rgba(255,255,255,0.06);95    display:flex; align-items:center; justify-content:center;96    position: relative;97  }98  /* Folder visual */99  .folder {100    width: 360px; height: 210px; background:#c9d7e5; border-radius: 20px;101    position: relative;102  }103  .folder::before{104    content:""; position:absolute; left:18px; top:-38px; width:120px; height:80px; background:#c9d7e5; border-radius: 14px 14px 0 0;105  }106 107  .img-placeholder {108    width: 100%; height: 100%;109    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;110    display:flex; align-items:center; justify-content:center; border-radius: 18px;111  }112 113  .meta-row {114    display:flex; align-items:center; justify-content:space-between; margin-top: 16px;115  }116  .title {117    font-size: 40px; color:#e5efec; max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;118  }119  .dots { color:#cfdad6; font-size: 64px; line-height: 1; }120 121  .badge {122    display:inline-flex; align-items:center; justify-content:center;123    padding: 10px 16px; border-radius: 10px; background:#e06262; color:#ffecec;124    font-weight:700; font-size: 28px; margin-top: 18px; width: 86px;125  }126 127  /* FAB */128  .fab {129    position:absolute; right:38px; bottom:236px;130    width: 160px; height:160px; border-radius:50%;131    background:#1faa6b; display:flex; align-items:center; justify-content:center;132    box-shadow: 0 10px 24px rgba(0,0,0,0.45);133  }134  .fab svg { width: 92px; height:92px; fill:#eafff6; }135 136  /* Bottom navigation */137  .bottom-bar {138    position:absolute; left:0; right:0; bottom:0; height:190px;139    background:#0d1416; border-top:1px solid rgba(255,255,255,0.06);140    display:flex; align-items:center; justify-content:space-around;141  }142  .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#b9c6c2; font-size:34px; }143  .nav-icon {144    width:86px; height:86px; border-radius:22px; display:flex; align-items:center; justify-content:center;145    color:#cbd7d3;146  }147  .nav-item.active .nav-icon {148    background:#185f42; color:#a5f3c7;149  }150  .nav-item.active { color:#eaf7f2; }151 152</style>153</head>154<body>155<div id="render-target">156 157  <!-- Status bar -->158  <div class="status-bar">159    <div>9:32</div>160    <div class="status-right">161      <div class="sb-icon">✓</div>162      <div class="sb-icon">@</div>163      <div class="sb-icon">!</div>164      <div class="sb-icon">•</div>165      <div class="sb-icon">🔋</div>166    </div>167  </div>168 169  <!-- Search -->170  <div class="search-wrap">171    <div class="search-bar">172      <div class="hamburger">173        <svg viewBox="0 0 24 24" width="54" height="54"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>174      </div>175      <div class="search-text">Search in Drive</div>176      <div class="avatar">R</div>177    </div>178  </div>179 180  <!-- Tabs -->181  <div class="tabs">182    <div class="tab active">My Drive</div>183    <div class="tab">Computers</div>184  </div>185 186  <!-- Sort row -->187  <div class="sort-row">188    <div class="name">Name <span class="arrow">↑</span></div>189    <div class="toggle-icon">190      <svg viewBox="0 0 24 24" width="54" height="54"><path d="M4 6h16v2H4zm0 5h12v2H4zm0 5h8v2H4z"/></svg>191    </div>192  </div>193 194  <!-- Grid content -->195  <div class="grid">196 197    <!-- Row of folders -->198    <div class="card">199      <div class="thumb">200        <div class="folder"></div>201      </div>202      <div class="meta-row">203        <div class="title">History files</div>204        <div class="dots">⋮</div>205      </div>206    </div>207 208    <div class="card">209      <div class="thumb">210        <div class="folder"></div>211      </div>212      <div class="meta-row">213        <div class="title">History files</div>214        <div class="dots">⋮</div>215      </div>216    </div>217 218    <!-- PDF cards -->219    <div class="card">220      <div class="thumb">221        <div class="img-placeholder">[IMG: PDF Cover]</div>222      </div>223      <div class="badge">PDF</div>224      <div class="meta-row">225        <div class="title">A_short_history_of_Ger...</div>226        <div class="dots">⋮</div>227      </div>228    </div>229 230    <div class="card">231      <div class="thumb">232        <div class="img-placeholder">[IMG: PDF Cover]</div>233      </div>234      <div class="badge">PDF</div>235      <div class="meta-row">236        <div class="title">germanycountryst00so...</div>237        <div class="dots">⋮</div>238      </div>239    </div>240 241    <div class="card">242      <div class="thumb">243        <div class="img-placeholder">[IMG: PDF Cover]</div>244      </div>245      <div class="badge">PDF</div>246      <div class="meta-row">247        <div class="title">germanycountryst00so...</div>248        <div class="dots">⋮</div>249      </div>250    </div>251 252    <div class="card">253      <div class="thumb">254        <div class="img-placeholder">[IMG: PDF Cover]</div>255      </div>256      <div class="badge">PDF</div>257      <div class="meta-row">258        <div class="title">germanycountryst00so...</div>259        <div class="dots">⋮</div>260      </div>261    </div>262 263  </div>264 265  <!-- Floating Action Button -->266  <div class="fab">267    <svg viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>268  </div>269 270  <!-- Bottom Navigation -->271  <div class="bottom-bar">272    <div class="nav-item">273      <div class="nav-icon">274        <svg viewBox="0 0 24 24" width="50" height="50"><path fill="currentColor" d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg>275      </div>276      <div>Home</div>277    </div>278    <div class="nav-item">279      <div class="nav-icon">280        <svg viewBox="0 0 24 24" width="50" height="50"><path fill="currentColor" d="M12 17.3l6.18 3.7-1.64-7.03L21 9.24l-7.19-.61L12 2 10.19 8.63 3 9.24l4.46 4.73L5.82 21z"/></svg>281      </div>282      <div>Starred</div>283    </div>284    <div class="nav-item">285      <div class="nav-icon">286        <svg viewBox="0 0 24 24" width="50" height="50"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-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.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5z"/></svg>287      </div>288      <div>Shared</div>289    </div>290    <div class="nav-item active">291      <div class="nav-icon">292        <svg viewBox="0 0 24 24" width="50" height="50"><path fill="currentColor" d="M10 4H4v16h16V8h-8zM8 18H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V8h2v2zm4 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V8h2v2zm6 8h-4V10h4v10z"/></svg>293      </div>294      <div>Files</div>295    </div>296  </div>297 298</div>299</body>300</html>