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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F3F2EC; /* soft off-white */15    font-family: Arial, Helvetica, sans-serif;16    color: #4B4B4B;17  }18 19  /* Status bar */20  .statusbar {21    height: 110px;22    background: #FFFFFF;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 36px;27    box-sizing: border-box;28  }29  .status-left { font-weight: 600; letter-spacing: 1px; color: #333; }30  .status-right { display: flex; align-items: center; gap: 26px; }31  .icon-dot {32    width: 14px; height: 14px; background: #6B6B6B; border-radius: 50%;33    display: inline-block;34  }35  .battery {36    width: 34px; height: 18px; border: 2px solid #666; border-radius: 3px; position: relative;37  }38  .battery::after {39    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 8px; background: #666; border-radius: 1px;40  }41  .battery .level {42    position: absolute; left: 2px; top: 2px; bottom: 2px; right: 8px; background: #666;43  }44 45  /* Search bar */46  .searchbar {47    height: 120px;48    background: #FFFFFF;49    border-bottom: 1px solid #EAEAEA;50    display: flex;51    align-items: center;52    gap: 18px;53    padding: 0 24px 0 20px;54    box-sizing: border-box;55  }56  .placeholder {57    color: #9B9B9B;58    font-size: 40px;59  }60  .divider-shadow { position: absolute; top: 230px; left: 0; width: 100%; height: 4px; background: rgba(0,0,0,0.02); }61 62  /* Content list */63  .content {64    position: absolute;65    top: 230px;66    left: 0; right: 0;67    bottom: 940px; /* space for keyboard */68    background: #F5F4EF;69    padding: 28px 24px;70    box-sizing: border-box;71  }72  .row {73    height: 120px;74    display: flex;75    align-items: center;76    justify-content: space-between;77    padding: 0 18px;78    box-sizing: border-box;79    border-radius: 14px;80  }81  .row + .row { margin-top: 6px; }82  .row .left {83    display: flex; align-items: center; gap: 26px;84    font-size: 44px;85  }86  .row .left .label-light { color: #6B6B6B; font-weight: 600; }87  .row .right { display: flex; align-items: center; }88 89  .ic {90    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;91    color: #6B6B6B;92  }93  .arrow-btn, .circle-x {94    width: 72px; height: 72px; border-radius: 36px; border: 2px solid #7B7B7B;95    display: flex; align-items: center; justify-content: center; color: #6B6B6B;96  }97 98  /* Keyboard */99  .keyboard {100    position: absolute;101    left: 0; right: 0; bottom: 66px;102    height: 910px;103    background: #EDEFE7;104    border-top: 1px solid #D9D9D9;105    padding: 18px 22px 24px;106    box-sizing: border-box;107    display: flex; flex-direction: column; gap: 18px;108  }109  .toolbar {110    height: 110px; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 40px;111  }112  .tool {113    width: 72px; height: 72px; background: #FFFFFF; border-radius: 16px; border: 1px solid #D9D9D9;114    display: flex; align-items: center; justify-content: center; color: #6B6B6B; font-size: 28px;115  }116 117  .keys-row { display: flex; gap: 14px; justify-content: center; }118  .key {119    height: 120px; min-width: 82px; flex: 1 0 0;120    background: #FFFFFF; border-radius: 22px; border: 1px solid #D9D9D9;121    display: flex; align-items: center; justify-content: center;122    font-size: 42px; color: #2E2E2E; box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;123  }124  .keys-row.mid { padding: 0 60px; }125  .key.special {126    background: #DCE7D4; color: #2E2E2E;127  }128  .space { flex: 4 0 0; }129  .wide { flex: 1.7 0 0; }130  .narrow { flex: 0.9 0 0; }131 132  /* Gesture pill */133  .gesture {134    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);135    width: 250px; height: 10px; background: #6B6B6B; border-radius: 8px; opacity: 0.6;136  }137 138  /* Simple SVG styling */139  svg { display: block; }140</style>141</head>142<body>143<div id="render-target">144  <!-- Status Bar -->145  <div class="statusbar">146    <div class="status-left">11:11</div>147    <div class="status-right">148      <span class="icon-dot"></span>149      <span class="icon-dot" style="width:18px;height:18px;border-radius:4px;"></span>150      <span class="icon-dot"></span>151      <div class="battery"><div class="level"></div></div>152    </div>153  </div>154 155  <!-- Search bar -->156  <div class="searchbar">157    <div style="width:80px; height:80px; display:flex; align-items:center; justify-content:center;">158      <svg width="48" height="48" viewBox="0 0 40 40">159        <path d="M24 8 L12 20 L24 32" stroke="#6B6B6B" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160      </svg>161    </div>162    <div class="placeholder">Type ingredients...</div>163  </div>164  <div class="divider-shadow"></div>165 166  <!-- Content list -->167  <div class="content">168    <div class="row">169      <div class="left">170        <div class="ic">171          <svg width="64" height="64" viewBox="0 0 40 40">172            <circle cx="20" cy="20" r="12" fill="none" stroke="#6B6B6B" stroke-width="2.5"/>173            <path d="M20 14 V20 L26 22" stroke="#6B6B6B" stroke-width="2.5" stroke-linecap="round"/>174          </svg>175        </div>176        <div style="font-size:46px;">pizza</div>177      </div>178      <div class="right">179        <div class="circle-x">180          <svg width="44" height="44" viewBox="0 0 40 40">181            <path d="M14 14 L26 26 M26 14 L14 26" stroke="#6B6B6B" stroke-width="3" stroke-linecap="round"/>182          </svg>183        </div>184      </div>185    </div>186 187    <div class="row">188      <div class="left">189        <div class="ic">190          <svg width="64" height="64" viewBox="0 0 40 40">191            <circle cx="20" cy="16" r="6" fill="none" stroke="#6B6B6B" stroke-width="2.5"/>192            <path d="M8 34c2-7 22-7 24 0" stroke="#6B6B6B" stroke-width="2.5" fill="none" stroke-linecap="round"/>193          </svg>194        </div>195        <div class="label-light">Find friends:</div>196      </div>197      <div class="right arrow-btn">198        <svg width="40" height="40" viewBox="0 0 40 40">199          <path d="M14 10 L26 20 L14 30" stroke="#6B6B6B" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200        </svg>201      </div>202    </div>203 204    <div class="row">205      <div class="left">206        <div class="ic">207          <svg width="64" height="64" viewBox="0 0 40 40">208            <path d="M20 8a8 8 0 0 1 8 8c0 3.5-2.2 6.2-4.8 7.3v4.7h-6.4V23.3C14.2 22.2 12 19.5 12 16a8 8 0 0 1 8-8z" fill="none" stroke="#6B6B6B" stroke-width="2.2"/>209            <path d="M16 31h8" stroke="#6B6B6B" stroke-width="2.2" stroke-linecap="round"/>210          </svg>211        </div>212        <div class="label-light">Search tips:</div>213      </div>214      <div class="right arrow-btn">215        <svg width="40" height="40" viewBox="0 0 40 40">216          <path d="M14 10 L26 20 L14 30" stroke="#6B6B6B" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217        </svg>218      </div>219    </div>220  </div>221 222  <!-- Keyboard mock -->223  <div class="keyboard">224    <div class="toolbar">225      <div class="tool">☰</div>226      <div class="tool">😊</div>227      <div class="tool">GIF</div>228      <div class="tool">⚙</div>229      <div class="tool">G</div>230      <div class="tool">◯</div>231      <div class="tool">🎤</div>232    </div>233 234    <div class="keys-row">235      <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>236      <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>237    </div>238 239    <div class="keys-row mid">240      <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>241      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>242    </div>243 244    <div class="keys-row">245      <div class="key special wide">⇧</div>246      <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>247      <div class="key">n</div><div class="key">m</div>248      <div class="key special wide">⌫</div>249    </div>250 251    <div class="keys-row">252      <div class="key special narrow">?123</div>253      <div class="key special narrow">,</div>254      <div class="key space"> </div>255      <div class="key narrow">.</div>256      <div class="key special narrow">🔍</div>257    </div>258  </div>259 260  <!-- Gesture bar -->261  <div class="gesture"></div>262</div>263</body>264</html>