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>Files - Dark UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #EDEDED;16 font-family: Arial, Helvetica, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 height: 96px;22 padding: 18px 32px;23 display: flex;24 justify-content: space-between;25 align-items: center;26 color: #FFFFFF;27 font-size: 36px;28 letter-spacing: 0.5px;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 26px;34 }35 .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #FFFFFF; stroke-width: 3; }36 37 /* Search bar */38 .searchbar {39 margin: 18px 28px 10px;40 background: #1E1E1E;41 border: 1px solid #2A2A2A;42 border-radius: 24px;43 height: 108px;44 display: flex;45 align-items: center;46 padding: 0 24px;47 gap: 22px;48 color: #CFCFCF;49 font-size: 36px;50 }51 .searchbar .menu, .searchbar .more {52 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;53 color: #BDBDBD;54 }55 .searchbar .placeholder { flex: 1; color: #BEBEBE; }56 57 /* Chips */58 .chips {59 display: flex;60 gap: 18px;61 padding: 14px 28px 0;62 }63 .chip {64 display: inline-flex;65 align-items: center;66 gap: 14px;67 padding: 20px 26px;68 border-radius: 18px;69 border: 1px solid #3A3A3A;70 background: #1A1A1A;71 color: #D7D7D7;72 font-size: 30px;73 }74 .chip .ico {75 width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;76 }77 78 /* Section title small */79 .section-note {80 margin: 28px 32px 12px;81 color: #9E9E9E;82 font-size: 26px;83 letter-spacing: 2px;84 }85 86 /* Apps row */87 .apps-row {88 display: flex;89 align-items: flex-start;90 gap: 42px;91 padding: 0 32px;92 }93 .app {94 width: 180px;95 text-align: center;96 color: #DADADA;97 font-size: 28px;98 }99 .app .circle {100 width: 110px; height: 110px; border-radius: 55px; margin: 0 auto 12px; background: #1F1F1F; border: 1px solid #3A3A3A;101 display: flex; align-items: center; justify-content: center;102 }103 .apps-row .grid-toggle {104 margin-left: auto;105 width: 64px; height: 64px; border: 1px solid #3A3A3A; border-radius: 12px; display: flex; align-items: center; justify-content: center;106 background: #1A1A1A;107 }108 109 /* Recent files header */110 .recent-title {111 margin: 36px 32px 10px;112 font-size: 34px;113 color: #EDEDED;114 }115 116 /* File list */117 .file-list { padding: 0 20px; }118 .file-item {119 display: flex;120 align-items: center;121 gap: 24px;122 padding: 24px 12px;123 border-top: 1px solid #2A2A2A;124 }125 .file-icon {126 width: 64px; height: 84px; border: 3px solid #7CD6E8; border-radius: 10px;127 }128 .file-info { flex: 1; }129 .file-name { font-size: 32px; color: #F0F0F0; margin-bottom: 6px; }130 .file-meta { font-size: 26px; color: #B0B0B0; }131 .file-actions {132 display: flex; flex-direction: column; gap: 14px; margin-right: 8px;133 }134 .action-btn {135 width: 56px; height: 56px; border: 1px solid #3A3A3A; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #1C1C1C;136 }137 .divider {138 margin: 16px 32px;139 border-top: 1px solid #2A2A2A;140 }141 142 /* Image row placeholder */143 .thumb {144 width: 108px; height: 108px;145 background: #E0E0E0; border: 1px solid #BDBDBD;146 display: flex; align-items: center; justify-content: center;147 color: #757575; font-size: 22px; text-align: center;148 border-radius: 8px;149 }150 .underline { text-decoration: underline; }151</style>152</head>153<body>154<div id="render-target">155 <!-- Status bar -->156 <div class="status-bar">157 <div>9:08</div>158 <div class="status-right">159 <div class="status-icon">160 <!-- Do Not Disturb icon -->161 <svg viewBox="0 0 24 24">162 <circle cx="12" cy="12" r="9" stroke="#FFFFFF" fill="none"/>163 <line x1="7" y1="12" x2="17" y2="12" stroke="#FFFFFF"/>164 </svg>165 </div>166 <div class="status-icon">167 <!-- Signal bars simplified -->168 <svg viewBox="0 0 24 24">169 <rect x="3" y="13" width="3" height="8" fill="#FFFFFF"/>170 <rect x="8" y="10" width="3" height="11" fill="#FFFFFF" opacity="0.75"/>171 <rect x="13" y="7" width="3" height="14" fill="#FFFFFF" opacity="0.6"/>172 <rect x="18" y="4" width="3" height="17" fill="#FFFFFF" opacity="0.45"/>173 </svg>174 </div>175 <div style="font-size:28px; color:#DADADA;">100%</div>176 <div class="status-icon">177 <!-- Battery icon -->178 <svg viewBox="0 0 28 24">179 <rect x="2" y="5" width="22" height="14" rx="2" ry="2" stroke="#FFFFFF"/>180 <rect x="24" y="9" width="3" height="6" fill="#FFFFFF"/>181 <rect x="4" y="7" width="18" height="10" fill="#FFFFFF"/>182 </svg>183 </div>184 </div>185 </div>186 187 <!-- Search bar -->188 <div class="searchbar">189 <div class="menu">190 <svg width="48" height="48" viewBox="0 0 24 24">191 <rect x="3" y="6" width="18" height="2" fill="#DADADA"/>192 <rect x="3" y="11" width="18" height="2" fill="#DADADA"/>193 <rect x="3" y="16" width="18" height="2" fill="#DADADA"/>194 </svg>195 </div>196 <div class="placeholder">Search this phone</div>197 <div class="more">198 <svg width="36" height="36" viewBox="0 0 24 24">199 <circle cx="12" cy="5" r="2" fill="#BDBDBD"/>200 <circle cx="12" cy="12" r="2" fill="#BDBDBD"/>201 <circle cx="12" cy="19" r="2" fill="#BDBDBD"/>202 </svg>203 </div>204 </div>205 206 <!-- Chips -->207 <div class="chips">208 <div class="chip">209 <div class="ico" style="background:#2A1E23;">210 <svg width="32" height="32" viewBox="0 0 24 24">211 <rect x="4" y="6" width="16" height="12" stroke="#FF7D9E" fill="none"/>212 <polyline points="4,6 12,12 20,6" fill="none" stroke="#FF7D9E"/>213 </svg>214 </div>215 <span>Images</span>216 </div>217 <div class="chip">218 <div class="ico" style="background:#231C2E;">219 <svg width="32" height="32" viewBox="0 0 24 24">220 <path d="M8 5v11.5a3.5 3.5 0 1 0 2-3.1V5" stroke="#B28BFF" fill="none"/>221 </svg>222 </div>223 <span>Audio</span>224 </div>225 <div class="chip">226 <div class="ico" style="background:#16261D;">227 <svg width="32" height="32" viewBox="0 0 24 24">228 <rect x="5" y="6" width="14" height="12" stroke="#7CF5A5" fill="none"/>229 <polygon points="10,9 15,12 10,15" fill="#7CF5A5"/>230 </svg>231 </div>232 <span>Videos</span>233 </div>234 <div class="chip">235 <div class="ico" style="background:#14282A;">236 <svg width="32" height="32" viewBox="0 0 24 24">237 <rect x="6" y="4" width="12" height="16" stroke="#78E6E6" fill="none"/>238 <line x1="8" y1="9" x2="16" y2="9" stroke="#78E6E6"/>239 <line x1="8" y1="12" x2="16" y2="12" stroke="#78E6E6"/>240 </svg>241 </div>242 <span>Documents</span>243 </div>244 </div>245 246 <!-- Browse files in other apps -->247 <div class="section-note">BROWSE FILES IN OTHER APPS</div>248 <div class="apps-row">249 <div class="app">250 <div class="circle">251 <svg width="64" height="64" viewBox="0 0 24 24">252 <circle cx="12" cy="9" r="4" stroke="#DADADA" fill="none"/>253 <rect x="5" y="14" width="14" height="7" rx="3" stroke="#DADADA" fill="none"/>254 </svg>255 </div>256 <div>Bug reports</div>257 </div>258 <div class="app">259 <div class="circle">260 <svg width="64" height="64" viewBox="0 0 24 24">261 <polygon points="12,4 20,18 4,18" fill="#39A853"/>262 <polygon points="12,4 20,18 4,18" fill="none" stroke="#DADADA"/>263 </svg>264 </div>265 <div>Drive</div>266 <div style="color:#8D8D8D; font-size:22px;">dbwscratch.test.i...</div>267 </div>268 <div class="app">269 <div class="circle">270 <svg width="64" height="64" viewBox="0 0 24 24">271 <polygon points="12,4 20,18 4,18" fill="#39A853"/>272 <polygon points="12,4 20,18 4,18" fill="none" stroke="#DADADA"/>273 </svg>274 </div>275 <div>Drive</div>276 <div style="color:#8D8D8D; font-size:22px;">fabioteixeira0012...</div>277 </div>278 <div class="app">279 <div class="circle">280 <svg width="64" height="64" viewBox="0 0 24 24">281 <polygon points="12,3 19,10 12,17 5,10" fill="#3D8BFF"/>282 <polygon points="12,3 19,10 12,17 5,10" fill="none" stroke="#DADADA"/>283 </svg>284 </div>285 <div>Dropbox</div>286 </div>287 <div class="grid-toggle">288 <svg width="40" height="40" viewBox="0 0 24 24">289 <rect x="3" y="3" width="7" height="7" fill="#DADADA"/>290 <rect x="14" y="3" width="7" height="7" fill="#DADADA"/>291 <rect x="3" y="14" width="7" height="7" fill="#DADADA"/>292 <rect x="14" y="14" width="7" height="7" fill="#DADADA"/>293 </svg>294 </div>295 </div>296 297 <!-- Recent files -->298 <div class="recent-title">Recent files</div>299 <div class="file-list">300 <div class="file-item">301 <div class="file-icon"></div>302 <div class="file-info">303 <div class="file-name">screenshot.txt</div>304 <div class="file-meta">Nov 23, 567 kB, TXT document</div>305 </div>306 <div class="file-actions">307 <div class="action-btn">308 <!-- expand icon -->309 <svg width="28" height="28" viewBox="0 0 24 24">310 <rect x="4" y="4" width="8" height="8" stroke="#DADADA" fill="none"/>311 <rect x="12" y="12" width="8" height="8" stroke="#DADADA" fill="none"/>312 </svg>313 </div>314 <div class="action-btn">315 <!-- open/external -->316 <svg width="28" height="28" viewBox="0 0 24 24">317 <path d="M14 4h6v6" stroke="#DADADA" fill="none"/>318 <path d="M20 4l-9 9" stroke="#DADADA" fill="none"/>319 <rect x="4" y="10" width="10" height="10" stroke="#DADADA" fill="none"/>320 </svg>321 </div>322 </div>323 </div>324 325 <div class="divider"></div>326 327 <div class="file-item">328 <div class="file-icon"></div>329 <div class="file-info">330 <div class="file-name">actuation_result.txt</div>331 <div class="file-meta">Nov 23, 8 B, TXT document</div>332 </div>333 <div class="file-actions">334 <div class="action-btn">335 <svg width="28" height="28" viewBox="0 0 24 24">336 <rect x="4" y="4" width="8" height="8" stroke="#DADADA" fill="none"/>337 <rect x="12" y="12" width="8" height="8" stroke="#DADADA" fill="none"/>338 </svg>339 </div>340 <div class="action-btn">341 <svg width="28" height="28" viewBox="0 0 24 24">342 <path d="M14 4h6v6" stroke="#DADADA" fill="none"/>343 <path d="M20 4l-9 9" stroke="#DADADA" fill="none"/>344 <rect x="4" y="10" width="10" height="10" stroke="#DADADA" fill="none"/>345 </svg>346 </div>347 </div>348 </div>349 350 <div class="file-item">351 <div class="file-icon"></div>352 <div class="file-info">353 <div class="file-name">agents.txt</div>354 <div class="file-meta">Nov 23, 1.15 kB, TXT document</div>355 </div>356 <div class="file-actions">357 <div class="action-btn">358 <svg width="28" height="28" viewBox="0 0 24 24">359 <rect x="4" y="4" width="8" height="8" stroke="#DADADA" fill="none"/>360 <rect x="12" y="12" width="8" height="8" stroke="#DADADA" fill="none"/>361 </svg>362 </div>363 <div class="action-btn">364 <svg width="28" height="28" viewBox="0 0 24 24">365 <path d="M14 4h6v6" stroke="#DADADA" fill="none"/>366 <path d="M20 4l-9 9" stroke="#DADADA" fill="none"/>367 <rect x="4" y="10" width="10" height="10" stroke="#DADADA" fill="none"/>368 </svg>369 </div>370 </div>371 </div>372 373 <div class="file-item">374 <div class="file-icon"></div>375 <div class="file-info">376 <div class="file-name">os_info.txt</div>377 <div class="file-meta">Nov 23, 32 B, TXT document</div>378 </div>379 <div class="file-actions">380 <div class="action-btn">381 <svg width="28" height="28" viewBox="0 0 24 24">382 <rect x="4" y="4" width="8" height="8" stroke="#DADADA" fill="none"/>383 <rect x="12" y="12" width="8" height="8" stroke="#DADADA" fill="none"/>384 </svg>385 </div>386 <div class="action-btn">387 <svg width="28" height="28" viewBox="0 0 24 24">388 <path d="M14 4h6v6" stroke="#DADADA" fill="none"/>389 <path d="M20 4l-9 9" stroke="#DADADA" fill="none"/>390 <rect x="4" y="10" width="10" height="10" stroke="#DADADA" fill="none"/>391 </svg>392 </div>393 </div>394 </div>395 396 <div class="file-item">397 <div class="file-icon"></div>398 <div class="file-info">399 <div class="file-name">Diy tool kit (1)</div>400 <div class="file-meta">Nov 22, 12.59 MB, BIN file</div>401 </div>402 <div class="file-actions">403 <div class="action-btn">404 <svg width="28" height="28" viewBox="0 0 24 24">405 <rect x="4" y="4" width="8" height="8" stroke="#DADADA" fill="none"/>406 <rect x="12" y="12" width="8" height="8" stroke="#DADADA" fill="none"/>407 </svg>408 </div>409 <div class="action-btn">410 <svg width="28" height="28" viewBox="0 0 24 24">411 <path d="M14 4h6v6" stroke="#DADADA" fill="none"/>412 <path d="M20 4l-9 9" stroke="#DADADA" fill="none"/>413 <rect x="4" y="10" width="10" height="10" stroke="#DADADA" fill="none"/>414 </svg>415 </div>416 </div>417 </div>418 419 <div class="file-item">420 <div class="file-icon"></div>421 <div class="file-info">422 <div class="file-name">Diy tool kit (1).bin</div>423 <div class="file-meta">Nov 22, 12.59 MB, BIN file</div>424 </div>425 <div class="file-actions">426 <div class="action-btn">427 <svg width="28" height="28" viewBox="0 0 24 24">428 <rect x="4" y="4" width="8" height="8" stroke="#DADADA" fill="none"/>429 <rect x="12" y="12" width="8" height="8" stroke="#DADADA" fill="none"/>430 </svg>431 </div>432 <div class="action-btn">433 <svg width="28" height="28" viewBox="0 0 24 24">434 <path d="M14 4h6v6" stroke="#DADADA" fill="none"/>435 <path d="M20 4l-9 9" stroke="#DADADA" fill="none"/>436 <rect x="4" y="10" width="10" height="10" stroke="#DADADA" fill="none"/>437 </svg>438 </div>439 </div>440 </div>441 442 <div class="file-item">443 <div class="file-icon"></div>444 <div class="file-info">445 <div class="file-name">Diy tool kit.bin</div>446 <div class="file-meta">Nov 22, 12.59 MB, BIN file</div>447 </div>448 <div class="file-actions">449 <div class="action-btn">450 <svg width="28" height="28" viewBox="0 0 24 24">451 <rect x="4" y="4" width="8" height="8" stroke="#DADADA" fill="none"/>452 <rect x="12" y="12" width="8" height="8" stroke="#DADADA" fill="none"/>453 </svg>454 </div>455 <div class="action-btn">456 <svg width="28" height="28" viewBox="0 0 24 24">457 <path d="M14 4h6v6" stroke="#DADADA" fill="none"/>458 <path d="M20 4l-9 9" stroke="#DADADA" fill="none"/>459 <rect x="4" y="10" width="10" height="10" stroke="#DADADA" fill="none"/>460 </svg>461 </div>462 </div>463 </div>464 465 <!-- Image preview row -->466 <div class="file-item">467 <div class="thumb">[IMG: Fitbit share]</div>468 <div class="file-info">469 <div class="file-name underline">fitbitshare_1272361138.PNG</div>470 <div class="file-meta">Nov 21, PNG image</div>471 </div>472 <div class="file-actions">473 <div class="action-btn">474 <svg width="28" height="28" viewBox="0 0 24 24">475 <rect x="4" y="4" width="8" height="8" stroke="#DADADA" fill="none"/>476 <rect x="12" y="12" width="8" height="8" stroke="#DADADA" fill="none"/>477 </svg>478 </div>479 <div class="action-btn">480 <svg width="28" height="28" viewBox="0 0 24 24">481 <path d="M14 4h6v6" stroke="#DADADA" fill="none"/>482 <path d="M20 4l-9 9" stroke="#DADADA" fill="none"/>483 <rect x="4" y="10" width="10" height="10" stroke="#DADADA" fill="none"/>484 </svg>485 </div>486 </div>487 </div>488 </div>489</div>490</body>491</html>