GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Recipes Search UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    background: #ffffff;23    color: #333;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 32px;28    box-sizing: border-box;29  }30  .status-left { font-size: 36px; font-weight: 600; }31  .status-right {32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .status-icon {37    width: 38px;38    height: 38px;39  }40 41  /* Header */42  .header {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    height: 120px;48    display: flex;49    align-items: center;50    padding: 0 34px;51    box-sizing: border-box;52    gap: 24px;53  }54  .back-btn {55    width: 72px;56    height: 72px;57    border-radius: 36px;58    display: flex;59    align-items: center;60    justify-content: center;61  }62  .title {63    font-size: 60px;64    font-weight: 700;65    color: #1a1a1a;66  }67 68  /* Search field */69  .search-wrap {70    position: absolute;71    top: 260px;72    left: 34px;73    width: 1012px;74    height: 120px;75    background: #f6f6f6;76    border: 1px solid #e4e4e4;77    border-radius: 28px;78    display: flex;79    align-items: center;80    padding: 0 28px;81    box-sizing: border-box;82    gap: 22px;83  }84  .search-icon { width: 48px; height: 48px; }85  .search-text {86    font-size: 44px;87    color: #666666;88  }89 90  /* Keyboard */91  .keyboard {92    position: absolute;93    bottom: 0;94    left: 0;95    width: 1080px;96    height: 950px;97    background: #171717;98    box-shadow: 0 -6px 12px rgba(0,0,0,0.2);99    color: #eaeaea;100  }101  .kb-suggestions {102    height: 120px;103    display: flex;104    align-items: center;105    gap: 22px;106    padding: 0 34px;107    box-sizing: border-box;108    border-bottom: 1px solid #2a2a2a;109  }110  .chip {111    background: #242424;112    color: #d6d6d6;113    padding: 12px 22px;114    border-radius: 22px;115    font-size: 36px;116  }117  .kb-row {118    display: flex;119    justify-content: space-between;120    padding: 22px 26px;121  }122  .key {123    width: 96px;124    height: 120px;125    background: #222222;126    border-radius: 18px;127    display: flex;128    align-items: center;129    justify-content: center;130    font-size: 44px;131    color: #f5f5f5;132    box-shadow: inset 0 0 0 1px #2b2b2b;133  }134  .key.wide { width: 160px; }135  .key.extra-wide { width: 600px; }136  .kb-bottom {137    position: absolute;138    bottom: 60px;139    left: 0;140    width: 100%;141    display: flex;142    justify-content: center;143  }144  .home-pill {145    width: 380px;146    height: 12px;147    background: #e6e6e6;148    border-radius: 6px;149  }150  .search-action {151    position: absolute;152    right: 30px;153    bottom: 170px;154    width: 140px;155    height: 140px;156    background: #cfe0f8;157    border-radius: 70px;158    display: flex;159    align-items: center;160    justify-content: center;161  }162  .search-action svg { width: 70px; height: 70px; }163 164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status bar -->170  <div class="status-bar">171    <div class="status-left">8:53</div>172    <div class="status-right">173      <!-- Simple status icons -->174      <svg class="status-icon" viewBox="0 0 24 24">175        <circle cx="12" cy="12" r="9" fill="#999"/>176      </svg>177      <svg class="status-icon" viewBox="0 0 24 24">178        <rect x="4" y="8" width="16" height="8" rx="2" fill="#999"/>179        <rect x="20" y="10" width="2" height="4" fill="#999"/>180      </svg>181      <svg class="status-icon" viewBox="0 0 24 24">182        <path d="M3 16c3-6 7-9 11-9s8 3 8 3" stroke="#999" stroke-width="2" fill="none"/>183        <circle cx="6" cy="16" r="2" fill="#999"/>184      </svg>185    </div>186  </div>187 188  <!-- Header with back and title -->189  <div class="header">190    <div class="back-btn">191      <svg width="48" height="48" viewBox="0 0 24 24">192        <path d="M15 18L9 12l6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193      </svg>194    </div>195    <div class="title">Recipes</div>196  </div>197 198  <!-- Search field -->199  <div class="search-wrap">200    <svg class="search-icon" viewBox="0 0 24 24">201      <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>202      <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#777" stroke-width="2"/>203    </svg>204    <div class="search-text">white sauce chicken pasta</div>205  </div>206 207  <!-- Keyboard -->208  <div class="keyboard">209    <div class="kb-suggestions">210      <div class="chip">in</div>211      <div class="chip">|</div>212      <div class="chip">recipe</div>213      <div class="chip">🙂</div>214      <div class="chip">🍝</div>215      <div style="margin-left:auto; display:flex; align-items:center; gap:18px;">216        <!-- small mic icon -->217        <svg width="48" height="48" viewBox="0 0 24 24">218          <rect x="9" y="5" width="6" height="10" rx="3" fill="#d8d8d8"/>219          <path d="M5 11c0 4 3 6 7 6s7-2 7-6" stroke="#d8d8d8" stroke-width="2" fill="none"/>220          <rect x="11" y="17" width="2" height="4" fill="#d8d8d8"/>221        </svg>222      </div>223    </div>224 225    <!-- Row: qwertyuiop -->226    <div class="kb-row">227      <div class="key">q</div>228      <div class="key">w</div>229      <div class="key">e</div>230      <div class="key">r</div>231      <div class="key">t</div>232      <div class="key">y</div>233      <div class="key">u</div>234      <div class="key">i</div>235      <div class="key">o</div>236      <div class="key">p</div>237    </div>238 239    <!-- Row: asdfghjkl -->240    <div class="kb-row">241      <div class="key">a</div>242      <div class="key">s</div>243      <div class="key">d</div>244      <div class="key">f</div>245      <div class="key">g</div>246      <div class="key">h</div>247      <div class="key">j</div>248      <div class="key">k</div>249      <div class="key">l</div>250      <div class="key wide">⌫</div>251    </div>252 253    <!-- Row: zxcvbnm -->254    <div class="kb-row">255      <div class="key wide">⇧</div>256      <div class="key">z</div>257      <div class="key">x</div>258      <div class="key">c</div>259      <div class="key">v</div>260      <div class="key">b</div>261      <div class="key">n</div>262      <div class="key">m</div>263      <div class="key wide">⌦</div>264    </div>265 266    <!-- Row: symbols, emoji, space, period -->267    <div class="kb-row">268      <div class="key wide">?123</div>269      <div class="key wide">,</div>270      <div class="key wide">🙂</div>271      <div class="key extra-wide"></div>272      <div class="key wide">.</div>273    </div>274 275    <!-- floating search action button -->276    <div class="search-action">277      <svg viewBox="0 0 24 24">278        <circle cx="10" cy="10" r="7" stroke="#3b5aa5" stroke-width="2" fill="none"/>279        <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#3b5aa5" stroke-width="2"/>280      </svg>281    </div>282 283    <div class="kb-bottom">284      <div class="home-pill"></div>285    </div>286  </div>287 288</div>289</body>290</html>