GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Shopping UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 font-family: Arial, Helvetica, sans-serif;14 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 background: #111;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 32px;25 font-weight: 600;26 font-size: 36px;27 box-sizing: border-box;28 }29 .status-left { display: flex; align-items: center; gap: 16px; }30 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }31 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; }32 33 /* Header with back and actions */34 .header {35 height: 120px;36 display: flex;37 align-items: center;38 padding: 0 28px;39 box-sizing: border-box;40 border-bottom: 1px solid #eee;41 background: #fff;42 }43 .header .back {44 width: 80px;45 height: 80px;46 display: flex;47 align-items: center;48 justify-content: center;49 }50 .header-actions {51 margin-left: auto;52 display: flex;53 gap: 38px;54 }55 .icon-btn {56 width: 70px;57 height: 70px;58 display: flex;59 align-items: center;60 justify-content: center;61 color: #333;62 }63 .icon {64 width: 54px; height: 54px;65 }66 67 /* Category chips */68 .chips {69 display: flex;70 gap: 20px;71 padding: 22px 28px;72 box-sizing: border-box;73 background: #fff;74 }75 .chip {76 padding: 26px 34px;77 border-radius: 22px;78 border: 1px solid #e5e5e5;79 font-size: 34px;80 color: #333;81 background: #fff;82 box-shadow: 0 0 0 rgba(0,0,0,0);83 }84 .chip.active {85 background: #F4CF46;86 border-color: #F4CF46;87 font-weight: 700;88 }89 90 /* Product grid */91 .content {92 padding: 8px 20px 0 20px;93 box-sizing: border-box;94 }95 .grid {96 display: grid;97 grid-template-columns: 1fr 1fr;98 gap: 26px;99 }100 .card {101 background: #fff;102 border-radius: 18px;103 overflow: hidden;104 }105 .img-box {106 height: 560px;107 background: #E0E0E0;108 border: 1px solid #BDBDBD;109 border-radius: 14px;110 display: flex;111 align-items: center;112 justify-content: center;113 color: #757575;114 font-size: 32px;115 position: relative;116 }117 .ribbon {118 position: absolute;119 left: 16px;120 top: 16px;121 background: #F4CF46;122 color: #333;123 font-weight: 700;124 font-size: 28px;125 padding: 14px 22px;126 border-radius: 10px;127 }128 129 .title {130 font-size: 34px;131 line-height: 1.25;132 margin: 18px 8px 10px 8px;133 height: 90px;134 overflow: hidden;135 }136 137 .price-row {138 display: flex;139 align-items: baseline;140 gap: 16px;141 padding: 0 8px;142 }143 .price {144 font-size: 44px;145 font-weight: 800;146 }147 .strike {148 font-size: 32px;149 color: #999;150 text-decoration: line-through;151 }152 .discount {153 font-size: 34px;154 color: #3EA9FF;155 font-weight: 700;156 margin-left: auto;157 margin-right: 12px;158 }159 .wish {160 position: absolute;161 right: 18px;162 top: -6px;163 }164 .wish .icon { width: 50px; height: 50px; }165 166 .rating-row {167 display: flex;168 align-items: center;169 gap: 10px;170 padding: 10px 8px 22px 8px;171 color: #333;172 font-size: 32px;173 }174 .star {175 width: 34px; height: 34px;176 }177 178 /* Second row images taller for visual parity */179 .card.tall .img-box { height: 570px; }180 181 /* Bottom bar */182 .bottom-bar {183 position: absolute;184 bottom: 0;185 left: 0;186 width: 100%;187 height: 170px;188 background: #ffffff;189 border-top: 1px solid #eaeaea;190 box-shadow: 0 -8px 18px rgba(0,0,0,0.08);191 display: flex;192 align-items: center;193 justify-content: space-between;194 padding: 0 72px;195 box-sizing: border-box;196 }197 .bottom-item {198 display: flex;199 align-items: center;200 gap: 18px;201 font-size: 40px;202 font-weight: 600;203 color: #333;204 }205 .divider {206 position: absolute;207 left: 50%;208 transform: translateX(-50%);209 width: 2px;210 height: 90px;211 background: #e6e6e6;212 }213 214 /* Small favorite icons near titles/prices */215 .price-wrap {216 position: relative;217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status Bar -->224 <div class="status-bar">225 <div class="status-left">11:54226 <span class="dot"></span><span class="dot"></span><span class="dot"></span>227 </div>228 <div class="status-right">229 <span style="font-size:28px; opacity:.8;">⌁</span>230 <span style="font-size:28px; opacity:.8;">︎◓</span>231 <span style="font-size:28px; opacity:.8;">▮▮▮</span>232 </div>233 </div>234 235 <!-- Header -->236 <div class="header">237 <div class="back">238 <svg class="icon" viewBox="0 0 24 24">239 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240 </svg>241 </div>242 <div class="header-actions">243 <div class="icon-btn">244 <svg class="icon" viewBox="0 0 24 24">245 <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/>246 <path d="M20 20l-4.5-4.5" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>247 </svg>248 </div>249 <div class="icon-btn">250 <svg class="icon" viewBox="0 0 24 24">251 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.4-7 10-7 10z" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </div>254 <div class="icon-btn">255 <svg class="icon" viewBox="0 0 24 24">256 <path d="M6 7h12l-1.5 11h-9L6 7z" stroke="#222" stroke-width="2" fill="none"/>257 <path d="M9 7V5a3 3 0 016 0v2" stroke="#222" stroke-width="2" fill="none"/>258 </svg>259 </div>260 </div>261 </div>262 263 <!-- Category Chips -->264 <div class="chips">265 <div class="chip active">All</div>266 <div class="chip">Sports Clothing</div>267 <div class="chip">Co-Ord Set</div>268 <div class="chip">Casual</div>269 </div>270 271 <!-- Product Grid -->272 <div class="content">273 <div class="grid">274 275 <!-- Card 1 -->276 <div class="card">277 <div class="img-box">278 <div class="ribbon">Premium</div>279 [IMG: White Casual Sneakers - stacked]280 </div>281 <div class="title">Atom Men White Casual Sneakers</div>282 <div class="price-row">283 <div class="price">₹1195</div>284 <div class="strike">₹3295</div>285 <div class="discount">64%</div>286 <div class="wish">287 <svg class="icon" viewBox="0 0 24 24">288 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.4-7 10-7 10z" stroke="#777" stroke-width="2" fill="none"/>289 </svg>290 </div>291 </div>292 <div class="rating-row">293 <svg class="star" viewBox="0 0 24 24">294 <polygon points="12,2 15,9 22,9 16,13 18,20 12,16 6,20 8,13 2,9 9,9" fill="#F5C200"/>295 </svg>296 4.0297 </div>298 </div>299 300 <!-- Card 2 -->301 <div class="card">302 <div class="img-box">303 <div class="ribbon">Premium</div>304 [IMG: Atom Spring Edge Alpha 2 Black Sneaker]305 </div>306 <div class="title">Atom Spring Edge Alpha 2 Black</div>307 <div class="price-row">308 <div class="price">₹1385</div>309 <div class="strike">₹3295</div>310 <div class="discount">58%</div>311 <div class="wish">312 <svg class="icon" viewBox="0 0 24 24">313 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.4-7 10-7 10z" stroke="#777" stroke-width="2" fill="none"/>314 </svg>315 </div>316 </div>317 <div class="rating-row">318 <svg class="star" viewBox="0 0 24 24">319 <polygon points="12,2 15,9 22,9 16,13 18,20 12,16 6,20 8,13 2,9 9,9" fill="#F5C200"/>320 </svg>321 4.2322 </div>323 </div>324 325 <!-- Card 3 -->326 <div class="card tall">327 <div class="img-box">328 <div class="ribbon">Premium</div>329 [IMG: Atom SpeedRider Black Sneakers - pair]330 </div>331 <div class="title">Atom SpeedRider Black Sneakers</div>332 <div class="price-row">333 <div class="price">₹1495</div>334 <div class="strike">₹2495</div>335 <div class="discount">40%</div>336 <div class="wish">337 <svg class="icon" viewBox="0 0 24 24">338 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.4-7 10-7 10z" stroke="#777" stroke-width="2" fill="none"/>339 </svg>340 </div>341 </div>342 <div class="rating-row">343 <svg class="star" viewBox="0 0 24 24">344 <polygon points="12,2 15,9 22,9 16,13 18,20 12,16 6,20 8,13 2,9 9,9" fill="#F5C200"/>345 </svg>346 4.2347 </div>348 </div>349 350 <!-- Card 4 -->351 <div class="card tall">352 <div class="img-box">353 <div class="ribbon">Premium</div>354 [IMG: Atom SpeedRider White Sneakers - pair]355 </div>356 <div class="title">Atom SpeedRider White Sneakers</div>357 <div class="price-row">358 <div class="price">₹1495</div>359 <div class="strike">₹2495</div>360 <div class="discount">40%</div>361 <div class="wish">362 <svg class="icon" viewBox="0 0 24 24">363 <path d="M12 21s-7-4.6-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.4-7 10-7 10z" stroke="#777" stroke-width="2" fill="none"/>364 </svg>365 </div>366 </div>367 <div class="rating-row">368 <svg class="star" viewBox="0 0 24 24">369 <polygon points="12,2 15,9 22,9 16,13 18,20 12,16 6,20 8,13 2,9 9,9" fill="#F5C200"/>370 </svg>371 4.2372 </div>373 </div>374 375 </div>376 </div>377 378 <!-- Bottom Sort/Filter Bar -->379 <div class="bottom-bar">380 <div class="bottom-item">381 <svg class="icon" viewBox="0 0 24 24">382 <path d="M4 6h16M7 12h10M10 18h4" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>383 </svg>384 Sort385 </div>386 <div class="divider"></div>387 <div class="bottom-item">388 <svg class="icon" viewBox="0 0 24 24">389 <path d="M4 5h16l-6 7v7l-4-2v-5z" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>390 </svg>391 Filter392 </div>393 </div>394 395</div>396</body>397</html>