GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Quechua Hiking Boots - UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #ffffff;13 border-radius: 24px;14 box-shadow: 0 8px 24px rgba(0,0,0,0.15);15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 height: 80px;21 background: #f3f3f4;22 display: flex;23 align-items: center;24 padding: 0 24px;25 font-size: 28px;26 color: #666;27 }28 .status-right { margin-left:auto; display:flex; gap:18px; align-items:center; }29 30 /* App bar */31 .app-bar {32 height: 120px;33 display:flex;34 align-items:center;35 padding: 0 24px;36 border-bottom: 1px solid #e3e3e3;37 background:#fff;38 }39 .app-title {40 font-size: 44px;41 font-weight: 600;42 margin-left: 16px;43 }44 .app-actions {45 margin-left:auto;46 display:flex;47 gap:34px;48 align-items:center;49 }50 .icon-btn {51 width: 56px; height:56px; display:flex; align-items:center; justify-content:center;52 }53 .icon { width: 40px; height: 40px; fill:#222; }54 55 /* Grid */56 .content {57 position: absolute;58 top: 200px;59 left: 0;60 right: 0;61 bottom: 160px;62 overflow:hidden;63 }64 .grid {65 padding: 20px;66 display: grid;67 grid-template-columns: 1fr 1fr;68 gap: 20px;69 }70 .card {71 width: 510px;72 background:#fff;73 border: 1px solid #e0e0e0;74 border-top: none;75 box-shadow: inset 0 1px 0 #eaeaea;76 }77 .img-wrap {78 position: relative;79 height: 320px;80 background:#E0E0E0;81 border: 1px solid #BDBDBD;82 display:flex;83 align-items:center;84 justify-content:center;85 color:#757575;86 font-size: 26px;87 text-align:center;88 }89 .heart-circle {90 position:absolute;91 right: 16px; top: 16px;92 width: 60px; height: 60px;93 background:#fff;94 border-radius:50%;95 border: 2px solid #d9d9d9;96 display:flex; align-items:center; justify-content:center;97 box-shadow: 0 2px 4px rgba(0,0,0,0.06);98 }99 .bestseller {100 position:absolute; left: 16px; top: -20px;101 background:#3b82f6; color:#fff; font-weight:700; font-size:24px;102 padding: 6px 12px; border-radius: 6px;103 }104 .info {105 padding: 16px;106 }107 .rating {108 display:inline-flex; align-items:center; gap:10px;109 padding: 8px 12px;110 border:1px solid #e0e0e0;111 border-radius: 10px;112 font-size: 26px; color:#333;113 background:#fff;114 }115 .rating .star { width:26px; height:26px; fill:#f4b400; }116 .brand { margin-top: 16px; font-size: 28px; font-weight: 700; letter-spacing: 0.5px; }117 .title { margin-top: 6px; font-size: 28px; color:#444; line-height: 1.3; }118 .price-row { margin-top: 16px; display:flex; align-items:center; gap:16px; }119 .price-tag {120 background:#ffe04d; padding: 10px 14px; border-radius: 6px;121 font-size: 32px; font-weight: 800; color:#222;122 }123 .old-price {124 font-size: 26px; color:#777; text-decoration: line-through;125 }126 .right-badge {127 position:absolute; right: 16px; top: 344px;128 }129 130 .umbrella {131 width: 58px; height: 58px; background:#fff; border:2px dashed #b2d7ea; border-radius:50%;132 display:flex; align-items:center; justify-content:center;133 }134 .umbrella svg { width:32px; height:32px; fill:#61b3d5; }135 136 .eco-pill {137 display:inline-flex; align-items:center; gap:10px;138 background:#e5f8e5; color:#2b7d2f; border:1px solid #98cc9a;139 border-radius: 24px; padding: 8px 12px; font-size: 24px; margin-top: 8px;140 }141 .eco-dot { width:16px; height:16px; background:#2b7d2f; border-radius:50%; }142 143 .square-badge {144 width: 42px; height: 42px; border-radius:8px; border:2px solid #999; background:#fff;145 display:inline-block; margin-left: 8px;146 }147 148 /* Bottom action bar */149 .bottom-bar {150 position:absolute; left:0; right:0; bottom:0;151 height: 160px; background:#fff; border-top:1px solid #e4e4e4;152 display:flex; align-items:center; justify-content:space-around;153 font-size: 34px; color:#333;154 }155 .bottom-item { display:flex; align-items:center; gap:18px; }156 .sort-dot {157 width:16px; height:16px; background:#e64a45; border-radius:50%;158 margin-right: 4px;159 }160 .filter-icon, .gender-icon, .sort-icon { width: 40px; height: 40px; fill:#333; }161 162 /* Small helpers */163 .muted { color:#777; }164</style>165</head>166<body>167<div id="render-target">168 169 <!-- Status bar -->170 <div class="status-bar">171 <div>10:36</div>172 <div style="margin-left:18px;">14°</div>173 <div class="status-right">174 <span>◦◦</span>175 <span>🔔</span>176 <span>📶</span>177 <span>🔋</span>178 </div>179 </div>180 181 <!-- App bar -->182 <div class="app-bar">183 <div class="icon-btn" title="Back">184 <svg class="icon" viewBox="0 0 24 24">185 <path d="M15.5 4l-8 8 8 8 1.4-1.4L10.3 12l6.6-6.6z"/>186 </svg>187 </div>188 <div class="app-title">Quechua Hiking Boot...</div>189 <div class="app-actions">190 <div class="icon-btn" title="Search">191 <svg class="icon" viewBox="0 0 24 24">192 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/>193 </svg>194 </div>195 <div class="icon-btn" title="Wishlist">196 <svg class="icon" viewBox="0 0 24 24">197 <path d="M12 21s-6.7-4.5-9.2-7.1C-.4 11.4 1 7 4.9 6.2c2-.4 3.7.4 5.1 1.8 1.4-1.4 3.1-2.2 5.1-1.8 3.9.8 5.3 5.2 2.1 7.7C18.7 16.5 12 21 12 21z" fill="none" stroke="#222" stroke-width="1.6"/>198 </svg>199 </div>200 <div class="icon-btn" title="Cart">201 <svg class="icon" viewBox="0 0 24 24">202 <path d="M7 4h-2l-1 2v2h2l3 9h9l2-8H9l-1-5zM7 21a1.7 1.7 0 100-3.4 1.7 1.7 0 000 3.4zm9 0a1.7 1.7 0 100-3.4 1.7 1.7 0 000 3.4z"/>203 </svg>204 </div>205 </div>206 </div>207 208 <!-- Content Grid -->209 <div class="content">210 <div class="grid">211 212 <!-- Card 1 -->213 <div class="card">214 <div class="img-wrap">215 [IMG: Men's Hiking boots - NH100]216 <div class="heart-circle">217 <svg viewBox="0 0 24 24" width="28" height="28">218 <path d="M12 21s-6.7-4.5-9.2-7.1C-.4 11.4 1 7 4.9 6.2c2-.4 3.7.4 5.1 1.8 1.4-1.4 3.1-2.2 5.1-1.8 3.9.8 5.3 5.2 2.1 7.7C18.7 16.5 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.4"/>219 </svg>220 </div>221 </div>222 <div class="info">223 <div class="rating">224 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8 2 9.4l5.4 4.7-1.6 6.9z"/></svg>225 <span>4.3</span>226 </div>227 <div class="brand">QUECHUA</div>228 <div class="title">Men's Hiking boots - NH100</div>229 <div class="price-row">230 <div class="price-tag">₹999</div>231 <div class="old-price">₹1,699</div>232 </div>233 </div>234 </div>235 236 <!-- Card 2 -->237 <div class="card">238 <div class="img-wrap">239 <div class="bestseller">BESTSELLER</div>240 [IMG: Women Hiking Boots NH100 Mid Grey]241 <div class="heart-circle">242 <svg viewBox="0 0 24 24" width="28" height="28">243 <path d="M12 21s-6.7-4.5-9.2-7.1C-.4 11.4 1 7 4.9 6.2c2-.4 3.7.4 5.1 1.8 1.4-1.4 3.1-2.2 5.1-1.8 3.9.8 5.3 5.2 2.1 7.7C18.7 16.5 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.4"/>244 </svg>245 </div>246 </div>247 <div class="info">248 <div class="rating">249 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8 2 9.4l5.4 4.7-1.6 6.9z"/></svg>250 <span>4.5</span>251 </div>252 <div class="brand">QUECHUA</div>253 <div class="title">Women Hiking Boots NH100 Mid Grey</div>254 <div class="price-row">255 <div class="price-tag">₹1,499</div>256 <div class="old-price">₹2,499</div>257 </div>258 </div>259 </div>260 261 <!-- Card 3 -->262 <div class="card">263 <div class="img-wrap">264 [IMG: Men Snow Hiking Warm and Waterproof Boots]265 <div class="heart-circle">266 <svg viewBox="0 0 24 24" width="28" height="28">267 <path d="M12 21s-6.7-4.5-9.2-7.1C-.4 11.4 1 7 4.9 6.2c2-.4 3.7.4 5.1 1.8 1.4-1.4 3.1-2.2 5.1-1.8 3.9.8 5.3 5.2 2.1 7.7C18.7 16.5 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.4"/>268 </svg>269 </div>270 </div>271 <div class="info">272 <div class="rating">273 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8 2 9.4l5.4 4.7-1.6 6.9z"/></svg>274 <span>4.5</span>275 </div>276 <div class="brand">QUECHUA</div>277 <div class="title">Men Snow Hiking Warm and Waterproof B...</div>278 <div class="price-row">279 <div class="price-tag">₹2,999</div>280 <div class="old-price">₹3,499</div>281 </div>282 <div class="eco-pill"><span class="eco-dot"></span> ECO DESIGN</div>283 </div>284 </div>285 286 <!-- Card 4 -->287 <div class="card">288 <div class="img-wrap">289 [IMG: Women's Waterproof Hiking Boots - NH150 Blue]290 <div class="heart-circle">291 <svg viewBox="0 0 24 24" width="28" height="28">292 <path d="M12 21s-6.7-4.5-9.2-7.1C-.4 11.4 1 7 4.9 6.2c2-.4 3.7.4 5.1 1.8 1.4-1.4 3.1-2.2 5.1-1.8 3.9.8 5.3 5.2 2.1 7.7C18.7 16.5 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.4"/>293 </svg>294 </div>295 <div class="right-badge">296 <div class="umbrella">297 <svg viewBox="0 0 24 24">298 <path d="M12 2C7 2 3 6 3 11h18C21 6 17 2 12 2zm1 9v6a2 2 0 01-4 0v-1h2v1a1 1 0 002 0V11h0z"/>299 </svg>300 </div>301 </div>302 </div>303 <div class="info">304 <div class="rating">305 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8 2 9.4l5.4 4.7-1.6 6.9z"/></svg>306 <span>4.5</span>307 </div>308 <div class="brand">QUECHUA</div>309 <div class="title">Women's Waterproof Hiking Boots - NH150...</div>310 <div class="price-row">311 <div class="price-tag">₹2,999</div>312 <div class="old-price">₹3,499</div>313 </div>314 </div>315 </div>316 317 <!-- Card 5 -->318 <div class="card">319 <div class="img-wrap">320 [IMG: High Ankle Blue & Tan Hiking Boots]321 </div>322 <div class="info">323 <div class="brand">QUECHUA</div>324 <div class="title">Men's High Warm Hiking Boots</div>325 <div class="price-row">326 <div class="price-tag">₹2,999</div>327 <div class="old-price">₹3,499</div>328 </div>329 </div>330 </div>331 332 <!-- Card 6 -->333 <div class="card">334 <div class="img-wrap">335 <div class="bestseller">BESTSELLER</div>336 [IMG: Low Cut Hiking Shoe - Black with Red]337 </div>338 <div class="info">339 <div class="brand">QUECHUA</div>340 <div class="title">Men's Hiking Shoes - NH100 Low</div>341 <div class="price-row">342 <div class="price-tag">₹2,999</div>343 <div class="old-price">₹3,499</div>344 <span class="square-badge"></span>345 <span class="square-badge"></span>346 </div>347 </div>348 </div>349 350 </div>351 </div>352 353 <!-- Bottom bar -->354 <div class="bottom-bar">355 <div class="bottom-item">356 <svg class="gender-icon" viewBox="0 0 24 24"><path d="M9 12a4 4 0 118 0 4 4 0 01-8 0zm-4 8h6v-2H7v-2H5v4zm12-12h2V4h-4v2h2v2z"/></svg>357 <div>GENDER</div>358 </div>359 <div class="bottom-item">360 <span class="sort-dot"></span>361 <svg class="sort-icon" viewBox="0 0 24 24"><path d="M6 9h12V7H6v2zm0 4h8v-2H6v2zm0 4h4v-2H6v2z"/></svg>362 <div>SORT</div>363 </div>364 <div class="bottom-item">365 <svg class="filter-icon" viewBox="0 0 24 24"><path d="M3 5h18l-7 8v5l-4 2v-7L3 5z"/></svg>366 <div>FILTER</div>367 </div>368 </div>369 370</div>371</body>372</html>