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>Search Results - Tuxedo</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF; color: #212121;12 }13 14 /* Status bar */15 .status-bar {16 height: 90px;17 padding: 0 32px;18 display: flex; align-items: center; justify-content: space-between;19 font-size: 34px; color: #616161;20 }21 .status-left { display: flex; gap: 18px; align-items: center; }22 .status-right { display: flex; gap: 22px; align-items: center; }23 .icon { width: 48px; height: 48px; display: inline-block; }24 25 /* Search header */26 .search-header {27 height: 120px;28 border-bottom: 1px solid #E0E0E0;29 display: flex; align-items: center;30 padding: 0 24px;31 gap: 20px;32 }33 .back-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }34 .query-bar {35 flex: 1;36 height: 80px;37 border: 1px solid #E0E0E0; border-radius: 40px;38 padding: 0 28px;39 display: flex; align-items: center; gap: 18px;40 font-size: 38px; color: #424242;41 background: #FAFAFA;42 }43 .query-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }44 .actions { display: flex; gap: 24px; align-items: center; padding: 0 8px; }45 46 /* Chips row */47 .chip-row { display: flex; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #EEE; flex-wrap: wrap; }48 .chip {49 height: 72px; padding: 0 28px; border: 1px solid #DADADA; border-radius: 36px;50 display: flex; align-items: center; gap: 14px; font-size: 32px; color: #424242; background: #FFFFFF;51 }52 .chip.primary { border-color: #3D5AFE; color: #3D5AFE; }53 .chip .badge {54 min-width: 44px; height: 44px; border-radius: 22px; background: #E8EAF6; color: #3D5AFE;55 display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700;56 }57 58 /* Highlighted filter chips */59 .promo-row { display: flex; gap: 16px; padding: 12px 24px 18px; border-bottom: 1px solid #EEE; flex-wrap: wrap; }60 .promo-chip {61 height: 84px; padding: 0 24px; border-radius: 20px; border: 1px solid #D9D9D9;62 display: flex; align-items: center; gap: 16px; font-size: 32px; background: #FFFFFF; color: #424242;63 }64 .promo-icon {65 width: 56px; height: 56px; border-radius: 28px; background: #F1F8E9; border: 1px solid #DCEFD1;66 display: flex; align-items: center; justify-content: center; color: #66BB6A; font-size: 30px;67 }68 69 /* Info text */70 .info {71 padding: 16px 24px; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0;72 font-size: 34px; line-height: 46px;73 }74 .info .link { color: #2962FF; }75 76 /* Products grid */77 .products { display: flex; flex-wrap: wrap; }78 .product-card {79 width: 540px; border-right: 1px solid #EEE; border-bottom: 1px solid #EEE;80 padding: 24px;81 }82 .product-image {83 width: 100%; height: 640px; background: #E0E0E0; border: 1px solid #BDBDBD;84 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; position: relative;85 }86 .heart {87 position: absolute; top: 16px; right: 16px; width: 64px; height: 64px;88 display: flex; align-items: center; justify-content: center;89 background: rgba(255,255,255,0.8); border-radius: 32px;90 }91 .product-title { font-size: 36px; margin-top: 16px; color: #212121; }92 .price-row { margin-top: 8px; display: flex; align-items: baseline; gap: 14px; }93 .discount { color: #2E7D32; font-size: 34px; font-weight: 700; }94 .strike { color: #9E9E9E; text-decoration: line-through; font-size: 32px; }95 .price { color: #212121; font-size: 36px; font-weight: 700; }96 .tagline { color: #2E7D32; font-size: 30px; margin-top: 6px; }97 .rating-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 32px; color: #2E7D32; }98 .rating-stars { color: #2E7D32; font-size: 34px; letter-spacing: 2px; }99 .count { color: #616161; font-size: 32px; }100 .plus {101 display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; font-size: 30px; color: #616161;102 background: #FFF9E1; padding: 4px 10px; border-radius: 12px; border: 1px solid #FFE08A;103 }104 .delivery { font-size: 32px; color: #616161; margin-top: 8px; }105 106 /* Bottom home indicator */107 .home-indicator-wrap { position: absolute; bottom: 24px; left: 0; width: 100%; display: flex; justify-content: center; }108 .home-indicator { width: 360px; height: 14px; background: #000; border-radius: 7px; opacity: 0.25; }109</style>110</head>111<body>112<div id="render-target">113 114 <!-- Status Bar -->115 <div class="status-bar">116 <div class="status-left">117 <span>12:20</span>118 </div>119 <div class="status-right">120 <!-- simple status icons -->121 <svg class="icon" viewBox="0 0 24 24">122 <path d="M3 10h18v4H3z" fill="#9E9E9E"/>123 </svg>124 <svg class="icon" viewBox="0 0 24 24">125 <path d="M3 18h18V6l-9 6-9-6z" fill="#9E9E9E"/>126 </svg>127 <svg class="icon" viewBox="0 0 24 24">128 <circle cx="12" cy="12" r="10" fill="#9E9E9E"/>129 </svg>130 <svg class="icon" viewBox="0 0 24 24">131 <path d="M4 7h16v10H4z" fill="#9E9E9E"/>132 </svg>133 </div>134 </div>135 136 <!-- Search Header -->137 <div class="search-header">138 <div class="back-btn">139 <svg class="icon" viewBox="0 0 24 24">140 <path d="M15 6L9 12l6 6" fill="none" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>141 </svg>142 </div>143 <div class="query-bar">144 <svg class="icon" viewBox="0 0 24 24">145 <circle cx="10" cy="10" r="6" fill="none" stroke="#616161" stroke-width="2"/>146 <path d="M14 14l6 6" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>147 </svg>148 <div class="query-text">3-piece Tuxido for b...</div>149 <div class="actions">150 <svg class="icon" viewBox="0 0 24 24">151 <path d="M12 3c2 0 4 1 4 3v6c0 2-2 3-4 3s-4-1-4-3V6c0-2 2-3 4-3zm-1 16h2v2h-2z" fill="#616161"/>152 </svg>153 <svg class="icon" viewBox="0 0 24 24">154 <path d="M4 7h4l2-2h4l2 2h4v12H4z" fill="#616161"/>155 <circle cx="12" cy="13" r="4" fill="#FFFFFF"/>156 </svg>157 <svg class="icon" viewBox="0 0 24 24">158 <path d="M7 7h14l-2 12H5L3 7h4zm3 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#616161"/>159 </svg>160 </div>161 </div>162 </div>163 164 <!-- Filter chips -->165 <div class="chip-row">166 <div class="chip">Sort By ▾</div>167 <div class="chip primary"><span class="badge">+1</span>Filter</div>168 <div class="chip">Gender</div>169 <div class="chip">Brand</div>170 <div class="chip">Age</div>171 </div>172 173 <!-- Promo/extra chips -->174 <div class="promo-row">175 <div class="promo-chip">176 <div class="promo-icon">🍃</div>177 Rakhi Deals178 </div>179 <div class="promo-chip">180 <div class="promo-icon">⭐</div>181 Popular Brands182 </div>183 <div class="promo-chip">184 <div class="promo-icon">%</div>185 60% or more186 </div>187 <div class="promo-chip">188 <div class="promo-icon">🎨</div>189 Black190 </div>191 </div>192 193 <!-- Info -->194 <div class="info">195 Showing results for <span class="link">3 piece tuxedo for boy kids</span><br/>196 Search instead for <span class="link">3-piece Tuxido for boy kids</span>197 </div>198 199 <!-- Products Grid -->200 <div class="products">201 <!-- Card 1 -->202 <div class="product-card">203 <div class="product-image">204 [IMG: Boy tuxedo set - grey suit]205 <div class="heart">206 <svg width="36" height="36" viewBox="0 0 24 24">207 <path d="M12 21s-6-4.35-9-7.35C-1 10.5 2 5.5 6.5 6.5 8.4 6.9 10 8.3 12 10.3c2-2 3.6-3.4 5.5-3.8C22 5.5 25 10.5 21 13.65 18 16.65 12 21 12 21z" fill="none" stroke="#9E9E9E" stroke-width="1.6"/>208 </svg>209 </div>210 </div>211 <div class="product-title">Zolario</div>212 <div class="price-row">213 <div class="discount">58% off</div>214 <div class="strike">₹3,499</div>215 <div class="price">₹1,439</div>216 </div>217 <div class="tagline">Daily Saver</div>218 <div class="rating-row">219 <span class="rating-stars">★★★★☆</span>220 <span class="count">(17)</span>221 <span class="plus">222 <svg width="18" height="18" viewBox="0 0 24 24">223 <path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFC107"/>224 </svg>225 Plus F-ASSURED226 </span>227 </div>228 <div class="delivery">Free delivery</div>229 </div>230 231 <!-- Card 2 -->232 <div class="product-card">233 <div class="product-image">234 [IMG: Boy tuxedo set - navy suit with bow]235 <div class="heart">236 <svg width="36" height="36" viewBox="0 0 24 24">237 <path d="M12 21s-6-4.35-9-7.35C-1 10.5 2 5.5 6.5 6.5 8.4 6.9 10 8.3 12 10.3c2-2 3.6-3.4 5.5-3.8C22 5.5 25 10.5 21 13.65 18 16.65 12 21 12 21z" fill="none" stroke="#9E9E9E" stroke-width="1.6"/>238 </svg>239 </div>240 </div>241 <div class="product-title">Fourfolds</div>242 <div class="price-row">243 <div class="discount">35% off</div>244 <div class="strike">₹1,999</div>245 <div class="price">₹1,299</div>246 </div>247 <div class="rating-row">248 <span class="rating-stars">★★★★☆</span>249 <span class="count">(563)</span>250 <span class="plus">251 <svg width="18" height="18" viewBox="0 0 24 24">252 <path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFC107"/>253 </svg>254 Plus F-ASSURED255 </span>256 </div>257 <div class="delivery">Free delivery by Today</div>258 </div>259 260 <!-- Card 3 -->261 <div class="product-card">262 <div class="product-image">263 [IMG: Boy tuxedo set - mustard waistcoat]264 <div class="heart">265 <svg width="36" height="36" viewBox="0 0 24 24">266 <path d="M12 21s-6-4.35-9-7.35C-1 10.5 2 5.5 6.5 6.5 8.4 6.9 10 8.3 12 10.3c2-2 3.6-3.4 5.5-3.8C22 5.5 25 10.5 21 13.65 18 16.65 12 21 12 21z" fill="none" stroke="#9E9E9E" stroke-width="1.6"/>267 </svg>268 </div>269 </div>270 <div class="product-title">Trendz Kids</div>271 <div class="price-row">272 <div class="discount">40% off</div>273 <div class="strike">₹1,799</div>274 <div class="price">₹1,079</div>275 </div>276 <div class="rating-row">277 <span class="rating-stars">★★★☆☆</span>278 <span class="count">(89)</span>279 <span class="plus">280 <svg width="18" height="18" viewBox="0 0 24 24">281 <path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFC107"/>282 </svg>283 Plus F-ASSURED284 </span>285 </div>286 <div class="delivery">Free delivery</div>287 </div>288 289 <!-- Card 4 -->290 <div class="product-card">291 <div class="product-image">292 [IMG: Boy tuxedo set - navy waistcoat]293 <div class="heart">294 <svg width="36" height="36" viewBox="0 0 24 24">295 <path d="M12 21s-6-4.35-9-7.35C-1 10.5 2 5.5 6.5 6.5 8.4 6.9 10 8.3 12 10.3c2-2 3.6-3.4 5.5-3.8C22 5.5 25 10.5 21 13.65 18 16.65 12 21 12 21z" fill="none" stroke="#9E9E9E" stroke-width="1.6"/>296 </svg>297 </div>298 </div>299