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 Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    border-radius: 32px;16    box-shadow: 0 16px 40px rgba(0,0,0,0.15);17  }18 19  /* Top area */20  .header {21    padding: 70px 40px 0 40px;22    color: #1F2937;23  }24  .search-wrap {25    display: flex;26    align-items: center;27    gap: 24px;28  }29  .icon-btn {30    width: 60px;31    height: 60px;32    display: flex;33    align-items: center;34    justify-content: center;35    border-radius: 16px;36    color: #6B7280;37  }38  .search-bar {39    flex: 1;40    height: 100px;41    background: #F4F5F7;42    border: 1px solid #E5E7EB;43    border-radius: 26px;44    position: relative;45  }46  .search-bar .caret {47    position: absolute;48    left: 26px;49    top: 24px;50    width: 2px;51    height: 52px;52    background: #E33B3B; /* red caret */53    border-radius: 2px;54  }55  .search-bar .placeholder {56    position: absolute;57    left: 40px;58    top: 50%;59    transform: translateY(-50%);60    color: #9CA3AF;61    font-size: 38px;62  }63  .search-icon {64    width: 70px;65    height: 70px;66    display: flex;67    align-items: center;68    justify-content: center;69    color: #81888F;70  }71 72  .filters {73    margin-top: 28px;74    display: flex;75    align-items: center;76    gap: 12px;77    color: #5B6B79;78    font-size: 38px;79  }80  .filters .plus {81    width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #5B6B79;82  }83 84  /* History section */85  .history-header {86    margin-top: 52px;87    padding: 0 4px;88    display: flex;89    justify-content: space-between;90    align-items: center;91  }92  .history-title {93    font-size: 50px;94    font-weight: 700;95    color: #111827;96  }97  .history-clear {98    font-size: 38px;99    color: #2EAD50;100    font-weight: 600;101  }102  .history-card {103    margin: 24px 20px 0 20px;104    background: #F3F4F6;105    border: 1px solid #E5E7EB;106    border-radius: 22px;107    padding: 40px;108  }109  .history-item {110    font-size: 40px;111    color: #374151;112    padding: 22px 8px;113    border-bottom: 1px solid #E5E7EB;114  }115  .history-item:last-child { border-bottom: none; }116 117  /* Keyboard */118  .keyboard {119    position: absolute;120    left: 0;121    bottom: 0;122    width: 100%;123    height: 920px;124    background: #EEEAFA;125    border-top-left-radius: 28px;126    border-top-right-radius: 28px;127    box-shadow: 0 -6px 12px rgba(0,0,0,0.06);128    padding: 28px 30px 40px;129  }130  .kb-tools {131    display: flex;132    align-items: center;133    justify-content: space-between;134    padding: 6px 20px 18px;135    color: #3F3F46;136  }137  .kb-tool {138    display: inline-flex;139    align-items: center;140    gap: 10px;141    font-size: 30px;142    color: #3F3F46;143  }144  .kb-tool .circle {145    width: 56px; height: 56px; border-radius: 16px; background: #E7E3F5; display: flex; align-items: center; justify-content: center;146  }147 148  .kb-row {149    display: flex;150    gap: 14px;151    margin: 10px 0;152  }153  .key {154    flex: 1;155    background: #FFFFFF;156    border: 1px solid #E5E7EB;157    border-radius: 22px;158    height: 120px;159    display: flex;160    align-items: center;161    justify-content: center;162    font-size: 44px;163    color: #111827;164  }165  .key.small { flex: 0 0 116px; }166  .key.medium { flex: 0 0 160px; }167  .key.wide { flex: 0 0 220px; }168  .key.space { flex: 1; height: 120px; }169  .key.special {170    background: #E8E3F7;171    color: #1F2937;172  }173 174  .gesture-bar {175    position: absolute;176    bottom: 20px;177    left: 50%;178    transform: translateX(-50%);179    width: 360px;180    height: 10px;181    background: #BDBDBD;182    border-radius: 8px;183    opacity: 0.8;184  }185 186  /* SVG styling */187  svg { width: 40px; height: 40px; }188</style>189</head>190<body>191<div id="render-target">192  <div class="header">193    <div class="search-wrap">194      <div class="icon-btn" aria-label="Back">195        <svg viewBox="0 0 24 24" fill="none">196          <path d="M15 6l-6 6 6 6" stroke="#6B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>197        </svg>198      </div>199      <div class="search-bar" aria-label="Search field">200        <span class="caret"></span>201        <span class="placeholder">Search for Items</span>202      </div>203      <div class="search-icon">204        <svg viewBox="0 0 24 24" fill="none">205          <circle cx="10" cy="10" r="6.5" stroke="#8A8F96" stroke-width="2"/>206          <path d="M15.5 15.5L21 21" stroke="#8A8F96" stroke-width="2" stroke-linecap="round"/>207        </svg>208      </div>209    </div>210 211    <div class="filters">212      <span class="plus">213        <svg viewBox="0 0 24 24">214          <path d="M12 5v14M5 12h14" stroke="#5B6B79" stroke-width="2" stroke-linecap="round"/>215        </svg>216      </span>217      <span>Filter</span>218    </div>219 220    <div class="history-header">221      <div class="history-title">History</div>222      <div class="history-clear">Clear</div>223    </div>224 225    <div class="history-card">226      <div class="history-item">shoe rack</div>227      <div class="history-item">impact drill</div>228      <div class="history-item">impact</div>229    </div>230  </div>231 232  <!-- Keyboard -->233  <div class="keyboard" aria-label="On-screen keyboard">234    <div class="kb-tools">235      <div class="kb-tool"><div class="circle">236        <svg viewBox="0 0 24 24">237          <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" fill="#6459A9"/>238        </svg>239      </div></div>240      <div class="kb-tool"><span class="circle">😊</span></div>241      <div class="kb-tool">GIF</div>242      <div class="kb-tool"><span class="circle">243        <svg viewBox="0 0 24 24">244          <path d="M12 3a9 9 0 100 18 9 9 0 000-18zm0 6v6m-3-3h6" stroke="#3F3F46" stroke-width="2" stroke-linecap="round"/>245        </svg>246      </span></div>247      <div class="kb-tool"><span class="circle">248        <svg viewBox="0 0 24 24">249          <path d="M3 7h9l3 3h6v7H3z" stroke="#3F3F46" stroke-width="2" fill="none"/>250        </svg>251      </span></div>252      <div class="kb-tool"><span class="circle">253        <svg viewBox="0 0 24 24">254          <circle cx="7" cy="12" r="3" fill="#3F3F46"/>255          <circle cx="17" cy="12" r="3" fill="#3F3F46"/>256        </svg>257      </span></div>258      <div class="kb-tool"><span class="circle">259        <svg viewBox="0 0 24 24">260          <path d="M12 5v14M5 12h14" stroke="#3F3F46" stroke-width="2" stroke-linecap="round"/>261        </svg>262      </span></div>263    </div>264 265    <div class="kb-row">266      <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>267    </div>268    <div class="kb-row">269      <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>270    </div>271    <div class="kb-row">272      <div class="key medium special" aria-label="Shift">273        <svg viewBox="0 0 24 24">274          <path d="M12 5l6 6h-4v8H10v-8H6l6-6z" fill="#6459A9"/>275        </svg>276      </div>277      <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>278      <div class="key medium special" aria-label="Backspace">279        <svg viewBox="0 0 24 24">280          <path d="M3 12l6-6h10v12H9l-6-6z" fill="#6459A9"/>281          <path d="M13 9l4 4M17 9l-4 4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>282        </svg>283      </div>284    </div>285    <div class="kb-row">286      <div class="key wide special">?123</div>287      <div class="key small special">,</div>288      <div class="key small special">😊</div>289      <div class="key space"> </div>290      <div class="key small special">.</div>291      <div class="key wide special">292        <svg viewBox="0 0 24 24">293          <path d="M6 14l4 4 8-8" stroke="#6459A9" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>294        </svg>295      </div>296    </div>297 298    <div class="gesture-bar"></div>299  </div>300</div>301</body>302</html>