GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Puma Listing UI - Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 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: 1440px;22 height: 120px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 60px;27 box-sizing: border-box;28 color: #0d0d0d;29 font-size: 52px;30 }31 .status-icons {32 display: flex;33 gap: 40px;34 align-items: center;35 }36 .icon {37 width: 60px;38 height: 60px;39 }40 41 /* App bar */42 .app-bar {43 position: absolute;44 top: 120px;45 left: 0;46 width: 1440px;47 height: 180px;48 display: flex;49 align-items: center;50 padding: 0 40px 0 20px;51 box-sizing: border-box;52 border-bottom: 1px solid #eee;53 background: #fff;54 }55 .back-btn {56 width: 120px;57 height: 120px;58 display: flex;59 align-items: center;60 justify-content: center;61 }62 .app-actions {63 margin-left: auto;64 display: flex;65 align-items: center;66 gap: 40px;67 padding-right: 20px;68 }69 70 /* Content grid */71 .content {72 position: absolute;73 top: 300px;74 left: 0;75 width: 1440px;76 height: calc(3120px - 300px);77 padding: 40px 40px 120px;78 box-sizing: border-box;79 overflow: hidden;80 }81 .grid {82 display: grid;83 grid-template-columns: 1fr 1fr;84 gap: 40px 40px;85 }86 87 .card {88 background: #fff;89 border-radius: 28px;90 box-shadow: 0 2px 0 rgba(0,0,0,0.04);91 border: 1px solid #eee;92 overflow: hidden;93 }94 .img-wrap {95 position: relative;96 width: 100%;97 height: 640px;98 background: #E0E0E0;99 border-bottom: 1px solid #BDBDBD;100 display: flex;101 align-items: center;102 justify-content: center;103 color: #757575;104 font-size: 44px;105 text-align: center;106 padding: 20px;107 box-sizing: border-box;108 }109 .wish {110 position: absolute;111 bottom: 28px;112 right: 28px;113 width: 92px;114 height: 92px;115 background: #fff;116 border-radius: 50%;117 border: 1px solid #ddd;118 display: flex;119 align-items: center;120 justify-content: center;121 box-shadow: 0 2px 6px rgba(0,0,0,0.08);122 }123 124 .info {125 padding: 28px 28px 40px;126 box-sizing: border-box;127 }128 .brand {129 font-size: 44px;130 color: #555;131 margin-bottom: 10px;132 font-weight: 600;133 }134 .title {135 font-size: 48px;136 color: #222;137 line-height: 1.2;138 margin-bottom: 20px;139 }140 .pricing {141 display: flex;142 align-items: baseline;143 gap: 24px;144 font-size: 52px;145 color: #111;146 }147 .old {148 font-size: 48px;149 color: #777;150 text-decoration: line-through;151 }152 .off {153 font-size: 48px;154 color: #2e7d32;155 font-weight: 700;156 margin-left: auto;157 }158 159 /* Bottom horizontal shoes preview */160 .bottom-strip {161 margin-top: 40px;162 display: grid;163 grid-template-columns: 1fr 1fr;164 gap: 40px;165 }166 .wide-img {167 height: 360px;168 background: #E0E0E0;169 border: 1px solid #BDBDBD;170 display: flex;171 align-items: center;172 justify-content: center;173 color: #757575;174 font-size: 44px;175 border-radius: 22px;176 }177</style>178</head>179<body>180<div id="render-target">181 182 <!-- Status bar -->183 <div class="status-bar">184 <div>9:58</div>185 <div class="status-icons">186 <!-- simple signal icon -->187 <svg class="icon" viewBox="0 0 24 24">188 <path d="M4 18h2v2H4v-2zm4-4h2v6H8v-6zm4-4h2v10h-2V10zm4-4h2v14h-2V6z" fill="#000"/>189 </svg>190 <!-- wifi icon -->191 <svg class="icon" viewBox="0 0 24 24">192 <path d="M12 18.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-6.6-5.4a12 12 0 0113.2 0l-1.5 1.6a9.6 9.6 0 00-10.2 0l-1.5-1.6zm-3.3-4.4a17 17 0 0119.8 0l-1.6 1.8a14.6 14.6 0 00-16.6 0L2.1 8.7z" fill="#000"/>193 </svg>194 <!-- battery icon -->195 <svg class="icon" viewBox="0 0 24 24">196 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#000" fill="none" stroke-width="2"/>197 <rect x="4" y="8" width="12" height="8" fill="#000"/>198 <rect x="20" y="10" width="2" height="4" fill="#000"/>199 </svg>200 </div>201 </div>202 203 <!-- App bar -->204 <div class="app-bar">205 <div class="back-btn">206 <!-- back arrow -->207 <svg class="icon" viewBox="0 0 24 24">208 <path d="M15.5 5l-7 7 7 7" stroke="#000" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>209 </svg>210 </div>211 <div class="app-actions">212 <!-- search -->213 <svg class="icon" viewBox="0 0 24 24">214 <circle cx="11" cy="11" r="7" stroke="#000" stroke-width="2.5" fill="none"/>215 <path d="M21 21l-4.3-4.3" stroke="#000" stroke-width="2.5" fill="none" stroke-linecap="round"/>216 </svg>217 <!-- heart -->218 <svg class="icon" viewBox="0 0 24 24">219 <path d="M12 20s-7-4.5-7-10a5 5 0 019-3 5 5 0 019 3c0 5.5-7 10-7 10z" fill="none" stroke="#000" stroke-width="2"/>220 </svg>221 <!-- cart -->222 <svg class="icon" viewBox="0 0 24 24">223 <path d="M3 4h2l2 12h10l2-8H7" fill="none" stroke="#000" stroke-width="2"/>224 <circle cx="10" cy="20" r="2" fill="#000"/>225 <circle cx="18" cy="20" r="2" fill="#000"/>226 </svg>227 </div>228 </div>229 230 <!-- Content -->231 <div class="content">232 <div class="grid">233 <!-- Card 1 -->234 <div class="card">235 <div class="img-wrap">236 [IMG: Black Puma running shoe with lime accent]237 <div class="wish">238 <svg viewBox="0 0 24 24" width="50" height="50">239 <path d="M12 20s-7-4.5-7-10a5 5 0 019-3 5 5 0 019 3c0 5.5-7 10-7 10z" fill="none" stroke="#444" stroke-width="2"/>240 </svg>241 </div>242 </div>243 <div class="info">244 <div class="brand">Puma</div>245 <div class="title">Dwane Idp Running Shoes</div>246 <div class="pricing">247 <div>₹1600</div>248 <div class="old">₹3999</div>249 <div class="off">60% off</div>250 </div>251 </div>252 </div>253 254 <!-- Card 2 -->255 <div class="card">256 <div class="img-wrap">257 [IMG: Navy Puma Lyrid running shoe]258 <div class="wish">259 <svg viewBox="0 0 24 24" width="50" height="50">260 <path d="M12 20s-7-4.5-7-10a5 5 0 019-3 5 5 0 019 3c0 5.5-7 10-7 10z" fill="none" stroke="#444" stroke-width="2"/>261 </svg>262 </div>263 </div>264 <div class="info">265 <div class="brand">Puma</div>266 <div class="title">Lyrid Running Shoes</div>267 <div class="pricing">268 <div>₹2474</div>269 <div class="old">₹4499</div>270 <div class="off">45% off</div>271 </div>272 </div>273 </div>274 275 <!-- Card 3 -->276 <div class="card">277 <div class="img-wrap">278 [IMG: Full-body model wearing black outfit and Puma shoes]279 <div class="wish">280 <svg viewBox="0 0 24 24" width="50" height="50">281 <path d="M12 20s-7-4.5-7-10a5 5 0 019-3 5 5 0 019 3c0 5.5-7 10-7 10z" fill="none" stroke="#444" stroke-width="2"/>282 </svg>283 </div>284 </div>285 <div class="info">286 <div class="brand">Puma</div>287 <div class="title">Dwane IDP Running Shoes</div>288 <div class="pricing">289 <div>₹2000</div>290 <div class="old">₹3999</div>291 <div class="off">50% off</div>292 </div>293 </div>294 </div>295 296 <!-- Card 4 -->297 <div class="card">298 <div class="img-wrap">299 [IMG: Grey Puma Joy Run low-top running shoe]300 <div class="wish">301 <svg viewBox="0 0 24 24" width="50" height="50">302 <path d="M12 20s-7-4.5-7-10a5 5 0 019-3 5 5 0 019 3c0 5.5-7 10-7 10z" fill="none" stroke="#444" stroke-width="2"/>303 </svg>304 </div>305 </div>306 <div class="info">307 <div class="brand">Puma</div>308 <div class="title">Joy Run Low-Top Running Shoes</div>309 <div class="pricing">310 <div>₹2150</div>311 <div class="old">₹4299</div>312 <div class="off">50% off</div>313 </div>314 </div>315 </div>316 </div>317 318 <!-- Bottom horizontal previews -->319 <div class="bottom-strip">320 <div class="wide-img">[IMG: Black knit Puma shoe with white sole]</div>321 <div class="wide-img">[IMG: Navy Puma shoe with red stripe]</div>322 </div>323 </div>324 325</div>326</body>327</html>