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>Toblerone milk chocolate - Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #222;16 }17 18 /* Header (status + app bar) */19 .header {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 240px;25 background: #0a7a3b;26 color: #fff;27 }28 .status {29 height: 98px;30 display: flex;31 align-items: center;32 padding: 0 36px;33 font-weight: 600;34 font-size: 36px;35 }36 .status .spacer { flex: 1; }37 .status .icon-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; margin: 0 18px; opacity: 0.8; }38 .status .wifi, .status .battery {39 width: 48px; height: 30px; margin-left: 22px;40 }41 .status .wifi svg, .status .battery svg { width: 100%; height: 100%; }42 .appbar {43 height: 142px;44 display: flex;45 align-items: center;46 padding: 0 32px;47 }48 .appbar .title {49 font-size: 46px;50 font-weight: 700;51 margin-left: 22px;52 }53 .appbar .actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }54 .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }55 .icon-btn svg { width: 64px; height: 64px; fill: none; stroke: #fff; stroke-width: 5; }56 57 /* Search results bar */58 .subbar {59 position: absolute;60 top: 240px;61 left: 0;62 width: 1080px;63 height: 120px;64 background: #efefef;65 display: flex;66 align-items: center;67 padding: 0 32px;68 font-size: 38px;69 color: #777;70 box-sizing: border-box;71 }72 .subbar .more { margin-left: auto; color: #9a9a9a; }73 74 /* List area */75 .list {76 position: absolute;77 top: 360px;78 left: 0;79 width: 1080px;80 height: calc(2400px - 360px);81 overflow: hidden;82 box-sizing: border-box;83 }84 .item {85 padding: 30px 32px 24px 32px;86 box-sizing: border-box;87 border-bottom: 1px solid #eee;88 }89 .row {90 display: flex;91 gap: 26px;92 }93 .left-col { width: 420px; }94 .mark {95 width: 48px;96 height: 48px;97 border: 3px solid #ff3b30;98 border-radius: 6px;99 display: flex;100 align-items: center;101 justify-content: center;102 margin-bottom: 26px;103 }104 .mark .dot {105 width: 20px; height: 20px; background: #ff3b30; border-radius: 50%;106 }107 .product-img {108 width: 420px;109 height: 140px;110 background: #E0E0E0;111 border: 1px solid #BDBDBD;112 display: flex;113 align-items: center;114 justify-content: center;115 color: #757575;116 font-size: 28px;117 }118 119 .right-col { flex: 1; }120 .title-txt {121 font-size: 44px;122 font-weight: 700;123 line-height: 1.3;124 margin: 8px 0 18px 0;125 }126 .qty-box {127 width: 520px;128 height: 92px;129 border: 2px solid #d7d7d7;130 border-radius: 12px;131 display: flex;132 align-items: center;133 padding: 0 22px;134 font-size: 36px;135 color: #666;136 box-sizing: border-box;137 background: #fff;138 }139 140 .price-row {141 display: flex;142 align-items: flex-start;143 justify-content: space-between;144 margin-top: 22px;145 }146 .price-info {147 display: flex;148 flex-direction: column;149 gap: 6px;150 }151 .dmart-price {152 font-size: 46px;153 font-weight: 700;154 color: #0a7a3b;155 }156 .mrp {157 font-size: 34px;158 color: #9a9a9a;159 text-decoration: line-through;160 }161 .tax {162 font-size: 28px;163 color: #9a9a9a;164 }165 166 .off-pill {167 width: 210px;168 height: 118px;169 border: 4px solid #ff9c3b;170 color: #ff8a1c;171 border-radius: 60px;172 display: flex;173 flex-direction: column;174 align-items: center;175 justify-content: center;176 background: #fff;177 font-weight: 700;178 }179 .off-pill .amt { font-size: 42px; }180 .off-pill .lbl { font-size: 30px; font-weight: 700; }181 182 .add-btn {183 margin-top: 22px;184 width: 560px;185 height: 120px;186 background: #1ca245;187 color: #fff;188 font-size: 44px;189 font-weight: 800;190 border-radius: 12px;191 display: flex;192 align-items: center;193 justify-content: center;194 gap: 20px;195 }196 .add-btn svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 5; }197 198 .out-stock {199 margin-top: 20px;200 width: 360px;201 height: 110px;202 border-radius: 60px;203 border: 4px solid #ff3b30;204 color: #ff3b30;205 display: flex;206 align-items: center;207 justify-content: center;208 font-size: 38px;209 font-weight: 800;210 background: #fff;211 }212 .add-btn.disabled {213 background: #d0d0d0;214 color: #888;215 }216 217 /* bottom home indicator */218 .home-indicator {219 position: absolute;220 bottom: 18px;221 left: 50%;222 transform: translateX(-50%);223 width: 420px;224 height: 14px;225 border-radius: 10px;226 background: #000;227 opacity: 0.7;228 }229</style>230</head>231<body>232<div id="render-target">233 234 <div class="header">235 <div class="status">236 <div>10:11</div>237 <div class="icon-dot"></div>238 <div class="spacer"></div>239 <div class="wifi">240 <svg viewBox="0 0 64 40">241 <path d="M4 14c8-8 48-8 56 0" stroke="#fff" fill="none" stroke-width="4" />242 <path d="M12 22c6-6 34-6 40 0" stroke="#fff" fill="none" stroke-width="4" />243 <circle cx="32" cy="30" r="3" fill="#fff" />244 </svg>245 </div>246 <div class="battery">247 <svg viewBox="0 0 64 32">248 <rect x="4" y="6" width="48" height="20" rx="4" stroke="#fff" fill="none" stroke-width="4"/>249 <rect x="8" y="10" width="36" height="12" fill="#fff"/>250 <rect x="54" y="12" width="6" height="8" rx="2" fill="#fff"/>251 </svg>252 </div>253 </div>254 255 <div class="appbar">256 <div class="icon-btn">257 <svg viewBox="0 0 48 48">258 <path d="M30 8 L14 24 L30 40" />259 </svg>260 </div>261 <div class="title">Toblerone milk chocolate</div>262 <div class="actions">263 <div class="icon-btn">264 <svg viewBox="0 0 48 48">265 <circle cx="20" cy="20" r="12" />266 <path d="M32 32 L44 44" />267 </svg>268 </div>269 <div class="icon-btn">270 <svg viewBox="0 0 48 48">271 <path d="M6 10h6l4 22h20l4-16H16" />272 <circle cx="20" cy="40" r="3" />273 <circle cx="34" cy="40" r="3" />274 </svg>275 </div>276 <div class="icon-btn">277 <svg viewBox="0 0 48 48">278 <circle cx="24" cy="16" r="10" />279 <path d="M8 44c4-10 28-10 32 0" />280 </svg>281 </div>282 </div>283 </div>284 </div>285 286 <div class="subbar">287 <div>Search results</div>288 <div class="more">209 & more</div>289 </div>290 291 <div class="list">292 293 <!-- Item 1 -->294 <div class="item">295 <div class="row">296 <div class="left-col">297 <div class="mark"><div class="dot"></div></div>298 <div class="product-img">[IMG: Toblerone Bar - Milk]</div>299 </div>300 <div class="right-col">301 <div class="title-txt">Toblerone Milk Chocolate : 100 gms</div>302 <div class="qty-box">100 gm (₹ 2.45 / 1 gm)</div>303 304 <div class="price-row">305 <div class="price-info">306 <div class="dmart-price">DMart ₹245</div>307 <div class="mrp">MRP ₹275</div>308 <div class="tax">Incl. of all taxes</div>309 </div>310 <div class="off-pill">311 <div class="amt">₹30</div>312 <div class="lbl">OFF</div>313 </div>314 </div>315 316 <div class="add-btn">317 <svg viewBox="0 0 48 48">318 <path d="M6 10h6l4 22h20l4-16H16" />319 <circle cx="20" cy="40" r="3" />320 <circle cx="34" cy="40" r="3" />321 </svg>322 ADD323 </div>324 </div>325 </div>326 </div>327 328 <!-- Item 2 -->329 <div class="item">330 <div class="row">331 <div class="left-col">332 <div class="mark"><div class="dot"></div></div>333 <div class="product-img">[IMG: Toblerone Bar - White]</div>334 </div>335 <div class="right-col">336 <div class="title-txt">Toblerone White Chocolate : 100 gms</div>337 <div class="qty-box">100 gm (₹ 2.49 / 1 gm)</div>338 339 <div class="price-row">340 <div class="price-info">341 <div class="dmart-price">DMart ₹249</div>342 <div class="mrp">MRP ₹275</div>343 <div class="tax">Incl. of all taxes</div>344 </div>345 <div class="off-pill">346 <div class="amt">₹26</div>347 <div class="lbl">OFF</div>348 </div>349 </div>350 351 <div class="add-btn">352 <svg viewBox="0 0 48 48">353 <path d="M6 10h6l4 22h20l4-16H16" />354 <circle cx="20" cy="40" r="3" />355 <circle cx="34" cy="40" r="3" />356 </svg>357 ADD358 </div>359 </div>360 </div>361 </div>362 363 <!-- Item 3 -->364 <div class="item">365 <div class="row">366 <div class="left-col">367 <div class="mark"><div class="dot"></div></div>368 <div class="product-img">[IMG: Toblerone Bar - Fruit & Nut]</div>369 </div>370 <div class="right-col">371 <div class="title-txt">Toblerone Fruit & Nut Chocolate : 100 gms</div>372 <div class="qty-box">100 gm (₹ 2.45 / 1 gm)</div>373 374 <div class="price-row">375 <div class="price-info">376 <div class="dmart-price">DMart ₹245</div>377 <div class="mrp">MRP ₹275</div>378 <div class="tax">Incl. of all taxes</div>379 </div>380 <div class="off-pill">381 <div class="amt">₹30</div>382 <div class="lbl">OFF</div>383 </div>384 </div>385 386 <div class="add-btn">387 <svg viewBox="0 0 48 48">388 <path d="M6 10h6l4 22h20l4-16H16" />389 <circle cx="20" cy="40" r="3" />390 <circle cx="34" cy="40" r="3" />391 </svg>392 ADD393 </div>394 </div>395 </div>396 </div>397 398 <!-- Item 4 -->399 <div class="item">400 <div class="row">401 <div class="left-col">402 <div class="mark"><div class="dot"></div></div>403 <div class="product-img">[IMG: Toblerone Bar - Crunchy Almonds]</div>404 </div>405 <div class="right-col">406 <div class="title-txt">Toblerone Crunchy Almonds Chocolate : 100 gms</div>407 <div class="qty-box">100 gm (₹ 1.85 / 1 gm)</div>408 409 <div class="price-row">410 <div class="price-info">411 <div class="dmart-price">DMart ₹185</div>412 <div class="mrp">MRP ₹225</div>413 <div class="tax">Incl. of all taxes</div>414 </div>415 <div class="off-pill">416 <div class="amt">₹40</div>417 <div class="lbl">OFF</div>418 </div>419 </div>420 421 <div style="display:flex; gap:24px; align-items:center; margin-top:22px;">422 <div class="out-stock">Out Of Stock</div>423 <div class="add-btn disabled">424 <svg viewBox="0 0 48 48">425 <path d="M6 10h6l4 22h20l4-16H16" />426 <circle cx="20" cy="40" r="3" />427 <circle cx="34" cy="40" r="3" />428 </svg>429 ADD430 </div>431 </div>432 </div>433 </div>434 </div>435 436 </div>437 438 <div class="home-indicator"></div>439</div>440</body>441</html>