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>Sport Shoes Men - UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 24px;12 box-shadow: 0 8px 24px rgba(0,0,0,0.08);13 }14 /* Top app bar */15 .appbar { height: 160px; padding: 32px 32px 20px; box-sizing: border-box; border-bottom: 1px solid #e8e8e8; }16 .appbar-row { display: flex; align-items: center; gap: 24px; }17 .icon-btn { width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; }18 .icon { width: 36px; height: 36px; }19 .search-pill {20 flex: 1; height: 92px; border: 2px solid #2a63ff; border-radius: 46px;21 display: flex; align-items: center; box-sizing: border-box; padding: 0 28px; gap: 18px;22 }23 .search-pill .search-text { font-size: 36px; color: #1f1f1f; }24 .actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }25 .subline { font-size: 30px; color: #6a6a6a; padding: 16px 36px 0; }26 .subline b { color: #1f1f1f; }27 28 /* Category chips section */29 .category-wrap { margin-top: 24px; }30 .section-title { font-size: 40px; font-weight: 700; color: #1f1f1f; padding: 20px 36px 16px; }31 .categories {32 display: flex; gap: 24px; padding: 0 24px 10px 24px; box-sizing: border-box;33 background: linear-gradient(90deg, #ffe9e9, #ffeef7, #fff2f2); border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1;34 }35 .cat-card {36 width: 196px; background: #ffffff; border: 1px solid #e3e3e3; border-radius: 24px;37 padding: 18px 18px 16px; box-sizing: border-box; text-align: center;38 }39 .cat-circle {40 width: 160px; height: 160px; border-radius: 80px; margin: 0 auto 12px;41 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;42 }43 .cat-label { font-size: 30px; color: #4b4b4b; }44 45 /* Product grid */46 .grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 28px; padding: 24px 24px 160px; }47 .card { border: 1px solid #e9e9e9; border-radius: 22px; overflow: hidden; background: #fff; }48 .card .img {49 width: 100%; height: 620px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;50 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;51 }52 .pager { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }53 .dot { width: 18px; height: 6px; border-radius: 6px; background: #cfcfcf; }54 .dot.active { background: #9d9d9d; width: 26px; }55 56 .content { padding: 18px 22px 22px; }57 .title { font-size: 32px; color: #2a2a2a; line-height: 1.3; max-height: 84px; overflow: hidden; }58 .price-row { margin-top: 8px; display: flex; align-items: baseline; gap: 16px; }59 .price { font-size: 40px; font-weight: 700; color: #151515; }60 .mrp { font-size: 28px; color: #8b8b8b; text-decoration: line-through; }61 .off { font-size: 30px; font-weight: 700; color: #f2a200; }62 63 /* Floating quick-help button */64 .float-btn {65 position: absolute; right: 36px; top: 980px; width: 88px; height: 88px; border-radius: 44px;66 background: #ff6b70; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px rgba(255,0,0,0.25);67 }68 .float-btn svg { width: 38px; height: 38px; color: #fff; }69 70 /* Bottom bar */71 .bottom-bar {72 position: absolute; left: 0; right: 0; bottom: 76px; height: 120px; border-top: 1px solid #e9e9e9;73 background: #fff; display: flex; align-items: center; justify-content: space-around; font-size: 34px; color: #2e2e2e;74 }75 .bar-item { display: flex; align-items: center; gap: 18px; }76 .badge-dot { width: 16px; height: 16px; background: #ff305f; border-radius: 50%; margin-left: 6px; }77 78 /* iOS-like home indicator */79 .home-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 400px; height: 12px; background: #000000; opacity: 0.15; border-radius: 6px; }80 81 /* Small color chips */82 .color-chips { position: absolute; right: 26px; bottom: 190px; display: flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #dadada; border-radius: 22px; padding: 8px 12px; }83 .chip { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #d0d0d0; }84 .chip.redblue { background: linear-gradient(90deg, #8c0d1b 50%, #1c2b72 50%); }85 .chip.green { background: #7ea301; }86 .chip.olive { background: #9c9b2d; }87 .chip.plus { font-size: 24px; color: #666; display: flex; align-items: center; justify-content: center; }88</style>89</head>90<body>91<div id="render-target">92 93 <!-- Header / Search -->94 <div class="appbar">95 <div class="appbar-row">96 <div class="icon-btn" aria-label="Back">97 <svg class="icon" viewBox="0 0 24 24">98 <path d="M15 4L7 12l8 8" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>99 </svg>100 </div>101 102 <div class="search-pill">103 <svg class="icon" viewBox="0 0 24 24">104 <circle cx="10" cy="10" r="6" fill="none" stroke="#2a63ff" stroke-width="2"/>105 <path d="M15 15l5 5" stroke="#2a63ff" stroke-width="2" stroke-linecap="round"/>106 </svg>107 <div class="search-text">sport shoes men</div>108 </div>109 110 <div class="actions">111 <div class="icon-btn" aria-label="Home">112 <svg class="icon" viewBox="0 0 24 24">113 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linejoin="round"/>114 <path d="M9 19v-5h6v5" stroke="#1f1f1f" stroke-width="2"/>115 </svg>116 </div>117 <div class="icon-btn" aria-label="Cart">118 <svg class="icon" viewBox="0 0 24 24">119 <path d="M3 4h2l2 12h10l2-8H7" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round"/>120 <circle cx="9" cy="20" r="2" fill="#1f1f1f"/>121 <circle cx="17" cy="20" r="2" fill="#1f1f1f"/>122 </svg>123 </div>124 <div class="icon-btn" aria-label="WhatsApp">125 <svg class="icon" viewBox="0 0 24 24">126 <path d="M20 12a8 8 0 1 1-15.5 3L3 22l4.9-1.4A8 8 0 1 1 20 12z" fill="none" stroke="#1f1f1f" stroke-width="2"/>127 <path d="M8 9c1 3 4 5 7 6" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round"/>128 </svg>129 </div>130 </div>131 </div>132 <div class="subline">Showing results for <b>sport shoes men</b></div>133 </div>134 135 <!-- Category chips -->136 <div class="category-wrap">137 <div class="section-title">Footwear Range</div>138 <div class="categories">139 <div class="cat-card">140 <div class="cat-circle">[IMG: Sports Shoe]</div>141 <div class="cat-label">Sports</div>142 </div>143 <div class="cat-card">144 <div class="cat-circle">[IMG: White Sneaker]</div>145 <div class="cat-label">Sneakers</div>146 </div>147 <div class="cat-card">148 <div class="cat-circle">[IMG: Brown Loafer]</div>149 <div class="cat-label">Loafers</div>150 </div>151 <div class="cat-card">152 <div class="cat-circle">[IMG: Casual Shoe]</div>153 <div class="cat-label">Casual</div>154 </div>155 <div class="cat-card">156 <div class="cat-circle">[IMG: Ethnic Footwear]</div>157 <div class="cat-label">Ethnic</div>158 </div>159 </div>160 </div>161 162 <!-- Floating help / remind button -->163 <div class="float-btn" title="Quick action">164 <svg viewBox="0 0 24 24">165 <path d="M12 5v5h5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>166 <path d="M12 19a7 7 0 1 0-7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>167 </svg>168 </div>169 170 <!-- Product grid -->171 <div class="grid">172 <!-- Card 1 -->173 <div class="card">174 <div class="img">[IMG: White Men's Sports Shoes on Stand]</div>175 <div class="content">176 <div class="pager"><div class="dot active"></div><div class="dot"></div><div class="dot"></div></div>177 <div class="title">Campus - FIRST Off White Men's Sports Running Shoes</div>178 <div class="price-row">179 <div class="price">₹975</div>180 <div class="mrp">₹1,899</div>181 <div class="off">49% OFF</div>182 </div>183 </div>184 </div>185 <!-- Card 2 -->186 <div class="card">187 <div class="img">[IMG: Blue Men's Sports Running Shoes]</div>188 <div class="content">189 <div class="pager"><div class="dot"></div><div class="dot active"></div><div class="dot"></div></div>190 <div class="title">Campus - Blue Men's Sports Running Shoes</div>191 <div class="price-row">192 <div class="price">₹875</div>193 <div class="mrp">₹1,599</div>194 <div class="off">45% OFF</div>195 </div>196 </div>197 </div>198 <!-- Card 3 -->199 <div class="card" style="position: relative;">200 <div class="img">[IMG: Black Slip-On Sports Shoes]</div>201 <div class="content">202 <div class="title">Slip-On Mesh Sports Shoes - Black</div>203 <div class="price-row">204 <div class="price">₹899</div>205 <div class="mrp">₹1,599</div>206 <div class="off">44% OFF</div>207 </div>208 </div>209 <div class="color-chips">210 <div class="chip redblue"></div>211 </div>212 </div>213 <!-- Card 4 -->214 <div class="card" style="position: relative;">215 <div class="img">[IMG: Olive Green Lace-Up Sports Shoes]</div>216 <div class="content">217 <div class="title">Lace-Up Sports Shoes - Olive Green</div>218 <div class="price-row">219 <div class="price">₹949</div>220 <div class="mrp">₹1,799</div>221 <div class="off">47% OFF</div>222 </div>223 </div>224 <div class="color-chips">225 <div class="chip green"></div>226 <div class="chip olive"></div>227 <div class="chip plus">+1</div>228 </div>229 </div>230 </div>231 232 <!-- Bottom Sort / Filter bar -->233 <div class="bottom-bar">234 <div class="bar-item">235 <svg class="icon" viewBox="0 0 24 24">236 <path d="M7 4v10M4 7h6M17 20V10M14 17h6" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round"/>237 </svg>238 <span>Sort</span>239 </div>240 <div class="bar-item">241 <svg class="icon" viewBox="0 0 24 24">242 <path d="M4 6h16M8 12h12M12 18h8" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round"/>243 </svg>244 <span>Filter</span>245 <span class="badge-dot"></span>246 </div>247 </div>248 249 <div class="home-indicator"></div>250</div>251</body>252</html>