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>My Files UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #FAFAFA;15 box-sizing: border-box;16 }17 18 /* Status bar */19 .status-bar {20 height: 90px;21 background: #ECEFF1;22 color: #212121;23 padding: 0 30px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;28 font-size: 34px;29 letter-spacing: 0.5px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .icon {37 width: 48px;38 height: 48px;39 }40 41 /* Header */42 .header {43 background: #FFFFFF;44 padding: 30px;45 box-shadow: 0 2px 0 rgba(0,0,0,0.08);46 }47 .header-row {48 display: flex;49 align-items: center;50 justify-content: space-between;51 }52 .title-wrap {53 display: flex;54 align-items: center;55 gap: 30px;56 }57 .hamburger {58 width: 60px;59 height: 60px;60 }61 .header-title {62 font-size: 72px;63 font-weight: 500;64 color: #2E2E2E;65 margin: 0;66 line-height: 1.1;67 }68 .header-sub {69 font-size: 32px;70 color: #757575;71 margin-top: 6px;72 }73 .toolbar-actions {74 display: flex;75 align-items: center;76 gap: 36px;77 padding-right: 12px;78 }79 .crumbs {80 display: flex;81 align-items: center;82 justify-content: space-between;83 margin-top: 16px;84 }85 .crumb-left {86 display: flex;87 align-items: center;88 gap: 24px;89 font-size: 36px;90 letter-spacing: 1px;91 }92 .crumb-left .primary {93 color: #1E88E5;94 font-weight: 600;95 }96 .crumb-left .muted {97 color: #9E9E9E;98 font-weight: 500;99 }100 101 /* List */102 .list {103 background: #FFFFFF;104 }105 .item {106 display: flex;107 align-items: center;108 padding: 36px 30px;109 border-bottom: 1px solid #E0E0E0;110 }111 .circle {112 width: 120px;113 height: 120px;114 border-radius: 60px;115 background: #0E6AAE;116 display: flex;117 align-items: center;118 justify-content: center;119 margin-right: 36px;120 flex-shrink: 0;121 }122 .item-text {123 flex: 1;124 display: flex;125 flex-direction: column;126 gap: 8px;127 }128 .item-title {129 font-size: 48px;130 color: #303030;131 }132 .item-sub {133 font-size: 30px;134 color: #9E9E9E;135 }136 .item-date {137 font-size: 30px;138 color: #616161;139 text-align: right;140 min-width: 380px;141 }142 143 /* Ad card */144 .ad-card {145 margin: 24px 30px;146 background: #FFFFFF;147 border-radius: 24px;148 box-shadow: 0 10px 24px rgba(0,0,0,0.08);149 border: 1px solid #EEEEEE;150 padding: 18px;151 display: flex;152 align-items: center;153 gap: 24px;154 }155 .ad-chip {156 position: absolute;157 left: 30px;158 transform: translateY(-18px);159 background: #FFC107;160 color: #FFFFFF;161 font-size: 26px;162 padding: 8px 16px;163 border-radius: 20px;164 }165 .ad-placeholder {166 width: 960px;167 height: 180px;168 background: #E0E0E0;169 border: 1px solid #BDBDBD;170 border-radius: 18px;171 display: flex;172 justify-content: center;173 align-items: center;174 color: #757575;175 font-size: 34px;176 }177 178 /* Floating Actions */179 .fab-stack {180 position: absolute;181 right: 40px;182 bottom: 280px;183 display: flex;184 flex-direction: column;185 align-items: flex-end;186 gap: 36px;187 }188 .fab {189 width: 132px;190 height: 132px;191 border-radius: 66px;192 background: #FFC107;193 box-shadow: 0 12px 24px rgba(0,0,0,0.25);194 display: flex;195 align-items: center;196 justify-content: center;197 }198 .fab-label {199 background: #FFFFFF;200 color: #424242;201 font-size: 38px;202 padding: 18px 26px;203 border-radius: 18px;204 box-shadow: 0 6px 16px rgba(0,0,0,0.2);205 margin-right: 24px;206 }207 .fab-row {208 display: flex;209 align-items: center;210 }211 .fab.main {212 width: 150px;213 height: 150px;214 border-radius: 75px;215 background: #FFC107;216 }217 218 /* Gesture bar */219 .gesture-bar {220 position: absolute;221 bottom: 24px;222 left: 50%;223 transform: translateX(-50%);224 width: 360px;225 height: 16px;226 background: #D6D6D6;227 border-radius: 8px;228 }229</style>230</head>231<body>232<div id="render-target">233 234 <!-- Status Bar -->235 <div class="status-bar">236 <div>11:21</div>237 <div class="status-right">238 <!-- simple status icons -->239 <svg class="icon" viewBox="0 0 24 24">240 <circle cx="12" cy="12" r="10" fill="#424242"/>241 </svg>242 <svg class="icon" viewBox="0 0 24 24">243 <path d="M2 12h20" stroke="#424242" stroke-width="2"/>244 <path d="M12 2v20" stroke="#424242" stroke-width="2"/>245 </svg>246 <svg class="icon" viewBox="0 0 24 24">247 <path d="M17 4v16H7V4h10zm-2 2H9v12h6V6z" fill="#424242"/>248 </svg>249 <svg class="icon" viewBox="0 0 24 24">250 <path d="M6 20h12v-2H6v2zm3-4h6l3-8H6l3 8z" fill="#424242"/>251 </svg>252 </div>253 </div>254 255 <!-- Header -->256 <div class="header">257 <div class="header-row">258 <div class="title-wrap">259 <!-- Hamburger -->260 <svg class="hamburger" viewBox="0 0 24 24">261 <rect x="3" y="5" width="18" height="2" fill="#1E88E5"/>262 <rect x="3" y="11" width="18" height="2" fill="#1E88E5"/>263 <rect x="3" y="17" width="18" height="2" fill="#1E88E5"/>264 </svg>265 <div>266 <h1 class="header-title">My Files</h1>267 <div class="header-sub">15 folders</div>268 </div>269 </div>270 <div class="toolbar-actions">271 <!-- Search -->272 <svg class="icon" viewBox="0 0 24 24">273 <circle cx="10" cy="10" r="6" stroke="#1E88E5" stroke-width="2" fill="none"/>274 <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#1E88E5" stroke-width="2"/>275 </svg>276 <!-- Kebab -->277 <svg class="icon" viewBox="0 0 24 24">278 <circle cx="12" cy="5" r="2" fill="#1E88E5"/>279 <circle cx="12" cy="12" r="2" fill="#1E88E5"/>280 <circle cx="12" cy="19" r="2" fill="#1E88E5"/>281 </svg>282 </div>283 </div>284 285 <div class="crumbs">286 <div class="crumb-left">287 <span class="primary">INTERNAL MEMORY</span>288 <svg class="icon" viewBox="0 0 24 24">289 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>290 </svg>291 <span class="muted">MUSIC</span>292 </div>293 <div style="width:48px;height:48px;"></div>294 </div>295 </div>296 297 <!-- List -->298 <div class="list">299 <div class="item">300 <div class="circle">301 <!-- folder icon -->302 <svg viewBox="0 0 24 24" width="80" height="80">303 <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" fill="#FFFFFF"/>304 </svg>305 </div>306 <div class="item-text">307 <div class="item-title">Alarms</div>308 <div class="item-sub">Empty</div>309 </div>310 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>311 </div>312 313 <div class="item">314 <div class="circle">315 <svg viewBox="0 0 24 24" width="80" height="80">316 <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" fill="#FFFFFF"/>317 </svg>318 </div>319 <div class="item-text">320 <div class="item-title">Android</div>321 <div class="item-sub">3 items</div>322 </div>323 <div class="item-date">Feb 27, 2023, 9:35:57 PM</div>324 </div>325 326 <div class="item">327 <div class="circle">328 <svg viewBox="0 0 24 24" width="80" height="80">329 <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" fill="#FFFFFF"/>330 </svg>331 </div>332 <div class="item-text">333 <div class="item-title">Audiobooks</div>334 <div class="item-sub">Empty</div>335 </div>336 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>337 </div>338 339 <div class="item">340 <div class="circle">341 <svg viewBox="0 0 24 24" width="80" height="80">342 <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" fill="#FFFFFF"/>343 </svg>344 </div>345 <div class="item-text" style="gap: 14px;">346 <div class="item-title">com.google.intelligence.dbw.showcase</div>347 <div class="item-sub">1 item</div>348 </div>349 <div class="item-date">Jun 08, 2023, 3:17:27 PM</div>350 </div>351 352 <div class="item">353 <div class="circle">354 <svg viewBox="0 0 24 24" width="80" height="80">355 <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" fill="#FFFFFF"/>356 </svg>357 </div>358 <div class="item-text">359 <div class="item-title">DCIM</div>360 <div class="item-sub">1 item</div>361 </div>362 <div class="item-date">Jun 08, 2023, 12:19:47 PM</div>363 </div>364 365 <div class="item">366 <div class="circle">367 <svg viewBox="0 0 24 24" width="80" height="80">368 <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" fill="#FFFFFF"/>369 </svg>370 </div>371 <div class="item-text">372 <div class="item-title">Documents</div>373 <div class="item-sub">Empty</div>374 </div>375 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>376 </div>377 378 <div class="item">379 <div class="circle">380 <svg viewBox="0 0 24 24" width="80" height="80">381 <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" fill="#FFFFFF"/>382 </svg>383 </div>384 <div class="item-text">385 <div class="item-title">Download</div>386 <div class="item-sub">Empty</div>387 </div>388 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>389 </div>390 391 <div class="item">392 <div class="circle">393 <svg viewBox="0 0 24 24" width="80" height="80">394 <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" fill="#FFFFFF"/>395 </svg>396 </div>397 <div class="item-text">398 <div class="item-title">Movies</div>399 <div class="item-sub">1 item</div>400 </div>401 <div class="item-date">—</div>402 </div>403 404 <!-- Ad section -->405 <div style="position: relative;">406 <div class="ad-chip">Ad</div>407 <div class="ad-card">408 <div class="ad-placeholder">[IMG: App Ad Banner]</div>409 </div>410 </div>411 412 <div class="item">413 <div class="circle">414 <svg viewBox="0 0 24 24" width="80" height="80">415 <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" fill="#FFFFFF"/>416 </svg>417 </div>418 <div class="item-text">419 <div class="item-title">Music</div>420 <div class="item-sub">2 items</div>421 </div>422 <div class="item-date">Jul 05, 2023, 9:55:19 AM</div>423 </div>424 425 <div class="item">426 <div class="circle">427 <svg viewBox="0 0 24 24" width="80" height="80">428 <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" fill="#FFFFFF"/>429 </svg>430 </div>431 <div class="item-text">432 <div class="item-title">Notifications</div>433 <div class="item-sub">Empty</div>434 </div>435 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>436 </div>437 </div>438 439 <!-- Floating Action Buttons -->440 <div class="fab-stack">441 <div class="fab-row">442 <div class="fab-label">New folder</div>443 <div class="fab">444 <svg viewBox="0 0 24 24" width="72" height="72">445 <path d="M4 8h5l2 2h9v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z" fill="#FFFFFF"/>446 </svg>447 </div>448 </div>449 <div class="fab-row">450 <div class="fab-label">New file</div>451 <div class="fab">452 <svg viewBox="0 0 24 24" width="72" height="72">453 <path d="M6 4h8l4 4v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" fill="#FFFFFF"/>454 <path d="M14 4v4h4" fill="#FFC107"/>455 </svg>456 </div>457 </div>458 <div class="fab-row">459 <div class="fab-label">New cloud connection</div>460 <div class="fab">461 <svg viewBox="0 0 24 24" width="72" height="72">462 <path d="M6 18h10a4 4 0 0 0 0-8h-.5A5.5 5.5 0 0 0 5 9.5 3.5 3.5 0 0 0 6 18z" fill="#FFFFFF"/>463 </svg>464 </div>465 </div>466 <div class="fab main">467 <svg viewBox="0 0 24 24" width="88" height="88">468 <path d="M6 6l12 12M18 6L6 18" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>469 </svg>470 </div>471 </div>472 473 <!-- Gesture bar -->474 <div class="gesture-bar"></div>475</div>476</body>477</html>