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>Mobile UI - Dark File Manager</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #141418;15 color: #ECECEC;16 }17 18 /* Status bar */19 .status-bar {20 height: 108px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #ffffff;26 font-size: 42px;27 letter-spacing: 0.5px;28 }29 .status-icons { display: flex; align-items: center; gap: 22px; }30 .status-icons svg { fill: none; stroke: #fff; stroke-width: 3; opacity: 0.95; }31 32 /* Search and quick actions */33 .search-row {34 padding: 8px 36px 0 36px;35 display: flex;36 align-items: center;37 }38 .search-bar {39 flex: 1;40 height: 100px;41 border-radius: 50px;42 background: #1E1F24;43 border: 1px solid #2A2C33;44 display: flex;45 align-items: center;46 padding: 0 28px;47 color: #A7A7A7;48 font-size: 36px;49 }50 .search-bar .placeholder { margin-left: 20px; }51 .quick-icon {52 width: 96px;53 height: 96px;54 border-radius: 50%;55 margin-left: 18px;56 display: flex;57 align-items: center;58 justify-content: center;59 }60 .quick-blue { background: #5177FF; box-shadow: 0 8px 18px rgba(81,119,255,0.45); }61 .quick-grey { background: #3A3C42; }62 .quick-icon svg { fill: #fff; }63 64 /* Promo cards */65 .cards {66 padding: 22px 36px 8px 36px;67 display: flex;68 gap: 22px;69 }70 .card {71 flex: 1;72 min-width: 0;73 height: 210px;74 background: #1C1E23;75 border: 1px solid #2A2C33;76 border-radius: 18px;77 position: relative;78 padding: 26px;79 color: #E9E9E9;80 }81 .card .title { font-size: 40px; font-weight: 600; margin: 8px 0 6px; }82 .card .desc { font-size: 28px; color: #B7B7B7; line-height: 1.25; max-width: 90%; }83 .chip {84 position: absolute; right: 24px; bottom: 22px;85 padding: 10px 26px;86 border-radius: 22px;87 border: 1px solid #4664FF;88 color: #BFD0FF;89 font-size: 28px;90 }91 .close-x {92 position: absolute; right: 18px; top: 14px; width: 44px; height: 44px;93 display: flex; align-items: center; justify-content: center; color: #9AA0A6; font-size: 32px;94 }95 .doc-icon {96 width: 72px; height: 72px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;97 }98 .doc-blue { background: #294CFF22; border: 1px solid #294CFF55; }99 .doc-red { background: #FF5A4522; border: 1px solid #FF5A4555; }100 .doc-icon svg { width: 40px; height: 40px; }101 102 /* Tabs */103 .tabs {104 display: flex;105 align-items: center;106 padding: 18px 36px 8px;107 position: relative;108 }109 .tab {110 margin-right: 36px;111 font-size: 34px;112 color: #AEB0B6;113 padding: 18px 6px;114 position: relative;115 }116 .tab.active { color: #EDEDED; font-weight: 600; }117 .tab.active::after {118 content: "";119 position: absolute; left: 8px; right: 8px; bottom: -6px;120 height: 6px; border-radius: 3px; background: #4C6BFF;121 }122 .filter {123 margin-left: auto;124 width: 64px; height: 64px; border-radius: 14px;125 background: #23252B; border: 1px solid #2D2F37;126 display: flex; align-items: center; justify-content: center;127 }128 .filter svg { fill: none; stroke: #C7C9D1; stroke-width: 3; }129 130 /* List */131 .list { padding: 6px 0 200px 0; }132 .item {133 display: flex;134 align-items: center;135 padding: 28px 36px;136 border-bottom: 1px solid #202229;137 }138 .file-icon {139 width: 92px; height: 92px; border-radius: 16px; margin-right: 26px;140 display: flex; align-items: center; justify-content: center;141 }142 .fi-orange { background: #FF8A3D22; border: 1px solid #FF8A3D55; }143 .fi-red { background: #FF5A4522; border: 1px solid #FF5A4550; }144 .fi-green { background: #18A05C22; border: 1px solid #18A05C55; }145 .fi-grey { background: #3A3C42; border: 1px solid #4A4D55; }146 .file-icon svg { width: 44px; height: 44px; }147 148 .item .text { flex: 1; }149 .item .title { font-size: 34px; color: #EDEDED; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }150 .item .meta { font-size: 26px; color: #A2A6AD; }151 .kebab { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }152 .kebab svg { fill: #9CA0A8; }153 154 /* FAB */155 .fab {156 position: absolute;157 right: 36px;158 bottom: 214px;159 height: 124px;160 width: 360px;161 border-radius: 62px;162 background: #5077FF;163 color: #fff;164 border: none;165 font-size: 42px;166 font-weight: 600;167 display: flex;168 align-items: center;169 justify-content: center;170 gap: 18px;171 box-shadow: 0 18px 36px rgba(80,119,255,0.45);172 }173 .fab .plus {174 width: 60px; height: 60px;175 border-radius: 50%;176 background: rgba(255,255,255,0.15);177 display: flex; align-items: center; justify-content: center;178 font-size: 46px; font-weight: 700;179 }180 181 /* Bottom navigation */182 .bottom-nav {183 position: absolute; left: 0; right: 0; bottom: 100px;184 height: 140px;185 background: #17181C;186 border-top: 1px solid #23252B;187 display: flex;188 align-items: center;189 justify-content: space-around;190 }191 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #9EA2AA; font-size: 26px; }192 .nav-item svg { width: 44px; height: 44px; fill: #9EA2AA; }193 .nav-item.active { color: #5F86FF; }194 .nav-item.active svg { fill: #5F86FF; }195 196 /* Home indicator */197 .home-indicator {198 position: absolute; left: 50%; transform: translateX(-50%);199 bottom: 28px; width: 280px; height: 8px; background: #EDEDED; border-radius: 8px; opacity: 0.9;200 }201</style>202</head>203<body>204<div id="render-target">205 206 <!-- Status bar -->207 <div class="status-bar">208 <div class="time">12:01</div>209 <div class="status-icons">210 <!-- WiFi -->211 <svg width="46" height="28" viewBox="0 0 46 28">212 <path d="M3 10c9-8 31-8 40 0M9 16c6-6 22-6 28 0M17 22c4-4 8-4 12 0" />213 <circle cx="23" cy="25" r="2.5" fill="#fff"></circle>214 </svg>215 <!-- Battery -->216 <svg width="60" height="28" viewBox="0 0 60 28">217 <rect x="1.5" y="4.5" width="48" height="19" rx="4"></rect>218 <rect x="51" y="9" width="6.5" height="10" rx="2" fill="#fff"></rect>219 <rect x="5" y="8" width="40" height="12" rx="2" fill="#fff"></rect>220 </svg>221 </div>222 </div>223 224 <!-- Search bar and quick actions -->225 <div class="search-row">226 <div class="search-bar">227 <!-- Hamburger/menu icon -->228 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#C8CAD2" stroke-width="2" stroke-linecap="round">229 <path d="M3 6h18M3 12h14M3 18h10"/>230 </svg>231 <div class="placeholder">Search files, tools</div>232 </div>233 <div class="quick-icon quick-blue" aria-label="WPS Pro">234 <svg viewBox="0 0 24 24">235 <path d="M13 2l-4 9h5l-3 11 9-14h-6l3-6z"/>236 </svg>237 </div>238 <div class="quick-icon quick-grey" aria-label="User">239 <svg viewBox="0 0 24 24">240 <circle cx="12" cy="8" r="4"></circle>241 <path d="M4 20c2-4 14-4 16 0" stroke="#fff" stroke-width="2" fill="none"/>242 </svg>243 </div>244 </div>245 246 <!-- Promo cards -->247 <div class="cards">248 <div class="card">249 <div class="close-x">×</div>250 <div class="doc-icon doc-blue">251 <svg viewBox="0 0 24 24">252 <path d="M6 2h9l3 3v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" fill="#6D8BFF"/>253 </svg>254 </div>255 <div class="title">Convert File</div>256 <div class="desc">Support conversion among multiple file formats.</div>257 <div class="chip">Try It</div>258 </div>259 <div class="card">260 <div class="doc-icon doc-red">261 <svg viewBox="0 0 24 24">262 <path d="M6 2h9l3 3v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" fill="#FF6B5A"/>263 </svg>264 </div>265 <div class="title">PDF Edit</div>266 <div class="desc">PDF editing has never been easier.</div>267 </div>268 </div>269 270 <!-- Tabs -->271 <div class="tabs">272 <div class="tab active">Recent</div>273 <div class="tab">Starred</div>274 <div class="filter" title="Filter">275 <svg viewBox="0 0 24 24">276 <path d="M3 5h18M6 12h12M10 19h4"/>277 </svg>278 </div>279 </div>280 281 <!-- File list -->282 <div class="list">283 <div class="item">284 <div class="file-icon fi-orange">285 <svg viewBox="0 0 24 24"><path d="M4 4h10l4 4v12a2 2 0 0 1-2 2H4z" fill="#FF8A3D"/></svg>286 </div>287 <div class="text">288 <div class="title">Jhdjen-WPS Office</div>289 <div class="meta">11:43 · This Device</div>290 </div>291 <div class="kebab">292 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>293 </div>294 </div>295 296 <div class="item">297 <div class="file-icon fi-grey">298 <svg viewBox="0 0 24 24">299 <path d="M12 3a9 9 0 1 0 .001 18.001A9 9 0 0 0 12 3z" fill="#80838A"/>300 <path d="M12 7v6l3 2" stroke="#141418" stroke-width="2" fill="none"/>301 </svg>302 </div>303 <div class="text">304 <div class="title">Jhdjen-WPS Office</div>305 <div class="meta">Received files from SDcard</div>306 </div>307 <div class="kebab">308 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>309 </div>310 </div>311 312 <div class="item">313 <div class="file-icon fi-red">314 <svg viewBox="0 0 24 24"><path d="M4 4h10l4 4v12a2 2 0 0 1-2 2H4z" fill="#FF6B5A"/></svg>315 </div>316 <div class="text">317 <div class="title">Get Started with WPS Office for Android</div>318 <div class="meta">11:42 · This Device</div>319 </div>320 <div class="kebab">321 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>322 </div>323 </div>324 325 <div class="item">326 <div class="file-icon fi-green">327 <svg viewBox="0 0 24 24">328 <rect x="4" y="4" width="16" height="16" rx="3" fill="#18A05C"/>329 <path d="M8 4v16M16 4v16M4 12h16" stroke="#141418" stroke-width="2"/>330 </svg>331 </div>332 <div class="text">333 <div class="title">Interesting Sudoku Game</div>334 <div class="meta">11:42 · This Device</div>335 </div>336 <div class="kebab">337 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>338 </div>339 </div>340 341 <div class="item">342 <div class="file-icon fi-orange">343 <svg viewBox="0 0 24 24"><path d="M4 4h10l4 4v12a2 2 0 0 1-2 2H4z" fill="#FF8A3D"/></svg>344 </div>345 <div class="text">346 <div class="title">gh</div>347 <div class="meta">11:29 · Download</div>348 </div>349 <div class="kebab">350 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>351 </div>352 </div>353 354 <div class="item">355 <div class="file-icon fi-orange">356 <svg viewBox="0 0 24 24"><path d="M4 4h10l4 4v12a2 2 0 0 1-2 2H4z" fill="#FF8A3D"/></svg>357 </div>358 <div class="text">359 <div class="title">We cant help everyone but</div>360 <div class="meta">11:27 · Download</div>361 </div>362 <div class="kebab">363 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>364 </div>365 </div>366 367 <div class="item">368 <div class="file-icon fi-red">369 <svg viewBox="0 0 24 24"><path d="M4 4h10l4 4v12a2 2 0 0 1-2 2H4z" fill="#FF6B5A"/></svg>370 </div>371 <div class="text">372 <div class="title">Untitled Presentation (1)</div>373 <div class="meta">08:33 · Download</div>374 </div>375 <div class="kebab">376 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>377 </div>378 </div>379 380 <div class="item">381 <div class="file-icon fi-red">382 <svg viewBox="0 0 24 24"><path d="M4 4h10l4 4v12a2 2 0 0 1-2 2H4z" fill="#FF6B5A"/></svg>383 </div>384 <div class="text">385 <div class="title">Untitled Presentation</div>386 <div class="meta">08:07 · Download</div>387 </div>388 <div class="kebab">389 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>390 </div>391 </div>392 </div>393 394 <!-- Floating Action Button -->395 <button class="fab">396 <div class="plus">+</div>397 Create398 </button>399 400 <!-- Bottom navigation -->401 <div class="bottom-nav">402 <div class="nav-item active">403 <svg viewBox="0 0 24 24">404 <path d="M4 6h16v12H4zM7 9h10" />405 </svg>406 <div>Recent</div>407 </div>408 <div class="nav-item">409 <svg viewBox="0 0 24 24">410 <path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"/>411 </svg>412 <div>Files</div>413 </div>414 <div class="nav-item">415 <svg viewBox="0 0 24 24">416 <path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z"/>417 </svg>418 <div>Discover</div>419 </div>420 <div class="nav-item">421 <svg viewBox="0 0 24 24">422 <path d="M13 2l-4 9h5l-3 11 9-14h-6l3-6z"/>423 </svg>424 <div>WPS Pro</div>425 </div>426 </div>427 428 <!-- Home indicator -->429 <div class="home-indicator"></div>430</div>431</body>432</html>