GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Files - Dark UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #201a17; /* deep brown-black */12 font-family: Arial, Helvetica, sans-serif;13 color: #e9e3df;14 }15 .status-bar {16 height: 80px;17 padding: 0 36px;18 display: flex; align-items: center; justify-content: space-between;19 color: #e9e3df; font-size: 34px;20 }21 .status-left, .status-right { display: flex; align-items: center; gap: 20px; }22 .chip-row { display: flex; gap: 22px; padding: 26px 36px 10px 36px; }23 .chip {24 display: inline-flex; align-items: center; gap: 16px;25 padding: 16px 24px;26 border: 2px solid #6d6159; border-radius: 18px;27 color: #e9e3df; font-size: 32px;28 background: rgba(255,255,255,0.02);29 }30 .search-wrap { padding: 20px 36px 0 36px; }31 .search-bar {32 height: 120px; border-radius: 28px;33 background: #2a221e;34 display: flex; align-items: center; justify-content: space-between;35 padding: 0 28px;36 box-shadow: inset 0 0 0 1px #3c322c;37 }38 .search-left { display: flex; align-items: center; gap: 24px; }39 .search-text { font-size: 44px; color: #e9e3df; opacity: 0.9; }40 .section-label {41 padding: 24px 36px 8px 36px;42 color: #b7ada7; font-size: 26px; letter-spacing: 1px;43 }44 .apps-row {45 display: flex; align-items: flex-start; gap: 50px;46 padding: 8px 36px 26px 36px;47 }48 .app {49 width: 140px;50 display: flex; flex-direction: column; align-items: center; gap: 16px;51 }52 .app .icon {53 width: 110px; height: 110px; border-radius: 55px;54 display: flex; align-items: center; justify-content: center;55 box-shadow: inset 0 0 0 1px #3c322c;56 }57 .app .label { font-size: 30px; color: #e9e3df; text-align: center; }58 .recent-header {59 padding: 20px 36px; font-size: 34px; color: #e9e3df;60 }61 .list-wrapper { padding: 0 36px 40px 36px; }62 .file-item {63 display: flex; align-items: flex-start; justify-content: space-between;64 padding: 30px 0;65 }66 .file-left { display: flex; align-items: flex-start; gap: 26px; }67 .file-tag {68 width: 64px; height: 64px; border-radius: 14px;69 display: flex; align-items: center; justify-content: center;70 font-weight: bold; font-size: 22px; color: #2a221e;71 }72 .tag-pdf { background: #f08a7f; box-shadow: inset 0 0 0 1px #d36a5f; }73 .tag-txt { background: #79c5ff; box-shadow: inset 0 0 0 1px #5aa7e3; }74 .file-text .title { font-size: 40px; margin-top: -4px; }75 .file-text .meta { font-size: 26px; color: #bfb6b0; margin-top: 8px; }76 .divider {77 height: 2px; background: #3b322d; margin-left: 90px; margin-right: 20px;78 }79 .grid-toggle { position: absolute; right: 36px; top: 580px; opacity: 0.9; }80 /* small utility icons */81 svg { display: block; }82</style>83</head>84<body>85<div id="render-target">86 87 <!-- Status bar -->88 <div class="status-bar">89 <div class="status-left">90 <span>8:42</span>91 <span>20°</span>92 <span>⚠️</span>93 <span>18°</span>94 <span>✓</span>95 <span>•</span>96 </div>97 <div class="status-right">98 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#e9e3df" d="M12 22c4.97 0 9-4.03 9-9h-2c0 3.87-3.13 7-7 7s-7-3.13-7-7H3c0 4.97 4.03 9 9 9z"/></svg>99 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#e9e3df" d="M12 4a8 8 0 0 0-8 8h16a8 8 0 0 0-8-8z"/></svg>100 </div>101 </div>102 103 <!-- Search bar -->104 <div class="search-wrap">105 <div class="search-bar">106 <div class="search-left">107 <!-- hamburger -->108 <svg width="56" height="56" viewBox="0 0 24 24">109 <path fill="#e9e3df" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>110 </svg>111 <div class="search-text">Search this phone</div>112 </div>113 <!-- vertical dots -->114 <svg width="40" height="40" viewBox="0 0 24 24">115 <circle cx="12" cy="5" r="2.2" fill="#e9e3df"></circle>116 <circle cx="12" cy="12" r="2.2" fill="#e9e3df"></circle>117 <circle cx="12" cy="19" r="2.2" fill="#e9e3df"></circle>118 </svg>119 </div>120 </div>121 122 <!-- Category chips -->123 <div class="chip-row">124 <div class="chip">125 <svg width="42" height="42" viewBox="0 0 24 24">126 <rect x="3" y="5" width="18" height="14" fill="none" stroke="#a6ded2" stroke-width="2"></rect>127 <path d="M6 15l3-4 3 3 3-4 3 5" stroke="#a6ded2" stroke-width="2" fill="none"></path>128 </svg>129 <span>Images</span>130 </div>131 <div class="chip">132 <svg width="42" height="42" viewBox="0 0 24 24">133 <path d="M9 4v10.5A3.5 3.5 0 1 0 11 18V8h4V4H9z" fill="#c493ff"></path>134 </svg>135 <span>Audio</span>136 </div>137 <div class="chip">138 <svg width="42" height="42" viewBox="0 0 24 24">139 <path d="M3 6h18v4H3z" fill="#9cd090"></path>140 <rect x="3" y="10" width="18" height="8" stroke="#9cd090" stroke-width="2" fill="none"></rect>141 </svg>142 <span>Videos</span>143 </div>144 <div class="chip">145 <svg width="42" height="42" viewBox="0 0 24 24">146 <path d="M6 4h9l3 3v13H6z" fill="none" stroke="#73c7e8" stroke-width="2"></path>147 <path d="M15 4v4h4" stroke="#73c7e8" stroke-width="2" fill="none"></path>148 </svg>149 <span>Documents</span>150 </div>151 </div>152 153 <!-- Browse other apps -->154 <div class="section-label">BROWSE FILES IN OTHER APPS</div>155 <div class="apps-row">156 <div class="app">157 <div class="icon" style="background:#3a6be0;">158 <svg width="74" height="74" viewBox="0 0 24 24">159 <rect x="4" y="6" width="16" height="12" fill="#fff"></rect>160 <path d="M6 15l4-4 4 3 4-5" stroke="#ff7043" stroke-width="2" fill="none"></path>161 </svg>162 </div>163 <div class="label">Gallery</div>164 </div>165 <div class="app">166 <div class="icon" style="background:#70858f;">167 <svg width="74" height="74" viewBox="0 0 24 24">168 <circle cx="12" cy="12" r="7" fill="#e9e3df"></circle>169 <rect x="11" y="6" width="2" height="8" fill="#201a17"></rect>170 </svg>171 </div>172 <div class="label">Media</div>173 </div>174 <div class="app">175 <div class="icon" style="background:#f6b938;">176 <svg width="74" height="74" viewBox="0 0 24 24">177 <circle cx="12" cy="12" r="9" fill="#fff"></circle>178 <path d="M10 8l6 4-6 4z" fill="#f6b938"></path>179 </svg>180 </div>181 <div class="label">Photos</div>182 </div>183 <div class="app">184 <div class="icon" style="background:#d63c2d;">185 <svg width="74" height="74" viewBox="0 0 24 24">186 <path d="M6 4h9l3 3v13H6z" fill="#fff"></path>187 <path d="M10 10h6v6h-6z" fill="#d63c2d"></path>188 </svg>189 </div>190 <div class="label">Adobe Acro...</div>191 </div>192 </div>193 194 <!-- Grid toggle icon -->195 <div class="grid-toggle">196 <svg width="48" height="48" viewBox="0 0 24 24">197 <g fill="#cfc5bf">198 <rect x="3" y="4" width="6" height="6"></rect>199 <rect x="13" y="4" width="8" height="6"></rect>200 <rect x="3" y="14" width="6" height="6"></rect>201 <rect x="13" y="14" width="8" height="6"></rect>202 </g>203 </svg>204 </div>205 206 <!-- Recent files -->207 <div class="recent-header">Recent files</div>208 209 <div class="list-wrapper">210 211 <div class="file-item">212 <div class="file-left">213 <div class="file-tag tag-pdf">PDF</div>214 <div class="file-text">215 <div class="title">Summer Dance Workshop.pdf</div>216 <div class="meta">8:12 AM, 133 kB, PDF document</div>217 </div>218 </div>219 <svg width="48" height="48" viewBox="0 0 24 24">220 <path d="M4 9v-5h5M20 15v5h-5M4 15v5h5M20 9v-5h-5" stroke="#cfc5bf" stroke-width="2" fill="none"></path>221 </svg>222 </div>223 <div class="divider"></div>224 225 <div class="file-item">226 <div class="file-left">227 <div class="file-tag tag-pdf">PDF</div>228 <div class="file-text">229 <div class="title">Rome Itinerary.pdf</div>230 <div class="meta">8:11 AM, 1.99 MB, PDF document</div>231 </div>232 </div>233 <svg width="48" height="48" viewBox="0 0 24 24">234 <path d="M4 9v-5h5M20 15v5h-5M4 15v5h5M20 9v-5h-5" stroke="#cfc5bf" stroke-width="2" fill="none"></path>235 </svg>236 </div>237 <div class="divider"></div>238 239 <div class="file-item">240 <div class="file-left">241 <div class="file-tag tag-pdf">PDF</div>242 <div class="file-text">243 <div class="title">Yale courses.pdf</div>244 <div class="meta">8:10 AM, 65.36 kB, PDF document</div>245 </div>246 </div>247 <svg width="48" height="48" viewBox="0 0 24 24">248 <path d="M4 9v-5h5M20 15v5h-5M4 15v5h5M20 9v-5h-5" stroke="#cfc5bf" stroke-width="2" fill="none"></path>249 </svg>250 </div>251 <div class="divider"></div>252 253 <div class="file-item">254 <div class="file-left">255 <div class="file-tag tag-pdf">PDF</div>256 <div class="file-text">257 <div class="title">ycps-2021-2022.pdf</div>258 <div class="meta">8:09 AM, 5.79 MB, PDF document</div>259 </div>260 </div>261 <svg width="48" height="48" viewBox="0 0 24 24">262 <path d="M4 9v-5h5M20 15v5h-5M4 15v5h5M20 9v-5h-5" stroke="#cfc5bf" stroke-width="2" fill="none"></path>263 </svg>264 </div>265 <div class="divider"></div>266 267 <div class="file-item">268 <div class="file-left">269 <div class="file-tag tag-txt">TXT</div>270 <div class="file-text">271 <div class="title">screenshot.txt</div>272 <div class="meta">Nov 7, 426 kB, TXT document</div>273 </div>274 </div>275 <svg width="48" height="48" viewBox="0 0 24 24">276 <path d="M4 9v-5h5M20 15v5h-5M4 15v5h5M20 9v-5h-5" stroke="#cfc5bf" stroke-width="2" fill="none"></path>277 </svg>278 </div>279 <div class="divider"></div>280 281 <div class="file-item">282 <div class="file-left">283 <div class="file-tag tag-txt">TXT</div>284 <div class="file-text">285 <div class="title">actuation_result.txt</div>286 <div class="meta">Nov 7, 8 B, TXT document</div>287 </div>288 </div>289 <svg width="48" height="48" viewBox="0 0 24 24">290 <path d="M4 9v-5h5M20 15v5h-5M4 15v5h5M20 9v-5h-5" stroke="#cfc5bf" stroke-width="2" fill="none"></path>291 </svg>292 </div>293 <div class="divider"></div>294 295 <div class="file-item">296 <div class="file-left">297 <div class="file-tag tag-txt">TXT</div>298 <div class="file-text">299 <div class="title">agents.txt</div>300 <div class="meta">Nov 7, 1.15 kB, TXT document</div>301 </div>302 </div>303 <svg width="48" height="48" viewBox="0 0 24 24">304 <path d="M4 9v-5h5M20 15v5h-5M4 15v5h5M20 9v-5h-5" stroke="#cfc5bf" stroke-width="2" fill="none"></path>305 </svg>306 </div>307 <div class="divider"></div>308 309 <div class="file-item">310 <div class="file-left">311 <div class="file-tag tag-txt">TXT</div>312 <div class="file-text">313 <div class="title">os_info.txt</div>314 <div class="meta">Nov 7, 32 B, TXT document</div>315 </div>316 </div>317 <svg width="48" height="48" viewBox="0 0 24 24">318 <path d="M4 9v-5h5M20 15v5h-5M4 15v5h5M20 9v-5h-5" stroke="#cfc5bf" stroke-width="2" fill="none"></path>319 </svg>320 </div>321 <div class="divider"></div>322 323 </div>324 325</div>326</body>327</html>