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>Party Wear - Grid</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;16 color: #111;17 }18 19 /* Top OS status simulation */20 .status-bar {21 height: 96px;22 background: #fff;23 padding: 0 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 box-sizing: border-box;28 }29 .status-left {30 font-size: 34px;31 font-weight: 600;32 color: #222;33 }34 .status-right {35 display: flex;36 gap: 18px;37 align-items: center;38 }39 .status-dot {40 width: 18px;41 height: 18px;42 background: #333;43 border-radius: 50%;44 opacity: 0.85;45 }46 .status-icon {47 width: 40px;48 height: 24px;49 border: 3px solid #333;50 border-radius: 4px;51 position: relative;52 }53 .status-icon::after {54 content: "";55 position: absolute;56 right: -8px;57 top: 6px;58 width: 6px;59 height: 12px;60 background: #333;61 border-radius: 1px;62 }63 64 /* Header */65 .header {66 height: 160px;67 padding: 0 40px;68 box-sizing: border-box;69 display: flex;70 align-items: center;71 justify-content: space-between;72 border-bottom: 1px solid #eee;73 background: #fff;74 }75 .header-left {76 display: flex;77 align-items: center;78 gap: 24px;79 }80 .title {81 font-size: 48px;82 letter-spacing: 1px;83 font-weight: 700;84 }85 .header-actions {86 display: flex;87 gap: 36px;88 align-items: center;89 }90 .icon-btn {91 width: 56px;92 height: 56px;93 }94 .icon {95 width: 56px;96 height: 56px;97 }98 99 /* Content grid */100 .content {101 position: absolute;102 top: 256px; /* 96 + 160 */103 left: 0;104 right: 0;105 bottom: 96px; /* leave space for gesture bar */106 overflow-y: auto;107 -webkit-overflow-scrolling: touch;108 padding: 36px 40px 24px;109 box-sizing: border-box;110 }111 .grid {112 display: grid;113 grid-template-columns: repeat(2, 1fr);114 column-gap: 36px;115 row-gap: 44px;116 }117 .card {118 width: 100%;119 }120 .img-box {121 width: 100%;122 height: 540px;123 background: #E0E0E0;124 border: 1px solid #BDBDBD;125 display: flex;126 align-items: center;127 justify-content: center;128 color: #757575;129 font-size: 30px;130 text-align: center;131 position: relative;132 }133 .badge {134 position: absolute;135 top: 0;136 left: 0;137 width: 100%;138 height: 64px;139 background: #3d3d3d;140 color: #fff;141 font-size: 28px;142 letter-spacing: 1px;143 display: flex;144 align-items: center;145 justify-content: center;146 font-weight: 700;147 }148 .price-row {149 margin-top: 22px;150 display: flex;151 align-items: center;152 justify-content: space-between;153 }154 .price {155 font-weight: 800;156 font-size: 42px;157 }158 .wish {159 width: 46px;160 height: 46px;161 }162 .desc {163 margin-top: 12px;164 font-size: 30px;165 line-height: 40px;166 color: #444;167 display: -webkit-box;168 -webkit-line-clamp: 2;169 -webkit-box-orient: vertical;170 overflow: hidden;171 }172 173 /* Bottom gesture bar */174 .gesture {175 position: absolute;176 left: 50%;177 transform: translateX(-50%);178 bottom: 28px;179 width: 200px;180 height: 14px;181 background: #CFCFCF;182 border-radius: 10px;183 }184</style>185</head>186<body>187<div id="render-target">188 <div class="status-bar">189 <div class="status-left">8:56</div>190 <div class="status-right">191 <div class="status-dot"></div>192 <div class="status-dot" style="opacity:0.5"></div>193 <div class="status-dot" style="opacity:0.3"></div>194 <div class="status-icon"></div>195 </div>196 </div>197 198 <div class="header">199 <div class="header-left">200 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">201 <path d="M15 18l-6-6 6-6"></path>202 </svg>203 <div class="title">PARTY WEAR</div>204 </div>205 <div class="header-actions">206 <svg class="icon-btn" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">207 <path d="M12 21s-8-7.5-8-12.5C4 6 6 4 8.5 4c1.7 0 3.1.9 3.5 2.2C12.4 4.9 13.8 4 15.5 4 18 4 20 6 20 8.5 20 13.5 12 21 12 21z"></path>208 </svg>209 <svg class="icon-btn" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">210 <circle cx="11" cy="11" r="7"></circle>211 <path d="M20 20l-3.5-3.5"></path>212 </svg>213 </div>214 </div>215 216 <div class="content">217 <div class="grid">218 <!-- Card 1 -->219 <div class="card">220 <div class="img-box">[IMG: Fashion outfit in dark scene]</div>221 <div class="price-row">222 <div class="price">£19.00</div>223 <svg class="wish" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">224 <path d="M12 21s-8-7.5-8-12.5C4 6 6 4 8.5 4c1.7 0 3.1.9 3.5 2.2C12.4 4.9 13.8 4 15.5 4 18 4 20 6 20 8.5 20 13.5 12 21 12 21z"></path>225 </svg>226 </div>227 <div class="desc">ASOS DESIGN hotfix bralet in black</div>228 </div>229 230 <!-- Card 2 -->231 <div class="card">232 <div class="img-box">[IMG: Silver metallic skirt]</div>233 <div class="price-row">234 <div class="price">£48.00</div>235 <svg class="wish" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">236 <path d="M12 21s-8-7.5-8-12.5C4 6 6 4 8.5 4c1.7 0 3.1.9 3.5 2.2C12.4 4.9 13.8 4 15.5 4 18 4 20 6 20 8.5 20 13.5 12 21 12 21z"></path>237 </svg>238 </div>239 <div class="desc">4th & Reckless metallic maxi skirt in silver</div>240 </div>241 242 <!-- Card 3 -->243 <div class="card">244 <div class="img-box">245 <div class="badge">SELLING FAST</div>246 [IMG: Black heels with flower corsage]247 </div>248 <div class="price-row">249 <div class="price">£30.00</div>250 <svg class="wish" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">251 <path d="M12 21s-8-7.5-8-12.5C4 6 6 4 8.5 4c1.7 0 3.1.9 3.5 2.2C12.4 4.9 13.8 4 15.5 4 18 4 20 6 20 8.5 20 13.5 12 21 12 21z"></path>252 </svg>253 </div>254 <div class="desc">ASOS DESIGN Nahlia corsage barely there heeled...</div>255 </div>256 257 <!-- Card 4 -->258 <div class="card">259 <div class="img-box">[IMG: Column maxi skirt with high split]</div>260 <div class="price-row">261 <div class="price">£26.00</div>262 <svg class="wish" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">263 <path d="M12 21s-8-7.5-8-12.5C4 6 6 4 8.5 4c1.7 0 3.1.9 3.5 2.2C12.4 4.9 13.8 4 15.5 4 18 4 20 6 20 8.5 20 13.5 12 21 12 21z"></path>264 </svg>265 </div>266 <div class="desc">ASOS DESIGN column maxi skirt with lace split detail in ...</div>267 </div>268 269 <!-- Card 5 -->270 <div class="card">271 <div class="img-box">[IMG: Silver short-sleeve top close-up]</div>272 <div class="price-row">273 <div class="price">£—</div>274 <svg class="wish" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">275 <path d="M12 21s-8-7.5-8-12.5C4 6 6 4 8.5 4c1.7 0 3.1.9 3.5 2.2C12.4 4.9 13.8 4 15.5 4 18 4 20 6 20 8.5 20 13.5 12 21 12 21z"></path>276 </svg>277 </div>278 <div class="desc">Metallic top with notch neckline</div>279 </div>280 281 <!-- Card 6 -->282 <div class="card">283 <div class="img-box">[IMG: Silver sparkle wrap top]</div>284 <div class="price-row">285 <div class="price">£—</div>286 <svg class="wish" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">287 <path d="M12 21s-8-7.5-8-12.5C4 6 6 4 8.5 4c1.7 0 3.1.9 3.5 2.2C12.4 4.9 13.8 4 15.5 4 18 4 20 6 20 8.5 20 13.5 12 21 12 21z"></path>288 </svg>289 </div>290 <div class="desc">ASOS DESIGN glitter wrap top</div>291 </div>292 </div>293 </div>294 295 <div class="gesture"></div>296</div>297</body>298</html>