GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Files List UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1440px;9 height: 3120px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #EAEAEA;14 }15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1440px;21 height: 120px;22 background: #1A1A1A;23 display: flex;24 align-items: center;25 padding: 0 40px;26 box-sizing: border-box;27 font-size: 46px;28 color: #EDEDED;29 }30 .status-left { display: flex; align-items: center; gap: 24px; }31 .status-right { margin-left: auto; display: flex; align-items: center; gap: 32px; }32 /* Simple icons */33 .icon {34 width: 60px;35 height: 60px;36 }37 .wifi, .battery { fill: none; stroke: #EDEDED; stroke-width: 6; }38 /* App bar */39 .app-bar {40 position: absolute;41 top: 120px;42 left: 0;43 width: 1440px;44 height: 220px;45 background: #171717;46 display: flex;47 align-items: center;48 box-sizing: border-box;49 padding: 0 40px;50 border-bottom: 1px solid #2A2A2A;51 }52 .hamburger {53 width: 92px;54 height: 92px;55 border-radius: 12px;56 display: flex;57 align-items: center;58 justify-content: center;59 margin-right: 32px;60 }61 .hamburger svg { stroke: #EDEDED; stroke-width: 10; }62 .search-box {63 flex: 1;64 height: 120px;65 border-radius: 28px;66 background: #212121;67 border: 1px solid #2D2D2D;68 display: flex;69 align-items: center;70 padding: 0 40px;71 box-sizing: border-box;72 font-size: 56px;73 color: #CFCFCF;74 letter-spacing: 0.2px;75 }76 .kebab {77 width: 80px;78 height: 120px;79 display: flex;80 align-items: center;81 justify-content: center;82 margin-left: 24px;83 }84 .kebab svg { fill: #CFCFCF; }85 /* List area */86 .list {87 position: absolute;88 top: 340px;89 left: 0;90 width: 1440px;91 height: 2780px;92 overflow: hidden;93 }94 .row {95 display: flex;96 align-items: center;97 padding: 48px 40px;98 box-sizing: border-box;99 border-bottom: 1px solid #2A2A2A;100 }101 .pdf-badge {102 width: 84px;103 height: 84px;104 border-radius: 16px;105 background: #E38A8A;106 display: flex;107 align-items: center;108 justify-content: center;109 color: #1A1A1A;110 font-weight: bold;111 margin-right: 36px;112 font-size: 34px;113 border: 1px solid #D07C7C;114 }115 .text-block { flex: 1; }116 .title {117 font-size: 56px;118 color: #FFFFFF;119 margin-bottom: 18px;120 }121 .meta {122 font-size: 40px;123 color: #AFAFAF;124 }125 .actions {126 display: flex;127 gap: 28px;128 }129 .square-icon {130 width: 90px;131 height: 90px;132 border: 2px solid #B3B3B3;133 border-radius: 12px;134 position: relative;135 }136 .expand-arrows {137 position: absolute;138 inset: 0;139 }140 .expand-arrows svg { width: 90px; height: 90px; stroke: #D6D6D6; stroke-width: 8; fill: none; }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status bar -->147 <div class="status-bar">148 <div class="status-left">149 <div>9:47</div>150 </div>151 <div class="status-right">152 <!-- WiFi icon -->153 <svg class="icon wifi" viewBox="0 0 64 64">154 <path d="M6 24c14-12 38-12 52 0"/>155 <path d="M14 32c10-8 26-8 36 0"/>156 <path d="M22 40c6-5 14-5 20 0"/>157 <circle cx="32" cy="48" r="4" fill="#EDEDED"></circle>158 </svg>159 <!-- Battery icon -->160 <svg class="icon battery" viewBox="0 0 80 64">161 <rect x="6" y="12" width="60" height="40" rx="6" ry="6" stroke="#EDEDED"></rect>162 <rect x="12" y="18" width="40" height="28" fill="#EDEDED"></rect>163 <rect x="68" y="22" width="6" height="20" rx="2" ry="2" fill="#EDEDED"></rect>164 </svg>165 </div>166 </div>167 168 <!-- App bar with search -->169 <div class="app-bar">170 <div class="hamburger">171 <svg viewBox="0 0 100 100">172 <line x1="18" y1="26" x2="82" y2="26" />173 <line x1="18" y1="50" x2="82" y2="50" />174 <line x1="18" y1="74" x2="82" y2="74" />175 </svg>176 </div>177 <div class="search-box">Search this phone</div>178 <div class="kebab">179 <svg viewBox="0 0 24 24">180 <circle cx="12" cy="5" r="2.5"></circle>181 <circle cx="12" cy="12" r="2.5"></circle>182 <circle cx="12" cy="19" r="2.5"></circle>183 </svg>184 </div>185 </div>186 187 <!-- List -->188 <div class="list">189 190 <!-- Row 1 -->191 <div class="row">192 <div class="pdf-badge">PDF</div>193 <div class="text-block">194 <div class="title">Shopping list.pdf</div>195 <div class="meta">Oct 9, 776 B, PDF document</div>196 </div>197 <div class="actions">198 <div class="square-icon">199 <div class="expand-arrows">200 <svg viewBox="0 0 100 100">201 <path d="M20 40 L20 20 L40 20"/>202 <path d="M80 60 L80 80 L60 80"/>203 </svg>204 </div>205 </div>206 <div class="square-icon">207 <div class="expand-arrows">208 <svg viewBox="0 0 100 100">209 <path d="M40 20 L80 20 L80 60"/>210 <path d="M60 80 L20 80 L20 40"/>211 </svg>212 </div>213 </div>214 </div>215 </div>216 217 <!-- Row 2 -->218 <div class="row">219 <div class="pdf-badge">PDF</div>220 <div class="text-block">221 <div class="title">08.24_dinner-veg (3).pdf</div>222 <div class="meta">Aug 25, 257 kB, PDF document</div>223 </div>224 <div class="actions">225 <div class="square-icon">226 <div class="expand-arrows">227 <svg viewBox="0 0 100 100">228 <path d="M20 40 L20 20 L40 20"/>229 <path d="M80 60 L80 80 L60 80"/>230 </svg>231 </div>232 </div>233 <div class="square-icon">234 <div class="expand-arrows">235 <svg viewBox="0 0 100 100">236 <path d="M40 20 L80 20 L80 60"/>237 <path d="M60 80 L20 80 L20 40"/>238 </svg>239 </div>240 </div>241 </div>242 </div>243 244 <!-- Row 3 -->245 <div class="row">246 <div class="pdf-badge">PDF</div>247 <div class="text-block">248 <div class="title">08.24_dinner (4).pdf</div>249 <div class="meta">Aug 25, 278 kB, PDF document</div>250 </div>251 <div class="actions">252 <div class="square-icon">253 <div class="expand-arrows">254 <svg viewBox="0 0 100 100">255 <path d="M20 40 L20 20 L40 20"/>256 <path d="M80 60 L80 80 L60 80"/>257 </svg>258 </div>259 </div>260 <div class="square-icon">261 <div class="expand-arrows">262 <svg viewBox="0 0 100 100">263 <path d="M40 20 L80 20 L80 60"/>264 <path d="M60 80 L20 80 L20 40"/>265 </svg>266 </div>267 </div>268 </div>269 </div>270 271 <!-- Row 4 -->272 <div class="row">273 <div class="pdf-badge">PDF</div>274 <div class="text-block">275 <div class="title">08.24_dinner-veg (2).pdf</div>276 <div class="meta">Aug 25, 257 kB, PDF document</div>277 </div>278 <div class="actions">279 <div class="square-icon">280 <div class="expand-arrows">281 <svg viewBox="0 0 100 100">282 <path d="M20 40 L20 20 L40 20"/>283 <path d="M80 60 L80 80 L60 80"/>284 </svg>285 </div>286 </div>287 <div class="square-icon">288 <div class="expand-arrows">289 <svg viewBox="0 0 100 100">290 <path d="M40 20 L80 20 L80 60"/>291 <path d="M60 80 L20 80 L20 40"/>292 </svg>293 </div>294 </div>295 </div>296 </div>297 298 <!-- Row 5 -->299 <div class="row">300 <div class="pdf-badge">PDF</div>301 <div class="text-block">302 <div class="title">08.24_dinner (3).pdf</div>303 <div class="meta">Aug 25, 278 kB, PDF document</div>304 </div>305 <div class="actions">306 <div class="square-icon">307 <div class="expand-arrows">308 <svg viewBox="0 0 100 100">309 <path d="M20 40 L20 20 L40 20"/>310 <path d="M80 60 L80 80 L60 80"/>311 </svg>312 </div>313 </div>314 <div class="square-icon">315 <div class="expand-arrows">316 <svg viewBox="0 0 100 100">317 <path d="M40 20 L80 20 L80 60"/>318 <path d="M60 80 L20 80 L20 40"/>319 </svg>320 </div>321 </div>322 </div>323 </div>324 325 <!-- Row 6 -->326 <div class="row">327 <div class="pdf-badge">PDF</div>328 <div class="text-block">329 <div class="title">08.24_dinner (2).pdf</div>330 <div class="meta">Aug 25, 278 kB, PDF document</div>331 </div>332 <div class="actions">333 <div class="square-icon">334 <div class="expand-arrows">335 <svg viewBox="0 0 100 100">336 <path d="M20 40 L20 20 L40 20"/>337 <path d="M80 60 L80 80 L60 80"/>338 </svg>339 </div>340 </div>341 <div class="square-icon">342 <div class="expand-arrows">343 <svg viewBox="0 0 100 100">344 <path d="M40 20 L80 20 L80 60"/>345 <path d="M60 80 L20 80 L20 40"/>346 </svg>347 </div>348 </div>349 </div>350 </div>351 352 <!-- Row 7 -->353 <div class="row">354 <div class="pdf-badge">PDF</div>355 <div class="text-block">356 <div class="title">Design project.pdf</div>357 <div class="meta">Aug 25, 205 kB, PDF document</div>358 </div>359 <div class="actions">360 <div class="square-icon">361 <div class="expand-arrows">362 <svg viewBox="0 0 100 100">363 <path d="M20 40 L20 20 L40 20"/>364 <path d="M80 60 L80 80 L60 80"/>365 </svg>366 </div>367 </div>368 <div class="square-icon">369 <div class="expand-arrows">370 <svg viewBox="0 0 100 100">371 <path d="M40 20 L80 20 L80 60"/>372 <path d="M60 80 L20 80 L20 40"/>373 </svg>374 </div>375 </div>376 </div>377 </div>378 379 <!-- Row 8 -->380 <div class="row">381 <div class="pdf-badge">PDF</div>382 <div class="text-block">383 <div class="title">08.24_dinner (1).pdf</div>384 <div class="meta">Aug 25, 278 kB, PDF document</div>385 </div>386 <div class="actions">387 <div class="square-icon">388 <div class="expand-arrows">389 <svg viewBox="0 0 100 100">390 <path d="M20 40 L20 20 L40 20"/>391 <path d="M80 60 L80 80 L60 80"/>392 </svg>393 </div>394 </div>395 <div class="square-icon">396 <div class="expand-arrows">397 <svg viewBox="0 0 100 100">398 <path d="M40 20 L80 20 L80 60"/>399 <path d="M60 80 L20 80 L20 40"/>400 </svg>401 </div>402 </div>403 </div>404 </div>405 406 <!-- Row 9 -->407 <div class="row">408 <div class="pdf-badge">PDF</div>409 <div class="text-block">410 <div class="title">08.24_dinner-veg (1).pdf</div>411 <div class="meta">Aug 25, 257 kB, PDF document</div>412 </div>413 <div class="actions">414 <div class="square-icon">415 <div class="expand-arrows">416 <svg viewBox="0 0 100 100">417 <path d="M20 40 L20 20 L40 20"/>418 <path d="M80 60 L80 80 L60 80"/>419 </svg>420 </div>421 </div>422 <div class="square-icon">423 <div class="expand-arrows">424 <svg viewBox="0 0 100 100">425 <path d="M40 20 L80 20 L80 60"/>426 <path d="M60 80 L20 80 L20 40"/>427 </svg>428 </div>429 </div>430 </div>431 </div>432 433 <!-- Row 10 -->434 <div class="row">435 <div class="pdf-badge">PDF</div>436 <div class="text-block">437 <div class="title">08.24_dinner-veg.pdf</div>438 <div class="meta">Aug 25, 257 kB, PDF document</div>439 </div>440 <div class="actions">441 <div class="square-icon">442 <div class="expand-arrows">443 <svg viewBox="0 0 100 100">444 <path d="M20 40 L20 20 L40 20"/>445 <path d="M80 60 L80 80 L60 80"/>446 </svg>447 </div>448 </div>449 <div class="square-icon">450 <div class="expand-arrows">451 <svg viewBox="0 0 100 100">452 <path d="M40 20 L80 20 L80 60"/>453 <path d="M60 80 L20 80 L20 40"/>454 </svg>455 </div>456 </div>457 </div>458 </div>459 460 <!-- Row 11 -->461 <div class="row">462 <div class="pdf-badge">PDF</div>463 <div class="text-block">464 <div class="title">08.24_dinner.pdf</div>465 <div class="meta">Aug 25, 278 kB, PDF document</div>466 </div>467 <div class="actions">468 <div class="square-icon">469 <div class="expand-arrows">470 <svg viewBox="0 0 100 100">471 <path d="M20 40 L20 20 L40 20"/>472 <path d="M80 60 L80 80 L60 80"/>473 </svg>474 </div>475 </div>476 <div class="square-icon">477 <div class="expand-arrows">478 <svg viewBox="0 0 100 100">479 <path d="M40 20 L80 20 L80 60"/>480 <path d="M60 80 L20 80 L20 40"/>481 </svg>482 </div>483 </div>484 </div>485 </div>486 487 </div>488 489</div>490</body>491</html>