GD-ML/AndroidCode
13.4k
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 - Quaker Oats</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; border-radius:36px; box-shadow:0 20px 60px rgba(0,0,0,0.15);12 color:#111;13 }14 .header {15 position:absolute; left:0; top:0; width:100%; height:260px;16 background:linear-gradient(180deg,#a7e1e4 0%, #cdeae7 100%);17 padding:30px 36px 20px 36px;18 box-sizing:border-box;19 }20 .status-row {21 display:flex; align-items:center; justify-content:space-between;22 height:60px; color:#222;23 }24 .status-left { display:flex; align-items:center; gap:18px; }25 .time { font-size:36px; font-weight:600; }26 .status-icons { display:flex; align-items:center; gap:14px; }27 .status-dot { width:10px; height:10px; background:#2b2b2b; border-radius:50%; opacity:0.6; }28 .status-right { display:flex; align-items:center; gap:18px; }29 .icon { width:36px; height:36px; }30 .search-row {31 margin-top:12px; display:flex; align-items:center; gap:20px;32 }33 .back-btn {34 width:72px; height:72px; display:flex; align-items:center; justify-content:center;35 }36 .search-field {37 flex:1; height:88px; background:#fff; border-radius:20px; box-shadow:0 2px 0 rgba(0,0,0,0.06);38 display:flex; align-items:center; padding:0 22px; box-sizing:border-box; border:1px solid #e5e5e5;39 }40 .search-text { font-size:34px; color:#333; flex:1; }41 .search-tool {42 width:60px; height:60px; border-radius:14px; border:1px solid #e0e0e0; display:flex; align-items:center; justify-content:center;43 background:#f7f7f7;44 }45 .filters-btn {46 font-size:34px; color:#2b6f8f; display:flex; align-items:center; gap:10px;47 }48 .toggle-row {49 position:absolute; left:0; right:0; top:260px; height:92px; background:#fff;50 display:flex; align-items:center; justify-content:space-between;51 padding:0 36px; box-sizing:border-box; border-bottom:1px solid #eee;52 }53 .prime-label { color:#2e8de0; font-weight:600; font-size:34px; display:flex; align-items:center; gap:12px; }54 .switch {55 width:88px; height:48px; border-radius:30px; background:#f0f0f0; border:1px solid #ddd; position:relative;56 }57 .switch::after {58 content:""; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid #d5d5d5;59 position:absolute; left:2px; top:2px;60 }61 .video-card {62 position:absolute; left:20px; right:20px; top:352px; height:620px; border-radius:14px; overflow:hidden;63 background:#fff;64 }65 .video-inner {66 position:absolute; inset:0; border-radius:14px; overflow:hidden;67 }68 .img-placeholder {69 width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD;70 display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;71 }72 .brand-tag { position:absolute; right:18px; top:18px; background:#fff; border-radius:8px; padding:8px 12px; font-size:28px; border:1px solid #e5e5e5; }73 .video-caption {74 position:absolute; left:50%; transform:translateX(-50%); bottom:22px;75 background:#de6e3c; color:#fff; font-weight:600; font-size:30px;76 padding:14px 18px; border-radius:10px;77 }78 .volume-btn {79 position:absolute; right:18px; bottom:18px; width:64px; height:64px; border-radius:50%;80 background:rgba(255,255,255,0.9); border:1px solid #dcdcdc; display:flex; align-items:center; justify-content:center;81 }82 .product-row {83 position:absolute; left:20px; right:20px; top:996px; display:flex; gap:22px;84 }85 .card {86 width:330px; background:#fff; border-radius:18px; box-shadow:0 3px 8px rgba(0,0,0,0.06);87 border:1px solid #eee; padding:14px; box-sizing:border-box;88 }89 .card .thumb { width:100%; height:170px; }90 .title { font-size:30px; color:#222; margin-top:10px; line-height:1.2; }91 .rating-row { display:flex; align-items:center; gap:8px; margin-top:8px; }92 .star { width:28px; height:28px; }93 .count { color:#2e8de0; font-size:30px; }94 .link-row {95 position:absolute; left:24px; right:24px; top:1260px; display:flex; align-items:center; justify-content:space-between; color:#2e8de0;96 font-size:32px;97 }98 .sponsored { color:#777; font-size:28px; display:flex; align-items:center; gap:8px; }99 .notice {100 position:absolute; left:0; right:0; top:1320px; height:92px; background:#f5f5f5; color:#555; font-size:30px;101 display:flex; align-items:center; padding:0 26px; box-sizing:border-box; border-top:1px solid #ededed; border-bottom:1px solid #ededed;102 }103 .big-card {104 position:absolute; left:20px; right:20px; top:1420px; height:560px;105 background:#fff; border-radius:20px; border:1px solid #eaeaea; box-shadow:0 4px 12px rgba(0,0,0,0.06);106 display:flex; padding:20px; box-sizing:border-box; gap:22px;107 }108 .big-thumb { width:300px; height:520px; }109 .details { flex:1; }110 .brand { color:#777; font-size:28px; }111 .prod-title { font-size:36px; font-weight:700; line-height:1.25; margin-top:6px; color:#111; }112 .tags { display:flex; gap:12px; margin-top:14px; }113 .tag {114 font-size:26px; background:#fafafa; border:1px solid #e3e3e3; padding:8px 12px; border-radius:8px; color:#333;115 }116 .rating-line { display:flex; align-items:center; gap:10px; margin-top:16px; }117 .score { font-size:30px; color:#2b2b2b; }118 .stars-sm .star { width:24px; height:24px; }119 .reviews { font-size:28px; color:#666; }120 .deal {121 display:inline-block; margin-top:16px; background:#c94a34; color:#fff; font-weight:700; padding:10px 14px; border-radius:8px; font-size:30px;122 }123 .price-line { margin-top:14px; font-size:36px; font-weight:700; color:#222; }124 .mrp { font-size:28px; color:#777; margin-left:18px; text-decoration:line-through; }125 .off { font-size:28px; color:#777; margin-left:8px; }126 .save { margin-top:8px; font-size:28px; color:#555; }127 .prime-line { margin-top:6px; font-size:28px; color:#2e8de0; display:flex; align-items:center; gap:10px; }128 .bottom-bar {129 position:absolute; left:0; right:0; bottom:86px; height:180px; background:#fff; border-top:1px solid #e9e9e9;130 display:flex; justify-content:space-around; align-items:center;131 }132 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#777; font-size:28px; }133 .nav-item.active { color:#2e8de0; }134 .nav-icon { width:50px; height:50px; }135 .gesture {136 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);137 width:420px; height:18px; border-radius:12px; background:#cfcfcf; opacity:0.9;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Header with status and search -->145 <div class="header">146 <div class="status-row">147 <div class="status-left">148 <div class="time">10:14</div>149 <div class="status-icons">150 <!-- simple play rectangle icons to hint app status -->151 <svg class="icon" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" fill="#333" opacity="0.2"/></svg>152 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#333" opacity="0.2"/></svg>153 <svg class="icon" viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19" fill="#333" opacity="0.2"/></svg>154 <div class="status-dot"></div>155 </div>156 </div>157 <div class="status-right">158 <!-- signal -->159 <svg class="icon" viewBox="0 0 24 24">160 <rect x="2" y="16" width="4" height="6" fill="#333"/>161 <rect x="8" y="12" width="4" height="10" fill="#333"/>162 <rect x="14" y="8" width="4" height="14" fill="#333"/>163 </svg>164 <!-- battery -->165 <svg class="icon" viewBox="0 0 24 24">166 <rect x="2" y="6" width="18" height="12" rx="2" fill="#333"/>167 <rect x="21" y="10" width="2" height="4" fill="#333"/>168 </svg>169 </div>170 </div>171 172 <div class="search-row">173 <div class="back-btn">174 <svg class="icon" viewBox="0 0 24 24">175 <path d="M15 5 L7 12 L15 19" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>176 </svg>177 </div>178 <div class="search-field">179 <div class="search-text">quaker oats</div>180 <div class="search-tool">181 <svg width="32" height="32" viewBox="0 0 24 24">182 <rect x="5" y="6" width="14" height="12" rx="2" fill="#777"/>183 <circle cx="12" cy="12" r="3" fill="#fff"/>184 </svg>185 </div>186 </div>187 <div class="filters-btn">188 Filters189 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke="#2e8de0" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>190 </div>191 </div>192 </div>193 194 <!-- Prime toggle row -->195 <div class="toggle-row">196 <div class="prime-label">197 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 12 L9 16 L21 6" stroke="#2e8de0" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>198 prime199 </div>200 <div class="switch"></div>201 </div>202 203 <!-- Video card -->204 <div class="video-card">205 <div class="video-inner">206 <div class="img-placeholder">[IMG: Product Video]</div>207 <div class="brand-tag">True Elements</div>208 <div class="video-caption">Are you someone who buys a super healthy blue pack of Oats every month?</div>209 <div class="volume-btn">210 <svg width="28" height="28" viewBox="0 0 24 24">211 <path d="M4 9 H8 L12 6 V18 L8 15 H4 Z" fill="#333"/>212 <path d="M14 9 C16 11,16 13,14 15" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>213 </svg>214 </div>215 </div>216 </div>217 218 <!-- Horizontal product cards -->219 <div class="product-row">220 <div class="card">221 <div class="thumb img-placeholder">[IMG: Rolled Oats Pack - Buy 1 Get 1]</div>222 <div class="title">True Elements Rolled Oats 1.2…</div>223 <div class="rating-row">224 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>225 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>226 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>227 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>228 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>229 <div class="count">1,386</div>230 </div>231 </div>232 <div class="card">233 <div class="thumb img-placeholder">[IMG: True Elements Rolled Oats Jar]</div>234 <div class="title">True Elements Rolled Oats 1.2…</div>235 <div class="rating-row">236 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>237 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>238 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>239 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>240 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>241 <div class="count">9,683</div>242 </div>243 </div>244 <div class="card">245 <div class="thumb img-placeholder">[IMG: True Elements Rolled Oats]</div>246 <div class="title">True Elements Rolled Oats 1.2…</div>247 <div class="rating-row">248 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>249 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>250 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>251 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>252 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>253 <div class="count">1,386</div>254 </div>255 </div>256 </div>257 258 <!-- Shop link and sponsored -->259 <div class="link-row">260 <div>Shop True Elements ></div>261 <div class="sponsored">262 Sponsored263 <svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#999"/><rect x="11" y="10" width="2" height="6" fill="#fff"/><circle cx="12" cy="7.5" r="1.2" fill="#fff"/></svg>264 </div>265 </div>266 267 <!-- Notice -->268 <div class="notice">Check each product page for other buying options.</div>269 270 <!-- Big product card -->271 <div class="big-card">272 <div class="big-thumb img-placeholder">[IMG: Quaker Oats 1kg Pack]</div>273 <div class="details">274 <div class="brand">Sponsored</div>275 <div class="prod-title">Quaker Oats 1kg, Rolled Oats Natural Wholegrain, Nutritious Breakfast Cereals, Dalia Porridge, Easy to…</div>276 <div class="tags">277 <div class="tag">Honey</div>278 <div class="tag">1 kg (Pack of 1)</div>279 </div>280 <div class="rating-line">281 <div class="score">4.4</div>282 <div class="stars-sm">283 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>284 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>285 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>286 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#f5a623"/></svg>287 <svg class="star" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" fill="#ddd"/></svg>288 </div>289 <div class="reviews">(35,672)</div>290 </div>291 <div style="margin-top:10px; color:#777; font-size:28px;">10K+ bought in past month</div>292 <div class="deal">Deal of the Day</div>293 <div class="price-line">₹179 <span class="mrp">M.R.P: ₹199</span><span class="off">(10% off)</span></div>294 <div class="save">Save 5% more with Subscribe & Save</div>295 <div class="prime-line">296 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M3 12 L9 16 L21 6" stroke="#2e8de0" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>297 Get it by Tomorrow298 </div>299 </div>300 </div>301 302 <!-- Bottom navigation bar -->303 <div class="bottom-bar">304 <div class="nav-item active">305 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 11 L12 4 L21 11 V21 H3 Z" fill="#2e8de0"/></svg>306 <div>Home</div>307 </div>308 <div class="nav-item">309 <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="5" fill="#777"/><rect x="6" y="14" width="12" height="7" rx="3" fill="#777"/></svg>310 <div>You</div>311 </div>312 <div class="nav-item">313 <svg class="nav-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="6" height="6" fill="#777"/><rect x="14" y="4" width="6" height="6" fill="#777"/><rect x="4" y="14" width="6" height="6" fill="#777"/><rect x="14" y="14" width="6" height="6" fill="#777"/></svg>314 <div>More</div>315 </div>316 <div class="nav-item">317 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 7 H21 V18 H3 Z" fill="#777"/><path d="M7 7 V5 H17 V7" fill="#777"/></svg>318 <div>Cart</div>319 </div>320 <div class="nav-item">321 <svg class="nav-icon" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="2" fill="#777"/><rect x="4" y="11" width="16" height="2" fill="#777"/><rect x="4" y="16" width="16" height="2" fill="#777"/></svg>322 <div>Menu</div>323 </div>324 </div>325 326 <!-- Gesture bar -->327 <div class="gesture"></div>328</div>329</body>330</html>