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>Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16 17  /* Top system/status bar */18  .status-bar {19    height: 96px;20    background: #0097A7;21    color: #E8F5F5;22    display: flex;23    align-items: center;24    padding: 0 36px;25    box-sizing: border-box;26    font-size: 34px;27    letter-spacing: 0.5px;28    justify-content: space-between;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 22px;34  }35  .dot { width: 10px; height: 10px; background: #E0F7FA; border-radius: 50%; opacity: 0.9; }36 37  /* App bar */38  .app-bar {39    height: 120px;40    background: #0097A7;41    display: flex;42    align-items: center;43    justify-content: space-between;44    padding: 0 24px;45    box-sizing: border-box;46  }47  .icon-btn {48    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;49  }50  .icon-btn svg { width: 48px; height: 48px; fill: #ffffff; }51 52  /* Search input row */53  .search-row {54    padding: 28px 40px 10px 40px;55    box-sizing: border-box;56    background: #ffffff;57    border-bottom: 1px solid #EEE;58  }59  .search-input {60    width: 100%;61    font-size: 56px;62    line-height: 72px;63    outline: none;64    border: none;65    color: #111;66  }67 68  /* Trending section */69  .section {70    padding: 24px 40px 0 40px;71    box-sizing: border-box;72  }73  .section-header {74    display: flex;75    align-items: center;76    gap: 16px;77    color: #9E9E9E;78    font-weight: 700;79    font-size: 36px;80    margin-bottom: 18px;81  }82  .section-header svg { width: 40px; height: 40px; fill: #9E9E9E; }83  .trend-item {84    font-size: 44px;85    color: #111;86    padding: 22px 0;87  }88 89  /* Keyboard mock */90  .keyboard {91    position: absolute;92    left: 0; right: 0; bottom: 0;93    height: 820px;94    background: #1f1f1f;95    color: #fff;96    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);97  }98  .kb-suggestions {99    height: 96px;100    display: flex;101    align-items: center;102    padding: 0 28px;103    box-sizing: border-box;104    color: #e0e0e0;105    gap: 28px;106    border-bottom: 1px solid #2d2d2d;107  }108  .kb-suggestions .divider {109    width: 2px; height: 34px; background: #424242;110  }111  .kb-rows {112    padding: 22px 16px;113    box-sizing: border-box;114    display: grid;115    grid-template-rows: repeat(4, 1fr);116    gap: 18px;117    height: calc(100% - 96px - 110px);118  }119  .kb-row { display: flex; justify-content: center; gap: 14px; }120  .key {121    height: 120px; min-width: 84px; padding: 0 14px;122    background: #2a2a2a; border-radius: 18px;123    display: flex; align-items: center; justify-content: center;124    font-size: 44px; color: #f2f2f2;125  }126  .key.wide { min-width: 120px; }127  .key.space { flex: 1; }128  .kb-bottom {129    height: 110px;130    display: flex; align-items: center; justify-content: space-between;131    padding: 0 22px;132    box-sizing: border-box;133  }134  .pill {135    background: #2a2a2a; color: #e0e0e0; font-size: 44px;136    height: 92px; min-width: 160px; border-radius: 18px;137    display: flex; align-items: center; justify-content: center;138  }139  .mic {140    width: 92px; height: 92px; background: #2a2a2a; border-radius: 18px; display: flex; align-items: center; justify-content: center;141  }142  .mic svg { width: 42px; height: 42px; fill: #e0e0e0; }143  .search-fab {144    width: 108px; height: 108px; background: #C6FF6B; border-radius: 54px;145    display: flex; align-items: center; justify-content: center;146  }147  .search-fab svg { width: 50px; height: 50px; fill: #1f1f1f; }148</style>149</head>150<body>151<div id="render-target">152  <!-- Teal status bar -->153  <div class="status-bar">154    <div>8:31</div>155    <div class="status-icons">156      <div class="dot"></div><div class="dot"></div><div class="dot"></div>157      <svg width="34" height="34" viewBox="0 0 24 24" fill="#E0F7FA"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"/></svg>158      <svg width="34" height="34" viewBox="0 0 24 24" fill="#E0F7FA"><path d="M7 20h10v-2H7v2zM12 2L4.5 9h3.5v6h8V9h3.5L12 2z"/></svg>159      <span style="font-weight:700;">100%</span>160    </div>161  </div>162 163  <!-- App bar with back and clear -->164  <div class="app-bar">165    <div class="icon-btn" aria-label="Back">166      <svg viewBox="0 0 24 24"><path d="M15.5 19L8.5 12l7-7-1.5-1.5L5.5 12l8.5 8.5z"/></svg>167    </div>168    <div class="icon-btn" aria-label="Clear">169      <svg viewBox="0 0 24 24"><path d="M18.3 5.71L12 12.01l-6.3-6.3-1.4 1.41 6.29 6.29-6.3 6.3 1.41 1.4 6.3-6.29 6.29 6.3 1.41-1.41-6.3-6.29 6.3-6.3z"/></svg>170    </div>171  </div>172 173  <!-- Search field -->174  <div class="search-row">175    <input class="search-input" value="Samsung 4K QLED TV" />176  </div>177 178  <!-- Trending searches -->179  <div class="section">180    <div class="section-header">181      <svg viewBox="0 0 24 24"><path d="M12 6V3L8 7l4 4V8c2.76 0 5 2.24 5 5a5 5 0 01-5 5c-2.2 0-4.07-1.43-4.74-3.4H6.14A7 7 0 0019 13c0-3.87-3.13-7-7-7z"/></svg>182      <span>Trending Searches</span>183    </div>184 185    <div class="trend-item">Time Sale</div>186    <div class="trend-item">Mobiles</div>187    <div class="trend-item">T-Shirts</div>188    <div class="trend-item">Headphones</div>189    <div class="trend-item">Shoes</div>190    <div class="trend-item">Sarees</div>191    <div class="trend-item">Shirts</div>192    <div class="trend-item">Watches</div>193    <div class="trend-item">Bedsheets</div>194    <div class="trend-item">Trimmers</div>195  </div>196 197  <!-- Keyboard mock -->198  <div class="keyboard">199    <div class="kb-suggestions">200      <div class="pill">TV</div>201      <div class="divider"></div>202      <div class="pill">TB</div>203      <div class="divider"></div>204      <div class="pill">TC</div>205      <div style="flex:1"></div>206      <div class="mic" aria-label="Mic">207        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2zM11 19h2v3h-2z"/></svg>208      </div>209    </div>210 211    <div class="kb-rows">212      <div class="kb-row">213        <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>214      </div>215      <div class="kb-row">216        <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>217      </div>218      <div class="kb-row">219        <div class="key wide">⇧</div>220        <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>221        <div class="key wide">⌫</div>222      </div>223      <div class="kb-row">224        <div class="key wide">?123</div>225        <div class="key">,</div>226        <div class="key space"></div>227        <div class="key">.</div>228        <div class="key wide">⏎</div>229      </div>230    </div>231 232    <div class="kb-bottom">233      <div class="pill" style="visibility:hidden;">spacer</div>234      <div class="search-fab" aria-label="Search">235        <svg viewBox="0 0 24 24"><path d="M21 20l-5.2-5.2a7 7 0 10-1.4 1.4L20 21l1-1zM10 16a6 6 0 110-12 6 6 0 010 12z"/></svg>236      </div>237    </div>238  </div>239</div>240</body>241</html>