GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Suggestions - Wrench tool</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #FFFFFF;14    border-radius: 0;15    box-shadow: none;16  }17 18  /* Top teal app bar */19  .appbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 220px;25    background: #57A9AD; /* teal */26  }27 28  /* Status bar */29  .status-bar {30    height: 90px;31    color: #E9F5F6;32    padding: 0 36px;33    display: flex;34    align-items: center;35    justify-content: space-between;36    font-size: 36px;37    letter-spacing: 0.5px;38  }39  .status-left { display: flex; align-items: center; gap: 18px; }40  .status-right { display: flex; align-items: center; gap: 26px; }41  .status-icon {42    width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8);43    opacity: 0.85;44  }45  .battery {46    display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600;47  }48  .battery-shape {49    width: 46px; height: 22px; border: 3px solid #fff; border-radius: 4px; position: relative;50  }51  .battery-shape::after {52    content: ''; position: absolute; right: -9px; top: 5px; width: 6px; height: 12px; background: #fff; border-radius: 2px;53  }54  .battery-level {55    position: absolute; left: 0; top: 0; width: 85%; height: 100%; background: #fff;56  }57 58  /* Search field row */59  .search-row {60    height: 130px;61    display: flex;62    align-items: center;63    padding: 0 36px;64    gap: 22px;65    color: #111;66  }67  .search-row .back {68    width: 64px; height: 64px;69  }70  .search-input {71    flex: 1;72    font-size: 56px;73    color: #101010;74    line-height: 1;75  }76  .caret {77    width: 3px; height: 64px; background: #333; margin-left: 6px;78  }79  .clear-btn {80    width: 56px; height: 56px;81  }82 83  /* Suggestions list */84  .content {85    position: absolute;86    top: 220px;87    left: 0;88    width: 1080px;89    bottom: 860px; /* leave space for keyboard */90    overflow: hidden;91    background: #fff;92  }93  .suggestions {94    list-style: none; margin: 0; padding: 24px 48px;95  }96  .suggestions li {97    padding: 22px 0;98    font-size: 44px;99    color: #2b2b2b;100    border-bottom: 1px solid #f2f2f2;101  }102  .suggestions li:last-child { border-bottom: none; }103  .hl { font-weight: 700; }104 105  /* Keyboard area */106  .keyboard {107    position: absolute;108    left: 0;109    bottom: 0;110    width: 1080px;111    height: 860px;112    background: #121416;113    box-shadow: 0 -4px 12px rgba(0,0,0,0.35);114  }115  .suggest-bar {116    height: 120px;117    display: flex;118    align-items: center;119    gap: 28px;120    padding: 0 30px;121    background: #1b1d20;122    color: #D3D7DB;123    font-size: 40px;124  }125  .chip {126    padding: 12px 22px;127    background: #22252A;128    border-radius: 22px;129    border: 1px solid #2E3238;130  }131 132  .keys { padding: 22px 22px; display: flex; flex-direction: column; gap: 22px; }133  .row { display: grid; gap: 14px; }134  .row.q { grid-template-columns: repeat(10, 1fr); }135  .row.a { grid-template-columns: repeat(9, 1fr); padding: 0 40px; }136  .row.z { grid-template-columns: 1.2fr repeat(7, 1fr) 1.5fr; }137  .row.bottom { grid-template-columns: 1.5fr 1fr 1fr 5fr 1fr 1.8fr; }138 139  .key {140    background: #1F2226;141    border-radius: 16px;142    border: 1px solid #2B2F35;143    height: 120px;144    color: #E5E7EA;145    font-size: 46px;146    display: flex; align-items: center; justify-content: center;147  }148  .key.small { font-size: 40px; }149  .key.icon { font-size: 50px; }150  .space { justify-content: center; font-size: 40px; color: #AAB1B7; }151 152  /* Bottom gesture bar */153  .gesture {154    position: absolute;155    bottom: 20px;156    left: 50%;157    transform: translateX(-50%);158    width: 320px;159    height: 12px;160    background: #C9CDD2;161    border-radius: 8px;162    opacity: 0.9;163  }164</style>165</head>166<body>167<div id="render-target">168  <div class="appbar">169    <div class="status-bar">170      <div class="status-left">171        <div>8:27</div>172        <div class="status-icon"></div>173        <div class="status-icon"></div>174        <div class="status-icon"></div>175      </div>176      <div class="status-right">177        <div class="status-icon"></div>178        <div class="battery">179          <span>100%</span>180          <div class="battery-shape">181            <div class="battery-level"></div>182          </div>183        </div>184      </div>185    </div>186    <div class="search-row">187      <!-- Back arrow -->188      <svg class="back" viewBox="0 0 24 24">189        <path d="M14 5L7 12L14 19" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>190        <path d="M7 12H22" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>191      </svg>192      <div class="search-input">Wrench tool</div>193      <div class="caret"></div>194      <!-- Clear (X) -->195      <svg class="clear-btn" viewBox="0 0 24 24">196        <path d="M6 6L18 18M18 6L6 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>197      </svg>198    </div>199  </div>200 201  <div class="content">202    <ul class="suggestions">203      <li>pipe <span class="hl">wrench tool</span></li>204      <li>pipe <span class="hl">wrench tool</span> pipe fitting</li>205      <li><span class="hl">tool</span> kit spanar <span class="hl">wrench</span> gear</li>206      <li><span class="hl">toolkit wrench</span> set 41 pcs</li>207      <li>1/2 <span class="hl">Wrench tool</span> kit box</li>208      <li>socket <span class="hl">wrench tools</span> bege</li>209      <li>socket <span class="hl">wrench tools</span></li>210      <li><span class="hl">wrench tool</span> 10 inches</li>211      <li><span class="hl">Wrench tool</span> kit</li>212    </ul>213  </div>214 215  <div class="keyboard">216    <div class="suggest-bar">217      <div class="chip">tool</div>218      <div class="chip">tools</div>219      <div class="chip">🔥</div>220      <div class="chip">🔫</div>221      <div style="margin-left:auto;" class="chip">🎤</div>222    </div>223    <div class="keys">224      <div class="row q">225        <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>226      </div>227      <div class="row a">228        <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>229      </div>230      <div class="row z">231        <div class="key small">⇧</div>232        <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>233        <div class="key icon">⌫</div>234      </div>235      <div class="row bottom">236        <div class="key small">?123</div>237        <div class="key">,</div>238        <div class="key icon">😊</div>239        <div class="key space">space</div>240        <div class="key">.</div>241        <div class="key icon">🔍</div>242      </div>243    </div>244  </div>245 246  <div class="gesture"></div>247</div>248</body>249</html>