GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Files List UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #1f1713; /* dark brown-black */12 color: #e9dfd0;13 }14 15 /* Status bar */16 .status-bar {17 height: 110px;18 padding: 20px 32px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #efe6d8;23 font-size: 42px;24 letter-spacing: 0.5px;25 }26 .status-icons { display: flex; align-items: center; gap: 28px; }27 .status-icons svg { width: 52px; height: 52px; fill: none; stroke: #efe6d8; stroke-width: 6; }28 29 /* App bar with search */30 .app-bar {31 height: 140px;32 padding: 0 26px;33 display: flex; align-items: center; gap: 24px;34 }35 .icon-btn { width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; border-radius: 20px; }36 .icon-btn svg { width: 54px; height: 54px; fill: none; stroke: #e9dfd0; stroke-width: 8; }37 .search {38 flex: 1;39 height: 90px;40 border-radius: 22px;41 background: #322822;42 color: #cabfb0;43 font-size: 40px;44 padding: 0 28px;45 display: flex; align-items: center;46 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);47 }48 .kebab svg { width: 42px; height: 42px; stroke: none; fill: #e9dfd0; }49 50 .separator { height: 2px; background: #423831; margin-top: 18px; }51 52 /* File list */53 .list { padding-bottom: 160px; }54 .file-row {55 display: flex; align-items: center;56 gap: 30px;57 padding: 32px 28px;58 border-top: 1px solid #3b312b;59 }60 .thumb, .doc-icon {61 width: 96px; height: 96px; border-radius: 18px;62 flex-shrink: 0;63 }64 /* Image placeholder per instructions */65 .img-ph {66 width: 96px; height: 96px;67 background: #E0E0E0; border: 1px solid #BDBDBD;68 border-radius: 18px;69 display: flex; justify-content: center; align-items: center;70 color: #757575; font-size: 22px; text-align: center; padding: 8px;71 }72 .doc-icon {73 background: #143a39;74 border: 2px solid #28d3cf;75 display: flex; align-items: center; justify-content: center;76 }77 .doc-icon svg { width: 58px; height: 58px; stroke: #28d3cf; stroke-width: 6; fill: none; }78 79 .pdf-pill {80 width: 72px; height: 72px; border-radius: 12px;81 background: #d86a6a; color: #fff;82 display: flex; align-items: center; justify-content: center;83 font-weight: 700; font-size: 26px;84 }85 86 .file-info { flex: 1; min-width: 0; }87 .title {88 font-size: 42px; line-height: 52px; color: #f1e8da;89 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;90 }91 .meta {92 margin-top: 8px; font-size: 28px; color: #c9bdaf;93 }94 95 .actions {96 width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;97 }98 .actions svg { width: 54px; height: 54px; stroke: #e9dfd0; stroke-width: 8; fill: none; }99 100 /* Bottom gesture bar */101 .gesture {102 position: absolute; bottom: 36px; left: 50%;103 transform: translateX(-50%);104 width: 360px; height: 14px; border-radius: 9px; background: #dcdcdc;105 opacity: 0.85;106 }107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Status bar -->113 <div class="status-bar">114 <div>9:14</div>115 <div class="status-icons">116 <!-- simple cellular/wifi and battery icons -->117 <svg viewBox="0 0 32 32">118 <path d="M2 24 L16 10 L30 24" />119 <circle cx="16" cy="22" r="3" />120 </svg>121 <svg viewBox="0 0 42 28">122 <rect x="2" y="4" width="32" height="20" rx="4"></rect>123 <rect x="36" y="10" width="4" height="8" rx="2"></rect>124 </svg>125 </div>126 </div>127 128 <!-- App bar -->129 <div class="app-bar">130 <div class="icon-btn">131 <svg viewBox="0 0 48 48">132 <path d="M6 10 H42 M6 24 H42 M6 38 H42" />133 </svg>134 </div>135 <div class="search">Search this phone</div>136 <div class="icon-btn kebab">137 <svg viewBox="0 0 24 24">138 <circle cx="12" cy="4" r="3"></circle>139 <circle cx="12" cy="12" r="3"></circle>140 <circle cx="12" cy="20" r="3"></circle>141 </svg>142 </div>143 </div>144 <div class="separator"></div>145 146 <!-- File list -->147 <div class="list">148 <div class="file-row">149 <div class="doc-icon">150 <svg viewBox="0 0 48 48">151 <rect x="10" y="8" width="28" height="32" rx="4"></rect>152 <path d="M28 8 L38 18"></path>153 </svg>154 </div>155 <div class="file-info">156 <div class="title">agents.txt</div>157 <div class="meta">Nov 10, 1.15 kB, TXT document</div>158 </div>159 <div class="actions">160 <svg viewBox="0 0 48 48">161 <path d="M6 18 L6 6 L18 6"></path>162 <path d="M42 30 L42 42 L30 42"></path>163 </svg>164 </div>165 </div>166 167 <div class="file-row">168 <div class="img-ph">[IMG: Fitbit screenshot]</div>169 <div class="file-info">170 <div class="title">fitbitshare_2123586381.PNG</div>171 <div class="meta">Oct 30, 93.48 kB, PNG image</div>172 </div>173 <div class="actions">174 <svg viewBox="0 0 48 48">175 <path d="M6 18 L6 6 L18 6"></path>176 <path d="M42 30 L42 42 L30 42"></path>177 </svg>178 </div>179 </div>180 181 <div class="file-row">182 <div class="img-ph">[IMG: Fitbit screenshot]</div>183 <div class="file-info">184 <div class="title">fitbitshare_2123101703.PNG</div>185 <div class="meta">Oct 30, 92.77 kB, PNG image</div>186 </div>187 <div class="actions">188 <svg viewBox="0 0 48 48">189 <path d="M6 18 L6 6 L18 6"></path>190 <path d="M42 30 L42 42 L30 42"></path>191 </svg>192 </div>193 </div>194 195 <div class="file-row">196 <div class="img-ph">[IMG: Fitbit screenshot]</div>197 <div class="file-info">198 <div class="title">fitbitshare_2123014230.PNG</div>199 <div class="meta">Oct 30, 92.77 kB, PNG image</div>200 </div>201 <div class="actions">202 <svg viewBox="0 0 48 48">203 <path d="M6 18 L6 6 L18 6"></path>204 <path d="M42 30 L42 42 L30 42"></path>205 </svg>206 </div>207 </div>208 209 <div class="file-row">210 <div class="img-ph">[IMG: Fitbit screenshot]</div>211 <div class="file-info">212 <div class="title">fitbitshare_2122912072.PNG</div>213 <div class="meta">Oct 30, 93.30 kB, PNG image</div>214 </div>215 <div class="actions">216 <svg viewBox="0 0 48 48">217 <path d="M6 18 L6 6 L18 6"></path>218 <path d="M42 30 L42 42 L30 42"></path>219 </svg>220 </div>221 </div>222 223 <div class="file-row">224 <div class="pdf-pill">PDF</div>225 <div class="file-info">226 <div class="title">Amsterdam-1.pdf</div>227 <div class="meta">Oct 6, 8.45 MB, PDF document</div>228 </div>229 <div class="actions">230 <svg viewBox="0 0 48 48">231 <path d="M6 18 L6 6 L18 6"></path>232 <path d="M42 30 L42 42 L30 42"></path>233 </svg>234 </div>235 </div>236 237 <div class="file-row">238 <div class="pdf-pill">PDF</div>239 <div class="file-info">240 <div class="title">Venice tour.pdf</div>241 <div class="meta">Oct 6, 5.99 MB, PDF document</div>242 </div>243 <div class="actions">244 <svg viewBox="0 0 48 48">245 <path d="M6 18 L6 6 L18 6"></path>246 <path d="M42 30 L42 42 L30 42"></path>247 </svg>248 </div>249 </div>250 251 <div class="file-row">252 <div class="pdf-pill">PDF</div>253 <div class="file-info">254 <div class="title">Amsterdam (1).pdf</div>255 <div class="meta">Oct 6, 8.45 MB, PDF document</div>256 </div>257 <div class="actions">258 <svg viewBox="0 0 48 48">259 <path d="M6 18 L6 6 L18 6"></path>260 <path d="M42 30 L42 42 L30 42"></path>261 </svg>262 </div>263 </div>264 265 <div class="file-row">266 <div class="img-ph">[IMG: Concert crowd]</div>267 <div class="file-info">268 <div class="title">tomorrow land image.png</div>269 <div class="meta">Oct 6, 1.30 MB, PNG image</div>270 </div>271 <div class="actions">272 <svg viewBox="0 0 48 48">273 <path d="M6 18 L6 6 L18 6"></path>274 <path d="M42 30 L42 42 L30 42"></path>275 </svg>276 </div>277 </div>278 279 <div class="file-row">280 <div class="img-ph">[IMG: City view]</div>281 <div class="file-info">282 <div class="title">vanice file.jpg</div>283 <div class="meta">Oct 6, 125 kB, JPG image</div>284 </div>285 <div class="actions">286 <svg viewBox="0 0 48 48">287 <path d="M6 18 L6 6 L18 6"></path>288 <path d="M42 30 L42 42 L30 42"></path>289 </svg>290 </div>291 </div>292 293 <div class="file-row">294 <div class="pdf-pill">PDF</div>295 <div class="file-info">296 <div class="title">Tomorrowland.pdf</div>297 <div class="meta">Oct 6, 2.41 MB, PDF document</div>298 </div>299 <div class="actions">300 <svg viewBox="0 0 48 48">301 <path d="M6 18 L6 6 L18 6"></path>302 <path d="M42 30 L42 42 L30 42"></path>303 </svg>304 </div>305 </div>306 </div>307 308 <div class="gesture"></div>309</div>310</body>311</html>