GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>BigBasket UI - Vermicelli Listing</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#f5f6f7;11 }12 13 /* Header */14 .app-header {15 width:100%;16 background:#5b7f34; /* BigBasket green approximation */17 color:#fff;18 padding-bottom:24px;19 box-sizing:border-box;20 }21 .status-bar {22 height:60px; padding:0 28px;23 display:flex; align-items:center; justify-content:space-between;24 font-size:32px; letter-spacing:0.5px;25 opacity:0.9;26 }27 .status-icons { display:flex; align-items:center; gap:24px; }28 .logo-row {29 display:flex; align-items:center; justify-content:center;30 font-size:48px; font-weight:700; margin:6px 0 18px;31 }32 .search-bar {33 margin:0 30px 18px;34 background:#fff; border-radius:18px;35 height:96px; display:flex; align-items:center;36 padding:0 24px; box-sizing:border-box;37 }38 .search-input {39 flex:1; color:#333; font-size:40px;40 }41 .icon-btn { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }42 43 /* Quick filters */44 .quick-filters {45 display:flex; align-items:center; gap:18px;46 padding:18px 30px 24px;47 background:#e9ecef26;48 }49 .qf-title {50 width:170px; text-align:center; color:#1e2c14;51 font-weight:700; font-size:28px; line-height:1.1;52 }53 .pill {54 background:#dddddd; border-radius:18px;55 padding:26px 34px; font-size:34px; color:#333; white-space:nowrap;56 }57 .filter-btn {58 margin-left:auto; display:flex; align-items:center; gap:14px;59 background:#fff; border-radius:16px; padding:22px 28px;60 border:1px solid #d6d6d6; color:#333; font-size:36px;61 }62 63 /* Item count */64 .item-count { font-size:40px; color:#4b4b4b; padding:24px 30px 10px; }65 66 /* Product cards */67 .product-card {68 margin:20px 24px;69 background:#fff; border-radius:22px;70 padding:22px; box-sizing:border-box;71 display:flex; gap:26px; align-items:flex-start;72 box-shadow: 0 2px 0 rgba(0,0,0,0.04);73 }74 .prod-img {75 width:300px; height:300px; border-radius:20px;76 background:#E0E0E0; border:1px solid #BDBDBD;77 display:flex; align-items:center; justify-content:center;78 color:#757575; font-size:28px; text-align:center;79 }80 .prod-body { flex:1; }81 .badge-row {82 display:flex; align-items:center; gap:12px; margin-bottom:8px;83 }84 .bb-badge {85 background:#e9eee0; color:#466a1e; border:1px solid #cbd7bd;86 font-size:26px; padding:8px 12px; border-radius:16px; font-weight:700;87 }88 .ship-badge {89 margin-left:auto; display:flex; align-items:center; gap:8px;90 color:#5e5e5e; font-size:28px;91 }92 .prod-title {93 font-size:44px; font-weight:800; color:#111; margin:2px 0 10px;94 }95 .brand { font-size:30px; color:#646464; margin-bottom:6px; }96 .rating-row {97 display:flex; align-items:center; gap:12px; color:#3b6131; font-size:30px; margin-bottom:16px;98 }99 .qty-row {100 display:flex; align-items:center; gap:10px; margin-bottom:16px;101 }102 .select {103 border:1px solid #d5d5d5; border-radius:12px; height:80px;104 padding:0 18px; display:flex; align-items:center; gap:12px;105 font-size:34px; color:#333; background:#fff;106 width:360px;107 }108 .price { font-size:44px; font-weight:800; color:#111; margin:14px 0; }109 .add-btn {110 margin-left:auto;111 background:#e26a68; color:#fff; border:none; font-weight:800;112 font-size:44px; padding:26px 36px; border-radius:18px;113 }114 .offer-chip {115 margin:12px 0 0 24px;116 background:#a8d68f; color:#134513; font-weight:700;117 width:360px; text-align:center; padding:20px 0; border-radius:14px;118 display:flex; align-items:center; justify-content:center; gap:12px;119 font-size:34px;120 }121 122 /* Bottom nav */123 .bottom-nav {124 position:absolute; bottom:0; left:0; width:100%;125 background:#fff; border-top:1px solid #ddd; height:180px;126 display:flex; align-items:center; justify-content:space-around;127 }128 .nav-item { display:flex; flex-direction:column; align-items:center; gap:8px; color:#444; font-size:32px; }129 .nav-icon { width:70px; height:70px; display:flex; align-items:center; justify-content:center; }130 131 /* Helper SVG styling */132 svg { display:block; }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Header -->139 <div class="app-header">140 <div class="status-bar">141 <div>11:13</div>142 <div class="status-icons">143 <!-- Play icon approximation -->144 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M8 5l12 7-12 7V5z"/></svg>145 <!-- WiFi -->146 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5c1-1 3-1 4 0l-2 2-2-2z"/></svg>147 <!-- Battery -->148 <svg width="48" height="36" viewBox="0 0 28 16" fill="#fff"><rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/><rect x="3" y="5" width="18" height="6" fill="#fff"/><rect x="24" y="6" width="3" height="4" fill="#fff"/></svg>149 </div>150 </div>151 <div class="logo-row">bigbasket</div>152 153 <div class="search-bar">154 <!-- hamburger -->155 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff">156 <rect x="2" y="4" width="20" height="2" fill="#fff"/>157 <rect x="2" y="11" width="20" height="2" fill="#fff"/>158 <rect x="2" y="18" width="20" height="2" fill="#fff"/>159 </svg>160 <div class="search-input">vermicelli</div>161 <div class="icon-btn">162 <!-- mic icon -->163 <svg width="44" height="44" viewBox="0 0 24 24" fill="#5b7f34">164 <path d="M12 14c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3S9 4.3 9 6v5c0 1.7 1.3 3 3 3zM5 11v1c0 3.2 2.6 5.8 6 6v3h2v-3c3.4-.2 6-2.8 6-6v-1h-2v1c0 2.7-2.3 5-5 5s-5-2.3-5-5v-1H5z"/>165 </svg>166 </div>167 </div>168 169 <div class="quick-filters">170 <div class="qf-title">QUICK FILTERS</div>171 <div class="pill">Fresho</div>172 <div class="pill">MAGGI</div>173 <div class="pill">Cadbury Dairy Milk Silk</div>174 <div class="filter-btn">175 <!-- sliders icon -->176 <svg width="40" height="40" viewBox="0 0 24 24" fill="#666">177 <path d="M5 5h14v2H5V5zm4 6h10v2H9v-2zM3 17h14v2H3v-2z"/>178 <circle cx="9" cy="6" r="2" fill="#666"/>179 <circle cx="13" cy="12" r="2" fill="#666"/>180 <circle cx="7" cy="18" r="2" fill="#666"/>181 </svg>182 <span>Filter</span>183 </div>184 </div>185 </div>186 187 <div class="item-count">1973 Items</div>188 189 <!-- Product 1 -->190 <div class="product-card">191 <div>192 <div class="prod-img">[IMG: BB ROYAL Vermicelli Pack]</div>193 <div class="offer-chip">194 <span>Buy 1, Get 1</span>195 <!-- small chevron -->196 <svg width="28" height="28" viewBox="0 0 24 24" fill="#134513"><path d="M7 10l5 5 5-5z"/></svg>197 </div>198 </div>199 <div class="prod-body">200 <div class="badge-row">201 <div class="bb-badge">BB RECOMMENDS</div>202 <div class="ship-badge">203 <!-- truck icon -->204 <svg width="42" height="42" viewBox="0 0 24 24" fill="#5e5e5e">205 <path d="M3 6h11v7H3V6zm12 3h3l3 3v4h-2a2 2 0 1 1-4 0H9a2 2 0 1 1-4 0H3v-2h11V9z"/>206 </svg>207 <span>10 hrs</span>208 </div>209 </div>210 <div class="brand">BB ROYAL</div>211 <div class="prod-title">Vermicelli</div>212 <div class="rating-row">213 <!-- star -->214 <svg width="32" height="32" viewBox="0 0 24 24" fill="#6bbf59"><path d="M12 17.3l-6.2 3.3 1.6-6.9-5.1-4.4 7-.6L12 2l2.7 6.7 7 .6-5.1 4.4 1.6 6.9z"/></svg>215 <span>4</span>216 <span style="color:#666;">704 Ratings</span>217 </div>218 <div class="qty-row">219 <div class="select">220 <span>400 g</span>221 <svg width="26" height="26" viewBox="0 0 24 24" fill="#777"><path d="M7 10l5 5 5-5z"/></svg>222 </div>223 </div>224 <div class="price">₹50</div>225 <button class="add-btn">Add</button>226 </div>227 </div>228 229 <!-- Product 2 -->230 <div class="product-card">231 <div class="prod-img">[IMG: Bambino Roasted Vermicelli Pack]</div>232 <div class="prod-body">233 <div class="badge-row">234 <div style="height:1px;"></div>235 <div class="ship-badge">236 <svg width="42" height="42" viewBox="0 0 24 24" fill="#5e5e5e">237 <path d="M3 6h11v7H3V6zm12 3h3l3 3v4h-2a2 2 0 1 1-4 0H9a2 2 0 1 1-4 0H3v-2h11V9z"/>238 </svg>239 <span>10 hrs</span>240 </div>241 </div>242 <div class="brand">BAMBINO</div>243 <div class="prod-title">Vermicelli - Roasted</div>244 <div class="rating-row">245 <svg width="32" height="32" viewBox="0 0 24 24" fill="#6bbf59"><path d="M12 17.3l-6.2 3.3 1.6-6.9-5.1-4.4 7-.6L12 2l2.7 6.7 7 .6-5.1 4.4 1.6 6.9z"/></svg>246 <span>4.1</span>247 <span style="color:#666;">9382 Ratings</span>248 </div>249 <div class="qty-row">250 <div class="select" style="width:480px;">251 <span>850 g - Pouch</span>252 <svg width="26" height="26" viewBox="0 0 24 24" fill="#777"><path d="M7 10l5 5 5-5z"/></svg>253 </div>254 </div>255 <div class="price">₹115</div>256 <button class="add-btn">Add</button>257 </div>258 </div>259 260 <!-- Product 3 -->261 <div class="product-card">262 <div class="prod-img">[IMG: BB ROYAL Roasted Vermicelli Pack]</div>263 <div class="prod-body">264 <div class="badge-row">265 <div class="bb-badge">BB RECOMMENDS</div>266 <div class="ship-badge">267 <svg width="42" height="42" viewBox="0 0 24 24" fill="#5e5e5e">268 <path d="M3 6h11v7H3V6zm12 3h3l3 3v4h-2a2 2 0 1 1-4 0H9a2 2 0 1 1-4 0H3v-2h11V9z"/>269 </svg>270 <span>10 hrs</span>271 </div>272 </div>273 <div class="brand">BB ROYAL</div>274 <div class="prod-title">Roasted Vermicelli</div>275 <div class="rating-row">276 <svg width="32" height="32" viewBox="0 0 24 24" fill="#6bbf59"><path d="M12 17.3l-6.2 3.3 1.6-6.9-5.1-4.4 7-.6L12 2l2.7 6.7 7 .6-5.1 4.4 1.6 6.9z"/></svg>277 <span>4</span>278 <span style="color:#666;">910 Ratings</span>279 </div>280 <div class="qty-row">281 <div class="select">282 <span>400 g</span>283 <svg width="26" height="26" viewBox="0 0 24 24" fill="#777"><path d="M7 10l5 5 5-5z"/></svg>284 </div>285 </div>286 <div class="price">₹65</div>287 <button class="add-btn">Add</button>288 </div>289 </div>290 291 <!-- Bottom Navigation -->292 <div class="bottom-nav">293 <div class="nav-item">294 <div class="nav-icon">295 <!-- home -->296 <svg width="64" height="64" viewBox="0 0 24 24" fill="#5b7f34"><path d="M12 3l9 8h-2v9h-5v-6H10v6H5v-9H3l9-8z"/></svg>297 </div>298 <div>Home</div>299 </div>300 <div class="nav-item">301 <div class="nav-icon">302 <!-- grid -->303 <svg width="64" height="64" viewBox="0 0 24 24" fill="#5b7f34">304 <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/>305 </svg>306 </div>307 <div>Categories</div>308 </div>309 <div class="nav-item">310 <div class="nav-icon">311 <!-- search -->312 <svg width="64" height="64" viewBox="0 0 24 24" fill="#5b7f34">313 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>314 </svg>315 </div>316 <div>Search</div>317 </div>318 <div class="nav-item">319 <div class="nav-icon">320 <!-- list -->321 <svg width="64" height="64" viewBox="0 0 24 24" fill="#5b7f34">322 <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/>323 </svg>324 </div>325 <div>My List</div>326 </div>327 <div class="nav-item">328 <div class="nav-icon">329 <!-- basket/cart -->330 <svg width="64" height="64" viewBox="0 0 24 24" fill="#5b7f34">331 <path d="M7 6h10l3 4H4l3-4zm-3 5h16l-2 9H6l-2-9zm5 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>332 </svg>333 </div>334 <div>Basket</div>335 </div>336 </div>337 338</div>339</body>340</html>