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 - Food Processor</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; }10  #render-target {11    position: relative;12    overflow: hidden;13    width: 1080px;14    height: 2400px;15    background: linear-gradient(#ffffff 0%, #ffffff 45%, #F3F4F6 45%, #F3F4F6 100%);16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17    color: #222;18  }19 20  /* Top search/header */21  .header {22    position: relative;23    padding: 24px 36px 0 24px;24  }25  .top-row {26    display: flex;27    align-items: center;28    gap: 20px;29    margin-top: 48px;30  }31  .icon-btn {32    width: 72px;33    height: 72px;34    border: none;35    background: transparent;36    display: flex;37    align-items: center;38    justify-content: center;39    padding: 0;40    cursor: default;41  }42  .icon {43    width: 40px;44    height: 40px;45    stroke: #222;46    fill: none;47    stroke-width: 2.5;48  }49  .search-bar {50    flex: 1;51    height: 96px;52    background: #F2F3F5;53    border-radius: 48px;54    display: flex;55    align-items: center;56    padding: 0 28px;57    gap: 20px;58  }59  .search-icon { width: 34px; height: 34px; stroke: #9AA0A6; }60  .search-chip {61    background: #E7E9EC;62    color: #555;63    border-radius: 24px;64    padding: 14px 22px;65    font-size: 34px;66  }67  .grid-icon .sq { fill: #222; }68 69  /* Sort/filter bar */70  .sort-bar {71    display: flex;72    align-items: center;73    gap: 52px;74    padding: 44px 36px 22px 32px;75    font-size: 38px;76    color: #3B3B3B;77  }78  .sort-item {79    position: relative;80    display: flex;81    align-items: center;82    gap: 12px;83  }84  .sort-item.active {85    color: #111;86    font-weight: 600;87  }88  .underline {89    position: absolute;90    left: 0;91    bottom: -16px;92    width: 64px;93    height: 8px;94    background: #FF6D2D;95    border-radius: 4px;96  }97  .caret {98    width: 26px; height: 26px; stroke: #6B7280; stroke-width: 2.5; fill: none;99  }100  .filter-icon { width: 30px; height: 30px; stroke: #6B7280; stroke-width: 2.5; fill: none; }101 102  /* Product list item */103  .product-row {104    display: flex;105    gap: 28px;106    padding: 24px 34px;107    background: #fff;108    border-top: 1px solid #EEE;109  }110  .thumb {111    width: 300px;112    height: 320px;113    background: #E0E0E0;114    border: 1px solid #BDBDBD;115    border-radius: 32px;116    display: flex;117    align-items: center;118    justify-content: center;119    color: #757575;120    font-size: 30px;121    text-align: center;122    padding: 10px;123  }124  .p-info {125    flex: 1;126    padding-top: 8px;127  }128  .badge {129    display: inline-block;130    background: #FF7A2F;131    color: #fff;132    font-weight: 700;133    font-size: 28px;134    padding: 10px 16px;135    border-radius: 10px;136    margin-right: 14px;137  }138  .title {139    display: inline-block;140    font-size: 36px;141    color: #656B73;142    max-width: 620px;143    vertical-align: middle;144    line-height: 1.25;145    overflow: hidden;146    text-overflow: ellipsis;147    white-space: nowrap;148  }149  .price {150    margin-top: 22px;151    font-size: 56px;152    font-weight: 800;153    color: #111;154  }155  .rating {156    margin-top: 8px;157    display: flex;158    align-items: center;159    gap: 12px;160  }161  .stars { display: flex; gap: 6px; }162  .star {163    width: 34px; height: 34px;164  }165  .sold {166    color: #9AA0A6;167    font-size: 34px;168  }169</style>170</head>171<body>172<div id="render-target">173  <div class="header">174    <div class="top-row">175      <button class="icon-btn" aria-label="Back">176        <svg class="icon" viewBox="0 0 24 24">177          <path d="M14 4 L6 12 L14 20" stroke-linecap="round" stroke-linejoin="round"></path>178        </svg>179      </button>180 181      <div class="search-bar">182        <svg class="search-icon" viewBox="0 0 24 24">183          <circle cx="11" cy="11" r="7"></circle>184          <line x1="16.5" y1="16.5" x2="21" y2="21"></line>185        </svg>186        <span class="search-chip">food processor ×</span>187      </div>188 189      <button class="icon-btn" aria-label="View Options">190        <svg class="grid-icon" viewBox="0 0 24 24">191          <rect class="sq" x="3" y="3" width="7" height="7" rx="1"></rect>192          <rect class="sq" x="14" y="3" width="7" height="7" rx="1"></rect>193          <rect class="sq" x="3" y="14" width="7" height="7" rx="1"></rect>194          <rect class="sq" x="14" y="14" width="7" height="7" rx="1"></rect>195        </svg>196      </button>197    </div>198  </div>199 200  <div class="sort-bar">201    <div class="sort-item active">202      <span>Most Popular</span>203      <svg class="caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"/></svg>204      <div class="underline"></div>205    </div>206    <div class="sort-item">207      <span>Price</span>208      <svg class="caret" viewBox="0 0 24 24"><path d="M8 10l4 4 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>209    </div>210    <div class="sort-item">211      <span>Filter</span>212      <svg class="filter-icon" viewBox="0 0 24 24">213        <path d="M4 5h16M7 12h10M10 19h4" stroke-linecap="round"/>214      </svg>215    </div>216  </div>217 218  <div class="product-row">219    <div class="thumb">[IMG: Portable Juicer Product]</div>220    <div class="p-info">221      <div>222        <span class="badge">Flash Deals</span>223        <span class="title">XIAOMI Mijia Portable Juicer Mixer Electric Mini Blender Fruit V...</span>224      </div>225      <div class="price">₹2,502.74</div>226      <div class="rating">227        <div class="stars">228          <svg class="star" viewBox="0 0 24 24" fill="#FF6D2D"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>229          <svg class="star" viewBox="0 0 24 24" fill="#FF6D2D"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>230          <svg class="star" viewBox="0 0 24 24" fill="#FF6D2D"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>231          <svg class="star" viewBox="0 0 24 24" fill="#FF6D2D"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>232          <svg class="star" viewBox="0 0 24 24" fill="#D1D5DB"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>233        </div>234        <span class="sold">106 Sold</span>235      </div>236    </div>237  </div>238</div>239</body>240</html>