GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>BigBasket UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #f5f5f5;13 }14 15 /* Header / Status */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 100px;22 background: #5f8b3a;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 40px;27 box-sizing: border-box;28 font-weight: 600;29 }30 .status-bar .right-icons {31 margin-left: auto;32 display: flex;33 gap: 20px;34 align-items: center;35 }36 .dot {37 width: 10px; height: 10px; background: #fff; border-radius: 50%;38 }39 40 .app-bar {41 position: absolute;42 top: 100px;43 left: 0;44 width: 1080px;45 height: 140px;46 background: #6a8e3a;47 color: #fff;48 display: flex;49 align-items: center;50 box-sizing: border-box;51 padding: 0 30px;52 }53 .icon-btn {54 width: 90px; height: 90px;55 display: flex; align-items: center; justify-content: center;56 border-radius: 16px; color: #fff;57 }58 .title {59 flex: 1; text-align: center; font-size: 48px; font-weight: 700;60 }61 62 /* Search Bar */63 .search-wrap {64 position: absolute;65 top: 240px;66 left: 0;67 width: 1080px;68 padding: 20px 30px 10px 30px;69 box-sizing: border-box;70 background: #6a8e3a;71 }72 .search-bar {73 width: 1020px;74 height: 110px;75 background: #fff;76 border-radius: 18px;77 display: flex;78 align-items: center;79 padding: 0 26px;80 box-sizing: border-box;81 gap: 24px;82 color: #333;83 }84 .search-input {85 flex: 1;86 font-size: 40px;87 color: #333;88 }89 .chip-row {90 display: flex;91 gap: 26px;92 margin-top: 22px;93 align-items: center;94 }95 .chip {96 padding: 26px 38px;97 background: #efefef;98 border-radius: 22px;99 font-size: 34px;100 color: #333;101 box-shadow: inset 0 0 0 1px #e0e0e0;102 }103 .filter-btn {104 margin-left: auto;105 padding: 22px 34px;106 background: #fff;107 border-radius: 18px;108 display: flex; align-items: center; gap: 18px;109 font-size: 36px; color: #333;110 box-shadow: 0 0 0 1px #ddd;111 }112 113 /* Content area */114 .content {115 position: absolute;116 top: 430px;117 left: 0;118 width: 1080px;119 background: #fff;120 border-top-left-radius: 26px;121 border-top-right-radius: 26px;122 min-height: 1400px;123 box-sizing: border-box;124 padding: 30px;125 }126 .items-count {127 font-size: 40px; color: #444; margin-bottom: 20px;128 }129 .info-line {130 font-size: 38px; color: #666; line-height: 1.35;131 margin-bottom: 30px;132 }133 .info-line .highlight { color: #e35d5d; font-weight: 700; }134 135 /* Product cards */136 .card {137 display: flex;138 gap: 28px;139 padding: 24px;140 border: 1px solid #e5e5e5;141 border-radius: 24px;142 margin-bottom: 30px;143 align-items: flex-start;144 }145 .prod-img {146 width: 260px; height: 310px;147 background: #E0E0E0; border: 1px solid #BDBDBD;148 border-radius: 18px;149 display: flex; align-items: center; justify-content: center;150 color: #757575; font-size: 28px; text-align: center;151 position: relative;152 }153 .veg-indicator {154 position: absolute; left: 12px; bottom: 12px;155 width: 36px; height: 36px; border: 2px solid #3b7041; border-radius: 6px;156 display: flex; align-items: center; justify-content: center;157 }158 .veg-indicator span {159 width: 18px; height: 18px; background: #2ecc71; border-radius: 50%;160 display: inline-block;161 }162 163 .details {164 flex: 1;165 }166 .brand {167 color: #7f7f7f; font-size: 30px; font-weight: 700; margin-bottom: 6px;168 }169 .title-line {170 display: flex; align-items: center; justify-content: space-between;171 }172 .prod-title { font-size: 46px; color: #111; font-weight: 800; }173 .delivery {174 font-size: 28px; color: #888; display: flex; align-items: center; gap: 10px;175 }176 177 .rating-row {178 margin-top: 10px; display: flex; align-items: center; gap: 18px;179 }180 .rating-pill {181 display: inline-flex; align-items: center; gap: 8px;182 padding: 10px 16px; border-radius: 16px; background: #eef6e7; color: #3c6e2a; font-weight: 700; font-size: 30px;183 }184 .ratings-count { color: #777; font-size: 30px; }185 .weight {186 margin-top: 14px; font-size: 34px; color: #555;187 padding: 16px 18px; border: 1px dashed #d7d7d7; border-radius: 14px; display: inline-block;188 }189 .price-add {190 margin-top: 18px; display: flex; align-items: center; justify-content: space-between;191 }192 .price { font-size: 46px; font-weight: 800; color: #111; }193 .add-btn {194 background: #de6b6b; color: #fff; border: none; border-radius: 20px;195 padding: 26px 56px; font-size: 40px; font-weight: 800;196 }197 198 /* Bottom navigation */199 .bottom-nav {200 position: absolute;201 bottom: 0;202 left: 0;203 width: 1080px;204 height: 180px;205 background: #fff;206 border-top: 1px solid #e0e0e0;207 display: flex; align-items: center; justify-content: space-around;208 }209 .nav-item {210 display: flex; flex-direction: column; align-items: center; gap: 10px; color: #777; font-size: 34px;211 }212 .nav-icon {213 width: 90px; height: 90px; border-radius: 18px; border: 1px solid #d8d8d8; display: flex; align-items: center; justify-content: center;214 }215 216 /* Simple inline SVG styles */217 svg { display: block; }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status bar -->224 <div class="status-bar">225 <div>4:42</div>226 <div class="right-icons">227 <div class="dot"></div>228 <div class="dot"></div>229 <div class="dot"></div>230 </div>231 </div>232 233 <!-- App bar -->234 <div class="app-bar">235 <div class="icon-btn" title="Back">236 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">237 <path d="M15.5 4.5L7 12l8.5 7.5-1.8 2L3.5 12l10.2-9.5 1.8 2z"/>238 </svg>239 </div>240 <div class="icon-btn" title="Menu">241 <svg width="52" height="52" viewBox="0 0 24 24" fill="#fff">242 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>243 </svg>244 </div>245 <div class="title">bigbasket</div>246 <div style="width:90px"></div>247 </div>248 249 <!-- Search section -->250 <div class="search-wrap">251 <div class="search-bar">252 <svg width="48" height="48" viewBox="0 0 24 24" fill="#666">253 <path d="M10 3a7 7 0 015.5 11.5l4 4-1.5 1.5-4-4A7 7 0 1110 3zm0 2a5 5 0 100 10 5 5 0 000-10z"/>254 </svg>255 <div class="search-input">lean meat</div>256 <svg width="44" height="44" viewBox="0 0 24 24" fill="#666">257 <path d="M12 14a3 3 0 003-3V5a3 3 0 10-6 0v6a3 3 0 003 3zm-4 1h8v2H8v-2zm2 3h4v2h-4v-2z"/>258 </svg>259 </div>260 261 <div class="chip-row">262 <div class="chip">Fresho</div>263 <div class="chip">Meatzza</div>264 <div class="chip">Godrej Yummiez</div>265 <div class="chip">Pedigree</div>266 <div class="filter-btn">267 <svg width="40" height="40" viewBox="0 0 24 24" fill="#666">268 <path d="M4 7h10v2H4V7zm0 10h8v2H4v-2zm0-5h14v2H4v-2z"/>269 </svg>270 <span>Filter</span>271 </div>272 </div>273 </div>274 275 <!-- Content -->276 <div class="content">277 <div class="items-count">978 Items</div>278 <div class="info-line">No results found for <span class="highlight">lean meat</span>, instead showing other relevant results</div>279 280 <!-- Card 1 -->281 <div class="card">282 <div class="prod-img">[IMG: MDH Meat Masala Pack]283 <div class="veg-indicator"><span></span></div>284 </div>285 <div class="details">286 <div class="brand">MDH</div>287 <div class="title-line">288 <div class="prod-title">Masala - Meat</div>289 <div class="delivery">290 <svg width="34" height="34" viewBox="0 0 24 24" fill="#888">291 <path d="M3 6h11v7h5l2 4H3v-2h12v-2H3V6zm3 11a2 2 0 104 0 2 2 0 00-4 0zm9 0a2 2 0 104 0 2 2 0 00-4 0z"/>292 </svg>293 1 day294 </div>295 </div>296 <div class="rating-row">297 <div class="rating-pill">298 <svg width="26" height="26" viewBox="0 0 24 24" fill="#3c6e2a">299 <path d="M12 17.3l-6.2 3.2 1.2-6.8L2 8.9l6.9-1 3.1-6.1 3.1 6.1 6.9 1-5 4.8 1.2 6.8z"/>300 </svg>301 4.2302 </div>303 <div class="ratings-count">1317 Ratings</div>304 </div>305 <div class="weight">100 g - Carton</div>306 <div class="price-add">307 <div class="price">₹92</div>308 <button class="add-btn">Add</button>309 </div>310 </div>311 </div>312 313 <!-- Card 2 -->314 <div class="card">315 <div class="prod-img">[IMG: Atlantic Salmon Skinless Fillet]</div>316 <div class="details">317 <div class="brand">BIG SAM'S</div>318 <div class="title-line">319 <div class="prod-title">Atlantic Salmon - Skinless Fillet</div>320 <div class="delivery">321 <svg width="34" height="34" viewBox="0 0 24 24" fill="#888">322 <path d="M3 6h11v7h5l2 4H3v-2h12v-2H3V6zm3 11a2 2 0 104 0 2 2 0 00-4 0zm9 0a2 2 0 104 0 2 2 0 00-4 0z"/>323 </svg>324 1 day325 </div>326 </div>327 <div class="rating-row">328 <div class="rating-pill">329 <svg width="26" height="26" viewBox="0 0 24 24" fill="#3c6e2a">330 <path d="M12 17.3l-6.2 3.2 1.2-6.8L2 8.9l6.9-1 3.1-6.1 3.1 6.1 6.9 1-5 4.8 1.2 6.8z"/>331 </svg>332 4.1333 </div>334 <div class="ratings-count">53 Ratings</div>335 </div>336 <div class="weight">300 g - Pouch</div>337 <div class="price-add">338 <div class="price">₹1750</div>339 <button class="add-btn">Add</button>340 </div>341 </div>342 </div>343 344 <!-- Card 3 -->345 <div class="card">346 <div class="prod-img">[IMG: Everest Meat Masala Pack]347 <div class="veg-indicator"><span></span></div>348 </div>349 <div class="details">350 <div class="brand">EVEREST</div>351 <div class="title-line">352 <div class="prod-title">Meat Masala</div>353 <div class="delivery">354 <svg width="34" height="34" viewBox="0 0 24 24" fill="#888">355 <path d="M3 6h11v7h5l2 4H3v-2h12v-2H3V6zm3 11a2 2 0 104 0 2 2 0 00-4 0zm9 0a2 2 0 104 0 2 2 0 00-4 0z"/>356 </svg>357 1 day358 </div>359 </div>360 <div class="rating-row">361 <div class="rating-pill">362 <svg width="26" height="26" viewBox="0 0 24 24" fill="#3c6e2a">363 <path d="M12 17.3l-6.2 3.2 1.2-6.8L2 8.9l6.9-1 3.1-6.1 3.1 6.1 6.9 1-5 4.8 1.2 6.8z"/>364 </svg>365 4.2366 </div>367 <div class="ratings-count">1665 Ratings</div>368 </div>369 <div class="weight">100 g - Carton</div>370 <div class="price-add">371 <div class="price">₹90</div>372 <button class="add-btn">Add</button>373 </div>374 </div>375 </div>376 377 </div>378 379 <!-- Bottom nav -->380 <div class="bottom-nav">381 <div class="nav-item">382 <div class="nav-icon">383 <svg width="40" height="40" viewBox="0 0 24 24" fill="#7d7d7d">384 <path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/>385 </svg>386 </div>387 <div>Home</div>388 </div>389 <div class="nav-item">390 <div class="nav-icon">391 <svg width="40" height="40" viewBox="0 0 24 24" fill="#7d7d7d">392 <path d="M3 4h8v8H3V4zm10 0h8v8h-8V4zM3 14h8v6H3v-6zm10 0h8v6h-8v-6z"/>393 </svg>394 </div>395 <div>Categories</div>396 </div>397 <div class="nav-item">398 <div class="nav-icon">399 <svg width="40" height="40" viewBox="0 0 24 24" fill="#7d7d7d">400 <path d="M7 22v-7H3l9-11 9 11h-4v7H7z"/>401 </svg>402 </div>403 <div>Stores</div>404 </div>405 <div class="nav-item">406 <div class="nav-icon">407 <svg width="40" height="40" viewBox="0 0 24 24" fill="#7d7d7d">408 <path d="M12 6a6 6 0 016 6h-2a4 4 0 10-4 4v2a6 6 0 110-12z"/>409 </svg>410 </div>411 <div>Order Again</div>412 </div>413 <div class="nav-item">414 <div class="nav-icon">415 <svg width="40" height="40" viewBox="0 0 24 24" fill="#7d7d7d">416 <path d="M7 6h14l-2 12H7L5 4H2V2h4l1 4zm2 4h2v6H9v-6zm4 0h2v6h-2v-6z"/>417 </svg>418 </div>419 <div>Basket</div>420 </div>421 </div>422 423</div>424</body>425</html>