GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Files - Search</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EDEDED;16    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 110px;25    width: 100%;26    background: #111316;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 36px;31    box-sizing: border-box;32    color: #ffffff;33    font-size: 36px;34    letter-spacing: 0.3px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .status-icons svg { width: 44px; height: 44px; }42 43  /* App bar */44  .app-bar {45    position: absolute;46    top: 110px;47    left: 0;48    width: 100%;49    height: 120px;50    background: #171717;51    display: flex;52    align-items: center;53    padding: 0 24px;54    box-sizing: border-box;55    border-bottom: 1px solid #1f1f1f;56  }57  .app-left, .app-right {58    display: flex;59    align-items: center;60  }61  .app-left { gap: 24px; }62  .app-right { margin-left: auto; gap: 30px; }63  .app-title {64    font-size: 40px;65    color: #e9e9e9;66  }67  .app-bar svg { width: 56px; height: 56px; fill: none; stroke: #e9e9e9; stroke-width: 3; }68 69  /* Filters */70  .filters {71    position: absolute;72    top: 230px;73    left: 0;74    width: 100%;75    padding: 0 24px;76    box-sizing: border-box;77    display: flex;78    align-items: center;79    gap: 22px;80  }81  .chip {82    display: flex;83    align-items: center;84    gap: 16px;85    padding: 18px 26px;86    border-radius: 26px;87    background: #1b1b1b;88    border: 1px solid #2b2b2b;89    color: #dedede;90    font-size: 30px;91    line-height: 1;92    white-space: nowrap;93  }94  .chip svg { width: 40px; height: 40px; stroke: #cfcfcf; stroke-width: 2.6; fill: none; }95 96  /* List */97  .list {98    position: absolute;99    top: 330px;100    left: 0;101    width: 100%;102    padding: 0 24px;103    box-sizing: border-box;104  }105  .item {106    display: flex;107    align-items: center;108    padding: 24px 0;109    gap: 28px;110  }111  .thumb {112    width: 120px;113    height: 120px;114    border-radius: 14px;115    background: #1f1f1f;116    border: 1px solid #2a2a2a;117    display: flex;118    align-items: center;119    justify-content: center;120  }121  .zip-icon {122    width: 86px;123    height: 86px;124  }125  .meta {126    flex: 1;127    display: flex;128    flex-direction: column;129    gap: 10px;130  }131  .title {132    font-size: 40px;133    color: #f1f1f1;134  }135  .subtitle {136    font-size: 28px;137    color: #9DA4AE;138  }139  .more {140    width: 56px;141    height: 56px;142  }143  .divider {144    height: 1px;145    background: #1b1b1b;146    margin-left: 176px; /* align under text (after thumbnail) */147  }148 149  /* Bottom gesture bar */150  .gesture {151    position: absolute;152    bottom: 36px;153    left: 50%;154    transform: translateX(-50%);155    width: 360px;156    height: 10px;157    background: #EDEDED;158    border-radius: 8px;159    opacity: 0.85;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <!-- Status Bar -->167  <div class="status-bar">168    <div>10:43</div>169    <div class="status-icons">170      <!-- Simple mail envelope icon -->171      <svg viewBox="0 0 24 24">172        <path d="M3 6h18v12H3z"></path>173        <path d="M3 6l9 7 9-7"></path>174      </svg>175      <!-- Cloud icon -->176      <svg viewBox="0 0 24 24">177        <path d="M7 16a5 5 0 010-10 6 6 0 0111 3h1a4 4 0 010 8H7z"></path>178      </svg>179      <!-- Wi-Fi icon -->180      <svg viewBox="0 0 24 24">181        <path d="M2 9c5-4 15-4 20 0"></path>182        <path d="M5 12c3-3 11-3 14 0"></path>183        <path d="M8 15c2-2 6-2 8 0"></path>184        <circle cx="12" cy="18" r="1.5" fill="#e9e9e9" stroke="none"></circle>185      </svg>186      <!-- Battery icon -->187      <svg viewBox="0 0 26 24">188        <rect x="2" y="6" width="18" height="12" rx="2"></rect>189        <rect x="20.5" y="9" width="3.5" height="6" rx="1.2"></rect>190        <rect x="4" y="8" width="14" height="8" fill="#e9e9e9" stroke="none"></rect>191      </svg>192    </div>193  </div>194 195  <!-- App Bar -->196  <div class="app-bar">197    <div class="app-left">198      <!-- Back arrow -->199      <svg viewBox="0 0 24 24">200        <path d="M15 19L8 12l7-7"></path>201      </svg>202      <div class="app-title">doc x.zip</div>203    </div>204    <div class="app-right">205      <!-- Clear X -->206      <svg viewBox="0 0 24 24">207        <path d="M5 5l14 14M19 5L5 19"></path>208      </svg>209      <!-- Grid icon -->210      <svg viewBox="0 0 24 24">211        <rect x="3" y="3" width="7" height="7"></rect>212        <rect x="14" y="3" width="7" height="7"></rect>213        <rect x="3" y="14" width="7" height="7"></rect>214        <rect x="14" y="14" width="7" height="7"></rect>215      </svg>216      <!-- Kebab menu -->217      <svg class="more" viewBox="0 0 24 24">218        <circle cx="12" cy="5" r="2.2" fill="#e9e9e9" stroke="none"></circle>219        <circle cx="12" cy="12" r="2.2" fill="#e9e9e9" stroke="none"></circle>220        <circle cx="12" cy="19" r="2.2" fill="#e9e9e9" stroke="none"></circle>221      </svg>222    </div>223  </div>224 225  <!-- Filter Chips -->226  <div class="filters">227    <div class="chip">228      <svg viewBox="0 0 24 24">229        <circle cx="6" cy="12" r="3"></circle>230        <rect x="12" y="6" width="9" height="12" rx="4"></rect>231      </svg>232      Audio233    </div>234    <div class="chip" style="border-color:#3a3a3a;">235      <svg viewBox="0 0 24 24">236        <rect x="3" y="4" width="14" height="16" rx="2"></rect>237        <path d="M7 8h6M7 12h6M7 16h6"></path>238        <rect x="18" y="8" width="3" height="8" rx="0.8"></rect>239      </svg>240      Documents &amp; other241    </div>242    <div class="chip">243      <svg viewBox="0 0 24 24">244        <rect x="3" y="4" width="18" height="14" rx="2"></rect>245        <path d="M3 15l5-6 3 3 3-4 7 7"></path>246      </svg>247      Images248    </div>249  </div>250 251  <!-- Results List -->252  <div class="list">253    <!-- Item 1 -->254    <div class="item">255      <div class="thumb">256        <!-- ZIP file icon (simplified) -->257        <svg class="zip-icon" viewBox="0 0 24 24">258          <rect x="4" y="3" width="16" height="18" rx="2" fill="#F4A261" stroke="#E29578" stroke-width="1.5"></rect>259          <rect x="9" y="5" width="6" height="2.2" fill="#00000055" stroke="none"></rect>260          <rect x="11" y="8" width="2" height="2" fill="#333"></rect>261          <rect x="11" y="11" width="2" height="2" fill="#333"></rect>262          <rect x="11" y="14" width="2" height="2" fill="#333"></rect>263        </svg>264      </div>265      <div class="meta">266        <div class="title">Archive.zip</div>267        <div class="subtitle">445 B, Jul 7</div>268      </div>269      <svg class="more" viewBox="0 0 24 24">270        <circle cx="12" cy="5" r="2.2" fill="#cfcfcf" stroke="none"></circle>271        <circle cx="12" cy="12" r="2.2" fill="#cfcfcf" stroke="none"></circle>272        <circle cx="12" cy="19" r="2.2" fill="#cfcfcf" stroke="none"></circle>273      </svg>274    </div>275    <div class="divider"></div>276 277    <!-- Item 2 -->278    <div class="item">279      <div class="thumb">280        <svg class="zip-icon" viewBox="0 0 24 24">281          <rect x="4" y="3" width="16" height="18" rx="2" fill="#F4A261" stroke="#E29578" stroke-width="1.5"></rect>282          <rect x="9" y="5" width="6" height="2.2" fill="#00000055" stroke="none"></rect>283          <rect x="11" y="8" width="2" height="2" fill="#333"></rect>284          <rect x="11" y="11" width="2" height="2" fill="#333"></rect>285          <rect x="11" y="14" width="2" height="2" fill="#333"></rect>286        </svg>287      </div>288      <div class="meta">289        <div class="title">Doc X.zip</div>290        <div class="subtitle">397 B, Jul 7</div>291      </div>292      <svg class="more" viewBox="0 0 24 24">293        <circle cx="12" cy="5" r="2.2" fill="#cfcfcf" stroke="none"></circle>294        <circle cx="12" cy="12" r="2.2" fill="#cfcfcf" stroke="none"></circle>295        <circle cx="12" cy="19" r="2.2" fill="#cfcfcf" stroke="none"></circle>296      </svg>297    </div>298  </div>299 300  <!-- Bottom gesture bar -->301  <div class="gesture"></div>302 303</div>304</body>305</html>