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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 20px; left: 32px; right: 32px;18    height: 60px; display: flex; align-items: center; justify-content: space-between;19    color: #222;20    font-weight: 600; font-size: 34px;21  }22  .status-icons { display: flex; align-items: center; gap: 22px; }23  .status-icons svg { width: 34px; height: 34px; }24 25  /* Header */26  .header {27    position: absolute; top: 120px; left: 48px; right: 48px;28    display: flex; align-items: center; justify-content: space-between;29  }30  .title {31    font-size: 88px; font-weight: 700; color: #111;32    letter-spacing: -0.5px;33  }34  .cart-btn {35    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;36  }37  .cart-btn svg { width: 54px; height: 54px; }38 39  /* Search bar */40  .search-bar {41    position: absolute; top: 260px; left: 48px; right: 48px;42    height: 120px; border: 6px solid #161616; border-radius: 30px;43    display: flex; align-items: center; padding: 0 28px;44    box-sizing: border-box;45  }46  .sb-icon { width: 56px; height: 56px; margin-right: 24px; flex: 0 0 auto; }47  .sb-text {48    font-size: 36px; color: #2f2f2f; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;49  }50  .sb-clear {51    width: 64px; height: 64px; border-radius: 50%; background: #111;52    color: #fff; display: flex; align-items: center; justify-content: center;53    font-size: 40px; font-weight: 700;54    margin-left: 18px;55  }56 57  /* Suggestion row */58  .suggestion-wrap {59    position: absolute; top: 410px; left: 32px; right: 32px;60  }61  .suggestion {62    display: flex; align-items: center; gap: 20px; padding: 20px 18px;63    color: #4a4a4a; font-size: 34px;64  }65  .suggestion .sg-icon { width: 42px; height: 42px; }66  .divider { height: 2px; background: #E6E6E6; margin-top: 10px; }67 68  /* Keyboard */69  .keyboard {70    position: absolute; left: 0; right: 0; bottom: 0;71    height: 880px; background: #f3eef7; border-top-left-radius: 28px; border-top-right-radius: 28px;72    box-shadow: 0 -2px 0 rgba(0,0,0,0.06) inset;73  }74  .kb-suggestions {75    height: 110px; display: flex; align-items: center; gap: 22px;76    padding: 0 30px; color: #3f3f45; font-size: 34px;77  }78  .kb-suggestions .grid-icon svg { width: 52px; height: 52px; }79  .kb-token {80    padding: 14px 24px; background: #ffffff; border-radius: 24px; border: 1px solid #dedbe8;81  }82  .kb-suggestions .sep { color: #8a8a90; font-weight: 500; }83  .kb-suggestions .mic svg { width: 48px; height: 48px; }84 85  .kb-rows { padding: 16px 30px 24px; }86  .kb-row { display: flex; gap: 16px; justify-content: space-between; margin-top: 16px; }87 88  .key {89    background: #ffffff; color: #222; font-size: 46px; font-weight: 600;90    height: 122px; flex: 1 1 0; border-radius: 26px;91    display: flex; align-items: center; justify-content: center;92    box-shadow: 0 2px 0 rgba(0,0,0,0.08);93  }94  .key.small { flex: 0 0 86px; }95  .key.medium { flex: 0 0 120px; }96  .key.wide { flex: 0 0 160px; }97  .key.space { flex: 1 1 auto; min-width: 420px; }98  .key.special {99    background: #e0d7f1; color: #2a2a2a;100  }101  .key.icon svg { width: 48px; height: 48px; }102 103  .bottom-bar {104    position: absolute; left: 0; right: 0; bottom: 20px;105    display: flex; justify-content: center;106  }107  .home-indicator { width: 260px; height: 10px; border-radius: 8px; background: #8f8f92; }108</style>109</head>110<body>111<div id="render-target">112 113  <!-- Status Bar -->114  <div class="status-bar">115    <div class="time">3:53</div>116    <div class="status-icons">117      <!-- Wi-Fi -->118      <svg viewBox="0 0 24 24" fill="none">119        <path d="M2 8c5-4 15-4 20 0" stroke="#333" stroke-width="2" stroke-linecap="round"/>120        <path d="M6 12c3-2 9-2 12 0" stroke="#333" stroke-width="2" stroke-linecap="round"/>121        <path d="M10 16c1-1 3-1 4 0" stroke="#333" stroke-width="2" stroke-linecap="round"/>122        <circle cx="12" cy="19" r="1.8" fill="#333"/>123      </svg>124      <!-- Battery -->125      <svg viewBox="0 0 28 16" fill="none">126        <rect x="1" y="2" width="22" height="12" rx="2" stroke="#333" stroke-width="2"/>127        <rect x="3" y="4" width="18" height="8" rx="1" fill="#777"/>128        <rect x="24" y="5" width="3" height="6" rx="1" fill="#333"/>129      </svg>130    </div>131  </div>132 133  <!-- Header -->134  <div class="header">135    <div class="title">Search</div>136    <div class="cart-btn">137      <svg viewBox="0 0 24 24" fill="none">138        <path d="M4 6h16l-2 10H6L4 6z" stroke="#111" stroke-width="2" stroke-linejoin="round"/>139        <path d="M7 6V4h10v2" stroke="#111" stroke-width="2"/>140        <circle cx="9" cy="19" r="1.8" fill="#111"/>141        <circle cx="17" cy="19" r="1.8" fill="#111"/>142      </svg>143    </div>144  </div>145 146  <!-- Search Bar -->147  <div class="search-bar">148    <div class="sb-icon">149      <svg viewBox="0 0 24 24" fill="none">150        <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2"/>151        <path d="M20 20l-4.5-4.5" stroke="#111" stroke-width="2" stroke-linecap="round"/>152      </svg>153    </div>154    <div class="sb-text">7-eleven, gluten free restaurant</div>155    <div class="sb-clear">×</div>156  </div>157 158  <!-- Suggestion Row -->159  <div class="suggestion-wrap">160    <div class="suggestion">161      <div class="sg-icon">162        <svg viewBox="0 0 24 24" fill="none">163          <circle cx="11" cy="11" r="7" stroke="#4a4a4a" stroke-width="2"/>164          <path d="M20 20l-4.5-4.5" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"/>165        </svg>166      </div>167      <div>Search for "7-eleven, gluten free restaura..."</div>168    </div>169    <div class="divider"></div>170  </div>171 172  <!-- Keyboard -->173  <div class="keyboard">174    <div class="kb-suggestions">175      <div class="grid-icon">176        <svg viewBox="0 0 24 24" fill="#9b93b6">177          <rect x="3" y="3" width="7" height="7" rx="2"></rect>178          <rect x="14" y="3" width="7" height="7" rx="2"></rect>179          <rect x="3" y="14" width="7" height="7" rx="2"></rect>180          <rect x="14" y="14" width="7" height="7" rx="2"></rect>181        </svg>182      </div>183      <div class="kb-token">restaurant</div>184      <div class="sep">|</div>185      <div class="kb-token">restaurants</div>186      <div class="sep">|</div>187      <div class="kb-token">Restaurant</div>188      <div style="flex:1"></div>189      <div class="mic">190        <svg viewBox="0 0 24 24" fill="none">191          <rect x="8" y="4" width="8" height="12" rx="4" stroke="#6b6b75" stroke-width="2"/>192          <path d="M5 11a7 7 0 0014 0" stroke="#6b6b75" stroke-width="2"/>193          <path d="M12 18v3" stroke="#6b6b75" stroke-width="2" stroke-linecap="round"/>194        </svg>195      </div>196    </div>197 198    <div class="kb-rows">199      <!-- Row 1 -->200      <div class="kb-row">201        <div class="key">q</div>202        <div class="key">w</div>203        <div class="key">e</div>204        <div class="key">r</div>205        <div class="key">t</div>206        <div class="key">y</div>207        <div class="key">u</div>208        <div class="key">i</div>209        <div class="key">o</div>210        <div class="key">p</div>211      </div>212      <!-- Row 2 -->213      <div class="kb-row" style="padding: 0 46px;">214        <div class="key">a</div>215        <div class="key">s</div>216        <div class="key">d</div>217        <div class="key">f</div>218        <div class="key">g</div>219        <div class="key">h</div>220        <div class="key">j</div>221        <div class="key">k</div>222        <div class="key">l</div>223      </div>224      <!-- Row 3 -->225      <div class="kb-row">226        <div class="key special wide">⇧</div>227        <div class="key">z</div>228        <div class="key">x</div>229        <div class="key">c</div>230        <div class="key">v</div>231        <div class="key">b</div>232        <div class="key">n</div>233        <div class="key">m</div>234        <div class="key special wide">⌫</div>235      </div>236      <!-- Row 4 -->237      <div class="kb-row">238        <div class="key special wide">?123</div>239        <div class="key special small">,</div>240        <div class="key special wide">😊</div>241        <div class="key space"> </div>242        <div class="key small">.</div>243        <div class="key special wide icon">244          <svg viewBox="0 0 24 24" fill="none">245            <circle cx="11" cy="11" r="7" stroke="#2a2a2a" stroke-width="2"/>246            <path d="M20 20l-4.5-4.5" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round"/>247          </svg>248        </div>249      </div>250    </div>251  </div>252 253  <!-- Home indicator -->254  <div class="bottom-bar"><div class="home-indicator"></div></div>255</div>256</body>257</html>