GD-ML/AndroidCode
13.4k
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: #1f2226;15 font-family: Arial, Helvetica, sans-serif;16 color: #EAEAEA;17 }18 * { box-sizing: border-box; }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 height: 90px;26 width: 100%;27 padding: 0 32px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #e6e6e6;32 font-size: 34px;33 }34 .status-icons { display: flex; gap: 28px; align-items: center; }35 .status-icons svg { opacity: 0.9; }36 37 /* Header with search */38 .header {39 position: absolute;40 top: 90px;41 left: 0;42 width: 100%;43 padding: 24px 28px 16px 28px;44 }45 .search-row {46 display: flex;47 align-items: center;48 gap: 22px;49 }50 .icon-btn {51 width: 72px;52 height: 72px;53 border-radius: 18px;54 background: transparent;55 display: flex;56 align-items: center;57 justify-content: center;58 }59 .search-pill {60 flex: 1;61 height: 78px;62 border-radius: 40px;63 background: #2a2d31;64 color: #c7cbd1;65 padding: 0 32px;66 display: flex;67 align-items: center;68 font-size: 30px;69 }70 .avatar {71 width: 78px;72 height: 78px;73 border-radius: 39px;74 background: #3a4150;75 display: flex;76 align-items: center;77 justify-content: center;78 font-weight: bold;79 color: #ff6f6f;80 border: 1px solid #50545a;81 }82 83 /* Tabs */84 .tabs {85 margin-top: 28px;86 display: flex;87 justify-content: space-between;88 padding: 0 8px;89 font-size: 34px;90 color: #c9ced5;91 }92 .tab {93 position: relative;94 padding: 20px 10px;95 }96 .tab.active { color: #EAEAEA; }97 .tab.active::after {98 content: "";99 position: absolute;100 left: 0;101 bottom: -6px;102 width: 100%;103 height: 6px;104 border-radius: 3px;105 background: #4285F4;106 }107 .tabs-divider {108 margin-top: 22px;109 height: 1px;110 background: #2c2f34;111 width: 100%;112 }113 114 /* Sort row */115 .sort-row {116 position: absolute;117 top: 260px;118 left: 0;119 width: 100%;120 padding: 24px 36px 16px 36px;121 display: flex;122 align-items: center;123 justify-content: space-between;124 color: #c9ced5;125 font-size: 32px;126 }127 128 /* Content grid */129 .content {130 position: absolute;131 top: 330px;132 left: 0;133 width: 100%;134 padding: 10px 36px 320px 36px;135 }136 .grid {137 display: grid;138 grid-template-columns: repeat(2, 1fr);139 gap: 46px 36px;140 }141 .card {142 background: transparent;143 }144 .thumb {145 width: 100%;146 height: 290px;147 border-radius: 28px;148 background: #2c2f34;149 padding: 24px;150 position: relative;151 }152 /* Image placeholders as required */153 .img-placeholder {154 width: 100%;155 height: 100%;156 background: #E0E0E0;157 border: 1px solid #BDBDBD;158 display: flex;159 align-items: center;160 justify-content: center;161 color: #757575;162 font-size: 30px;163 border-radius: 20px;164 }165 .badge-pdf {166 position: absolute;167 bottom: 18px;168 left: 18px;169 background: #e05252;170 color: #fff;171 font-weight: bold;172 font-size: 26px;173 padding: 10px 16px;174 border-radius: 10px;175 }176 .title-row {177 margin-top: 18px;178 display: flex;179 align-items: center;180 justify-content: space-between;181 }182 .title {183 font-size: 34px;184 color: #EAEAEA;185 white-space: nowrap;186 overflow: hidden;187 text-overflow: ellipsis;188 }189 .more-btn {190 width: 42px;191 height: 42px;192 display: flex;193 align-items: center;194 justify-content: center;195 opacity: 0.8;196 }197 198 /* Floating action button */199 .fab {200 position: absolute;201 right: 36px;202 bottom: 370px;203 width: 116px;204 height: 116px;205 border-radius: 30px;206 background: #3a4655;207 box-shadow: 0 10px 18px rgba(0,0,0,0.4);208 display: flex;209 align-items: center;210 justify-content: center;211 }212 .fab svg { fill: #EAEAEA; }213 214 /* Bottom nav */215 .bottom-nav {216 position: absolute;217 bottom: 0;218 left: 0;219 width: 100%;220 height: 220px;221 background: #262a2f;222 border-top: 1px solid #2f343a;223 display: flex;224 align-items: center;225 justify-content: space-around;226 padding-bottom: 20px;227 }228 .nav-item {229 width: 220px;230 display: flex;231 align-items: center;232 flex-direction: column;233 gap: 12px;234 color: #c9ced5;235 font-size: 30px;236 }237 .nav-item.active { color: #4285F4; }238 .home-indicator {239 position: absolute;240 bottom: 226px;241 left: 50%;242 transform: translateX(-50%);243 width: 220px;244 height: 12px;245 border-radius: 6px;246 background: #dadada;247 opacity: 0.8;248 }249</style>250</head>251<body>252<div id="render-target">253 254 <!-- Status Bar -->255 <div class="status-bar">256 <div>8:33</div>257 <div class="status-icons">258 <!-- Simple Wifi icon -->259 <svg width="44" height="44" viewBox="0 0 44 44">260 <path d="M4 14c8-6 28-6 36 0" stroke="#e6e6e6" stroke-width="3" fill="none" stroke-linecap="round"/>261 <path d="M10 20c6-4 18-4 24 0" stroke="#e6e6e6" stroke-width="3" fill="none" stroke-linecap="round"/>262 <path d="M18 28c3-2 5-2 8 0" stroke="#e6e6e6" stroke-width="3" fill="none" stroke-linecap="round"/>263 <circle cx="22" cy="33" r="2.5" fill="#e6e6e6"/>264 </svg>265 <!-- Battery icon -->266 <svg width="48" height="44" viewBox="0 0 48 44">267 <rect x="4" y="10" width="34" height="24" rx="4" stroke="#e6e6e6" stroke-width="3" fill="none"/>268 <rect x="7" y="13" width="28" height="18" rx="3" fill="#e6e6e6"/>269 <rect x="40" y="16" width="6" height="12" rx="2" fill="#e6e6e6"/>270 </svg>271 </div>272 </div>273 274 <!-- Header -->275 <div class="header">276 <div class="search-row">277 <button class="icon-btn" aria-label="Menu">278 <svg width="44" height="44" viewBox="0 0 44 44">279 <path d="M6 10h32M6 22h32M6 34h32" stroke="#EAEAEA" stroke-width="4" stroke-linecap="round"/>280 </svg>281 </button>282 <div class="search-pill">Search in Drive</div>283 <div class="avatar">C</div>284 </div>285 286 <div class="tabs">287 <div class="tab active">My Drive</div>288 <div class="tab">Computers</div>289 </div>290 <div class="tabs-divider"></div>291 </div>292 293 <!-- Sort row -->294 <div class="sort-row">295 <div>Name ↑</div>296 <div class="icon-btn" aria-label="View options">297 <svg width="44" height="44" viewBox="0 0 44 44">298 <rect x="7" y="10" width="30" height="6" rx="3" fill="#c9ced5"/>299 <rect x="7" y="19" width="30" height="6" rx="3" fill="#c9ced5"/>300 <rect x="7" y="28" width="30" height="6" rx="3" fill="#c9ced5"/>301 </svg>302 </div>303 </div>304 305 <!-- Content Grid -->306 <div class="content">307 <div class="grid">308 309 <!-- Folder card -->310 <div class="card">311 <div class="thumb">312 <div class="img-placeholder">[IMG: Folder Thumbnail]</div>313 </div>314 <div class="title-row">315 <div class="title">Jitendra singh</div>316 <div class="more-btn" aria-label="More">317 <svg width="30" height="30" viewBox="0 0 30 30">318 <circle cx="15" cy="6" r="3" fill="#c9ced5"/>319 <circle cx="15" cy="15" r="3" fill="#c9ced5"/>320 <circle cx="15" cy="24" r="3" fill="#c9ced5"/>321 </svg>322 </div>323 </div>324 </div>325 326 <!-- PDF card -->327 <div class="card">328 <div class="thumb">329 <div class="img-placeholder">[IMG: PDF Preview]</div>330 <div class="badge-pdf">PDF</div>331 </div>332 <div class="title-row">333 <div class="title">Amsterdam. pdf</div>334 <div class="more-btn">335 <svg width="30" height="30" viewBox="0 0 30 30">336 <circle cx="15" cy="6" r="3" fill="#c9ced5"/>337 <circle cx="15" cy="15" r="3" fill="#c9ced5"/>338 <circle cx="15" cy="24" r="3" fill="#c9ced5"/>339 </svg>340 </div>341 </div>342 </div>343 344 <!-- PDF card 2 -->345 <div class="card">346 <div class="thumb">347 <div class="img-placeholder">[IMG: PDF Preview]</div>348 <div class="badge-pdf">PDF</div>349 </div>350 <div class="title-row">351 <div class="title">Amsterdam. pdf</div>352 <div class="more-btn">353 <svg width="30" height="30" viewBox="0 0 30 30">354 <circle cx="15" cy="6" r="3" fill="#c9ced5"/>355 <circle cx="15" cy="15" r="3" fill="#c9ced5"/>356 <circle cx="15" cy="24" r="3" fill="#c9ced5"/>357 </svg>358 </div>359 </div>360 </div>361 362 <!-- PDF card 3 -->363 <div class="card">364 <div class="thumb">365 <div class="img-placeholder">[IMG: PDF Preview]</div>366 <div class="badge-pdf">PDF</div>367 </div>368 <div class="title-row">369 <div class="title">Amsterdam. pdf</div>370 <div class="more-btn">371 <svg width="30" height="30" viewBox="0 0 30 30">372 <circle cx="15" cy="6" r="3" fill="#c9ced5"/>373 <circle cx="15" cy="15" r="3" fill="#c9ced5"/>374 <circle cx="15" cy="24" r="3" fill="#c9ced5"/>375 </svg>376 </div>377 </div>378 </div>379 380 <!-- Doc card left -->381 <div class="card">382 <div class="thumb">383 <div class="img-placeholder">[IMG: Document Icon]</div>384 </div>385 <div class="title-row">386 <div class="title">BACKUP_RE MINDER_M...</div>387 <div class="more-btn">388 <svg width="30" height="30" viewBox="0 0 30 30">389 <circle cx="15" cy="6" r="3" fill="#c9ced5"/>390 <circle cx="15" cy="15" r="3" fill="#c9ced5"/>391 <circle cx="15" cy="24" r="3" fill="#c9ced5"/>392 </svg>393 </div>394 </div>395 </div>396 397 <!-- Doc card right -->398 <div class="card">399 <div class="thumb">400 <div class="img-placeholder">[IMG: Document Icon]</div>401 </div>402 <div class="title-row">403 <div class="title">BACKUP_RE MINDER_M...</div>404 <div class="more-btn">405 <svg width="30" height="30" viewBox="0 0 30 30">406 <circle cx="15" cy="6" r="3" fill="#c9ced5"/>407 <circle cx="15" cy="15" r="3" fill="#c9ced5"/>408 <circle cx="15" cy="24" r="3" fill="#c9ced5"/>409 </svg>410 </div>411 </div>412 </div>413 414 </div>415 </div>416 417 <!-- Floating Action Button -->418 <div class="fab" aria-label="Add">419 <svg width="60" height="60" viewBox="0 0 60 60">420 <path d="M30 12v36M12 30h36" stroke="#EAEAEA" stroke-width="6" stroke-linecap="round"/>421 </svg>422 </div>423 424 <!-- Home indicator -->425 <div class="home-indicator"></div>426 427 <!-- Bottom Navigation -->428 <div class="bottom-nav">429 <div class="nav-item">430 <svg width="46" height="46" viewBox="0 0 46 46">431 <path d="M6 22l17-12 17 12v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V22z" fill="#c9ced5"/>432 </svg>433 <div>Home</div>434 </div>435 <div class="nav-item">436 <svg width="46" height="46" viewBox="0 0 46 46">437 <path d="M23 5l6 13 14 2-10 9 3 14-13-7-13 7 3-14-10-9 14-2z" fill="#c9ced5"/>438 </svg>439 <div>Starred</div>440 </div>441 <div class="nav-item">442 <svg width="46" height="46" viewBox="0 0 46 46">443 <circle cx="14" cy="18" r="6" fill="#c9ced5"/>444 <circle cx="32" cy="18" r="6" fill="#c9ced5"/>445 <path d="M8 34c3-6 26-6 30 0" stroke="#c9ced5" stroke-width="4" stroke-linecap="round" fill="none"/>446 </svg>447 <div>Shared</div>448 </div>449 <div class="nav-item active">450 <svg width="46" height="46" viewBox="0 0 46 46">451 <path d="M6 12h20l8 8v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V12z" fill="#4285F4"/>452 </svg>453 <div>Files</div>454 </div>455 </div>456 457</div>458</body>459</html>