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>Shoes Search Results</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#222; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#FFFFFF;12 }13 .status-bar {14 height:96px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;15 color:#333; font-weight:600; font-size:36px;16 }17 .status-icons { display:flex; align-items:center; gap:20px; color:#555; }18 .icon { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; }19 .top-search {20 padding:0 24px 12px 24px;21 }22 .search-row { display:flex; align-items:center; gap:24px; }23 .back-btn {24 width:84px; height:84px; display:flex; align-items:center; justify-content:center;25 }26 .search-box {27 flex:1; height:84px; border:2px solid #CBCBCB; border-radius:42px; padding:0 18px 0 28px;28 display:flex; align-items:center; gap:18px;29 }30 .search-input {31 flex:1; font-size:34px; color:#333;32 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;33 }34 .pill-row { display:flex; gap:18px; margin-top:22px; padding:0 12px; flex-wrap:wrap; }35 .chip {36 padding:18px 26px; border-radius:999px; font-size:30px; color:#333;37 background:#F3F3F3; border:1px solid #E0E0E0; display:flex; align-items:center; gap:12px;38 }39 .chip .caret { font-size:32px; color:#777; }40 .info-banner {41 margin:18px 24px 10px 24px; background:#F7EFE6; border-radius:14px; border:1px solid #E9DDCE;42 display:flex; align-items:center; gap:28px; padding:20px 24px; font-size:30px; color:#2F7A2F;43 }44 .info-banner .divider {45 width:2px; height:36px; background:#E0D4C5;46 }47 .subchips { padding:6px 24px 8px 24px; display:flex; gap:18px; flex-wrap:wrap; }48 .subchip { padding:14px 22px; border-radius:999px; font-size:28px; background:#FFFFFF; border:1px solid #DCDCDC; display:flex; align-items:center; gap:12px; color:#333; }49 .grid {50 padding:18px 24px 120px 24px;51 display:grid; grid-template-columns:repeat(2, 1fr); gap:26px;52 }53 .card {54 width:100%; border-radius:18px; overflow:hidden; background:#fff; border:1px solid #ECECEC;55 }56 .img-wrap {57 position:relative; width:100%; height:520px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;58 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;59 }60 .logo-tag {61 position:absolute; top:14px; left:14px; background:#F3A548; color:#1b1b1b; font-weight:700;62 padding:8px 12px; border-radius:10px; border:1px solid #C98535; font-size:24px;63 }64 .deal-ribbon {65 position:absolute; left:0; right:0; bottom:0; height:64px; background:#E53935; color:#fff;66 display:flex; align-items:center; justify-content:center; gap:12px; font-weight:700; font-size:28px;67 }68 .card-body { padding:18px 16px 16px 16px; }69 .title { font-size:30px; line-height:40px; color:#222; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:80px; }70 .subline { margin-top:6px; font-size:28px; color:#f37021; display:flex; gap:10px; align-items:baseline; }71 .subline .muted { color:#777; font-weight:500; }72 .rating { margin-top:6px; font-size:28px; color:#000; }73 .price-row { margin-top:8px; display:flex; align-items:center; justify-content:space-between; }74 .price-left { display:flex; align-items:center; gap:10px; }75 .price { color:#FF7A00; font-weight:800; font-size:36px; }76 .sold { color:#777; font-size:26px; }77 .cart-round {78 width:72px; height:72px; border-radius:50%; border:2px solid #CFCFCF; display:flex; align-items:center; justify-content:center;79 }80 .floating-cart {81 position:absolute; right:40px; top:1180px; background:#24C76F; color:#fff; width:168px; height:168px; border-radius:50%;82 display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; box-shadow:0 8px 18px rgba(36,199,111,0.35); border:4px solid #fff;83 font-weight:700;84 }85 .floating-cart small { background:#FFFFFF; color:#24C76F; padding:6px 12px; border-radius:999px; font-size:24px; font-weight:700; }86 .home-indicator {87 position:absolute; left:50%; transform:translateX(-50%); bottom:20px; width:360px; height:10px; background:#000; opacity:0.42; border-radius:10px;88 }89 /* Simple helpers */90 .bolt {91 width:28px; height:28px;92 }93 .check {94 width:28px; height:28px;95 }96 .xsmall { font-size:26px; color:#555; }97</style>98</head>99<body>100<div id="render-target">101 <!-- Status bar -->102 <div class="status-bar">103 <div>8:54</div>104 <div class="status-icons">105 <span class="icon xsmall">G</span>106 <span class="icon xsmall">M</span>107 <span class="icon xsmall">M</span>108 <span class="icon xsmall">!</span>109 <span class="icon xsmall">•</span>110 <span class="icon">111 <svg viewBox="0 0 24 24" width="40" height="40"><path fill="#777" d="M4 7h16a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a1 1 0 0 1 1-1z"/><rect x="18" y="9" width="2" height="6" fill="#aaa"/></svg>112 </span>113 <span style="font-size:30px; color:#555;">96%</span>114 </div>115 </div>116 117 <!-- Search area -->118 <div class="top-search">119 <div class="search-row">120 <div class="back-btn">121 <svg viewBox="0 0 24 24" width="48" height="48"><path fill="#222" d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"/></svg>122 </div>123 <div class="search-box">124 <svg viewBox="0 0 24 24" width="40" height="40"><path fill="#777" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>125 <div class="search-input">42-size formal shoes</div>126 <svg viewBox="0 0 24 24" width="40" height="40"><path fill="#9E9E9E" d="M18 6 6 18l-2-2L16 4l2 2zM6 6l12 12-2 2L4 8l2-2z"/></svg>127 <svg viewBox="0 0 24 24" width="46" height="46"><path fill="#777" d="M9 4h6l1 3h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3l1-3zm3 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg>128 </div>129 </div>130 131 <!-- Filter chips -->132 <div class="pill-row">133 <div class="chip">134 <svg viewBox="0 0 24 24" width="32" height="32"><path fill="#666" d="M3 5h18v2l-7 7v5l-4-2v-3L3 7V5z"/></svg>135 Filters136 </div>137 <div class="chip">Sort by <span class="caret">▾</span></div>138 <div class="chip">Category <span class="caret">▾</span></div>139 <div class="chip">Size <span class="caret">▾</span></div>140 <div class="chip">Color <span class="caret">▾</span></div>141 </div>142 </div>143 144 <!-- Benefits banner -->145 <div class="info-banner">146 <svg class="check" viewBox="0 0 24 24"><path fill="#2F7A2F" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>147 Free shipping148 <div class="divider"></div>149 <svg class="check" viewBox="0 0 24 24"><path fill="#2F7A2F" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>150 Price adjustment within 30 days151 </div>152 153 <!-- Secondary chips -->154 <div class="subchips">155 <div class="subchip">156 <svg class="bolt" viewBox="0 0 24 24"><path fill="#000" d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>157 Deals158 </div>159 <div class="subchip">Under $26</div>160 <div class="subchip">★★★★☆ & up</div>161 <div class="subchip">60% off or more</div>162 </div>163 164 <!-- Product grid -->165 <div class="grid">166 <!-- Card 1 -->167 <div class="card">168 <div class="img-wrap">169 <div class="logo-tag">LAORENTOU</div>170 [IMG: Black oxford formal shoe]171 <div class="deal-ribbon">172 <svg class="bolt" viewBox="0 0 24 24"><path fill="#fff" d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>173 Ends in 04:35:45174 </div>175 </div>176 <div class="card-body">177 <div class="title">LAORENTOU Men's Premium Leather Oxford Dress Shoes</div>178 <div class="subline"><span>Only 16 Left</span> <span class="muted">$15.39/wk x 4</span></div>179 <div class="rating">★★★★★ <span class="muted">(388)</span></div>180 <div class="price-row">181 <div class="price-left">182 <svg class="bolt" viewBox="0 0 24 24"><path fill="#FF7A00" d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>183 <div class="price">$61.55</div>184 <div class="sold">1 sold</div>185 </div>186 <div class="cart-round">187 <svg viewBox="0 0 24 24" width="36" height="36"><path fill="#555" d="M7 6h14l-2 9H9L7 6z"/><circle cx="10" cy="20" r="2" fill="#555"/><circle cx="18" cy="20" r="2" fill="#555"/></svg>188 </div>189 </div>190 </div>191 </div>192 193 <!-- Card 2 -->194 <div class="card">195 <div class="img-wrap">196 <div class="logo-tag">LAORENTOU</div>197 [IMG: Black wingtip dress shoe]198 <div class="deal-ribbon">199 <svg class="bolt" viewBox="0 0 24 24"><path fill="#fff" d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>200 Ends in 04:35:45201 </div>202 </div>203 <div class="card-body">204 <div class="title">LAORENTOU Men's Wing Tip Premium Dress Shoes</div>205 <div class="subline"><span class="muted" style="color:#666;">Lowest price in half year</span></div>206 <div class="rating">★★★★★ <span class="muted">(388)</span></div>207 <div class="price-row">208 <div class="price-left">209 <svg class="bolt" viewBox="0 0 24 24"><path fill="#FF7A00" d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>210 <div class="price">$64.34</div>211 <div class="sold">2 sold</div>212 </div>213 <div class="cart-round">214 <svg viewBox="0 0 24 24" width="36" height="36"><path fill="#555" d="M7 6h14l-2 9H9L7 6z"/><circle cx="10" cy="20" r="2" fill="#555"/><circle cx="18" cy="20" r="2" fill="#555"/></svg>215 </div>216 </div>217 </div>218 </div>219 220 <!-- Card 3 -->221 <div class="card">222 <div class="img-wrap">223 <div class="logo-tag">LAORENTOU</div>224 [IMG: Black slip-on leather shoe]225 <div class="deal-ribbon">226 <svg class="bolt" viewBox="0 0 24 24"><path fill="#fff" d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>227 Ends in 04:35:45228 </div>229 </div>230 <div class="card-body">231 <div class="title">LAORENTOU Men's Dress Shoes, Slip-On Comfort Loafers</div>232 <div class="subline"><span>Almost sold out</span> <span class="muted">$14.29/wk x 4</span></div>233 <div class="rating">★★★★★ <span class="muted">(388)</span></div>234 <div class="price-row">235 <div class="price-left">236 <svg class="bolt" viewBox="0 0 24 24"><path fill="#FF7A00" d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>237 <div class="price">$57.14</div>238 <div class="sold">13 sold</div>239 </div>240 <div class="cart-round">241 <svg viewBox="0 0 24 24" width="36" height="36"><path fill="#555" d="M7 6h14l-2 9H9L7 6z"/><circle cx="10" cy="20" r="2" fill="#555"/><circle cx="18" cy="20" r="2" fill="#555"/></svg>242 </div>243 </div>244 </div>245 </div>246 247 <!-- Card 4 -->248 <div class="card">249 <div class="img-wrap">250 <div class="logo-tag">LAORENTOU</div>251 [IMG: Black cap-toe leather shoe]252 <div class="deal-ribbon">253 <svg class="bolt" viewBox="0 0 24 24"><path fill="#fff" d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>254 Ends in 04:35:45255 </div>256 </div>257 <div class="card-body">258 <div class="title">LAORENTOU Men's Genuine Leather Oxford</div>259 <div class="subline"><span>Only 12 Left</span> <span class="muted">$16.31/wk x 4</span></div>260 <div class="rating">★★★★★ <span class="muted">(388)</span></div>261 <div class="price-row">262 <div class="price-left">263 <svg class="bolt" viewBox="0 0 24 24"><path fill="#FF7A00" d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>264 <div class="price">$65.24</div>265 <div class="sold">5 sold</div>266 </div>267 <div class="cart-round">268 <svg viewBox="0 0 24 24" width="36" height="36"><path fill="#555" d="M7 6h14l-2 9H9L7 6z"/><circle cx="10" cy="20" r="2" fill="#555"/><circle cx="18" cy="20" r="2" fill="#555"/></svg>269 </div>270 </div>271 </div>272 </div>273 </div>274 275 <!-- Floating cart badge -->276 <div class="floating-cart">277 <svg viewBox="0 0 24 24" width="64" height="64"><path fill="#fff" d="M7 6h14l-2 9H9L7 6z"/><circle cx="10" cy="20" r="2" fill="#fff"/><circle cx="18" cy="20" r="2" fill="#fff"/></svg>278 Cart279 <small>Free Shipping</small>280 </div>281 282 <!-- Home indicator -->283 <div class="home-indicator"></div>284</div>285</body>286</html>