GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search - Apple pie</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    padding: 0 32px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #1f1f1f;29    font-size: 36px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 22px;35    color: #555;36  }37  .icon-wifi, .icon-signal, .icon-battery {38    display: inline-block;39  }40  .icon-wifi svg, .icon-signal svg, .icon-battery svg {41    height: 36px;42  }43 44  /* Search bar area */45  .search-wrap {46    position: absolute;47    top: 112px;48    left: 36px;49    right: 36px;50  }51  .search-bar {52    height: 124px;53    border-radius: 62px;54    background: #f1f1f1;55    display: flex;56    align-items: center;57    padding: 0 28px;58    box-sizing: border-box;59    gap: 22px;60  }61  .back-ic, .clear-ic {62    width: 54px; height: 54px;63    display: flex; align-items: center; justify-content: center;64    color: #6a6a6a;65  }66  .search-text {67    font-size: 46px;68    color: #222;69    flex: 1;70  }71 72  /* Suggestions list */73  .suggestions {74    position: absolute;75    top: 270px;76    left: 48px;77    right: 48px;78    color: #2a2a2a;79  }80  .suggest-item {81    font-size: 46px;82    padding: 28px 0;83    border-bottom: 1px solid #efefef;84  }85 86  /* Keyboard */87  .keyboard {88    position: absolute;89    left: 0;90    bottom: 0;91    width: 1080px;92    height: 1020px;93    background: #111111;94    color: #eee;95    box-shadow: 0 -4px 18px rgba(0,0,0,0.3);96  }97  .kb-suggest {98    height: 90px;99    padding: 18px 28px;100    color: #cfcfcf;101    display: flex;102    align-items: center;103    gap: 28px;104    border-bottom: 1px solid rgba(255,255,255,0.06);105    font-size: 40px;106  }107  .kb-suggest .chip {108    background: #222;109    padding: 10px 24px;110    border-radius: 20px;111  }112  .kb-rows {113    padding: 24px 18px 18px;114    box-sizing: border-box;115  }116  .row {117    display: flex;118    justify-content: center;119    gap: 14px;120    margin: 18px 0;121  }122  .key {123    background: #1f1f1f;124    border-radius: 14px;125    min-width: 88px;126    height: 112px;127    display: flex;128    align-items: center;129    justify-content: center;130    color: #efe8dc;131    font-size: 44px;132  }133  .key.wide { min-width: 150px; }134  .key.space { flex: 1; min-width: 300px; }135  .key.backspace {136    min-width: 128px;137  }138 139  .bottom-bar {140    position: absolute;141    bottom: 24px;142    left: 50%;143    transform: translateX(-50%);144    width: 420px;145    height: 10px;146    background: #e6e6e6;147    border-radius: 6px;148    opacity: 0.9;149  }150 151  /* Small search circle button */152  .circle-search {153    background: #ffe0a8;154    width: 122px;155    height: 122px;156    border-radius: 50%;157    display: flex;158    align-items: center;159    justify-content: center;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <!-- Status Bar -->167  <div class="status-bar">168    <div class="status-left">2:21</div>169    <div class="status-right">170      <span>57°</span>171      <span class="icon-signal">172        <svg viewBox="0 0 24 24" width="36"><path fill="#666" d="M2 18h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V10zm4-4h2v14h-2V6zm4-2h2v16h-2V4z"/></svg>173      </span>174      <span class="icon-wifi">175        <svg viewBox="0 0 24 24" width="36"><path fill="#666" d="M12 20l-2-2a3 3 0 014 0l-2 2zm6-6a9 9 0 00-12 0l-1.5-1.5a11 11 0 0115 0L18 14zm3-5a14 14 0 00-18 0L1.5 7a16 16 0 0121 0L21 9z"/></svg>176      </span>177      <span class="icon-battery">178        <svg viewBox="0 0 28 24" width="46">179          <rect x="1" y="6" width="22" height="12" rx="2" fill="#666"/>180          <rect x="3" y="8" width="18" height="8" rx="1" fill="#9ad06a"/>181          <rect x="23" y="9" width="3" height="6" fill="#666"/>182        </svg>183      </span>184    </div>185  </div>186 187  <!-- Search bar -->188  <div class="search-wrap">189    <div class="search-bar">190      <div class="back-ic">191        <svg viewBox="0 0 24 24" width="44" height="44"><path fill="#6a6a6a" d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5L15.5 19z"/></svg>192      </div>193      <div class="search-text">Apple pie</div>194      <div class="clear-ic">195        <svg viewBox="0 0 24 24" width="44" height="44">196          <circle cx="12" cy="12" r="10" fill="none" stroke="#808080" stroke-width="2"/>197          <path d="M8 8l8 8M16 8l-8 8" stroke="#808080" stroke-width="2" stroke-linecap="round"/>198        </svg>199      </div>200    </div>201  </div>202 203  <!-- Suggestions -->204  <div class="suggestions">205    <div class="suggest-item">apple pie</div>206    <div class="suggest-item">apple pie filling</div>207    <div class="suggest-item">apple pie drink</div>208    <div class="suggest-item">apple pie crust</div>209    <div class="suggest-item">apple pie alcohol</div>210    <div class="suggest-item">apple pies</div>211    <div class="suggest-item">apple pie alcohol drink</div>212    <div class="suggest-item">apple pie cake</div>213    <div class="suggest-item">apple pie filling cake</div>214    <div class="suggest-item">apple pie spice</div>215  </div>216 217  <!-- Keyboard -->218  <div class="keyboard">219    <div class="kb-suggest">220      <div class="chip">pie</div>221      <div class="chip">pies</div>222      <div class="chip">🥧</div>223      <div style="margin-left:auto; display:flex; align-items:center; gap:22px;">224        <svg viewBox="0 0 24 24" width="42" height="42"><path fill="#bdbdbd" d="M12 4a8 8 0 018 8h-2a6 6 0 10-6 6v2A8 8 0 0112 4zm-1 5h2v5h-2V9z"/></svg>225        <svg viewBox="0 0 24 24" width="42" height="42"><path fill="#cfcfcf" d="M12 3a4 4 0 00-4 4v3H6v6h12V10h-2V7a4 4 0 00-4-4zm0 2a2 2 0 012 2v3h-4V7a2 2 0 012-2z"/></svg>226      </div>227    </div>228    <div class="kb-rows">229      <!-- Row 1 -->230      <div class="row">231        <div class="key">q</div>232        <div class="key">w</div>233        <div class="key">e</div>234        <div class="key">r</div>235        <div class="key">t</div>236        <div class="key">y</div>237        <div class="key">u</div>238        <div class="key">i</div>239        <div class="key">o</div>240        <div class="key">p</div>241      </div>242      <!-- Row 2 -->243      <div class="row" style="padding:0 60px;">244        <div class="key">a</div>245        <div class="key">s</div>246        <div class="key">d</div>247        <div class="key">f</div>248        <div class="key">g</div>249        <div class="key">h</div>250        <div class="key">j</div>251        <div class="key">k</div>252        <div class="key">l</div>253      </div>254      <!-- Row 3 -->255      <div class="row">256        <div class="key wide">shift</div>257        <div class="key">z</div>258        <div class="key">x</div>259        <div class="key">c</div>260        <div class="key">v</div>261        <div class="key">b</div>262        <div class="key">n</div>263        <div class="key">m</div>264        <div class="key backspace">⌫</div>265      </div>266      <!-- Row 4 -->267      <div class="row">268        <div class="key wide">?123</div>269        <div class="key">,</div>270        <div class="key">😀</div>271        <div class="key space"></div>272        <div class="key">.</div>273        <div class="circle-search">274          <svg viewBox="0 0 24 24" width="48" height="48"><path fill="#6f5a2b" d="M15.5 14h-.8l-.3-.3A6.4 6.4 0 1016 15.5l.3.3v.8L21 21l-1.5 1.5-4.5-4.5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>275        </div>276      </div>277    </div>278    <div class="bottom-bar"></div>279  </div>280 281</div>282</body>283</html>