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; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #221D1A; color: #E8DCCF;12 }13 .status-bar {14 height: 96px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; color: #F4EFE8;15 font-weight: 600; letter-spacing: 0.5px; font-size: 42px;16 }17 .status-icons { display: flex; align-items: center; gap: 26px; }18 .icon {19 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;20 color: #F4EFE8;21 }22 .search-bar {23 margin: 12px 24px 8px 24px; background: #2A2421; border-radius: 28px;24 height: 120px; display: flex; align-items: center; padding: 0 32px; box-shadow: 0 8px 16px rgba(0,0,0,0.35);25 }26 .search-text { flex: 1; font-size: 44px; color: #D9CFC3; }27 .divider { height: 1px; background: #4E463F; margin: 26px 24px; }28 .list { padding-top: 12px; }29 .file-item {30 display: flex; align-items: center; gap: 28px; padding: 18px 24px;31 }32 .left-thumb {33 width: 92px; height: 92px; border-radius: 14px; border: 1px solid #3A312B; display: flex; align-items: center; justify-content: center;34 color: #B7AAA1; background: #251F1B;35 }36 .thumb-image {37 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;38 }39 .pdf-pill {40 border-radius: 10px; background: #F28C8C; color: #4A2E2E; font-weight: 700;41 }42 .file-info { flex: 1; }43 .file-title { font-size: 48px; line-height: 1.25; font-weight: 600; color: #EFE5DA; }44 .file-meta { font-size: 32px; color: #B7AAA1; margin-top: 8px; }45 .right-actions { display: flex; flex-direction: column; gap: 20px; }46 .action-btn {47 width: 56px; height: 56px; border-radius: 12px; background: #3A322C; display: flex; align-items: center; justify-content: center;48 }49 /* Simple SVG styles */50 svg { fill: none; stroke: #F4EFE8; stroke-width: 6; }51 .hamburger svg { stroke-width: 10; }52 .ellipsis svg { stroke-width: 10; }53 .expand svg { stroke-width: 8; }54 /* Progress bar at bottom item */55 .progress-bar {56 height: 18px; background: rgba(255,255,255,0.2); border-radius: 10px; overflow: hidden; margin-top: 16px; width: 760px;57 }58 .progress-fill { height: 100%; width: 420px; background: #FFFFFF; }59</style>60</head>61<body>62<div id="render-target">63 64 <!-- Status bar -->65 <div class="status-bar">66 <div>7:41</div>67 <div class="status-icons">68 <div class="icon">69 <!-- small mail-like icon -->70 <svg viewBox="0 0 48 48">71 <rect x="6" y="10" width="36" height="28" rx="4"></rect>72 <path d="M7 12 L24 24 L41 12"></path>73 </svg>74 </div>75 <div class="icon">76 <!-- phone/tablet icon -->77 <svg viewBox="0 0 48 48">78 <rect x="10" y="6" width="28" height="36" rx="4"></rect>79 <circle cx="24" cy="36" r="2"></circle>80 </svg>81 </div>82 <div class="icon">83 <!-- cloud icon -->84 <svg viewBox="0 0 48 48">85 <path d="M16 30h18a6 6 0 0 0 0-12h-2a9 9 0 0 0-18 2"></path>86 </svg>87 </div>88 <div class="icon">89 <!-- wifi -->90 <svg viewBox="0 0 48 48">91 <path d="M8 16c8-8 24-8 32 0"></path>92 <path d="M14 22c6-6 14-6 20 0"></path>93 <path d="M20 28c3-3 5-3 8 0"></path>94 <circle cx="24" cy="34" r="2"></circle>95 </svg>96 </div>97 <div class="icon">98 <!-- battery -->99 <svg viewBox="0 0 48 48">100 <rect x="8" y="12" width="28" height="20" rx="4"></rect>101 <rect x="38" y="18" width="4" height="8" rx="2"></rect>102 <rect x="12" y="16" width="20" height="12" rx="2" style="fill:#F4EFE8; stroke:none;"></rect>103 </svg>104 </div>105 </div>106 </div>107 108 <!-- Search card -->109 <div class="search-bar">110 <div class="icon hamburger" style="margin-right: 20px;">111 <svg viewBox="0 0 80 80">112 <path d="M10 20h60"></path>113 <path d="M10 40h60"></path>114 <path d="M10 60h60"></path>115 </svg>116 </div>117 <div class="search-text">Search this phone</div>118 <div class="icon ellipsis">119 <svg viewBox="0 0 80 80">120 <circle cx="20" cy="40" r="6" style="fill:#F4EFE8; stroke:none;"></circle>121 <circle cx="40" cy="40" r="6" style="fill:#F4EFE8; stroke:none;"></circle>122 <circle cx="60" cy="40" r="6" style="fill:#F4EFE8; stroke:none;"></circle>123 </svg>124 </div>125 </div>126 127 <div class="list">128 129 <!-- Row: Nov 16 small txt -->130 <div class="file-item">131 <div class="left-thumb" style="border-color:#38D2E8; background:#1F2C30;">132 <svg viewBox="0 0 80 80">133 <rect x="14" y="12" width="52" height="56" rx="8" stroke="#38D2E8" fill="none" stroke-width="6"></rect>134 <path d="M22 48h32M22 58h32" stroke="#38D2E8" stroke-width="6"></path>135 </svg>136 </div>137 <div class="file-info">138 <div class="file-title">os_info.txt</div>139 <div class="file-meta">Nov 16, 32 B, TXT document</div>140 </div>141 <div class="right-actions">142 <div class="action-btn expand">143 <svg viewBox="0 0 64 64">144 <path d="M20 12h32v32"></path>145 <path d="M44 52H12V20"></path>146 </svg>147 </div>148 <div class="action-btn expand">149 <svg viewBox="0 0 64 64">150 <path d="M16 24l24-20"></path>151 <path d="M24 48l20-24"></path>152 </svg>153 </div>154 </div>155 </div>156 157 <div class="divider"></div>158 159 <!-- Row: agents.txt -->160 <div class="file-item">161 <div class="left-thumb" style="border-color:#38D2E8; background:#1F2C30;">162 <svg viewBox="0 0 80 80">163 <rect x="14" y="12" width="52" height="56" rx="8" stroke="#38D2E8" fill="none" stroke-width="6"></rect>164 <path d="M22 48h32M22 58h32" stroke="#38D2E8" stroke-width="6"></path>165 </svg>166 </div>167 <div class="file-info">168 <div class="file-title">agents.txt</div>169 <div class="file-meta">Nov 16, 1.15 kB, TXT document</div>170 </div>171 <div class="right-actions">172 <div class="action-btn expand">173 <svg viewBox="0 0 64 64">174 <path d="M20 12h32v32"></path>175 <path d="M44 52H12V20"></path>176 </svg>177 </div>178 <div class="action-btn expand">179 <svg viewBox="0 0 64 64">180 <path d="M16 24l24-20"></path>181 <path d="M24 48l20-24"></path>182 </svg>183 </div>184 </div>185 </div>186 187 <div class="divider"></div>188 189 <!-- Row: fitbit share PNG 1 -->190 <div class="file-item">191 <div class="left-thumb thumb-image">192 <div>[IMG: PNG thumbnail]</div>193 </div>194 <div class="file-info">195 <div class="file-title">fitbitshare_2123586381.PNG</div>196 <div class="file-meta">Oct 30, 93.48 kB, PNG image</div>197 </div>198 <div class="right-actions">199 <div class="action-btn expand">200 <svg viewBox="0 0 64 64">201 <path d="M20 12h32v32"></path>202 <path d="M44 52H12V20"></path>203 </svg>204 </div>205 <div class="action-btn expand">206 <svg viewBox="0 0 64 64">207 <path d="M16 24l24-20"></path>208 <path d="M24 48l20-24"></path>209 </svg>210 </div>211 </div>212 </div>213 214 <div class="divider"></div>215 216 <!-- Row: fitbitshare PNG 2 -->217 <div class="file-item">218 <div class="left-thumb thumb-image">219 <div>[IMG: PNG thumbnail]</div>220 </div>221 <div class="file-info">222 <div class="file-title">fitbitshare_2123101703.PNG</div>223 <div class="file-meta">Oct 30, 92.77 kB, PNG image</div>224 </div>225 <div class="right-actions">226 <div class="action-btn expand">227 <svg viewBox="0 0 64 64">228 <path d="M20 12h32v32"></path>229 <path d="M44 52H12V20"></path>230 </svg>231 </div>232 <div class="action-btn expand">233 <svg viewBox="0 0 64 64">234 <path d="M16 24l24-20"></path>235 <path d="M24 48l20-24"></path>236 </svg>237 </div>238 </div>239 </div>240 241 <div class="divider"></div>242 243 <!-- Row: fitbitshare PNG 3 -->244 <div class="file-item">245 <div class="left-thumb thumb-image">246 <div>[IMG: PNG thumbnail]</div>247 </div>248 <div class="file-info">249 <div class="file-title">fitbitshare_2123014230.PNG</div>250 <div class="file-meta">Oct 30, 92.77 kB, PNG image</div>251 </div>252 <div class="right-actions">253 <div class="action-btn expand">254 <svg viewBox="0 0 64 64">255 <path d="M20 12h32v32"></path>256 <path d="M44 52H12V20"></path>257 </svg>258 </div>259 <div class="action-btn expand">260 <svg viewBox="0 0 64 64">261 <path d="M16 24l24-20"></path>262 <path d="M24 48l20-24"></path>263 </svg>264 </div>265 </div>266 </div>267 268 <div class="divider"></div>269 270 <!-- Row: fitbitshare PNG 4 -->271 <div class="file-item">272 <div class="left-thumb thumb-image">273 <div>[IMG: PNG thumbnail]</div>274 </div>275 <div class="file-info">276 <div class="file-title">fitbitshare_2122912072.PNG</div>277 <div class="file-meta">Oct 30, 93.30 kB, PNG image</div>278 </div>279 <div class="right-actions">280 <div class="action-btn expand">281 <svg viewBox="0 0 64 64">282 <path d="M20 12h32v32"></path>283 <path d="M44 52H12V20"></path>284 </svg>285 </div>286 <div class="action-btn expand">287 <svg viewBox="0 0 64 64">288 <path d="M16 24l24-20"></path>289 <path d="M24 48l20-24"></path>290 </svg>291 </div>292 </div>293 </div>294 295 <div class="divider"></div>296 297 <!-- Row: Amsterdam-1.pdf -->298 <div class="file-item">299 <div class="left-thumb pdf-pill" style="width:92px;height:92px; display:flex;align-items:center;justify-content:center;">300 PDF301 </div>302 <div class="file-info">303 <div class="file-title">Amsterdam-1.pdf</div>304 <div class="file-meta">Oct 6, 8.45 MB, PDF document</div>305 </div>306 <div class="right-actions">307 <div class="action-btn expand">308 <svg viewBox="0 0 64 64">309 <path d="M20 12h32v32"></path>310 <path d="M44 52H12V20"></path>311 </svg>312 </div>313 <div class="action-btn expand">314 <svg viewBox="0 0 64 64">315 <path d="M16 24l24-20"></path>316 <path d="M24 48l20-24"></path>317 </svg>318 </div>319 </div>320 </div>321 322 <div class="divider"></div>323 324 <!-- Row: Venice tour.pdf -->325 <div class="file-item">326 <div class="left-thumb pdf-pill" style="width:92px;height:92px; display:flex;align-items:center;justify-content:center;">327 PDF328 </div>329 <div class="file-info">330 <div class="file-title">Venice tour.pdf</div>331 <div class="file-meta">Oct 6, 5.99 MB, PDF document</div>332 </div>333 <div class="right-actions">334 <div class="action-btn expand">335 <svg viewBox="0 0 64 64">336 <path d="M20 12h32v32"></path>337 <path d="M44 52H12V20"></path>338 </svg>339 </div>340 <div class="action-btn expand">341 <svg viewBox="0 0 64 64">342 <path d="M16 24l24-20"></path>343 <path d="M24 48l20-24"></path>344 </svg>345 </div>346 </div>347 </div>348 349 <div class="divider"></div>350 351 <!-- Row: Amsterdam (1).pdf -->352 <div class="file-item">353 <div class="left-thumb pdf-pill" style="width:92px;height:92px; display:flex;align-items:center;justify-content:center;">354 PDF355 </div>356 <div class="file-info">357 <div class="file-title">Amsterdam (1).pdf</div>358 <div class="file-meta">Oct 6, 8.45 MB, PDF document</div>359 </div>360 <div class="right-actions">361 <div class="action-btn expand">362 <svg viewBox="0 0 64 64">363 <path d="M20 12h32v32"></path>364 <path d="M44 52H12V20"></path>365 </svg>366 </div>367 <div class="action-btn expand">368 <svg viewBox="0 0 64 64">369 <path d="M16 24l24-20"></path>370 <path d="M24 48l20-24"></path>371 </svg>372 </div>373 </div>374 </div>375 376 <div class="divider"></div>377 378 <!-- Row: tomorrow land image.png -->379 <div class="file-item">380 <div class="left-thumb thumb-image">381 <div>[IMG: PNG image]</div>382 </div>383 <div class="file-info">384 <div class="file-title">tomorrow land image.png</div>385 <div class="file-meta">Oct 6, 1.30 MB, PNG image</div>386 </div>387 <div class="right-actions">388 <div class="action-btn expand">389 <svg viewBox="0 0 64 64">390 <path d="M20 12h32v32"></path>391 <path d="M44 52H12V20"></path>392 </svg>393 </div>394 <div class="action-btn expand">395 <svg viewBox="0 0 64 64">396 <path d="M16 24l24-20"></path>397 <path d="M24 48l20-24"></path>398 </svg>399 </div>400 </div>401 </div>402 403 <div class="divider"></div>404 405 <!-- Row: vanice file.jpg with progress -->406 <div class="file-item" style="padding-bottom: 36px;">407 <div class="left-thumb thumb-image">408 <div>[IMG: JPG image]</div>409 </div>410 <div class="file-info">411 <div class="file-title">vanice file.jpg</div>412 <div class="file-meta">Oct 6, JPG image</div>413 <div class="progress-bar"><div class="progress-fill"></div></div>414 </div>415 <div class="right-actions">416 <div class="action-btn expand">417 <svg viewBox="0 0 64 64">418 <path d="M20 12h32v32"></path>419 <path d="M44 52H12V20"></path>420 </svg>421 </div>422 <div class="action-btn expand">423 <svg viewBox="0 0 64 64">424 <path d="M16 24l24-20"></path>425 <path d="M24 48l20-24"></path>426 </svg>427 </div>428 </div>429 </div>430 431 </div>432 433</div>434</body>435</html>