GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Sports Footwear - Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FAFAFA;14 color: #222;15 }16 17 /* Header */18 .app-bar {19 position: absolute;20 top: 90px; /* leave room for status bar hint */21 left: 0;22 right: 0;23 height: 120px;24 background: #FFFFFF;25 border-bottom: 1px solid #E0E0E0;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 }31 .app-bar .title {32 font-size: 44px;33 font-weight: 700;34 margin-left: 20px;35 letter-spacing: 0.2px;36 }37 .app-actions {38 margin-left: auto;39 display: flex;40 gap: 36px;41 }42 .icon-btn {43 width: 56px;44 height: 56px;45 display: inline-flex;46 align-items: center;47 justify-content: center;48 }49 .icon {50 width: 42px; height: 42px; fill: none; stroke: #222; stroke-width: 3;51 }52 .back-wrap {53 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;54 }55 56 /* Grid */57 .grid {58 position: absolute;59 top: 210px;60 left: 0;61 width: 100%;62 height: 1900px;63 display: grid;64 grid-template-columns: 1fr 1fr;65 background: #FFFFFF;66 border-top: 1px solid #EAEAEA;67 }68 .cell {69 position: relative;70 border-right: 1px solid #EAEAEA;71 border-bottom: 1px solid #EAEAEA;72 padding: 28px;73 box-sizing: border-box;74 }75 .tag {76 position: absolute;77 top: 18px;78 left: 12px;79 background: #2F76E6;80 color: #fff;81 font-size: 26px;82 font-weight: 700;83 padding: 10px 16px;84 border-radius: 6px;85 letter-spacing: 0.4px;86 }87 .img {88 width: 100%;89 height: 300px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 display: flex;93 align-items: center;94 justify-content: center;95 color: #757575;96 font-size: 28px;97 }98 .overlay-chip {99 position: absolute;100 left: 32px;101 top: 290px;102 background: #fff;103 border: 1px solid #E0E0E0;104 border-radius: 8px;105 padding: 8px 12px;106 display: inline-flex;107 align-items: center;108 gap: 8px;109 }110 .star {111 width: 26px; height: 26px; fill: #FFC107; stroke: #FFC107;112 }113 .heart-circle {114 position: absolute;115 right: 34px;116 top: 274px;117 width: 64px; height: 64px;118 border-radius: 50%;119 border: 2px solid #D5D5D5;120 display: flex; align-items: center; justify-content: center;121 background: #fff;122 }123 .heart {124 width: 30px; height: 30px; fill: none; stroke: #6E7A89; stroke-width: 3;125 }126 127 .brand {128 margin-top: 18px;129 font-size: 36px;130 font-weight: 800;131 letter-spacing: 0.6px;132 }133 .name {134 margin-top: 8px;135 font-size: 30px;136 color: #333;137 }138 .price-row {139 margin-top: 18px;140 display: flex;141 align-items: center;142 gap: 18px;143 }144 .price-pill {145 background: #FFEB3B;146 padding: 12px 18px;147 border-radius: 6px;148 font-size: 34px;149 font-weight: 800;150 color: #222;151 }152 .old-price {153 font-size: 28px;154 color: #888;155 text-decoration: line-through;156 }157 158 /* Color swatches and small chips */159 .swatches {160 margin-top: 16px;161 display: flex;162 gap: 12px;163 align-items: center;164 }165 .swatch {166 width: 40px; height: 32px; border-radius: 5px; border: 1px solid #CFCFCF;167 }168 .swatch.dark { background: #0C2340; }169 .swatch.blue { background: #2B5AA6; }170 .swatch.grey { background: #CFD8DC; }171 .swatch.green { background: #1A7F40; }172 .small-chip {173 font-size: 26px;174 color: #666;175 border: 1px solid #CFCFCF;176 padding: 6px 10px;177 border-radius: 6px;178 }179 180 /* Bottom toolbar */181 .bottom-bar {182 position: absolute;183 bottom: 110px;184 left: 0;185 right: 0;186 height: 120px;187 background: #FFFFFF;188 border-top: 1px solid #E0E0E0;189 display: flex;190 align-items: center;191 justify-content: space-around;192 }193 .tool-item {194 display: flex; align-items: center; gap: 18px; font-size: 36px; color: #222;195 }196 .tool-icon {197 width: 40px; height: 40px; stroke: #444; stroke-width: 3; fill: none;198 }199 .red-dot {200 width: 14px; height: 14px; background: #E53935; border-radius: 50%;201 margin-right: -10px; margin-left: 6px;202 }203 204 /* Home indicator */205 .home-indicator {206 position: absolute;207 bottom: 40px;208 left: 50%;209 transform: translateX(-50%);210 width: 760px;211 height: 14px;212 background: #000000;213 border-radius: 8px;214 }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Header Bar -->221 <div class="app-bar">222 <div class="back-wrap">223 <svg class="icon" viewBox="0 0 24 24">224 <path d="M14 5 L7 12 L14 19" />225 <path d="M7 12 H21" />226 </svg>227 </div>228 <div class="title">Sports Footwear</div>229 <div class="app-actions">230 <div class="icon-btn">231 <svg class="icon" viewBox="0 0 24 24">232 <circle cx="11" cy="11" r="6"></circle>233 <path d="M20 20 L16 16"></path>234 </svg>235 </div>236 <div class="icon-btn">237 <svg class="icon" viewBox="0 0 24 24">238 <path d="M12 21 C18 15, 21 12, 20 8 C19 5, 15 4, 12 7 C9 4, 5 5, 4 8 C3 12, 6 15, 12 21 Z"></path>239 </svg>240 </div>241 <div class="icon-btn">242 <svg class="icon" viewBox="0 0 24 24">243 <path d="M6 7 H18 L17 19 H7 Z"></path>244 <path d="M9 7 V5 C9 4 10 3 12 3 C14 3 15 4 15 5 V7"></path>245 </svg>246 </div>247 </div>248 </div>249 250 <!-- Product Grid -->251 <div class="grid">252 <!-- Cell 1 -->253 <div class="cell">254 <div class="tag">BESTSELLER</div>255 <div class="img">[IMG: Blue Running Shoe]</div>256 <div class="overlay-chip">257 <svg class="star" viewBox="0 0 24 24">258 <path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 17 L5.5 21 L7.5 13.5 L2 9 L9 9 Z"></path>259 </svg>260 <div style="font-size:26px;">4.2</div>261 </div>262 <div class="heart-circle">263 <svg class="heart" viewBox="0 0 24 24">264 <path d="M12 21 C18 15, 21 12, 20 8 C19 5, 15 4, 12 7 C9 4, 5 5, 4 8 C3 12, 6 15, 12 21 Z"></path>265 </svg>266 </div>267 <div class="brand">KALENJI</div>268 <div class="name">Men Running Shoes Run Cushion - Blue</div>269 <div class="price-row">270 <div class="price-pill">₹1,399</div>271 <div class="old-price">₹2,099</div>272 </div>273 </div>274 275 <!-- Cell 2 -->276 <div class="cell">277 <div class="img">[IMG: Grey Running Shoe]</div>278 <div class="overlay-chip">279 <svg class="star" viewBox="0 0 24 24">280 <path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 17 L5.5 21 L7.5 13.5 L2 9 L9 9 Z"></path>281 </svg>282 <div style="font-size:26px;">4.4</div>283 </div>284 <div class="heart-circle">285 <svg class="heart" viewBox="0 0 24 24">286 <path d="M12 21 C18 15, 21 12, 20 8 C19 5, 15 4, 12 7 C9 4, 5 5, 4 8 C3 12, 6 15, 12 21 Z"></path>287 </svg>288 </div>289 <div class="brand">KALENJI</div>290 <div class="name">Men Running Shoes Run 100 - Grey</div>291 <div class="price-row">292 <div class="price-pill">₹899</div>293 <div class="old-price">₹1,199</div>294 </div>295 </div>296 297 <!-- Cell 3 -->298 <div class="cell">299 <div class="tag" style="background:#2F76E6;">PRICE DROP</div>300 <div class="img">[IMG: Dark Blue Active Shoe]</div>301 <div class="overlay-chip">302 <svg class="star" viewBox="0 0 24 24">303 <path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 17 L5.5 21 L7.5 13.5 L2 9 L9 9 Z"></path>304 </svg>305 <div style="font-size:26px;">4.5</div>306 </div>307 <div class="heart-circle">308 <svg class="heart" viewBox="0 0 24 24">309 <path d="M12 21 C18 15, 21 12, 20 8 C19 5, 15 4, 12 7 C9 4, 5 5, 4 8 C3 12, 6 15, 12 21 Z"></path>310 </svg>311 </div>312 <div class="brand">KALENJI</div>313 <div class="name">Men Running Shoes Run Active - Dark Blue</div>314 <div class="price-row">315 <div class="price-pill">₹2,299</div>316 <div class="old-price">₹2,999</div>317 </div>318 <div class="swatches">319 <div class="swatch dark"></div>320 <div class="swatch blue"></div>321 <div class="small-chip">+1</div>322 </div>323 </div>324 325 <!-- Cell 4 -->326 <div class="cell">327 <div class="tag">BESTSELLER</div>328 <div class="img">[IMG: Green Active Grip Shoe]</div>329 <div class="overlay-chip">330 <svg class="star" viewBox="0 0 24 24">331 <path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 17 L5.5 21 L7.5 13.5 L2 9 L9 9 Z"></path>332 </svg>333 <div style="font-size:26px;">4.4</div>334 </div>335 <div class="heart-circle">336 <svg class="heart" viewBox="0 0 24 24">337 <path d="M12 21 C18 15, 21 12, 20 8 C19 5, 15 4, 12 7 C9 4, 5 5, 4 8 C3 12, 6 15, 12 21 Z"></path>338 </svg>339 </div>340 <div class="brand">KALENJI</div>341 <div class="name">Men Running Shoes Active Grip - Green</div>342 <div class="price-row">343 <div class="price-pill">₹2,799</div>344 <div class="old-price">₹3,799</div>345 </div>346 <div class="swatches">347 <div class="swatch green"></div>348 <div class="swatch green" style="opacity:0.7"></div>349 </div>350 </div>351 352 <!-- Cell 5 -->353 <div class="cell">354 <div class="tag">BESTSELLER</div>355 <div class="img">[IMG: Navy Cushion Shoe]</div>356 <div class="brand" style="margin-top:22px;">KALENJI</div>357 <div class="name">Men Running Shoes - Navy/Yellow</div>358 <div class="price-row" style="margin-top:22px;">359 <div class="price-pill">₹2,799</div>360 <div class="old-price">₹3,799</div>361 </div>362 </div>363 364 <!-- Cell 6 -->365 <div class="cell">366 <div class="tag">BESTSELLER</div>367 <div class="img">[IMG: Black Cushion Shoe]</div>368 <div class="brand" style="margin-top:22px;">KALENJI</div>369 <div class="name">Men Running Shoes - Black/White</div>370 <div class="price-row" style="margin-top:22px;">371 <div class="price-pill">₹2,799</div>372 <div class="old-price">₹3,799</div>373 </div>374 </div>375 </div>376 377 <!-- Bottom Toolbar -->378 <div class="bottom-bar">379 <div class="tool-item">380 <svg class="tool-icon" viewBox="0 0 24 24">381 <path d="M12 3 A6 6 0 0 1 18 9 A11 11 0 0 1 12 21 A11 11 0 0 1 6 9 A6 6 0 0 1 12 3 Z"></path>382 </svg>383 <div>GENDER</div>384 </div>385 <div class="tool-item">386 <span class="red-dot"></span>387 <svg class="tool-icon" viewBox="0 0 24 24">388 <path d="M8 6 L12 2 L16 6"></path>389 <path d="M8 18 L12 22 L16 18"></path>390 <path d="M12 2 V22"></path>391 </svg>392 <div>SORT</div>393 </div>394 <div class="tool-item">395 <svg class="tool-icon" viewBox="0 0 24 24">396 <path d="M4 5 H20"></path>397 <path d="M7 12 H17"></path>398 <path d="M10 19 H14"></path>399 </svg>400 <div>FILTER</div>401 </div>402 </div>403 404 <!-- Home Indicator -->405 <div class="home-indicator"></div>406</div>407</body>408</html>