GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Files - Dark UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #1f1a17;14 color: #E8E0D7;15 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16 border-radius: 36px;17 box-shadow: 0 20px 60px rgba(0,0,0,0.35);18 }19 20 .statusbar {21 height: 92px;22 padding: 24px 36px 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #E8E0D7;27 font-size: 42px;28 letter-spacing: 0.5px;29 }30 .status-icons { display: flex; gap: 24px; align-items: center; }31 .icon { width: 40px; height: 40px; display: inline-block; }32 .icon svg { width: 100%; height: 100%; }33 34 .search-row {35 margin: 18px 36px 0 36px;36 display: flex;37 align-items: center;38 gap: 16px;39 }40 .search {41 flex: 1;42 height: 112px;43 background: #2A2420;44 border: 1px solid #4A3F37;45 border-radius: 28px;46 display: flex;47 align-items: center;48 padding: 0 24px;49 box-sizing: border-box;50 }51 .search .placeholder {52 flex: 1;53 color: #B9ADA3;54 font-size: 40px;55 }56 .chips {57 margin: 28px 36px 0 36px;58 display: flex;59 gap: 22px;60 }61 .chip {62 height: 98px;63 padding: 0 28px;64 border-radius: 24px;65 border: 2px solid #3B3430;66 display: flex;67 align-items: center;68 gap: 18px;69 color: #E8E0D7;70 font-size: 36px;71 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);72 }73 .chip .mini {74 width: 52px;75 height: 52px;76 border-radius: 12px;77 display: flex;78 align-items: center;79 justify-content: center;80 border: 2px solid currentColor;81 }82 .chip.images { color: #F3A58A; border-color: #544039; }83 .chip.audio { color: #B58CFF; border-color: #4C4355; }84 .chip.videos { color: #85D397; border-color: #3D4A42; }85 .chip.docs { color: #67D1E7; border-color: #3A4749; }86 87 .section-title {88 margin: 40px 36px 18px 36px;89 color: #C9BEB2;90 font-size: 34px;91 letter-spacing: 2px;92 text-transform: uppercase;93 }94 .apps-row {95 margin: 0 36px;96 display: flex;97 gap: 80px;98 align-items: flex-start;99 }100 .app-item {101 width: 180px;102 text-align: center;103 }104 .app-icon {105 width: 120px; height: 120px;106 border-radius: 60px;107 background: #2E2723;108 border: 1px solid #4A3F37;109 margin: 0 auto 16px;110 display: flex; align-items: center; justify-content: center;111 }112 .app-label { font-size: 34px; color: #E8E0D7; }113 114 .files-header {115 margin: 36px 36px 16px 36px;116 display: flex;117 align-items: center;118 justify-content: space-between;119 }120 .files-header .title { font-size: 42px; color: #E8E0D7; }121 .grid-toggle {122 width: 56px; height: 56px;123 border-radius: 12px;124 background: #2A2420;125 border: 1px solid #4A3F37;126 display: flex; align-items: center; justify-content: center;127 }128 129 .file-list { margin: 0 0 0 0; }130 .file-row {131 padding: 22px 36px;132 display: grid;133 grid-template-columns: 80px 1fr 120px;134 align-items: center;135 column-gap: 28px;136 }137 .file-icon, .thumb {138 width: 80px; height: 80px;139 border-radius: 16px;140 background: #2C2622;141 border: 1px solid #4A3F37;142 display: flex; align-items: center; justify-content: center;143 color: #A5DCE8;144 }145 .file-meta { display: flex; flex-direction: column; gap: 8px; }146 .file-name { font-size: 40px; color: #E8E0D7; }147 .file-info { font-size: 32px; color: #B9ADA3; }148 .file-actions {149 justify-self: end;150 display: flex;151 flex-direction: column;152 gap: 14px;153 }154 .action-btn {155 width: 60px; height: 60px;156 border-radius: 16px;157 background: #2A2420;158 border: 1px solid #4A3F37;159 display: flex; align-items: center; justify-content: center;160 }161 .divider {162 margin: 12px 36px;163 height: 2px;164 background: #3D352F;165 }166 167 /* Image placeholder style per instruction */168 .image-placeholder {169 width: 80px; height: 80px;170 background: #E0E0E0;171 border: 1px solid #BDBDBD;172 border-radius: 16px;173 display: flex; align-items: center; justify-content: center;174 color: #757575; font-size: 22px; text-align: center; padding: 6px;175 box-sizing: border-box;176 }177</style>178</head>179<body>180<div id="render-target">181 182 <div class="statusbar">183 <div>9:14</div>184 <div class="status-icons">185 <!-- Wi-Fi icon -->186 <span class="icon">187 <svg viewBox="0 0 24 24" fill="#E8E0D7">188 <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-6.5-7.2a12 12 0 0 1 13 0l-2 2.1a8.5 8.5 0 0 0-9 0l-2-2.1zm3.7 3.7a7 7 0 0 1 8.6 0l-2 2a4.5 4.5 0 0 0-4.6 0l-2-2z"/>189 </svg>190 </span>191 <!-- Battery icon -->192 <span class="icon">193 <svg viewBox="0 0 24 24" fill="none" stroke="#E8E0D7" stroke-width="2">194 <rect x="3" y="6" width="16" height="12" rx="2" />195 <rect x="19" y="10" width="2" height="4" fill="#E8E0D7"/>196 <rect x="5" y="8" width="10" height="8" fill="#E8E0D7"/>197 </svg>198 </span>199 </div>200 </div>201 202 <div class="search-row">203 <div class="icon" style="width:64px;height:64px;">204 <!-- Hamburger -->205 <svg viewBox="0 0 24 24" stroke="#E8E0D7" stroke-width="2">206 <path d="M3 6h18M3 12h18M3 18h12"/>207 </svg>208 </div>209 <div class="search">210 <div class="placeholder">Search this phone</div>211 <!-- Vertical dots -->212 <div class="icon" style="width:52px;height:52px;">213 <svg viewBox="0 0 24 24" fill="#E8E0D7">214 <circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/>215 </svg>216 </div>217 </div>218 </div>219 220 <div class="chips">221 <div class="chip images">222 <div class="mini">223 <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">224 <rect x="4" y="6" width="16" height="12" rx="2"/>225 <path d="M6 16l4-4 3 3 3-2 2 3"/>226 </svg>227 </div>228 <div>Images</div>229 </div>230 <div class="chip audio">231 <div class="mini">232 <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">233 <path d="M8 6v9a3 3 0 1 0 2 3V9h6v6a3 3 0 1 0 2 3V6H8z"/>234 </svg>235 </div>236 <div>Audio</div>237 </div>238 <div class="chip videos">239 <div class="mini">240 <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">241 <rect x="4" y="5" width="16" height="14" rx="2"/>242 <path d="M10 9l6 3-6 3V9z"/>243 </svg>244 </div>245 <div>Videos</div>246 </div>247 <div class="chip docs">248 <div class="mini">249 <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">250 <path d="M6 4h9l3 3v13H6z"/>251 <path d="M15 4v4h4"/>252 </svg>253 </div>254 <div>Documents</div>255 </div>256 </div>257 258 <div class="section-title">BROWSE FILES IN OTHER APPS</div>259 <div class="apps-row">260 <div class="app-item">261 <div class="app-icon">262 <svg viewBox="0 0 24 24" fill="none" stroke="#E8E0D7" stroke-width="2">263 <rect x="4" y="6" width="16" height="12" rx="2"/>264 <circle cx="9" cy="10" r="2" fill="#E8E0D7"/>265 <path d="M6 16l4-3 3 2 3-1 2 2"/>266 </svg>267 </div>268 <div class="app-label">Gallery</div>269 </div>270 <div class="app-item">271 <div class="app-icon">272 <svg viewBox="0 0 24 24" fill="none" stroke="#E8E0D7" stroke-width="2">273 <path d="M7 6v10a3 3 0 1 0 2 3V9h8v7a3 3 0 1 0 2 3V6H7z"/>274 </svg>275 </div>276 <div class="app-label">Photos</div>277 </div>278 <div class="app-item">279 <div class="app-icon">280 <svg viewBox="0 0 24 24" fill="none" stroke="#E8E0D7" stroke-width="2">281 <rect x="5" y="5" width="14" height="14" rx="3"/>282 <path d="M8 8h8v8H8z"/>283 </svg>284 </div>285 <div class="app-label">Bug reports</div>286 </div>287 <div class="app-item">288 <div class="app-icon">289 <svg viewBox="0 0 24 24" fill="none" stroke="#E8E0D7" stroke-width="2">290 <path d="M12 3l3 4h4l-3 4 3 4h-4l-3 4-3-4H5l3-4-3-4h4z"/>291 </svg>292 </div>293 <div class="app-label">System traces</div>294 </div>295 </div>296 297 <div class="files-header">298 <div class="title">Recent files</div>299 <div class="grid-toggle">300 <svg viewBox="0 0 24 24" fill="#E8E0D7">301 <rect x="3" y="3" width="7" height="7" rx="1"/>302 <rect x="14" y="3" width="7" height="7" rx="1"/>303 <rect x="3" y="14" width="7" height="7" rx="1"/>304 <rect x="14" y="14" width="7" height="7" rx="1"/>305 </svg>306 </div>307 </div>308 309 <div class="file-list">310 311 <!-- screenshot.txt -->312 <div class="file-row">313 <div class="file-icon">314 <svg viewBox="0 0 24 24" fill="none" stroke="#67D1E7" stroke-width="2">315 <path d="M6 4h9l3 3v13H6z"/>316 <path d="M15 4v4h4"/>317 </svg>318 </div>319 <div class="file-meta">320 <div class="file-name">screenshot.txt</div>321 <div class="file-info">Nov 10, 140 kB, TXT document</div>322 </div>323 <div class="file-actions">324 <div class="action-btn">325 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">326 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>327 </svg>328 </div>329 <div class="action-btn">330 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">331 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>332 </svg>333 </div>334 </div>335 </div>336 <div class="divider"></div>337 338 <!-- actuation_result.txt -->339 <div class="file-row">340 <div class="file-icon">341 <svg viewBox="0 0 24 24" fill="none" stroke="#67D1E7" stroke-width="2">342 <path d="M6 4h9l3 3v13H6z"/>343 <path d="M15 4v4h4"/>344 </svg>345 </div>346 <div class="file-meta">347 <div class="file-name">actuation_result.txt</div>348 <div class="file-info">Nov 10, 8 B, TXT document</div>349 </div>350 <div class="file-actions">351 <div class="action-btn">352 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">353 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>354 </svg>355 </div>356 <div class="action-btn">357 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">358 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>359 </svg>360 </div>361 </div>362 </div>363 <div class="divider"></div>364 365 <!-- os_info.txt -->366 <div class="file-row">367 <div class="file-icon">368 <svg viewBox="0 0 24 24" fill="none" stroke="#67D1E7" stroke-width="2">369 <path d="M6 4h9l3 3v13H6z"/>370 <path d="M15 4v4h4"/>371 </svg>372 </div>373 <div class="file-meta">374 <div class="file-name">os_info.txt</div>375 <div class="file-info">Nov 10, 32 B, TXT document</div>376 </div>377 <div class="file-actions">378 <div class="action-btn">379 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">380 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>381 </svg>382 </div>383 <div class="action-btn">384 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">385 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>386 </svg>387 </div>388 </div>389 </div>390 <div class="divider"></div>391 392 <!-- agents.txt -->393 <div class="file-row">394 <div class="file-icon">395 <svg viewBox="0 0 24 24" fill="none" stroke="#67D1E7" stroke-width="2">396 <path d="M6 4h9l3 3v13H6z"/>397 <path d="M15 4v4h4"/>398 </svg>399 </div>400 <div class="file-meta">401 <div class="file-name">agents.txt</div>402 <div class="file-info">Nov 10, 1.15 kB, TXT document</div>403 </div>404 <div class="file-actions">405 <div class="action-btn">406 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">407 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>408 </svg>409 </div>410 <div class="action-btn">411 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">412 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>413 </svg>414 </div>415 </div>416 </div>417 418 <!-- fitbitshare images -->419 <div class="divider"></div>420 <div class="file-row">421 <div class="image-placeholder">[IMG: App screenshot]</div>422 <div class="file-meta">423 <div class="file-name">fitbitshare_2123586381.PNG</div>424 <div class="file-info">Oct 30, 93.48 kB, PNG image</div>425 </div>426 <div class="file-actions">427 <div class="action-btn">428 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">429 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>430 </svg>431 </div>432 <div class="action-btn">433 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">434 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>435 </svg>436 </div>437 </div>438 </div>439 440 <div class="divider"></div>441 <div class="file-row">442 <div class="image-placeholder">[IMG: App screenshot]</div>443 <div class="file-meta">444 <div class="file-name">fitbitshare_2123101703.PNG</div>445 <div class="file-info">Oct 30, 92.77 kB, PNG image</div>446 </div>447 <div class="file-actions">448 <div class="action-btn">449 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">450 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>451 </svg>452 </div>453 <div class="action-btn">454 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">455 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>456 </svg>457 </div>458 </div>459 </div>460 461 <div class="divider"></div>462 <div class="file-row">463 <div class="image-placeholder">[IMG: App screenshot]</div>464 <div class="file-meta">465 <div class="file-name">fitbitshare_2123014230.PNG</div>466 <div class="file-info">Oct 30, 92.77 kB, PNG image</div>467 </div>468 <div class="file-actions">469 <div class="action-btn">470 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">471 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>472 </svg>473 </div>474 <div class="action-btn">475 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">476 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>477 </svg>478 </div>479 </div>480 </div>481 482 <div class="divider"></div>483 <div class="file-row">484 <div class="image-placeholder">[IMG: App screenshot]</div>485 <div class="file-meta">486 <div class="file-name">fitbitshare_2122912072.PNG</div>487 <div class="file-info">Oct 30, 93.30 kB, PNG image</div>488 </div>489 <div class="file-actions">490 <div class="action-btn">491 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">492 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>493 </svg>494 </div>495 <div class="action-btn">496 <svg viewBox="0 0 24 24" stroke="#E8E0D7" fill="none" stroke-width="2">497 <path d="M7 7l4-4M17 7l4-4M7 17l-4 4M17 17l4 4"/>498 </svg>499 </div>500 </div>501 </div>502 503 </div>504 505</div>506</body>507</html>