GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Skechers Women's shoes - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(90deg, #8fd5cf 0%, #a7e6de 100%);15 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 96px;25 padding: 0 32px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #0b3d3a;30 font-size: 36px;31 opacity: 0.9;32 }33 .status-left, .status-right { display: flex; align-items: center; gap: 24px; }34 .sb-icon {35 width: 40px; height: 40px; border-radius: 8px; background: rgba(0,0,0,0.15);36 display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 24px;37 }38 .dot { width: 10px; height: 10px; background:#0b3d3a; border-radius:50%; opacity:0.5; }39 40 /* Top search header */41 .top-header {42 position: absolute;43 top: 96px;44 left: 0;45 width: 1080px;46 padding: 18px 24px 24px 24px;47 }48 .search-row {49 display: flex; align-items: center; gap: 18px;50 }51 .back-btn {52 width: 72px; height: 72px; border-radius: 36px;53 display: flex; align-items: center; justify-content: center;54 }55 .search-pill {56 flex: 1;57 height: 96px;58 background: #ffffff;59 border-radius: 48px;60 box-shadow: 0 6px 16px rgba(0,0,0,0.15);61 display: flex; align-items: center; padding: 0 32px; gap: 24px;62 }63 .search-text { font-size: 34px; color: #444; flex: 1; }64 .icon-btn {65 width: 72px; height: 72px; border-radius: 36px; background: #f4f4f4;66 display: flex; align-items: center; justify-content: center;67 }68 69 /* Location row */70 .location-row {71 margin-top: 28px;72 background: rgba(255,255,255,0.85);73 border-radius: 16px;74 padding: 24px 28px;75 display: flex; align-items: center; justify-content: space-between;76 color: #1f3f3d;77 font-size: 32px;78 }79 .loc-left { display: flex; align-items: center; gap: 20px; }80 .filters-right { display: flex; align-items: center; gap: 16px; color: #2f5754; }81 82 /* Prime toggle row */83 .prime-row {84 margin-top: 28px;85 padding: 0 24px;86 display: flex; align-items: center; gap: 16px;87 color: #2f5754;88 }89 .prime-badge {90 display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #1e88e5; font-size: 32px;91 }92 .toggle {93 width: 100px; height: 56px; background: #e6e6e6; border-radius: 28px; position: relative;94 }95 .toggle::after {96 content: ""; position: absolute; top: 6px; left: 6px; width: 44px; height: 44px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.2);97 }98 99 /* Sponsored block */100 .sponsored-card {101 margin-top: 24px;102 margin-left: 24px; margin-right: 24px;103 background: #ffffff;104 border-radius: 20px;105 box-shadow: 0 4px 12px rgba(0,0,0,0.08);106 padding: 24px;107 }108 .brand-row {109 display: flex; align-items: center; gap: 24px; margin-bottom: 24px;110 }111 .brand-logo {112 width: 96px; height: 96px; background: #0f3970; border-radius: 12px;113 display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:26px;114 }115 .brand-title { font-size: 40px; color: #333; }116 117 .hero-image {118 width: 100%; height: 540px; border-radius: 24px;119 background: #E0E0E0; border: 1px solid #BDBDBD;120 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 36px;121 }122 123 /* Horizontal product tiles overlay */124 .tile-row {125 display: flex; gap: 24px; margin-top: 24px;126 }127 .tile {128 flex: 1; min-width: 320px;129 background: #ffffff; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.12);130 padding: 20px;131 }132 .img-ph {133 width: 100%; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;134 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 28px; border-radius: 12px;135 }136 .rating { display:flex; align-items:center; gap: 12px; margin-top: 16px; font-size: 30px; color:#444; }137 .stars { display:flex; gap:6px; }138 .star svg { width: 30px; height: 30px; }139 .rating .count { color:#555; }140 .prime-inline { display:flex; align-items:center; gap:8px; color:#1e88e5; font-weight:600; margin-top:6px; }141 142 .shop-row {143 margin: 16px 24px 0 24px;144 display:flex; align-items:center; justify-content: space-between; color:#2c5a58; font-size:34px;145 }146 .sponsored-note { color:#7a7a7a; font-size:28px; display:flex; align-items:center; gap:10px; }147 148 /* Section header */149 .section-header {150 margin: 36px 24px 18px 24px; color:#4b4b4b; font-size:34px;151 }152 153 /* Product grid */154 .grid {155 display: grid;156 grid-template-columns: 1fr 1fr;157 gap: 24px;158 padding: 0 24px;159 }160 .product-card {161 background: #ffffff; border-radius: 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.08);162 padding: 18px;163 }164 .product-image {165 width: 100%; height: 420px; background: #E0E0E0; border: 1px solid #BDBDBD;166 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; border-radius: 16px;167 }168 .product-title { margin-top:16px; font-size:32px; color:#333; }169 .product-meta { display:flex; align-items:center; justify-content: space-between; margin-top:12px; color:#666; font-size:28px; }170 171 /* Bottom navigation */172 .bottom-bar {173 position: absolute; left: 0; bottom: 96px;174 width: 1080px; height: 200px; background: #ffffff;175 box-shadow: 0 -6px 16px rgba(0,0,0,0.08);176 display:flex; align-items:center; justify-content: space-around;177 }178 .nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#888; }179 .nav-item.active { color:#1e88e5; }180 .nav-icon {181 width: 56px; height: 56px; display:flex; align-items:center; justify-content:center;182 }183 .nav-label { font-size:28px; }184 185 /* Gesture bar and spinner */186 .gesture-area { position:absolute; left:0; bottom: 24px; width:100%; display:flex; align-items:center; justify-content:center; }187 .gesture-pill { width: 300px; height: 16px; background: #cfcfcf; border-radius: 12px; }188 .center-spinner {189 position:absolute; bottom: 160px; left:50%; transform: translateX(-50%);190 width: 80px; height: 80px; border-radius: 50%;191 border: 6px solid #d9d9d9; border-top-color: #9e9e9e;192 }193 194 /* Simple link style */195 .link { color:#1e88e5; text-decoration:none; }196</style>197</head>198<body>199<div id="render-target">200 201 <!-- Status bar -->202 <div class="status-bar">203 <div class="status-left">204 <div>8:31</div>205 <div class="sb-icon">LR</div>206 <div class="sb-icon">🏃</div>207 <div class="sb-icon">🧾</div>208 <div class="dot"></div>209 </div>210 <div class="status-right">211 <div class="sb-icon">📶</div>212 <div class="sb-icon">🔋</div>213 </div>214 </div>215 216 <!-- Search header -->217 <div class="top-header">218 <div class="search-row">219 <div class="back-btn">220 <svg viewBox="0 0 24 24" width="44" height="44">221 <path d="M15 19L8 12l7-7" stroke="#1f3f3d" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>222 </svg>223 </div>224 <div class="search-pill">225 <svg viewBox="0 0 24 24" width="40" height="40">226 <circle cx="10" cy="10" r="6.5" stroke="#666" stroke-width="2" fill="none"></circle>227 <path d="M15.5 15.5L21 21" stroke="#666" stroke-width="2" stroke-linecap="round"></path>228 </svg>229 <div class="search-text">Skechers Women's shoes</div>230 <div class="icon-btn">231 <svg viewBox="0 0 24 24" width="32" height="32">232 <rect x="3" y="5" width="18" height="14" rx="3" ry="3" stroke="#666" stroke-width="2" fill="none"></rect>233 <circle cx="12" cy="12" r="3" stroke="#666" stroke-width="2" fill="none"></circle>234 </svg>235 </div>236 </div>237 </div>238 239 <div class="location-row">240 <div class="loc-left">241 <svg viewBox="0 0 24 24" width="36" height="36">242 <path d="M12 22s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12z" stroke="#2f5754" stroke-width="2" fill="none"></path>243 <circle cx="12" cy="10" r="3" stroke="#2f5754" stroke-width="2" fill="none"></circle>244 </svg>245 <div>Select a location to see product availability</div>246 <svg viewBox="0 0 24 24" width="32" height="32">247 <path d="M6 9l6 6 6-6" stroke="#2f5754" stroke-width="2.5" fill="none" stroke-linecap="round"></path>248 </svg>249 </div>250 <div class="filters-right">251 <div>Filters</div>252 <svg viewBox="0 0 24 24" width="30" height="30">253 <path d="M4 5h16M7 12h10M10 19h4" stroke="#2f5754" stroke-width="2.5" fill="none" stroke-linecap="round"></path>254 </svg>255 </div>256 </div>257 258 <div class="prime-row">259 <div class="prime-badge">260 <svg viewBox="0 0 24 24" width="28" height="28">261 <path d="M5 12l4 4 10-10" stroke="#1e88e5" stroke-width="2.5" fill="none" stroke-linecap="round"></path>262 </svg>263 <span>prime</span>264 </div>265 <div class="toggle"></div>266 </div>267 </div>268 269 <!-- Sponsored content card -->270 <div class="sponsored-card" style="top: 0; position: absolute; margin-top: 360px;">271 <div class="brand-row">272 <div class="brand-logo">S</div>273 <div class="brand-title">Style, comfort & tech</div>274 </div>275 276 <div class="hero-image">[IMG: Lifestyle banner - model holding neon shoe]</div>277 278 <div class="tile-row">279 <div class="tile">280 <div class="img-ph">[IMG: Pink slip-on shoe]</div>281 <div class="rating">282 <div class="stars">283 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>284 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>285 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>286 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>287 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ffcc80"></path></svg></div>288 </div>289 <div class="count">405</div>290 </div>291 <div class="prime-inline">292 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M5 12l4 4 10-10" stroke="#1e88e5" stroke-width="2.5" fill="none" stroke-linecap="round"></path></svg>293 <span>prime</span>294 </div>295 </div>296 297 <div class="tile">298 <div class="img-ph">[IMG: Navy lace-up shoe]</div>299 <div class="rating">300 <div class="stars">301 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>302 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>303 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>304 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>305 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ffcc80"></path></svg></div>306 </div>307 <div class="count">1,032</div>308 </div>309 <div class="prime-inline">310 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M5 12l4 4 10-10" stroke="#1e88e5" stroke-width="2.5" fill="none" stroke-linecap="round"></path></svg>311 <span>prime</span>312 </div>313 </div>314 </div>315 </div>316 317 <!-- Shop & sponsored row -->318 <div class="shop-row" style="top: 1320px; position: absolute; width: calc(100% - 48px);">319 <a class="link" href="#">Shop Skechers</a>320 <div class="sponsored-note">321 <span>Sponsored</span>322 <svg viewBox="0 0 24 24" width="26" height="26"><circle cx="12" cy="12" r="9" stroke="#7a7a7a" stroke-width="2" fill="none"></circle><path d="M12 8v8M12 6h.01" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"></path></svg>323 </div>324 </div>325 326 <!-- Section header -->327 <div class="section-header" style="position:absolute; top: 1380px;">328 Price and other details may vary based on product size and colour.329 </div>330 331 <!-- Product grid -->332 <div class="grid" style="position:absolute; top: 1440px; width: 100%;">333 <div class="product-card">334 <div class="product-image">[IMG: Black sneaker]</div>335 <div class="product-title">Skechers Women's Sneaker - Black</div>336 <div class="product-meta">337 <div class="prime-inline">338 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M5 12l4 4 10-10" stroke="#1e88e5" stroke-width="2.5" fill="none" stroke-linecap="round"></path></svg>339 <span>prime</span>340 </div>341 <div class="rating">342 <div class="stars">343 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>344 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>345 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>346 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>347 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ffcc80"></path></svg></div>348 </div>349 </div>350 </div>351 </div>352 353 <div class="product-card">354 <div class="product-image">[IMG: White sneaker]</div>355 <div class="product-title">Skechers Women's Sneaker - White</div>356 <div class="product-meta">357 <div class="prime-inline">358 <svg viewBox="0 0 24 24" width="22" height="22"><path d="M5 12l4 4 10-10" stroke="#1e88e5" stroke-width="2.5" fill="none" stroke-linecap="round"></path></svg>359 <span>prime</span>360 </div>361 <div class="rating">362 <div class="stars">363 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>364 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>365 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>366 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ff8f00"></path></svg></div>367 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.9 6.9-1z" fill="#ffcc80"></path></svg></div>368 </div>369 </div>370 </div>371 </div>372 </div>373 374 <!-- Bottom navigation bar -->375 <div class="bottom-bar">376 <div class="nav-item active">377 <div class="nav-icon">378 <svg viewBox="0 0 24 24" width="48" height="48">379 <path d="M3 10l9-7 9 7v10H3V10z" stroke="#1e88e5" stroke-width="2.2" fill="none" stroke-linejoin="round"></path>380 </svg>381 </div>382 <div class="nav-label">Home</div>383 </div>384 <div class="nav-item">385 <div class="nav-icon">386 <svg viewBox="0 0 24 24" width="48" height="48">387 <circle cx="12" cy="8" r="4.5" stroke="#777" stroke-width="2" fill="none"></circle>388 <path d="M4 22c0-5 4-8 8-8s8 3 8 8" stroke="#777" stroke-width="2" fill="none"></path>389 </svg>390 </div>391 <div class="nav-label">You</div>392 </div>393 <div class="nav-item">394 <div class="nav-icon">395 <svg viewBox="0 0 24 24" width="48" height="48">396 <path d="M4 12a8 8 0 1 0 16 0A8 8 0 1 0 4 12zm8-6v6l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>397 </svg>398 </div>399 <div class="nav-label">More</div>400 </div>401 <div class="nav-item">402 <div class="nav-icon">403 <svg viewBox="0 0 24 24" width="48" height="48">404 <path d="M6 6h14l-2 9H8L6 6zM8 20a2 2 0 1 0 .01 0M18 20a2 2 0 1 0 .01 0" stroke="#777" stroke-width="2" fill="none"></path>405 </svg>406 </div>407 <div class="nav-label">Cart</div>408 </div>409 <div class="nav-item">410 <div class="nav-icon">411 <svg viewBox="0 0 24 24" width="48" height="48">412 <path d="M4 6h16M4 12h16M4 18h16" stroke="#777" stroke-width="2.5" fill="none" stroke-linecap="round"></path>413 </svg>414 </div>415 <div class="nav-label">Menu</div>416 </div>417 </div>418 419 <!-- Spinner and gesture bar -->420 <div class="center-spinner"></div>421 <div class="gesture-area"><div class="gesture-pill"></div></div>422 423</div>424</body>425</html>