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>Shopping Results - Casual shoes for women</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #212121; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0; right: 0;21 height: 100px;22 padding: 0 36px;23 display: flex; align-items: center; justify-content: space-between;24 color: #383838;25 font-weight: 600;26 font-size: 40px;27 }28 .status-right { display: flex; gap: 22px; align-items: center; }29 .icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; color:#4a4a4a; }30 31 /* Top search/header row */32 .topbar {33 position: absolute; left: 0; right: 0; top: 100px;34 height: 120px;35 padding: 0 24px;36 display: flex; align-items: center; gap: 22px;37 }38 .back-btn {39 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;40 }41 .search-pill {42 flex: 1;43 height: 96px;44 background: #F1F3F4;45 border-radius: 48px;46 display: flex; align-items: center;47 padding: 0 34px;48 color: #666;49 font-size: 40px;50 }51 .actions { display: flex; gap: 18px; align-items: center; }52 53 /* Tabs */54 .tabs {55 position: absolute; top: 220px; left: 0; right: 0;56 height: 100px;57 padding: 0 36px;58 display: flex; align-items: flex-end; gap: 50px;59 font-size: 40px;60 color: #666;61 border-bottom: 1px solid #eee;62 }63 .tab { padding-bottom: 24px; }64 .tab.active { color: #ff6a00; border-bottom: 6px solid #ff6a00; }65 66 /* Filter chips row */67 .filters {68 position: absolute; top: 320px; left: 0; right: 0;69 padding: 20px 24px 12px 24px;70 display: flex; gap: 18px; flex-wrap: nowrap;71 overflow: hidden;72 }73 .chip {74 border: 2px solid #dedede;75 border-radius: 40px;76 padding: 18px 28px;77 font-size: 36px;78 color: #555;79 display: inline-flex; align-items: center; gap: 12px;80 background: #fff;81 white-space: nowrap;82 }83 .chip .caret { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #777; }84 85 /* Grid/List */86 .content {87 position: absolute; top: 430px; left: 0; right: 0; bottom: 100px;88 padding: 18px 24px 0 24px;89 overflow: hidden;90 }91 .grid {92 display: grid;93 grid-template-columns: 1fr 1fr;94 gap: 28px;95 }96 .card {97 background: #fff;98 border-radius: 26px;99 }100 .product-img {101 position: relative;102 width: 100%;103 height: 480px;104 background: #E0E0E0;105 border: 1px solid #BDBDBD;106 border-radius: 28px;107 display: flex; align-items: center; justify-content: center;108 color: #757575; font-size: 34px; text-align: center; padding: 20px;109 }110 .img-fab {111 position: absolute; right: 18px; bottom: 18px;112 width: 92px; height: 92px;113 background: rgba(255,255,255,0.95);114 border-radius: 50%;115 display: flex; align-items: center; justify-content: center;116 border: 1px solid #ddd;117 }118 .pill {119 display: inline-flex; align-items: center; gap: 10px;120 background: #f2f2f2; color: #6b6b6b;121 border-radius: 18px; padding: 12px 18px;122 font-size: 30px; margin-top: 18px;123 }124 .meta { color: #757575; font-size: 32px; margin-top: 16px; }125 .title {126 font-size: 36px; line-height: 1.25; color: #333; margin-top: 10px;127 }128 .price {129 font-size: 46px; font-weight: 700; margin-top: 14px; color: #222;130 }131 .sub { color: #666; font-size: 32px; margin-top: 6px; }132 .tiny { color: #9e9e9e; font-size: 30px; margin-top: 12px; display: flex; align-items: center; gap: 12px; }133 .divider { height: 1px; background: #eee; margin: 16px 0; }134 135 /* Bottom home indicator */136 .home-indicator {137 position: absolute; left: 280px; right: 280px; bottom: 36px;138 height: 12px; background: #111; border-radius: 6px; opacity: 0.9;139 }140 141 .bold { font-weight: 700; }142</style>143</head>144<body>145<div id="render-target">146 147 <!-- Status Bar -->148 <div class="status-bar">149 <div>3:37</div>150 <div class="status-right">151 <!-- Signal -->152 <svg class="icon" viewBox="0 0 24 24"><path fill="#4a4a4a" d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V3h-2v17z"/></svg>153 <!-- Wifi -->154 <svg class="icon" viewBox="0 0 24 24"><path fill="#4a4a4a" d="M12 18.5l-2.5-2.5a3.5 3.5 0 015 0L12 18.5zm6-6a9 9 0 00-12 0l-1.6-1.6a11.3 11.3 0 0115.2 0L18 12.5z"/></svg>155 <!-- Battery -->156 <svg class="icon" viewBox="0 0 32 24"><rect x="2" y="4" width="26" height="16" rx="3" ry="3" fill="none" stroke="#4a4a4a" stroke-width="2"/><rect x="4" y="6" width="18" height="12" fill="#4a4a4a"/><rect x="28" y="9" width="3" height="6" fill="#4a4a4a"/></svg>157 </div>158 </div>159 160 <!-- Search / Top bar -->161 <div class="topbar">162 <div class="back-btn">163 <svg width="60" height="60" viewBox="0 0 24 24"><path fill="#333" d="M15.5 19L9 12l6.5-7 1.5 1.4L12.8 12l4.2 5.6z"/></svg>164 </div>165 <div class="search-pill">casual shoes for women</div>166 <div class="actions">167 <!-- Heart -->168 <svg class="icon" viewBox="0 0 24 24"><path fill="none" stroke="#333" stroke-width="2" d="M12 20s-7-4.4-7-9a4 4 0 017-2.6A4 4 0 0119 11c0 4.6-7 9-7 9z"/></svg>169 <!-- Camera -->170 <svg class="icon" viewBox="0 0 24 24"><path fill="#333" d="M9 5l1.5-2h3L15 5h3a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h3zM12 9a4 4 0 100 8 4 4 0 000-8z"/></svg>171 <!-- Tune/Sliders -->172 <svg class="icon" viewBox="0 0 24 24"><path fill="#333" d="M3 7h10v2H3V7zm0 8h6v2H3v-2zm14-8h4v2h-4V7zm-2 8h6v2h-6v-2z"/></svg>173 <!-- More -->174 <svg class="icon" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#333"/><circle cx="12" cy="12" r="2" fill="#333"/><circle cx="19" cy="12" r="2" fill="#333"/></svg>175 </div>176 </div>177 178 <!-- Tabs -->179 <div class="tabs">180 <div class="tab active">All</div>181 <div class="tab">Customizable</div>182 <div class="tab">Ready to Ship</div>183 <div class="tab">Suppliers</div>184 </div>185 186 <!-- Filter Chips -->187 <div class="filters">188 <div class="chip">Sort <span class="caret"></span></div>189 <div class="chip">Verified supplier</div>190 <div class="chip">Services <span class="caret"></span></div>191 <div class="chip">Feature <span class="caret"></span></div>192 </div>193 194 <!-- Results Grid -->195 <div class="content">196 <div class="grid">197 198 <!-- Card 1 -->199 <div class="card">200 <div class="pill">#6 most popular <svg width="20" height="20" viewBox="0 0 24 24"><path fill="#777" d="M9 18l6-6-6-6v12z"/></svg></div>201 <div class="product-img">202 [IMG: Circle of white and mixed sneakers on white]203 <div class="img-fab">204 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M9 5l1.5-2h3L15 5h3a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h3zM12 9a4 4 0 100 8 4 4 0 000-8z"/></svg>205 </div>206 </div>207 <div class="meta">Ready to Ship</div>208 <div class="title">High-quality hot-selling <span class="bold">women's</span> mixed style thick-sole shoes</div>209 <div class="price">$3.30 - $3.50</div>210 <div class="sub">Shipping per pairs: $6.57</div>211 <div class="sub">Min. order: 60 pairs</div>212 <div class="tiny">10 orders</div>213 <div class="tiny">1 yrs · CN</div>214 <div class="pill">#1 hot selling <svg width="20" height="20" viewBox="0 0 24 24"><path fill="#777" d="M9 18l6-6-6-6v12z"/></svg></div>215 </div>216 217 <!-- Card 2 -->218 <div class="card">219 <div class="pill">#2 most popular <svg width="20" height="20" viewBox="0 0 24 24"><path fill="#777" d="M9 18l6-6-6-6v12z"/></svg></div>220 <div class="product-img" style="background:#E6E2DF;">221 [IMG: Circle of sporty women's sneakers]222 <div class="img-fab">223 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M9 5l1.5-2h3L15 5h3a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h3zM12 9a4 4 0 100 8 4 4 0 000-8z"/></svg>224 </div>225 </div>226 <div class="meta">Ready to Ship</div>227 <div class="title">F1699 <span class="bold">Women's</span> Fashion Sneakers Leather Thick ...</div>228 <div class="price">$2.76 - $2.90</div>229 <div class="sub">Shipping per pairs: $1.82</div>230 <div class="sub">Min. order: 120 pairs</div>231 <div class="tiny">2 orders</div>232 <div class="tiny">1 yrs · CN</div>233 <div class="pill">#10 hot selling <svg width="20" height="20" viewBox="0 0 24 24"><path fill="#777" d="M9 18l6-6-6-6v12z"/></svg></div>234 </div>235 236 <!-- Card 3 -->237 <div class="card">238 <div class="product-img">239 [IMG: Circle of white sneakers with boxes]240 <div class="img-fab">241 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M9 5l1.5-2h3L15 5h3a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h3zM12 9a4 4 0 100 8 4 4 0 000-8z"/></svg>242 </div>243 </div>244 <div class="meta">Ready to Ship</div>245 <div class="title">W6122 Wholesale <span class="bold">casual</span> women's shoes mixed colors</div>246 <div class="price">$3.10 - $3.40</div>247 <div class="sub">Shipping per pairs: $5.90</div>248 <div class="sub">Min. order: 80 pairs</div>249 <div class="tiny">8 orders</div>250 <div class="tiny">1 yrs · CN</div>251 </div>252 253 <!-- Card 4 -->254 <div class="card">255 <div class="product-img">256 [IMG: Circle of colorful canvas sneakers]257 <div class="img-fab">258 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#555" d="M9 5l1.5-2h3L15 5h3a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h3zM12 9a4 4 0 100 8 4 4 0 000-8z"/></svg>259 </div>260 </div>261 <div class="meta">Ready to Ship</div>262 <div class="title">Bulk Wholesale Cheap Mixed Styles Lace Up Canvas Trend...</div>263 <div class="price">$2.20 - $2.80</div>264 <div class="sub">Shipping per pairs: $2.10</div>265 <div class="sub">Min. order: 120 pairs</div>266 <div class="tiny">4 orders</div>267 <div class="tiny">1 yrs · CN</div>268 </div>269 270 </div>271 </div>272 273 <!-- Bottom bar -->274 <div class="home-indicator"></div>275</div>276</body>277</html>