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 - Cycling</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 color: #222;16 }17 18 /* Top dark app bar */19 .appbar {20 position: relative;21 background: #1f2426;22 height: 220px;23 color: #fff;24 padding: 0 32px;25 box-sizing: border-box;26 }27 .status {28 height: 90px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-size: 34px;33 letter-spacing: 0.5px;34 }35 .status .left { display:flex; align-items:center; gap:22px; }36 .status .right { display:flex; align-items:center; gap:20px; }37 .dot, .mini {38 width: 14px; height: 14px; border-radius: 50%; background:#fff; opacity:0.9;39 }40 .wifi {41 width: 36px; height: 22px; border:2px solid #fff; border-top-left-radius:18px; border-top-right-radius:18px; transform: rotate(0deg);42 }43 .battery {44 width: 48px; height: 26px; border:2px solid #fff; border-radius:4px; position:relative;45 }46 .battery:after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:14px; background:#fff; border-radius:2px; }47 48 .navrow {49 display:flex;50 align-items:center;51 gap:24px;52 margin-top: 10px;53 }54 .icon-btn {55 width: 70px; height: 70px; display:flex; align-items:center; justify-content:center; cursor:default;56 }57 .search-wrap {58 flex:1;59 height: 92px;60 background:#fff;61 border-radius:40px;62 display:flex;63 align-items:center;64 padding: 0 28px;65 gap:22px;66 box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;67 }68 .search-wrap input {69 border:none; outline:none; flex:1; height:100%;70 font-size:36px; color:#222; background:transparent;71 }72 .search-wrap svg { flex:0 0 auto; }73 74 /* Filter/sort row */75 .filters {76 display:flex;77 align-items:center;78 gap:22px;79 padding: 22px 28px;80 box-sizing: border-box;81 }82 .mode-icon {83 width: 72px; height: 72px; border-radius:12px; background:#2a4bff; display:flex; align-items:center; justify-content:center;84 }85 .grey-swatch { width: 72px; height: 72px; border-radius:12px; background:#c9c9c9; }86 .pill {87 flex:1;88 height: 90px;89 border:2px solid #dcdcdc;90 border-radius:24px;91 display:flex;92 align-items:center;93 padding: 0 26px;94 gap:18px;95 color:#666;96 font-size:36px;97 box-sizing: border-box;98 }99 100 /* Product grid */101 .content {102 padding: 10px 22px 190px;103 }104 .grid {105 display:flex;106 flex-wrap:wrap;107 column-gap: 22px;108 }109 .card {110 width: calc(50% - 11px);111 padding: 18px;112 box-sizing: border-box;113 }114 .img {115 width: 100%;116 height: 360px;117 background:#E0E0E0;118 border:1px solid #BDBDBD;119 border-radius: 6px;120 display:flex;121 align-items:center;122 justify-content:center;123 color:#757575;124 font-size:34px;125 text-align:center;126 }127 .brand {128 color:#7f8790; font-size:32px; margin-top:18px;129 }130 .title {131 font-size:40px; line-height: 1.2; margin:6px 0 12px;132 color:#222;133 }134 .price-row {135 display:flex; align-items: baseline; gap:16px; margin-bottom: 6px;136 }137 .price { color:#d50000; font-weight:700; font-size:44px; }138 .msrp { color:#8a8a8a; font-size:34px; }139 .strike { text-decoration: line-through; color:#9e9e9e; }140 .subtle { color:#8a8a8a; font-size:32px; }141 .rating {142 display:flex; align-items:center; gap:12px; margin:14px 0;143 }144 .stars { display:flex; gap:6px; }145 .badge {146 font-size:28px; color:#4c5a6b; background:#e9ecf3; border-radius:20px; padding:6px 14px;147 }148 .sizes { color:#8a8a8a; font-size:30px; }149 150 /* Bottom nav */151 .tabbar {152 position:absolute; left:0; right:0; bottom:0;153 height: 150px; background:#fff; border-top:1px solid #e5e5e5;154 display:flex; align-items:center; justify-content:space-around;155 padding: 0 18px;156 }157 .tab { display:flex; flex-direction:column; align-items:center; gap:10px; color:#5a6b7c; font-size:28px; }158 .tab .label { font-size:26px; }159 .bag {160 width: 82px; height: 82px; border-radius: 50%; border:2px solid #cfd6dd; display:flex; align-items:center; justify-content:center;161 }162 163 /* Helper */164 .flex-spacer { flex:1; }165 svg { display:block; }166</style>167</head>168<body>169<div id="render-target">170 171 <!-- Top App Bar -->172 <div class="appbar">173 <div class="status">174 <div class="left">175 <div>8:41</div>176 <div class="dot"></div>177 <div class="dot"></div>178 <div class="dot"></div>179 <div class="dot"></div>180 <div class="dot" style="opacity:.4"></div>181 </div>182 <div class="right">183 <div class="wifi"></div>184 <div class="battery"></div>185 </div>186 </div>187 188 <div class="navrow">189 <div class="icon-btn">190 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">191 <path d="M15.5 19.5 8 12l7.5-7.5-1.5-1.5L5 12l9 9 1.5-1.5z"/>192 </svg>193 </div>194 <div class="icon-btn">195 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">196 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>197 </svg>198 </div>199 <div class="search-wrap">200 <svg width="38" height="38" viewBox="0 0 24 24" fill="#9e9e9e">201 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.471 6.471 0 0 0 4.23-1.57l.27.28v.79L20 21.5 21.5 20l-6-6zM9.5 14C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/>202 </svg>203 <input type="text" value="Cycle life guard">204 <svg width="42" height="42" viewBox="0 0 24 24" fill="#9e9e9e">205 <path d="M3 3h6v2H5v4H3V3zm16 0h2v6h-2V5h-4V3h4zM3 15h2v4h4v2H3v-6zm16 4v-4h2v6h-6v-2h4z"/>206 </svg>207 </div>208 </div>209 </div>210 211 <!-- Filters Row -->212 <div class="filters">213 <div class="mode-icon">214 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">215 <path d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z"/>216 </svg>217 </div>218 <div class="grey-swatch"></div>219 <div class="pill">220 <svg width="34" height="34" viewBox="0 0 24 24" fill="#777">221 <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>222 </svg>223 <span>Filter</span>224 </div>225 <div class="pill">226 <svg width="34" height="34" viewBox="0 0 24 24" fill="#777">227 <path d="M3 7h14V5H3v2zm0 6h10v-2H3v2zm0 6h6v-2H3v2zm13-6 4 4 4-4h-3V3h-2v10h-3z"/>228 </svg>229 <span>Sort by</span>230 </div>231 </div>232 233 <!-- Products -->234 <div class="content">235 <div class="grid">236 237 <!-- Card 1 -->238 <div class="card">239 <div class="img">[IMG: Men's Mountain Bike]</div>240 <div class="brand">Muddyfox</div>241 <div class="title">Anarchy 100 Men's Mountain Bike</div>242 <div class="price-row">243 <div class="price">£160.00</div>244 <div class="msrp">MSRP</div>245 <div class="msrp strike">£320.00</div>246 </div>247 <div class="sizes">Sizes: 26Wh/18Fr, 26Wh/20Fr</div>248 <div class="rating">249 <div class="stars">250 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>251 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>252 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>253 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>254 <svg width="30" height="30" viewBox="0 0 24 24" fill="#bfc5ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>255 </div>256 <div class="badge">(22)</div>257 </div>258 </div>259 260 <!-- Card 2 -->261 <div class="card">262 <div class="img">[IMG: Aerolite Shin Guards]</div>263 <div class="brand">Sondico</div>264 <div class="title">Aerolite Shin Guards</div>265 <div class="price-row">266 <div class="msrp">From</div>267 <div class="price">£7.99</div>268 <div class="msrp">MSRP</div>269 </div>270 <div class="sizes">Sizes: Chd (XXS), Chd (XS), Junior (S), Adults (M), Adults (L)</div>271 <div class="rating">272 <div class="stars">273 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>274 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>275 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>276 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>277 <svg width="30" height="30" viewBox="0 0 24 24" fill="#bfc5ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>278 </div>279 <div class="badge">(10)</div>280 </div>281 </div>282 283 <!-- Card 3 -->284 <div class="card">285 <div class="img">[IMG: Ladies Boyleg Swimsuit]</div>286 <div class="brand">Slazenger</div>287 <div class="title">LYCRA XTRA LIFE Boyleg Swimsuit Ladies</div>288 <div class="price-row">289 <div class="price">£15.00</div>290 <div class="msrp">MSRP</div>291 <div class="msrp strike">£36.99</div>292 </div>293 <div class="sizes">Sizes: 6 (XXS) - 14 (M)</div>294 <div class="rating">295 <div class="stars">296 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>297 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>298 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>299 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>300 <svg width="30" height="30" viewBox="0 0 24 24" fill="#bfc5ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>301 </div>302 <div class="badge">(11)</div>303 </div>304 </div>305 306 <!-- Card 4 -->307 <div class="card">308 <div class="img">[IMG: Black Cycling Helmet]</div>309 <div class="brand">Fox</div>310 <div class="title">Mainframe Helmet MIPS</div>311 <div class="price-row">312 <div class="price">£39.99</div>313 <div class="msrp">RRP</div>314 <div class="msrp strike">£79.99</div>315 </div>316 <div class="sizes">Sizes: S / M / L</div>317 <div class="rating">318 <div class="stars">319 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>320 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>321 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>322 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1a39ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>323 <svg width="30" height="30" viewBox="0 0 24 24" fill="#bfc5ff"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.2-.6L12 2l2.8 7 7.2.6-5.5 4.3 1.7 7.1z"/></svg>324 </div>325 <div class="badge">(10)</div>326 </div>327 </div>328 329 </div>330 </div>331 332 <!-- Bottom navigation -->333 <div class="tabbar">334 <div class="tab">335 <svg width="44" height="44" viewBox="0 0 24 24" fill="#2b3b4d"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>336 <div class="label">Home</div>337 </div>338 <div class="tab">339 <svg width="44" height="44" viewBox="0 0 24 24" fill="#2b3b4d"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.471 6.471 0 0 0 4.23-1.57l.27.28v.79L20 21.5 21.5 20l-6-6zM9.5 14C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/></svg>340 <div class="label">Search</div>341 </div>342 <div class="tab">343 <div class="bag">344 <svg width="40" height="40" viewBox="0 0 24 24" fill="#607384">345 <path d="M6 7h12l1 14H5L6 7zm3-3h6v3H9V4z"/>346 </svg>347 </div>348 <div class="label">Bag</div>349 </div>350 <div class="tab">351 <svg width="44" height="44" viewBox="0 0 24 24" fill="#2b3b4d"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 3.99 4 6.5 4 8.04 4 9.54 4.81 10.35 6.08 11.16 4.81 12.66 4 14.2 4 16.71 4 18.7 6 18.7 8.5c0 3.78-3.4 6.86-8.25 11.54L12 21.35z"/></svg>352 <div class="label">Saved</div>353 </div>354 <div class="tab">355 <svg width="44" height="44" viewBox="0 0 24 24" fill="#2b3b4d"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8V22h19.2v-2.8c0-3.2-6.4-4.8-9.6-4.8z"/></svg>356 <div class="label">Account</div>357 </div>358 </div>359 360</div>361</body>362</html>