GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Men Shoes UI - HTML Render</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 border-radius: 40px;14 box-shadow: 0 8px 24px rgba(0,0,0,0.08);15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 right: 0;24 height: 100px;25 padding: 22px 40px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 font-size: 38px;30 }31 .status-left { display: flex; align-items: center; gap: 26px; }32 .status-right { display: flex; align-items: center; gap: 26px; }33 .dot { width: 16px; height: 16px; background:#000; border-radius: 50%; display: inline-block; }34 .icon { width: 48px; height: 48px; display: inline-flex; align-items:center; justify-content:center; }35 .icon svg { width: 42px; height: 42px; stroke: #222; fill: none; stroke-width: 4px; }36 37 /* Top actions */38 .top-actions {39 position: absolute;40 top: 120px;41 left: 36px;42 right: 36px;43 height: 100px;44 display: flex;45 align-items: center;46 justify-content: space-between;47 }48 .back-btn { width: 84px; height: 84px; display:flex; align-items:center; justify-content:center; }49 .header-actions { display:flex; align-items:center; gap: 34px; }50 .header-actions .icon svg { stroke-width: 5px; }51 52 /* Title section */53 .title-wrap {54 position: absolute;55 top: 220px;56 left: 48px;57 right: 48px;58 }59 .page-title { font-size: 74px; font-weight: 700; margin-bottom: 16px; }60 .sub-info { font-size: 36px; color: #6b6b6b; }61 62 /* Grid */63 .product-grid {64 position: absolute;65 top: 370px;66 left: 24px;67 right: 24px;68 display: grid;69 grid-template-columns: 1fr 1fr;70 gap: 36px 36px;71 }72 .card {73 background: #fff;74 border-radius: 28px;75 box-shadow: 0 2px 0 rgba(0,0,0,0.04);76 border: 1px solid #eee;77 padding: 0;78 overflow: hidden;79 }80 .img-wrap {81 height: 520px;82 background: #EFEFF5;83 display: flex;84 align-items: center;85 justify-content: center;86 border-bottom: 1px solid #e2e2e2;87 color: #757575;88 font-size: 38px;89 }90 .card-actions {91 position: relative;92 height: 88px;93 padding: 16px 24px;94 display: flex;95 align-items: center;96 justify-content: space-between;97 }98 .mini-icons { display: flex; align-items: center; gap: 20px; }99 .mini-icon {100 width: 66px; height: 66px; border-radius: 18px;101 border: 2px solid #ddd; display:flex; align-items:center; justify-content:center;102 background:#fff;103 }104 .mini-icon svg { width: 36px; height: 36px; stroke:#222; fill:none; stroke-width:4px; }105 .like-count { display:flex; align-items:center; gap: 16px; color:#6b6b6b; font-size:34px; }106 .like-count .mini-icon { border-color:#e8e8e8; }107 108 .card-body { padding: 10px 24px 24px 24px; }109 .brand { font-size: 40px; font-weight: 700; margin-top: 10px; }110 .product-name { font-size: 38px; color:#333; line-height: 1.28; margin-top: 10px; }111 .price-row { margin-top: 18px; display:flex; align-items:center; gap: 22px; font-size: 42px; }112 .old { color:#9d9d9d; text-decoration: line-through; }113 .disc { color:#1f8b2e; font-weight: 700; font-size: 40px; }114 .offer-line { display:flex; align-items:center; gap: 16px; margin-top: 14px; color:#1f8b2e; font-size: 36px; }115 .offer-dot { width: 40px; height: 40px; border-radius: 50%; background:#1f8b2e; color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; }116 .alert-line { margin-top: 18px; color:#b33b3b; font-size: 38px; font-weight: 700; }117 118 /* Bottom bar */119 .bottom-bar {120 position: absolute;121 left: 0; right: 0; bottom: 0;122 height: 220px;123 background: #0f0f10;124 display:flex;125 align-items:center;126 justify-content: space-between;127 padding: 28px 40px;128 color: #fff;129 }130 .bar-item {131 width: 430px; height: 164px;132 background: #161617;133 border-radius: 22px;134 display:flex; align-items:flex-start; justify-content:flex-start;135 padding: 30px 36px;136 gap: 24px;137 color:#fff;138 }139 .bar-item .label { font-size: 42px; font-weight: 700; }140 .bar-sub { font-size: 30px; color:#bfbfbf; margin-top: 10px; }141 .filter-dot { width: 26px; height: 26px; background:#2ecc71; border-radius:50%; display:inline-block; margin-left: 16px; vertical-align: middle; }142 .bar-icon svg { width: 56px; height: 56px; stroke:#fff; fill:none; stroke-width:5px; }143 144 /* Small helper */145 .rupee { font-weight: 700; }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status Bar -->152 <div class="status-bar">153 <div class="status-left">154 <div style="font-weight:700;">1:29</div>155 <span class="icon">156 <!-- lock -->157 <svg viewBox="0 0 24 24"><path d="M6 10h12v10H6z"></path><path d="M8 10V7a4 4 0 0 1 8 0v3"></path></svg>158 </span>159 <span class="icon">160 <!-- search bubble placeholder icon -->161 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><path d="M15 15l6 6"></path></svg>162 </span>163 <span class="dot"></span>164 </div>165 <div class="status-right">166 <span class="icon">167 <!-- wifi -->168 <svg viewBox="0 0 24 24"><path d="M2 8c6-6 14-6 20 0"></path><path d="M5 11c4-4 10-4 14 0"></path><path d="M8 14c2-2 6-2 8 0"></path><circle cx="12" cy="18" r="1.5"></circle></svg>169 </span>170 <span class="icon">171 <!-- battery -->172 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2"></rect><rect x="23" y="9" width="3" height="6"></rect></svg>173 </span>174 </div>175 </div>176 177 <!-- Top actions -->178 <div class="top-actions">179 <div class="back-btn icon">180 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"></path></svg>181 </div>182 <div class="header-actions">183 <span class="icon">184 <!-- search -->185 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><path d="M15 15l6 6"></path></svg>186 </span>187 <span class="icon">188 <!-- heart -->189 <svg viewBox="0 0 24 24"><path d="M12 21s-8-6-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-8 11-8 11z"></path></svg>190 </span>191 <span class="icon">192 <!-- bag -->193 <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 13H7L6 8z"></path><path d="M9 8V6a3 3 0 0 1 6 0v2"></path></svg>194 </span>195 </div>196 </div>197 198 <!-- Title -->199 <div class="title-wrap">200 <div class="page-title">Men shoes</div>201 <div class="sub-info">848 Products</div>202 </div>203 204 <!-- Product Grid -->205 <div class="product-grid">206 207 <!-- Card 1 -->208 <div class="card">209 <div class="img-wrap">[IMG: Red & White Running Shoe]</div>210 <div class="card-actions">211 <div class="mini-icons">212 <div class="mini-icon">213 <!-- simple file icon -->214 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="3"></rect></svg>215 </div>216 </div>217 <div class="mini-icons">218 <div class="mini-icon">219 <!-- heart -->220 <svg viewBox="0 0 24 24"><path d="M12 21s-8-6-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-8 11-8 11z"></path></svg>221 </div>222 </div>223 </div>224 <div class="card-body">225 <div class="brand">Campus</div>226 <div class="product-name">Renegade Lace-Up Running Shoes</div>227 <div class="price-row">228 <div class="rupee">₹1649</div>229 <div class="old">₹2199</div>230 <div class="disc">25% off</div>231 </div>232 <div class="offer-line"><span class="offer-dot">%</span> Best Price ₹550</div>233 <div class="alert-line">Selling Fast</div>234 </div>235 </div>236 237 <!-- Card 2 -->238 <div class="card">239 <div class="img-wrap">[IMG: White Running Shoe with Green Sole]</div>240 <div class="card-actions">241 <div class="mini-icons">242 <div class="mini-icon">243 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="3"></rect></svg>244 </div>245 </div>246 <div class="like-count">247 <div class="mini-icon">248 <svg viewBox="0 0 24 24"><path d="M12 21s-8-6-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-8 11-8 11z"></path></svg>249 </div>250 <div>1.1K</div>251 </div>252 </div>253 <div class="card-body">254 <div class="brand">Campus</div>255 <div class="product-name">Artemis Lace-Up Running Shoes</div>256 <div class="price-row">257 <div class="rupee">₹1177</div>258 <div class="old">₹1899</div>259 <div class="disc">38% off</div>260 </div>261 <div class="offer-line"><span class="offer-dot">%</span> Offer Price ₹1,101</div>262 </div>263 </div>264 265 <!-- Card 3 -->266 <div class="card">267 <div class="img-wrap">[IMG: White Speckled Running Shoe]</div>268 <div class="card-actions">269 <div class="mini-icons">270 <div class="mini-icon">271 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="3"></rect></svg>272 </div>273 </div>274 <div class="like-count">275 <div class="mini-icon">276 <svg viewBox="0 0 24 24"><path d="M12 21s-8-6-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-8 11-8 11z"></path></svg>277 </div>278 <div>1.2K</div>279 </div>280 </div>281 <div class="card-body">282 <div class="brand">Campus</div>283 <div class="product-name">Renegade Lace-Up Running Shoes</div>284 <div class="price-row">285 <div class="rupee">₹1649</div>286 <div class="old">₹2199</div>287 <div class="disc">25% off</div>288 </div>289 </div>290 </div>291 292 <!-- Card 4 -->293 <div class="card">294 <div class="img-wrap">[IMG: Purple Running Shoe]</div>295 <div class="card-actions">296 <div class="mini-icons">297 <div class="mini-icon">298 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="3"></rect></svg>299 </div>300 </div>301 <div class="like-count">302 <div class="mini-icon">303 <svg viewBox="0 0 24 24"><path d="M12 21s-8-6-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-8 11-8 11z"></path></svg>304 </div>305 <div>922</div>306 </div>307 </div>308 <div class="card-body">309 <div class="brand">Campus</div>310 <div class="product-name">Artemis Lace-Up Running Shoes</div>311 <div class="price-row">312 <div class="rupee">₹1177</div>313 <div class="old">₹1899</div>314 <div class="disc">38% off</div>315 </div>316 </div>317 </div>318 319 </div>320 321 <!-- Bottom control bar -->322 <div class="bottom-bar">323 <div class="bar-item">324 <div class="bar-icon">325 <!-- sort icon -->326 <svg viewBox="0 0 24 24"><path d="M8 5l-4 4h8z"></path><path d="M16 19l4-4h-8z"></path></svg>327 </div>328 <div>329 <div class="label">SORT BY</div>330 <div class="bar-sub">Relevance</div>331 </div>332 </div>333 <div class="bar-item">334 <div class="bar-icon">335 <!-- grid/category icon -->336 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect></svg>337 </div>338 <div>339 <div class="label">CATEGORY</div>340 </div>341 </div>342 <div class="bar-item">343 <div class="bar-icon">344 <!-- filter icon -->345 <svg viewBox="0 0 24 24"><path d="M4 5h16"></path><path d="M7 12h10"></path><path d="M10 19h4"></path></svg>346 </div>347 <div>348 <div class="label">FILTERS <span class="filter-dot"></span></div>349 <div class="bar-sub">2 filters</div>350 </div>351 </div>352 </div>353 354</div>355</body>356</html>