GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Drive Bottom Sheet UI</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: Arial, Helvetica, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #f4f5f6;18 }19 20 /* Top status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 110px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 padding: 0 36px;31 color: #111;32 font-size: 36px;33 background: #f4f5f6;34 }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 20px;39 }40 .circle-icon {41 width: 24px;42 height: 24px;43 border-radius: 50%;44 background: #111;45 opacity: 0.7;46 }47 .battery {48 width: 42px;49 height: 22px;50 border: 3px solid #111;51 border-radius: 5px;52 position: relative;53 }54 .battery::after {55 content: "";56 position: absolute;57 right: -8px;58 top: 6px;59 width: 6px;60 height: 10px;61 background: #111;62 border-radius: 2px;63 }64 .battery-level {65 position: absolute;66 left: 4px;67 top: 4px;68 width: 28px;69 height: 12px;70 background: #111;71 }72 73 /* Drive header with search */74 .drive-header {75 position: absolute;76 top: 110px;77 left: 0;78 width: 1080px;79 height: 180px;80 display: flex;81 align-items: center;82 padding: 0 36px;83 gap: 24px;84 background: #f4f5f6;85 }86 .hamburger {87 width: 72px;88 height: 72px;89 border-radius: 16px;90 display: flex;91 align-items: center;92 justify-content: center;93 }94 .hamburger svg {95 width: 48px;96 height: 48px;97 fill: none;98 stroke: #333;99 stroke-width: 8;100 stroke-linecap: round;101 }102 .search-field {103 flex: 1;104 height: 96px;105 background: #fff;106 border: 1px solid #d9d9d9;107 border-radius: 48px;108 display: flex;109 align-items: center;110 padding: 0 32px;111 color: #555;112 font-size: 38px;113 }114 .search-field .placeholder {115 margin-left: 18px;116 }117 .account {118 width: 108px;119 height: 108px;120 border-radius: 54px;121 background: #5a3d2e;122 color: #fff;123 display: flex;124 align-items: center;125 justify-content: center;126 font-weight: bold;127 font-size: 42px;128 }129 130 /* Tabs */131 .tabs {132 position: absolute;133 top: 290px;134 left: 0;135 width: 1080px;136 height: 110px;137 display: flex;138 align-items: flex-end;139 gap: 60px;140 padding: 0 36px;141 background: #f4f5f6;142 color: #2b7a48;143 font-size: 46px;144 font-weight: 600;145 }146 .tab-active {147 padding-bottom: 16px;148 border-bottom: 8px solid #2b7a48;149 }150 .tab {151 color: #222;152 opacity: 0.75;153 padding-bottom: 16px;154 }155 156 /* List header */157 .list-header {158 position: absolute;159 top: 400px;160 left: 0;161 width: 1080px;162 height: 90px;163 display: flex;164 align-items: center;165 justify-content: space-between;166 padding: 0 36px;167 color: #222;168 font-size: 42px;169 }170 .sort {171 display: flex;172 align-items: center;173 gap: 14px;174 }175 .menu-icon svg {176 width: 48px;177 height: 48px;178 stroke: #333;179 stroke-width: 10;180 fill: none;181 stroke-linecap: round;182 }183 184 /* Dim overlay */185 .overlay {186 position: absolute;187 top: 0;188 left: 0;189 width: 1080px;190 height: 2400px;191 background: rgba(0,0,0,0.25);192 }193 194 /* Bottom sheet */195 .sheet {196 position: absolute;197 left: 0;198 right: 0;199 top: 470px;200 height: 1750px;201 margin: 0 auto;202 background: #ffffff;203 border-radius: 48px 48px 0 0;204 box-shadow: 0 10px 40px rgba(0,0,0,0.25);205 overflow: hidden;206 }207 .sheet-header {208 display: flex;209 align-items: center;210 gap: 24px;211 padding: 36px;212 border-bottom: 1px solid #e6e6e6;213 font-size: 46px;214 color: #222;215 background: #f8fbf5;216 }217 .thumb {218 width: 84px;219 height: 84px;220 background: #E0E0E0;221 border: 1px solid #BDBDBD;222 border-radius: 12px;223 display: flex;224 align-items: center;225 justify-content: center;226 color: #757575;227 font-size: 22px;228 text-align: center;229 padding: 6px;230 }231 232 .menu-section {233 padding: 12px 0;234 }235 .divider {236 height: 24px;237 border-top: 1px solid #eee;238 margin: 0 36px;239 }240 .menu-item {241 height: 120px;242 padding: 0 36px;243 display: flex;244 align-items: center;245 gap: 36px;246 color: #111;247 font-size: 42px;248 }249 .icon {250 width: 64px;251 height: 64px;252 display: inline-flex;253 align-items: center;254 justify-content: center;255 }256 .icon svg {257 width: 64px;258 height: 64px;259 stroke: #4a4a4a;260 fill: none;261 stroke-width: 6;262 stroke-linecap: round;263 stroke-linejoin: round;264 }265 266 .scroll-indicator {267 position: absolute;268 bottom: 24px;269 left: 50%;270 transform: translateX(-50%);271 width: 460px;272 height: 16px;273 background: #d9d9d9;274 border-radius: 10px;275 }276</style>277</head>278<body>279<div id="render-target">280 281 <!-- Status bar -->282 <div class="status-bar">283 <div>10:16</div>284 <div class="status-icons">285 <div class="circle-icon"></div>286 <div class="circle-icon" style="opacity:.45"></div>287 <div class="circle-icon" style="opacity:.3"></div>288 <div class="battery"><div class="battery-level"></div></div>289 </div>290 </div>291 292 <!-- Drive header with search -->293 <div class="drive-header">294 <div class="hamburger">295 <svg viewBox="0 0 24 24">296 <path d="M3 6h18M3 12h18M3 18h18"></path>297 </svg>298 </div>299 <div class="search-field">300 <svg viewBox="0 0 24 24" width="40" height="40">301 <circle cx="10" cy="10" r="7" stroke="#777" stroke-width="2" fill="none"></circle>302 <path d="M16 16l6 6" stroke="#777" stroke-width="2"></path>303 </svg>304 <div class="placeholder">Search in Drive</div>305 </div>306 <div class="account">C</div>307 </div>308 309 <!-- Tabs -->310 <div class="tabs">311 <div class="tab-active">My Drive</div>312 <div class="tab">Computers</div>313 </div>314 315 <!-- List header -->316 <div class="list-header">317 <div class="sort">Name318 <svg viewBox="0 0 24 24" width="34" height="34">319 <path d="M8 14l4-4 4 4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"></path>320 </svg>321 </div>322 <div class="menu-icon">323 <svg viewBox="0 0 24 24">324 <path d="M4 6h16M4 12h16M4 18h16"></path>325 </svg>326 </div>327 </div>328 329 <!-- Dim overlay behind the sheet -->330 <div class="overlay"></div>331 332 <!-- Bottom sheet menu -->333 <div class="sheet">334 <div class="sheet-header">335 <div class="thumb">[IMG: Plant]</div>336 <div>Plant</div>337 </div>338 339 <div class="menu-section">340 <div class="menu-item">341 <div class="icon">342 <svg viewBox="0 0 24 24">343 <circle cx="12" cy="8" r="4"></circle>344 <path d="M4 20c2-4 14-4 16 0" ></path>345 </svg>346 </div>347 <div>Share</div>348 </div>349 350 <div class="menu-item">351 <div class="icon">352 <svg viewBox="0 0 24 24">353 <circle cx="7" cy="9" r="3"></circle>354 <circle cx="17" cy="9" r="3"></circle>355 <path d="M3 20c2-3 6-3 8 0M13 20c2-3 6-3 8 0"></path>356 </svg>357 </div>358 <div>Manage access</div>359 </div>360 361 <div class="menu-item">362 <div class="icon">363 <svg viewBox="0 0 24 24">364 <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3.9L7.5 14 3 9.8 9 9z"></path>365 </svg>366 </div>367 <div>Add to Starred</div>368 </div>369 370 <div class="menu-item">371 <div class="icon">372 <svg viewBox="0 0 24 24">373 <circle cx="12" cy="12" r="9"></circle>374 <path d="M7 12h6l4 4"></path>375 </svg>376 </div>377 <div>Make available offline</div>378 </div>379 380 <div class="divider"></div>381 382 <div class="menu-item">383 <div class="icon">384 <svg viewBox="0 0 24 24">385 <path d="M4 12h16"></path>386 <path d="M14 8l6 4-6 4"></path>387 </svg>388 </div>389 <div>Copy link</div>390 </div>391 392 <div class="menu-item">393 <div class="icon">394 <svg viewBox="0 0 24 24">395 <rect x="4" y="6" width="10" height="12" rx="2"></rect>396 <rect x="10" y="6" width="10" height="12" rx="2" transform="translate(0,0)"></rect>397 </svg>398 </div>399 <div>Make a copy</div>400 </div>401 402 <div class="menu-item">403 <div class="icon">404 <svg viewBox="0 0 24 24">405 <path d="M4 11h10"></path>406 <path d="M10 7l8 4-8 4"></path>407 </svg>408 </div>409 <div>Send a copy</div>410 </div>411 412 <div class="divider"></div>413 414 <div class="menu-item">415 <div class="icon">416 <svg viewBox="0 0 24 24">417 <circle cx="12" cy="12" r="9"></circle>418 <path d="M12 7v10M7 12h10"></path>419 </svg>420 </div>421 <div>Open with</div>422 </div>423 424 <div class="menu-item">425 <div class="icon">426 <svg viewBox="0 0 24 24">427 <path d="M12 3v12"></path>428 <path d="M5 12l7 7 7-7"></path>429 </svg>430 </div>431 <div>Download</div>432 </div>433 434 <div class="menu-item">435 <div class="icon">436 <svg viewBox="0 0 24 24">437 <path d="M4 20h16"></path>438 <path d="M6 8l12 0"></path>439 <path d="M6 12l8 0"></path>440 </svg>441 </div>442 <div>Rename</div>443 </div>444 445 <div class="menu-item">446 <div class="icon">447 <svg viewBox="0 0 24 24">448 <rect x="4" y="6" width="14" height="12" rx="2"></rect>449 <path d="M10 4v4"></path>450 <path d="M14 4v4"></path>451 <path d="M18 10h4"></path>452 <path d="M20 8v4"></path>453 </svg>454 </div>455 <div>Add shortcut to Drive</div>456 </div>457 458 <div class="divider"></div>459 460 <div class="menu-item">461 <div class="icon">462 <svg viewBox="0 0 24 24">463 <path d="M5 12h9"></path>464 <path d="M10 7l5 5-5 5"></path>465 <rect x="3" y="5" width="6" height="14" rx="2"></rect>466 </svg>467 </div>468 <div>Move</div>469 </div>470 </div>471 472 <div class="scroll-indicator"></div>473 </div>474 475</div>476</body>477</html>