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: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #202124;15 color: #ECEFF1;16 }17 /* Status bar */18 .statusbar {19 height: 110px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 padding: 0 36px;24 font-weight: 600;25 color: #fff;26 font-size: 44px;27 }28 .notif-dots { display: flex; gap: 14px; margin-left: 20px; }29 .notif-dots span {30 width: 16px; height: 16px; background: #ffffff; opacity: 0.85; border-radius: 50%;31 display: inline-block;32 }33 .sb-icons { display: flex; align-items: center; gap: 22px; }34 .sb-icons svg { fill: none; stroke: #fff; stroke-width: 4px; }35 /* Search card */36 .search-wrap {37 padding: 20px 36px 10px 36px;38 }39 .search-card {40 background: #2a2b2e;41 border-radius: 28px;42 height: 140px;43 display: flex;44 align-items: center;45 padding: 0 28px;46 box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;47 }48 .search-left {49 width: 100px;50 display: flex;51 justify-content: center;52 align-items: center;53 }54 .search-input {55 flex: 1;56 font-size: 44px;57 color: #cfd8dc;58 }59 .search-right { width: 100px; display: flex; justify-content: center; }60 .kebab { display: flex; flex-direction: column; gap: 12px; }61 .kebab span { width: 14px; height: 14px; background: #cfd8dc; border-radius: 50%; display: block; }62 /* Filter chips */63 .chip-row {64 display: flex;65 gap: 24px;66 padding: 28px 36px 6px 36px;67 flex-wrap: wrap;68 }69 .chip {70 display: inline-flex;71 align-items: center;72 gap: 18px;73 padding: 24px 30px;74 border-radius: 24px;75 background: #2a2b2e;76 border: 1px solid #3a3b3e;77 color: #e7ecef;78 font-size: 38px;79 }80 .chip svg { width: 48px; height: 48px; }81 /* Browse section */82 .section-label {83 padding: 30px 36px 20px 36px;84 color: #9aa0a6;85 font-size: 32px;86 letter-spacing: 1.8px;87 text-transform: uppercase;88 }89 .apps {90 display: flex;91 justify-content: space-between;92 padding: 10px 60px 20px 60px;93 }94 .app {95 width: 200px;96 display: flex;97 flex-direction: column;98 align-items: center;99 color: #e0e0e0;100 gap: 20px;101 }102 .app-icon {103 width: 140px; height: 140px; border-radius: 70px; background: #2a2b2e;104 display: flex; justify-content: center; align-items: center;105 border: 1px solid #3a3a3a;106 }107 .app label { font-size: 34px; }108 /* Recent files header */109 .recent-header {110 display: flex;111 align-items: center;112 justify-content: space-between;113 padding: 30px 36px 10px 36px;114 }115 .recent-header .title { font-size: 46px; font-weight: 600; }116 .recent-header .right-icon svg { width: 54px; height: 54px; stroke: #cfd8dc; }117 /* File list */118 .file-list { margin-top: 10px; }119 .file-item {120 display: flex;121 align-items: center;122 padding: 24px 36px;123 }124 .thumb {125 width: 120px; height: 120px;126 background: #E0E0E0; border: 1px solid #BDBDBD;127 display: flex; justify-content: center; align-items: center; color: #757575;128 border-radius: 26px;129 overflow: hidden;130 }131 .file-info { flex: 1; padding-left: 30px; }132 .file-title { font-size: 44px; color: #e8eaed; }133 .file-sub { font-size: 30px; color: #9aa0a6; margin-top: 8px; }134 .file-actions { width: 120px; display: flex; justify-content: center; }135 .file-actions svg { width: 56px; height: 56px; stroke: #cfd8dc; }136 .divider {137 height: 1px; background: #3a3b3e; margin: 8px 36px 8px 180px;138 }139 /* Progress bar for the last item */140 .progress {141 width: 480px; height: 10px; background: #3a3b3e; border-radius: 6px; overflow: hidden; margin-top: 12px;142 }143 .progress .bar { width: 60%; height: 100%; background: #cfd8dc; }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status bar -->150 <div class="statusbar">151 <div style="display:flex; align-items:center;">152 <div>6:08</div>153 <div class="notif-dots">154 <span></span><span></span><span></span><span></span><span></span>155 </div>156 </div>157 <div class="sb-icons">158 <!-- Wi-Fi -->159 <svg viewBox="0 0 24 24">160 <path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18l0 0"></path>161 </svg>162 <!-- Battery -->163 <svg viewBox="0 0 28 24">164 <rect x="1" y="5" width="22" height="14" rx="2" ry="2"></rect>165 <rect x="24" y="9" width="3" height="6" rx="1"></rect>166 <rect x="4" y="8" width="14" height="8" fill="#ffffff" stroke="none"></rect>167 </svg>168 </div>169 </div>170 171 <!-- Search bar -->172 <div class="search-wrap">173 <div class="search-card">174 <div class="search-left">175 <!-- Hamburger -->176 <svg viewBox="0 0 24 24" width="54" height="54">177 <path d="M3 6h18M3 12h18M3 18h18" stroke="#cfd8dc" stroke-width="2" fill="none" stroke-linecap="round"/>178 </svg>179 </div>180 <div class="search-input">Search this phone</div>181 <div class="search-right">182 <div class="kebab"><span></span><span></span><span></span></div>183 </div>184 </div>185 </div>186 187 <!-- Filter chips -->188 <div class="chip-row">189 <div class="chip">190 <svg viewBox="0 0 24 24">191 <rect x="2" y="3" width="20" height="18" rx="3" stroke="#EF9A9A" fill="none" stroke-width="2"></rect>192 <circle cx="9" cy="10" r="2" fill="#EF9A9A"></circle>193 <path d="M6 17l4-4 4 4 4-5" stroke="#EF9A9A" fill="none" stroke-width="2"></path>194 </svg>195 <span>Images</span>196 </div>197 <div class="chip">198 <svg viewBox="0 0 24 24">199 <path d="M9 4v12a3 3 0 1 0 2-2V6h4v8a3 3 0 1 0 2-2V4H9z" fill="none" stroke="#CE93D8" stroke-width="2"></path>200 </svg>201 <span>Audio</span>202 </div>203 <div class="chip">204 <svg viewBox="0 0 24 24">205 <rect x="2" y="5" width="20" height="14" rx="2" stroke="#81C784" fill="none" stroke-width="2"></rect>206 <path d="M10 9l5 3-5 3V9z" fill="#81C784"></path>207 </svg>208 <span>Videos</span>209 </div>210 <div class="chip">211 <svg viewBox="0 0 24 24">212 <path d="M6 3h10l4 4v14H6z" fill="none" stroke="#80DEEA" stroke-width="2"></path>213 <path d="M14 3v5h6" stroke="#80DEEA" stroke-width="2"></path>214 </svg>215 <span>Documents</span>216 </div>217 </div>218 219 <!-- Browse files in other apps -->220 <div class="section-label">BROWSE FILES IN OTHER APPS</div>221 <div class="apps">222 <div class="app">223 <div class="app-icon">224 <!-- Gallery icon -->225 <svg viewBox="0 0 24 24" width="70" height="70">226 <rect x="2" y="4" width="20" height="16" rx="2" fill="none" stroke="#FBC02D" stroke-width="2"></rect>227 <circle cx="8" cy="10" r="2" fill="#FBC02D"></circle>228 <path d="M5 17l5-5 4 4 4-6" stroke="#FBC02D" fill="none" stroke-width="2"></path>229 </svg>230 </div>231 <label>Gallery</label>232 </div>233 <div class="app">234 <div class="app-icon">235 <!-- Photos icon -->236 <svg viewBox="0 0 24 24" width="70" height="70">237 <path d="M12 2v8M12 14v8M2 12h8M14 12h8" stroke="#64B5F6" stroke-width="2"></path>238 <circle cx="12" cy="12" r="3" fill="#64B5F6"></circle>239 </svg>240 </div>241 <label>Photos</label>242 </div>243 <div class="app">244 <div class="app-icon">245 <!-- Bug reports icon -->246 <svg viewBox="0 0 24 24" width="70" height="70">247 <circle cx="12" cy="12" r="5" fill="none" stroke="#B0BEC5" stroke-width="2"></circle>248 <path d="M12 3v3M12 18v3M3 12h3M18 12h3M6 6l2 2M16 6l-2 2M6 18l2-2M16 18l-2-2" stroke="#B0BEC5" stroke-width="2"></path>249 </svg>250 </div>251 <label>Bug reports</label>252 </div>253 <div class="app">254 <div class="app-icon">255 <!-- System traces icon -->256 <svg viewBox="0 0 24 24" width="70" height="70">257 <path d="M12 2l2 4 4 2-4 2-2 4-2-4-4-2 4-2z" fill="none" stroke="#8BC34A" stroke-width="2"></path>258 <circle cx="12" cy="12" r="3" fill="#8BC34A"></circle>259 </svg>260 </div>261 <label>System traces</label>262 </div>263 </div>264 265 <!-- Recent files -->266 <div class="recent-header">267 <div class="title">Recent files</div>268 <div class="right-icon">269 <!-- Grid icon -->270 <svg viewBox="0 0 24 24" fill="none">271 <rect x="3" y="3" width="7" height="7" stroke="#cfd8dc" stroke-width="2"></rect>272 <rect x="14" y="3" width="7" height="7" stroke="#cfd8dc" stroke-width="2"></rect>273 <rect x="3" y="14" width="7" height="7" stroke="#cfd8dc" stroke-width="2"></rect>274 <rect x="14" y="14" width="7" height="7" stroke="#cfd8dc" stroke-width="2"></rect>275 </svg>276 </div>277 </div>278 279 <div class="file-list">280 <!-- Item 1 -->281 <div class="file-item">282 <div class="thumb">[IMG: Beach Photo]</div>283 <div class="file-info">284 <div class="file-title">Riviera maya-5.jpg</div>285 <div class="file-sub">6:08 PM, 61.60 kB, JPG image</div>286 </div>287 <div class="file-actions">288 <svg viewBox="0 0 24 24" fill="none">289 <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" stroke="#cfd8dc" stroke-width="2"></path>290 </svg>291 </div>292 </div>293 <div class="divider"></div>294 295 <!-- Item 2 -->296 <div class="file-item">297 <div class="thumb">[IMG: Beach Photo]</div>298 <div class="file-info">299 <div class="file-title">Riviera maya-4.jpg</div>300 <div class="file-sub">6:08 PM, 61.60 kB, JPG image</div>301 </div>302 <div class="file-actions">303 <svg viewBox="0 0 24 24" fill="none">304 <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" stroke="#cfd8dc" stroke-width="2"></path>305 </svg>306 </div>307 </div>308 <div class="divider"></div>309 310 <!-- Item 3 -->311 <div class="file-item">312 <div class="thumb">[IMG: Beach Photo]</div>313 <div class="file-info">314 <div class="file-title">Riviera maya-3.jpg</div>315 <div class="file-sub">6:07 PM, 61.60 kB, JPG image</div>316 </div>317 <div class="file-actions">318 <svg viewBox="0 0 24 24" fill="none">319 <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" stroke="#cfd8dc" stroke-width="2"></path>320 </svg>321 </div>322 </div>323 <div class="divider"></div>324 325 <!-- Item 4 -->326 <div class="file-item">327 <div class="thumb">[IMG: Landscape Photo]</div>328 <div class="file-info">329 <div class="file-title">images (1).jpeg</div>330 <div class="file-sub">5:38 PM, 60.71 kB, JPG image</div>331 </div>332 <div class="file-actions">333 <svg viewBox="0 0 24 24" fill="none">334 <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" stroke="#cfd8dc" stroke-width="2"></path>335 </svg>336 </div>337 </div>338 <div class="divider"></div>339 340 <!-- Item 5 -->341 <div class="file-item">342 <div class="thumb">[IMG: Beach Photo]</div>343 <div class="file-info">344 <div class="file-title">Riviera maya-2.jpg</div>345 <div class="file-sub">5:38 PM, 61.60 kB, JPG image</div>346 </div>347 <div class="file-actions">348 <svg viewBox="0 0 24 24" fill="none">349 <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" stroke="#cfd8dc" stroke-width="2"></path>350 </svg>351 </div>352 </div>353 <div class="divider"></div>354 355 <!-- Item 6 -->356 <div class="file-item">357 <div class="thumb">[IMG: Beach Photo]</div>358 <div class="file-info">359 <div class="file-title">Riviera maya-1.jpg</div>360 <div class="file-sub">5:38 PM, 61.60 kB, JPG image</div>361 </div>362 <div class="file-actions">363 <svg viewBox="0 0 24 24" fill="none">364 <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" stroke="#cfd8dc" stroke-width="2"></path>365 </svg>366 </div>367 </div>368 <div class="divider"></div>369 370 <!-- Item 7 -->371 <div class="file-item">372 <div class="thumb">[IMG: Beach Photo]</div>373 <div class="file-info">374 <div class="file-title">Riviera maya.jpg</div>375 <div class="file-sub">5:38 PM, 61.60 kB, JPG image</div>376 </div>377 <div class="file-actions">378 <svg viewBox="0 0 24 24" fill="none">379 <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" stroke="#cfd8dc" stroke-width="2"></path>380 </svg>381 </div>382 </div>383 <div class="divider"></div>384 385 <!-- Item 8 -->386 <div class="file-item">387 <div class="thumb">[IMG: Beach Photo]</div>388 <div class="file-info">389 <div class="file-title">Riviera maya.jpg</div>390 <div class="file-sub">Sep 25, 61.60 kB, JPG image</div>391 <div class="progress"><div class="bar"></div></div>392 </div>393 <div class="file-actions">394 <svg viewBox="0 0 24 24" fill="none">395 <path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" stroke="#cfd8dc" stroke-width="2"></path>396 </svg>397 </div>398 </div>399 </div>400 401</div>402</body>403</html>