GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Files UI Mock</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Arial, Helvetica, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #3b2718;19 border-radius: 40px;20 box-shadow: 0 20px 50px rgba(0,0,0,0.35);21 color: #f5e6d6;22 }23 24 /* Status bar */25 .status-bar {26 position: absolute;27 top: 22px;28 left: 40px;29 right: 40px;30 height: 80px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 color: #f5e6d6;35 font-weight: 600;36 font-size: 40px;37 letter-spacing: 0.5px;38 opacity: 0.95;39 }40 .status-right {41 display: flex;42 align-items: center;43 gap: 28px;44 }45 .status-icon svg { fill: #f5e6d6; }46 47 /* Search bar */48 .search-bar {49 position: absolute;50 top: 130px;51 left: 36px;52 right: 36px;53 height: 120px;54 background: #2a1a10;55 border-radius: 60px;56 display: flex;57 align-items: center;58 padding: 0 40px;59 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);60 }61 .search-bar .left,62 .search-bar .right {63 width: 80px;64 height: 80px;65 display: flex;66 align-items: center;67 justify-content: center;68 }69 .search-bar .placeholder {70 flex: 1;71 color: #d9c3ae;72 font-size: 40px;73 }74 .search-bar svg { fill: #d9c3ae; }75 76 /* Section titles */77 .section-title {78 position: absolute;79 left: 48px;80 font-size: 48px;81 font-weight: 700;82 color: #f5e6d6;83 }84 85 /* Recent cards */86 .recent-row {87 position: absolute;88 top: 320px;89 left: 48px;90 right: 48px;91 display: flex;92 gap: 36px;93 }94 .recent-card {95 width: 320px;96 background: transparent;97 }98 .recent-card .thumb {99 width: 320px;100 height: 220px;101 background: #E0E0E0;102 border: 1px solid #BDBDBD;103 border-radius: 36px;104 display: flex;105 align-items: center;106 justify-content: center;107 color: #757575;108 font-size: 28px;109 text-align: center;110 }111 .recent-card .title {112 margin-top: 22px;113 font-size: 42px;114 font-weight: 600;115 color: #f5e6d6;116 }117 .recent-card .subtitle {118 font-size: 30px;119 color: #d9c3ae;120 margin-top: 6px;121 }122 123 /* Categories */124 .categories-title {125 top: 760px;126 }127 .categories-grid {128 position: absolute;129 top: 840px;130 left: 36px;131 right: 36px;132 display: grid;133 grid-template-columns: repeat(2, 1fr);134 gap: 32px;135 }136 .cat-card {137 height: 180px;138 background: #1f140c;139 border-radius: 40px;140 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);141 display: flex;142 align-items: center;143 padding: 36px;144 color: #f5e6d6;145 }146 .cat-icon {147 width: 88px;148 height: 88px;149 border-radius: 24px;150 background: rgba(233, 193, 160, 0.12);151 display: flex;152 align-items: center;153 justify-content: center;154 margin-right: 32px;155 }156 .cat-icon svg { fill: #e9c1a0; }157 .cat-text .label {158 font-size: 40px;159 font-weight: 600;160 }161 .cat-text .size {162 margin-top: 4px;163 font-size: 28px;164 color: #d9c3ae;165 }166 .red-dot {167 margin-left: auto;168 width: 22px;169 height: 22px;170 background: #ff6d6d;171 border-radius: 50%;172 }173 174 /* Collections */175 .collections-title {176 top: 1330px;177 }178 .collections-list {179 position: absolute;180 top: 1410px;181 left: 36px;182 right: 36px;183 display: flex;184 flex-direction: column;185 gap: 32px;186 }187 .collection-item {188 height: 160px;189 background: #1f140c;190 border-radius: 40px;191 display: flex;192 align-items: center;193 padding: 36px;194 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);195 }196 .collection-item .icon {197 width: 80px;198 height: 80px;199 border-radius: 24px;200 background: rgba(233, 193, 160, 0.12);201 display: flex;202 align-items: center;203 justify-content: center;204 margin-right: 28px;205 }206 .collection-item .text {207 font-size: 40px;208 font-weight: 600;209 color: #f5e6d6;210 }211 212 /* Bottom nav */213 .bottom-bar {214 position: absolute;215 left: 0;216 right: 0;217 bottom: 120px;218 height: 220px;219 background: #442b1b;220 display: flex;221 align-items: center;222 justify-content: space-around;223 padding: 0 40px;224 color: #e9c1a0;225 }226 .nav-item {227 display: flex;228 flex-direction: column;229 align-items: center;230 gap: 16px;231 font-size: 34px;232 color: #e9c1a0;233 }234 .nav-item .icon-holder {235 width: 96px;236 height: 96px;237 display: flex;238 align-items: center;239 justify-content: center;240 }241 .nav-item svg { fill: #e9c1a0; }242 243 .nav-item.active .icon-holder {244 width: 140px;245 height: 100px;246 background: #e0b68f;247 border-radius: 50px;248 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);249 }250 .nav-item.active svg { fill: #3b2718; }251 .nav-item.active .label { color: #f5e6d6; }252 253 /* Gesture pill */254 .gesture {255 position: absolute;256 bottom: 40px;257 left: 50%;258 transform: translateX(-50%);259 width: 300px;260 height: 16px;261 background: #e7e7e7;262 border-radius: 10px;263 }264</style>265</head>266<body>267<div id="render-target">268 269 <!-- Status bar -->270 <div class="status-bar">271 <div class="status-left">6:14272 <span class="status-icon" style="margin-left:18px;">273 <svg width="36" height="36" viewBox="0 0 24 24">274 <circle cx="12" cy="12" r="5"></circle>275 </svg>276 </span>277 </div>278 <div class="status-right">279 <span class="status-icon">280 <!-- WiFi -->281 <svg width="44" height="44" viewBox="0 0 24 24">282 <path d="M2 9c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 9z"></path>283 <path d="M6 13c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2z"></path>284 <circle cx="12" cy="18" r="2"></circle>285 </svg>286 </span>287 <span class="status-icon">288 <!-- Battery -->289 <svg width="44" height="44" viewBox="0 0 24 24">290 <rect x="2" y="6" width="18" height="12" rx="2"></rect>291 <rect x="21" y="10" width="2" height="4"></rect>292 <rect x="4" y="8" width="12" height="8" fill="#3b2718"></rect>293 </svg>294 </span>295 </div>296 </div>297 298 <!-- Search bar -->299 <div class="search-bar">300 <div class="left">301 <!-- Hamburger -->302 <svg width="48" height="48" viewBox="0 0 24 24">303 <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"></path>304 </svg>305 </div>306 <div class="placeholder">Search in Files</div>307 <div class="right">308 <!-- Magnifier -->309 <svg width="54" height="54" viewBox="0 0 24 24">310 <path d="M15.5 14h.79l4.5 4.5-1.29 1.29-4.5-4.5v-.79l-.27-.27A6.5 6.5 0 1 1 15.5 14zM10 4a6 6 0 1 0 .001 12.001A6 6 0 0 0 10 4z"></path>311 </svg>312 </div>313 </div>314 315 <!-- Recent -->316 <div class="section-title" style="top: 260px;">Recent</div>317 318 <div class="recent-row">319 <div class="recent-card">320 <div class="thumb">[IMG: Dream Photos]</div>321 <div class="title">Dream</div>322 <div class="subtitle">Images</div>323 </div>324 <div class="recent-card">325 <div class="thumb">[IMG: Screenshots]</div>326 <div class="title">Screenshots</div>327 <div class="subtitle">Images</div>328 </div>329 <div class="recent-card">330 <div class="thumb">[IMG: Camera Gallery]</div>331 <div class="title">Camera</div>332 <div class="subtitle">Images</div>333 </div>334 </div>335 336 <!-- Categories -->337 <div class="section-title categories-title">Categories</div>338 <div class="categories-grid">339 <div class="cat-card">340 <div class="cat-icon">341 <!-- Download -->342 <svg width="48" height="48" viewBox="0 0 24 24">343 <path d="M12 3v10l4-4 1.4 1.4L12 17l-5.4-6.6L8 9l4 4V3z"></path>344 <path d="M4 19h16v2H4z"></path>345 </svg>346 </div>347 <div class="cat-text">348 <div class="label">Downloads</div>349 <div class="size">17 MB</div>350 </div>351 </div>352 353 <div class="cat-card">354 <div class="cat-icon">355 <!-- Image -->356 <svg width="48" height="48" viewBox="0 0 24 24">357 <rect x="3" y="5" width="18" height="14" rx="2"></rect>358 <path d="M7 14l3-3 3 4 2-2 4 5H5z"></path>359 <circle cx="8" cy="9" r="2"></circle>360 </svg>361 </div>362 <div class="cat-text">363 <div class="label">Images</div>364 <div class="size">28 MB</div>365 </div>366 </div>367 368 <div class="cat-card">369 <div class="cat-icon">370 <!-- Video -->371 <svg width="48" height="48" viewBox="0 0 24 24">372 <path d="M3 6h14v12H3z"></path>373 <path d="M17 9l4-2v10l-4-2V9z"></path>374 <path d="M6 6l2-2h6l2 2"></path>375 </svg>376 </div>377 <div class="cat-text">378 <div class="label">Videos</div>379 <div class="size">0 B</div>380 </div>381 </div>382 383 <div class="cat-card">384 <div class="cat-icon">385 <!-- Audio -->386 <svg width="48" height="48" viewBox="0 0 24 24">387 <path d="M9 5h2v8.5a3.5 3.5 0 1 1-2-3.1V7h-2V5h2zM15 5h2v9a3 3 0 1 1-2-2.7V5z"></path>388 </svg>389 </div>390 <div class="cat-text">391 <div class="label">Audio</div>392 <div class="size">13 kB</div>393 </div>394 </div>395 396 <div class="cat-card">397 <div class="cat-icon">398 <!-- Document -->399 <svg width="48" height="48" viewBox="0 0 24 24">400 <path d="M6 3h8l5 5v13H6z"></path>401 <path d="M14 3v6h6"></path>402 </svg>403 </div>404 <div class="cat-text">405 <div class="label">Documents & other</div>406 <div class="size">18 MB</div>407 </div>408 </div>409 410 <div class="cat-card">411 <div class="cat-icon">412 <!-- Apps -->413 <svg width="48" height="48" viewBox="0 0 24 24">414 <rect x="3" y="3" width="7" height="7" rx="2"></rect>415 <rect x="14" y="3" width="7" height="7" rx="2"></rect>416 <rect x="3" y="14" width="7" height="7" rx="2"></rect>417 <rect x="14" y="14" width="7" height="7" rx="2"></rect>418 </svg>419 </div>420 <div class="cat-text">421 <div class="label">Apps</div>422 <div class="size">10 GB</div>423 </div>424 <div class="red-dot"></div>425 </div>426 </div>427 428 <!-- Collections -->429 <div class="section-title collections-title">Collections</div>430 <div class="collections-list">431 <div class="collection-item">432 <div class="icon">433 <!-- Star -->434 <svg width="44" height="44" viewBox="0 0 24 24">435 <path d="M12 3l3 6 6 .8-4.4 4.1 1 6-5.6-3-5.6 3 1-6L3 9.8 9 9z"></path>436 </svg>437 </div>438 <div class="text">Favorites</div>439 </div>440 441 <div class="collection-item">442 <div class="icon">443 <!-- Lock -->444 <svg width="44" height="44" viewBox="0 0 24 24">445 <rect x="4" y="10" width="16" height="10" rx="2"></rect>446 <path d="M8 10V7a4 4 0 1 1 8 0v3"></path>447 <circle cx="12" cy="15" r="2"></circle>448 </svg>449 </div>450 <div class="text">Safe folder</div>451 </div>452 </div>453 454 <!-- Bottom navigation -->455 <div class="bottom-bar">456 <div class="nav-item">457 <div class="icon-holder">458 <!-- Clean (sparkles) -->459 <svg width="56" height="56" viewBox="0 0 24 24">460 <path d="M12 3l1.5 4L18 8l-4.5 1L12 13l-1.5-4L6 8l4.5-1L12 3z"></path>461 <path d="M4 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z"></path>462 </svg>463 </div>464 <div class="label">Clean</div>465 </div>466 467 <div class="nav-item active">468 <div class="icon-holder">469 <!-- Browse (search) -->470 <svg width="56" height="56" viewBox="0 0 24 24">471 <path d="M15.5 14h.7l4.6 4.6-1.4 1.4-4.6-4.6v-.7A6.5 6.5 0 1 1 15.5 14zM10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12z"></path>472 </svg>473 </div>474 <div class="label">Browse</div>475 </div>476 477 <div class="nav-item">478 <div class="icon-holder">479 <!-- Nearby Share (shuffle) -->480 <svg width="56" height="56" viewBox="0 0 24 24">481 <path d="M4 7h6l3 3h5l2-2-2-2 4 4-4 4 2-2-2-2h-5l-3 3H4"></path>482 </svg>483 </div>484 <div class="label">Nearby Share</div>485 </div>486 </div>487 488 <!-- Gesture -->489 <div class="gesture"></div>490</div>491</body>492</html>