GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top colored header */18  .topbar {19    position: absolute;20    left: 0; top: 0;21    width: 1080px;22    height: 260px;23    background: #C7465C; /* rose / red */24  }25  .statusbar {26    position: absolute;27    left: 32px; right: 32px; top: 24px;28    height: 52px;29    color: #fff;30    font-size: 38px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    opacity: 0.95;35  }36  .status-icons {37    display: flex; align-items: center; gap: 22px;38  }39  .back-btn {40    position: absolute;41    left: 28px;42    top: 120px;43    width: 64px; height: 64px;44    display: flex; align-items: center; justify-content: center;45  }46  .search-wrapper {47    position: absolute;48    left: 112px;49    right: 48px;50    top: 98px;51    height: 110px;52    background: #ffffff;53    border-radius: 60px;54    box-shadow: 0 8px 16px rgba(0,0,0,0.12);55    display: flex; align-items: center; padding: 0 28px 0 40px;56  }57  .search-placeholder {58    font-size: 40px;59    color: #9E9E9E;60    flex: 1;61  }62  .chip-icon {63    width: 72px; height: 72px;64    border-radius: 36px;65    background: #EDEDED;66    display: flex; align-items: center; justify-content: center;67    margin-left: 14px;68  }69  .barcode-bars svg { display: block; }70 71  /* Content area */72  .content {73    position: absolute;74    top: 260px;75    left: 0; right: 0;76    padding: 48px 40px 0 40px;77  }78  .title {79    font-size: 68px;80    font-weight: 700;81    color: #111;82    margin: 8px 0 28px 8px;83  }84  .chips {85    display: flex; gap: 24px; flex-wrap: nowrap;86    padding-left: 8px;87  }88  .chip {89    padding: 24px 36px;90    border: 1px solid #E5E5E5;91    border-radius: 999px;92    font-size: 40px;93    color: #333;94    background: #fff;95    box-shadow: 0 4px 10px rgba(0,0,0,0.08);96    white-space: nowrap;97  }98 99  .empty-state {100    width: 100%;101    text-align: center;102    margin-top: 120px;103    color: #8A8A8A;104  }105  .empty-icon {106    width: 170px; height: 170px;107    margin: 0 auto 32px auto;108  }109  .empty-text {110    font-size: 44px;111  }112 113  /* Keyboard mock at bottom */114  .keyboard {115    position: absolute;116    left: 0; right: 0; bottom: 0;117    height: 760px;118    background: #151516;119    border-top-left-radius: 20px;120    border-top-right-radius: 20px;121    box-shadow: 0 -6px 18px rgba(0,0,0,0.35);122    padding: 28px 22px;123  }124  .kb-row {125    display: flex; gap: 16px;126    margin: 18px 0;127    justify-content: center;128  }129  .key {130    height: 110px; width: 90px;131    background: #2A2A2B;132    border-radius: 24px;133  }134  .key.wide { width: 140px; }135  .key.extra-wide { width: 220px; }136  .key.space { width: 500px; }137  .kb-actions {138    display: flex; justify-content: space-between; align-items: center; margin: 6px 8px 10px;139  }140  .kb-pill {141    width: 84px; height: 84px; border-radius: 22px; background: #2A2A2B;142  }143  .handle {144    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);145    width: 240px; height: 10px; background: #CFCFCF; border-radius: 8px; opacity: 0.8;146  }147</style>148</head>149<body>150<div id="render-target">151  <!-- Top colored header -->152  <div class="topbar">153    <div class="statusbar">154      <div>9:19</div>155      <div class="status-icons">156        <!-- simple wifi icon -->157        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">158          <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" fill="#fff"/>159          <path d="M4.9 12.6a10 10 0 0 1 14.2 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>160          <path d="M7.8 15.4a6 6 0 0 1 8.4 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>161        </svg>162        <!-- battery -->163        <svg width="48" height="40" viewBox="0 0 28 16" fill="none">164          <rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>165          <rect x="3" y="5" width="14" height="6" rx="1" fill="#fff"/>166          <rect x="23.5" y="6" width="3" height="4" rx="1" fill="#fff"/>167        </svg>168      </div>169    </div>170 171    <div class="back-btn">172      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">173        <path d="M15 6L9 12l6 6" stroke="#ffffff" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>174      </svg>175    </div>176 177    <div class="search-wrapper">178      <div class="search-placeholder">Search for any product</div>179      <div class="chip-icon">180        <!-- small close icon -->181        <svg width="26" height="26" viewBox="0 0 24 24" fill="none">182          <path d="M6 6l12 12M18 6L6 18" stroke="#7C7C7C" stroke-width="2.2" stroke-linecap="round"/>183        </svg>184      </div>185      <div class="chip-icon barcode-bars">186        <!-- barcode icon -->187        <svg width="30" height="26" viewBox="0 0 30 20" fill="none">188          <rect x="1" y="2" width="2" height="16" fill="#7C7C7C"/>189          <rect x="6" y="2" width="3" height="16" fill="#7C7C7C"/>190          <rect x="12" y="2" width="2" height="16" fill="#7C7C7C"/>191          <rect x="17" y="2" width="4" height="16" fill="#7C7C7C"/>192          <rect x="24" y="2" width="2" height="16" fill="#7C7C7C"/>193        </svg>194      </div>195    </div>196  </div>197 198  <!-- Main content -->199  <div class="content">200    <div class="title">Popular Searches</div>201    <div class="chips">202      <div class="chip">spinneys</div>203      <div class="chip">carrefour</div>204      <div class="chip">viva supermarket</div>205      <div class="chip">waitrose</div>206    </div>207 208    <div class="empty-state">209      <div class="empty-icon">210        <!-- magnifying glass -->211        <svg width="170" height="170" viewBox="0 0 120 120" fill="none">212          <circle cx="52" cy="52" r="30" stroke="#9D9D9D" stroke-width="8"/>213          <path d="M74 74l24 24" stroke="#9D9D9D" stroke-width="10" stroke-linecap="round"/>214        </svg>215      </div>216      <div class="empty-text">Your recent searches will appear here</div>217    </div>218  </div>219 220  <!-- Keyboard mock -->221  <div class="keyboard">222    <div class="kb-actions">223      <div style="display:flex; gap:22px;">224        <div class="kb-pill"></div>225        <div class="kb-pill"></div>226        <div class="kb-pill"></div>227      </div>228      <div style="display:flex; gap:22px;">229        <div class="kb-pill"></div>230        <div class="kb-pill"></div>231      </div>232    </div>233 234    <div class="kb-row">235      <!-- first row -->236      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>237      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>238      <div class="key"></div><div class="key"></div>239    </div>240    <div class="kb-row">241      <!-- second row -->242      <div class="key wide"></div>243      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>244      <div class="key"></div><div class="key"></div><div class="key"></div>245      <div class="key wide"></div>246    </div>247    <div class="kb-row">248      <!-- third row -->249      <div class="key extra-wide"></div>250      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>251      <div class="key"></div><div class="key"></div>252      <div class="key extra-wide"></div>253    </div>254    <div class="kb-row">255      <!-- fourth row -->256      <div class="key wide"></div>257      <div class="key"></div>258      <div class="key space"></div>259      <div class="key"></div>260      <div class="key wide"></div>261    </div>262    <div class="handle"></div>263  </div>264</div>265</body>266</html>