GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Shopping - Cotton Halterneck</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #111;16 }17 /* Status bar */18 .status-bar {19 height: 120px;20 background: #D6D6D6;21 display: flex;22 align-items: center;23 padding: 0 36px;24 font-size: 38px;25 color: #fff;26 }27 .status-right {28 margin-left: auto;29 display: flex; align-items: center; gap: 24px;30 }31 /* Header / search row */32 .header {33 height: 160px;34 display: flex;35 align-items: center;36 padding: 0 36px;37 border-bottom: 1px solid #eee;38 }39 .title {40 font-weight: 700;41 font-size: 48px;42 margin: 0 24px;43 white-space: nowrap;44 overflow: hidden;45 text-overflow: ellipsis;46 max-width: 500px;47 }48 .header-icons {49 margin-left: auto;50 display: flex;51 align-items: center;52 gap: 36px;53 }54 .icon-btn svg { width: 48px; height: 48px; stroke: #111; fill: none; stroke-width: 3; }55 .hamburger svg { stroke-width: 8; }56 /* Filter bar */57 .filter-bar {58 height: 140px;59 display: flex;60 align-items: center;61 padding: 0 36px;62 gap: 36px;63 border-bottom: 1px solid #eee;64 }65 .filter-left, .filter-right {66 display: flex; align-items: center; gap: 24px;67 }68 .filter-right { margin-left: auto; }69 .filter-label {70 font-size: 36px; font-weight: 700;71 }72 .caret svg, .sliders svg { width: 36px; height: 36px; stroke: #111; fill: none; stroke-width: 3; }73 /* Tabs & count row */74 .tabs-row {75 height: 120px;76 display: flex;77 align-items: center;78 padding: 0 36px;79 border-bottom: 1px solid #eee;80 font-size: 32px;81 }82 .tabs { display: flex; gap: 24px; align-items: center; }83 .tab { color: #777; }84 .tab.active { color: #C62828; font-weight: 700; border-bottom: 3px solid #C62828; padding-bottom: 8px; }85 .items-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }86 .count { color: #333; font-size: 30px; }87 .view-toggle { display: flex; gap: 16px; }88 .view-toggle .grid svg, .view-toggle .list svg { width: 44px; height: 44px; stroke: #C62828; fill: none; stroke-width: 2.5; }89 /* Product grid */90 .grid {91 padding: 36px;92 display: grid;93 grid-template-columns: repeat(2, 1fr);94 gap: 36px;95 }96 .card {97 width: 486px;98 border-radius: 8px;99 }100 .img-wrap {101 width: 100%;102 height: 600px;103 background: #E0E0E0;104 border: 1px solid #BDBDBD;105 display: flex; align-items: center; justify-content: center;106 color: #757575; font-size: 30px; text-align: center;107 position: relative;108 }109 .heart-on-img {110 position: absolute; right: 18px; bottom: 18px;111 width: 60px; height: 60px; border-radius: 60px;112 background: #fff; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;113 }114 .heart-on-img svg { width: 34px; height: 34px; stroke: #111; fill: none; stroke-width: 3; }115 .card-title {116 margin-top: 24px;117 font-size: 34px;118 font-weight: 600;119 }120 .price {121 margin-top: 10px;122 font-size: 32px;123 color: #111;124 }125 .colors { margin-top: 16px; display: flex; align-items: center; gap: 16px; }126 .dot {127 width: 22px; height: 22px; border-radius: 50%;128 border: 2px solid #9E9E9E;129 background: #fff;130 }131 .dot.dark { background: #263238; border-color: #263238; }132 .dot.mid { background: #666; border-color: #666; }133 .dot.light { background: #bbb; border-color: #bbb; }134 .plus { font-size: 28px; color: #666; margin-left: 4px; }135 /* Bottom system bar */136 .system-bottom {137 position: absolute; left: 0; bottom: 0; width: 100%;138 height: 140px; background: #000;139 display: flex; align-items: center; justify-content: center;140 }141 .home-pill {142 width: 280px; height: 18px; border-radius: 18px; background: #e6e6e6;143 }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status bar -->150 <div class="status-bar">151 <div>3:30</div>152 <div class="status-right">153 <!-- signal/wifi/battery simplified -->154 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 9c4-4 14-4 18 0M6 12c3-3 9-3 12 0M9 15c2-2 6-2 8 0" stroke="#fff" fill="none" stroke-width="2"/></svg>155 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M2 8h20v8H2z" stroke="#fff" fill="none" stroke-width="2"/><rect x="20" y="10" width="2" height="4" fill="#fff"/></svg>156 </div>157 </div>158 159 <!-- Header -->160 <div class="header">161 <div class="icon-btn hamburger">162 <svg viewBox="0 0 24 24">163 <path d="M3 6h18M3 12h18M3 18h18" />164 </svg>165 </div>166 <div class="title">cotton haltern...</div>167 <div class="header-icons">168 <div class="icon-btn">169 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M21 21l-6-6"/></svg>170 </div>171 <div class="icon-btn">172 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7"/></svg>173 </div>174 <div class="icon-btn">175 <svg viewBox="0 0 24 24"><path d="M12 21s-7-5-7-10a7 7 0 0 1 14 0c0 5-7 10-7 10z"/></svg>176 </div>177 <div class="icon-btn">178 <svg viewBox="0 0 24 24"><path d="M6 7h12l-1 12H7L6 7z"/><path d="M9 7V5h6v2"/></svg>179 </div>180 </div>181 </div>182 183 <!-- Filter bar -->184 <div class="filter-bar">185 <div class="filter-left">186 <div class="filter-label">DEPARTMENT</div>187 <div class="caret">188 <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7"/></svg>189 </div>190 </div>191 <div class="filter-right">192 <div class="filter-label">FILTER & SORT</div>193 <div class="sliders">194 <svg viewBox="0 0 24 24">195 <path d="M4 6h16M4 12h16M4 18h16"/>196 <circle cx="8" cy="6" r="2"/>197 <circle cx="14" cy="12" r="2"/>198 <circle cx="18" cy="18" r="2"/>199 </svg>200 </div>201 </div>202 </div>203 204 <!-- Tabs / count row -->205 <div class="tabs-row">206 <div class="tabs">207 <div class="tab">Model</div>208 <div class="tab active">Product</div>209 </div>210 <div class="items-right">211 <div class="count">15 Items</div>212 <div class="view-toggle">213 <div class="list">214 <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>215 </div>216 <div class="grid">217 <svg viewBox="0 0 24 24">218 <rect x="3" y="3" width="8" height="8"/>219 <rect x="13" y="3" width="8" height="8"/>220 <rect x="3" y="13" width="8" height="8"/>221 <rect x="13" y="13" width="8" height="8"/>222 </svg>223 </div>224 </div>225 </div>226 </div>227 228 <!-- Product Grid -->229 <div class="grid">230 <!-- Card 1 -->231 <div class="card">232 <div class="img-wrap">233 [IMG: Halterneck dress - green leaf pattern]234 <div class="heart-on-img">235 <svg viewBox="0 0 24 24"><path d="M12 21s-7-5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-7 10-7 10z"/></svg>236 </div>237 </div>238 <div class="card-title">Cotton halterneck dress</div>239 <div class="price">Rs. 1,499.00</div>240 <div class="colors">241 <span class="dot dark"></span>242 <span class="dot mid"></span>243 <span class="dot light"></span>244 </div>245 </div>246 247 <!-- Card 2 -->248 <div class="card">249 <div class="img-wrap">250 [IMG: Frill-trimmed halterneck dress - floral]251 <div class="heart-on-img">252 <svg viewBox="0 0 24 24"><path d="M12 21s-7-5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-7 10-7 10z"/></svg>253 </div>254 </div>255 <div class="card-title">Frill-trimmed halterneck dre...</div>256 <div class="price">Rs. 1,999.00</div>257 <div class="colors">258 <span class="dot"></span>259 <span class="dot dark"></span>260 <span class="dot mid"></span>261 <span class="dot light"></span>262 <span class="plus">+1</span>263 </div>264 </div>265 266 <!-- Card 3 -->267 <div class="card">268 <div class="img-wrap">269 [IMG: Halterneck dress - pastel pink]270 <div class="heart-on-img">271 <svg viewBox="0 0 24 24"><path d="M12 21s-7-5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-7 10-7 10z"/></svg>272 </div>273 </div>274 <div class="card-title">Ruffled halterneck dress</div>275 <div class="price">Rs. 1,799.00</div>276 <div class="colors">277 <span class="dot mid"></span>278 <span class="dot light"></span>279 </div>280 </div>281 282 <!-- Card 4 -->283 <div class="card">284 <div class="img-wrap">285 [IMG: Halterneck dress - white with small print]286 <div class="heart-on-img">287 <svg viewBox="0 0 24 24"><path d="M12 21s-7-5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-7 10-7 10z"/></svg>288 </div>289 </div>290 <div class="card-title">Printed halterneck dress</div>291 <div class="price">Rs. 1,899.00</div>292 <div class="colors">293 <span class="dot"></span>294 <span class="dot dark"></span>295 </div>296 </div>297 </div>298 299 <!-- Bottom system area -->300 <div class="system-bottom">301 <div class="home-pill"></div>302 </div>303 304</div>305</body>306</html>