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 - Saffola Classic Masala Oats</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: #FFFFFF;15    font-family: "Inter", "SF Pro Display", Arial, sans-serif;16    color: #111111;17  }18 19  /* Status bar */20  .status-bar {21    position: relative;22    height: 110px;23    background: #0F0F10;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 28px;28    box-sizing: border-box;29  }30  .status-time {31    font-weight: 600;32    font-size: 38px;33    letter-spacing: 0.5px;34  }35  .status-center {36    display: flex;37    align-items: center;38    gap: 20px;39    margin-left: 26px;40    color: #EAEAEA;41  }42  .pill {43    border: 2px solid #EAEAEA;44    border-radius: 8px;45    padding: 4px 10px;46    font-size: 26px;47    line-height: 1;48  }49  .dot {50    width: 10px; height: 10px; border-radius: 50%; background: #EAEAEA;51  }52  .status-right {53    margin-left: auto;54    display: flex;55    align-items: center;56    gap: 26px;57  }58  .status-icon svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 3; }59 60  /* Search header */61  .search-header {62    height: 130px;63    display: flex;64    align-items: center;65    padding: 0 24px;66    gap: 24px;67    box-sizing: border-box;68    border-bottom: 1px solid #E9E9E9;69  }70  .icon-btn {71    width: 72px;72    height: 72px;73    border: none;74    background: transparent;75    display: flex;76    align-items: center;77    justify-content: center;78    padding: 0;79  }80  .icon-btn svg {81    width: 48px; height: 48px; stroke: #1A1A1A; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round;82  }83  .search-input {84    flex: 1;85    font-size: 44px;86    border: none;87    outline: none;88    color: #1A1A1A;89    background: transparent;90  }91 92  /* Results */93  .results {94    position: relative;95    padding: 26px 28px 0 28px;96  }97  .result-item {98    padding: 18px 0 26px 0;99  }100  .result-title {101    font-size: 46px;102    font-weight: 700;103    color: #101010;104  }105  .divider {106    height: 2px;107    background: #EEEEEE;108    width: 100%;109  }110 111  /* Keyboard mock */112  .keyboard {113    position: absolute;114    left: 0;115    bottom: 0;116    width: 1080px;117    height: 780px;118    background: #1E1F21;119    border-top: 1px solid #2B2C2E;120    box-sizing: border-box;121    padding: 18px 20px 28px;122    display: flex;123    flex-direction: column;124    gap: 18px;125    color: #EDEDED;126  }127  .kb-suggest {128    text-align: center;129    color: #C7C7C7;130    font-size: 36px;131    margin-top: 4px;132  }133  .keys-row {134    display: grid;135    grid-auto-flow: column;136    gap: 14px;137  }138  .row-1 { grid-template-columns: repeat(10, 1fr); }139  .row-2 { grid-template-columns: repeat(9, 1fr); margin-left: 34px; margin-right: 34px; }140  .row-3 { grid-template-columns: 120px repeat(7, 1fr) 120px; }141  .row-bottom {142    display: grid;143    grid-template-columns: 160px 120px 1fr 120px 160px;144    align-items: center;145    gap: 16px;146    margin-top: 6px;147  }148  .key {149    background: #2A2B2E;150    border-radius: 22px;151    height: 110px;152    display: flex;153    align-items: center;154    justify-content: center;155    font-size: 40px;156    color: #F5F5F5;157    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.04);158  }159  .key.small { font-size: 34px; }160  .space { background: #2A2B2E; height: 110px; border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #BDBDBD; font-size: 36px; }161  .search-circle {162    background: #D6E3FF;163    color: #1C3C7A;164    border-radius: 999px;165    height: 120px;166    width: 120px;167    display: flex; align-items: center; justify-content: center;168  }169  .search-circle svg { width: 46px; height: 46px; stroke: #1C3C7A; stroke-width: 4; fill: none; }170  .backspace svg { width: 42px; height: 42px; stroke: #F5F5F5; stroke-width: 4; fill: none; }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status bar -->177  <div class="status-bar">178    <div class="status-time">12:34</div>179    <div class="status-center">180      <span style="font-size:34px;">👻</span>181      <span style="font-size:30px;">🔔</span>182      <span class="pill">LR</span>183      <span class="dot"></span>184    </div>185    <div class="status-right">186      <div class="status-icon">187        <svg viewBox="0 0 24 24"><path d="M15 19a3 3 0 1 1-6 0"/><path d="M18 13V9a6 6 0 0 0-12 0v4l-2 3h16l-2-3z"/></svg>188      </div>189      <div class="status-icon">190        <svg viewBox="0 0 24 24"><path d="M2 18l7-7 4 4 7-7"/><path d="M20 18h-4"/></svg>191      </div>192      <div class="status-icon">193        <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M21 10v4"/></svg>194      </div>195    </div>196  </div>197 198  <!-- Search header -->199  <div class="search-header">200    <button class="icon-btn" aria-label="Back">201      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>202    </button>203    <input class="search-input" type="text" value="Saffola Classic Masala oats" />204    <button class="icon-btn" aria-label="Clear">205      <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>206    </button>207  </div>208 209  <!-- Result list -->210  <div class="results">211    <div class="result-item">212      <div class="result-title">Saffola Classic Masala Oats</div>213    </div>214    <div class="divider"></div>215  </div>216 217  <!-- Keyboard mock -->218  <div class="keyboard">219    <div class="kb-suggest">oats</div>220 221    <div class="keys-row row-1">222      <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>223      <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>224    </div>225 226    <div class="keys-row row-2">227      <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>228      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>229    </div>230 231    <div class="keys-row row-3">232      <div class="key small">⇧</div>233      <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>234      <div class="key backspace">235        <svg viewBox="0 0 24 24"><path d="M22 6H11L4 12l7 6h11V6z"/><path d="M13 9l6 6M19 9l-6 6"/></svg>236      </div>237    </div>238 239    <div class="row-bottom">240      <div class="key small">?123</div>241      <div class="key small">,</div>242      <div class="space">space</div>243      <div class="key small">.</div>244      <div class="search-circle" title="Search">245        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></svg>246      </div>247    </div>248  </div>249 250</div>251</body>252</html>