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 Results - Grocery App</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#FFFFFF;13    border-radius:0;14  }15 16  /* Status bar */17  .status-bar{18    height:100px; background:#000;19    color:#fff; display:flex; align-items:center;20    padding:0 36px; font-family:Arial, Helvetica, sans-serif;21    font-size:42px; letter-spacing:1px;22    box-sizing:border-box;23  }24  .status-bar .right{ margin-left:auto; display:flex; align-items:center; gap:28px; }25  .status-icon{ width:34px; height:34px; border:2px solid #fff; border-radius:6px; opacity:.9; }26  .battery{ width:44px; height:24px; border:2px solid #fff; border-radius:4px; position:relative; }27  .battery::after{ content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#fff; border-radius:1px; }28  .battery .level{ position:absolute; top:3px; left:3px; right:10px; bottom:3px; background:#fff; }29 30  /* Header */31  .header{32    padding:26px 40px 10px 40px;33    box-sizing:border-box;34    background:#fff;35  }36  .back-row{37    display:flex; align-items:center; gap:18px; color:#E96A00;38  }39  .back-row svg{ width:44px; height:44px; }40  .title{41    font-family:Arial, Helvetica, sans-serif;42    font-size:66px; font-weight:800; color:#113D2E;43    margin:10px 0 18px 0;44  }45 46  /* Search box */47  .search-box{48    margin:8px 36px 16px 36px;49    height:120px; border:2px solid #E0E0E0; border-radius:24px;50    display:flex; align-items:center; gap:24px; padding:0 30px;51    box-sizing:border-box; color:#757575; font-size:44px;52  }53  .search-box svg{ width:54px; height:54px; fill:#BDBDBD; }54 55  /* List */56  .results{ padding:10px 24px 0 24px; box-sizing:border-box; font-family:Arial, Helvetica, sans-serif; }57  .product{58    display:flex; align-items:center; position:relative;59    padding:26px 24px; gap:26px;60  }61  .product + .product{ border-top:1px solid #EBEBEB; }62  .product .img{63    width:150px; height:150px; background:#E0E0E0; border:1px solid #BDBDBD;64    display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; text-align:center; padding:8px; box-sizing:border-box; border-radius:6px;65    position:relative;66  }67  .sold .img::after{68    content:"Sold Out";69    position:absolute; bottom:10px; left:8px;70    background:#D7D7D7; color:#6b6b6b; font-size:30px; padding:8px 18px; border-radius:6px;71  }72  .info{ flex:1; }73  .name{ font-size:44px; color:#2E2E2E; font-weight:700; line-height:1.15; }74  .sub{ font-size:30px; color:#8A8A8A; margin-top:6px; }75  .price{ font-size:44px; font-weight:800; color:#222; margin-right:24px; }76  .add{ color:#E96A00; font-weight:700; font-size:40px; text-decoration:none; }77 78  .tile{79    background:#F2F2F2; border-radius:8px;80    padding:0 10px; margin-left:10px; margin-right:10px;81  }82 83  /* Bottom tab bar */84  .tabbar{85    position:absolute; left:0; right:0; bottom:1000px;86    height:210px; background:#fff; border-radius:28px 28px 0 0;87    box-shadow:0 -8px 24px rgba(0,0,0,0.08);88    display:flex; justify-content:space-around; align-items:center;89    font-family:Arial, Helvetica, sans-serif;90  }91  .tab{92    display:flex; flex-direction:column; align-items:center; gap:14px; color:#9E9E9E; font-size:34px;93  }94  .tab svg{ width:58px; height:58px; fill:#BDBDBD; }95  .tab.active{ color:#E96A00; }96  .tab.active svg{ fill:#E96A00; }97 98  /* Keyboard mock */99  .keyboard{100    position:absolute; left:0; right:0; bottom:0; height:1000px; background:#121212; color:#E0E0E0;101    box-sizing:border-box; padding:24px 24px 28px 24px;102  }103  .kb-top{104    display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;105  }106  .kb-pill{107    flex:1; margin:0 18px; background:#222; color:#EAEAEA; height:76px; border-radius:38px;108    display:flex; align-items:center; justify-content:center; font-size:40px;109  }110  .kb-btn-round{111    width:76px; height:76px; background:#2C2C2C; border-radius:16px; display:flex; align-items:center; justify-content:center;112  }113  .kb-rows{ display:flex; flex-direction:column; gap:16px; }114  .row{ display:flex; gap:16px; justify-content:center; }115  .key{116    width:90px; height:112px; background:#2D2D2D; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:40px; color:#EDEDED;117  }118  .key.wide{ width:140px; }119  .key.exwide{ width:260px; }120  .key.space{ flex:1; }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Status Bar -->127  <div class="status-bar">128    7:48129    <div class="right">130      <div class="status-icon"></div>131      <div class="battery"><div class="level"></div></div>132    </div>133  </div>134 135  <!-- Header and search -->136  <div class="header">137    <div class="back-row">138      <svg viewBox="0 0 24 24">139        <path d="M15.5 4L7 12l8.5 8" stroke="#E96A00" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>140      </svg>141    </div>142    <div class="title">Search for products</div>143  </div>144 145  <div class="search-box">146    <svg viewBox="0 0 24 24">147      <path d="M10 18a8 8 0 1 1 5.3-14l5.7 5.7-2.1 2.1-5.6-5.6A6 6 0 1 0 10 18z"/>148    </svg>149    Bread crumbs150  </div>151 152  <!-- Results -->153  <div class="results">154    <div class="product">155      <div class="img">[IMG: Panko Bread Crumbs]</div>156      <div class="info">157        <div class="name">Panko Bread<br>Crumbs</div>158        <div class="sub">1KG</div>159      </div>160      <div class="price">Rs 400</div>161      <a href="#" class="add">Add</a>162    </div>163 164    <div class="product tile sold">165      <div class="img">[IMG: Solemio Panko]</div>166      <div class="info">167        <div class="name">Solemio Panko Bread<br>Crumbs</div>168        <div class="sub">200GM</div>169      </div>170      <div class="price">Rs 128</div>171    </div>172 173    <div class="product tile sold">174      <div class="img">[IMG: McCain Tandoori Nuggets]</div>175      <div class="info">176        <div class="name">Mc Cain Tandoori Veggie<br>Nuggets</div>177        <div class="sub">325GM</div>178      </div>179      <div class="price">Rs 150</div>180    </div>181 182    <div class="product tile sold">183      <div class="img">[IMG: McCain Veggie Fingers]</div>184      <div class="info">185        <div class="name">Mc Cain Veggie Fingers</div>186        <div class="sub">400GM</div>187      </div>188      <div class="price">Rs 140</div>189    </div>190  </div>191 192  <!-- Bottom navigation -->193  <div class="tabbar">194    <div class="tab">195      <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H3z"/></svg>196      <div>Home</div>197    </div>198    <div class="tab active">199      <svg viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 5.3-14l5.7 5.7-2.1 2.1-5.6-5.6A6 6 0 1 0 10 18z"/></svg>200      <div>Search</div>201    </div>202    <div class="tab">203      <svg viewBox="0 0 24 24"><path d="M4 12h16M4 7h16M4 17h10"/></svg>204      <div>Offers</div>205    </div>206    <div class="tab">207      <svg viewBox="0 0 24 24"><path d="M7 7h14l-2 10H7L5 4H2"/></svg>208      <div>Cart</div>209    </div>210    <div class="tab">211      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z"/></svg>212      <div>Account</div>213    </div>214  </div>215 216  <!-- Keyboard mock -->217  <div class="keyboard">218    <div class="kb-top">219      <div class="kb-btn-round">220        <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="5" cy="5" r="3" fill="#AAA"/><circle cx="5" cy="12" r="3" fill="#AAA"/><circle cx="5" cy="19" r="3" fill="#AAA"/></svg>221      </div>222      <div class="kb-pill">crumbs</div>223      <div class="kb-btn-round">224        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 0-9 9v5l4-2 4 2 4-2 4 2v-5a9 9 0 0 0-9-9z" fill="#AAA"/></svg>225      </div>226    </div>227    <div class="kb-rows">228      <div class="row">229        <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>230      </div>231      <div class="row">232        <div class="key"></div>233        <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>234        <div class="key"></div>235      </div>236      <div class="row">237        <div class="key wide">⇧</div>238        <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>239        <div class="key wide">⌫</div>240      </div>241      <div class="row">242        <div class="key wide">?123</div>243        <div class="key wide">,</div>244        <div class="key space"></div>245        <div class="key wide">.</div>246        <div class="key exwide">✓</div>247      </div>248    </div>249  </div>250 251</div>252</body>253</html>