GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Drive Actions - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #E6E6E6;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    height: 90px;24    width: 100%;25    color: #DADADA;26    font-size: 36px;27    display: flex;28    align-items: center;29    padding: 0 36px;30  }31  .status-bar .time { font-weight: 600; }32  .sb-icons { margin-left: auto; display: flex; align-items: center; gap: 24px; }33  .sb-icons svg { width: 38px; height: 38px; color: #DADADA; }34  .battery { display: flex; align-items: center; gap: 8px; }35 36  /* Header search */37  .header {38    position: absolute;39    top: 110px;40    left: 24px;41    right: 24px;42    height: 110px;43    display: flex;44    align-items: center;45  }46  .searchbar {47    flex: 1;48    height: 110px;49    background: #1E1E1E;50    border-radius: 55px;51    display: flex;52    align-items: center;53    padding: 0 28px;54    box-sizing: border-box;55  }56  .searchbar svg { width: 52px; height: 52px; color: #C9C9C9; margin-right: 22px; }57  .searchbar .placeholder { color: #A9A9A9; font-size: 42px; }58  .avatar {59    width: 90px;60    height: 90px;61    margin-left: 20px;62    border-radius: 45px;63    background: #2E4A7E;64    color: #E6E6E6;65    display: flex;66    align-items: center;67    justify-content: center;68    font-weight: 700;69    font-size: 42px;70  }71 72  /* Tabs */73  .tabs {74    position: absolute;75    top: 250px;76    left: 36px;77    right: 36px;78    height: 120px;79    display: flex;80    align-items: flex-end;81    gap: 60px;82    color: #BDBDBD;83    font-size: 42px;84  }85  .tab { padding-bottom: 18px; }86  .tab.active { color: #E6E6E6; position: relative; }87  .tab.active::after {88    content: "";89    position: absolute;90    bottom: 0;91    left: 0;92    width: 160px;93    height: 10px;94    background: #A0A0A0;95    border-radius: 5px;96  }97 98  /* List header and item preview behind sheet */99  .list-header {100    position: absolute;101    top: 360px;102    left: 36px;103    right: 36px;104    height: 90px;105    color: #C9C9C9;106    display: flex;107    align-items: center;108    justify-content: space-between;109    font-size: 36px;110  }111  .sort-icon svg { width: 44px; height: 44px; color: #C9C9C9; }112 113  .file-item {114    position: absolute;115    top: 450px;116    left: 36px;117    right: 36px;118    height: 140px;119    background: #232323;120    border-radius: 20px;121    display: flex;122    align-items: center;123    padding: 0 28px;124    box-sizing: border-box;125    gap: 26px;126  }127  .file-item svg { width: 48px; height: 48px; color: #D0D0D0; }128  .file-item .title { font-size: 42px; }129 130  /* Bottom sheet */131  .sheet {132    position: absolute;133    left: 0;134    right: 0;135    bottom: 0;136    top: 590px;137    background: #2A2C2F;138    border-top-left-radius: 50px;139    border-top-right-radius: 50px;140    box-shadow: 0 -10px 30px rgba(0,0,0,0.6);141  }142  .sheet .sheet-content {143    padding: 34px 28px 120px 28px;144  }145  .sheet-header {146    display: flex;147    align-items: center;148    gap: 22px;149    background: #34373A;150    border-radius: 28px;151    padding: 28px;152    margin: 4px 6px 18px 6px;153  }154  .sheet-header svg { width: 48px; height: 48px; color: #E0E0E0; }155  .sheet-header .name { font-size: 42px; }156 157  .action {158    height: 110px;159    display: flex;160    align-items: center;161    gap: 34px;162    padding: 0 20px;163    box-sizing: border-box;164    color: #E6E6E6;165    font-size: 40px;166  }167  .action svg { width: 48px; height: 48px; color: #BDBDBD; }168  .divider {169    height: 1px;170    background: #424242;171    margin: 14px 20px;172  }173 174  /* Handle bar */175  .nav-handle {176    position: absolute;177    bottom: 22px;178    left: 50%;179    transform: translateX(-50%);180    width: 280px;181    height: 14px;182    background: #ECECEC;183    border-radius: 7px;184    opacity: 0.8;185  }186</style>187</head>188<body>189<div id="render-target">190 191  <!-- Status Bar -->192  <div class="status-bar">193    <span class="time">1:06</span>194    <div class="sb-icons">195      <!-- Simple signal icon -->196      <svg viewBox="0 0 24 24">197        <path d="M2 20h2v-4H2v4zm5 0h2v-7H7v7zm5 0h2v-10h-2v10zm5 0h2V6h-2v14z" fill="currentColor"></path>198      </svg>199      <!-- WiFi icon -->200      <svg viewBox="0 0 24 24">201        <path d="M12 18c.8 0 1.5.7 1.5 1.5S12.8 21 12 21s-1.5-.7-1.5-1.5S11.2 18 12 18z" fill="currentColor"></path>202        <path d="M2.5 10.5C6.7 7.8 17.3 7.8 21.5 10.5" stroke="currentColor" stroke-width="2" fill="none"></path>203        <path d="M5 13c3.4-2.2 10.6-2.2 14 0" stroke="currentColor" stroke-width="2" fill="none"></path>204      </svg>205      <div class="battery">206        <svg viewBox="0 0 28 16">207          <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="currentColor" fill="none"></rect>208          <rect x="24" y="5" width="3" height="6" rx="1" fill="currentColor"></rect>209          <rect x="3" y="4" width="18" height="8" fill="currentColor"></rect>210        </svg>211        <span>81%</span>212      </div>213    </div>214  </div>215 216  <!-- Header Search -->217  <div class="header">218    <div class="searchbar">219      <!-- Hamburger -->220      <svg viewBox="0 0 24 24">221        <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="currentColor"></path>222      </svg>223      <span class="placeholder">Search in Drive</span>224    </div>225    <div class="avatar">C</div>226  </div>227 228  <!-- Tabs -->229  <div class="tabs">230    <div class="tab active">My Drive</div>231    <div class="tab">Computers</div>232  </div>233 234  <!-- List header -->235  <div class="list-header">236    <div>Name ↑</div>237    <div class="sort-icon">238      <svg viewBox="0 0 24 24">239        <path d="M4 6h16v2H4V6zm4 5h12v2H8v-2zm6 5h6v2h-6v-2z" fill="currentColor"></path>240      </svg>241    </div>242  </div>243 244  <!-- Example file item behind the sheet -->245  <div class="file-item">246    <svg viewBox="0 0 24 24">247      <path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h-9L10 4z" fill="currentColor"></path>248    </svg>249    <div class="title">Private File</div>250  </div>251 252  <!-- Bottom Sheet -->253  <div class="sheet">254    <div class="sheet-content">255      <div class="sheet-header">256        <svg viewBox="0 0 24 24">257          <path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h-9L10 4z" fill="currentColor"></path>258        </svg>259        <div class="name">Private File</div>260      </div>261 262      <!-- Actions -->263      <div class="action">264        <svg viewBox="0 0 24 24">265          <circle cx="9" cy="8" r="3" stroke="currentColor" stroke-width="2" fill="none"></circle>266          <path d="M3 20c0-3.3 4-5 6-5s6 1.7 6 5" stroke="currentColor" stroke-width="2" fill="none"></path>267          <path d="M16 7h2v-2h2v2h2v2h-2v2h-2v-2h-2V7z" fill="currentColor"></path>268        </svg>269        <div>Share</div>270      </div>271 272      <div class="action">273        <svg viewBox="0 0 24 24">274          <circle cx="8" cy="8" r="3" stroke="currentColor" stroke-width="2" fill="none"></circle>275          <circle cx="16" cy="8" r="3" stroke="currentColor" stroke-width="2" fill="none"></circle>276          <path d="M3 20c0-3 3.5-4.5 5-4.5s5 1.5 5 4.5" stroke="currentColor" stroke-width="2" fill="none"></path>277          <path d="M11 20c0-2.6 3.2-3.9 4.8-3.9 1.6 0 4.2 1.3 4.2 3.9" stroke="currentColor" stroke-width="2" fill="none"></path>278        </svg>279        <div>Manage access</div>280      </div>281 282      <div class="action">283        <svg viewBox="0 0 24 24">284          <path d="M12 2l3.1 6.3 7 .9-5 4.8 1.2 7-6.3-3.4-6.3 3.4 1.2-7-5-4.8 7-.9L12 2z" fill="currentColor"></path>285        </svg>286        <div>Add to Starred</div>287      </div>288 289      <div class="divider"></div>290 291      <div class="action">292        <svg viewBox="0 0 24 24">293          <path d="M7 12a4 4 0 0 1 4-4h2" stroke="currentColor" stroke-width="2" fill="none"></path>294          <path d="M17 12a4 4 0 0 1-4 4h-2" stroke="currentColor" stroke-width="2" fill="none"></path>295          <path d="M12 8h0" stroke="currentColor" stroke-width="2"></path>296        </svg>297        <div>Copy link</div>298      </div>299 300      <div class="divider"></div>301 302      <div class="action">303        <svg viewBox="0 0 24 24">304          <path d="M4 20h16" stroke="currentColor" stroke-width="2"></path>305          <path d="M12 4v12" stroke="currentColor" stroke-width="2"></path>306          <path d="M8 8l4-4 4 4" stroke="currentColor" stroke-width="2" fill="none"></path>307        </svg>308        <div>Rename</div>309      </div>310 311      <div class="action">312        <svg viewBox="0 0 24 24">313          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" fill="none"></circle>314          <circle cx="8" cy="10" r="2" fill="currentColor"></circle>315          <circle cx="16" cy="10" r="2" fill="currentColor"></circle>316          <path d="M8 16c2.5-1.5 5.5-1.5 8 0" stroke="currentColor" stroke-width="2" fill="none"></path>317        </svg>318        <div>Change color</div>319      </div>320 321      <div class="action">322        <svg viewBox="0 0 24 24">323          <rect x="3" y="6" width="12" height="12" rx="2" stroke="currentColor" stroke-width="2" fill="none"></rect>324          <path d="M17 7l4 4-4 4" stroke="currentColor" stroke-width="2" fill="none"></path>325          <path d="M11 10v4" stroke="currentColor" stroke-width="2"></path>326          <path d="M9 12h4" stroke="currentColor" stroke-width="2"></path>327        </svg>328        <div>Add shortcut to Drive</div>329      </div>330 331      <div class="action">332        <svg viewBox="0 0 24 24">333          <path d="M5 5h8l4 4v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" stroke="currentColor" stroke-width="2" fill="none"></path>334          <path d="M12 9v6" stroke="currentColor" stroke-width="2"></path>335          <path d="M9 12h6" stroke="currentColor" stroke-width="2"></path>336        </svg>337        <div>Move</div>338      </div>339 340      <div class="action">341        <svg viewBox="0 0 24 24">342          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" fill="none"></circle>343          <circle cx="12" cy="8" r="1.5" fill="currentColor"></circle>344          <path d="M12 11v5" stroke="currentColor" stroke-width="2"></path>345        </svg>346        <div>Details & activity</div>347      </div>348 349      <div class="action">350        <svg viewBox="0 0 24 24">351          <path d="M4 14l6-6 6 6" stroke="currentColor" stroke-width="2" fill="none"></path>352          <path d="M10 20h10v-10" stroke="currentColor" stroke-width="2" fill="none"></path>353        </svg>354        <div>Add to Home screen</div>355      </div>356 357      <div class="action">358        <svg viewBox="0 0 24 24">359          <path d="M6 7h12l-1 14H7L6 7z" stroke="currentColor" stroke-width="2" fill="none"></path>360          <path d="M9 7V5h6v2" stroke="currentColor" stroke-width="2"></path>361        </svg>362        <div>Remove</div>363      </div>364 365    </div>366  </div>367 368  <div class="nav-handle"></div>369</div>370</body>371</html>