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>Door Hinges Search - UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Common */18 .row { display: flex; align-items: center; }19 .muted { color: #8a8a8a; }20 .divider { height: 1px; background: #e6e6e6; width: 100%; }21 .pill { border: 1px solid #d9d9d9; border-radius: 28px; padding: 16px 22px; font-size: 28px; background: #fff; display: inline-flex; align-items: center; gap: 14px; }22 .content { padding: 24px 32px; }23 .label { font-size: 26px; color: #777; }24 .bold { font-weight: 700; }25 .strike { text-decoration: line-through; color: #8a8a8a; }26 .green { color: #1aa53b; }27 .pink { color: #e20074; }28 29 /* Top search bar */30 .topbar { padding: 24px 24px 16px 24px; }31 .searchWrap { flex: 1; display: flex; align-items: center; gap: 20px; }32 .searchBar {33 flex: 1;34 background: #f1f3f4;35 border-radius: 40px;36 padding: 22px 26px;37 display: flex;38 align-items: center;39 gap: 18px;40 border: 1px solid #e0e0e0;41 }42 .searchText { font-size: 32px; color: #555; flex: 1; }43 .iconBtn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }44 .cartBtn { width: 80px; height: 80px; margin-left: 10px; display: flex; align-items: center; justify-content: center; }45 46 /* Sort/Filter row */47 .sfRow { padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; }48 .sfItem { display: flex; align-items: center; gap: 16px; font-size: 34px; color: #333; }49 .sfDivider { width: 2px; height: 48px; background: #e6e6e6; }50 51 /* Chips */52 .chips { padding: 10px 32px 20px 32px; display: flex; gap: 18px; }53 .chipIcon { width: 42px; height: 42px; border-radius: 50%; background: #fff7d6; border: 1px solid #f3e29b; display: inline-flex; align-items: center; justify-content: center; }54 .chipGreen { background: #e9fff0; border-color: #b9e9c7; }55 56 /* Product grid */57 .grid { padding: 12px 24px 120px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }58 .card {59 background: #fff;60 border: 1px solid #eaeaea;61 border-radius: 18px;62 overflow: hidden;63 padding-bottom: 18px;64 }65 .imgWrap { position: relative; padding: 20px; }66 .imgPh {67 width: 100%;68 height: 360px;69 background: #E0E0E0;70 border: 1px solid #BDBDBD;71 display: flex; justify-content: center; align-items: center;72 color: #757575; font-size: 28px; text-align: center;73 }74 .heartBtn {75 position: absolute; top: 24px; right: 24px;76 width: 64px; height: 64px; background: #fff; border-radius: 32px;77 display: flex; align-items: center; justify-content: center;78 border: 1px solid #e6e6e6;79 }80 .badgeTrending {81 position: absolute; left: 24px; top: -6px;82 background: #1db7a6; color: #fff; font-weight: 700; font-size: 24px;83 padding: 8px 16px; border-radius: 8px;84 letter-spacing: 0.5px;85 }86 .cardBody { padding: 0 24px; }87 .sponsored { font-size: 24px; color: #9a9a9a; margin-bottom: 8px; }88 .title { font-size: 30px; color: #222; line-height: 1.25; margin-bottom: 8px; }89 .priceRow { display: flex; align-items: baseline; gap: 12px; margin: 8px 0; }90 .priceRow .pct { color: #1aa53b; font-weight: 800; font-size: 30px; display: inline-flex; align-items: center; gap: 8px; }91 .priceRow .new { font-size: 32px; font-weight: 800; color: #111; }92 .ratingRow { display: flex; align-items: center; gap: 12px; margin: 10px 0; }93 .stars svg { width: 28px; height: 28px; }94 .plusBadge {95 display: inline-flex; align-items: center; gap: 8px;96 border: 1px solid #e7e7e7; border-radius: 14px;97 padding: 4px 8px; font-size: 22px; color: #2357ff; background: #f9fbff;98 }99 .delivery { font-size: 26px; color: #555; margin-top: 8px; }100 101 /* Utility SVG colors */102 .icon { fill: none; stroke: #333; stroke-width: 3; }103 .icon-muted { stroke: #777; }104 .icon-green { fill: #1aa53b; stroke: none; }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Top bar with back and search -->111 <div class="topbar row">112 <div class="iconBtn">113 <svg viewBox="0 0 48 48" width="48" height="48">114 <path d="M30 10 L16 24 L30 38" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>115 </svg>116 </div>117 <div class="searchWrap">118 <div class="searchBar">119 <svg viewBox="0 0 48 48" width="36" height="36">120 <circle cx="20" cy="20" r="12" stroke="#777" stroke-width="3" fill="none"/>121 <line x1="30" y1="30" x2="44" y2="44" stroke="#777" stroke-width="3" stroke-linecap="round"/>122 </svg>123 <div class="searchText">door hinges 5 inch</div>124 <div class="iconBtn">125 <svg viewBox="0 0 48 48" width="36" height="36">126 <rect x="20" y="8" width="8" height="22" rx="4" fill="#777"/>127 <path d="M24 30 L24 40" stroke="#777" stroke-width="4" stroke-linecap="round"/>128 </svg>129 </div>130 <div class="iconBtn">131 <svg viewBox="0 0 48 48" width="36" height="36">132 <rect x="6" y="12" width="30" height="22" rx="4" stroke="#777" stroke-width="3" fill="none"/>133 <circle cx="21" cy="23" r="6" stroke="#777" stroke-width="3" fill="none"/>134 <path d="M38 16 L42 20 L42 26 L38 30 Z" fill="#777"/>135 </svg>136 </div>137 </div>138 </div>139 <div class="cartBtn">140 <svg viewBox="0 0 48 48" width="44" height="44">141 <path d="M6 10 H14 L18 32 H38 L42 18 H20" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"/>142 <circle cx="22" cy="38" r="3" fill="#333"/>143 <circle cx="36" cy="38" r="3" fill="#333"/>144 </svg>145 </div>146 </div>147 148 <!-- Sort / Filter -->149 <div class="sfRow">150 <div class="sfItem">151 <svg viewBox="0 0 48 48" width="40" height="40">152 <line x1="8" y1="12" x2="40" y2="12" stroke="#333" stroke-width="3"/>153 <circle cx="18" cy="12" r="4" fill="#333"/>154 <line x1="8" y1="24" x2="40" y2="24" stroke="#333" stroke-width="3"/>155 <circle cx="30" cy="24" r="4" fill="#333"/>156 </svg>157 <div>Sort</div>158 </div>159 <div class="sfDivider"></div>160 <div class="sfItem">161 <svg viewBox="0 0 48 48" width="40" height="40">162 <line x1="8" y1="12" x2="40" y2="12" stroke="#333" stroke-width="3"/>163 <circle cx="12" cy="12" r="4" fill="#333"/>164 <line x1="8" y1="24" x2="40" y2="24" stroke="#333" stroke-width="3"/>165 <circle cx="36" cy="24" r="4" fill="#333"/>166 <line x1="8" y1="36" x2="40" y2="36" stroke="#333" stroke-width="3"/>167 <circle cx="24" cy="36" r="4" fill="#333"/>168 </svg>169 <div>Filter</div>170 </div>171 </div>172 <div class="divider"></div>173 174 <!-- Chips -->175 <div class="chips">176 <div class="pill">177 <span class="chipIcon">★</span>178 <span>Premium Brands</span>179 </div>180 <div class="pill">181 <span class="chipIcon">NEW</span>182 <span>New Arrivals</span>183 </div>184 <div class="pill">185 <span class="chipIcon chipGreen">%</span>186 <span>50% or more</span>187 </div>188 </div>189 190 <!-- Product grid -->191 <div class="grid">192 193 <!-- Card 1 -->194 <div class="card">195 <div class="imgWrap">196 <div class="imgPh">[IMG: Brass Hinges Grid]</div>197 <div class="heartBtn">198 <svg viewBox="0 0 48 48" width="32" height="32">199 <path d="M24 38 C24 38 10 28 10 18 C10 12 16 10 20 14 C22 16 24 18 24 18 C24 18 26 16 28 14 C32 10 38 12 38 18 C38 28 24 38 24 38 Z" stroke="#8a8a8a" stroke-width="3" fill="none"/>200 </svg>201 </div>202 </div>203 <div class="cardBody">204 <div class="sponsored">Sponsored</div>205 <div class="title">ATLANTIC Window Butt Hinges...</div>206 <div class="priceRow">207 <div class="pct">208 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 18 L4 8 H20 Z" class="icon-green"/></svg>209 55%210 </div>211 <div class="strike">3,119</div>212 <div class="new">₹1,399</div>213 </div>214 <div class="ratingRow">215 <div class="stars">216 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>217 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>218 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>219 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>220 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#b7e5c4"/></svg>221 </div>222 <span class="plusBadge">223 <svg viewBox="0 0 20 20" width="16" height="16"><path d="M10 4 V16 M4 10 H16" stroke="#2357ff" stroke-width="2"/></svg>224 Plus225 </span>226 </div>227 <div class="delivery">Free delivery</div>228 </div>229 </div>230 231 <!-- Card 2 -->232 <div class="card">233 <div class="imgWrap">234 <div class="imgPh">[IMG: Brass Door Hinge 3-pack]</div>235 <div class="heartBtn">236 <svg viewBox="0 0 48 48" width="32" height="32">237 <path d="M24 38 C24 38 10 28 10 18 C10 12 16 10 20 14 C22 16 24 18 24 18 C24 18 26 16 28 14 C32 10 38 12 38 18 C38 28 24 38 24 38 Z" stroke="#8a8a8a" stroke-width="3" fill="none"/>238 </svg>239 </div>240 </div>241 <div class="cardBody">242 <div class="sponsored">Sponsored</div>243 <div class="title">Tremart Door Butt Hinges...</div>244 <div class="priceRow">245 <div class="pct">246 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 18 L4 8 H20 Z" class="icon-green"/></svg>247 44%248 </div>249 <div class="strike">900</div>250 <div class="new">₹498</div>251 </div>252 <div class="ratingRow">253 <div class="stars">254 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>255 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>256 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>257 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#b7e5c4"/></svg>258 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#e1f5e6"/></svg>259 </div>260 <span class="plusBadge">261 <svg viewBox="0 0 20 20" width="16" height="16"><path d="M10 4 V16 M4 10 H16" stroke="#2357ff" stroke-width="2"/></svg>262 Plus263 </span>264 </div>265 <div class="delivery">Free delivery</div>266 </div>267 </div>268 269 <!-- Card 3 -->270 <div class="card">271 <div class="imgWrap">272 <div class="badgeTrending">TRENDING</div>273 <div class="imgPh">[IMG: Brass Hinges 4-set]</div>274 <div class="heartBtn">275 <svg viewBox="0 0 48 48" width="32" height="32">276 <path d="M24 38 C24 38 10 28 10 18 C10 12 16 10 20 14 C22 16 24 18 24 18 C24 18 26 16 28 14 C32 10 38 12 38 18 C38 28 24 38 24 38 Z" stroke="#8a8a8a" stroke-width="3" fill="none"/>277 </svg>278 </div>279 </div>280 <div class="cardBody">281 <div class="title">Tremart Door Butt Hinges...</div>282 <div class="priceRow">283 <div class="pct">284 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 18 L4 8 H20 Z" class="icon-green"/></svg>285 50%286 </div>287 <div class="strike">1,300</div>288 <div class="new">₹643</div>289 </div>290 <div class="label pink">Only few left</div>291 <div class="ratingRow">292 <div class="stars">293 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>294 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>295 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>296 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>297 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>298 </div>299 <span class="plusBadge">300 <svg viewBox="0 0 20 20" width="16" height="16"><path d="M10 4 V16 M4 10 H16" stroke="#2357ff" stroke-width="2"/></svg>301 Plus302 </span>303 </div>304 <div class="delivery">Free delivery</div>305 </div>306 </div>307 308 <!-- Card 4 -->309 <div class="card">310 <div class="imgWrap">311 <div class="imgPh">[IMG: Silver Hinges Set]</div>312 <div class="heartBtn">313 <svg viewBox="0 0 48 48" width="32" height="32">314 <path d="M24 38 C24 38 10 28 10 18 C10 12 16 10 20 14 C22 16 24 18 24 18 C24 18 26 16 28 14 C32 10 38 12 38 18 C38 28 24 38 24 38 Z" stroke="#8a8a8a" stroke-width="3" fill="none"/>315 </svg>316 </div>317 </div>318 <div class="cardBody">319 <div class="title">Tremart Door Butt Hinges...</div>320 <div class="priceRow">321 <div class="pct">322 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 18 L4 8 H20 Z" class="icon-green"/></svg>323 73%324 </div>325 <div class="strike">1,999</div>326 <div class="new">₹530</div>327 </div>328 <div class="label pink">Only few left</div>329 <div class="ratingRow">330 <div class="stars">331 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>332 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>333 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>334 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#1aa53b"/></svg>335 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z" fill="#b7e5c4"/></svg>336 </div>337 </div>338 </div>339 </div>340 341 </div>342 343 <!-- Bottom safe area indicator (like gesture bar placeholder) -->344 <div style="position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:400px; height:10px; background:#000; opacity:0.1; border-radius:5px;"></div>345</div>346</body>347</html>