GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Drive Dark</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: 1440px;14 height: 3120px;15 position: relative;16 overflow: hidden;17 background: #121512; /* dark app bg */18 color: #E9EDE6;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1440px;27 height: 120px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 0 48px;32 box-sizing: border-box;33 color: #DDE5D8;34 font-weight: 600;35 font-size: 44px;36 }37 .status-icons {38 display: flex;39 align-items: center;40 gap: 28px;41 }42 .status-dot {43 width: 16px; height: 16px; background:#A5AF9A; border-radius: 50%;44 }45 46 /* Search bar area */47 .search-area {48 position: absolute;49 top: 120px;50 left: 0;51 width: 1440px;52 padding: 30px 48px 0 48px;53 box-sizing: border-box;54 }55 .search-row {56 display: flex;57 align-items: center;58 gap: 24px;59 }60 .hamburger {61 width: 120px;62 height: 120px;63 border-radius: 60px;64 background: transparent;65 display: flex;66 align-items: center;67 justify-content: center;68 }69 .search-pill {70 flex: 1;71 height: 120px;72 border-radius: 60px;73 background: #253028;74 display: flex;75 align-items: center;76 padding: 0 40px;77 box-sizing: border-box;78 color: #AAB6A7;79 font-size: 44px;80 }81 .search-pill .icon {82 margin-right: 24px;83 }84 .avatar {85 width: 132px;86 height: 132px;87 border-radius: 66px;88 background: #204F3C;89 display: flex;90 align-items: center;91 justify-content: center;92 color: #E8F5E9;93 font-weight: 700;94 font-size: 54px;95 }96 97 /* Tabs */98 .tabs {99 margin-top: 32px;100 display: flex;101 gap: 64px;102 font-size: 52px;103 padding: 0 48px;104 align-items: center;105 }106 .tab {107 color: #AAB6A7;108 }109 .tab.active {110 color: #86C889;111 }112 113 /* Content header (sort icon) */114 .content-header {115 position: absolute;116 top: 360px;117 left: 0;118 width: 1440px;119 height: 80px;120 }121 .sort-icon {122 position: absolute;123 right: 48px;124 top: 0;125 width: 80px;126 height: 80px;127 display: flex;128 align-items: center;129 justify-content: center;130 }131 132 /* Grid content */133 .grid {134 position: absolute;135 top: 440px;136 left: 0;137 width: 1440px;138 padding: 0 48px 0 48px;139 box-sizing: border-box;140 display: grid;141 grid-template-columns: repeat(2, 624px);142 gap: 48px 72px;143 }144 .tile {145 width: 624px;146 height: 640px;147 border-radius: 36px;148 background: #1A1F1B;149 box-shadow: inset 0 0 0 1px #232A24;150 position: relative;151 padding: 48px;152 box-sizing: border-box;153 }154 .tile .thumb {155 width: 528px;156 height: 360px;157 border-radius: 28px;158 background: #C9CEC6;159 display: flex;160 align-items: center;161 justify-content: center;162 color: #384038;163 border: 1px solid #B5BBB0;164 font-size: 38px;165 font-weight: 600;166 }167 .tile .label {168 margin-top: 36px;169 font-size: 52px;170 line-height: 1.2;171 color: #E9EDE6;172 }173 .dots {174 position: absolute;175 right: 28px;176 top: 300px;177 width: 48px;178 height: 140px;179 display: flex;180 flex-direction: column;181 align-items: center;182 justify-content: space-between;183 }184 .dot {185 width: 16px;186 height: 16px;187 background: #AAB6A7;188 border-radius: 50%;189 }190 191 /* Bottom nav */192 .bottom-nav {193 position: absolute;194 bottom: 0;195 left: 0;196 width: 1440px;197 height: 240px;198 background: #141913;199 border-top: 1px solid #263029;200 display: flex;201 align-items: center;202 justify-content: space-around;203 color: #9FB5A2;204 }205 .nav-item {206 display: flex;207 flex-direction: column;208 align-items: center;209 gap: 18px;210 font-size: 40px;211 }212 .nav-item .nav-icon {213 width: 96px; height: 96px; border-radius: 20px;214 display: flex; align-items: center; justify-content: center;215 color: #9FB5A2;216 }217 .nav-item.active .nav-icon {218 background: #223A2C;219 color: #86C889;220 }221 .nav-item.active .nav-label {222 color: #E9EDE6;223 }224 225 /* Floating action button */226 .fab {227 position: absolute;228 right: 72px;229 bottom: 312px;230 width: 180px;231 height: 180px;232 border-radius: 90px;233 background: #2E6B47;234 display: flex;235 align-items: center;236 justify-content: center;237 box-shadow: 0 10px 24px rgba(0,0,0,0.45);238 }239 .fab svg { width: 88px; height: 88px; }240 241 /* Snack bar */242 .snackbar {243 position: absolute;244 bottom: 270px;245 left: 50%;246 transform: translateX(-50%);247 width: 1116px;248 height: 120px;249 border-radius: 20px;250 background: #2A2F2B;251 box-shadow: 0 3px 10px rgba(0,0,0,0.5);252 display: flex;253 align-items: center;254 padding: 0 36px;255 box-sizing: border-box;256 font-size: 44px;257 color: #E9EDE6;258 }259 260 /* Small helper icon style */261 .icon svg { width: 56px; height: 56px; fill: none; stroke: #AAB6A7; stroke-width: 10px; }262 .icon.fill svg { fill: #AAB6A7; stroke: none; }263 264 .folder-icon {265 width: 528px;266 height: 360px;267 background: #C9CEC6;268 border: 1px solid #B5BBB0;269 border-radius: 28px;270 position: relative;271 }272 .folder-tab {273 position: absolute;274 top: 40px;275 left: 60px;276 width: 180px;277 height: 80px;278 background: #C9CEC6;279 border: 1px solid #B5BBB0;280 border-bottom: none;281 border-radius: 12px 12px 0 0;282 }283 .folder-body {284 position: absolute;285 top: 80px;286 left: 40px;287 right: 40px;288 bottom: 40px;289 background: #CAD0C8;290 border: 1px solid #B5BBB0;291 border-radius: 18px;292 }293 .file-chip {294 position: absolute;295 left: 48px;296 bottom: 48px;297 width: 80px; height: 80px;298 border-radius: 16px;299 display: flex; align-items: center; justify-content: center;300 color: #0B0F0B;301 font-weight: 800;302 font-size: 44px;303 }304 .chip-red { background: #C45B5B; }305 .chip-green { background: #64A36B; }306 .chip-blue { background: #6B86C4; }307</style>308</head>309<body>310<div id="render-target">311 312 <!-- Status Bar -->313 <div class="status-bar">314 <div>5:44</div>315 <div class="status-icons">316 <div class="status-dot"></div>317 <div style="font-size:42px;">96°</div>318 <div class="status-dot"></div>319 <div class="status-dot"></div>320 <div class="status-dot"></div>321 <div class="status-dot"></div>322 </div>323 </div>324 325 <!-- Search Area -->326 <div class="search-area">327 <div class="search-row">328 <div class="hamburger">329 <svg viewBox="0 0 100 100">330 <line x1="16" y1="28" x2="84" y2="28" stroke="#C7D2C6" stroke-width="10" />331 <line x1="16" y1="50" x2="84" y2="50" stroke="#C7D2C6" stroke-width="10" />332 <line x1="16" y1="72" x2="84" y2="72" stroke="#C7D2C6" stroke-width="10" />333 </svg>334 </div>335 <div class="search-pill">336 <span class="icon">337 <svg viewBox="0 0 100 100">338 <circle cx="42" cy="42" r="28"></circle>339 <line x1="64" y1="64" x2="88" y2="88"></line>340 </svg>341 </span>342 Search in Drive343 </div>344 <div class="avatar">C</div>345 </div>346 347 <div class="tabs">348 <div class="tab active">My Drive</div>349 <div class="tab">Computers</div>350 </div>351 </div>352 353 <!-- Content header with sort icon -->354 <div class="content-header">355 <div class="sort-icon">356 <svg viewBox="0 0 100 100">357 <line x1="16" y1="28" x2="84" y2="28" stroke="#AAB6A7" stroke-width="10" />358 <line x1="16" y1="50" x2="84" y2="50" stroke="#AAB6A7" stroke-width="10" />359 <line x1="16" y1="72" x2="84" y2="72" stroke="#AAB6A7" stroke-width="10" />360 </svg>361 </div>362 </div>363 364 <!-- Grid of items -->365 <div class="grid">366 367 <!-- Folder: Project Folder -->368 <div class="tile">369 <div class="folder-icon">370 <div class="folder-tab"></div>371 <div class="folder-body"></div>372 </div>373 <div class="dots">374 <div class="dot"></div><div class="dot"></div><div class="dot"></div>375 </div>376 <div class="label">Project<br>Folder</div>377 </div>378 379 <!-- Folder: Xyz ltd -->380 <div class="tile">381 <div class="folder-icon">382 <div class="folder-tab"></div>383 <div class="folder-body"></div>384 </div>385 <div class="dots">386 <div class="dot"></div><div class="dot"></div><div class="dot"></div>387 </div>388 <div class="label">Xyz ltd</div>389 </div>390 391 <!-- PDF File -->392 <div class="tile">393 <div class="thumb">[IMG: PDF Preview]</div>394 <div class="dots">395 <div class="dot"></div><div class="dot"></div><div class="dot"></div>396 </div>397 <div class="file-chip chip-red">PDF</div>398 <div class="label">08.24_dinner-veg (...)</div>399 </div>400 401 <!-- Sheet file -->402 <div class="tile">403 <div class="thumb" style="background:#1E2A1F; color:#86C889; border-color:#2F3B31;">[Google Sheet]</div>404 <div class="dots">405 <div class="dot"></div><div class="dot"></div><div class="dot"></div>406 </div>407 <div class="file-chip chip-green">+</div>408 <div class="label">ABC data<br>sheet</div>409 </div>410 411 <!-- Text file agents.txt -->412 <div class="tile">413 <div class="thumb" style="background:#E0E0E0; color:#606060;">[IMG: Text Doc]</div>414 <div class="dots">415 <div class="dot"></div><div class="dot"></div><div class="dot"></div>416 </div>417 <div class="file-chip chip-blue">418 <svg viewBox="0 0 100 100">419 <rect x="24" y="20" width="52" height="64" fill="#0B0F0B"></rect>420 </svg>421 </div>422 <div class="label">agents.txt</div>423 </div>424 425 <!-- Backup reminder file -->426 <div class="tile">427 <div class="thumb" style="background:#222622; color:#C9CEC6; border-color:#303630;">[File Placeholder]</div>428 <div class="dots">429 <div class="dot"></div><div class="dot"></div><div class="dot"></div>430 </div>431 <div class="file-chip chip-blue">432 <svg viewBox="0 0 100 100">433 <rect x="24" y="20" width="52" height="64" fill="#0B0F0B"></rect>434 </svg>435 </div>436 <div class="label">BACKUP_REMINDER_M...</div>437 </div>438 439 </div>440 441 <!-- Floating action button -->442 <div class="fab">443 <svg viewBox="0 0 100 100">444 <line x1="50" y1="20" x2="50" y2="80" stroke="#E9F5EA" stroke-width="16" stroke-linecap="round"/>445 <line x1="20" y1="50" x2="80" y2="50" stroke="#E9F5EA" stroke-width="16" stroke-linecap="round"/>446 </svg>447 </div>448 449 <!-- Snackbar -->450 <div class="snackbar">Folder created</div>451 452 <!-- Bottom navigation -->453 <div class="bottom-nav">454 <div class="nav-item">455 <div class="nav-icon">456 <svg viewBox="0 0 100 100">457 <polygon points="50,18 18,46 18,82 42,82 42,60 58,60 58,82 82,82 82,46" fill="#9FB5A2"></polygon>458 </svg>459 </div>460 <div class="nav-label">Home</div>461 </div>462 <div class="nav-item">463 <div class="nav-icon">464 <svg viewBox="0 0 100 100">465 <polygon points="50,16 60,40 86,40 64,56 72,82 50,66 28,82 36,56 14,40 40,40" fill="#9FB5A2"></polygon>466 </svg>467 </div>468 <div class="nav-label">Starred</div>469 </div>470 <div class="nav-item">471 <div class="nav-icon">472 <svg viewBox="0 0 100 100">473 <circle cx="34" cy="44" r="16" fill="#9FB5A2"></circle>474 <circle cx="72" cy="36" r="12" fill="#9FB5A2"></circle>475 <rect x="18" y="66" width="64" height="16" fill="#9FB5A2"></rect>476 </svg>477 </div>478 <div class="nav-label">Shared</div>479 </div>480 <div class="nav-item active">481 <div class="nav-icon">482 <svg viewBox="0 0 100 100">483 <rect x="16" y="34" width="68" height="44" rx="6" fill="#86C889"></rect>484 <rect x="22" y="24" width="24" height="14" rx="4" fill="#86C889"></rect>485 </svg>486 </div>487 <div class="nav-label">Files</div>488 </div>489 </div>490 491</div>492</body>493</html>