GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Amazon Search UI - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: linear-gradient(90deg, #a8dde0, #c2ebcc);13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 18px;19    left: 30px;20    right: 30px;21    height: 60px;22    display: flex;23    align-items: center;24    color: #1f2e26;25    font-weight: 600;26    font-size: 34px;27  }28  .status-left {29    display: flex;30    align-items: center;31    gap: 22px;32  }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .status-dot {40    width: 10px; height: 10px; background: #1f2e26; border-radius: 50%;41  }42  .icon-svg { width: 40px; height: 40px; }43 44  /* Back + Search bar */45  .top-bar {46    position: absolute;47    top: 96px;48    left: 24px;49    right: 24px;50    height: 120px;51    display: flex;52    align-items: center;53    gap: 26px;54  }55  .back-btn {56    width: 78px;57    height: 78px;58    border-radius: 40px;59    display: flex;60    justify-content: center;61    align-items: center;62  }63  .search-bar {64    flex: 1;65    height: 110px;66    background: #ffffff;67    border-radius: 28px;68    box-shadow: 0 6px 16px rgba(0,0,0,0.08);69    display: flex;70    align-items: center;71    padding: 0 30px;72    gap: 22px;73    border: 1px solid #e3e3e3;74  }75  .search-text {76    color: #6f7c78;77    font-size: 40px;78  }79 80  /* Content area below header */81  .content-panel {82    position: absolute;83    top: 280px;84    left: 0;85    right: 0;86    bottom: 760px; /* leave room for keyboard */87    background: #ffffff;88  }89 90  /* Dual buttons */91  .action-row {92    position: absolute;93    top: 1080px;94    left: 60px;95    right: 60px;96    display: flex;97    gap: 50px;98    justify-content: center;99  }100  .pill-btn {101    flex: 1;102    height: 140px;103    background: #f3f3f5;104    border-radius: 26px;105    border: 1px solid #d8d9dd;106    display: flex;107    align-items: center;108    gap: 26px;109    padding: 0 40px;110    color: #2b2b2b;111    font-size: 44px;112    box-sizing: border-box;113  }114  .pill-icon {115    width: 72px; height: 72px;116    border-radius: 18px;117    background: #ffffff;118    border: 1px solid #d5d5d5;119    display: flex; justify-content: center; align-items: center;120  }121 122  /* Keyboard */123  .keyboard {124    position: absolute;125    left: 0;126    right: 0;127    bottom: 0;128    height: 780px;129    background: #0f1a15;130    border-top-left-radius: 28px;131    border-top-right-radius: 28px;132    box-shadow: 0 -10px 20px rgba(0,0,0,0.25);133  }134  .kb-toolbar {135    height: 110px;136    display: flex;137    align-items: center;138    gap: 40px;139    padding: 20px 34px;140    color: #cfe3d5;141    font-size: 34px;142  }143  .kb-row {144    display: flex;145    justify-content: space-between;146    padding: 18px 28px;147  }148  .key {149    width: 92px;150    height: 116px;151    margin: 6px;152    background: #1a2620;153    color: #d8e6dc;154    border-radius: 22px;155    display: flex;156    justify-content: center;157    align-items: center;158    font-size: 48px;159    border: 1px solid rgba(255,255,255,0.06);160    box-sizing: border-box;161  }162  .key.wide { width: 140px; }163  .key.xwide { width: 420px; }164  .key.special { background: #202e28; color: #cfe0d6; }165  .enter-key {166    width: 128px; height: 128px;167    background: #75ff9a;168    color: #0f1a15;169    border-radius: 80px;170    display: flex; justify-content: center; align-items: center;171    font-weight: bold;172    border: 2px solid #67e68c;173  }174  .kb-bottom {175    display: flex;176    align-items: center;177    padding: 12px 24px 28px;178    gap: 18px;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status Bar -->186  <div class="status-bar">187    <div class="status-left">188      <div>5:44</div>189      <div class="status-dot"></div>190      <div class="status-dot"></div>191      <div class="status-dot"></div>192      <div class="status-dot"></div>193    </div>194    <div class="status-right">195      <!-- Wi-Fi icon -->196      <svg class="icon-svg" viewBox="0 0 24 24" fill="#1f2e26">197        <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-6.9-6.3a12 12 0 0 1 13.8 0l-1.5 1.5a9.5 9.5 0 0 0-10.8 0l-1.5-1.5zm-3.1-3.6a17 17 0 0 1 20 0l-1.6 1.6a14.3 14.3 0 0 0-16.8 0L2 8.6z"/>198      </svg>199      <!-- Battery icon -->200      <svg class="icon-svg" viewBox="0 0 36 24" fill="#1f2e26">201        <rect x="1" y="5" width="28" height="14" rx="3" ry="3" stroke="#1f2e26" stroke-width="2" fill="none"/>202        <rect x="3" y="7" width="22" height="10" rx="2" fill="#1f2e26"/>203        <rect x="30" y="9" width="5" height="6" rx="1" fill="#1f2e26"/>204      </svg>205    </div>206  </div>207 208  <!-- Back + Search -->209  <div class="top-bar">210    <div class="back-btn">211      <svg class="icon-svg" viewBox="0 0 24 24" fill="#1c2b24">212        <path d="M15.5 4.5 7 12l8.5 7.5-1.8 2L3.5 12 13.7 2.5z"/>213      </svg>214    </div>215    <div class="search-bar">216      <svg class="icon-svg" viewBox="0 0 24 24" fill="#6f7c78">217        <path d="M10 2a8 8 0 1 1 0 16A8 8 0 0 1 10 2zm11.5 18.5-5.2-5.2 1.4-1.4 5.2 5.2-1.4 1.4z"/>218      </svg>219      <div class="search-text">Search Amazon.in</div>220    </div>221  </div>222 223  <!-- White content panel -->224  <div class="content-panel"></div>225 226  <!-- Action buttons -->227  <div class="action-row">228    <div class="pill-btn">229      <div class="pill-icon">230        <!-- hanger icon -->231        <svg viewBox="0 0 24 24" width="54" height="54" fill="#616b66">232          <path d="M12 5a2 2 0 1 1 2 2h-1l1.3 1-7.8 4.3L2 16l1.5 2 8.5-4.8L20 18l2-2-8.2-4.7L11 9.2A3 3 0 0 0 12 5z"/>233        </svg>234      </div>235      <div>Find the look</div>236    </div>237    <div class="pill-btn">238      <div class="pill-icon">239        <!-- camera icon -->240        <svg viewBox="0 0 24 24" width="54" height="54" fill="#616b66">241          <path d="M7 5h4l1.5 2H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3l0-2zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/>242        </svg>243      </div>244      <div>Scan products</div>245    </div>246  </div>247 248  <!-- Keyboard mock -->249  <div class="keyboard">250    <div class="kb-toolbar">251      <div class="key special" style="width:92px;height:72px;">◧</div>252      <div class="key special" style="width:92px;height:72px;">🙂</div>253      <div class="key special" style="width:92px;height:72px;">GIF</div>254      <div class="key special" style="width:92px;height:72px;">⚙️</div>255      <div class="key special" style="width:92px;height:72px;">G↔︎</div>256      <div class="key special" style="width:92px;height:72px;">🎨</div>257      <div style="margin-left:auto;" class="key special" style="width:92px;height:72px;">🎤</div>258    </div>259 260    <!-- Row 1 -->261    <div class="kb-row" style="padding-top: 8px;">262      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>263      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>264      <div class="key">o</div><div class="key">p</div>265    </div>266 267    <!-- Row 2 -->268    <div class="kb-row">269      <div style="width:40px;"></div>270      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>271      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>272      <div class="key">l</div>273      <div style="width:40px;"></div>274    </div>275 276    <!-- Row 3 -->277    <div class="kb-row">278      <div class="key special wide">⇧</div>279      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>280      <div class="key">b</div><div class="key">n</div><div class="key">m</div>281      <div class="key special wide">⌫</div>282    </div>283 284    <!-- Bottom controls -->285    <div class="kb-bottom">286      <div class="key special wide">?123</div>287      <div class="key special">,</div>288      <div class="key special">🙂</div>289      <div class="key xwide">space</div>290      <div class="key special">.</div>291      <div class="enter-key">292        <svg viewBox="0 0 24 24" width="70" height="70" fill="#0f1a15">293          <path d="M6 12h9V8l5 4-5 4v-4H6z"/>294        </svg>295      </div>296    </div>297  </div>298 299</div>300</body>301</html>