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>Local Files UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #424242;15 color: #FFFFFF;16 }17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 96px;24 background: #2F2F2F;25 display: flex;26 align-items: center;27 padding: 0 28px;28 box-sizing: border-box;29 color: #fff;30 font-weight: 600;31 letter-spacing: 1px;32 }33 .status-time {34 font-size: 40px;35 }36 .status-icons {37 margin-left: auto;38 display: flex;39 align-items: center;40 gap: 28px;41 }42 /* App bar */43 .app-bar {44 position: absolute;45 top: 96px;46 left: 0;47 width: 1080px;48 height: 170px;49 background: #3A3A3A;50 display: flex;51 align-items: center;52 padding: 0 28px;53 box-sizing: border-box;54 color: #fff;55 }56 .app-title {57 font-size: 56px;58 font-weight: 600;59 margin-left: 24px;60 }61 .app-title small { font-weight: 400; font-size: 48px; opacity: .9; }62 .app-actions {63 margin-left: auto;64 display: flex;65 align-items: center;66 gap: 36px;67 }68 .icon-btn svg { width: 56px; height: 56px; fill: #E0E0E0; }69 .nav-icon svg { width: 64px; height: 64px; fill: #E0E0E0; }70 /* Breadcrumbs */71 .breadcrumbs {72 position: absolute;73 top: 266px;74 left: 0;75 width: 1080px;76 height: 92px;77 background: #4A4A4A;78 display: flex;79 align-items: center;80 padding: 0 28px;81 box-sizing: border-box;82 color: #D0D0D0;83 font-size: 36px;84 gap: 18px;85 }86 .crumb {87 background: #5A5A5A;88 padding: 10px 22px;89 border-radius: 8px;90 }91 .crumb.active {92 background: #616161;93 color: #FFFFFF;94 }95 /* List area */96 .list {97 position: absolute;98 top: 358px;99 left: 0;100 right: 0;101 bottom: 120px;102 overflow: hidden;103 padding-bottom: 80px;104 }105 .scroll {106 height: 100%;107 overflow-y: auto;108 padding: 0 0 140px 0;109 }110 .item {111 position: relative;112 display: flex;113 align-items: center;114 padding: 26px 28px;115 gap: 28px;116 box-sizing: border-box;117 height: 180px;118 border-bottom: 1px solid rgba(255,255,255,0.04);119 }120 .folder-circle {121 width: 120px;122 height: 120px;123 background: #FFA000;124 border-radius: 50%;125 display: flex;126 align-items: center;127 justify-content: center;128 flex: 0 0 120px;129 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);130 }131 .folder-circle svg { width: 72px; height: 72px; fill: #FFFFFF; }132 .item-text {133 flex: 1;134 min-width: 0;135 }136 .title {137 font-size: 48px;138 font-weight: 500;139 color: #FFFFFF;140 white-space: nowrap;141 overflow: hidden;142 text-overflow: ellipsis;143 line-height: 1.2;144 margin-bottom: 10px;145 }146 .subtitle {147 font-size: 30px;148 color: #BDBDBD;149 }150 .star {151 width: 54px;152 height: 54px;153 margin-left: 18px;154 opacity: 0.6;155 }156 /* Floating action button */157 .fab {158 position: absolute;159 right: 44px;160 bottom: 232px;161 width: 140px;162 height: 140px;163 background: #616161;164 border-radius: 50%;165 display: flex;166 align-items: center;167 justify-content: center;168 box-shadow: 0 6px 16px rgba(0,0,0,0.4);169 }170 .fab svg { width: 72px; height: 72px; fill: #EDEDED; }171 /* Bottom gesture bar */172 .gesture {173 position: absolute;174 bottom: 24px;175 left: 50%;176 transform: translateX(-50%);177 width: 360px;178 height: 12px;179 background: #E8E8E8;180 border-radius: 12px;181 opacity: 0.9;182 }183</style>184</head>185<body>186<div id="render-target">187 <!-- Status Bar -->188 <div class="status-bar">189 <div class="status-time">11:09</div>190 <div class="status-icons">191 <!-- WiFi -->192 <svg viewBox="0 0 24 24">193 <path d="M12 20.5l-2-2c1.1-1.1 2.9-1.1 4 0l-2 2zm6-6c-3.3-3.3-8.7-3.3-12 0l-1.8-1.8c4.3-4.3 11.3-4.3 15.6 0L18 14.5zm3.6-3.6C16.9 5.2 7.1 5.2 2.4 10l-1.8-1.8C6.3 2.5 17.7 2.5 23.4 8.2L21.6 10.9z" />194 </svg>195 <!-- Battery -->196 <svg viewBox="0 0 24 24">197 <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#E0E0E0"></rect>198 <rect x="3.8" y="8.8" width="12" height="6.4" fill="#76FF03"></rect>199 <rect x="20" y="10" width="2" height="4" fill="#E0E0E0"></rect>200 </svg>201 </div>202 </div>203 204 <!-- App Bar -->205 <div class="app-bar">206 <div class="nav-icon">207 <svg viewBox="0 0 24 24">208 <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"></path>209 </svg>210 </div>211 <div class="app-title">Local Files <small>▼</small></div>212 <div class="app-actions">213 <div class="icon-btn">214 <svg viewBox="0 0 24 24">215 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20l-6-6zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>216 </svg>217 </div>218 <div class="icon-btn">219 <svg viewBox="0 0 24 24">220 <circle cx="12" cy="5" r="2"></circle>221 <circle cx="12" cy="12" r="2"></circle>222 <circle cx="12" cy="19" r="2"></circle>223 </svg>224 </div>225 </div>226 </div>227 228 <!-- Breadcrumbs -->229 <div class="breadcrumbs">230 <span class="crumb">/</span>231 <span style="opacity:0.6;">›</span>232 <span class="crumb active">sdcard</span>233 </div>234 235 <!-- List -->236 <div class="list">237 <div class="scroll">238 239 <div class="item">240 <div class="folder-circle">241 <svg viewBox="0 0 24 24">242 <path d="M10 4l2 2h8v12H4V4h6z" />243 </svg>244 </div>245 <div class="item-text">246 <div class="title">Alarms</div>247 <div class="subtitle">Sep 20, 2022 00:04</div>248 </div>249 <svg class="star" viewBox="0 0 24 24">250 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>251 </svg>252 </div>253 254 <div class="item">255 <div class="folder-circle">256 <svg viewBox="0 0 24 24">257 <path d="M10 4l2 2h8v12H4V4h6z" />258 </svg>259 </div>260 <div class="item-text">261 <div class="title">Android (3)</div>262 <div class="subtitle">Sep 20, 2022 00:04</div>263 </div>264 <svg class="star" viewBox="0 0 24 24">265 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>266 </svg>267 </div>268 269 <div class="item">270 <div class="folder-circle">271 <svg viewBox="0 0 24 24">272 <path d="M10 4l2 2h8v12H4V4h6z" />273 </svg>274 </div>275 <div class="item-text">276 <div class="title">Audiobooks</div>277 <div class="subtitle">Sep 20, 2022 00:04</div>278 </div>279 <svg class="star" viewBox="0 0 24 24">280 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>281 </svg>282 </div>283 284 <div class="item">285 <div class="folder-circle">286 <svg viewBox="0 0 24 24">287 <path d="M10 4l2 2h8v12H4V4h6z" />288 </svg>289 </div>290 <div class="item-text">291 <div class="title">Books (3)</div>292 <div class="subtitle">Jul 5, 2023 15:57</div>293 </div>294 <svg class="star" viewBox="0 0 24 24">295 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>296 </svg>297 </div>298 299 <div class="item">300 <div class="folder-circle">301 <svg viewBox="0 0 24 24">302 <path d="M10 4l2 2h8v12H4V4h6z" />303 </svg>304 </div>305 <div class="item-text">306 <div class="title">com.google.intelligence.dbw.showcase (1)</div>307 <div class="subtitle">Jun 8, 2023 15:14</div>308 </div>309 <svg class="star" viewBox="0 0 24 24">310 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>311 </svg>312 </div>313 314 <div class="item">315 <div class="folder-circle">316 <svg viewBox="0 0 24 24">317 <path d="M10 4l2 2h8v12H4V4h6z" />318 </svg>319 </div>320 <div class="item-text">321 <div class="title">DCIM (2)</div>322 <div class="subtitle">Sep 23, 2023 01:10</div>323 </div>324 <svg class="star" viewBox="0 0 24 24">325 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>326 </svg>327 </div>328 329 <div class="item">330 <div class="folder-circle">331 <svg viewBox="0 0 24 24">332 <path d="M10 4l2 2h8v12H4V4h6z" />333 </svg>334 </div>335 <div class="item-text">336 <div class="title">Documents (2)</div>337 <div class="subtitle">Oct 30, 2023 09:59</div>338 </div>339 <svg class="star" viewBox="0 0 24 24">340 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>341 </svg>342 </div>343 344 <div class="item">345 <div class="folder-circle">346 <svg viewBox="0 0 24 24">347 <path d="M10 4l2 2h8v12H4V4h6z" />348 </svg>349 </div>350 <div class="item-text">351 <div class="title">Download (12)</div>352 <div class="subtitle">Nov 17, 2023 07:49</div>353 </div>354 <svg class="star" viewBox="0 0 24 24">355 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>356 </svg>357 </div>358 359 <div class="item">360 <div class="folder-circle">361 <svg viewBox="0 0 24 24">362 <path d="M10 4l2 2h8v12H4V4h6z" />363 </svg>364 </div>365 <div class="item-text">366 <div class="title">Fonts</div>367 <div class="subtitle">Jul 7, 2023 09:28</div>368 </div>369 <svg class="star" viewBox="0 0 24 24">370 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>371 </svg>372 </div>373 374 <div class="item">375 <div class="folder-circle">376 <svg viewBox="0 0 24 24">377 <path d="M10 4l2 2h8v12H4V4h6z" />378 </svg>379 </div>380 <div class="item-text">381 <div class="title">Movies (1)</div>382 <div class="subtitle">Sep 20, 2022 00:04</div>383 </div>384 <svg class="star" viewBox="0 0 24 24">385 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>386 </svg>387 </div>388 389 <div class="item">390 <div class="folder-circle">391 <svg viewBox="0 0 24 24">392 <path d="M10 4l2 2h8v12H4V4h6z" />393 </svg>394 </div>395 <div class="item-text">396 <div class="title">Music (1)</div>397 <div class="subtitle">Sep 20, 2022 00:04</div>398 </div>399 <svg class="star" viewBox="0 0 24 24">400 <path fill="#BDBDBD" d="M12 17.3l-5.4 3.3 1.6-6.1L3 10l6.2-.5L12 4l2.8 5.5L21 10l-5.2 4.5 1.6 6.1z" fill-opacity="0" stroke="#BDBDBD" stroke-width="1.5"/>401 </svg>402 </div>403 404 </div>405 </div>406 407 <!-- Floating action button -->408 <div class="fab">409 <svg viewBox="0 0 24 24">410 <path d="M6 4h6a3 3 0 0 1 3 3v11H6V4z" />411 <path d="M12 4h6v14h-6" opacity="0.85"/>412 <rect x="7" y="8" width="10" height="1.6" fill="#EDEDED"></rect>413 </svg>414 </div>415 416 <!-- Bottom gesture bar -->417 <div class="gesture"></div>418</div>419</body>420</html>