GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Drive UI - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1440px; height: 3120px;9    position: relative; overflow: hidden;10    background: #111414; color: #EDEDED;11  }12 13  /* Status bar */14  .statusbar {15    position: absolute; top: 0; left: 0; right: 0;16    height: 110px; padding: 20px 40px;17    display: flex; align-items: center; justify-content: space-between;18    color: #DADADA; font-weight: 600; font-size: 42px;19  }20  .status-icons { display: flex; align-items: center; gap: 30px; }21  .icon-badge { width: 44px; height: 44px; border-radius: 50%; background: #2a2e2b; }22 23  /* Header / search */24  .header {25    position: absolute; top: 120px; left: 40px; right: 40px;26    display: flex; align-items: center; gap: 26px;27  }28  .search-pill {29    flex: 1; height: 140px; border-radius: 80px;30    background: #1b1f1c; box-shadow: inset 0 0 0 2px #1f221f;31    display: flex; align-items: center; padding: 0 40px; gap: 36px;32    color: #A9B3A3; font-size: 48px;33  }34  .profile {35    width: 120px; height: 120px; border-radius: 60px;36    background: #1f4033; color: #B2E0B7; display: flex; align-items: center; justify-content: center;37    font-size: 56px; font-weight: 700;38  }39 40  /* Tabs */41  .tabs {42    position: absolute; top: 300px; left: 40px; right: 40px;43    display: flex; gap: 80px; font-size: 54px;44  }45  .tab { color: #C9CDC8; padding-bottom: 24px; }46  .tab.active { color: #8BC34A; border-bottom: 6px solid #8BC34A; }47 48  /* Grid */49  .content {50    position: absolute; top: 420px; left: 40px; right: 40px; bottom: 300px;51    padding-top: 20px;52  }53  .grid {54    display: grid; grid-template-columns: 1fr 1fr; gap: 44px 44px;55  }56  .tile {57    background: transparent; border-radius: 36px;58  }59  .preview {60    height: 520px; border-radius: 36px;61    background: #202421; border: 1px solid #2a2e2b;62    display: flex; align-items: center; justify-content: center;63    position: relative; overflow: hidden;64  }65  .preview-label {66    width: 86%; height: 82%;67    background: #E0E0E0; border: 1px solid #BDBDBD;68    color: #757575; display: flex; align-items: center; justify-content: center;69    font-size: 42px; border-radius: 22px;70  }71  .file-meta {72    display: flex; align-items: center; justify-content: space-between;73    padding: 26px 10px 10px 10px;74  }75  .filename { font-size: 54px; color: #EDEDED; }76  .kebab { width: 18px; height: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }77  .dot { width: 14px; height: 14px; background: #BFC5BC; border-radius: 50%; }78 79  .badge-plus {80    position: absolute; left: 30px; bottom: 30px;81    width: 80px; height: 80px; border-radius: 16px;82    background: #66BB6A; display: flex; align-items: center; justify-content: center;83    box-shadow: 0 2px 0 rgba(0,0,0,0.4);84  }85  .badge-pdf {86    position: absolute; left: 30px; bottom: 30px;87    padding: 12px 22px; border-radius: 12px;88    background: #C85A55; color: #fff; font-weight: 700; font-size: 36px;89  }90 91  /* Bottom navigation */92  .bottom-bar {93    position: absolute; left: 0; right: 0; bottom: 0;94    height: 220px; background: rgba(24,26,24,0.95);95    border-top: 1px solid #2a2e2b;96    display: flex; align-items: center; justify-content: space-around;97  }98  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #C9CDC8; font-size: 44px; }99  .nav-item.active { color: #EDEDED; }100  .nav-icon {101    width: 108px; height: 90px; border-radius: 18px;102    display: flex; align-items: center; justify-content: center;103  }104  .nav-icon.active-bg { background: #263626; border: 1px solid #315036; }105 106  /* Floating action button */107  .fab {108    position: absolute; right: 60px; bottom: 260px;109    width: 190px; height: 190px; border-radius: 40px;110    background: #3B5F3E; display: flex; align-items: center; justify-content: center;111    box-shadow: 0 8px 22px rgba(0,0,0,0.55);112  }113  .fab svg { width: 120px; height: 120px; }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status bar -->120  <div class="statusbar">121    <div>9:03</div>122    <div class="status-icons">123      <!-- small placeholders for status icons -->124      <svg width="48" height="48" viewBox="0 0 24 24" fill="#BFC5BC">125        <path d="M12 3C7 3 3 7 3 12h3c0-3.3 2.7-6 6-6s6 2.7 6 6h3c0-5-4-9-9-9z"/>126      </svg>127      <svg width="58" height="48" viewBox="0 0 24 24" fill="none" stroke="#BFC5BC" stroke-width="2">128        <rect x="3" y="6" width="16" height="12" rx="2" ry="2"></rect>129        <rect x="19" y="9" width="2" height="6" fill="#BFC5BC" stroke="none"></rect>130      </svg>131    </div>132  </div>133 134  <!-- Header with search -->135  <div class="header">136    <div class="search-pill">137      <!-- Hamburger icon -->138      <svg width="72" height="72" viewBox="0 0 24 24" fill="#BFC5BC">139        <rect x="2" y="4" width="20" height="2"></rect>140        <rect x="2" y="11" width="20" height="2"></rect>141        <rect x="2" y="18" width="20" height="2"></rect>142      </svg>143      <div>Search in Drive</div>144    </div>145    <div class="profile">C</div>146  </div>147 148  <!-- Tabs -->149  <div class="tabs">150    <div class="tab active">My Drive</div>151    <div class="tab">Computers</div>152  </div>153 154  <!-- Grid content -->155  <div class="content">156    <div class="grid">157 158      <!-- Row 1: Folder -->159      <div class="tile">160        <div class="preview">161          <div class="preview-label">[IMG: Folder Preview]</div>162        </div>163        <div class="file-meta">164          <div class="filename">Xyz ltd</div>165          <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>166        </div>167      </div>168 169      <!-- Row 1: Google Sheet -->170      <div class="tile">171        <div class="preview">172          <div class="preview-label">[IMG: Google Sheet Tile]</div>173          <div class="badge-plus">174            <svg viewBox="0 0 24 24" fill="#1C281D">175              <rect x="11" y="5" width="2" height="14"></rect>176              <rect x="5" y="11" width="14" height="2"></rect>177            </svg>178          </div>179        </div>180        <div class="file-meta">181          <div class="filename">ABC data<br>sheet</div>182          <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>183        </div>184      </div>185 186      <!-- Row 2: agents.txt -->187      <div class="tile">188        <div class="preview">189          <div class="preview-label">[IMG: Text Document]</div>190        </div>191        <div class="file-meta">192          <div class="filename">agents.txt</div>193          <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>194        </div>195      </div>196 197      <!-- Row 2: BACKUP_REMINDER_M... -->198      <div class="tile">199        <div class="preview">200          <div class="preview-label">[IMG: Doc File]</div>201        </div>202        <div class="file-meta">203          <div class="filename">BACKUP_RE<br> MINDER_M...</div>204          <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>205        </div>206      </div>207 208      <!-- Row 3: Copy of ABC data sheet -->209      <div class="tile">210        <div class="preview">211          <div class="preview-label">[IMG: Sheet Copy]</div>212          <div class="badge-plus">213            <svg viewBox="0 0 24 24" fill="#1C281D">214              <rect x="11" y="5" width="2" height="14"></rect>215              <rect x="5" y="11" width="14" height="2"></rect>216            </svg>217          </div>218        </div>219        <div class="file-meta">220          <div class="filename">Copy of ABC<br>data sheet</div>221          <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>222        </div>223      </div>224 225      <!-- Row 3: PDF -->226      <div class="tile">227        <div class="preview">228          <div class="preview-label">[IMG: PDF Preview]</div>229          <div class="badge-pdf">PDF</div>230        </div>231        <div class="file-meta">232          <div class="filename">dinner-veg<br>(3).pdf</div>233          <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>234        </div>235      </div>236 237    </div>238  </div>239 240  <!-- Floating action button -->241  <div class="fab">242    <svg viewBox="0 0 24 24" fill="#EDEDED">243      <rect x="11" y="4" width="2" height="16"></rect>244      <rect x="4" y="11" width="16" height="2"></rect>245    </svg>246  </div>247 248  <!-- Bottom navigation -->249  <div class="bottom-bar">250    <div class="nav-item">251      <div class="nav-icon">252        <svg width="64" height="64" viewBox="0 0 24 24" fill="#BFC5BC">253          <path d="M12 3l9 7-1.5 2L12 6 4.5 12 3 10z"></path>254          <path d="M5 12v8h6v-5h2v5h6v-8L12 7z" fill="#BFC5BC"></path>255        </svg>256      </div>257      <div>Home</div>258    </div>259    <div class="nav-item">260      <div class="nav-icon">261        <svg width="64" height="64" viewBox="0 0 24 24" fill="#BFC5BC">262          <path d="M12 17.3l-5.6 3 1.5-6.4L3 9.6l6.5-.6L12 3l2.5 6 6.5.6-4.9 4.3 1.5 6.4z"></path>263        </svg>264      </div>265      <div>Starred</div>266    </div>267    <div class="nav-item">268      <div class="nav-icon">269        <svg width="64" height="64" viewBox="0 0 24 24" fill="#BFC5BC">270          <circle cx="8" cy="10" r="3"></circle>271          <circle cx="16" cy="10" r="3"></circle>272          <path d="M4 20c0-3 4-4.5 8-4.5S20 17 20 20H4z"></path>273        </svg>274      </div>275      <div>Shared</div>276    </div>277    <div class="nav-item active">278      <div class="nav-icon active-bg">279        <svg width="64" height="64" viewBox="0 0 24 24" fill="#8BC34A">280          <path d="M10 4h8v6H6V6h4z"></path>281          <path d="M6 8h8l4 4v8H6z" fill="#8BC34A"></path>282        </svg>283      </div>284      <div>Files</div>285    </div>286  </div>287 288</div>289</body>290</html>