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>Basmati Rice Results</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 .status-bar {14 height: 84px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; color: #333; font-weight: 600;15 font-size: 34px;16 }17 .status-left { display: flex; align-items: center; gap: 16px; }18 .chip-mini {19 font-size: 24px; color: #666; border: 1px solid #D0D0D0; border-radius: 8px; padding: 2px 8px;20 }21 .dot { width: 10px; height: 10px; background: #888; border-radius: 50%; display: inline-block; margin-left: 6px; margin-right: 6px; }22 .status-right { display: flex; align-items: center; gap: 14px; }23 .icon-16 svg { width: 36px; height: 36px; }24 /* Search bar area */25 .search-area { padding: 10px 26px 20px 26px; }26 .appbar { display: flex; align-items: center; gap: 20px; }27 .icon-btn { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; }28 .icon-btn svg { width: 44px; height: 44px; }29 .search-box {30 flex: 1; position: relative; height: 88px; border-radius: 20px; background: #F2F2F2; display: flex; align-items: center; padding: 0 140px 0 28px;31 font-size: 34px; color: #222;32 }33 .search-placeholder { color: #777; }34 .search-icons {35 position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; gap: 16px; padding-right: 12px;36 }37 .search-icons .icon-wrap {38 width: 72px; height: 72px; border-radius: 12px; background: #EAEAEA; display: flex; align-items: center; justify-content: center;39 border: 1px solid #DADADA;40 }41 .cart-btn { margin-left: auto; }42 .filters { padding: 6px 26px 8px 26px; display: flex; gap: 18px; flex-wrap: nowrap; white-space: nowrap; }43 .pill {44 border: 1px solid #E0E0E0; border-radius: 28px; padding: 18px 26px; font-size: 32px; color: #333; background: #fff; display: inline-flex; align-items: center; gap: 12px;45 }46 .pill .chev { width: 22px; height: 22px; border: 2px solid #555; border-left: 0; border-top: 0; transform: rotate(45deg); display: inline-block; margin-left: 6px; }47 .category-chips { padding: 12px 26px 0 26px; display: flex; gap: 16px; }48 .cat-pill {49 border: 1px solid #E0E0E0; border-radius: 28px; padding: 16px 22px; font-size: 28px; color: #333; background: #fff; display: inline-flex; align-items: center; gap: 12px;50 }51 .cat-icon {52 width: 44px; height: 44px; border-radius: 22px; background: #F3F7FF; border: 1px solid #DDE6FF; display: inline-flex; align-items: center; justify-content: center; color: #5E7CE2; font-weight: 700; font-size: 22px;53 }54 /* Product grid */55 .content { padding: 24px; }56 .grid { display: flex; flex-wrap: wrap; gap: 28px; }57 .card {58 width: calc((1080px - 48px - 28px) / 2);59 background: #fff; border-radius: 16px;60 }61 .img-wrap {62 position: relative; height: 420px; border-radius: 16px; overflow: hidden; background: #E0E0E0; border: 1px solid #BDBDBD;63 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center; padding: 10px;64 }65 .badge {66 position: absolute; left: 14px; top: 14px; background: #2F2F2F; color: #fff; font-size: 28px; font-weight: 700; padding: 8px 16px; border-radius: 10px;67 }68 .badge.teal { background: #2AB7A9; }69 .heart {70 position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); border-radius: 22px; border: 1px solid #E6E6E6;71 }72 .variant-pill {73 position: absolute; right: 16px; bottom: 16px; background: #fff; color: #2B6FE6; font-weight: 700; border-radius: 18px; padding: 8px 16px; font-size: 28px; border: 1px solid #E3E8FF; box-shadow: 0 2px 6px rgba(0,0,0,0.12);74 }75 .title { margin-top: 14px; font-size: 34px; line-height: 44px; color: #222; padding-right: 10px; }76 .rating-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }77 .stars { display: inline-flex; gap: 4px; }78 .stars svg { width: 30px; height: 30px; }79 .plus-badge {80 display: inline-flex; align-items: center; gap: 6px; background: #EEF4FF; color: #2B6FE6; border: 1px solid #DDE6FF; border-radius: 14px; padding: 4px 10px; font-size: 26px; font-weight: 700; margin-left: 8px;81 }82 .price-row { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; font-size: 34px; }83 .discount { color: #16883A; font-weight: 700; }84 .old-price { color: #9E9E9E; text-decoration: line-through; }85 .new-price { color: #111; font-weight: 700; }86 .note { margin-top: 8px; font-size: 30px; }87 .note.purple { color: #673ab7; }88 .note.green { color: #16883A; }89 .note.magenta { color: #d81b60; }90 /* Floating action and bottom bar */91 .fab {92 position: absolute; right: 34px; bottom: 240px; width: 116px; height: 116px; border-radius: 58px; background: #2B6FE6; box-shadow: 0 8px 24px rgba(0,0,0,0.18);93 display: flex; align-items: center; justify-content: center;94 }95 .fab-inner {96 width: 84px; height: 84px; border-radius: 42px; background: #FFD54F; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #2B6FE6; font-size: 38px;97 }98 .bottom-bar {99 position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000; display: flex; align-items: center; justify-content: center;100 }101 .home-indicator {102 width: 300px; height: 12px; background: #fff; border-radius: 6px;103 }104</style>105</head>106<body>107<div id="render-target">108 <!-- Status bar -->109 <div class="status-bar">110 <div class="status-left">111 <div>4:01</div>112 <div class="chip-mini">LR</div>113 <span class="icon-16">114 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#777"/></svg>115 </span>116 <div class="chip-mini">LR</div>117 <div class="dot"></div>118 <span class="icon-16">119 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#777"/></svg>120 </span>121 </div>122 <div class="status-right">123 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M3 12h6l3-6 3 6h6" stroke="#555" stroke-width="2" fill="none"/></svg>124 <svg viewBox="0 0 24 24" width="36" height="36"><rect x="4" y="6" width="14" height="12" rx="2" fill="#555"/><rect x="19" y="8" width="2" height="8" fill="#555"/></svg>125 </div>126 </div>127 128 <!-- Search area -->129 <div class="search-area">130 <div class="appbar">131 <div class="icon-btn">132 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>133 </div>134 <div class="search-box">135 <span class="search-placeholder">basmati rice</span>136 <div class="search-icons">137 <div class="icon-wrap">138 <svg viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="9" rx="3" fill="#666"/><path d="M12 12v4" stroke="#666" stroke-width="2"/><rect x="10" y="16" width="4" height="3" rx="1" fill="#666"/></svg>139 </div>140 <div class="icon-wrap">141 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#666"/><circle cx="12" cy="12" r="4" fill="#fff" stroke="#666" stroke-width="2"/></svg>142 </div>143 </div>144 </div>145 <div class="icon-btn cart-btn">146 <svg viewBox="0 0 24 24"><path d="M3 5h2l2 12h10l2-9H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="20" r="1.8" fill="#333"/><circle cx="17" cy="20" r="1.8" fill="#333"/></svg>147 </div>148 </div>149 </div>150 151 <!-- Filter chips -->152 <div class="filters">153 <div class="pill">Sort By <span class="chev"></span></div>154 <div class="pill"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M3 5h18M6 11h12M9 17h6" stroke="#555" stroke-width="2" fill="none"/></svg> Filter</div>155 <div class="pill">Brand <span class="chev"></span></div>156 <div class="pill">Discount <span class="chev"></span></div>157 <div class="pill">Customer Rating <span class="chev"></span></div>158 </div>159 160 <!-- Category chips -->161 <div class="category-chips">162 <div class="cat-pill"><div class="cat-icon">%</div> Top Sale Deals</div>163 <div class="cat-pill"><div class="cat-icon">NEW</div> New Arrivals</div>164 <div class="cat-pill"><div class="cat-icon">★</div> Top Rated</div>165 <div class="cat-pill"><div class="cat-icon">P</div> Premium Brands</div>166 </div>167 168 <!-- Product grid -->169 <div class="content">170 <div class="grid">171 <!-- Card 1 -->172 <div class="card">173 <div class="img-wrap">174 <div class="badge">FLIPKART'S CHOICE</div>175 <div class="heart">176 <svg viewBox="0 0 24 24"><path d="M12 21s-7-5.1-9-8.6C1.1 9.8 2.5 6.9 5.6 6.6c1.7-.2 3.2.7 4.4 2 1.2-1.3 2.7-2.2 4.4-2 3.1.3 4.5 3.2 2.6 5.8C19 15.9 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.8"/></svg>177 </div>178 [IMG: Daawat Sehat Mini Mogra Basmati Rice Bag]179 <div class="variant-pill">2 Variants</div>180 </div>181 <div class="title">Daawat Sehat Mini Mogra Basmati Rice (Broken Grain), 5 kg</div>182 <div class="rating-row">183 <div class="stars">184 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>185 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>186 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>187 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>188 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#A5D6A7"/></svg>189 </div>190 <div class="plus-badge">Plus F-Assured</div>191 </div>192 <div class="price-row">193 <div class="discount">36% off</div>194 <div class="old-price">325</div>195 <div class="new-price">₹205</div>196 </div>197 <div class="note purple">Big Saving Deal</div>198 </div>199 200 <!-- Card 2 -->201 <div class="card">202 <div class="img-wrap">203 <div class="badge teal">BESTSELLER</div>204 <div class="heart">205 <svg viewBox="0 0 24 24"><path d="M12 21s-7-5.1-9-8.6C1.1 9.8 2.5 6.9 5.6 6.6c1.7-.2 3.2.7 4.4 2 1.2-1.3 2.7-2.2 4.4-2 3.1.3 4.5 3.2 2.6 5.8C19 15.9 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.8"/></svg>206 </div>207 [IMG: Daawat Rozana Super Basmati Rice Bag]208 <div class="variant-pill">2 Variants</div>209 </div>210 <div class="title">Daawat Rozana Super Basmati Rice (Medium Grain), 5 kg</div>211 <div class="rating-row">212 <div class="stars">213 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>214 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>215 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>216 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>217 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#A5D6A7"/></svg>218 </div>219 <div class="plus-badge">Plus F-Assured</div>220 </div>221 <div class="price-row">222 <div class="discount">13% off</div>223 <div class="old-price">486</div>224 <div class="new-price">₹422</div>225 </div>226 <div class="note green">Buy 3 items, save extra 5%</div>227 </div>228 229 <!-- Card 3 -->230 <div class="card">231 <div class="img-wrap">232 <div class="heart">233 <svg viewBox="0 0 24 24"><path d="M12 21s-7-5.1-9-8.6C1.1 9.8 2.5 6.9 5.6 6.6c1.7-.2 3.2.7 4.4 2 1.2-1.3 2.7-2.2 4.4-2 3.1.3 4.5 3.2 2.6 5.8C19 15.9 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.8"/></svg>234 </div>235 [IMG: Devaaya Biryani Basmati Rice Bag]236 </div>237 <div class="title">Devaaya Biryani Basmati Rice (Full Grain, Raw), 1 kg</div>238 <div class="rating-row">239 <div class="stars">240 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>241 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>242 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>243 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>244 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#A5D6A7"/></svg>245 </div>246 <div class="plus-badge">Plus F-Assured</div>247 </div>248 <div class="price-row">249 <div class="new-price">₹215</div>250 </div>251 <div class="note magenta">Only few left</div>252 </div>253 254 <!-- Card 4 -->255 <div class="card">256 <div class="img-wrap">257 <div class="heart">258 <svg viewBox="0 0 24 24"><path d="M12 21s-7-5.1-9-8.6C1.1 9.8 2.5 6.9 5.6 6.6c1.7-.2 3.2.7 4.4 2 1.2-1.3 2.7-2.2 4.4-2 3.1.3 4.5 3.2 2.6 5.8C19 15.9 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.8"/></svg>259 </div>260 [IMG: Daawat Super Basmati Rice Bag]261 <div class="variant-pill">2 Variants</div>262 </div>263 <div class="title">Daawat Super Basmati Rice (Long Grain), 1 kg</div>264 <div class="rating-row">265 <div class="stars">266 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>267 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>268 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>269 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#2e7d32"/></svg>270 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.3L18 21l-6-3.8L6 21l1.5-7.7L2 9h7z" fill="#A5D6A7"/></svg>271 </div>272 <div class="plus-badge">Plus F-Assured</div>273 </div>274 <div class="price-row">275 <div class="discount">25% off</div>276 <div class="old-price">220</div>277 <div class="new-price">₹164</div>278 </div>279 <div class="note magenta">Only few left</div>280 </div>281 </div>282 </div>283 284 <!-- Floating action button -->285 <div class="fab">286 <div class="fab-inner">f</div>287 </div>288 289 <!-- Bottom system bar -->290 <div class="bottom-bar">291 <div class="home-indicator"></div>292 </div>293</div>294</body>295</html>