GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Drive UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #E0E0E0;16    font-family: Arial, Helvetica, sans-serif;17  }18  .status-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 80px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 36px;26    font-size: 32px;27    color: #CFCFCF;28  }29  .header {30    position: absolute;31    top: 80px; left: 0; right: 0;32    padding: 28px 36px 0 36px;33  }34  .search-wrap {35    display: flex;36    align-items: center;37    background: #2A2D31;38    border-radius: 40px;39    height: 112px;40    padding: 0 28px;41  }42  .search-wrap .icon {43    width: 44px; height: 44px; margin-right: 18px;44  }45  .search-input {46    flex: 1;47    color: #B8B8B8;48    font-size: 40px;49  }50  .avatar {51    width: 86px; height: 86px;52    border-radius: 50%;53    background: #CF3276;54    margin-left: 18px;55    display: flex; align-items: center; justify-content: center;56    font-weight: 700; color: white; font-size: 44px;57  }58  .tabs {59    display: flex;60    justify-content: space-between;61    padding: 22px 12px 0 12px;62    font-size: 42px;63  }64  .tab {65    color: #BFC3C7;66  }67  .tab.active {68    color: #FFFFFF;69    position: relative;70  }71  .tab.active::after {72    content: "";73    position: absolute;74    left: 0; right: 0; bottom: -18px;75    height: 8px; border-radius: 4px;76    background: #4285F4;77  }78  .sort-row {79    margin-top: 58px;80    padding: 0 36px;81    display: flex; align-items: center; justify-content: space-between;82    font-size: 40px; color: #C9C9C9;83  }84  .grid {85    position: absolute;86    top: 360px; left: 0; right: 0; bottom: 200px;87    padding: 0 24px;88    display: flex; flex-wrap: wrap;89    align-content: flex-start;90  }91  .tile {92    width: 492px;93    margin: 26px;94    background: #1F1F1F;95    border-radius: 28px;96    padding: 26px;97    box-sizing: border-box;98  }99  .preview {100    width: 100%;101    height: 280px;102    background: #E0E0E0;103    border: 1px solid #BDBDBD;104    border-radius: 20px;105    display: flex; align-items: center; justify-content: center;106    color: #757575; font-size: 36px;107  }108  .pdf-tag {109    display: inline-block;110    margin-top: 18px;111    background: #D45C53;112    color: #1F1F1F;113    font-weight: bold;114    font-size: 28px;115    padding: 10px 16px;116    border-radius: 10px;117  }118  .label-row {119    margin-top: 18px;120    display: flex; align-items: center; justify-content: space-between;121  }122  .item-name { font-size: 40px; color: #EDEDED; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }123  .dots {124    width: 40px; height: 40px;125  }126  .fab {127    position: absolute;128    right: 40px; bottom: 260px;129    width: 120px; height: 120px;130    border-radius: 60px;131    background: #394A58;132    display: flex; align-items: center; justify-content: center;133    box-shadow: 0 8px 20px rgba(0,0,0,0.6);134  }135  .bottom-nav {136    position: absolute;137    left: 0; right: 0; bottom: 0;138    height: 200px;139    background: #1E2124;140    display: flex; justify-content: space-around; align-items: center;141    border-top: 1px solid #2A2D31;142  }143  .nav-item {144    display: flex; flex-direction: column; align-items: center; justify-content: center;145    color: #BFC3C7; font-size: 34px;146  }147  .nav-item svg { width: 56px; height: 56px; margin-bottom: 12px; }148  .nav-item.active { color: #FFFFFF; }149  .pill-indicator {150    position: absolute;151    left: 50%; transform: translateX(-50%);152    bottom: 210px;153    width: 200px; height: 10px; border-radius: 6px; background: #3A3A3A;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status bar -->161  <div class="status-bar">162    <div>8:28</div>163    <div style="display:flex; gap:20px; align-items:center;">164      <!-- WiFi icon -->165      <svg width="40" height="40" viewBox="0 0 24 24" fill="#D0D0D0"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/></svg>166      <!-- Battery icon -->167      <svg width="40" height="40" viewBox="0 0 24 24" fill="#D0D0D0"><rect x="2" y="6" width="18" height="12" rx="2" ry="2"/><rect x="20" y="10" width="2" height="4"/></svg>168    </div>169  </div>170 171  <!-- Header with search -->172  <div class="header">173    <div class="search-wrap">174      <!-- Hamburger -->175      <svg class="icon" viewBox="0 0 24 24" fill="#CFCFCF"><rect x="3" y="5" width="18" height="2"/><rect x="3" y="11" width="18" height="2"/><rect x="3" y="17" width="18" height="2"/></svg>176      <div class="search-input">Search in Drive</div>177      <div class="avatar">C</div>178    </div>179 180    <div class="tabs">181      <div class="tab active">My Drive</div>182      <div class="tab">Computers</div>183    </div>184 185    <div class="sort-row">186      <div>Name ↑</div>187      <!-- list/grid icon -->188      <svg width="48" height="48" viewBox="0 0 24 24" fill="#CFCFCF">189        <rect x="4" y="5" width="16" height="2"/><rect x="4" y="11" width="16" height="2"/><rect x="4" y="17" width="16" height="2"/>190      </svg>191    </div>192  </div>193 194  <!-- Content Grid -->195  <div class="grid">196    <!-- Folder tile -->197    <div class="tile">198      <div class="preview">[IMG: Folder Thumbnail]</div>199      <div class="label-row">200        <div class="item-name">Jitendra</div>201        <svg class="dots" viewBox="0 0 24 24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>202      </div>203    </div>204 205    <!-- PDF tile 1 -->206    <div class="tile">207      <div class="preview">[IMG: PDF Preview - Amsterdam]</div>208      <span class="pdf-tag">PDF</span>209      <div class="label-row">210        <div class="item-name">Amsterdam.pdf</div>211        <svg class="dots" viewBox="0 0 24 24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>212      </div>213    </div>214 215    <!-- PDF tile 2 -->216    <div class="tile">217      <div class="preview">[IMG: PDF Preview - Amsterdam]</div>218      <span class="pdf-tag">PDF</span>219      <div class="label-row">220        <div class="item-name">Amsterdam.pdf</div>221        <svg class="dots" viewBox="0 0 24 24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>222      </div>223    </div>224 225    <!-- PDF tile 3 -->226    <div class="tile">227      <div class="preview">[IMG: PDF Preview - Amsterdam]</div>228      <span class="pdf-tag">PDF</span>229      <div class="label-row">230        <div class="item-name">Amsterdam.pdf</div>231        <svg class="dots" viewBox="0 0 24 24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>232      </div>233    </div>234 235    <!-- File tile 1 -->236    <div class="tile">237      <div class="preview">[IMG: Generic File Icon]</div>238      <div class="label-row">239        <div class="item-name">BACKUP_REMINDER_M...</div>240        <svg class="dots" viewBox="0 0 24 24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>241      </div>242    </div>243 244    <!-- File tile 2 -->245    <div class="tile">246      <div class="preview">[IMG: Generic File Icon]</div>247      <div class="label-row">248        <div class="item-name">BACKUP_REMINDER_M...</div>249        <svg class="dots" viewBox="0 0 24 24" fill="#CFCFCF"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>250      </div>251    </div>252  </div>253 254  <!-- Floating Action Button -->255  <div class="fab">256    <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">257      <rect x="11" y="5" width="2" height="14"/><rect x="5" y="11" width="14" height="2"/>258    </svg>259  </div>260 261  <!-- Bottom pill indicator (gesture bar) -->262  <div class="pill-indicator"></div>263 264  <!-- Bottom Navigation -->265  <div class="bottom-nav">266    <div class="nav-item">267      <svg viewBox="0 0 24 24" fill="#BFC3C7"><path d="M12 3l9 7v10h-6v-6H9v6H3V10l9-7z"/></svg>268      <div>Home</div>269    </div>270    <div class="nav-item">271      <svg viewBox="0 0 24 24" fill="#BFC3C7"><path d="M12 17.3l-5.5 3 1-6.1-4.5-4.4 6.2-.9L12 3l2.8 5.9 6.2.9-4.5 4.4 1 6.1z"/></svg>272      <div>Starred</div>273    </div>274    <div class="nav-item">275      <svg viewBox="0 0 24 24" fill="#BFC3C7"><circle cx="8" cy="8" r="4"/><circle cx="16" cy="8" r="4"/><path d="M2 21c0-4 6-6 8-6s8 2 8 6H2z"/></svg>276      <div>Shared</div>277    </div>278    <div class="nav-item active">279      <svg viewBox="0 0 24 24" fill="#FFFFFF"><path d="M4 4h10l6 6v10H4z"/><path d="M14 4v6h6"/></svg>280      <div>Files</div>281    </div>282  </div>283 284</div>285</body>286</html>