GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>My files UI</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: #ffffff;13 box-sizing: border-box;14 }15 16 /* Status bar */17 .status-bar {18 height: 140px;19 background: #d6d6d6;20 color: #2b2b2b;21 display: flex;22 align-items: center;23 padding: 0 40px;24 font-size: 38px;25 letter-spacing: 0.5px;26 }27 .status-right {28 margin-left: auto;29 display: flex;30 align-items: center;31 gap: 30px;32 }33 .icon {34 width: 48px; height: 48px;35 }36 37 /* App bar */38 .app-bar {39 height: 160px;40 display: flex;41 align-items: center;42 padding: 0 36px;43 border-bottom: 1px solid #ececec;44 background: #fff;45 }46 .app-title {47 font-size: 64px;48 font-weight: 700;49 margin-left: 24px;50 }51 .app-actions {52 margin-left: auto;53 display: flex;54 gap: 36px;55 align-items: center;56 }57 58 /* Banner */59 .banner {60 margin: 24px 24px 0 24px;61 background: #eaf4ff;62 border-radius: 24px;63 padding: 30px 30px;64 display: flex;65 align-items: center;66 position: relative;67 }68 .badge {69 width: 96px; height: 96px;70 background: #39c56d;71 border-radius: 24px;72 color: #fff;73 display: flex; align-items: center; justify-content: center;74 font-weight: 800; font-size: 38px;75 margin-right: 28px;76 }77 .banner-text {78 font-size: 42px;79 color: #1b1b1b;80 line-height: 1.3;81 }82 .banner-sub { font-size: 38px; color: #1b1b1b; }83 .invite-btn {84 margin-top: 24px;85 background: #fff;86 color: #1976d2;87 border: 2px solid #cfe3ff;88 padding: 18px 30px;89 border-radius: 16px;90 display: inline-block;91 font-size: 38px;92 font-weight: 600;93 }94 .banner-close {95 position: absolute;96 right: 30px; top: 26px;97 width: 64px; height: 64px;98 display: flex; align-items: center; justify-content: center;99 color: #4b4b4b;100 font-size: 44px;101 }102 103 /* View toggle grid icon near list head */104 .view-toggle {105 position: absolute;106 right: 36px;107 top: 550px;108 width: 72px; height: 72px;109 display: flex; align-items: center; justify-content: center;110 border-radius: 16px;111 color: #6b6b6b;112 }113 114 /* List area */115 .list {116 padding: 18px 24px 200px 24px;117 }118 .list-head {119 font-size: 38px;120 color: #5a5a5a;121 margin: 10px 0 20px 12px;122 display: flex; align-items: center; gap: 8px;123 }124 .list-item {125 display: flex;126 align-items: flex-start;127 padding: 30px 12px;128 border-radius: 12px;129 }130 .list-item + .list-item { border-top: 1px solid #efefef; }131 .left-icon, .thumb {132 width: 96px; height: 96px;133 display: flex; align-items: center; justify-content: center;134 margin-right: 26px;135 }136 .thumb {137 background: #E0E0E0;138 border: 1px solid #BDBDBD;139 color: #757575;140 font-size: 22px;141 text-align: center;142 padding: 6px;143 }144 .content {145 flex: 1;146 min-width: 0;147 }148 .title {149 font-size: 44px; color: #121212;150 }151 .subtitle {152 margin-top: 8px;153 color: #6d6d6d;154 font-size: 34px;155 }156 .right-actions {157 display: flex; align-items: center; gap: 28px;158 margin-left: 20px;159 }160 .info-chip {161 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;162 border-radius: 50%; border: 2px solid #b0b0b0; color: #6b6b6b; font-weight: 700;163 }164 165 /* Floating action button */166 .fab {167 position: absolute;168 right: 36px;169 bottom: 230px;170 width: 150px; height: 150px;171 background: #1e73ff;172 border-radius: 50%;173 box-shadow: 0 10px 18px rgba(0,0,0,0.25);174 display: flex; align-items: center; justify-content: center;175 }176 .fab span {177 color: #fff; font-size: 72px; font-weight: 700;178 }179 180 /* Bottom navigation */181 .bottom-nav {182 position: absolute;183 bottom: 0; left: 0;184 width: 100%;185 height: 160px;186 border-top: 1px solid #e7e7e7;187 background: #fff;188 display: flex;189 align-items: center;190 justify-content: space-around;191 }192 .nav-item {193 display: flex;194 flex-direction: column;195 align-items: center;196 color: #707070;197 font-size: 32px;198 }199 .nav-item.active { color: #1e73ff; font-weight: 700; }200 .nav-icon { width: 64px; height: 64px; margin-bottom: 8px; }201 202 /* Simple svg helper styling */203 svg { display: block; }204 205 /* Ellipsis button */206 .kebab {207 width: 20px; height: 90px;208 display: flex; flex-direction: column; justify-content: center; align-items: center;209 gap: 10px;210 }211 .kebab div { width: 12px; height: 12px; background: #747474; border-radius: 50%; }212</style>213</head>214<body>215<div id="render-target">216 217 <!-- Status Bar -->218 <div class="status-bar">219 8:50220 <div class="status-right">221 <!-- simple tiny icons -->222 <svg class="icon" viewBox="0 0 24 24">223 <rect x="2" y="9" width="20" height="6" fill="#444"></rect>224 </svg>225 <svg class="icon" viewBox="0 0 24 24">226 <circle cx="12" cy="12" r="8" stroke="#444" stroke-width="2" fill="none"></circle>227 </svg>228 <svg class="icon" viewBox="0 0 24 24">229 <path d="M3 12h18M6 8h12M6 16h12" stroke="#444" stroke-width="2"></path>230 </svg>231 </div>232 </div>233 234 <!-- App Bar -->235 <div class="app-bar">236 <!-- Hamburger -->237 <svg class="icon" viewBox="0 0 24 24">238 <path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="2" stroke-linecap="round"></path>239 </svg>240 <div class="app-title">My files</div>241 <div class="app-actions">242 <!-- badge/star icon -->243 <svg class="icon" viewBox="0 0 24 24">244 <circle cx="12" cy="12" r="9" fill="#1e73ff" opacity="0.15"></circle>245 <path d="M12 5l2.2 4.6 5 .7-3.6 3.4.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.4 5-.7L12 5z" fill="#1e73ff"></path>246 </svg>247 <!-- search -->248 <svg class="icon" viewBox="0 0 24 24">249 <circle cx="10" cy="10" r="6" stroke="#333" stroke-width="2" fill="none"></circle>250 <line x1="15" y1="15" x2="21" y2="21" stroke="#333" stroke-width="2"></line>251 </svg>252 </div>253 </div>254 255 <!-- Banner -->256 <div class="banner">257 <div class="badge">20<br>GB</div>258 <div>259 <div class="banner-text">More is better!</div>260 <div class="banner-sub">You've got <strong>20 GB</strong> free storage. Spread the word!</div>261 <div class="invite-btn">Invite friends</div>262 </div>263 <div class="banner-close">×</div>264 </div>265 266 <!-- View toggle icon -->267 <div class="view-toggle">268 <svg width="64" height="64" viewBox="0 0 24 24">269 <rect x="3" y="3" width="7" height="7" fill="#616161"></rect>270 <rect x="14" y="3" width="7" height="7" fill="#616161"></rect>271 <rect x="3" y="14" width="7" height="7" fill="#616161"></rect>272 <rect x="14" y="14" width="7" height="7" fill="#616161"></rect>273 </svg>274 </div>275 276 <!-- Files list -->277 <div class="list">278 <div class="list-head">279 <span>Name</span>280 <svg width="26" height="26" viewBox="0 0 24 24">281 <path d="M6 9l6-6 6 6" stroke="#777" stroke-width="2" fill="none"></path>282 </svg>283 </div>284 285 <!-- Backups -->286 <div class="list-item">287 <div class="left-icon">288 <svg width="96" height="96" viewBox="0 0 24 24">289 <path d="M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" fill="#f3c766" stroke="#d1a94d"></path>290 </svg>291 </div>292 <div class="content">293 <div class="title">Backups</div>294 <div class="subtitle">Back up photos & videos to MobiDrive</div>295 </div>296 <div class="right-actions">297 <div class="info-chip">i</div>298 </div>299 </div>300 301 <!-- My items -->302 <div class="list-item">303 <div class="left-icon">304 <svg width="96" height="96" viewBox="0 0 24 24">305 <path d="M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" fill="#f3c766" stroke="#d1a94d"></path>306 </svg>307 </div>308 <div class="content">309 <div class="title">My items</div>310 <div class="subtitle">Modified Jun 28</div>311 </div>312 <div class="right-actions">313 <div class="kebab"><div></div><div></div><div></div></div>314 </div>315 </div>316 317 <!-- actuation_result.txt -->318 <div class="list-item">319 <div class="left-icon">320 <svg width="96" height="96" viewBox="0 0 24 24">321 <path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" fill="#dddddd" stroke="#a6a6a6"></path>322 <path d="M15 2v6h6" fill="#cfcfcf"></path>323 </svg>324 </div>325 <div class="content">326 <div class="title">actuation_result.txt</div>327 <div class="subtitle">Modified Jun 27 · 8 B</div>328 </div>329 <div class="right-actions">330 <div class="kebab"><div></div><div></div><div></div></div>331 </div>332 </div>333 334 <!-- Getting started PDF -->335 <div class="list-item">336 <div class="left-icon">337 <svg width="96" height="96" viewBox="0 0 24 24">338 <path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" fill="#ff5a4f" stroke="#c7433d"></path>339 <path d="M15 2v6h6" fill="#ff8a80"></path>340 <text x="8" y="17" font-size="7" fill="#fff" font-weight="700">PDF</text>341 </svg>342 </div>343 <div class="content">344 <div class="title">Getting started with MobiDrive.pdf</div>345 <div class="subtitle">Modified Jun 28 · 516.6 KB</div>346 </div>347 <div class="right-actions">348 <div class="kebab"><div></div><div></div><div></div></div>349 </div>350 </div>351 352 <!-- JPG items -->353 <div class="list-item">354 <div class="thumb">[IMG: photo thumbnail]</div>355 <div class="content">356 <div class="title">PXL_20230622_091252934.jpg</div>357 <div class="subtitle">Modified Jun 22 · 3.4 MB</div>358 </div>359 <div class="right-actions"><div class="kebab"><div></div><div></div><div></div></div></div>360 </div>361 362 <div class="list-item">363 <div class="thumb">[IMG: plant photo]</div>364 <div class="content">365 <div class="title">PXL_20230622_091302086.jpg</div>366 <div class="subtitle">Modified Jun 22 · 2.1 MB</div>367 </div>368 <div class="right-actions"><div class="kebab"><div></div><div></div><div></div></div></div>369 </div>370 371 <div class="list-item">372 <div class="thumb">[IMG: plant photo]</div>373 <div class="content">374 <div class="title">PXL_20230622_091318450.jpg</div>375 <div class="subtitle">376 <span>377 <svg width="40" height="40" viewBox="0 0 24 24" style="vertical-align: middle; margin-right:10px;">378 <circle cx="9" cy="12" r="4" fill="#808080"></circle>379 <circle cx="15" cy="12" r="4" fill="#b0b0b0"></circle>380 </svg>381 </span>382 Modified Jun 22 · 4.4 MB383 </div>384 </div>385 <div class="right-actions"><div class="kebab"><div></div><div></div><div></div></div></div>386 </div>387 388 <div class="list-item">389 <div class="thumb">[IMG: tall plant]</div>390 <div class="content">391 <div class="title">PXL_20230622_091411354.jpg</div>392 <div class="subtitle">Modified Jun 22 · 1.5 MB</div>393 </div>394 <div class="right-actions"><div class="kebab"><div></div><div></div><div></div></div></div>395 </div>396 397 <div class="list-item">398 <div class="thumb">[IMG: tall plant]</div>399 <div class="content">400 <div class="title">PXL_20230622_091426104.jpg</div>401 <div class="subtitle">Modified Jun 22 · 1.6 MB</div>402 </div>403 <div class="right-actions"><div class="kebab"><div></div><div></div><div></div></div></div>404 </div>405 </div>406 407 <!-- Floating action button -->408 <div class="fab"><span>+</span></div>409 410 <!-- Bottom Navigation -->411 <div class="bottom-nav">412 <div class="nav-item active">413 <svg class="nav-icon" viewBox="0 0 24 24">414 <path d="M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" fill="#1e73ff"></path>415 </svg>416 <div>My files</div>417 </div>418 <div class="nav-item">419 <svg class="nav-icon" viewBox="0 0 24 24">420 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"></circle>421 <path d="M12 6v7l5 3" stroke="#777" stroke-width="2" fill="none"></path>422 </svg>423 <div>Recent</div>424 </div>425 <div class="nav-item">426 <svg class="nav-icon" viewBox="0 0 24 24">427 <circle cx="8" cy="10" r="4" fill="#777"></circle>428 <circle cx="16" cy="12" r="4" fill="#777"></circle>429 </svg>430 <div>Shared</div>431 </div>432 <div class="nav-item">433 <svg class="nav-icon" viewBox="0 0 24 24">434 <rect x="3" y="3" width="7" height="7" fill="#777"></rect>435 <rect x="14" y="3" width="7" height="7" fill="#777"></rect>436 <rect x="3" y="14" width="7" height="7" fill="#777"></rect>437 <rect x="14" y="14" width="7" height="7" fill="#777"></rect>438 </svg>439 <div>Collections</div>440 </div>441 </div>442 443</div>444</body>445</html>