GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile Files List UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #0f1214;13    color: #fff;14    border-radius: 44px;15    box-shadow: 0 30px 80px rgba(0,0,0,0.55);16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    background: #0a0c0e;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 60px;27    font-size: 46px;28    letter-spacing: 0.5px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .icon {36    width: 56px;37    height: 56px;38    display: inline-flex;39    justify-content: center;40    align-items: center;41  }42  .icon svg { width: 100%; height: 100%; fill: #ffffff; }43 44  /* Search / toolbar */45  .toolbar {46    height: 160px;47    display: flex;48    align-items: center;49    padding: 0 40px;50    gap: 34px;51    background: #121518;52    border-bottom: 2px solid #1e2227;53  }54  .btn-round {55    width: 110px;56    height: 110px;57    border-radius: 24px;58    background: #1b1f24;59    display: flex;60    align-items: center;61    justify-content: center;62    border: 2px solid #2a2f36;63  }64  .search-box {65    flex: 1;66    height: 110px;67    border-radius: 26px;68    background: #1b1f24;69    border: 2px solid #2a2f36;70    display: flex;71    align-items: center;72    padding: 0 36px;73    color: #9da8b5;74    font-size: 50px;75  }76  .overflow {77    width: 110px;78    height: 110px;79    border-radius: 24px;80    background: #1b1f24;81    border: 2px solid #2a2f36;82    display: flex;83    align-items: center;84    justify-content: center;85  }86 87  .section-title {88    padding: 30px 60px 10px 60px;89    font-size: 54px;90    color: #cdd3da;91  }92 93  /* List */94  .list {95    padding-top: 10px;96  }97  .item {98    display: flex;99    align-items: center;100    padding: 28px 60px;101    border-bottom: 2px solid #1e2227;102    gap: 40px;103  }104  .file-icon {105    width: 84px;106    height: 84px;107    border-radius: 18px;108    display: flex;109    justify-content: center;110    align-items: center;111    font-weight: bold;112    font-size: 34px;113    color: #fff;114    border: 2px solid #2a2f36;115  }116  .file-icon.pdf { background: #cf5c5c; }117  .file-icon.txt { background: #4a86cf; }118  .item-text {119    flex: 1;120    min-width: 0;121  }122  .name {123    font-size: 58px;124    color: #f3f5f7;125    white-space: nowrap;126    overflow: hidden;127    text-overflow: ellipsis;128  }129  .meta {130    margin-top: 14px;131    font-size: 42px;132    color: #9aa2ac;133  }134  .actions {135    display: flex;136    gap: 24px;137  }138  .square-btn {139    width: 82px;140    height: 82px;141    border-radius: 16px;142    background: #1b1f24;143    border: 2px solid #2a2f36;144    display: flex;145    align-items: center;146    justify-content: center;147  }148  .square-btn svg { width: 60%; height: 60%; fill: #cfd6de; }149 150  /* Simple dividers for visual rhythm */151  .spacer { height: 10px; }152</style>153</head>154<body>155<div id="render-target">156 157  <!-- Status bar -->158  <div class="status-bar">159    <div>9:44</div>160    <div class="status-icons">161      <div class="icon">162        <!-- Wi-Fi -->163        <svg viewBox="0 0 24 24">164          <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>165        </svg>166      </div>167      <div class="icon">168        <!-- Cellular -->169        <svg viewBox="0 0 24 24">170          <path d="M3 17h3v4H3v-4zm5-7h3v11H8V10zm5-4h3v15h-3V6zm5-2h3v17h-3V4z"/>171        </svg>172      </div>173      <div class="icon">174        <!-- Battery -->175        <svg viewBox="0 0 24 24">176          <path d="M20 7h2v10h-2V7zM3 6h16v12H3V6zm2 2v8h12V8H5z"/>177        </svg>178      </div>179    </div>180  </div>181 182  <!-- Toolbar with search -->183  <div class="toolbar">184    <div class="btn-round">185      <!-- Hamburger -->186      <svg viewBox="0 0 24 24">187        <path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z"/>188      </svg>189    </div>190    <div class="search-box">Search this phone</div>191    <div class="overflow">192      <!-- More vertical -->193      <svg viewBox="0 0 24 24">194        <circle cx="12" cy="5" r="2"/>195        <circle cx="12" cy="12" r="2"/>196        <circle cx="12" cy="19" r="2"/>197      </svg>198    </div>199  </div>200 201  <div class="section-title">agents.txt</div>202 203  <div class="list">204    <!-- os_info.txt -->205    <div class="item">206      <div class="file-icon txt">TXT</div>207      <div class="item-text">208        <div class="name">os_info.txt</div>209        <div class="meta">Nov 7, 32 B, TXT document</div>210      </div>211      <div class="actions">212        <div class="square-btn">213          <!-- open-in-new -->214          <svg viewBox="0 0 24 24">215            <path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/>216          </svg>217        </div>218        <div class="square-btn">219          <!-- share/export -->220          <svg viewBox="0 0 24 24">221            <path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/>222          </svg>223        </div>224      </div>225    </div>226 227    <!-- Shopping list.pdf -->228    <div class="item">229      <div class="file-icon pdf">PDF</div>230      <div class="item-text">231        <div class="name">Shopping list.pdf</div>232        <div class="meta">Oct 9, 776 B, PDF document</div>233      </div>234      <div class="actions">235        <div class="square-btn">236          <svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg>237        </div>238        <div class="square-btn">239          <svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/></svg>240        </div>241      </div>242    </div>243 244    <!-- 08.24_dinner-veg (3).pdf -->245    <div class="item">246      <div class="file-icon pdf">PDF</div>247      <div class="item-text">248        <div class="name">08.24_dinner-veg (3).pdf</div>249        <div class="meta">Aug 25, 257 kB, PDF document</div>250      </div>251      <div class="actions">252        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg></div>253        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/></svg></div>254      </div>255    </div>256 257    <!-- 08.24_dinner (4).pdf -->258    <div class="item">259      <div class="file-icon pdf">PDF</div>260      <div class="item-text">261        <div class="name">08.24_dinner (4).pdf</div>262        <div class="meta">Aug 25, 278 kB, PDF document</div>263      </div>264      <div class="actions">265        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg></div>266        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/></svg></div>267      </div>268    </div>269 270    <!-- 08.24_dinner-veg (2).pdf -->271    <div class="item">272      <div class="file-icon pdf">PDF</div>273      <div class="item-text">274        <div class="name">08.24_dinner-veg (2).pdf</div>275        <div class="meta">Aug 25, 257 kB, PDF document</div>276      </div>277      <div class="actions">278        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg></div>279        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/></svg></div>280      </div>281    </div>282 283    <!-- 08.24_dinner (3).pdf -->284    <div class="item">285      <div class="file-icon pdf">PDF</div>286      <div class="item-text">287        <div class="name">08.24_dinner (3).pdf</div>288        <div class="meta">Aug 25, 278 kB, PDF document</div>289      </div>290      <div class="actions">291        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg></div>292        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/></svg></div>293      </div>294    </div>295 296    <!-- 08.24_dinner (2).pdf -->297    <div class="item">298      <div class="file-icon pdf">PDF</div>299      <div class="item-text">300        <div class="name">08.24_dinner (2).pdf</div>301        <div class="meta">Aug 25, 278 kB, PDF document</div>302      </div>303      <div class="actions">304        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg></div>305        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/></svg></div>306      </div>307    </div>308 309    <!-- New design.pdf -->310    <div class="item">311      <div class="file-icon pdf">PDF</div>312      <div class="item-text">313        <div class="name">New design.pdf</div>314        <div class="meta">Aug 25, 205 kB, PDF document</div>315      </div>316      <div class="actions">317        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg></div>318        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/></svg></div>319      </div>320    </div>321 322    <!-- 08.24_dinner (1).pdf -->323    <div class="item">324      <div class="file-icon pdf">PDF</div>325      <div class="item-text">326        <div class="name">08.24_dinner (1).pdf</div>327        <div class="meta">Aug 25, 278 kB, PDF document</div>328      </div>329      <div class="actions">330        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg></div>331        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/></svg></div>332      </div>333    </div>334 335    <!-- 08.24_dinner-veg (1).pdf -->336    <div class="item">337      <div class="file-icon pdf">PDF</div>338      <div class="item-text">339        <div class="name">08.24_dinner-veg (1).pdf</div>340        <div class="meta">Aug 25, 257 kB, PDF document</div>341      </div>342      <div class="actions">343        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg></div>344        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/></svg></div>345      </div>346    </div>347 348    <!-- 08.24_dinner-veg.pdf -->349    <div class="item">350      <div class="file-icon pdf">PDF</div>351      <div class="item-text">352        <div class="name">08.24_dinner-veg.pdf</div>353        <div class="meta">Aug 25, 257 kB, PDF document</div>354      </div>355      <div class="actions">356        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.4l-6.8 6.8-1.4-1.4L17.6 5H14V3zM5 5h7v2H7v10h10v-5h2v7H5V5z"/></svg></div>357        <div class="square-btn"><svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5v-2z"/></svg></div>358      </div>359    </div>360  </div>361 362</div>363</body>364</html>