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>Formal Shirts - Catalog</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF;13 font-family: Arial, Helvetica, sans-serif;14 color: #222;15 }16 /* Status bar */17 .status-bar {18 height: 110px;19 background: #CFCFCF;20 display: flex;21 align-items: center;22 padding: 0 40px;23 box-sizing: border-box;24 font-weight: 600;25 color: #fff;26 font-size: 38px;27 }28 .status-right {29 margin-left: auto;30 display: flex; gap: 24px; align-items: center;31 }32 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; }33 .bar-pill { width: 100px; height: 20px; border-radius: 10px; background: #fff; opacity: 0.7; }34 35 /* Header */36 .header {37 height: 160px;38 display: flex; align-items: center;39 padding: 0 40px;40 box-sizing: border-box;41 border-bottom: 1px solid #eee;42 }43 .header-title {44 font-size: 56px; font-weight: 700; margin-left: 24px;45 }46 .header-icons {47 margin-left: auto; display: flex; gap: 44px; align-items: center;48 }49 .icon { width: 50px; height: 50px; }50 .hamburger { width: 60px; height: 40px; }51 52 /* Filters row */53 .filters-row {54 display: flex; align-items: center; justify-content: space-between;55 padding: 30px 40px;56 box-sizing: border-box;57 border-bottom: 1px solid #eee;58 }59 .filter-item {60 font-size: 34px; font-weight: 800; letter-spacing: 0.5px;61 }62 .filter-group { display: flex; align-items: center; gap: 18px; }63 .down-icon { width: 30px; height: 30px; }64 .settings-icon { width: 60px; height: 60px; }65 66 /* Tabs and count row */67 .tabs-row {68 display: flex; align-items: center; justify-content: space-between;69 padding: 26px 40px 18px;70 box-sizing: border-box;71 border-bottom: 1px solid #eee;72 }73 .tabs { display: flex; gap: 28px; font-size: 30px; }74 .tab { color: #777; }75 .tab.active { color: #E60023; border-bottom: 3px solid #E60023; padding-bottom: 6px; }76 .items-view { display: flex; align-items: center; gap: 24px; font-size: 30px; color: #777; }77 .view-icon { width: 44px; height: 44px; border: 2px solid #777; border-radius: 6px; }78 .view-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 44px; height: 44px; }79 .view-grid div { border: 2px solid #E60023; border-radius: 4px; }80 81 /* Product grid */82 .products {83 padding: 36px;84 box-sizing: border-box;85 display: grid;86 grid-template-columns: repeat(2, 1fr);87 gap: 36px;88 }89 .product-card { width: 504px; }90 .product-image {91 width: 100%; height: 640px; background: #E0E0E0;92 border: 1px solid #BDBDBD;93 display: flex; justify-content: center; align-items: center;94 color: #757575; font-size: 30px; position: relative;95 }96 .price-tag {97 position: absolute; left: 20px; bottom: 20px;98 background: #fff; color: #222;99 padding: 14px 18px; font-size: 34px; font-weight: 700;100 border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);101 }102 .fav-btn {103 position: absolute; right: 20px; bottom: 20px;104 width: 60px; height: 60px;105 }106 .product-name {107 margin-top: 22px; font-size: 34px; font-weight: 600;108 }109 .price-row {110 margin-top: 12px; display: flex; gap: 18px; align-items: baseline;111 }112 .sale-price { color: #E60023; font-size: 38px; font-weight: 800; }113 .orig-price { color: #777; text-decoration: line-through; font-size: 32px; }114 .color-dots { margin-top: 18px; display: flex; gap: 18px; align-items: center; }115 .dot-color {116 width: 24px; height: 24px; border-radius: 50%;117 border: 2px solid #bbb; box-sizing: border-box;118 }119 .dot-black { background: #111; border-color: #111; }120 .dot-gray { background: #777; border-color: #777; }121 .dot-white { background: #fff; }122 .dot-plus { font-size: 28px; color: #777; }123 124 /* Bottom gesture bar */125 .gesture-bar {126 position: absolute; left: 0; right: 0; bottom: 0;127 height: 110px; background: #000;128 display: flex; justify-content: center; align-items: center;129 }130 .gesture-pill {131 width: 240px; height: 16px; background: #ddd; border-radius: 10px;132 }133</style>134</head>135<body>136<div id="render-target">137 <!-- Status bar -->138 <div class="status-bar">139 3:50140 <div class="status-right">141 <div class="dot"></div>142 <div class="bar-pill"></div>143 <div class="dot"></div>144 <div class="dot"></div>145 </div>146 </div>147 148 <!-- Header -->149 <div class="header">150 <!-- Hamburger icon -->151 <svg class="hamburger" viewBox="0 0 24 16">152 <rect x="0" y="0" width="24" height="2" fill="#222"></rect>153 <rect x="0" y="7" width="24" height="2" fill="#222"></rect>154 <rect x="0" y="14" width="24" height="2" fill="#222"></rect>155 </svg>156 <div class="header-title">formal shirts</div>157 <div class="header-icons">158 <!-- Search -->159 <svg class="icon" viewBox="0 0 24 24">160 <circle cx="10" cy="10" r="7" fill="none" stroke="#222" stroke-width="2"></circle>161 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#222" stroke-width="2"></line>162 </svg>163 <!-- User -->164 <svg class="icon" viewBox="0 0 24 24">165 <circle cx="12" cy="8" r="4" fill="none" stroke="#222" stroke-width="2"></circle>166 <path d="M4 22c0-4.4 4-7 8-7s8 2.6 8 7" fill="none" stroke="#222" stroke-width="2"></path>167 </svg>168 <!-- Heart -->169 <svg class="icon" viewBox="0 0 24 24">170 <path d="M12 21s-7-4.6-9-8.6C1.2 10 2.5 7 5.6 7c2 0 3.3 1.3 4.4 2.6C11.1 8.3 12.4 7 14.4 7c3.1 0 4.4 3 2.6 5.4C19 16.4 12 21 12 21z" fill="none" stroke="#222" stroke-width="2" />171 </svg>172 <!-- Bag -->173 <svg class="icon" viewBox="0 0 24 24">174 <path d="M6 8h12l-1 13H7L6 8z" fill="none" stroke="#222" stroke-width="2"></path>175 <path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#222" stroke-width="2"></path>176 </svg>177 </div>178 </div>179 180 <!-- Filters row -->181 <div class="filters-row">182 <div class="filter-group">183 <div class="filter-item">DEPARTMENT</div>184 <svg class="down-icon" viewBox="0 0 24 24">185 <polyline points="6,9 12,15 18,9" fill="none" stroke="#222" stroke-width="2"/>186 </svg>187 </div>188 <div class="filter-group">189 <div class="filter-item">FILTER & SORT</div>190 <svg class="settings-icon" viewBox="0 0 24 24">191 <line x1="3" y1="6" x2="21" y2="6" stroke="#222" stroke-width="2"/>192 <circle cx="8" cy="6" r="2" fill="#fff" stroke="#222" stroke-width="2"/>193 <line x1="3" y1="12" x2="21" y2="12" stroke="#222" stroke-width="2"/>194 <circle cx="16" cy="12" r="2" fill="#fff" stroke="#222" stroke-width="2"/>195 <line x1="3" y1="18" x2="21" y2="18" stroke="#222" stroke-width="2"/>196 <circle cx="11" cy="18" r="2" fill="#fff" stroke="#222" stroke-width="2"/>197 </svg>198 </div>199 </div>200 201 <!-- Tabs and item count -->202 <div class="tabs-row">203 <div class="tabs">204 <div class="tab">Model</div>205 <div class="tab active">Product</div>206 </div>207 <div class="items-view">208 <div>72 Items</div>209 <div class="view-icon"></div>210 <div class="view-grid">211 <div></div><div></div>212 <div></div><div></div>213 </div>214 </div>215 </div>216 217 <!-- Product grid -->218 <div class="products">219 <!-- Product 1 -->220 <div class="product-card">221 <div class="product-image">222 [IMG: White slim fit easy-iron shirt]223 <div class="price-tag">$16.00</div>224 <svg class="fav-btn" viewBox="0 0 24 24">225 <path d="M12 21s-7-4.6-9-8.6C1.2 10 2.5 7 5.6 7c2 0 3.3 1.3 4.4 2.6C11.1 8.3 12.4 7 14.4 7c3.1 0 4.4 3 2.6 5.4C19 16.4 12 21 12 21z" fill="none" stroke="#222" stroke-width="2" />226 </svg>227 </div>228 <div class="product-name">Slim Fit Easy-iron Shirt</div>229 <div class="price-row">230 <div class="sale-price">$16.00</div>231 <div class="orig-price">$19.99</div>232 </div>233 <div class="color-dots">234 <div class="dot-color dot-white"></div>235 <div class="dot-color"></div>236 <div class="dot-color dot-gray"></div>237 <div class="dot-color dot-black"></div>238 <div class="dot-plus">+9</div>239 </div>240 </div>241 242 <!-- Product 2 -->243 <div class="product-card">244 <div class="product-image">245 [IMG: Easy-iron shirt - white]246 <svg class="fav-btn" viewBox="0 0 24 24">247 <path d="M12 21s-7-4.6-9-8.6C1.2 10 2.5 7 5.6 7c2 0 3.3 1.3 4.4 2.6C11.1 8.3 12.4 7 14.4 7c3.1 0 4.4 3 2.6 5.4C19 16.4 12 21 12 21z" fill="none" stroke="#222" stroke-width="2" />248 </svg>249 </div>250 <div class="product-name">Easy-iron Shirt</div>251 <div class="price-row">252 <div class="sale-price">$10.40</div>253 <div class="orig-price">$12.99</div>254 </div>255 <div class="color-dots">256 <div class="dot-color"></div>257 </div>258 </div>259 260 <!-- Product 3 -->261 <div class="product-card">262 <div class="product-image">263 [IMG: Beige button-up shirt]264 <svg class="fav-btn" viewBox="0 0 24 24">265 <path d="M12 21s-7-4.6-9-8.6C1.2 10 2.5 7 5.6 7c2 0 3.3 1.3 4.4 2.6C11.1 8.3 12.4 7 14.4 7c3.1 0 4.4 3 2.6 5.4C19 16.4 12 21 12 21z" fill="none" stroke="#222" stroke-width="2" />266 </svg>267 </div>268 <div class="product-name">Cotton Shirt</div>269 <div class="price-row">270 <div class="sale-price">$14.00</div>271 <div class="orig-price">$17.99</div>272 </div>273 <div class="color-dots">274 <div class="dot-color dot-white"></div>275 <div class="dot-color dot-black"></div>276 </div>277 </div>278 279 <!-- Product 4 -->280 <div class="product-card">281 <div class="product-image">282 [IMG: Shirt with suspenders outfit]283 <svg class="fav-btn" viewBox="0 0 24 24">284 <path d="M12 21s-7-4.6-9-8.6C1.2 10 2.5 7 5.6 7c2 0 3.3 1.3 4.4 2.6C11.1 8.3 12.4 7 14.4 7c3.1 0 4.4 3 2.6 5.4C19 16.4 12 21 12 21z" fill="none" stroke="#222" stroke-width="2" />285 </svg>286 </div>287 <div class="product-name">Formal Outfit Set</div>288 <div class="price-row">289 <div class="sale-price">$24.00</div>290 <div class="orig-price">$29.99</div>291 </div>292 <div class="color-dots">293 <div class="dot-color dot-black"></div>294 </div>295 </div>296 </div>297 298 <!-- Bottom gesture bar -->299 <div class="gesture-bar">300 <div class="gesture-pill"></div>301 </div>302</div>303</body>304</html>