GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8"/>5<title>Product Grid - Women Hiking Shoes</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #111;15 }16 17 /* Status bar (mock) */18 .status-bar {19 height: 56px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #9e9e9e;25 font-size: 26px;26 }27 .status-icons { display: flex; gap: 22px; align-items: center; }28 .dot { width: 8px; height: 8px; background: #bababa; border-radius: 50%; display: inline-block; }29 .battery { width: 34px; height: 16px; border: 2px solid #9e9e9e; position: relative; border-radius: 3px; }30 .battery::after { content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 8px; background: #9e9e9e; border-radius: 1px; }31 .battery .lvl { position: absolute; top: 2px; left: 2px; right: 8px; bottom: 2px; background: #9e9e9e; }32 33 /* Header */34 .app-bar {35 height: 140px;36 border-bottom: 1px solid #ececec;37 padding: 14px 24px 0;38 position: relative;39 background: #ffffff;40 }41 .app-bar .title {42 position: absolute;43 top: 36px;44 left: 0; right: 0;45 text-align: center;46 font-size: 34px;47 letter-spacing: 6px;48 font-weight: 700;49 }50 .app-bar .subtitle {51 position: absolute;52 top: 86px;53 left: 0; right: 0;54 text-align: center;55 color: #666;56 font-size: 26px;57 letter-spacing: 1px;58 }59 .icon-btn {60 width: 64px; height: 64px;61 display: flex; align-items: center; justify-content: center;62 border-radius: 50%;63 color: #111;64 }65 .app-left { position: absolute; left: 20px; top: 36px; }66 .app-right { position: absolute; right: 20px; top: 36px; }67 68 /* Filter row */69 .filters {70 display: flex;71 align-items: center;72 gap: 18px;73 padding: 16px 22px;74 border-bottom: 1px solid #ececec;75 background: #ffffff;76 }77 .filter-tile {78 display: flex; align-items: center; justify-content: center;79 width: 92px; height: 76px;80 border: 2px solid #dcdcdc; border-radius: 8px;81 }82 .chip {83 padding: 18px 24px;84 border: 2px solid #dcdcdc;85 border-radius: 8px;86 font-size: 26px;87 letter-spacing: 2px;88 color: #9b9b9b;89 text-transform: uppercase;90 background: #fff;91 }92 .chip.black {93 background: #000; border-color: #000; color: #fff;94 }95 96 /* Grid */97 .grid {98 display: grid;99 grid-template-columns: 1fr 1fr;100 background: #f2f4f6;101 }102 .cell {103 border-right: 1px solid #dddddd;104 border-bottom: 1px solid #dddddd;105 background: #eef0f3;106 padding: 22px 22px 28px;107 position: relative;108 min-height: 640px;109 }110 .cell:nth-child(2n) { border-right: none; }111 .heart {112 position: absolute; right: 22px; top: 22px;113 width: 44px; height: 44px;114 }115 .product-img {116 width: 100%; height: 300px;117 background: #E0E0E0;118 border: 1px solid #BDBDBD;119 display: flex; align-items: center; justify-content: center;120 color: #757575; font-size: 26px;121 }122 .badge-ar {123 margin-top: 14px;124 display: inline-flex;125 align-items: center; justify-content: center;126 height: 34px; padding: 0 10px;127 background: #000; color: #fff; font-size: 20px;128 border-radius: 6px;129 }130 .promo {131 margin-top: 10px;132 display: inline-block;133 background: #ffffff;134 border-radius: 6px;135 padding: 10px 14px;136 font-size: 22px;137 letter-spacing: 3px;138 color: #555;139 text-transform: uppercase;140 }141 .price {142 margin-top: 12px;143 display: inline-block;144 background: #ffffff;145 border-radius: 6px;146 padding: 12px 16px;147 font-size: 28px;148 border: 1px solid #e6e6e6;149 }150 .name {151 margin-top: 18px;152 font-size: 30px;153 font-weight: 700;154 line-height: 38px;155 }156 .meta {157 margin-top: 8px;158 font-size: 24px;159 color: #666;160 display: flex; align-items: center; justify-content: space-between;161 }162 .dots { display: inline-flex; gap: 8px; align-items: center; }163 .dotc { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }164 .home-indicator {165 position: absolute; left: 50%; transform: translateX(-50%);166 bottom: 20px; width: 320px; height: 6px; background: #000; opacity: 0.2; border-radius: 4px;167 }168 169 /* Bottom nav */170 .tabbar {171 position: absolute; left: 0; right: 0; bottom: 0;172 height: 140px;173 border-top: 1px solid #e6e6e6;174 background: #ffffff;175 display: flex; align-items: center; justify-content: space-around;176 z-index: 2;177 }178 .tab {179 display: flex; flex-direction: column; align-items: center; gap: 8px;180 color: #888;181 font-size: 20px;182 }183 .tab svg { width: 54px; height: 54px; }184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Mock status bar -->190 <div class="status-bar">191 <div class="status-icons">192 <span>9:13</span>193 <span class="dot"></span>194 <span class="dot"></span>195 <span class="dot"></span>196 </div>197 <div class="status-icons">198 <svg width="28" height="22" viewBox="0 0 24 24"><path fill="#9e9e9e" d="M2 18l8-8 5 5 7-7v10H2z"/></svg>199 <div class="battery"><div class="lvl"></div></div>200 </div>201 </div>202 203 <!-- App header -->204 <div class="app-bar">205 <div class="icon-btn app-left">206 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M15.5 4l-8 8 8 8" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>207 </div>208 <div class="title">WOMEN • HIKING • SHOES</div>209 <div class="subtitle">28 RESULTS</div>210 <div class="icon-btn app-right">211 <svg viewBox="0 0 24 24" width="34" height="34"><circle cx="10.5" cy="10.5" r="6.5" stroke="#111" stroke-width="2" fill="none"/><path d="M15.5 15.5l6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/></svg>212 </div>213 </div>214 215 <!-- Filters -->216 <div class="filters">217 <div class="filter-tile">218 <svg width="40" height="40" viewBox="0 0 24 24">219 <path d="M3 6h10M3 12h14M3 18h8" stroke="#111" stroke-width="2" stroke-linecap="round"/>220 </svg>221 </div>222 <div class="chip black">1</div>223 <div class="chip">7</div>224 <div class="chip">Free Hiker</div>225 <div class="chip">RDY</div>226 <div class="chip">SWIFT</div>227 <div class="chip">AX4</div>228 <div class="chip">AGRAVIC</div>229 </div>230 231 <!-- Product grid -->232 <div class="grid">233 <!-- Card 1 -->234 <div class="cell">235 <svg class="heart" viewBox="0 0 24 24">236 <path d="M12 20s-7.5-4.7-9.2-8.2C1.5 8.9 3.2 6 6.3 6c2 0 3 1.1 3.7 2 0.7-0.9 1.7-2 3.7-2 3.1 0 4.8 2.9 3.5 5.8C19.5 15.3 12 20 12 20z"237 fill="none" stroke="#111" stroke-width="1.6"/>238 </svg>239 <div class="product-img">[IMG: Black Hiking Boot]</div>240 <div class="badge-ar">AR</div>241 <div class="promo">CODE: CELEBRATE</div>242 <div class="price">$140.00</div>243 <div class="name">TERREX AX4 Mid GORE-TEX Hiking Shoes</div>244 <div class="meta">245 <span>Women's TERREX</span>246 <span class="dots">247 <span class="dotc" style="background:#f5a623;"></span>248 <span class="dotc" style="background:#2d9cdb;"></span>249 </span>250 </div>251 </div>252 253 <!-- Card 2 -->254 <div class="cell">255 <svg class="heart" viewBox="0 0 24 24">256 <path d="M12 20s-7.5-4.7-9.2-8.2C1.5 8.9 3.2 6 6.3 6c2 0 3 1.1 3.7 2 0.7-0.9 1.7-2 3.7-2 3.1 0 4.8 2.9 3.5 5.8C19.5 15.3 12 20 12 20z"257 fill="none" stroke="#111" stroke-width="1.6"/>258 </svg>259 <div class="product-img">[IMG: Black Low Hiking Shoe]</div>260 <div class="badge-ar">AR</div>261 <div class="promo">CODE: CELEBRATE</div>262 <div class="price">$100.00</div>263 <div class="name">TERREX AX4 Hiking Shoes</div>264 <div class="meta">265 <span>Women's TERREX</span>266 <span class="dots">267 <span style="font-size:22px;color:#666;">+2</span>268 <span class="dotc" style="background:#f5a623;"></span>269 <span class="dotc" style="background:#2d9cdb;"></span>270 </span>271 </div>272 </div>273 274 <!-- Card 3 -->275 <div class="cell">276 <svg class="heart" viewBox="0 0 24 24">277 <path d="M12 20s-7.5-4.7-9.2-8.2C1.5 8.9 3.2 6 6.3 6c2 0 3 1.1 3.7 2 0.7-0.9 1.7-2 3.7-2 3.1 0 4.8 2.9 3.5 5.8C19.5 15.3 12 20 12 20z"278 fill="none" stroke="#111" stroke-width="1.6"/>279 </svg>280 <div class="product-img">[IMG: Grey/Black Hiking Shoe]</div>281 <div class="badge-ar">AR</div>282 <div class="price">$160.00</div>283 <div class="name">TERREX Swift R3 GORE-TEX Hiking Shoes</div>284 <div class="meta">285 <span>Women's TERREX</span>286 <span class="dots">287 <span style="font-size:22px;color:#666;">+1</span>288 <span class="dotc" style="background:#2d9cdb;"></span>289 </span>290 </div>291 </div>292 293 <!-- Card 4 -->294 <div class="cell">295 <svg class="heart" viewBox="0 0 24 24">296 <path d="M12 20s-7.5-4.7-9.2-8.2C1.5 8.9 3.2 6 6.3 6c2 0 3 1.1 3.7 2 0.7-0.9 1.7-2 3.7-2 3.1 0 4.8 2.9 3.5 5.8C19.5 15.3 12 20 12 20z"297 fill="none" stroke="#111" stroke-width="1.6"/>298 </svg>299 <div class="product-img">[IMG: Black GORE-TEX Shoe]</div>300 <div class="badge-ar">AR</div>301 <div class="promo">CODE: CELEBRATE</div>302 <div class="price">$120.00</div>303 <div class="name">TERREX AX4 GORE-TEX Hiking Shoes</div>304 <div class="meta">305 <span>Women's TERREX</span>306 <span class="dots">307 <span class="dotc" style="background:#f5a623;"></span>308 <span class="dotc" style="background:#2d9cdb;"></span>309 </span>310 </div>311 </div>312 </div>313 314 <!-- Bottom navigation -->315 <div class="tabbar">316 <div class="tab">317 <svg viewBox="0 0 24 24"><path d="M12 2c2 3 4 4.5 4 8a4 4 0 1 1-8 0c0-3.5 2-5 4-8z" fill="none" stroke="#777" stroke-width="2"/></svg>318 </div>319 <div class="tab">320 <svg viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5" stroke="#777" stroke-width="2" fill="none"/><path d="M15.5 15.5l6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>321 </div>322 <div class="tab">323 <svg viewBox="0 0 24 24"><path d="M12 20s-7.5-4.7-9.2-8.2C1.5 8.9 3.2 6 6.3 6c2 0 3 1.1 3.7 2 0.7-0.9 1.7-2 3.7-2 3.1 0 4.8 2.9 3.5 5.8C19.5 15.3 12 20 12 20z" fill="none" stroke="#777" stroke-width="1.6"/></svg>324 </div>325 <div class="tab">326 <svg viewBox="0 0 24 24"><path d="M6 7h14l-2 11H8L6 7z" fill="none" stroke="#777" stroke-width="2"/><circle cx="9" cy="20" r="1.5" fill="#777"/><circle cx="17" cy="20" r="1.5" fill="#777"/></svg>327 </div>328 <div class="tab">329 <svg viewBox="0 0 24 24"><path d="M12 3l9 9-9 9-9-9 9-9z" fill="none" stroke="#777" stroke-width="2"/></svg>330 </div>331 </div>332 333 <div class="home-indicator"></div>334</div>335</body>336</html>