GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search - Men K Tennis Shoes</title>6<style>7 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target{9 position: relative;10 width:1080px; height:2400px;11 overflow:hidden;12 background:#ffffff;13 color:#222;14 }15 16 /* Top status */17 .statusbar{18 height:60px;19 padding:20px 28px 0 28px;20 display:flex; align-items:center; justify-content:space-between;21 font-size:28px; color:#444;22 }23 .icons small{ margin-left:20px; opacity:.7; }24 25 /* Search header */26 .header{27 padding:18px 24px 10px 16px;28 display:flex; align-items:center; gap:14px;29 }30 .back-btn{31 width:60px; height:60px; display:flex; align-items:center; justify-content:center;32 }33 .search-wrap{34 flex:1; height:84px; background:#F1F3F6; border-radius:14px; display:flex; align-items:center; padding:0 18px; gap:16px;35 border:1px solid #e3e6ea;36 }37 .search-wrap input{38 border:none; outline:none; background:transparent; font-size:30px; flex:1; color:#222;39 }40 .icon-btn{41 width:64px; height:64px; display:flex; align-items:center; justify-content:center; color:#606770;42 }43 44 /* Filter chips */45 .chip-row{ padding:10px 18px; display:flex; gap:18px; flex-wrap:nowrap; overflow:hidden;}46 .chip{47 border:1px solid #d9dfe6; padding:18px 24px; border-radius:40px; font-size:28px; background:#fff;48 display:flex; align-items:center; gap:14px;49 }50 .chip .caret{ transform:rotate(180deg); opacity:.6; }51 /* Feature badges */52 .feature-row{ padding:8px 18px; display:flex; gap:16px; }53 .feature{54 background:#f8fafc; border:1px solid #e5e9ef; border-radius:18px; padding:18px 22px; font-size:26px; color:#333; display:flex; align-items:center; gap:14px;55 }56 .badge-dot{57 width:36px; height:36px; border-radius:50%; background:#ffd95a; border:2px solid #f1c94c;58 display:inline-block;59 }60 .badge-new{61 width:38px; height:38px; border-radius:10px; border:2px dashed #7a89ff; display:inline-block; background:#eef0ff;62 }63 .badge-green{64 width:36px; height:36px; border-radius:50%; background:#00a884; border:2px solid #0e9e7a;65 display:inline-block;66 }67 68 /* Result text */69 .result-text{ padding:16px 22px 10px 22px; }70 .result-text .line1{ font-size:34px; }71 .result-text .blue{ color:#1265ff; }72 .result-text .line2{ margin-top:6px; font-size:28px; color:#5c6b74; }73 74 /* Banner */75 .banner{ margin:16px 22px; height:260px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#6a6a6a; font-size:34px; }76 77 /* Product grid */78 .grid{ padding:10px 18px 120px 18px; display:flex; flex-wrap:wrap; gap:28px; }79 .card{80 width:510px; background:#fff; border:1px solid #e6e9ee; border-radius:18px; overflow:hidden;81 }82 .thumb{83 position:relative; height:540px; background:#E0E0E0; border-bottom:1px solid #d9d9d9;84 display:flex; align-items:center; justify-content:center; color:#6a6a6a; font-size:30px;85 }86 .heart{87 position:absolute; top:20px; right:20px; width:64px; height:64px; background:#fff; border-radius:50%;88 border:1px solid #e0e0e0; display:flex; align-items:center; justify-content:center;89 }90 .compare{91 position:absolute; bottom:20px; left:20px; width:68px; height:68px; background:#fff; border-radius:50%;92 border:1px solid #e0e0e0; display:flex; align-items:center; justify-content:center; color:#50627a; font-size:22px;93 }94 .info{ padding:16px 18px 20px; }95 .brand{ font-size:28px; color:#9aa3ab; }96 .title{ font-size:30px; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }97 .price-row{ margin-top:10px; display:flex; align-items:center; gap:16px; }98 .price{ font-size:34px; font-weight:700; }99 .mrp{ font-size:28px; color:#8b989f; text-decoration:line-through; }100 .disc{ font-size:28px; color:#0a9b32; font-weight:700; }101 .daily{ margin-top:6px; color:#13a05a; font-size:26px; font-weight:700; }102 .stars{ margin-top:8px; display:flex; align-items:center; gap:6px; }103 .free{ margin-top:10px; font-size:26px; color:#3e4b53; }104 105 /* Floating plus assured mimic */106 .assured{107 margin-left:10px; padding:3px 8px; border:1px solid #dfe6f2; border-radius:12px; font-size:20px; color:#1a6bf5; background:#f3f7ff;108 }109 110 /* Simple SVG helpers */111 svg{ width:30px; height:30px; }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status bar -->118 <div class="statusbar">119 <div>8:25</div>120 <div class="icons">121 <small>📶</small>122 <small>📧</small>123 <small>🔔</small>124 <small>☁️</small>125 <small>📶</small>126 <small>🔋</small>127 </div>128 </div>129 130 <!-- Search Header -->131 <div class="header">132 <div class="back-btn" aria-label="Back">133 <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>134 </div>135 <div class="search-wrap">136 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#6b7280" stroke-width="2" fill="none"/><path d="M20 20l-3.5-3.5" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/></svg>137 <input value="men k swiss tennis shoes" />138 <div class="icon-btn" title="Voice">139 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 013 3v6a3 3 0 11-6 0V6a3 3 0 013-3z" fill="#6b7280"/><path d="M5 11a7 7 0 0014 0" stroke="#6b7280" stroke-width="2" fill="none"/><path d="M12 18v3" stroke="#6b7280" stroke-width="2"/></svg>140 </div>141 <div class="icon-btn" title="Camera">142 <svg viewBox="0 0 24 24"><path d="M4 7h4l2-2h4l2 2h4v12H4z" fill="none" stroke="#6b7280" stroke-width="2"/><circle cx="12" cy="13" r="4" stroke="#6b7280" stroke-width="2" fill="none"/></svg>143 </div>144 <div class="icon-btn" title="Cart">145 <svg viewBox="0 0 24 24"><path d="M6 6h14l-2 9H8L6 4H3" stroke="#6b7280" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="10" cy="20" r="1.5" fill="#6b7280"/><circle cx="17" cy="20" r="1.5" fill="#6b7280"/></svg>146 </div>147 </div>148 </div>149 150 <!-- Chips row -->151 <div class="chip-row">152 <div class="chip">Sort By153 <svg class="caret" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#6b7280" stroke-width="2"/></svg>154 </div>155 <div class="chip">156 <svg viewBox="0 0 24 24"><path d="M3 5h18l-6 7v7l-6-3v-4z" fill="none" stroke="#6b7280" stroke-width="2"/></svg>157 Filter158 </div>159 <div class="chip">Brand160 <svg class="caret" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#6b7280" stroke-width="2"/></svg>161 </div>162 <div class="chip">Price163 <svg class="caret" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#6b7280" stroke-width="2"/></svg>164 </div>165 <div class="chip">Discount</div>166 </div>167 168 <!-- Feature badges -->169 <div class="feature-row">170 <div class="feature"><span class="badge-dot"></span> Premium Brands</div>171 <div class="feature"><span class="badge-new"></span> New Arrivals</div>172 <div class="feature"><span class="badge-green"></span> Spoyl</div>173 </div>174 175 <!-- Result text -->176 <div class="result-text">177 <div class="line1">Showing results for <span class="blue">men k tennis shoes</span></div>178 <div class="line2">Search instead for <span class="blue">men k swiss tennis shoes</span></div>179 </div>180 181 <!-- Banner -->182 <div class="banner">[IMG: Campus shoes banner - Up to 50% Off]</div>183 184 <!-- Product Grid -->185 <div class="grid">186 187 <!-- Card 1 -->188 <div class="card">189 <div class="thumb">190 [IMG: Black textured running shoes - two angles]191 <div class="heart">192 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-7-10a4 4 0 017-2 4 4 0 017 2c0 5.4-7 10-7 10z" fill="none" stroke="#ef4444" stroke-width="2"/></svg>193 </div>194 <div class="compare">▭▭</div>195 </div>196 <div class="info">197 <div class="brand">Shoes villa</div>198 <div class="title">Full Black Extra Classic Shoe...</div>199 <div class="price-row">200 <div class="disc">66% off</div>201 <div class="mrp">1,999</div>202 <div class="price">₹678</div>203 </div>204 <div class="daily">Daily Saver</div>205 <div class="stars">206 <svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6-4.4-4.3 6.1-.9z" fill="#22c55e"/></svg>207 <svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6-4.4-4.3 6.1-.9z" fill="#22c55e"/></svg>208 <svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6-4.4-4.3 6.1-.9z" fill="#22c55e"/></svg>209 <svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6-4.4-4.3 6.1-.9z" fill="#22c55e"/></svg>210 <svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6-4.4-4.3 6.1-.9z" fill="#d1d5db"/></svg>211 <span class="assured">Plus Assured</span>212 </div>213 <div class="free">Free delivery</div>214 </div>215 </div>216 217 <!-- Card 2 -->218 <div class="card">219 <div class="thumb">220 [IMG: Blue ultralight sports shoes - two positions]221 <div class="heart">222 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-7-10a4 4 0 017-2 4 4 0 017 2c0 5.4-7 10-7 10z" fill="none" stroke="#ef4444" stroke-width="2"/></svg>223 </div>224 <div class="compare">▭▭</div>225 </div>226 <div class="info">227 <div class="brand" style="color:#9aa3ab">Sponsored</div>228 <div class="title"><strong>AVANT</strong></div>229 <div class="title">Ultralight Sports Shoes Cush...</div>230 <div class="price-row">231 <div class="disc">59% off</div>232 <div class="mrp">1,599</div>233 <div class="price">₹6xx</div>234 </div>235 <div class="daily">Daily Saver</div>236 <div class="stars">237 <svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6-4.4-4.3 6.1-.9z" fill="#22c55e"/></svg>238 <svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6-4.4-4.3 6.1-.9z" fill="#22c55e"/></svg>239 <svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6-4.4-4.3 6.1-.9z" fill="#22c55e"/></svg>240 <svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6-4.4-4.3 6.1-.9z" fill="#22c55e"/></svg>241 <svg viewBox="0 0 24 24"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6-5.4-2.9L6.6 20l1-6-4.4-4.3 6.1-.9z" fill="#34d399"/></svg>242 <span class="assured">Plus F-Assured</span>243 </div>244 <div class="free">Free delivery</div>245 </div>246 </div>247 248 </div>249 250</div>251</body>252</html>