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>Oats Search Results</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    font-family: Arial, Helvetica, sans-serif;14    color: #222;15  }16  /* Top status bar */17  .status-bar {18    height: 96px;19    padding: 0 32px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    font-size: 38px;24    color: #333;25  }26  .status-right {27    display: flex; align-items: center; gap: 20px; font-size: 30px; color: #666;28  }29  .icon { display: inline-flex; align-items: center; justify-content: center; }30  /* Search header */31  .search-header {32    padding: 12px 32px 24px 32px;33    display: flex; align-items: center; gap: 24px;34  }35  .back-btn {36    width: 72px; height: 72px; border-radius: 36px;37    display: flex; align-items: center; justify-content: center;38    color: #5f8d3f;39  }40  .search-box {41    flex: 1;42    height: 110px;43    border: 2px solid #5f8d3f;44    border-radius: 60px;45    display: flex; align-items: center;46    padding: 0 28px;47    gap: 24px;48    color: #5f8d3f;49    font-size: 40px;50  }51  .search-text { color: #4c4c4c; font-weight: 500; }52  /* Grid for first row products */53  .results {54    padding: 16px 40px 0 40px;55    display: grid;56    grid-template-columns: 1fr 1fr;57    gap: 48px 40px;58  }59  .card {60    position: relative;61  }62  .img {63    width: 100%; height: 220px;64    background: #E0E0E0;65    border: 1px solid #BDBDBD;66    display: flex; align-items: center; justify-content: center;67    color: #757575; font-size: 34px;68  }69  .overlay-btn {70    position: absolute; right: 24px; bottom: 180px;71    width: 88px; height: 88px; border-radius: 44px;72    background: #4e7f35; display: flex; align-items: center; justify-content: center;73  }74  .overlay-btn.right-compact { right: 24px; bottom: 180px; }75  .price {76    font-size: 60px; margin-top: 24px; font-weight: 700;77    letter-spacing: -1px;78  }79  .price sup { font-size: 32px; vertical-align: super; font-weight: 700; }80  .title {81    font-size: 36px; line-height: 1.3; margin-top: 10px;82  }83  .detail {84    margin-top: 16px; font-size: 34px; color: #222;85  }86  .detail .check { color: #4e7f35; margin-right: 12px; font-weight: 700; }87  .ebt {88    display: inline-block;89    background: #2e7d32; color: #fff; font-weight: 700;90    padding: 10px 18px; border-radius: 6px;91    font-size: 28px; margin-top: 18px;92  }93  .subnote {94    margin-top: 12px; font-size: 32px; color: #444; display: flex; align-items: center; gap: 12px;95  }96  /* Large single product */97  .single {98    padding: 24px 40px 0 40px;99  }100  .big-img-wrap { position: relative; }101  .big-img {102    width: 640px; height: 640px;103    background: #E0E0E0; border: 1px solid #BDBDBD;104    display: flex; align-items: center; justify-content: center;105    color: #757575; font-size: 34px; margin-left: 40px;106  }107  .heart {108    position: absolute; right: 260px; top: 20px;109    width: 88px; height: 88px; border-radius: 50%;110    border: 2px solid #CFCFCF; background: rgba(255,255,255,0.8);111    display: flex; align-items: center; justify-content: center;112  }113  .bell-bottom {114    position: absolute; right: 280px; bottom: 0;115    width: 88px; height: 88px; border-radius: 44px;116    background: #4e7f35; display: flex; align-items: center; justify-content: center;117    transform: translateY(40px);118  }119  .single .price { margin-top: 40px; }120  /* Bottom home indicator */121  .home-indicator {122    position: absolute; bottom: 36px; left: 50%;123    transform: translateX(-50%);124    width: 360px; height: 18px; background: #000; opacity: 0.85; border-radius: 9px;125  }126</style>127</head>128<body>129<div id="render-target">130  <!-- Status bar -->131  <div class="status-bar">132    <div>1:16</div>133    <div class="status-right">134      <span class="icon" title="Do Not Disturb">⏸️</span>135      <svg width="34" height="34" viewBox="0 0 24 24" class="icon">136        <path d="M4 10c3-5 13-5 16 0l-2 1c-2-3-10-3-12 0l-2-1zm2 4c2-2 10-2 12 0l-2 1c-1-1-7-1-8 0l-2-1z" fill="#666"/>137      </svg>138      <svg width="48" height="28" viewBox="0 0 48 28" class="icon">139        <rect x="1" y="4" width="38" height="20" rx="4" fill="none" stroke="#666" stroke-width="3"></rect>140        <rect x="4" y="7" width="32" height="14" fill="#666"></rect>141        <rect x="41" y="10" width="5" height="8" rx="2" fill="#666"></rect>142      </svg>143      <span>100%</span>144    </div>145  </div>146 147  <!-- Search header -->148  <div class="search-header">149    <div class="back-btn">150      <svg width="48" height="48" viewBox="0 0 24 24">151        <path d="M15 6l-6 6 6 6" stroke="#5f8d3f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>152      </svg>153    </div>154    <div class="search-box">155      <svg width="48" height="48" viewBox="0 0 24 24">156        <circle cx="11" cy="11" r="7" stroke="#5f8d3f" stroke-width="2" fill="none"/>157        <path d="M20 20l-4-4" stroke="#5f8d3f" stroke-width="2" fill="none" stroke-linecap="round"/>158      </svg>159      <div class="search-text">Oats</div>160      <div style="margin-left:auto;">161        <svg width="42" height="42" viewBox="0 0 24 24">162          <path d="M9 3v6l-2 2v6a5 5 0 0 0 10 0v-6l-2-2V3" stroke="#5f8d3f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>163        </svg>164      </div>165    </div>166  </div>167 168  <!-- First row results -->169  <div class="results">170    <!-- Card 1 -->171    <div class="card">172      <div class="img">[IMG: Brahmin's Oats Puttu Podi]</div>173      <div class="overlay-btn">174        <svg width="42" height="42" viewBox="0 0 24 24">175          <path d="M12 22a4 4 0 0 0 4-4H8a4 4 0 0 0 4 4z" fill="#fff"/>176          <path d="M12 4c-4 0-6 2-6 6v5l-1 1h14l-1-1v-5c0-4-2-6-6-6z" fill="#fff"/>177        </svg>178      </div>179      <div class="price">$<span style="font-size:72px;">6</span><sup>99</sup></div>180      <div class="title">Brahmin's Oats Puttu Podi, 1 kg</div>181      <div class="detail"><span class="check">✓</span>Pickup: Tomorrow 9am - 5pm</div>182      <div class="detail"><span class="check">✓</span>Delivery: Tomorrow 1pm - 8pm</div>183      <div class="ebt">EBT</div>184      <div class="detail" style="margin-top:6px;">SNAP EBT eligible</div>185    </div>186 187    <!-- Card 2 -->188    <div class="card">189      <div class="img">[IMG: Britannia Oats Choco & Almond Cookies]</div>190      <div class="overlay-btn">191        <svg width="42" height="42" viewBox="0 0 24 24">192          <circle cx="12" cy="12" r="10" fill="#fff"/>193          <path d="M12 7v10M7 12h10" stroke="#4e7f35" stroke-width="2"/>194        </svg>195      </div>196      <div class="price">$<span style="font-size:72px;">0</span><sup>89</sup></div>197      <div class="title">Britannia Nutri Choice Oats Choco & Almond Cookies, 75 g</div>198      <div class="detail"><span class="check">✓</span>Pickup: Tomorrow 9am - 5pm</div>199      <div class="detail"><span class="check">✓</span>Delivery: Tomorrow 1pm - 8pm</div>200      <div class="ebt">EBT</div>201      <div class="detail" style="margin-top:6px;">SNAP EBT eligible</div>202      <div class="subnote">203        <svg width="34" height="34" viewBox="0 0 24 24">204          <circle cx="12" cy="12" r="9" stroke="#444" stroke-width="2" fill="none"/>205          <path d="M12 6v6l4 2" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>206        </svg>207        Best Before: 03/30/2024208      </div>209    </div>210  </div>211 212  <!-- Large single product section -->213  <div class="single">214    <div class="big-img-wrap">215      <div class="big-img">[IMG: Kawan Oat Chapatti Value Pack]</div>216      <div class="heart">217        <svg width="44" height="44" viewBox="0 0 24 24">218          <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z" fill="none" stroke="#B0B0B0" stroke-width="2"/>219        </svg>220      </div>221      <div class="bell-bottom">222        <svg width="42" height="42" viewBox="0 0 24 24">223          <path d="M12 22a4 4 0 0 0 4-4H8a4 4 0 0 0 4 4z" fill="#fff"/>224          <path d="M12 4c-4 0-6 2-6 6v5l-1 1h14l-1-1v-5c0-4-2-6-6-6z" fill="#fff"/>225        </svg>226      </div>227    </div>228 229    <div class="price" style="margin-left:40px;">$<span style="font-size:72px;">7</span><sup>49</sup></div>230    <div class="title" style="margin-left:40px;">Kawan Oat Chapati, 24 pieces, (Frozen)</div>231    <div class="detail" style="margin-left:40px;"><span class="check">✓</span>Pickup: Tomorrow 9am - 5pm</div>232    <div class="detail" style="margin-left:40px;"><span class="check">✓</span>Delivery: Tomorrow 1pm - 8pm</div>233    <div class="ebt" style="margin-left:40px;">EBT</div>234    <div class="detail" style="margin-left:40px; margin-top:6px;">SNAP EBT eligible</div>235  </div>236 237  <!-- Bottom home indicator -->238  <div class="home-indicator"></div>239</div>240</body>241</html>