GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Drive Options Sheet - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F4F5F7;14 }15 16 /* STATUS BAR */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 background: transparent;24 color: #222;25 display: flex;26 align-items: center;27 padding: 0 30px;28 font-size: 36px;29 }30 .status-right {31 margin-left: auto;32 display: flex;33 gap: 24px;34 color: #666;35 }36 37 /* SEARCH BAR AREA */38 .search-area {39 position: absolute;40 top: 90px;41 left: 0;42 width: 1080px;43 padding: 28px 30px;44 box-sizing: border-box;45 }46 .search-bar {47 height: 120px;48 background: #FFFFFF;49 border-radius: 28px;50 box-shadow: 0 2px 6px rgba(0,0,0,0.06);51 display: flex;52 align-items: center;53 padding: 0 24px;54 border: 1px solid #E6E8EB;55 }56 .icon-btn {57 width: 72px;58 height: 72px;59 border-radius: 18px;60 display: flex;61 align-items: center;62 justify-content: center;63 color: #5F6368;64 }65 .search-text {66 color: #5f6368;67 font-size: 40px;68 margin-left: 12px;69 }70 .avatar {71 margin-left: auto;72 width: 90px;73 height: 90px;74 border-radius: 45px;75 background: #0EA5A5;76 color: #fff;77 display: flex;78 align-items: center;79 justify-content: center;80 font-weight: bold;81 font-size: 40px;82 }83 84 /* TABS */85 .tabs {86 position: absolute;87 top: 270px;88 left: 0;89 width: 1080px;90 height: 90px;91 display: flex;92 align-items: center;93 padding: 0 40px;94 box-sizing: border-box;95 gap: 40px;96 }97 .tab {98 font-size: 42px;99 color: #6b6f73;100 }101 .tab.active {102 color: #0F9D58;103 font-weight: 600;104 }105 106 /* LIST HEADER */107 .list-header {108 position: absolute;109 top: 360px;110 left: 0;111 width: 1080px;112 height: 90px;113 display: flex;114 align-items: center;115 padding: 0 40px;116 box-sizing: border-box;117 color: #303134;118 font-size: 36px;119 }120 .list-header .sort {121 display: flex;122 align-items: center;123 gap: 10px;124 font-weight: 600;125 }126 .list-header .kebab {127 margin-left: auto;128 width: 80px;129 height: 50px;130 display: flex;131 align-items: center;132 justify-content: center;133 color: #5F6368;134 }135 136 /* FILE ROW */137 .file-row {138 position: absolute;139 top: 440px;140 left: 20px;141 width: 1040px;142 height: 160px;143 background: #FFFFFF;144 border: 1px solid #E6E8EB;145 border-radius: 24px;146 display: flex;147 align-items: center;148 padding: 0 28px;149 box-sizing: border-box;150 gap: 30px;151 }152 .pdf-chip {153 width: 70px;154 height: 70px;155 border-radius: 10px;156 background: #E74C3C;157 color: #fff;158 font-size: 32px;159 display: flex;160 align-items: center;161 justify-content: center;162 font-weight: 700;163 }164 .file-name {165 font-size: 40px;166 color: #202124;167 }168 169 /* OVERLAY and BOTTOM SHEET */170 .overlay {171 position: absolute;172 top: 0;173 left: 0;174 width: 1080px;175 height: 2400px;176 background: rgba(0,0,0,0.08);177 }178 .sheet {179 position: absolute;180 top: 520px;181 left: 0;182 width: 1080px;183 height: 1700px;184 background: #FFFFFF;185 border-top-left-radius: 34px;186 border-top-right-radius: 34px;187 box-shadow: 0 -4px 16px rgba(0,0,0,0.15);188 overflow: hidden;189 }190 .sheet-header {191 display: flex;192 align-items: center;193 padding: 36px 40px 24px 40px;194 box-sizing: border-box;195 border-bottom: 1px solid #EDF0F3;196 gap: 26px;197 }198 .sheet-title {199 font-size: 42px;200 color: #202124;201 white-space: nowrap;202 overflow: hidden;203 text-overflow: ellipsis;204 }205 .menu-list {206 padding: 10px 0 0 0;207 }208 .menu-item {209 display: flex;210 align-items: center;211 padding: 28px 40px;212 box-sizing: border-box;213 gap: 26px;214 font-size: 40px;215 color: #202124;216 }217 .menu-item + .menu-item {218 border-top: 1px solid #F0F2F5;219 }220 .mi-ico {221 width: 60px;222 height: 60px;223 color: #5F6368;224 }225 226 /* Simple SVG icon styling */227 svg { width: 60px; height: 60px; }228</style>229</head>230<body>231<div id="render-target">232 233 <!-- Status Bar -->234 <div class="status-bar">235 <div>6:08</div>236 <div class="status-right">237 <div>◦</div>238 <div>🔔</div>239 <div>▮▮</div>240 </div>241 </div>242 243 <!-- Search / Header -->244 <div class="search-area">245 <div class="search-bar">246 <div class="icon-btn">247 <!-- Hamburger -->248 <svg viewBox="0 0 24 24">249 <rect x="3" y="5" width="18" height="2" fill="#5F6368"></rect>250 <rect x="3" y="11" width="18" height="2" fill="#5F6368"></rect>251 <rect x="3" y="17" width="18" height="2" fill="#5F6368"></rect>252 </svg>253 </div>254 <div class="search-text">Search in Drive</div>255 <div class="avatar">N</div>256 </div>257 </div>258 259 <!-- Tabs -->260 <div class="tabs">261 <div class="tab active">My Drive</div>262 <div class="tab">Computers</div>263 </div>264 265 <!-- List header -->266 <div class="list-header">267 <div class="sort">Name268 <!-- Up arrow -->269 <svg viewBox="0 0 24 24">270 <path d="M12 6l-6 8h12z" fill="#5F6368"></path>271 </svg>272 </div>273 <div class="kebab">274 <!-- small list icon -->275 <svg viewBox="0 0 24 24">276 <rect x="5" y="6" width="14" height="2" fill="#5F6368"></rect>277 <rect x="5" y="11" width="14" height="2" fill="#5F6368"></rect>278 <rect x="5" y="16" width="14" height="2" fill="#5F6368"></rect>279 </svg>280 </div>281 </div>282 283 <!-- File row in list -->284 <div class="file-row">285 <div class="pdf-chip">PDF</div>286 <div class="file-name">01. A Voyage to the Moon author Cyrano d...</div>287 </div>288 289 <!-- Dim overlay -->290 <div class="overlay"></div>291 292 <!-- Bottom sheet -->293 <div class="sheet">294 <div class="sheet-header">295 <div class="pdf-chip">PDF</div>296 <div class="sheet-title">01. A Voyage to the Moon author Cyrano d...</div>297 </div>298 299 <div class="menu-list">300 <div class="menu-item">301 <div class="mi-ico">302 <!-- Share: arrow out of a box -->303 <svg viewBox="0 0 24 24">304 <rect x="5" y="10" width="10" height="9" rx="1" fill="#9AA0A6"></rect>305 <path d="M13 8l3-3 3 3" stroke="#5F6368" stroke-width="2" fill="none"></path>306 <path d="M16 5v8" stroke="#5F6368" stroke-width="2"></path>307 </svg>308 </div>309 <div>Share</div>310 </div>311 312 <div class="menu-item">313 <div class="mi-ico">314 <!-- Manage access: two people -->315 <svg viewBox="0 0 24 24">316 <circle cx="8" cy="9" r="3" fill="#5F6368"></circle>317 <circle cx="16" cy="9" r="3" fill="#9AA0A6"></circle>318 <rect x="4" y="14" width="16" height="5" rx="2" fill="#5F6368"></rect>319 </svg>320 </div>321 <div>Manage access</div>322 </div>323 324 <div class="menu-item">325 <div class="mi-ico">326 <!-- Star -->327 <svg viewBox="0 0 24 24">328 <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3 1.2-6.2L3 9.8 9 9z" fill="#5F6368"></path>329 </svg>330 </div>331 <div>Add to Starred</div>332 </div>333 334 <div class="menu-item">335 <div class="mi-ico">336 <!-- Offline: check circle -->337 <svg viewBox="0 0 24 24">338 <circle cx="12" cy="12" r="9" fill="none" stroke="#5F6368" stroke-width="2"></circle>339 <path d="M8 12l3 3 5-6" stroke="#5F6368" stroke-width="2" fill="none"></path>340 </svg>341 </div>342 <div>Make available offline</div>343 </div>344 345 <div class="menu-item">346 <div class="mi-ico">347 <!-- Link -->348 <svg viewBox="0 0 24 24">349 <path d="M8 14c-2 0-3.5-1.5-3.5-3.5S6 7 8 7h4" stroke="#5F6368" stroke-width="2" fill="none"></path>350 <path d="M16 10c2 0 3.5 1.5 3.5 3.5S18 17 16 17h-4" stroke="#5F6368" stroke-width="2" fill="none"></path>351 <path d="M9 12h6" stroke="#9AA0A6" stroke-width="2" fill="none"></path>352 </svg>353 </div>354 <div>Copy link</div>355 </div>356 357 <div class="menu-item">358 <div class="mi-ico">359 <!-- Make a copy -->360 <svg viewBox="0 0 24 24">361 <rect x="6" y="6" width="11" height="11" rx="2" fill="#5F6368"></rect>362 <rect x="10" y="10" width="8" height="8" rx="2" fill="#9AA0A6"></rect>363 </svg>364 </div>365 <div>Make a copy</div>366 </div>367 368 <div class="menu-item">369 <div class="mi-ico">370 <!-- Send a copy: paper plane -->371 <svg viewBox="0 0 24 24">372 <path d="M4 12l16-7-6 16-3-6-7-3z" fill="#5F6368"></path>373 </svg>374 </div>375 <div>Send a copy</div>376 </div>377 378 <div class="menu-item">379 <div class="mi-ico">380 <!-- Open with: open box -->381 <svg viewBox="0 0 24 24">382 <rect x="5" y="9" width="14" height="10" rx="2" fill="#9AA0A6"></rect>383 <path d="M8 9l4-4 4 4" stroke="#5F6368" stroke-width="2" fill="none"></path>384 </svg>385 </div>386 <div>Open with</div>387 </div>388 389 <div class="menu-item">390 <div class="mi-ico">391 <!-- Download -->392 <svg viewBox="0 0 24 24">393 <path d="M12 5v8" stroke="#5F6368" stroke-width="2"></path>394 <path d="M8 10l4 4 4-4" stroke="#5F6368" stroke-width="2" fill="none"></path>395 <rect x="6" y="18" width="12" height="2" fill="#5F6368"></rect>396 </svg>397 </div>398 <div>Download</div>399 </div>400 401 <div class="menu-item">402 <div class="mi-ico">403 <!-- Rename: pencil -->404 <svg viewBox="0 0 24 24">405 <path d="M4 16l8-8 4 4-8 8H4z" fill="#5F6368"></path>406 <rect x="15" y="5" width="4" height="4" transform="rotate(45 17 7)" fill="#9AA0A6"></rect>407 </svg>408 </div>409 <div>Rename</div>410 </div>411 412 <div class="menu-item">413 <div class="mi-ico">414 <!-- Add shortcut -->415 <svg viewBox="0 0 24 24">416 <path d="M4 8h12v10H4z" fill="#9AA0A6"></path>417 <path d="M18 10v6" stroke="#5F6368" stroke-width="2"></path>418 <path d="M15 13h6" stroke="#5F6368" stroke-width="2"></path>419 </svg>420 </div>421 <div>Add shortcut to Drive</div>422 </div>423 424 <div class="menu-item">425 <div class="mi-ico">426 <!-- Move: folder with arrow -->427 <svg viewBox="0 0 24 24">428 <path d="M3 7h7l2 2h9v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" fill="#5F6368"></path>429 <path d="M10 12h8l-3 3" stroke="#FFFFFF" stroke-width="2" fill="none"></path>430 </svg>431 </div>432 <div>Move</div>433 </div>434 </div>435 </div>436</div>437</body>438</html>