GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Skechers Women's shoes - UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 font-family: Arial, Helvetica, sans-serif;16 color: #111;17 }18 /* Status bar */19 .status-bar {20 height: 60px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-size: 28px;26 color: #2a2a2a;27 }28 .status-icons {29 display: flex;30 gap: 18px;31 align-items: center;32 }33 .icon { width: 36px; height: 36px; }34 /* Gradient header area */35 .header {36 background: linear-gradient(90deg, #b9e6d8, #a8dcd7);37 padding: 18px 24px 24px 24px;38 box-sizing: border-box;39 }40 .search-row {41 display: flex;42 align-items: center;43 gap: 22px;44 }45 .back-btn {46 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;47 }48 .search-bar {49 flex: 1;50 background: #fff;51 height: 72px;52 border-radius: 36px;53 box-shadow: 0 2px 6px rgba(0,0,0,0.14);54 display: flex;55 align-items: center;56 padding: 0 22px;57 box-sizing: border-box;58 gap: 16px;59 }60 .search-text {61 font-size: 30px;62 color: #222;63 flex: 1;64 white-space: nowrap;65 overflow: hidden;66 text-overflow: ellipsis;67 }68 .camera-btn {69 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;70 border-radius: 16px;71 background: #f3f3f3;72 }73 .loc-filters {74 margin-top: 16px;75 display: grid;76 grid-template-columns: 1fr 220px;77 align-items: center;78 background: rgba(255,255,255,0.55);79 border-radius: 20px;80 overflow: hidden;81 }82 .loc-left {83 display: flex; align-items: center; gap: 16px;84 padding: 20px 24px;85 font-size: 28px;86 color: #1a1a1a;87 }88 .loc-left .muted { color: #3e5961; }89 .filters {90 display: flex; align-items: center; justify-content: center; gap: 12px;91 padding: 20px 0;92 border-left: 1px solid #e6e6e6;93 background: #fff;94 color: #2d5961;95 font-size: 28px;96 }97 .prime-toggle {98 display: flex; align-items: center; gap: 20px;99 padding: 22px 24px;100 background: #fff;101 border-top-left-radius: 20px; border-top-right-radius: 20px;102 margin-top: 18px;103 }104 .prime-badge {105 display: inline-flex; align-items: center; gap: 8px; color: #3897ff; font-weight: bold; font-size: 26px;106 }107 .tick {108 width: 20px; height: 20px; background: #ffcc4d; border-radius: 4px;109 display: inline-block;110 }111 .toggle {112 width: 92px; height: 48px; background: #e9e9e9; border-radius: 24px; position: relative;113 }114 .toggle::after {115 content: "";116 width: 44px; height: 44px; background: #fff; border-radius: 50%;117 position: absolute; top: 2px; left: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);118 }119 /* Content area */120 .content { padding: 16px 24px 0 24px; }121 .brand-header {122 display: flex; align-items: center; gap: 20px; padding: 16px 0;123 }124 .brand-logo {125 width: 90px; height: 90px; background: #183c6b; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold;126 font-size: 24px;127 }128 .brand-title { font-size: 34px; color: #222; }129 .hero {130 width: 100%; height: 520px; background: #E0E0E0; border: 1px solid #BDBDBD;131 border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;132 margin-top: 12px;133 }134 .cards-row {135 display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px;136 }137 .product-card {138 background: #fff; border-radius: 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.12);139 display: grid; grid-template-columns: 220px 1fr; align-items: center;140 }141 .product-card .img {142 height: 170px; margin: 20px; display: flex; align-items: center; justify-content: center;143 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; border-radius: 12px;144 }145 .rating-col {146 padding: 24px; display: flex; flex-direction: column; gap: 12px;147 }148 .stars { display: flex; gap: 6px; align-items: center; }149 .star { width: 28px; height: 28px; }150 .rating-count { font-size: 26px; color: #333; margin-left: 10px; }151 .prime-small { color: #3897ff; font-weight: bold; font-size: 24px; display: flex; align-items: center; gap: 6px; }152 /* Link and sponsored row */153 .links-row {154 display: flex; align-items: center; justify-content: space-between;155 margin-top: 16px; padding: 12px 4px;156 }157 .shop-link { color: #1f7a8c; font-size: 30px; }158 .sponsored { color: #777; font-size: 26px; display: flex; align-items: center; gap: 10px; }159 .info-icon { width: 26px; height: 26px; }160 .note { color: #666; font-size: 26px; margin: 8px 0 12px 0; }161 /* Product tiles */162 .tiles {163 display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 6px;164 }165 .tile {166 background: #fff; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 18px;167 }168 .tile .img {169 height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;170 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;171 }172 /* Bottom navigation */173 .bottom-nav {174 position: absolute; bottom: 80px; left: 0; right: 0;175 height: 160px; background: #fff; border-top: 1px solid #e8e8e8;176 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;177 }178 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #333; }179 .nav-item.active { color: #1f7a8c; }180 .nav-icon { width: 48px; height: 48px; }181 .nav-label { font-size: 24px; }182 /* Home indicator */183 .home-indicator {184 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);185 width: 240px; height: 12px; background: #bdbdbd; border-radius: 6px;186 }187</style>188</head>189<body>190<div id="render-target">191 <div class="status-bar">192 <div>8:32</div>193 <div class="status-icons">194 <!-- Small app icon placeholder -->195 <svg class="icon" viewBox="0 0 36 36">196 <rect x="6" y="6" width="24" height="24" fill="#4b6f7b" rx="6"></rect>197 </svg>198 <!-- WiFi -->199 <svg class="icon" viewBox="0 0 36 36">200 <path d="M6 14c8-8 16-8 24 0" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"></path>201 <path d="M10 18c6-6 10-6 16 0" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"></path>202 <circle cx="18" cy="24" r="2.5" fill="#333"></circle>203 </svg>204 <!-- Battery -->205 <svg class="icon" viewBox="0 0 36 36">206 <rect x="5" y="10" width="24" height="16" rx="3" stroke="#333" stroke-width="2" fill="none"></rect>207 <rect x="7" y="12" width="14" height="12" rx="2" fill="#333"></rect>208 <rect x="30" y="14" width="3" height="8" rx="1.5" fill="#333"></rect>209 </svg>210 </div>211 </div>212 213 <div class="header">214 <div class="search-row">215 <div class="back-btn">216 <svg class="icon" viewBox="0 0 48 48">217 <path d="M28 10 L14 24 L28 38" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>218 </svg>219 </div>220 <div class="search-bar">221 <svg class="icon" viewBox="0 0 48 48">222 <circle cx="22" cy="22" r="12" stroke="#888" stroke-width="4" fill="none"></circle>223 <path d="M34 34 L44 44" stroke="#888" stroke-width="4" stroke-linecap="round"></path>224 </svg>225 <div class="search-text">Skechers Women's shoes</div>226 <div class="camera-btn">227 <svg class="icon" viewBox="0 0 48 48">228 <rect x="8" y="12" width="32" height="24" rx="6" fill="#dfe4e7" stroke="#9aa4aa" stroke-width="2"></rect>229 <circle cx="24" cy="24" r="8" fill="#fff" stroke="#9aa4aa" stroke-width="2"></circle>230 </svg>231 </div>232 </div>233 </div>234 235 <div class="loc-filters">236 <div class="loc-left">237 <svg class="icon" viewBox="0 0 48 48">238 <path d="M24 6c-6 0-11 5-11 11 0 8 11 19 11 19s11-11 11-19c0-6-5-11-11-11z" fill="#2e5962"></path>239 <circle cx="24" cy="17" r="5" fill="#fff"></circle>240 </svg>241 <div class="muted">Select a location to see product availability</div>242 <svg class="icon" viewBox="0 0 48 48">243 <path d="M14 18 L24 30 L34 18" stroke="#2e5962" stroke-width="4" fill="none" stroke-linecap="round"></path>244 </svg>245 </div>246 <div class="filters">247 <div>Filters</div>248 <svg class="icon" viewBox="0 0 48 48">249 <path d="M18 20 L24 28 L30 20" stroke="#2d5961" stroke-width="4" fill="none" stroke-linecap="round"></path>250 </svg>251 </div>252 </div>253 254 <div class="prime-toggle">255 <div class="prime-badge"><span class="tick"></span>prime</div>256 <div class="toggle"></div>257 </div>258 </div>259 260 <div class="content">261 <div class="brand-header">262 <div class="brand-logo">SKECHERS</div>263 <div class="brand-title">Style, comfort & tech</div>264 </div>265 266 <div class="hero">[IMG: Model holding neon green Skechers shoe]</div>267 268 <div class="cards-row">269 <div class="product-card">270 <div class="img">[IMG: Purple slip-on shoe]</div>271 <div class="rating-col">272 <div class="stars">273 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 8.5 L22 9.2 L17 13.7 L18.4 20.6 L12 17.2 L5.6 20.6 L7 13.7 L2 9.2 L9.1 8.5 Z" fill="#ff9900"></path></svg>274 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 8.5 L22 9.2 L17 13.7 L18.4 20.6 L12 17.2 L5.6 20.6 L7 13.7 L2 9.2 L9.1 8.5 Z" fill="#ff9900"></path></svg>275 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 8.5 L22 9.2 L17 13.7 L18.4 20.6 L12 17.2 L5.6 20.6 L7 13.7 L2 9.2 L9.1 8.5 Z" fill="#ff9900"></path></svg>276 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 8.5 L22 9.2 L17 13.7 L18.4 20.6 L12 17.2 L5.6 20.6 L7 13.7 L2 9.2 L9.1 8.5 Z" fill="#ff9900"></path></svg>277 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 8.5 L22 9.2 L17 13.7 L18.4 20.6 L12 17.2 L5.6 20.6 L7 13.7 L2 9.2 L9.1 8.5 Z" fill="#ffd699"></path></svg>278 <div class="rating-count">405</div>279 </div>280 <div class="prime-small"><span class="tick"></span>prime</div>281 </div>282 </div>283 284 <div class="product-card">285 <div class="img">[IMG: Blue sneaker]</div>286 <div class="rating-col">287 <div class="stars">288 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 8.5 L22 9.2 L17 13.7 L18.4 20.6 L12 17.2 L5.6 20.6 L7 13.7 L2 9.2 L9.1 8.5 Z" fill="#ff9900"></path></svg>289 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 8.5 L22 9.2 L17 13.7 L18.4 20.6 L12 17.2 L5.6 20.6 L7 13.7 L2 9.2 L9.1 8.5 Z" fill="#ff9900"></path></svg>290 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 8.5 L22 9.2 L17 13.7 L18.4 20.6 L12 17.2 L5.6 20.6 L7 13.7 L2 9.2 L9.1 8.5 Z" fill="#ff9900"></path></svg>291 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 8.5 L22 9.2 L17 13.7 L18.4 20.6 L12 17.2 L5.6 20.6 L7 13.7 L2 9.2 L9.1 8.5 Z" fill="#ff9900"></path></svg>292 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.9 8.5 L22 9.2 L17 13.7 L18.4 20.6 L12 17.2 L5.6 20.6 L7 13.7 L2 9.2 L9.1 8.5 Z" fill="#ffd699"></path></svg>293 <div class="rating-count">412</div>294 </div>295 <div class="prime-small"><span class="tick"></span>prime</div>296 </div>297 </div>298 </div>299 300 <div class="links-row">301 <div class="shop-link">Shop Skechers ›</div>302 <div class="sponsored">303 <div>Sponsored</div>304 <svg class="info-icon" viewBox="0 0 24 24">305 <circle cx="12" cy="12" r="11" stroke="#777" stroke-width="2" fill="none"></circle>306 <rect x="11" y="10" width="2" height="8" fill="#777"></rect>307 <circle cx="12" cy="6.5" r="1.5" fill="#777"></circle>308 </svg>309 </div>310 </div>311 312 <div class="note">Price and other details may vary based on product size and colour.</div>313 314 <div class="tiles">315 <div class="tile">316 <div class="img">[IMG: Black sneaker]</div>317 </div>318 <div class="tile">319 <div class="img">[IMG: White sneaker]</div>320 </div>321 </div>322 </div>323 324 <div class="bottom-nav">325 <div class="nav-item active">326 <svg class="nav-icon" viewBox="0 0 48 48">327 <path d="M6 22 L24 8 L42 22 V40 H28 V28 H20 V40 H6 Z" fill="none" stroke="#1f7a8c" stroke-width="3" stroke-linejoin="round"></path>328 </svg>329 <div class="nav-label">Home</div>330 </div>331 <div class="nav-item">332 <svg class="nav-icon" viewBox="0 0 48 48">333 <circle cx="24" cy="16" r="8" stroke="#333" stroke-width="3" fill="none"></circle>334 <path d="M8 42c4-8 12-10 16-10s12 2 16 10" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"></path>335 </svg>336 <div class="nav-label">You</div>337 </div>338 <div class="nav-item">339 <svg class="nav-icon" viewBox="0 0 48 48">340 <path d="M12 16 L6 24 L12 32" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"></path>341 <path d="M36 16 L42 24 L36 32" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"></path>342 <path d="M18 12 L30 12 M18 36 L30 36" stroke="#333" stroke-width="3" fill="none"></path>343 </svg>344 <div class="nav-label">More</div>345 </div>346 <div class="nav-item">347 <svg class="nav-icon" viewBox="0 0 48 48">348 <path d="M6 14 H42 L38 36 H10 Z" stroke="#333" stroke-width="3" fill="none" stroke-linejoin="round"></path>349 <circle cx="16" cy="40" r="3" fill="#333"></circle>350 <circle cx="32" cy="40" r="3" fill="#333"></circle>351 </svg>352 <div class="nav-label">Cart</div>353 </div>354 <div class="nav-item">355 <svg class="nav-icon" viewBox="0 0 48 48">356 <path d="M10 14 H38 M10 24 H38 M10 34 H38" stroke="#333" stroke-width="3" stroke-linecap="round"></path>357 </svg>358 <div class="nav-label">Menu</div>359 </div>360 </div>361 362 <div class="home-indicator"></div>363</div>364</body>365</html>