GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1440, initial-scale=1.0">5<title>Mobile Files UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1440px; height: 3120px;10    position: relative; overflow: hidden;11    background: #111315; color: #EDEDED;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; left: 0; top: 0; width: 100%;17    height: 120px; padding: 0 60px;18    display: flex; align-items: center; justify-content: space-between;19    color: #CFCFCF; font-size: 44px; letter-spacing: 0.5px;20  }21  .status-left { display: flex; align-items: center; gap: 26px; }22  .status-right { display: flex; align-items: center; gap: 28px; }23  .pill {24    padding: 6px 14px; border-radius: 12px;25    background: #2A2D31; color: #DADADA; font-size: 34px;26  }27  .dot { width: 14px; height: 14px; border-radius: 50%; background: #9AA0A6; display: inline-block; vertical-align: middle; }28 29  /* Search / App bar */30  .app-bar {31    position: absolute; top: 120px; left: 0; width: 100%;32    padding: 26px 48px 30px 48px;33  }34  .search-box {35    background: #1B1F23; border-radius: 24px;36    height: 140px; display: flex; align-items: center;37    padding: 0 36px; box-shadow: inset 0 0 0 1px #2C3136;38  }39  .search-input {40    flex: 1; color: #DADADA; font-size: 56px;41  }42  .icon-btn {43    width: 90px; height: 90px; border-radius: 18px;44    display: flex; align-items: center; justify-content: center;45    color: #DADADA;46  }47  .icon-btn svg { width: 72px; height: 72px; fill: none; stroke: #DADADA; stroke-width: 6; }48 49  /* List */50  .list {51    position: absolute; top: 320px; left: 0; right: 0; bottom: 0;52    padding: 0 40px;53  }54  .row {55    display: grid;56    grid-template-columns: 140px 1fr 240px;57    align-items: center;58    gap: 30px;59    padding: 40px 8px;60    border-bottom: 1px solid #25292E;61  }62  .type-badge {63    width: 100px; height: 90px; border-radius: 14px;64    display: flex; align-items: center; justify-content: center;65    font-weight: 700; font-size: 40px; letter-spacing: 0.5px;66    color: #111315;67  }68  .badge-txt { background: #87C3FF; color: #0B1220; }69  .badge-pdf { background: #F68B8B; color: #2B0E0E; }70  .title {71    font-size: 64px; color: #F3F3F3; margin-bottom: 12px;72  }73  .meta {74    font-size: 42px; color: #9AA0A6;75  }76  .actions {77    display: flex; justify-content: flex-end; gap: 28px;78  }79  .square-icon {80    width: 104px; height: 104px; border-radius: 16px;81    border: 1px solid #3A3F45; display: flex; align-items: center; justify-content: center;82  }83  .square-icon svg { width: 72px; height: 72px; stroke: #C8CDD2; stroke-width: 6; fill: none; }84  /* Divider spacing mimic */85</style>86</head>87<body>88<div id="render-target">89 90  <!-- Status Bar -->91  <div class="status-bar">92    <div class="status-left">93      <div>9:46</div>94      <div class="pill">☕</div>95      <div class="pill">S</div>96      <div class="pill">CNN</div>97      <div class="pill">▢</div>98      <span class="dot"></span>99    </div>100    <div class="status-right">101      <div class="pill">wifi</div>102      <div class="pill">🔋</div>103    </div>104  </div>105 106  <!-- App/Search Bar -->107  <div class="app-bar">108    <div class="search-box">109      <div class="icon-btn" aria-label="menu">110        <!-- Hamburger -->111        <svg viewBox="0 0 24 24">112          <path d="M3 6h18M3 12h18M3 18h18"/>113        </svg>114      </div>115      <div class="search-input">Search this phone</div>116      <div class="icon-btn" aria-label="more">117        <!-- Vertical ellipsis -->118        <svg viewBox="0 0 24 24">119          <circle cx="12" cy="5" r="2.5"></circle>120          <circle cx="12" cy="12" r="2.5"></circle>121          <circle cx="12" cy="19" r="2.5"></circle>122        </svg>123      </div>124    </div>125  </div>126 127  <!-- File List -->128  <div class="list">129 130    <!-- Row: small txt -->131    <div class="row">132      <div class="type-badge badge-txt">TXT</div>133      <div>134        <div class="title">Search this phone</div>135        <div class="meta">Nov 7, 8 B, TXT document</div>136      </div>137      <div class="actions">138        <div class="square-icon">139          <!-- open in new -->140          <svg viewBox="0 0 24 24">141            <rect x="4" y="4" width="16" height="16" rx="3"></rect>142          </svg>143        </div>144        <div class="square-icon">145          <svg viewBox="0 0 24 24">146            <path d="M8 16l8-8"></path>147            <path d="M12 8h4v4"></path>148            <rect x="4" y="4" width="16" height="16" rx="3"></rect>149          </svg>150        </div>151      </div>152    </div>153 154    <div class="row">155      <div class="type-badge badge-txt">TXT</div>156      <div>157        <div class="title">agents.txt</div>158        <div class="meta">Nov 7, 1.15 kB, TXT document</div>159      </div>160      <div class="actions">161        <div class="square-icon">162          <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg>163        </div>164        <div class="square-icon">165          <svg viewBox="0 0 24 24">166            <path d="M8 16l8-8"></path>167            <path d="M12 8h4v4"></path>168            <rect x="4" y="4" width="16" height="16" rx="3"></rect>169          </svg>170        </div>171      </div>172    </div>173 174    <div class="row">175      <div class="type-badge badge-txt">TXT</div>176      <div>177        <div class="title">os_info.txt</div>178        <div class="meta">Nov 7, 32 B, TXT document</div>179      </div>180      <div class="actions">181        <div class="square-icon">182          <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg>183        </div>184        <div class="square-icon">185          <svg viewBox="0 0 24 24">186            <path d="M8 16l8-8"></path>187            <path d="M12 8h4v4"></path>188            <rect x="4" y="4" width="16" height="16" rx="3"></rect>189          </svg>190        </div>191      </div>192    </div>193 194    <div class="row">195      <div class="type-badge badge-pdf">PDF</div>196      <div>197        <div class="title">Shopping list.pdf</div>198        <div class="meta">Oct 9, 776 B, PDF document</div>199      </div>200      <div class="actions">201        <div class="square-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>202        <div class="square-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8"></path><path d="M12 8h4v4"></path><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>203      </div>204    </div>205 206    <div class="row">207      <div class="type-badge badge-pdf">PDF</div>208      <div>209        <div class="title">08.24_dinner-veg (3).pdf</div>210        <div class="meta">Aug 25, 257 kB, PDF document</div>211      </div>212      <div class="actions">213        <div class="square-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>214        <div class="square-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8"></path><path d="M12 8h4v4"></path><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>215      </div>216    </div>217 218    <div class="row">219      <div class="type-badge badge-pdf">PDF</div>220      <div>221        <div class="title">08.24_dinner (4).pdf</div>222        <div class="meta">Aug 25, 278 kB, PDF document</div>223      </div>224      <div class="actions">225        <div class="square-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>226        <div class="square-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8"></path><path d="M12 8h4v4"></path><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>227      </div>228    </div>229 230    <div class="row">231      <div class="type-badge badge-pdf">PDF</div>232      <div>233        <div class="title">08.24_dinner-veg (2).pdf</div>234        <div class="meta">Aug 25, 257 kB, PDF document</div>235      </div>236      <div class="actions">237        <div class="square-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>238        <div class="square-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8"></path><path d="M12 8h4v4"></path><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>239      </div>240    </div>241 242    <div class="row">243      <div class="type-badge badge-pdf">PDF</div>244      <div>245        <div class="title">08.24_dinner (3).pdf</div>246        <div class="meta">Aug 25, 278 kB, PDF document</div>247      </div>248      <div class="actions">249        <div class="square-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>250        <div class="square-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8"></path><path d="M12 8h4v4"></path><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>251      </div>252    </div>253 254    <div class="row">255      <div class="type-badge badge-pdf">PDF</div>256      <div>257        <div class="title">08.24_dinner (2).pdf</div>258        <div class="meta">Aug 25, 278 kB, PDF document</div>259      </div>260      <div class="actions">261        <div class="square-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>262        <div class="square-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8"></path><path d="M12 8h4v4"></path><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>263      </div>264    </div>265 266    <div class="row">267      <div class="type-badge badge-pdf">PDF</div>268      <div>269        <div class="title">Design project.pdf</div>270        <div class="meta">Aug 25, 205 kB, PDF document</div>271      </div>272      <div class="actions">273        <div class="square-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>274        <div class="square-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8"></path><path d="M12 8h4v4"></path><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>275      </div>276    </div>277 278    <div class="row">279      <div class="type-badge badge-pdf">PDF</div>280      <div>281        <div class="title">08.24_dinner (1).pdf</div>282        <div class="meta">Aug 25, 278 kB, PDF document</div>283      </div>284      <div class="actions">285        <div class="square-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>286        <div class="square-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8"></path><path d="M12 8h4v4"></path><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>287      </div>288    </div>289 290    <div class="row">291      <div class="type-badge badge-pdf">PDF</div>292      <div>293        <div class="title">08.24_dinner-veg (1).pdf</div>294        <div class="meta">Aug 25, 257 kB, PDF document</div>295      </div>296      <div class="actions">297        <div class="square-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>298        <div class="square-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8"></path><path d="M12 8h4v4"></path><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg></div>299      </div>300    </div>301 302  </div>303</div>304</body>305</html>