GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Black Formal Pants - Listing</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff; color:#212121;11 }12 13 /* Status bar */14 .status-bar {15 height:80px;16 padding:0 32px;17 display:flex; align-items:center; justify-content:space-between;18 font-size:36px; color:#424242;19 }20 .status-icons { display:flex; gap:24px; align-items:center; }21 .dot { width:12px; height:12px; background:#9E9E9E; border-radius:50%; display:inline-block; }22 23 /* App bar */24 .app-bar {25 height:120px; padding:0 24px;26 display:flex; align-items:center; gap:20px;27 }28 .icon-btn {29 width:72px; height:72px; display:flex; align-items:center; justify-content:center;30 border-radius:36px; background:#f5f5f5;31 }32 .search-pill {33 flex:1; height:88px; border-radius:44px; background:#f1f3f4;34 display:flex; align-items:center; padding:0 24px; gap:16px; font-size:36px; color:#424242;35 }36 .right-icons { display:flex; gap:24px; align-items:center; }37 .badge {38 position:absolute; top:-4px; right:-4px; background:#ff5252; color:#fff; font-size:24px;39 border-radius:16px; padding:2px 8px;40 }41 42 /* Helper icons */43 svg { display:block }44 .i { width:36px; height:36px; }45 46 /* Sub header */47 .subhead {48 font-size:32px; color:#616161;49 padding:12px 24px 16px 24px;50 border-top:1px solid #eee;51 }52 53 /* Pincode banner */54 .banner {55 margin:0 24px 12px 24px;56 background:#fff7e6; border:1px solid #ffe0b2; border-radius:16px;57 display:flex; align-items:center; justify-content:space-between;58 padding:24px;59 font-size:36px;60 }61 .banner .left { display:flex; align-items:center; gap:18px; color:#424242; }62 63 /* Product grid */64 .grid {65 display:grid;66 grid-template-columns: 1fr 1fr;67 column-gap:24px; row-gap:28px;68 padding:0 24px;69 }70 .card {71 border:1px solid #e0e0e0; border-radius:16px; overflow:hidden;72 background:#fff;73 }74 .img {75 height:680px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;76 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; text-align:center;77 }78 .dots { display:flex; gap:10px; justify-content:center; padding:10px 0 0 0; }79 .dot-small { width:14px; height:14px; background:#cfcfcf; border-radius:50%; }80 .content { padding:20px; }81 .title { font-size:34px; line-height:42px; color:#212121; height:84px; overflow:hidden; }82 .price-row { display:flex; align-items:center; gap:16px; padding:8px 0 14px 0; }83 .price { font-size:42px; font-weight:bold; }84 .mrp { font-size:34px; color:#757575; text-decoration:line-through; }85 .off { font-size:34px; color:#b66a00; font-weight:bold; }86 .swatches { display:flex; gap:10px; }87 .swatch {88 width:46px; height:46px; border-radius:23px; border:2px solid #999;89 display:inline-block;90 }91 .swatch.black { background:#222; }92 .swatch.gray { background:#999; }93 .swatch.red { background:#d32f2f; }94 95 /* Recently viewed tag */96 .tag {97 position:absolute; right:20px; top:20px;98 background:#ff5577; color:#fff; font-size:28px; border-radius:36px;99 padding:12px 18px; display:flex; align-items:center; gap:10px;100 box-shadow:0 2px 6px rgba(0,0,0,0.15);101 }102 .tag .clock {103 width:26px; height:26px; border:2px solid #fff; border-radius:50%; position:relative;104 }105 .tag .clock::after { content:''; position:absolute; width:2px; height:10px; background:#fff; left:50%; top:4px; transform:translateX(-50%); }106 .tag .clock::before { content:''; position:absolute; width:6px; height:2px; background:#fff; left:50%; bottom:6px; transform:translateX(-50%); }107 108 /* Bottom bar */109 .bottom-bar {110 position:absolute; bottom:0; left:0; right:0;111 height:140px; background:#fff; border-top:1px solid #e0e0e0;112 display:flex; align-items:center; justify-content:space-between;113 padding:0 40px; font-size:42px;114 }115 .bar-btn { display:flex; align-items:center; gap:20px; color:#212121; }116 .divider { width:2px; height:60px; background:#e0e0e0; }117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status bar -->123 <div class="status-bar">124 <div>8:47</div>125 <div class="status-icons">126 <div class="dot"></div>127 <div class="dot"></div>128 <div class="dot"></div>129 <div style="width:28px; height:28px; border:2px solid #616161; border-radius:4px;"></div>130 </div>131 </div>132 133 <!-- App bar with search -->134 <div class="app-bar">135 <div class="icon-btn">136 <svg class="i" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>137 </div>138 <div class="search-pill">139 <svg class="i" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#616161" stroke-width="2" fill="none"/><path d="M21 21l-5-5" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/></svg>140 <div>black formal pants for wo...</div>141 </div>142 <div class="right-icons">143 <div class="icon-btn">144 <svg class="i" viewBox="0 0 24 24"><path d="M10 20v-6h4v6M5 10l7-7 7 7" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round"/></svg>145 </div>146 <div class="icon-btn" style="position:relative;">147 <span class="badge">2</span>148 <svg class="i" viewBox="0 0 24 24"><path d="M6 6h12l-1 12H7L6 6z" stroke="#424242" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="2" fill="#424242"/><circle cx="15" cy="20" r="2" fill="#424242"/></svg>149 </div>150 <div class="icon-btn">151 <svg class="i" viewBox="0 0 24 24"><path d="M4 5h16v12H7l-3 3V5z" stroke="#424242" stroke-width="2" fill="none" stroke-linejoin="round"/></svg>152 </div>153 </div>154 </div>155 156 <!-- Sub header -->157 <div class="subhead">Showing 1000+ results for <b>black formal pants for women</b></div>158 159 <!-- Pincode banner -->160 <div class="banner">161 <div class="left">162 <svg class="i" viewBox="0 0 24 24"><path d="M12 2C8 2 6 5 6 8c0 5 6 12 6 12s6-7 6-12c0-3-2-6-6-6zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#e65100"/></svg>163 <div>Enter your Pincode</div>164 </div>165 <svg class="i" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#e65100" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>166 </div>167 168 <!-- Product Grid -->169 <div class="grid">170 <!-- Card 1 -->171 <div class="card">172 <div class="img">[IMG: Black formal pants on model]</div>173 <div class="dots"><div class="dot-small"></div><div class="dot-small"></div><div class="dot-small"></div></div>174 <div class="content">175 <div class="title">SVARCHI - Black Cotton Regular Fit Pants</div>176 <div class="price-row">177 <div class="price">₹469</div>178 <div class="mrp">₹1,599</div>179 <div class="off">71% OFF</div>180 </div>181 </div>182 </div>183 184 <!-- Card 2 -->185 <div class="card" style="position:relative;">186 <div class="img">[IMG: Slim black pants for women]</div>187 <div class="content">188 <div class="title">Juniper - Black Cotton Blend Straight Pants</div>189 <div class="price-row">190 <div class="price">₹489</div>191 <div class="mrp">₹1,599</div>192 <div class="off">69% OFF</div>193 </div>194 <div class="swatches">195 <span class="swatch black"></span>196 <span class="swatch gray"></span>197 <span class="swatch red"></span>198 </div>199 </div>200 </div>201 202 <!-- Card 3 -->203 <div class="card">204 <div class="img">[IMG: Paperbag waist black pants]</div>205 <div class="dots"><div class="dot-small"></div><div class="dot-small"></div><div class="dot-small"></div></div>206 <div class="content">207 <div class="title">Lee Moda - Black Cotton Blend Relaxed Pants</div>208 <div class="price-row">209 <div class="price">₹319</div>210 <div class="mrp">₹1,299</div>211 <div class="off">75% OFF</div>212 </div>213 </div>214 </div>215 216 <!-- Card 4 -->217 <div class="card" style="position:relative;">218 <div class="img">[IMG: Tailored black straight fit pants]</div>219 <div class="dots"><div class="dot-small"></div><div class="dot-small"></div><div class="dot-small"></div></div>220 <div class="content">221 <div class="title">Divena - Black Cotton Straight Fit Pants</div>222 <div class="price-row">223 <div class="price">₹539</div>224 <div class="mrp">₹1,399</div>225 <div class="off">61% OFF</div>226 </div>227 </div>228 <div class="tag">229 <div class="clock"></div>230 <div>Recently Viewed</div>231 </div>232 </div>233 </div>234 235 <!-- Bottom Sort/Filter bar -->236 <div class="bottom-bar">237 <div class="bar-btn">238 <svg class="i" viewBox="0 0 24 24"><path d="M7 4v12M7 16l-3 4h6l-3-4M17 4v8M17 12l-3 4h6l-3-4" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round"/></svg>239 <div>Sort</div>240 </div>241 <div class="divider"></div>242 <div class="bar-btn">243 <svg class="i" viewBox="0 0 24 24"><path d="M4 6h14M4 12h10M4 18h6" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="20" cy="6" r="2" fill="#424242"/><circle cx="14" cy="12" r="2" fill="#424242"/><circle cx="8" cy="18" r="2" fill="#424242"/></svg>244 <div>Filter</div>245 </div>246 </div>247 248</div>249</body>250</html>