GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Men Shoes UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1440px;9 height: 3120px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 100%;22 height: 120px;23 padding: 0 48px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-size: 42px;29 color: #111;30 }31 .status-right {32 display: flex;33 gap: 32px;34 align-items: center;35 }36 .dot {37 width: 18px; height: 18px; background:#111; border-radius:50%;38 }39 40 /* Header */41 .header {42 position: absolute;43 top: 120px;44 left: 0;45 width: 100%;46 padding: 40px 56px 0 56px;47 box-sizing: border-box;48 }49 .header-top {50 display: flex;51 align-items: center;52 justify-content: space-between;53 margin-bottom: 24px;54 }55 .icon-btn {56 width: 84px; height: 84px;57 border-radius: 42px;58 display: flex; align-items: center; justify-content: center;59 background: transparent;60 }61 .header-actions { display: flex; gap: 28px; }62 .title {63 font-size: 72px; font-weight: 700; margin: 14px 0 8px 0;64 }65 .subtitle {66 font-size: 40px; color: #6b6b6b;67 }68 69 /* Content grid */70 .content {71 position: absolute;72 top: 360px;73 left: 0;74 width: 100%;75 padding: 0 56px 0 56px;76 box-sizing: border-box;77 }78 .grid {79 display: grid;80 grid-template-columns: repeat(2, 1fr);81 gap: 48px;82 }83 84 .card {85 background: #fafafa;86 border-radius: 36px;87 padding: 24px;88 box-sizing: border-box;89 border: 1px solid #eee;90 }91 .img-wrap {92 position: relative;93 width: 100%;94 height: 520px;95 border-radius: 28px;96 overflow: hidden;97 background: #E0E0E0;98 border: 1px solid #BDBDBD;99 display: flex; align-items: center; justify-content: center;100 color: #757575; font-size: 40px;101 }102 .img-heart {103 position: absolute;104 right: 24px;105 bottom: 24px;106 width: 84px; height: 84px; border-radius: 42px;107 background: #fff; border: 1px solid #ddd;108 display: flex; align-items: center; justify-content: center;109 }110 .img-badge {111 position: absolute;112 left: 24px;113 bottom: 24px;114 width: 84px; height: 84px; border-radius: 20px;115 background: #fff; border: 1px solid #ddd;116 display: flex; align-items: center; justify-content: center;117 font-size: 32px;118 color: #707070;119 }120 121 .brand { font-size: 44px; font-weight: 700; margin-top: 28px; }122 .name { font-size: 40px; color: #333; line-height: 1.25; margin-top: 10px; }123 .price-row {124 display: flex; align-items: baseline; gap: 24px; margin-top: 26px;125 font-size: 44px;126 }127 .strike { color: #999; text-decoration: line-through; }128 .discount { color: #2a9d4b; font-weight: 700; }129 130 .chip-row { display: flex; align-items: center; gap: 18px; margin-top: 22px; }131 .green-dot {132 width: 36px; height: 36px; border-radius: 18px; background: #2a9d4b;133 }134 .chip-text { font-size: 40px; color: #2a9d4b; font-weight: 700; }135 136 .selling { margin-top: 18px; font-size: 40px; color: #b44646; font-weight: 700; }137 138 /* Heart count chip under image for bottom row */139 .heart-count {140 display: inline-flex;141 align-items: center;142 gap: 12px;143 padding: 16px 22px;144 border: 1px solid #e5e5e5;145 border-radius: 40px;146 font-size: 34px;147 color: #444;148 margin-top: 16px;149 float: right;150 }151 152 /* Bottom bar */153 .bottom-bar {154 position: absolute;155 bottom: 0;156 left: 0;157 width: 100%;158 height: 210px;159 background: #101010;160 display: flex;161 align-items: center;162 justify-content: space-around;163 padding: 0 40px;164 box-sizing: border-box;165 }166 .bottom-item {167 width: 420px;168 height: 160px;169 border-radius: 24px;170 background: #1c1c1c;171 color: #fff;172 display: flex; align-items: center; gap: 28px;173 padding: 30px 36px;174 box-sizing: border-box;175 }176 .bottom-item .label-top { font-size: 42px; font-weight: 700; }177 .bottom-item .label-sub { font-size: 32px; color: #bdbdbd; margin-top: 6px; }178 179 /* Simple SVG icons */180 svg { display: block; }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status Bar -->187 <div class="status-bar">188 <div style="display:flex; align-items:center; gap:28px;">189 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M4 12l5-5v3h11v4H9v3z" fill="#111"/></svg>190 <div>1:31</div>191 </div>192 <div class="status-right">193 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2a2 2 0 012 2v2h-4V4a2 2 0 012-2zm7 6H5v12a2 2 0 002 2h10a2 2 0 002-2V8z" fill="#111"/></svg>194 <div class="dot"></div>195 <div class="dot" style="background:#333;"></div>196 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M17 2l4 4-4 4M3 6h18M3 6v12a2 2 0 002 2h10" stroke="#111" stroke-width="2" fill="none"/></svg>197 </div>198 </div>199 200 <!-- Header -->201 <div class="header">202 <div class="header-top">203 <div class="icon-btn">204 <svg width="64" height="64" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>205 </div>206 <div class="header-actions">207 <div class="icon-btn">208 <svg width="56" height="56" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/></svg>209 </div>210 <div class="icon-btn">211 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9z" stroke="#111" stroke-width="2" fill="none"/></svg>212 </div>213 <div class="icon-btn">214 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M6 7h12l-1 12H7L6 7zM9 7a3 3 0 016 0" stroke="#111" stroke-width="2" fill="none"/></svg>215 </div>216 </div>217 </div>218 <div class="title">Men shoes</div>219 <div class="subtitle">528 Products</div>220 </div>221 222 <!-- Content -->223 <div class="content">224 <div class="grid">225 <!-- Card 1 -->226 <div class="card">227 <div class="img-wrap">228 [IMG: Red/White Running Shoe]229 <div class="img-badge">🏷️</div>230 <div class="img-heart">231 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9z" stroke="#555" stroke-width="2" fill="none"/></svg>232 </div>233 </div>234 <div class="brand">Campus</div>235 <div class="name">Renegade Lace-Up Running<br> Shoes</div>236 <div class="price-row">237 <div>₹1649</div>238 <div class="strike">₹2199</div>239 <div class="discount">25% off</div>240 </div>241 <div class="chip-row">242 <div class="green-dot"></div>243 <div class="chip-text">Best Price ₹550</div>244 </div>245 <div class="selling">Selling Fast</div>246 </div>247 248 <!-- Card 2 -->249 <div class="card">250 <div class="img-wrap">251 [IMG: Navy Running Shoe]252 <div class="img-badge">🏷️</div>253 <div class="img-heart">254 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9z" stroke="#555" stroke-width="2" fill="none"/></svg>255 </div>256 </div>257 <div class="brand">Campus</div>258 <div class="name">Simba Pro Lace-Up Running<br> Shoes</div>259 <div class="price-row">260 <div>₹863</div>261 <div class="strike">₹1599</div>262 <div class="discount">46% off</div>263 </div>264 <div class="chip-row">265 <div class="green-dot"></div>266 <div class="chip-text">Offer Price ₹768</div>267 </div>268 </div>269 270 <!-- Card 3 -->271 <div class="card">272 <div class="img-wrap">273 [IMG: White Lime Sneaker]274 <div class="img-badge">🏷️</div>275 <div class="img-heart">276 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9z" stroke="#555" stroke-width="2" fill="none"/></svg>277 </div>278 </div>279 <div class="brand">Campus</div>280 <div class="name">White Lime Running Sneakers</div>281 <div class="price-row" style="visibility:hidden;">282 <div>₹0</div><div class="strike">₹0</div><div class="discount">0% off</div>283 </div>284 <div class="heart-count">285 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9z" stroke="#666" stroke-width="2" fill="none"/></svg>286 <span>1.1K</span>287 </div>288 </div>289 290 <!-- Card 4 -->291 <div class="card">292 <div class="img-wrap">293 [IMG: White Speckled Sneaker]294 <div class="img-badge">🏷️</div>295 <div class="img-heart">296 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9z" stroke="#555" stroke-width="2" fill="none"/></svg>297 </div>298 </div>299 <div class="brand">Campus</div>300 <div class="name">Speckled Lace-Up Running Shoes</div>301 <div class="price-row" style="visibility:hidden;">302 <div>₹0</div><div class="strike">₹0</div><div class="discount">0% off</div>303 </div>304 <div class="heart-count">305 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9z" stroke="#666" stroke-width="2" fill="none"/></svg>306 <span>1.2K</span>307 </div>308 </div>309 </div>310 </div>311 312 <!-- Bottom floating bar -->313 <div class="bottom-bar">314 <div class="bottom-item">315 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M8 5v14M16 5v14M5 8h6M13 16h6" stroke="#fff" stroke-width="2" fill="none"/></svg>316 <div>317 <div class="label-top">SORT BY</div>318 <div class="label-sub">Relevance</div>319 </div>320 </div>321 <div class="bottom-item">322 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M4 6h16v4H4zM4 14h10v4H4z" stroke="#fff" stroke-width="2" fill="none"/></svg>323 <div>324 <div class="label-top">CATEGORY</div>325 </div>326 </div>327 <div class="bottom-item">328 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M4 6h8M4 12h14M4 18h10" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>329 <div>330 <div class="label-top">FILTERS <span style="display:inline-block;width:20px;height:20px;background:#2a9d4b;border-radius:50%;margin-left:12px;vertical-align:middle;"></span></div>331 <div class="label-sub">3 filters</div>332 </div>333 </div>334 </div>335 336</div>337</body>338</html>