GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Search UI - Black Sneakers</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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: 130px;22    background: #000000;23    color: #FFFFFF;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    font-size: 44px;29  }30  .status-left {31    display: flex;32    align-items: center;33    gap: 18px;34  }35  .status-right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .status-icon {42    width: 42px; height: 42px;43    border-radius: 50%;44    border: 2px solid rgba(255,255,255,0.7);45    opacity: 0.9;46  }47 48  /* Search bar area */49  .search-area {50    position: absolute;51    top: 130px;52    left: 0;53    width: 1080px;54    height: 160px;55    background: #FFFFFF;56    border-bottom: 1px solid #E9E9E9;57    display: flex;58    align-items: center;59    padding: 0 36px;60    box-sizing: border-box;61  }62  .back-icon {63    width: 64px; height: 64px; margin-right: 24px;64  }65  .query-text {66    font-size: 56px;67    color: #111111;68    flex: 1;69  }70  .clear-btn {71    width: 76px; height: 76px;72    border-radius: 38px;73    background: #EFEFEF;74    display: flex; align-items: center; justify-content: center;75    margin-left: 18px;76  }77  .clear-btn svg { width: 34px; height: 34px; }78 79  /* Suggestions list */80  .suggestions {81    position: absolute;82    top: 290px;83    left: 0;84    width: 1080px;85    padding: 0 36px;86    box-sizing: border-box;87  }88  .suggest-item {89    font-size: 60px;90    color: #121212;91    padding: 38px 0;92    border-bottom: 1px solid #F2F2F2;93  }94  .suggest-item:last-child { border-bottom: none; }95 96  /* Action pills */97  .actions {98    position: absolute;99    top: 1240px;100    left: 0;101    width: 1080px;102    display: flex;103    justify-content: space-between;104    padding: 0 60px;105    box-sizing: border-box;106  }107  .pill {108    width: 430px; height: 150px;109    background: #0F0F0F;110    border-radius: 100px;111    color: #FFFFFF;112    display: flex; align-items: center; justify-content: center;113    gap: 24px;114    font-size: 54px;115    box-shadow: 0 6px 14px rgba(0,0,0,0.18);116  }117  .pill svg { width: 64px; height: 64px; }118 119  /* Keyboard */120  .keyboard {121    position: absolute;122    left: 0;123    bottom: 90px;124    width: 1080px;125    height: 940px;126    background: #111315;127    border-top: 1px solid #1E1E1E;128    box-sizing: border-box;129    padding: 26px 26px 20px;130    color: #D7D7D7;131  }132  .kb-suggestion {133    height: 92px;134    display: flex; align-items: center;135    justify-content: center;136    color: #BFC4C8;137    font-size: 44px;138  }139  .kb-suggestion .mic {140    margin-left: auto;141    width: 56px; height: 56px;142  }143  .key-row {144    display: flex;145    justify-content: space-between;146    margin-top: 22px;147  }148  .key {149    width: 90px; height: 120px;150    background: #1C1F22;151    border-radius: 16px;152    display: flex; align-items: center; justify-content: center;153    font-size: 46px;154    color: #DADADA;155    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.02);156  }157  .key.wide { width: 120px; }158  .key.extra-wide { width: 520px; }159  .key.space { width: 520px; background: #1C1F22; }160  .key.dark { background: #0F0F0F; color: #FFFFFF; }161  .corner-btn {162    position: absolute;163    bottom: 110px; left: 26px;164    width: 140px; height: 140px; background: #8EDAB8;165    border-radius: 90px; display: flex; align-items: center; justify-content: center;166    font-size: 42px; color: #0A2D1F; font-weight: 600;167  }168  .enter-btn {169    position: absolute;170    bottom: 110px; right: 26px;171    width: 160px; height: 160px; background: #9BF3CF;172    border-radius: 100px; display: flex; align-items: center; justify-content: center;173  }174  .enter-btn svg { width: 82px; height: 82px; }175 176  /* Bottom home indicator */177  .home-indicator {178    position: absolute;179    bottom: 18px;180    left: 50%;181    transform: translateX(-50%);182    width: 520px; height: 10px;183    background: #D0D0D0;184    border-radius: 10px;185  }186</style>187</head>188<body>189<div id="render-target">190 191  <!-- Status Bar -->192  <div class="status-bar">193    <div class="status-left">194      <div style="font-weight:600;">1:25</div>195      <div class="status-icon"></div>196      <div class="status-icon"></div>197    </div>198    <div class="status-right">199      <div class="status-icon"></div>200      <div style="width: 54px; height: 28px; border: 2px solid #FFFFFF; border-radius: 6px; position: relative;">201        <div style="position:absolute; right:-10px; top:50%; transform:translateY(-50%); width:8px; height:14px; background:#FFFFFF;"></div>202      </div>203      <div style="font-weight:600;">100%</div>204    </div>205  </div>206 207  <!-- Search area -->208  <div class="search-area">209    <svg class="back-icon" viewBox="0 0 24 24">210      <path d="M15 19L8 12l7-7" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>211    </svg>212    <div class="query-text">Black sneakers</div>213    <div class="clear-btn">214      <svg viewBox="0 0 24 24">215        <path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2" stroke-linecap="round"/>216      </svg>217    </div>218  </div>219 220  <!-- Suggestions -->221  <div class="suggestions">222    <div class="suggest-item">Black Sneakers</div>223    <div class="suggest-item">All Black Sneakers</div>224    <div class="suggest-item">Women Black Sneakers</div>225    <div class="suggest-item">Black Leather Sneakers</div>226    <div class="suggest-item">Men Black Sneakers</div>227    <div class="suggest-item">Black And White Sneakers</div>228    <div class="suggest-item">Boys Black Sneakers</div>229  </div>230 231  <!-- Action Pills -->232  <div class="actions">233    <div class="pill">234      <svg viewBox="0 0 24 24">235        <rect x="3" y="7" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>236        <circle cx="12" cy="13" r="3" fill="none" stroke="#fff" stroke-width="2"/>237      </svg>238      <span>Camera</span>239    </div>240    <div class="pill">241      <svg viewBox="0 0 24 24">242        <rect x="6" y="6" width="12" height="12" fill="none" stroke="#fff" stroke-width="2"/>243        <path d="M9 15l2-2 2 2 2-3 2 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>244      </svg>245      <span>Photos</span>246    </div>247  </div>248 249  <!-- Keyboard -->250  <div class="keyboard">251    <div class="kb-suggestion">252      sneakers253      <svg class="mic" viewBox="0 0 24 24">254        <path d="M12 3a3 3 0 013 3v6a3 3 0 11-6 0V6a3 3 0 013-3z" fill="none" stroke="#C9C9C9" stroke-width="2"/>255        <path d="M5 11a7 7 0 0014 0M12 18v3" stroke="#C9C9C9" stroke-width="2" fill="none" stroke-linecap="round"/>256      </svg>257    </div>258 259    <div class="key-row">260      <!-- row 1 -->261      <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>262    </div>263    <div class="key-row">264      <!-- row 2 -->265      <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>266    </div>267    <div class="key-row">268      <!-- row 3 -->269      <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>270      <div class="key dark" style="width:120px;">⌫</div>271    </div>272    <div class="key-row">273      <!-- row 4 -->274      <div class="key wide">,</div>275      <div class="key wide">🙂</div>276      <div class="key space"></div>277      <div class="key wide">.</div>278    </div>279 280    <!-- Corner circular buttons -->281    <div class="corner-btn">?123</div>282    <div class="enter-btn">283      <svg viewBox="0 0 24 24">284        <path d="M5 12h10M11 6l6 6-6 6" stroke="#0A3D2A" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>285      </svg>286    </div>287  </div>288 289  <!-- Bottom Home Indicator -->290  <div class="home-indicator"></div>291</div>292</body>293</html>