GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Trouser Listing UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .statusbar {19 height: 120px;20 background: #cfcfcf;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 40px;25 font-size: 34px;26 color: #111;27 }28 .status-right {29 display: flex;30 gap: 24px;31 align-items: center;32 }33 .status-dot {34 width: 18px; height: 18px; background: #111; border-radius: 50%;35 }36 37 /* Header / topbar */38 .topbar {39 height: 150px;40 display: flex;41 align-items: center;42 padding: 0 44px;43 border-bottom: 1px solid #eee;44 gap: 28px;45 }46 .menu-wrap { position: relative; width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; }47 .menu-dot {48 position: absolute;49 right: -4px; top: 6px;50 width: 22px; height: 22px; background:#e53935; border-radius:50%;51 border: 2px solid #fff;52 }53 .title {54 font-size: 54px; font-weight: 700; margin-right: auto;55 }56 .top-icons { display: flex; gap: 36px; align-items: center; }57 58 .icon { width: 54px; height: 54px; }59 .icon path, .icon circle, .icon rect, .icon polyline, .icon line { stroke: #111; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }60 61 /* Filter row */62 .filter-row {63 display: flex;64 justify-content: space-between;65 align-items: center;66 padding: 26px 44px;67 border-bottom: 1px solid #eee;68 }69 .filter-left, .filter-right {70 display: flex;71 align-items: center;72 gap: 18px;73 }74 .filter-left .label, .filter-right .label {75 font-size: 36px; font-weight: 700; letter-spacing: 0.5px;76 }77 78 /* Tabs + count row */79 .tabs-row {80 display: flex;81 justify-content: space-between;82 align-items: center;83 padding: 26px 44px 0 44px;84 color: #555;85 }86 .tabs { display: flex; gap: 34px; font-size: 34px; }87 .tab { padding-bottom: 16px; }88 .tab.active { color: #111; border-bottom: 4px solid #d32f2f; }89 .items-right { display: flex; align-items: center; gap: 22px; font-size: 32px; color: #333; }90 .grid-icons { display: flex; gap: 12px; align-items: center; }91 .grid-icon { width: 44px; height: 44px; }92 93 .grid-icon rect { stroke: #111; stroke-width: 4; fill: none; }94 95 /* Product grid */96 .grid {97 display: grid;98 grid-template-columns: 1fr 1fr;99 gap: 36px 36px;100 padding: 36px 36px 0 36px;101 }102 .card {103 padding-bottom: 24px;104 }105 .product-img {106 height: 760px;107 background: #E0E0E0;108 border: 1px solid #BDBDBD;109 border-radius: 8px;110 display: flex;111 justify-content: center; align-items: center;112 color: #757575;113 font-size: 32px;114 position: relative;115 }116 .fav {117 position: absolute;118 right: 24px; bottom: 24px;119 width: 72px; height: 72px;120 display:flex; align-items:center; justify-content:center;121 }122 .fav svg { width: 64px; height: 64px; }123 .fav path { stroke: #111; stroke-width: 5; fill: none; }124 125 .title-price {126 margin-top: 28px;127 }128 .product-title { font-size: 42px; font-weight: 600; margin-bottom: 10px; }129 .price { font-size: 38px; margin-bottom: 16px; }130 .colors { display: flex; align-items: center; gap: 14px; }131 .dot {132 width: 24px; height: 24px; border-radius: 50%;133 border: 2px solid #888;134 }135 .more { font-size: 32px; color: #333; margin-left: 6px; }136 137 /* Gesture bar */138 .gesture {139 position: absolute;140 left: 50%; transform: translateX(-50%);141 bottom: 24px;142 width: 360px; height: 12px;143 background: #000;144 border-radius: 6px;145 }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status Bar -->152 <div class="statusbar">153 <div>9:37</div>154 <div class="status-right">155 <div>21°</div>156 <div class="status-dot"></div>157 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><line x1="16" y1="16" x2="21" y2="21"></line></svg>158 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="6" r="3"></circle><path d="M5 20c0-4 14-4 14 0"></path></svg>159 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg>160 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M8 12h8"></path></svg>161 </div>162 </div>163 164 <!-- Top Navigation -->165 <div class="topbar">166 <div class="menu-wrap">167 <svg class="icon" viewBox="0 0 24 24">168 <line x1="3" y1="6" x2="21" y2="6"></line>169 <line x1="3" y1="12" x2="17" y2="12"></line>170 <line x1="3" y1="18" x2="21" y2="18"></line>171 </svg>172 <span class="menu-dot"></span>173 </div>174 <div class="title">Trouser</div>175 <div class="top-icons">176 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16.5" y1="16.5" x2="21" y2="21"></line></svg>177 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.5"></circle><path d="M4 20c0-4 16-4 16 0"></path></svg>178 <svg class="icon" viewBox="0 0 24 24"><path d="M12 20s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"></path></svg>179 <svg class="icon" viewBox="0 0 24 24">180 <path d="M6 8h12v12H6z"></path>181 <path d="M8 8V6a4 4 0 0 1 8 0v2"></path>182 </svg>183 </div>184 </div>185 186 <!-- Filter Row -->187 <div class="filter-row">188 <div class="filter-left">189 <div class="label">DEPARTMENT</div>190 <svg class="icon" viewBox="0 0 24 24"><polyline points="4,9 12,17 20,9"></polyline></svg>191 </div>192 <div class="filter-right">193 <div class="label">FILTER & SORT</div>194 <svg class="icon" viewBox="0 0 24 24">195 <line x1="4" y1="6" x2="20" y2="6"></line>196 <circle cx="9" cy="6" r="1.5"></circle>197 <line x1="4" y1="12" x2="20" y2="12"></line>198 <circle cx="15" cy="12" r="1.5"></circle>199 <line x1="4" y1="18" x2="20" y2="18"></line>200 <circle cx="12" cy="18" r="1.5"></circle>201 </svg>202 </div>203 </div>204 205 <!-- Tabs and Items Count -->206 <div class="tabs-row">207 <div class="tabs">208 <div class="tab">Model</div>209 <div class="tab active">Product</div>210 </div>211 <div class="items-right">212 <div>1862 Items</div>213 <div class="grid-icons">214 <svg class="grid-icon" viewBox="0 0 24 24">215 <rect x="3" y="3" width="8" height="8"></rect>216 <rect x="13" y="3" width="8" height="8"></rect>217 <rect x="3" y="13" width="8" height="8"></rect>218 <rect x="13" y="13" width="8" height="8"></rect>219 </svg>220 <svg class="grid-icon" viewBox="0 0 24 24">221 <rect x="3" y="3" width="18" height="8"></rect>222 <rect x="3" y="13" width="18" height="8"></rect>223 </svg>224 </div>225 </div>226 </div>227 228 <!-- Product Grid -->229 <div class="grid">230 <!-- Card 1 -->231 <div class="card">232 <div class="product-img">233 [IMG: Black Slacks]234 <div class="fav">235 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"></path></svg>236 </div>237 </div>238 <div class="title-price">239 <div class="product-title">Slacks</div>240 <div class="price">$19.99</div>241 <div class="colors">242 <span class="dot" style="background:#212121;"></span>243 <span class="dot" style="background:#bdbdbd;"></span>244 <span class="dot" style="background:#8d8d8d;"></span>245 <span class="dot" style="background:#2f2f2f;"></span>246 <span class="more">+5</span>247 </div>248 </div>249 </div>250 251 <!-- Card 2 -->252 <div class="card">253 <div class="product-img">254 [IMG: Dark Green Tapered Pants]255 <div class="fav">256 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"></path></svg>257 </div>258 </div>259 <div class="title-price">260 <div class="product-title">Tapered Pants</div>261 <div class="price">$34.99</div>262 <div class="colors">263 <span class="dot" style="background:#1b5e20;"></span>264 <span class="dot" style="background:#b59a6d;"></span>265 <span class="dot" style="background:#bdb09d;"></span>266 <span class="dot" style="background:#232323;"></span>267 <span class="more">+2</span>268 </div>269 </div>270 </div>271 272 <!-- Card 3 -->273 <div class="card">274 <div class="product-img">275 [IMG: Black Wide-Leg Pants]276 <div class="fav">277 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"></path></svg>278 </div>279 </div>280 <div class="title-price">281 <div class="product-title">Wide-Leg Pants</div>282 <div class="price">$39.99</div>283 <div class="colors">284 <span class="dot" style="background:#212121;"></span>285 <span class="dot" style="background:#9e9e9e;"></span>286 <span class="dot" style="background:#616161;"></span>287 <span class="dot" style="background:#1f1f1f;"></span>288 <span class="more">+3</span>289 </div>290 </div>291 </div>292 293 <!-- Card 4 -->294 <div class="card">295 <div class="product-img">296 [IMG: Black Pleated Pants]297 <div class="fav">298 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"></path></svg>299 </div>300 </div>301 <div class="title-price">302 <div class="product-title">Pleated Pants</div>303 <div class="price">$29.99</div>304 <div class="colors">305 <span class="dot" style="background:#282828;"></span>306 <span class="dot" style="background:#bdbdbd;"></span>307 <span class="dot" style="background:#8a8a8a;"></span>308 <span class="dot" style="background:#212121;"></span>309 <span class="more">+4</span>310 </div>311 </div>312 </div>313 </div>314 315 <div class="gesture"></div>316</div>317</body>318</html>