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>Product Listing UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 34px;16 box-shadow: 0 8px 24px rgba(0,0,0,0.08);17 color: #111;18 }19 20 /* Top system/status bar */21 .status-bar {22 position: absolute;23 top: 0; left: 0; right: 0;24 height: 120px;25 background: #cfcfcf;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 40px;30 color: #ffffff;31 font-weight: 600;32 font-size: 42px;33 letter-spacing: 0.5px;34 }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 26px;39 }40 .status-dot {41 width: 14px; height: 14px; border-radius: 50%; background: #ffffff; opacity: 0.9;42 }43 .status-icon {44 width: 40px; height: 40px; opacity: 0.9;45 }46 47 /* Header */48 .header {49 position: absolute;50 top: 120px; left: 0; right: 0;51 height: 160px;52 background: #ffffff;53 display: flex;54 align-items: center;55 justify-content: space-between;56 padding: 0 40px;57 border-bottom: 1px solid #eee;58 }59 .icon-btn {60 width: 72px; height: 72px;61 display: flex; align-items: center; justify-content: center;62 }63 .icon {64 width: 48px; height: 48px;65 }66 67 /* Content */68 .content {69 position: absolute;70 top: 280px; left: 0; right: 0;71 padding: 0 40px;72 }73 .grid-3 {74 display: flex;75 gap: 40px;76 }77 .grid-2 {78 display: flex;79 gap: 40px;80 }81 .card {82 width: 300px;83 }84 .card-wide {85 width: calc((100% - 40px) / 2);86 max-width: 500px;87 min-width: 440px;88 }89 .img-box {90 position: relative;91 width: 100%;92 height: 430px;93 background: #E0E0E0;94 border: 1px solid #BDBDBD;95 display: flex;96 align-items: center;97 justify-content: center;98 color: #757575;99 font-size: 28px;100 text-align: center;101 }102 .img-box.small {103 height: 420px;104 }105 .fav-badge {106 position: absolute;107 right: 18px;108 bottom: 18px;109 width: 68px;110 height: 68px;111 border-radius: 50%;112 background: #ffffff;113 border: 1px solid #D0D0D0;114 display: flex;115 align-items: center;116 justify-content: center;117 box-shadow: 0 2px 6px rgba(0,0,0,0.06);118 }119 .title {120 font-size: 36px;121 font-weight: 500;122 margin-top: 26px;123 line-height: 1.25;124 }125 .price {126 font-size: 34px;127 margin-top: 10px;128 color: #111;129 }130 131 .section-title {132 font-size: 48px;133 font-weight: 700;134 margin: 70px 0 30px;135 }136 137 /* Bottom add-to-cart bar */138 .add-bar {139 position: absolute;140 left: 0; right: 0;141 bottom: 80px;142 height: 220px;143 background: #ffffff;144 border-top: 1px solid #eee;145 padding: 40px;146 display: flex;147 align-items: center;148 gap: 40px;149 }150 .select-box {151 flex: 1;152 max-width: 520px;153 height: 120px;154 border: 2px solid #DADADA;155 border-radius: 14px;156 display: flex;157 align-items: center;158 justify-content: space-between;159 padding: 0 30px;160 font-size: 36px;161 color: #666;162 }163 .add-btn {164 flex: 1;165 max-width: 440px;166 height: 120px;167 background: #111111;168 color: #ffffff;169 border-radius: 14px;170 display: flex;171 align-items: center;172 justify-content: center;173 gap: 18px;174 font-size: 38px;175 font-weight: 600;176 }177 .add-btn .icon { width: 40px; height: 40px; }178 179 /* System navigation bar */180 .nav-bar {181 position: absolute;182 left: 0; right: 0; bottom: 0;183 height: 80px;184 background: #000000;185 display: flex; align-items: center; justify-content: center;186 }187 .gesture-pill {188 width: 180px; height: 12px; border-radius: 8px; background: rgba(255,255,255,0.85);189 }190</style>191</head>192<body>193<div id="render-target">194 195 <!-- Status bar -->196 <div class="status-bar">197 <div>3:52</div>198 <div class="status-icons">199 <div class="status-dot"></div>200 <svg class="status-icon" viewBox="0 0 24 24"><path d="M2 12l6-6 6 6v6H2z" fill="#ffffff" opacity="0.85"/></svg>201 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 8h18v8H3z" fill="#ffffff" opacity="0.85"/></svg>202 </div>203 </div>204 205 <!-- Header -->206 <div class="header">207 <div class="icon-btn">208 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">209 <path d="M15 18l-6-6 6-6"/>210 </svg>211 </div>212 <div class="icon-btn">213 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">214 <path d="M7 9h10v10H7z"/>215 <path d="M9 9c0-2 1.5-3 3-3s3 1 3 3" />216 </svg>217 </div>218 </div>219 220 <!-- Content -->221 <div class="content">222 223 <!-- First product row (3 columns) -->224 <div class="grid-3">225 <div class="card">226 <div class="img-box">227 [IMG: Slim Fit Pants - black pants]228 <div class="fav-badge">229 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#333" stroke-width="1.8">230 <path d="M12 21s-6-5.02-8.4-8.06C2.1 10.5 2.6 7.6 4.9 6.3c1.9-1.1 4.4-.5 5.6 1 1.2-1.5 3.7-2.1 5.6-1 2.3 1.3 2.8 4.2 1.3 6.64C18 15.8 12 21 12 21z"/>231 </svg>232 </div>233 </div>234 <div class="title">Slim Fit Pants</div>235 <div class="price">$34.99</div>236 </div>237 238 <div class="card">239 <div class="img-box">240 [IMG: Leather Belt - black]241 <div class="fav-badge">242 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#333" stroke-width="1.8">243 <path d="M12 21s-6-5.02-8.4-8.06C2.1 10.5 2.6 7.6 4.9 6.3c1.9-1.1 4.4-.5 5.6 1 1.2-1.5 3.7-2.1 5.6-1 2.3 1.3 2.8 4.2 1.3 6.64C18 15.8 12 21 12 21z"/>244 </svg>245 </div>246 </div>247 <div class="title">Leather Belt</div>248 <div class="price">$26.99</div>249 </div>250 251 <div class="card">252 <div class="img-box">253 [IMG: Slim Fit Fine-knit Sweater]254 <div class="fav-badge">255 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#333" stroke-width="1.8">256 <path d="M12 21s-6-5.02-8.4-8.06C2.1 10.5 2.6 7.6 4.9 6.3c1.9-1.1 4.4-.5 5.6 1 1.2-1.5 3.7-2.1 5.6-1 2.3 1.3 2.8 4.2 1.3 6.64C18 15.8 12 21 12 21z"/>257 </svg>258 </div>259 </div>260 <div class="title">Slim Fit Fine-knit Sweater</div>261 <div class="price">$31.99</div>262 </div>263 </div>264 265 <!-- Others also bought -->266 <div class="section-title">Others also bought</div>267 268 <div class="grid-2">269 <div class="card-wide">270 <div class="img-box small">271 [IMG: Slim Fit Stretch Shirt - black]272 <div class="fav-badge">273 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#333" stroke-width="1.8">274 <path d="M12 21s-6-5.02-8.4-8.06C2.1 10.5 2.6 7.6 4.9 6.3c1.9-1.1 4.4-.5 5.6 1 1.2-1.5 3.7-2.1 5.6-1 2.3 1.3 2.8 4.2 1.3 6.64C18 15.8 12 21 12 21z"/>275 </svg>276 </div>277 </div>278 <div class="title">Slim Fit Stretch Shirt</div>279 <div class="price">$31.99</div>280 </div>281 282 <div class="card-wide">283 <div class="img-box small">284 [IMG: Skinny Fit Suit Pants - black]285 <div class="fav-badge">286 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#333" stroke-width="1.8">287 <path d="M12 21s-6-5.02-8.4-8.06C2.1 10.5 2.6 7.6 4.9 6.3c1.9-1.1 4.4-.5 5.6 1 1.2-1.5 3.7-2.1 5.6-1 2.3 1.3 2.8 4.2 1.3 6.64C18 15.8 12 21 12 21z"/>288 </svg>289 </div>290 </div>291 <div class="title">Skinny Fit Suit Pants</div>292 <div class="price">$44.99</div>293 </div>294 </div>295 </div>296 297 <!-- Add to cart bar -->298 <div class="add-bar">299 <div class="select-box">300 <span>Select size</span>301 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">302 <path d="M6 9l6 6 6-6"/>303 </svg>304 </div>305 <div class="add-btn">306 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">307 <path d="M7 9h10v10H7z"/>308 <path d="M9 9c0-2 1.5-3 3-3s3 1 3 3"/>309 </svg>310 <span>Add</span>311 </div>312 </div>313 314 <!-- System navigation gesture bar -->315 <div class="nav-bar">316 <div class="gesture-pill"></div>317 </div>318</div>319</body>320</html>