GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Party Wear - Catalog Mock</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8 /* Reset */9 html, body { margin: 0; padding: 0; }10 body { background: transparent; }11 12 /* Render target */13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #ffffff;19 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;20 color: #111111;21 }22 * { box-sizing: border-box; }23 24 /* Status bar */25 .status-bar {26 height: 90px;27 padding: 0 28px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 font-size: 36px;32 color: #1e1e1e;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 18px;38 }39 .dot {40 width: 22px; height: 22px;41 border-radius: 50%;42 background: #3b3b3b;43 opacity: 0.9;44 }45 .wifi svg, .battery svg {46 display: block;47 }48 49 /* App bar */50 .app-bar {51 height: 160px;52 padding: 0 36px;53 border-bottom: 1px solid #eeeeee;54 display: flex;55 align-items: center;56 gap: 18px;57 }58 .app-title {59 font-size: 44px;60 font-weight: 700;61 letter-spacing: 1px;62 }63 .app-actions {64 margin-left: auto;65 display: flex;66 align-items: center;67 gap: 28px;68 }69 .icon-btn {70 width: 56px; height: 56px;71 display: grid;72 place-items: center;73 cursor: default;74 }75 .icon {76 width: 40px; height: 40px;77 }78 79 /* Content area (scrollable) */80 .content {81 position: absolute;82 top: 250px; /* 90 + 160 */83 left: 0; right: 0;84 bottom: 110px; /* room for gesture bar */85 overflow-y: auto;86 padding: 40px 60px 140px;87 }88 .grid {89 display: grid;90 grid-template-columns: 1fr 1fr;91 grid-column-gap: 60px;92 grid-row-gap: 60px;93 }94 95 .card {96 display: flex;97 flex-direction: column;98 }99 100 .img {101 width: 100%;102 height: 620px;103 background: #E0E0E0;104 border: 1px solid #BDBDBD;105 display: flex;106 align-items: center;107 justify-content: center;108 color: #757575;109 font-size: 28px;110 text-align: center;111 position: relative;112 }113 .badge-top {114 position: absolute;115 top: 18px;116 left: 18px;117 background: #3a3a3a;118 color: #ffffff;119 padding: 10px 22px;120 font-size: 26px;121 letter-spacing: 2px;122 font-weight: 700;123 text-transform: uppercase;124 }125 .badge-bottom {126 position: absolute;127 bottom: 0;128 left: 0; right: 0;129 background: #f1f1f1;130 color: #1e1e1e;131 text-align: center;132 padding: 12px 16px;133 font-size: 26px;134 letter-spacing: 2px;135 font-weight: 700;136 }137 138 .price-row {139 display: flex;140 align-items: center;141 justify-content: space-between;142 margin-top: 22px;143 }144 .price {145 font-size: 46px;146 font-weight: 800;147 }148 .title {149 margin-top: 14px;150 font-size: 32px;151 line-height: 1.35;152 color: #333333;153 }154 155 /* Gesture bar */156 .gesture-bar {157 position: absolute;158 left: 0;159 right: 0;160 bottom: 26px;161 display: flex;162 justify-content: center;163 align-items: center;164 }165 .gesture-pill {166 width: 320px;167 height: 14px;168 border-radius: 10px;169 background: #bdbdbd;170 opacity: 0.9;171 }172</style>173</head>174<body>175<div id="render-target">176 177 <!-- Status Bar -->178 <div class="status-bar">179 <div>8:56</div>180 <div class="status-icons">181 <div class="dot"></div>182 <div class="dot" style="background:#bbbbbb;"></div>183 <div class="dot" style="background:#4a4a4a;"></div>184 <div class="dot" style="background:#000000;"></div>185 <div class="dot" style="background:#000000; opacity:0.6;"></div>186 <div class="wifi">187 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">188 <path d="M5 12a9 9 0 0 1 14 0"></path>189 <path d="M8.5 15.5a5 5 0 0 1 7 0"></path>190 <path d="M12 19h.01"></path>191 </svg>192 </div>193 <div class="battery">194 <svg class="icon" viewBox="0 0 28 18" fill="none" stroke="#222" stroke-width="2">195 <rect x="1" y="3" width="22" height="12" rx="2"></rect>196 <rect x="3" y="5" width="14" height="8" fill="#222"></rect>197 <rect x="24" y="7" width="3" height="6" rx="1" fill="#222"></rect>198 </svg>199 </div>200 </div>201 </div>202 203 <!-- App Bar -->204 <div class="app-bar">205 <div class="icon-btn" aria-label="Back">206 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">207 <path d="M15 18l-6-6 6-6"></path>208 </svg>209 </div>210 <div class="app-title">PARTY WEAR</div>211 <div class="app-actions">212 <div class="icon-btn" aria-label="Wishlist">213 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">214 <path d="M20.8 8.6c0 5.4-8.8 10.3-8.8 10.3S3.2 14 3.2 8.6c0-2.6 2-4.6 4.5-4.6 1.7 0 3.2.9 4.3 2.3 1.1-1.4 2.6-2.3 4.3-2.3 2.5 0 4.5 2.1 4.5 4.6z"></path>215 </svg>216 </div>217 <div class="icon-btn" aria-label="Search">218 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">219 <circle cx="11" cy="11" r="7"></circle>220 <path d="M20 20l-3.5-3.5"></path>221 </svg>222 </div>223 </div>224 </div>225 226 <!-- Content -->227 <div class="content">228 <div class="grid">229 230 <!-- Card 1 -->231 <div class="card">232 <div class="img">[IMG: Metallic crop top in silver]</div>233 <div class="price-row">234 <div class="price">£40.00</div>235 <div class="icon-btn" aria-label="Favorite">236 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">237 <path d="M20.8 8.6c0 5.4-8.8 10.3-8.8 10.3S3.2 14 3.2 8.6c0-2.6 2-4.6 4.5-4.6 1.7 0 3.2.9 4.3 2.3 1.1-1.4 2.6-2.3 4.3-2.3 2.5 0 4.5 2.1 4.5 4.6z"></path>238 </svg>239 </div>240 </div>241 <div class="title">ASOS DESIGN metallic crop top in silver</div>242 </div>243 244 <!-- Card 2 -->245 <div class="card">246 <div class="img">[IMG: Sequin wrap top in silver]</div>247 <div class="price-row">248 <div class="price">£42.00</div>249 <div class="icon-btn" aria-label="Favorite">250 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">251 <path d="M20.8 8.6c0 5.4-8.8 10.3-8.8 10.3S3.2 14 3.2 8.6c0-2.6 2-4.6 4.5-4.6 1.7 0 3.2.9 4.3 2.3 1.1-1.4 2.6-2.3 4.3-2.3 2.5 0 4.5 2.1 4.5 4.6z"></path>252 </svg>253 </div>254 </div>255 <div class="title">Pieces sequin wrap top in silver</div>256 </div>257 258 <!-- Card 3 -->259 <div class="card">260 <div class="img">261 [IMG: High waisted leather look trousers - silver]262 <div class="badge-bottom">MIX & MATCH</div>263 </div>264 <div class="price-row">265 <div class="price">£48.00</div>266 <div class="icon-btn" aria-label="Favorite">267 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">268 <path d="M20.8 8.6c0 5.4-8.8 10.3-8.8 10.3S3.2 14 3.2 8.6c0-2.6 2-4.6 4.5-4.6 1.7 0 3.2.9 4.3 2.3 1.1-1.4 2.6-2.3 4.3-2.3 2.5 0 4.5 2.1 4.5 4.6z"></path>269 </svg>270 </div>271 </div>272 <div class="title">Extro & Vert high waisted leather look trousers co-ord</div>273 </div>274 275 <!-- Card 4 -->276 <div class="card">277 <div class="img">278 <div class="badge-top">SELLING FAST</div>279 [IMG: Black mini dress with diamante fringe]280 </div>281 <div class="price-row">282 <div class="price">£72.00</div>283 <div class="icon-btn" aria-label="Favorite">284 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">285 <path d="M20.8 8.6c0 5.4-8.8 10.3-8.8 10.3S3.2 14 3.2 8.6c0-2.6 2-4.6 4.5-4.6 1.7 0 3.2.9 4.3 2.3 1.1-1.4 2.6-2.3 4.3-2.3 2.5 0 4.5 2.1 4.5 4.6z"></path>286 </svg>287 </div>288 </div>289 <div class="title">ASOS DESIGN diamante fringe mesh mini dress in black</div>290 </div>291 292 <!-- Card 5 -->293 <div class="card">294 <div class="img">[IMG: Off-shoulder silver maxi dress]</div>295 <div class="price-row">296 <div class="price">£95.00</div>297 <div class="icon-btn" aria-label="Favorite">298 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">299 <path d="M20.8 8.6c0 5.4-8.8 10.3-8.8 10.3S3.2 14 3.2 8.6c0-2.6 2-4.6 4.5-4.6 1.7 0 3.2.9 4.3 2.3 1.1-1.4 2.6-2.3 4.3-2.3 2.5 0 4.5 2.1 4.5 4.6z"></path>300 </svg>301 </div>302 </div>303 <div class="title">ASOS EDITION off-shoulder metallic maxi dress in silver</div>304 </div>305 306 <!-- Card 6 -->307 <div class="card">308 <div class="img">[IMG: Chocolate satin slip maxi dress]</div>309 <div class="price-row">310 <div class="price">£68.00</div>311 <div class="icon-btn" aria-label="Favorite">312 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">313 <path d="M20.8 8.6c0 5.4-8.8 10.3-8.8 10.3S3.2 14 3.2 8.6c0-2.6 2-4.6 4.5-4.6 1.7 0 3.2.9 4.3 2.3 1.1-1.4 2.6-2.3 4.3-2.3 2.5 0 4.5 2.1 4.5 4.6z"></path>314 </svg>315 </div>316 </div>317 <div class="title">Satin cowl neck slip maxi dress in chocolate brown</div>318 </div>319 320 </div>321 </div>322 323 <!-- Gesture bar -->324 <div class="gesture-bar">325 <div class="gesture-pill"></div>326 </div>327 328</div>329</body>330</html>