GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Drive</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #111317;13 color: #EAEAEA;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 92px;23 padding: 0 32px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #e6e6e6;29 font-weight: 600;30 letter-spacing: 0.2px;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 24px;36 opacity: 0.9;37 }38 .icon {39 width: 36px; height: 36px;40 }41 .wifi-icon, .battery-icon, .cell-icon {42 display: inline-block;43 width: 36px; height: 24px;44 position: relative;45 }46 .wifi-icon::before {47 content: "";48 position: absolute;49 left: 3px; top: 2px;50 width: 30px; height: 20px;51 border: 3px solid #e6e6e6;52 border-top-left-radius: 20px;53 border-top-right-radius: 20px;54 border-bottom: none;55 transform: rotate(0deg);56 }57 .battery-icon {58 border: 3px solid #e6e6e6;59 border-radius: 6px;60 box-sizing: border-box;61 }62 .battery-icon::after {63 content: "";64 position: absolute;65 right: -10px; top: 6px;66 width: 8px; height: 12px;67 background: #e6e6e6; border-radius: 2px;68 }69 .cell-icon {70 border-left: 6px solid #e6e6e6;71 border-bottom: 6px solid transparent;72 border-top: 6px solid transparent;73 }74 75 /* Search header */76 .header {77 position: absolute;78 top: 92px;79 left: 0;80 width: 1080px;81 padding: 24px 32px 12px;82 box-sizing: border-box;83 }84 .search-row {85 display: flex;86 align-items: center;87 gap: 18px;88 }89 .hamburger {90 width: 56px; height: 56px;91 display: flex; align-items: center; justify-content: center;92 }93 .hamburger svg { fill: #D8D8D8; }94 .search-pill {95 flex: 1;96 height: 88px;97 border-radius: 44px;98 background: #242931;99 display: flex; align-items: center;100 padding: 0 28px;101 box-sizing: border-box;102 color: #BFC6D1;103 font-size: 36px;104 }105 .search-pill .magnifier {106 margin-right: 18px;107 }108 .avatar {109 width: 86px; height: 86px;110 border-radius: 50%;111 background: #E0E0E0;112 border: 1px solid #BDBDBD;113 color: #555;114 font-weight: 700;115 display: flex; align-items: center; justify-content: center;116 }117 118 /* Tabs */119 .tabs {120 margin-top: 20px;121 display: flex;122 gap: 36px;123 font-size: 40px;124 align-items: center;125 }126 .tab {127 color: #DADDE3;128 opacity: 0.85;129 position: relative;130 padding-bottom: 16px;131 }132 .tab.active { color: #8AB4F8; font-weight: 700; }133 .tab.active::after {134 content: "";135 position: absolute;136 left: 0; bottom: 0;137 width: 140px; height: 6px;138 background: #8AB4F8; border-radius: 3px;139 }140 141 /* Grid of cards */142 .content {143 position: absolute;144 top: 260px;145 left: 0; right: 0;146 padding: 24px 36px 260px;147 box-sizing: border-box;148 }149 .grid {150 display: grid;151 grid-template-columns: 1fr 1fr;152 gap: 42px;153 }154 .card {155 background: transparent;156 }157 .thumb {158 height: 260px;159 border-radius: 26px;160 background: #1C2128;161 border: 1px solid #2D3340;162 position: relative;163 display: flex;164 align-items: center;165 justify-content: center;166 color: #AAB2BF;167 font-size: 32px;168 }169 .thumb.folder::before {170 content: "";171 position: absolute;172 left: 70px; top: 70px;173 width: 140px; height: 90px;174 background: #C9CCD1;175 border-radius: 12px 12px 12px 12px;176 }177 .thumb.folder::after {178 content: "";179 position: absolute;180 left: 60px; top: 56px;181 width: 90px; height: 36px;182 background: #C9CCD1; border-radius: 8px 8px 0 0;183 }184 .thumb.form {185 background: #EDE6F6;186 color: #6E5A8C;187 }188 .thumb.doc {189 background: #E9F0FF;190 color: #6074A6;191 }192 .thumb.file {193 background: #21262E;194 color: #AAB2BF;195 }196 .label-row {197 margin-top: 16px;198 display: flex;199 align-items: center;200 justify-content: space-between;201 }202 .label-left {203 display: flex; align-items: center; gap: 16px;204 font-size: 40px;205 color: #E6E8EB;206 }207 .type-icon {208 width: 44px; height: 44px; border-radius: 8px;209 background: #5B82F7;210 }211 .type-icon.purple { background: #B07AE8; }212 .type-icon.blue { background: #5B82F7; }213 .type-icon.gray { background: #6B778C; }214 .kebab {215 width: 36px; height: 60px;216 display: flex; align-items: center; justify-content: center;217 }218 .kebab span {219 display: block; width: 8px; height: 8px; background: #C8CCD6; border-radius: 50%; margin: 4px 0;220 }221 222 /* Floating action button */223 .fab {224 position: absolute;225 right: 36px;226 bottom: 260px;227 width: 150px; height: 150px;228 background: #3B4A70;229 border-radius: 36px;230 display: flex; align-items: center; justify-content: center;231 box-shadow: 0 10px 24px rgba(0,0,0,0.45);232 }233 .fab svg { width: 72px; height: 72px; fill: #fff; }234 235 /* Snackbar */236 .snackbar {237 position: absolute;238 left: 50%;239 bottom: 186px;240 transform: translateX(-50%);241 width: 980px; height: 120px;242 background: #2A2D33;243 border-radius: 18px;244 box-shadow: 0 14px 30px rgba(0,0,0,0.5);245 display: flex; align-items: center; justify-content: center;246 color: #E4E6EB;247 font-size: 40px;248 }249 250 /* Bottom nav bar */251 .bottom-bar {252 position: absolute;253 left: 0; bottom: 0;254 width: 1080px; height: 180px;255 background: #0D1014;256 border-top: 1px solid #242933;257 display: flex; align-items: center; justify-content: space-around;258 color: #CCCFD6;259 font-size: 40px;260 }261 .nav-item {262 display: flex; flex-direction: column; align-items: center; gap: 10px;263 }264 .nav-item .ico-wrap {265 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;266 border-radius: 24px;267 }268 .nav-item.active .ico-wrap {269 background: #2B3E66;270 }271 .nav-item svg { fill: #D6DAE2; width: 56px; height: 56px; }272 .nav-item.active svg { fill: #EAF0FF; }273</style>274</head>275<body>276<div id="render-target">277 278 <!-- Status Bar -->279 <div class="status-bar">280 <div class="status-left">10:59</div>281 <div class="status-right">282 <div class="cell-icon"></div>283 <div class="wifi-icon"></div>284 <div class="battery-icon"></div>285 </div>286 </div>287 288 <!-- Header with Search -->289 <div class="header">290 <div class="search-row">291 <div class="hamburger">292 <svg viewBox="0 0 24 24" class="icon">293 <rect x="3" y="5" width="18" height="2"></rect>294 <rect x="3" y="11" width="18" height="2"></rect>295 <rect x="3" y="17" width="18" height="2"></rect>296 </svg>297 </div>298 <div class="search-pill">299 <svg viewBox="0 0 24 24" class="magnifier icon">300 <circle cx="10" cy="10" r="6" fill="#BFC6D1"></circle>301 <rect x="15" y="15" width="6" height="2" transform="rotate(45 15 15)" fill="#BFC6D1"></rect>302 </svg>303 <span>Search in Drive</span>304 </div>305 <div class="avatar">[IMG: C Avatar]</div>306 </div>307 308 <div class="tabs">309 <div class="tab active">My Drive</div>310 <div class="tab">Computers</div>311 </div>312 </div>313 314 <!-- Content Grid -->315 <div class="content">316 <div class="grid">317 <!-- Row 1 -->318 <div class="card">319 <div class="thumb folder"></div>320 <div class="label-row">321 <div class="label-left">322 <div class="type-icon gray"></div>323 <div>Backup</div>324 </div>325 <div class="kebab"><span></span><span></span><span></span></div>326 </div>327 </div>328 329 <div class="card">330 <div class="thumb file">Generic file preview</div>331 <div class="label-row">332 <div class="label-left">333 <div class="type-icon gray"></div>334 <div>BACKUP_REMINDER_M...</div>335 </div>336 <div class="kebab"><span></span><span></span><span></span></div>337 </div>338 </div>339 340 <!-- Row 2 -->341 <div class="card">342 <div class="thumb doc">Document preview</div>343 <div class="label-row">344 <div class="label-left">345 <div class="type-icon blue"></div>346 <div>Movies</div>347 </div>348 <div class="kebab"><span></span><span></span><span></span></div>349 </div>350 </div>351 352 <div class="card">353 <div class="thumb form">Form preview</div>354 <div class="label-row">355 <div class="label-left">356 <div class="type-icon purple"></div>357 <div>My Doc</div>358 </div>359 <div class="kebab"><span></span><span></span><span></span></div>360 </div>361 </div>362 363 <!-- Row 3 -->364 <div class="card">365 <div class="thumb form">Form preview</div>366 <div class="label-row">367 <div class="label-left">368 <div class="type-icon purple"></div>369 <div>My Doc</div>370 </div>371 <div class="kebab"><span></span><span></span><span></span></div>372 </div>373 </div>374 375 <div class="card">376 <div class="thumb file">Note / text file</div>377 <div class="label-row">378 <div class="label-left">379 <div class="type-icon gray"></div>380 <div>My Doc</div>381 </div>382 <div class="kebab"><span></span><span></span><span></span></div>383 </div>384 </div>385 </div>386 </div>387 388 <!-- Floating Action Button -->389 <div class="fab">390 <svg viewBox="0 0 24 24">391 <rect x="11" y="5" width="2" height="14"></rect>392 <rect x="5" y="11" width="14" height="2"></rect>393 </svg>394 </div>395 396 <!-- Snackbar -->397 <div class="snackbar">398 File will be made available offline399 </div>400 401 <!-- Bottom Navigation Bar -->402 <div class="bottom-bar">403 <div class="nav-item">404 <div class="ico-wrap">405 <svg viewBox="0 0 24 24">406 <path d="M12 3l9 8-1.4 1.7L12 6 4.4 12.7 3 11z"></path>407 <rect x="6" y="12" width="12" height="8"></rect>408 </svg>409 </div>410 <div>Home</div>411 </div>412 <div class="nav-item">413 <div class="ico-wrap">414 <svg viewBox="0 0 24 24">415 <path d="M12 17.3l-6.2 3.7 1.6-6.9-5.4-4.7 7.1-.6L12 2l2.9 6.8 7.1.6-5.4 4.7 1.6 6.9z"></path>416 </svg>417 </div>418 <div>Starred</div>419 </div>420 <div class="nav-item">421 <div class="ico-wrap">422 <svg viewBox="0 0 24 24">423 <circle cx="8" cy="9" r="4"></circle>424 <circle cx="16" cy="13" r="4"></circle>425 <path d="M2 22c2-4 6-6 10-6s8 2 10 6"></path>426 </svg>427 </div>428 <div>Shared</div>429 </div>430 <div class="nav-item active">431 <div class="ico-wrap">432 <svg viewBox="0 0 24 24">433 <rect x="3" y="4" width="18" height="14" rx="2" ry="2"></rect>434 <rect x="7" y="8" width="10" height="6"></rect>435 </svg>436 </div>437 <div>Files</div>438 </div>439 </div>440 441</div>442</body>443</html>