GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 28px 40px;24    color: #4a4a4a;25    font-size: 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 24px;34  }35  .status-square {36    width: 42px;37    height: 42px;38    background: #BDBDBD;39    border-radius: 8px;40  }41  .wifi-icon, .battery-icon {42    width: 48px;43    height: 30px;44  }45 46  /* Top navigation */47  .top-nav {48    position: absolute;49    top: 120px;50    left: 0;51    width: 1080px;52    height: 80px;53    padding: 0 40px;54    display: flex;55    align-items: center;56    justify-content: space-between;57  }58  .nav-left, .nav-right { display: flex; align-items: center; }59  .icon-btn {60    width: 60px; height: 60px;61    display: flex; align-items: center; justify-content: center;62  }63  .maroon { stroke: #6A1B1A; fill: none; }64  .maroon-fill { fill: #6A1B1A; }65 66  /* Search bar */67  .search-wrapper {68    position: absolute;69    top: 210px;70    left: 40px;71    width: 1000px;72    height: 140px;73    border: 4px solid #2c2c2c;74    border-radius: 70px;75    display: flex;76    align-items: center;77    padding: 0 36px;78    box-sizing: border-box;79  }80  .search-input {81    flex: 1;82    color: #9E9E9E;83    font-size: 40px;84    padding-left: 20px;85  }86  .barcode-btn {87    width: 88px;88    height: 88px;89    border: 2px solid #2c2c2c;90    border-radius: 22px;91    display: flex;92    align-items: center;93    justify-content: center;94    margin-left: 18px;95  }96 97  /* Sections */98  .section-header {99    position: absolute;100    left: 0;101    width: 1080px;102    height: 100px;103    background: #f3f3f3;104    display: flex;105    align-items: center;106    padding: 0 40px;107    box-sizing: border-box;108    color: #3a0e0e;109    font-weight: 700;110    font-size: 42px;111    border-top: 1px solid #e6e6e6;112    border-bottom: 1px solid #e6e6e6;113  }114 115  .list-row {116    position: absolute;117    left: 0;118    width: 1080px;119    height: 110px;120    display: flex;121    align-items: center;122    justify-content: space-between;123    padding: 0 40px;124    box-sizing: border-box;125    font-size: 46px;126    color: #4a2a2a;127    border-bottom: 1px solid #eaeaea;128    background: #ffffff;129  }130  .chip-grey {131    width: 70px;132    height: 70px;133    background: #9E9E9E;134    border-radius: 35px;135    display: flex;136    align-items: center;137    justify-content: center;138  }139  .muted { color: #9E9E9E; }140 141  /* Keyboard mock */142  .keyboard {143    position: absolute;144    left: 0;145    bottom: 0;146    width: 1080px;147    height: 880px;148    background: #1c1c1c;149    border-top: 1px solid #222;150    box-sizing: border-box;151    padding: 24px 24px 40px 24px;152  }153  .kb-top-icons {154    height: 110px;155    display: flex;156    align-items: center;157    gap: 26px;158  }159  .kb-icon {160    width: 90px; height: 90px;161    background: #2a2a2a; border-radius: 24px;162    display: flex; align-items: center; justify-content: center;163    color: #d7d7d7; font-size: 34px;164  }165  .kb-rows { margin-top: 10px; }166  .kb-row {167    display: flex;168    justify-content: space-between;169    gap: 12px;170    margin: 18px 0;171  }172  .key {173    flex: 1;174    height: 120px;175    background: #2a2a2a;176    border-radius: 18px;177    color: #eaeaea;178    display: flex; align-items: center; justify-content: center;179    font-size: 48px;180  }181  .key.small { flex: 0 0 120px; }182  .key.medium { flex: 0 0 160px; }183  .key.wide { flex: 0 0 220px; }184  .key.circle {185    flex: 0 0 120px;186    height: 120px; border-radius: 60px;187    background: #c8dcff; color: #1b1b1b;188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Status bar -->195  <div class="status-bar">196    <div>11:20</div>197    <div class="status-icons">198      <div class="status-square"></div>199      <svg class="wifi-icon" viewBox="0 0 48 30">200        <path d="M2 8 Q24 -2 46 8" stroke="#747474" stroke-width="4" fill="none"/>201        <path d="M8 18 Q24 10 40 18" stroke="#747474" stroke-width="4" fill="none"/>202        <circle cx="24" cy="24" r="4" fill="#747474"/>203      </svg>204      <svg class="battery-icon" viewBox="0 0 48 30">205        <rect x="2" y="4" width="38" height="22" rx="4" ry="4" stroke="#747474" fill="none" stroke-width="3"/>206        <rect x="6" y="8" width="28" height="14" fill="#747474"/>207        <rect x="40" y="10" width="6" height="10" fill="#747474"/>208      </svg>209    </div>210  </div>211 212  <!-- Top navigation -->213  <div class="top-nav">214    <div class="nav-left">215      <div class="icon-btn">216        <svg width="60" height="60" viewBox="0 0 60 60">217          <path class="maroon" d="M38 14 L20 30 L38 46" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>218        </svg>219      </div>220    </div>221    <div class="nav-right">222      <div class="icon-btn">223        <svg width="60" height="60" viewBox="0 0 60 60">224          <path class="maroon" d="M10 16 H18 L22 34 H44 L48 24 H22" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>225          <circle cx="26" cy="44" r="4" class="maroon-fill"/>226          <circle cx="40" cy="44" r="4" class="maroon-fill"/>227        </svg>228      </div>229    </div>230  </div>231 232  <!-- Search bar -->233  <div class="search-wrapper">234    <svg width="60" height="60" viewBox="0 0 60 60">235      <circle cx="26" cy="26" r="18" stroke="#7A7A7A" stroke-width="5" fill="none"/>236      <line x1="42" y1="42" x2="56" y2="56" stroke="#7A7A7A" stroke-width="5" stroke-linecap="round"/>237    </svg>238    <div class="search-input">Search products or deals</div>239    <div class="barcode-btn">240      <svg width="60" height="60" viewBox="0 0 60 60">241        <rect x="6" y="6" width="48" height="48" rx="8" ry="8" stroke="#2c2c2c" fill="none" stroke-width="3"/>242        <path d="M14 16 V44 M20 16 V44 M30 16 V44 M36 16 V44 M44 16 V44" stroke="#2c2c2c" stroke-width="4"/>243      </svg>244    </div>245  </div>246 247  <!-- Recently Searched header -->248  <div class="section-header" style="top: 380px;">Recently Searched</div>249 250  <!-- Recently Searched item -->251  <div class="list-row" style="top: 480px;">252    <div>Milk</div>253    <div class="chip-grey">254      <svg width="40" height="40" viewBox="0 0 40 40">255        <path d="M12 12 L28 28 M28 12 L12 28" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>256      </svg>257    </div>258  </div>259 260  <!-- Currently Trending header -->261  <div class="section-header" style="top: 610px;">Currently Trending</div>262 263  <!-- Trending items -->264  <div class="list-row" style="top: 710px;"><div>Eggs</div></div>265  <div class="list-row" style="top: 820px;"><div>Milk</div></div>266  <div class="list-row" style="top: 930px;"><div>Chicken</div></div>267  <div class="list-row" style="top: 1040px;"><div>Bread</div></div>268  <div class="list-row" style="top: 1150px;"><div>Bananas</div></div>269 270  <!-- Keyboard mock -->271  <div class="keyboard">272    <div class="kb-top-icons">273      <div class="kb-icon">◧</div>274      <div class="kb-icon">☺</div>275      <div class="kb-icon">GIF</div>276      <div class="kb-icon">⚙</div>277      <div class="kb-icon">G↔︎</div>278      <div class="kb-icon">🎨</div>279      <div class="kb-icon">🎤</div>280    </div>281 282    <div class="kb-rows">283      <div class="kb-row">284        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>285      </div>286      <div class="kb-row">287        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>288      </div>289      <div class="kb-row">290        <div class="key small">⇧</div>291        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>292        <div class="key medium">⌫</div>293      </div>294      <div class="kb-row">295        <div class="key circle">?123</div>296        <div class="key medium">,</div>297        <div class="key" style="flex:1"></div>298        <div class="key circle">299          <svg width="48" height="48" viewBox="0 0 60 60">300            <circle cx="26" cy="26" r="18" stroke="#222" stroke-width="5" fill="none"/>301            <line x1="42" y1="42" x2="56" y2="56" stroke="#222" stroke-width="5" stroke-linecap="round"/>302          </svg>303        </div>304      </div>305    </div>306  </div>307 308</div>309</body>310</html>