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>Bread Buns Search</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Header */18  .header {19    position: relative;20    background: #d34c6b;21    height: 280px;22    color: #fff;23  }24  .status-bar {25    height: 96px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    font-size: 36px;31    letter-spacing: 0.5px;32    opacity: 0.95;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .search-row {40    display: flex;41    align-items: center;42    padding: 10px 36px 18px 36px;43    gap: 28px;44  }45  .back-btn {46    width: 64px;47    height: 64px;48    display: flex;49    align-items: center;50    justify-content: center;51  }52  .search-box {53    flex: 1;54    height: 110px;55    background: #ffffff;56    border-radius: 55px;57    display: flex;58    align-items: center;59    padding: 0 30px;60    box-sizing: border-box;61  }62  .search-icon {63    margin-right: 20px;64  }65  .search-text {66    color: #777;67    font-size: 40px;68    flex: 1;69  }70  .barcode-icon {71    width: 72px;72    height: 72px;73    border-radius: 36px;74    background: #f2f2f2;75    display: flex;76    align-items: center;77    justify-content: center;78  }79 80  /* Filter / toggle */81  .filter-bar {82    height: 96px;83    background: #f4f4f4;84    color: #9e9e9e;85    display: flex;86    align-items: center;87    justify-content: space-between;88    padding: 0 40px;89    font-size: 34px;90    border-bottom: 1px solid #e5e5e5;91  }92  .toggle {93    width: 120px;94    height: 56px;95    background: #ddd;96    border-radius: 28px;97    position: relative;98  }99  .toggle::after {100    content: "";101    position: absolute;102    top: 6px;103    right: 6px;104    width: 44px;105    height: 44px;106    background: #bbb;107    border-radius: 22px;108  }109 110  /* Section header */111  .section {112    padding: 28px 40px 10px 40px;113  }114  .section-row {115    display: flex;116    align-items: center;117    gap: 28px;118  }119  .section-avatar {120    width: 100px;121    height: 100px;122    background: #E0E0E0;123    border: 1px solid #BDBDBD;124    border-radius: 50%;125    display: flex;126    align-items: center;127    justify-content: center;128    color: #757575;129    font-size: 26px;130  }131  .section-title {132    font-size: 56px;133    font-weight: 700;134    color: #222;135    line-height: 1.2;136  }137  .section-sub {138    font-size: 32px;139    color: #8a8a8a;140    margin-top: 6px;141  }142 143  /* Product list */144  .list {145    padding: 0 20px 0 20px;146  }147  .product {148    display: flex;149    align-items: flex-start;150    gap: 26px;151    padding: 32px 20px;152    border-top: 1px solid #e6e6e6;153  }154  .product:first-child { border-top: none; }155  .product-img {156    width: 190px;157    height: 130px;158    background: #E0E0E0;159    border: 1px solid #BDBDBD;160    display: flex;161    align-items: center;162    justify-content: center;163    color: #757575;164    font-size: 26px;165    border-radius: 8px;166    flex-shrink: 0;167  }168  .product-content {169    flex: 1;170    min-width: 0;171  }172  .title {173    font-size: 44px;174    line-height: 1.25;175    color: #222;176    font-weight: 600;177    margin-bottom: 10px;178  }179  .subtitle {180    font-size: 34px;181    color: #7c7c7c;182    margin-bottom: 18px;183  }184  .location {185    font-size: 32px;186    color: #9a9a9a;187  }188  .chevron {189    width: 48px;190    height: 48px;191    margin-left: 16px;192    flex-shrink: 0;193  }194 195  /* Bottom gesture bar */196  .gesture {197    position: absolute;198    bottom: 26px;199    left: 50%;200    transform: translateX(-50%);201    width: 360px;202    height: 16px;203    background: #000;204    border-radius: 10px;205    opacity: 0.85;206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Header -->213  <div class="header">214    <div class="status-bar">215      <div>9:19</div>216      <div class="status-right">217        <!-- Simple wifi icon -->218        <svg width="44" height="44" viewBox="0 0 44 44" fill="none">219          <path d="M6 18c8-8 24-8 32 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>220          <path d="M12 24c6-6 18-6 24 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>221          <path d="M18 30c4-4 12-4 16 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>222          <circle cx="26" cy="34" r="2.5" fill="#fff"/>223        </svg>224        <!-- Battery icon -->225        <svg width="52" height="44" viewBox="0 0 52 44" fill="none">226          <rect x="6" y="12" width="34" height="20" rx="4" stroke="#fff" stroke-width="3"/>227          <rect x="10" y="16" width="26" height="12" rx="2" fill="#fff"/>228          <rect x="42" y="16" width="6" height="12" rx="2" fill="#fff"/>229        </svg>230      </div>231    </div>232 233    <div class="search-row">234      <div class="back-btn">235        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">236          <path d="M34 12 L18 28 L34 44" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>237        </svg>238      </div>239      <div class="search-box">240        <div class="search-icon">241          <svg width="44" height="44" viewBox="0 0 44 44" fill="none">242            <circle cx="18" cy="18" r="12" stroke="#888" stroke-width="3"/>243            <path d="M30 30 L40 40" stroke="#888" stroke-width="3" stroke-linecap="round"/>244          </svg>245        </div>246        <div class="search-text">bread buns</div>247        <div class="barcode-icon">248          <svg width="44" height="44" viewBox="0 0 44 44" fill="none">249            <rect x="6" y="10" width="32" height="24" rx="4" stroke="#999" stroke-width="2"/>250            <path d="M10 14v16M14 14v16M20 14v16M24 14v16M30 14v16M34 14v16" stroke="#999" stroke-width="2"/>251          </svg>252        </div>253      </div>254    </div>255  </div>256 257  <!-- Filter bar -->258  <div class="filter-bar">259    <div>Previously purchased only</div>260    <div class="toggle"></div>261  </div>262 263  <!-- Section header -->264  <div class="section">265    <div class="section-row">266      <div class="section-avatar">[IMG: Supermarket Icon]</div>267      <div>268        <div class="section-title">Supermarkets</div>269        <div class="section-sub">223 results</div>270      </div>271    </div>272  </div>273 274  <!-- Product list -->275  <div class="list">276 277    <div class="product">278      <div class="product-img">[IMG: Pack of Bread Buns]</div>279      <div class="product-content">280        <div class="title">Vienna Bakery White Pav Bread Buns</div>281        <div class="subtitle">6 per pack</div>282        <div class="location">In Choithrams</div>283      </div>284      <svg class="chevron" viewBox="0 0 48 48" fill="none">285        <path d="M16 10 L32 24 L16 38" stroke="#b3b3b3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>286      </svg>287    </div>288 289    <div class="product">290      <div class="product-img">[IMG: Pack of Bread Buns]</div>291      <div class="product-content">292        <div class="title">Vienna Bakery Brown Pav Bread Buns</div>293        <div class="subtitle">6 per pack</div>294        <div class="location">In Choithrams</div>295      </div>296      <svg class="chevron" viewBox="0 0 48 48" fill="none">297        <path d="M16 10 L32 24 L16 38" stroke="#b3b3b3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>298      </svg>299    </div>300 301    <div class="product">302      <div class="product-img">[IMG: Sesame Buns Pack]</div>303      <div class="product-content">304        <div class="title">Modern Bakery Sesame Buns (6 Pieces)</div>305        <div class="subtitle">330 gr</div>306        <div class="location">In 6 shops nearby</div>307      </div>308      <svg class="chevron" viewBox="0 0 48 48" fill="none">309        <path d="M16 10 L32 24 L16 38" stroke="#b3b3b3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>310      </svg>311    </div>312 313    <div class="product">314      <div class="product-img">[IMG: Brioche Burger Buns]</div>315      <div class="product-content">316        <div class="title">Fine Food Brioche Burger Buns with Sesame Seeds (4 Pieces) - artificial colors free, hydrogenated fats free</div>317        <div class="subtitle">280 gr</div>318        <div class="location">In Waitrose</div>319      </div>320      <svg class="chevron" viewBox="0 0 48 48" fill="none">321        <path d="M16 10 L32 24 L16 38" stroke="#b3b3b3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>322      </svg>323    </div>324 325    <div class="product">326      <div class="product-img">[IMG: Plain Buns Pack]</div>327      <div class="product-content">328        <div class="title">Modern Bakery Plain Buns (6 Pieces)</div>329        <div class="subtitle">330 gr</div>330        <div class="location">In 6 shops nearby</div>331      </div>332      <svg class="chevron" viewBox="0 0 48 48" fill="none">333        <path d="M16 10 L32 24 L16 38" stroke="#b3b3b3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>334      </svg>335    </div>336 337    <div class="product">338      <div class="product-img">[IMG: Hot Dog Rolls]</div>339      <div class="product-content">340        <div class="title">Modern Bakery Plain Hot Dog Rolls</div>341        <div class="subtitle">4 per pack</div>342        <div class="location">In 5 shops nearby</div>343      </div>344      <svg class="chevron" viewBox="0 0 48 48" fill="none">345        <path d="M16 10 L32 24 L16 38" stroke="#b3b3b3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>346      </svg>347    </div>348 349  </div>350 351  <!-- Bottom gesture bar -->352  <div class="gesture"></div>353</div>354</body>355</html>