GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Chalsea boots - Category</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 height: 120px;18 background: #D3D3D3;19 color: #333;20 display: flex;21 align-items: center;22 justify-content: space-between;23 padding: 0 32px;24 font-size: 42px;25 }26 .status-left { display: flex; align-items: center; gap: 16px; }27 .status-right { display: flex; align-items: center; gap: 22px; }28 .sb-icon {29 width: 42px; height: 42px; border-radius: 50%; border: 2px solid #666;30 }31 .battery {32 display: flex; align-items: center; gap: 10px; font-size: 40px;33 }34 .battery .pct { font-weight: bold; }35 36 /* Top App Bar */37 .app-bar {38 position: relative;39 height: 160px;40 display: flex;41 align-items: center;42 padding: 0 34px;43 border-bottom: 1px solid #eee;44 background: #fff;45 }46 .app-left, .app-right { display: flex; align-items: center; }47 .app-left { gap: 26px; }48 .app-right { margin-left: auto; gap: 36px; }49 .app-title {50 position: absolute;51 left: 50%;52 transform: translateX(-50%);53 font-size: 60px;54 font-weight: 700;55 color: #111;56 letter-spacing: 1px;57 }58 .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }59 .icon-btn svg { width: 64px; height: 64px; stroke: #111; fill: none; stroke-width: 4; }60 61 /* mini filters row */62 .mini-filters {63 display: flex;64 justify-content: space-between;65 padding: 18px 50px 8px 50px;66 color: #777;67 font-size: 30px;68 }69 .color-dots { display: flex; gap: 18px; }70 .dot {71 width: 26px; height: 26px; border-radius: 50%;72 background: #000;73 border: 2px solid #bbb;74 }75 .dot.grey { background: #8b8b8b; }76 .dot.tan { background: #a59a88; }77 78 /* Product grid */79 .grid {80 display: grid;81 grid-template-columns: 1fr 1fr;82 gap: 34px 34px;83 padding: 22px 34px 40px 34px;84 }85 .product-card {86 background: #fff;87 }88 .img-wrap {89 position: relative;90 height: 640px;91 background: #E0E0E0;92 border: 1px solid #BDBDBD;93 display: flex;94 align-items: center;95 justify-content: center;96 color: #757575;97 font-size: 40px;98 text-align: center;99 }100 .fav-circle {101 position: absolute;102 right: 32px;103 bottom: 28px;104 width: 88px; height: 88px;105 border: 3px solid #111;106 border-radius: 50%;107 background: #fff;108 display: flex; align-items: center; justify-content: center;109 }110 .fav-circle svg { width: 54px; height: 54px; stroke: #111; fill: none; stroke-width: 5; }111 112 .prod-title {113 font-size: 42px;114 color: #222;115 margin-top: 18px;116 }117 .price {118 font-size: 40px;119 color: #111;120 margin-top: 14px;121 }122 .prod-dots {123 display: flex;124 gap: 22px;125 margin-top: 22px;126 padding-bottom: 8px;127 }128 .prod-dots .dot { width: 28px; height: 28px; }129 130 /* bottom home indicator */131 .home-indicator {132 position: absolute;133 bottom: 24px;134 left: 50%;135 transform: translateX(-50%);136 width: 360px;137 height: 12px;138 background: #dcdcdc;139 border-radius: 10px;140 }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status bar -->147 <div class="status-bar">148 <div class="status-left">149 <div>1:46</div>150 <div class="sb-icon"></div>151 <div class="sb-icon"></div>152 <div class="sb-icon"></div>153 <div class="sb-icon"></div>154 </div>155 <div class="status-right">156 <div class="battery">157 <svg width="38" height="38" viewBox="0 0 24 24">158 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#333" fill="none" stroke-width="2"></rect>159 <rect x="20" y="9" width="2" height="6" fill="#333"></rect>160 </svg>161 <span class="pct">100%</span>162 </div>163 </div>164 </div>165 166 <!-- Top App Bar -->167 <div class="app-bar">168 <div class="app-left">169 <div class="icon-btn">170 <svg viewBox="0 0 24 24">171 <line x1="3" y1="6" x2="21" y2="6"></line>172 <line x1="3" y1="12" x2="21" y2="12"></line>173 <line x1="3" y1="18" x2="21" y2="18"></line>174 </svg>175 </div>176 </div>177 <div class="app-title">Chalsea boots</div>178 <div class="app-right">179 <div class="icon-btn">180 <svg viewBox="0 0 24 24">181 <circle cx="11" cy="11" r="7"></circle>182 <line x1="16.5" y1="16.5" x2="21.5" y2="21.5"></line>183 </svg>184 </div>185 <div class="icon-btn">186 <svg viewBox="0 0 24 24">187 <circle cx="12" cy="9" r="4"></circle>188 <path d="M4 22c0-4.5 4-7 8-7s8 2.5 8 7" ></path>189 </svg>190 </div>191 <div class="icon-btn">192 <svg viewBox="0 0 24 24">193 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"></path>194 </svg>195 </div>196 <div class="icon-btn">197 <svg viewBox="0 0 24 24">198 <rect x="5" y="8" width="14" height="12" rx="2"></rect>199 <path d="M8 8V6c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v2"></path>200 </svg>201 </div>202 </div>203 </div>204 205 <!-- Mini filters / color dots row -->206 <div class="mini-filters">207 <div class="color-dots">208 <div class="dot"></div>209 <div class="dot grey"></div>210 </div>211 <div class="color-dots">212 <div class="dot"></div>213 <div class="dot tan"></div>214 </div>215 </div>216 217 <!-- Product Grid -->218 <div class="grid">219 220 <!-- Product 1 -->221 <div class="product-card">222 <div class="img-wrap">223 [IMG: Suede Chelsea Boots - pair]224 <div class="fav-circle">225 <svg viewBox="0 0 24 24">226 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"></path>227 </svg>228 </div>229 </div>230 <div class="prod-title">Chelsea Boots</div>231 <div class="price">$67.99</div>232 <div class="prod-dots">233 <div class="dot"></div>234 <div class="dot"></div>235 <div class="dot grey"></div>236 </div>237 </div>238 239 <!-- Product 2 -->240 <div class="product-card">241 <div class="img-wrap">242 [IMG: Chunky Sole Chelsea Boot]243 <div class="fav-circle">244 <svg viewBox="0 0 24 24">245 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"></path>246 </svg>247 </div>248 </div>249 <div class="prod-title">Chelsea Boots</div>250 <div class="price">$39.99</div>251 <div class="prod-dots">252 <div class="dot"></div>253 </div>254 </div>255 256 <!-- Product 3 -->257 <div class="product-card">258 <div class="img-wrap">259 [IMG: Smooth Leather Chelsea Boot]260 <div class="fav-circle">261 <svg viewBox="0 0 24 24">262 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"></path>263 </svg>264 </div>265 </div>266 <div class="prod-title">Chelsea Boots</div>267 <div class="price">$—</div>268 <div class="prod-dots">269 <div class="dot"></div>270 <div class="dot grey"></div>271 </div>272 </div>273 274 <!-- Product 4 -->275 <div class="product-card">276 <div class="img-wrap">277 [IMG: Platform Chelsea Boot]278 <div class="fav-circle">279 <svg viewBox="0 0 24 24">280 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"></path>281 </svg>282 </div>283 </div>284 <div class="prod-title">Chelsea Boots</div>285 <div class="price">$—</div>286 <div class="prod-dots">287 <div class="dot"></div>288 </div>289 </div>290 291 </div>292 293 <div class="home-indicator"></div>294</div>295</body>296</html>