GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Flipkart Product Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 16 /* Top status bar */17 .status-bar {18 height: 90px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #111;24 font-weight: 600;25 font-size: 34px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 22px;31 color: #666;32 font-weight: 500;33 font-size: 26px;34 }35 .icon {36 width: 44px; height: 44px;37 }38 .icon svg { width: 100%; height: 100%; }39 40 /* Search header */41 .search-header {42 padding: 12px 24px 8px 16px;43 display: flex;44 align-items: center;45 gap: 14px;46 }47 .back-btn {48 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;49 }50 .search-box {51 flex: 1;52 background: #f1f3f6;53 border: 1px solid #e0e0e0;54 height: 88px;55 border-radius: 16px;56 display: flex; align-items: center;57 padding: 0 24px;58 gap: 18px;59 }60 .search-placeholder {61 flex: 1;62 color: #6a6f73;63 font-size: 34px;64 }65 .mic { width: 42px; height: 42px; }66 .cart-wrap {67 width: 80px; height: 80px; position: relative; display: flex; align-items: center; justify-content: center;68 }69 .badge {70 position: absolute;71 top: 6px; right: 8px;72 background: #e53935;73 color: #fff; font-size: 24px; font-weight: 700;74 padding: 2px 10px;75 border-radius: 20px;76 }77 78 /* Scrollable content (reserve space for footer) */79 .content {80 position: absolute;81 top: 180px;82 left: 0; right: 0;83 bottom: 180px; /* leave room for bottom actions */84 overflow: hidden;85 }86 .pad { padding: 12px 24px; }87 88 .section-title {89 font-size: 44px;90 font-weight: 700;91 margin: 18px 0 16px;92 }93 94 /* Horizontal product cards */95 .card-row {96 display: flex;97 gap: 24px;98 overflow: hidden;99 padding-bottom: 8px;100 }101 .product-card {102 width: 332px;103 border: 1px solid #e3e3e3;104 border-radius: 16px;105 background: #fff;106 position: relative;107 overflow: hidden;108 }109 .product-img {110 height: 320px;111 background: #E0E0E0;112 border-bottom: 1px solid #BDBDBD;113 display: flex; align-items: center; justify-content: center;114 color: #757575; font-size: 28px; text-align: center;115 }116 .pill {117 position: absolute;118 top: 12px; left: 12px;119 background: #e91e63;120 color: #fff;121 font-size: 26px; font-weight: 800;122 border-radius: 12px;123 padding: 6px 14px;124 }125 .pill-blue {126 background: #2e7d32; /* for TRENDING - greenish/blue tag */127 }128 .sponsored {129 color: #8a8a8a;130 font-size: 26px;131 padding: 8px 14px 0;132 }133 .card-body {134 padding: 12px 16px 18px;135 }136 .brand {137 font-weight: 700;138 font-size: 30px;139 margin-bottom: 2px;140 }141 .title {142 color: #4b4b4b;143 font-size: 28px;144 height: 66px;145 overflow: hidden;146 }147 .price-row {148 display: flex; align-items: baseline; gap: 10px; margin: 8px 0;149 }150 .old { color: #9e9e9e; text-decoration: line-through; font-size: 28px; }151 .new { color: #111; font-size: 34px; font-weight: 700; }152 .off { color: #2e7d32; font-size: 28px; font-weight: 700; }153 .stars {154 color: #2e7d32; font-size: 26px; display: flex; align-items: center; gap: 8px;155 }156 .stars .count { color: #555; }157 158 /* About the brand */159 .about {160 margin-top: 18px;161 border-top: 1px solid #eee;162 padding-top: 18px;163 }164 .heading-row {165 display: flex; align-items: center; gap: 18px;166 font-size: 38px; font-weight: 700; margin: 8px 0 8px;167 }168 .shop-ico {169 width: 70px; height: 70px; border: 2px solid #cfcfcf; border-radius: 12px; display: flex; align-items: center; justify-content: center;170 }171 .shop-ico::after {172 content: "🏬";173 font-size: 40px;174 }175 .brand-name { font-size: 44px; font-weight: 800; }176 177 .feature {178 display: flex; align-items: flex-start; gap: 18px;179 margin: 16px 0;180 }181 .f-ico {182 width: 40px; height: 40px; border: 2px solid #cfcfcf; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #666;183 margin-top: 4px;184 }185 .feature h4 {186 font-size: 34px; margin: 0 0 4px 0;187 }188 .feature p {189 margin: 0;190 color: #636c73;191 font-size: 28px;192 }193 194 /* Ratings & Reviews */195 .ratings {196 margin-top: 18px;197 border-top: 1px solid #eee;198 padding-top: 18px;199 }200 .rr-head {201 display: flex; align-items: center; justify-content: space-between;202 }203 .rr-title { font-size: 44px; font-weight: 800; }204 .rate-btn {205 border: 1px solid #cfd8dc;206 padding: 18px 26px;207 border-radius: 12px;208 font-size: 32px;209 color: #1976d2;210 background: #f8fbff;211 font-weight: 700;212 }213 214 .rating-summary {215 display: flex; gap: 34px; align-items: center; padding: 16px 0 8px;216 }217 .left-score {218 width: 280px;219 }220 .left-score .score-title {221 color: #7e8a92; font-size: 30px; margin-top: 8px;222 }223 .big-stars { color: #2e7d32; font-size: 34px; letter-spacing: 2px; }224 .bars { flex: 1; }225 .bar-row {226 display: flex; align-items: center; gap: 16px; margin: 12px 0;227 font-size: 28px;228 }229 .line {230 height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; flex: 1; position: relative;231 }232 .line > span {233 position: absolute; left: 0; top: 0; bottom: 0; background: #2e7d32;234 }235 .count-small { color: #9aa0a6; font-size: 26px; }236 237 /* Bottom actions */238 .bottom-actions {239 position: absolute;240 bottom: 0; left: 0; right: 0;241 height: 170px;242 display: flex;243 border-top: 1px solid #e0e0e0;244 }245 .cart-btn {246 flex: 1;247 background: #ffffff;248 display: flex; align-items: center; justify-content: center;249 font-size: 44px; font-weight: 800; color: #111;250 }251 .buy-btn {252 flex: 1.2;253 background: #ffc107;254 display: flex; align-items: center; justify-content: center;255 font-size: 48px; font-weight: 900; color: #111;256 }257 258 /* Floating action */259 .float-btn {260 position: absolute;261 right: 34px;262 bottom: 220px;263 width: 130px; height: 130px;264 background: #2a58ff;265 border-radius: 50%;266 display: flex; align-items: center; justify-content: center;267 box-shadow: 0 8px 20px rgba(0,0,0,0.25);268 border: 6px solid #fff;269 }270 .float-inner {271 width: 88px; height: 88px; background: #ffd400; border-radius: 50%;272 display: flex; align-items: center; justify-content: center;273 font-weight: 900; color: #2a58ff; font-size: 54px;274 }275</style>276</head>277<body>278<div id="render-target">279 280 <!-- Status bar -->281 <div class="status-bar">282 <div>9:25</div>283 <div class="status-right">284 <span>LR</span>285 <span class="icon">286 <svg viewBox="0 0 24 24"><path d="M3 12h3v8H3v-8zm5-4h3v12H8V8zm5-3h3v15h-3V5zm5-2h3v17h-3V3z" fill="#666"/></svg>287 </span>288 <span class="icon">289 <svg viewBox="0 0 24 24"><path d="M12 3C7 3 2.73 6.11 1 10.5L3.24 11.4C4.58 8.19 8.01 6 12 6s7.42 2.19 8.76 5.4L23 10.5C21.27 6.11 17 3 12 3zm0 6c-3.04 0-5.5 2.46-5.5 5.5h2C8.5 12.57 10.07 11 12 11s3.5 1.57 3.5 3.5h2C17.5 11.46 15.04 9 12 9z" fill="#666"/></svg>290 </span>291 </div>292 </div>293 294 <!-- Search header -->295 <div class="search-header">296 <div class="back-btn">297 <svg class="icon" viewBox="0 0 24 24">298 <path d="M15 19L8 12l7-7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>299 </svg>300 </div>301 <div class="search-box">302 <svg class="icon" viewBox="0 0 24 24">303 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1015.5 14l4.5 4.5L19.5 20 15.5 16zM10 15a5 5 0 110-10 5 5 0 010 10z" fill="#777"></path>304 </svg>305 <div class="search-placeholder">Search for products</div>306 <svg class="mic" viewBox="0 0 24 24">307 <path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm-7-3a7 7 0 0014 0h-2a5 5 0 11-10 0H5zm6 7v3h2v-3h-2z" fill="#777"></path>308 </svg>309 </div>310 <div class="cart-wrap">311 <svg class="icon" viewBox="0 0 24 24">312 <path d="M7 6h13l-1.5 9h-11L5 3H2" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>313 <circle cx="9" cy="21" r="1.6" fill="#111"></circle>314 <circle cx="18" cy="21" r="1.6" fill="#111"></circle>315 </svg>316 <div class="badge">1</div>317 </div>318 </div>319 320 <!-- Scrollable content -->321 <div class="content">322 <div class="pad">323 <div class="section-title">Similar Products</div>324 325 <div class="card-row">326 <!-- Card 1 -->327 <div class="product-card">328 <div class="pill">3 LEFT</div>329 <div class="product-img">[IMG: Knorr Chicken Delite Soup Pack]</div>330 <div class="card-body">331 <div class="brand">Knorr</div>332 <div class="title">Chicken Delite Soup...</div>333 <div class="price-row">334 <div class="old">299</div>335 <div class="new">₹279</div>336 </div>337 <div class="off">6% off</div>338 <div class="stars">★★★★★ <span class="count">(890)</span></div>339 </div>340 </div>341 342 <!-- Card 2 -->343 <div class="product-card">344 <div class="product-img">[IMG: Japanese Choice Chicken Miso Soup]</div>345 <div class="sponsored">Sponsored</div>346 <div class="card-body">347 <div class="brand">Japanese Choice</div>348 <div class="title">Chicken Miso Soup ...</div>349 <div class="price-row">350 <div class="old">400</div>351 <div class="new">₹225</div>352 </div>353 <div class="off">43% off</div>354 <div class="stars">★★★★☆ <span class="count">F-Assured</span></div>355 </div>356 </div>357 358 <!-- Card 3 -->359 <div class="product-card">360 <div class="pill pill-blue">TRENDING</div>361 <div class="product-img">[IMG: Knorr Chicken Delite Soup Single Pack]</div>362 <div class="card-body">363 <div class="brand">Knorr</div>364 <div class="title">Chicken Delite Soup</div>365 <div class="price-row">366 <div class="old">150</div>367 <div class="new">₹149</div>368 </div>369 <div class="off">Hot Deal</div>370 <div class="stars">★★★★★</div>371 </div>372 </div>373 </div>374 375 <!-- About the brand -->376 <div class="about">377 <div class="heading-row">378 <div class="shop-ico"></div>379 <div>About the brand</div>380 </div>381 <div class="brand-name">Knorr</div>382 383 <div class="feature">384 <div class="f-ico">↗</div>385 <div>386 <h4>Favorite in Food</h4>387 <p>Based on recent orders on Flipkart</p>388 </div>389 </div>390 391 <div class="feature">392 <div class="f-ico">★</div>393 <div>394 <h4>Loved by customers</h4>395 <p>Based on customer ratings</p>396 </div>397 </div>398 399 <div class="feature">400 <div class="f-ico">🏁</div>401 <div>402 <h4>6+ years on Flipkart</h4>403 <p>Since Jul 2017</p>404 </div>405 </div>406 </div>407 408 <!-- Ratings & Reviews -->409 <div class="ratings">410 <div class="rr-head">411 <div class="rr-title">Ratings & Reviews</div>412 <button class="rate-btn">Rate Product</button>413 </div>414 415 <div class="rating-summary">416 <div class="left-score">417 <div class="big-stars">★★★★★</div>418 <div class="score-title">Very Good</div>419 </div>420 <div class="bars">421 <div class="bar-row">422 <div>5★</div>423 <div class="line"><span style="width: 78%;"></span></div>424 <div class="count-small">?</div>425 </div>426 <div class="bar-row">427 <div>4★</div>428 <div class="line"><span style="width: 42%;"></span></div>429 <div class="count-small">408</div>430 </div>431 <div class="bar-row">432 <div>3★</div>433 <div class="line"><span style="width: 18%; background:#66bb6a;"></span></div>434 <div class="count-small">—</div>435 </div>436 <div class="bar-row">437 <div>2★</div>438 <div class="line"><span style="width: 8%; background:#81c784;"></span></div>439 <div class="count-small">—</div>440 </div>441 <div class="bar-row">442 <div>1★</div>443 <div class="line"><span style="width: 6%; background:#a5d6a7;"></span></div>444 <div class="count-small">—</div>445 </div>446 </div>447 </div>448 </div>449 450 </div> <!-- /pad -->451 </div> <!-- /content -->452 453 <!-- Floating Flipkart button -->454 <div class="float-btn">455 <div class="float-inner">f</div>456 </div>457 458 <!-- Bottom actions -->459 <div class="bottom-actions">460 <div class="cart-btn">Go to cart</div>461 <div class="buy-btn">Buy now</div>462 </div>463 464</div>465</body>466</html>