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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #111;14 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 95px;23 background: #0f0f10;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 32px;28 box-sizing: border-box;29 }30 .status-left { font-weight: 600; font-size: 34px; }31 .status-icons {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 18px;36 }37 .dot {38 width: 16px; height: 16px; background: #fff; border-radius: 50%;39 opacity: 0.85;40 }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 95px;46 left: 0;47 width: 1080px;48 height: 100px;49 background: #fff;50 display: flex;51 align-items: center;52 padding: 0 28px;53 box-sizing: border-box;54 border-bottom: 1px solid #ececec;55 }56 .app-title { font-size: 34px; font-weight: 600; color: #111; }57 .app-actions { margin-left: auto; display: flex; gap: 28px; align-items: center; }58 .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #1a1a1a; stroke-width: 2.5; }59 60 /* Category chips */61 .chips {62 position: absolute;63 top: 195px;64 left: 0;65 width: 1080px;66 padding: 20px 24px;67 box-sizing: border-box;68 display: flex;69 gap: 20px;70 overflow-x: hidden;71 border-bottom: 1px solid #f0f0f0;72 }73 .chip {74 padding: 22px 28px;75 border-radius: 16px;76 border: 1px solid #dcdcdc;77 font-size: 32px;78 color: #333;79 background: #fff;80 box-sizing: border-box;81 white-space: nowrap;82 }83 .chip.active {84 background: #f6d24e;85 border-color: #f6d24e;86 font-weight: 700;87 }88 89 /* Product grid */90 .content {91 position: absolute;92 top: 290px;93 left: 0;94 width: 1080px;95 height: 1870px;96 overflow-y: auto;97 padding: 24px;98 box-sizing: border-box;99 }100 .grid {101 display: grid;102 grid-template-columns: 1fr 1fr;103 gap: 32px;104 }105 .product-card {106 background: #fff;107 border: 1px solid #e7e7e7;108 border-radius: 18px;109 overflow: hidden;110 position: relative;111 box-shadow: 0 2px 4px rgba(0,0,0,0.04);112 }113 .premium {114 position: absolute;115 top: 16px;116 left: 16px;117 background: #f6d24e;118 color: #222;119 font-weight: 700;120 font-size: 26px;121 padding: 10px 16px;122 border-radius: 10px;123 }124 .img {125 width: 100%;126 height: 430px;127 background: #E0E0E0;128 border-bottom: 1px solid #BDBDBD;129 display: flex;130 justify-content: center;131 align-items: center;132 color: #757575;133 font-size: 30px;134 text-align: center;135 }136 .details { padding: 18px 20px 22px 20px; }137 .title-row {138 display: flex;139 align-items: center;140 gap: 8px;141 }142 .title {143 flex: 1;144 font-size: 32px;145 line-height: 1.25;146 font-weight: 600;147 color: #222;148 }149 .fav {150 width: 44px; height: 44px;151 }152 .price-row {153 display: flex;154 align-items: baseline;155 gap: 14px;156 margin-top: 10px;157 }158 .price {159 font-size: 36px;160 font-weight: 800;161 }162 .strike {163 font-size: 30px;164 color: #9a9a9a;165 text-decoration: line-through;166 }167 .discount {168 margin-left: auto;169 font-size: 30px;170 font-weight: 700;171 color: #2d87ff;172 }173 .rating-row {174 display: flex;175 align-items: center;176 gap: 12px;177 margin-top: 10px;178 color: #333;179 font-size: 30px;180 font-weight: 700;181 }182 .star svg { width: 34px; height: 34px; fill: #f3c500; stroke: #e6b300; }183 184 /* Bottom bar */185 .bottom-bar {186 position: absolute;187 bottom: 0;188 left: 0;189 width: 1080px;190 height: 150px;191 background: #ffffff;192 border-top: 1px solid #e8e8e8;193 box-shadow: 0 -6px 16px rgba(0,0,0,0.08);194 display: flex;195 align-items: center;196 justify-content: space-between;197 padding: 0 46px;198 box-sizing: border-box;199 }200 .bottom-item {201 display: flex;202 align-items: center;203 gap: 16px;204 font-size: 36px;205 color: #1e1e1e;206 font-weight: 700;207 }208 .bottom-item svg { width: 44px; height: 44px; stroke: #1e1e1e; stroke-width: 2.8; fill: none; }209 .divider {210 height: 60px; width: 2px; background: #dcdcdc;211 }212</style>213</head>214<body>215<div id="render-target">216 217 <!-- Status Bar -->218 <div class="status-bar">219 <div class="status-left">12:32</div>220 <div class="status-icons">221 <div class="dot"></div>222 <div class="dot"></div>223 <div class="dot"></div>224 <div class="dot" style="width:18px;height:18px;background:#fff;border-radius:4px;"></div>225 <svg width="30" height="30" viewBox="0 0 24 24" stroke="#fff" fill="none"><path d="M3 12h18"/><path d="M20 6v12"/></svg>226 </div>227 </div>228 229 <!-- App Bar -->230 <div class="app-bar">231 <div class="icon-btn" aria-label="Back">232 <svg viewBox="0 0 24 24">233 <path d="M15 6l-6 6 6 6" />234 </svg>235 </div>236 <div class="app-title"></div>237 <div class="app-actions">238 <div class="icon-btn" aria-label="Search">239 <svg viewBox="0 0 24 24">240 <circle cx="11" cy="11" r="6"></circle>241 <path d="M20 20l-4.5-4.5"></path>242 </svg>243 </div>244 <div class="icon-btn" aria-label="Wishlist">245 <svg viewBox="0 0 24 24">246 <path d="M12 21s-6-4.35-8.5-7.2C1.5 11.8 3 8 6.5 8c2 0 3.2 1 3.5 2 0.3-1 1.5-2 3.5-2 3.5 0 5 3.8 3 5.8C18 16.65 12 21 12 21z"></path>247 </svg>248 </div>249 <div class="icon-btn" aria-label="Cart">250 <svg viewBox="0 0 24 24">251 <path d="M3 5h3l2 12h10l2-8H7"></path>252 <circle cx="10" cy="20" r="1.8"></circle>253 <circle cx="18" cy="20" r="1.8"></circle>254 </svg>255 </div>256 </div>257 </div>258 259 <!-- Category Chips -->260 <div class="chips">261 <div class="chip active">All</div>262 <div class="chip">Sports Clothing</div>263 <div class="chip">Co-Ord Set</div>264 <div class="chip">Casual</div>265 </div>266 267 <!-- Content Grid -->268 <div class="content">269 <div class="grid">270 271 <!-- Card 1 -->272 <div class="product-card">273 <div class="premium">Premium</div>274 <div class="img">[IMG: White Casual Sneakers]</div>275 <div class="details">276 <div class="title-row">277 <div class="title">Atom Men White Casual Sneaker</div>278 <div class="fav">279 <svg viewBox="0 0 24 24" stroke="#6f6f6f" fill="none" stroke-width="2.2">280 <path d="M12 21s-6-4.35-8.5-7.2C1.5 11.8 3 8 6.5 8c2 0 3.2 1 3.5 2 0.3-1 1.5-2 3.5-2 3.5 0 5 3.8 3 5.8C18 16.65 12 21 12 21z"></path>281 </svg>282 </div>283 </div>284 <div class="price-row">285 <div class="price">₹1195</div>286 <div class="strike">₹3295</div>287 <div class="discount">64%</div>288 </div>289 <div class="rating-row">290 <div class="star">291 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 .9-5 4.6 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5-4.6 7-.9z"/></svg>292 </div>293 <div>4.0</div>294 </div>295 </div>296 </div>297 298 <!-- Card 2 -->299 <div class="product-card">300 <div class="premium">Premium</div>301 <div class="img">[IMG: Atom Spring Edge Alpha 2 Black]</div>302 <div class="details">303 <div class="title-row">304 <div class="title">Atom Spring Edge Alpha 2 Black</div>305 <div class="fav">306 <svg viewBox="0 0 24 24" stroke="#6f6f6f" fill="none" stroke-width="2.2">307 <path d="M12 21s-6-4.35-8.5-7.2C1.5 11.8 3 8 6.5 8c2 0 3.2 1 3.5 2 0.3-1 1.5-2 3.5-2 3.5 0 5 3.8 3 5.8C18 16.65 12 21 12 21z"></path>308 </svg>309 </div>310 </div>311 <div class="price-row">312 <div class="price">₹1385</div>313 <div class="strike">₹3295</div>314 <div class="discount">58%</div>315 </div>316 <div class="rating-row">317 <div class="star">318 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 .9-5 4.6 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5-4.6 7-.9z"/></svg>319 </div>320 <div>4.2</div>321 </div>322 </div>323 </div>324 325 <!-- Card 3 -->326 <div class="product-card">327 <div class="premium">Premium</div>328 <div class="img">[IMG: Atom SpeedRider Black Sneakers]</div>329 <div class="details">330 <div class="title-row">331 <div class="title">Atom SpeedRider Black Sneaker</div>332 <div class="fav">333 <svg viewBox="0 0 24 24" stroke="#6f6f6f" fill="none" stroke-width="2.2">334 <path d="M12 21s-6-4.35-8.5-7.2C1.5 11.8 3 8 6.5 8c2 0 3.2 1 3.5 2 0.3-1 1.5-2 3.5-2 3.5 0 5 3.8 3 5.8C18 16.65 12 21 12 21z"></path>335 </svg>336 </div>337 </div>338 <div class="price-row">339 <div class="price">₹1495</div>340 <div class="strike">₹2495</div>341 <div class="discount">40%</div>342 </div>343 <div class="rating-row">344 <div class="star">345 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 .9-5 4.6 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5-4.6 7-.9z"/></svg>346 </div>347 <div>4.2</div>348 </div>349 </div>350 </div>351 352 <!-- Card 4 -->353 <div class="product-card">354 <div class="premium">Premium</div>355 <div class="img">[IMG: Atom SpeedRider White Sneakers]</div>356 <div class="details">357 <div class="title-row">358 <div class="title">Atom SpeedRider White Sneaker</div>359 <div class="fav">360 <svg viewBox="0 0 24 24" stroke="#6f6f6f" fill="none" stroke-width="2.2">361 <path d="M12 21s-6-4.35-8.5-7.2C1.5 11.8 3 8 6.5 8c2 0 3.2 1 3.5 2 0.3-1 1.5-2 3.5-2 3.5 0 5 3.8 3 5.8C18 16.65 12 21 12 21z"></path>362 </svg>363 </div>364 </div>365 <div class="price-row">366 <div class="price">₹1495</div>367 <div class="strike">₹2495</div>368 <div class="discount">40%</div>369 </div>370 <div class="rating-row">371 <div class="star">372 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 .9-5 4.6 1.5 7-6.5-3.6-6.5 3.6 1.5-7-5-4.6 7-.9z"/></svg>373 </div>374 <div>4.2</div>375 </div>376 </div>377 </div>378 379 </div>380 </div>381 382 <!-- Bottom sheet bar -->383 <div class="bottom-bar">384 <div class="bottom-item">385 <svg viewBox="0 0 24 24">386 <path d="M6 4v16M12 8v12M18 2v18"></path>387 </svg>388 <span>Sort</span>389 </div>390 <div class="divider"></div>391 <div class="bottom-item">392 <svg viewBox="0 0 24 24">393 <path d="M3 5h18l-7 7v7l-4-2v-5z"></path>394 </svg>395 <span>Filter</span>396 </div>397 </div>398 399</div>400</body>401</html>