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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #1c2014; /* dark olive */15    color: #EDEDEB;16    font-family: "Segoe UI", Arial, sans-serif;17    box-sizing: border-box;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    right: 0;26    height: 96px;27    padding: 0 40px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #F1F2EB;32    font-weight: 600;33    font-size: 38px;34    letter-spacing: 0.6px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .status-icons svg { fill: none; stroke: #F1F2EB; stroke-width: 2.4; }42 43  /* Header / search row */44  .header {45    position: absolute;46    top: 96px;47    left: 0;48    right: 0;49    height: 140px;50    padding: 0 32px;51    display: flex;52    align-items: center;53    gap: 24px;54    border-bottom: 1px solid #2a2d1d;55  }56  .header .search-text {57    flex: 1;58    font-size: 48px;59    color: #F5F6EE;60  }61  .header .icon-btn {62    width: 64px;63    height: 64px;64    display: inline-flex;65    align-items: center;66    justify-content: center;67    border-radius: 16px;68  }69  .header .icon-btn svg { stroke: #EDEDEB; fill: none; stroke-width: 2.6; }70 71  /* Filter chips */72  .chips {73    position: absolute;74    top: 236px;75    left: 24px;76    right: 24px;77    height: 104px;78    display: flex;79    align-items: center;80    gap: 24px;81  }82  .chip {83    display: inline-flex;84    align-items: center;85    gap: 16px;86    padding: 18px 26px;87    border: 1.5px solid #8A936B;88    border-radius: 28px;89    color: #E8EBD8;90    font-size: 34px;91    white-space: nowrap;92  }93  .chip svg { width: 36px; height: 36px; stroke: #DDE3C2; fill: none; stroke-width: 2; }94 95  /* List area */96  .list {97    position: absolute;98    top: 360px;99    left: 0;100    right: 0;101  }102  .item {103    display: flex;104    align-items: center;105    padding: 24px 32px;106    border-bottom: 1px solid #232615;107  }108  .doc-thumb {109    width: 120px;110    height: 120px;111    border-radius: 24px;112    background: #45A7F3;113    display: flex;114    align-items: center;115    justify-content: center;116    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);117    margin-right: 28px;118  }119  .doc-thumb svg { width: 70px; height: 70px; }120  .item-text {121    flex: 1;122  }123  .item-title {124    font-size: 46px;125    margin-bottom: 8px;126    color: #F3F4ED;127  }128  .item-sub {129    font-size: 30px;130    color: #AEB6A2;131  }132  .dots {133    width: 48px;134    height: 100%;135    display: flex;136    align-items: center;137    justify-content: center;138  }139  .dots span {140    width: 8px;141    height: 8px;142    background: #D9DCCF;143    border-radius: 50%;144    display: block;145    margin: 6px 0;146  }147 148  /* Snackbar */149  .snackbar {150    position: absolute;151    left: 0;152    right: 0;153    bottom: 120px;154    height: 110px;155    background: #212613;156    border-top: 6px solid #BBD16A;157    display: flex;158    align-items: center;159    padding: 0 32px;160    font-size: 34px;161    color: #E9ECDD;162  }163 164  /* Gesture bar */165  .home-indicator {166    position: absolute;167    left: 50%;168    transform: translateX(-50%);169    bottom: 40px;170    width: 240px;171    height: 12px;172    background: #FFFFFF;173    opacity: 0.9;174    border-radius: 8px;175  }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Status Bar -->182  <div class="status-bar">183    <div class="time">10:17</div>184    <div class="status-icons">185      <!-- cellular -->186      <svg viewBox="0 0 24 24" width="40" height="40">187        <path d="M3 21h2v-4H3zM7 21h2v-8H7zM11 21h2v-12h-2zM15 21h2V5h-2zM19 21h2V3h-2z"></path>188      </svg>189      <!-- cloud -->190      <svg viewBox="0 0 24 24" width="40" height="40">191        <path d="M7 17h9a4 4 0 0 0 0-8 5 5 0 0 0-9-2 4 4 0 0 0 0 10z"></path>192      </svg>193      <!-- wifi -->194      <svg viewBox="0 0 24 24" width="40" height="40">195        <path d="M2 9c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0"></path>196        <circle cx="12" cy="18" r="1.8" fill="#F1F2EB"></circle>197      </svg>198      <!-- battery -->199      <svg viewBox="0 0 28 24" width="48" height="40">200        <rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect>201        <rect x="23" y="9" width="3" height="6" rx="1"></rect>202        <rect x="4" y="8" width="14" height="8" fill="#F1F2EB"></rect>203      </svg>204    </div>205  </div>206 207  <!-- Header Search Row -->208  <div class="header">209    <!-- Back -->210    <div class="icon-btn">211      <svg viewBox="0 0 24 24">212        <path d="M15 5L6 12l9 7"></path>213      </svg>214    </div>215    <div class="search-text">month finance</div>216    <!-- Clear -->217    <div class="icon-btn">218      <svg viewBox="0 0 24 24">219        <path d="M5 5l14 14M19 5L5 19"></path>220      </svg>221    </div>222    <!-- Grid -->223    <div class="icon-btn">224      <svg viewBox="0 0 24 24">225        <rect x="3" y="3" width="6" height="6" rx="1"></rect>226        <rect x="10" y="3" width="6" height="6" rx="1"></rect>227        <rect x="17" y="3" width="4" height="6" rx="1"></rect>228        <rect x="3" y="10" width="6" height="6" rx="1"></rect>229        <rect x="10" y="10" width="6" height="6" rx="1"></rect>230        <rect x="17" y="10" width="4" height="6" rx="1"></rect>231      </svg>232    </div>233    <!-- Overflow -->234    <div class="icon-btn">235      <svg viewBox="0 0 24 24">236        <circle cx="12" cy="5" r="1.8" fill="#EDEDEB"></circle>237        <circle cx="12" cy="12" r="1.8" fill="#EDEDEB"></circle>238        <circle cx="12" cy="19" r="1.8" fill="#EDEDEB"></circle>239      </svg>240    </div>241  </div>242 243  <!-- Filter Chips -->244  <div class="chips">245    <div class="chip">246      <svg viewBox="0 0 24 24">247        <path d="M4 12a8 8 0 0 1 16 0"></path>248        <rect x="4" y="13" width="4" height="6" rx="1"></rect>249        <rect x="16" y="13" width="4" height="6" rx="1"></rect>250      </svg>251      <span>Audio</span>252    </div>253    <div class="chip">254      <svg viewBox="0 0 24 24">255        <rect x="5" y="4" width="14" height="16" rx="2"></rect>256        <line x1="8" y1="9" x2="16" y2="9"></line>257        <line x1="8" y1="13" x2="16" y2="13"></line>258      </svg>259      <span>Documents & other</span>260    </div>261    <div class="chip">262      <svg viewBox="0 0 24 24">263        <rect x="3" y="5" width="18" height="14" rx="2"></rect>264        <path d="M4 16l5-5 4 4 3-2 4 3"></path>265        <circle cx="9" cy="9" r="1.5"></circle>266      </svg>267      <span>Images</span>268    </div>269  </div>270 271  <!-- List -->272  <div class="list">273    <div class="item">274      <div class="doc-thumb">275        <svg viewBox="0 0 24 24">276          <rect x="5" y="3" width="14" height="18" rx="2" ry="2" fill="#ffffff" opacity="0.9"></rect>277          <path d="M9 8h6M9 12h6M9 16h6" stroke="#2E7BDC" stroke-width="2"></path>278          <path d="M15 3v5h5" fill="#ffffff" opacity="0.9"></path>279        </svg>280      </div>281      <div class="item-text">282        <div class="item-title">Month finance .docx</div>283        <div class="item-sub">6.27 kB, 1 hour ago</div>284      </div>285      <div class="dots">286        <span></span><span></span><span></span>287      </div>288    </div>289  </div>290 291  <!-- Snackbar -->292  <div class="snackbar">293    1 file moved to Office294  </div>295 296  <!-- Home indicator -->297  <div class="home-indicator"></div>298</div>299</body>300</html>