GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Android Files - Search UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #121212;19    color: #EDEDED;20  }21 22  /* Status bar */23  .status-bar {24    height: 110px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #EDEDED;30    font-size: 40px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .icon {38    width: 54px;39    height: 54px;40  }41  .icon svg {42    width: 100%;43    height: 100%;44  }45 46  /* Search bar */47  .search-bar {48    margin: 0 24px;49    height: 120px;50    border-radius: 20px;51    background: #1E1E1E;52    display: flex;53    align-items: center;54    padding: 0 24px;55    gap: 24px;56  }57  .search-text {58    flex: 1;59    font-size: 44px;60    color: #DADADA;61    white-space: nowrap;62    overflow: hidden;63    text-overflow: ellipsis;64  }65  .search-actions {66    display: flex;67    align-items: center;68    gap: 20px;69  }70 71  /* Filter chips */72  .chips {73    display: flex;74    gap: 20px;75    padding: 28px 24px;76  }77  .chip {78    display: inline-flex;79    align-items: center;80    gap: 16px;81    border: 1px solid #2A2A2A;82    color: #CFCFCF;83    background: #1A1A1A;84    padding: 18px 26px;85    border-radius: 40px;86    font-size: 36px;87  }88  .chip .icon {89    width: 44px;90    height: 44px;91  }92 93  /* Result item */94  .result-item {95    margin: 8px 24px;96    padding: 28px 0;97    border-top: 1px solid #2A2A2A;98  }99  .row {100    display: flex;101    align-items: center;102    gap: 32px;103  }104  .doc-thumb {105    width: 120px;106    height: 120px;107    border-radius: 18px;108    background: #1A1A1A;109    border: 1px solid #2A2A2A;110    display: flex;111    align-items: center;112    justify-content: center;113  }114  .result-info {115    flex: 1;116  }117  .result-title {118    font-size: 44px;119    color: #FFFFFF;120    margin-bottom: 8px;121  }122  .result-meta {123    font-size: 34px;124    color: #9E9E9E;125  }126  .overflow {127    width: 60px;128    height: 60px;129  }130 131  /* Bottom gesture bar */132  .gesture-bar {133    position: absolute;134    bottom: 22px;135    left: 50%;136    transform: translateX(-50%);137    width: 330px;138    height: 18px;139    background: #E0E0E0;140    border-radius: 9px;141    opacity: 0.85;142  }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status bar -->149  <div class="status-bar">150    <div>6:03</div>151    <div class="status-right">152      <!-- world-like icon -->153      <div class="icon">154        <svg viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">155          <circle cx="12" cy="12" r="9"></circle>156          <path d="M3 12h18M12 3a16 16 0 0 1 0 18M12 3a16 16 0 0 0 0 18"></path>157        </svg>158      </div>159      <!-- wifi icon -->160      <div class="icon">161        <svg viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round">162          <path d="M2 8c5-5 15-5 20 0"></path>163          <path d="M5 12c3-3 11-3 14 0"></path>164          <path d="M8 16c2-2 6-2 8 0"></path>165          <circle cx="12" cy="19" r="1.8" fill="#CFCFCF" stroke="none"></circle>166        </svg>167      </div>168      <!-- battery icon -->169      <div class="icon">170        <svg viewBox="0 0 30 24" fill="none">171          <rect x="1" y="5" width="24" height="14" rx="3" stroke="#CFCFCF" stroke-width="2"></rect>172          <rect x="26" y="9" width="3" height="6" rx="1" fill="#CFCFCF"></rect>173          <rect x="3.5" y="7.5" width="18" height="9" rx="2" fill="#CFCFCF"></rect>174        </svg>175      </div>176    </div>177  </div>178 179  <!-- Search bar -->180  <div class="search-bar">181    <!-- back arrow -->182    <div class="icon">183      <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">184        <path d="M15 6 L9 12 L15 18"></path>185      </svg>186    </div>187    <div class="search-text">nature photos - google searc</div>188    <div class="search-actions">189      <!-- close X -->190      <div class="icon">191        <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2.5" stroke-linecap="round">192          <path d="M5 5 L19 19"></path>193          <path d="M19 5 L5 19"></path>194        </svg>195      </div>196      <!-- grid icon -->197      <div class="icon">198        <svg viewBox="0 0 24 24" fill="#EDEDED">199          <rect x="3" y="3" width="5" height="5" rx="1"></rect>200          <rect x="10" y="3" width="5" height="5" rx="1"></rect>201          <rect x="17" y="3" width="4" height="5" rx="1"></rect>202          <rect x="3" y="10" width="5" height="5" rx="1"></rect>203          <rect x="10" y="10" width="5" height="5" rx="1"></rect>204          <rect x="17" y="10" width="4" height="5" rx="1"></rect>205          <rect x="3" y="17" width="5" height="4" rx="1"></rect>206          <rect x="10" y="17" width="5" height="4" rx="1"></rect>207          <rect x="17" y="17" width="4" height="4" rx="1"></rect>208        </svg>209      </div>210      <!-- overflow menu -->211      <div class="icon">212        <svg viewBox="0 0 24 24" fill="#EDEDED">213          <circle cx="12" cy="5" r="2"></circle>214          <circle cx="12" cy="12" r="2"></circle>215          <circle cx="12" cy="19" r="2"></circle>216        </svg>217      </div>218    </div>219  </div>220 221  <!-- Chips -->222  <div class="chips">223    <div class="chip">224      <div class="icon">225        <svg viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round">226          <path d="M5 16a7 7 0 0 1 14 0"></path>227          <path d="M7 16v2M17 16v2"></path>228        </svg>229      </div>230      <span>Audio</span>231    </div>232 233    <div class="chip">234      <div class="icon">235        <svg viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">236          <path d="M7 3h7l5 5v13H7z"></path>237          <path d="M14 3v5h5"></path>238        </svg>239      </div>240      <span>Documents & other</span>241    </div>242 243    <div class="chip">244      <div class="icon">245        <svg viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">246          <rect x="3" y="5" width="18" height="14" rx="2"></rect>247          <path d="M7 15l3-4 3 3 4-5"></path>248        </svg>249      </div>250      <span>Images</span>251    </div>252  </div>253 254  <!-- Result list -->255  <div class="result-item">256    <div class="row">257      <div class="doc-thumb">258        <!-- simple file icon -->259        <svg viewBox="0 0 36 36" width="80" height="80">260          <rect x="7" y="6" width="22" height="24" rx="3" fill="#263238" stroke="#4DD0E1" stroke-width="2"></rect>261          <path d="M22 6v7h7" fill="none" stroke="#4DD0E1" stroke-width="2"></path>262        </svg>263      </div>264      <div class="result-info">265        <div class="result-title">nature photos - Google Search</div>266        <div class="result-meta">866 kB, Sep 27</div>267      </div>268      <div class="overflow">269        <svg viewBox="0 0 24 24" fill="#CFCFCF">270          <circle cx="12" cy="5" r="2"></circle>271          <circle cx="12" cy="12" r="2"></circle>272          <circle cx="12" cy="19" r="2"></circle>273        </svg>274      </div>275    </div>276  </div>277 278  <!-- Large empty region below (dark list background) intentionally left blank to match screenshot -->279 280  <!-- Bottom gesture bar -->281  <div class="gesture-bar"></div>282</div>283</body>284</html>