GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Woodland - Women Boots</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: Arial, Helvetica, sans-serif;15 color: #222;16 }17 18 /* Top status bar */19 .status-bar {20 background: #000;21 color: #fff;22 height: 110px;23 display: flex;24 align-items: center;25 padding: 0 40px;26 font-size: 38px;27 justify-content: space-between;28 }29 .status-icons {30 display: flex;31 gap: 22px;32 align-items: center;33 }34 .status-dot {35 width: 26px;36 height: 26px;37 background: #fff;38 border-radius: 50%;39 opacity: 0.85;40 }41 42 /* OTP banner */43 .otp-banner {44 background: #000;45 color: #fff;46 text-align: center;47 padding: 32px 60px;48 font-size: 32px;49 line-height: 1.5;50 }51 52 /* Utility green bar */53 .utility-bar {54 background: #3f6d3f;55 color: #fff;56 height: 84px;57 display: flex;58 align-items: center;59 padding: 0 40px;60 font-size: 34px;61 letter-spacing: 0.3px;62 }63 .utility-bar .items {64 display: flex;65 gap: 18px;66 align-items: center;67 margin-left: auto;68 }69 .utility-bar .sep { opacity: 0.8; margin: 0 12px; }70 71 /* Header: logo + search + menu */72 .header {73 padding: 28px 40px 16px;74 background: #fff;75 }76 .toolbar {77 display: flex;78 align-items: center;79 gap: 24px;80 }81 .logo {82 font-weight: bold;83 color: #2e5f3a;84 font-size: 44px;85 display: flex;86 align-items: center;87 gap: 14px;88 }89 .logo .tree {90 width: 54px;91 height: 54px;92 background: #2e5f3a;93 border-radius: 50%;94 }95 .search-wrap {96 flex: 1;97 position: relative;98 }99 .search-input {100 width: 100%;101 height: 88px;102 border: 2px solid #ddd;103 border-radius: 16px;104 padding: 0 120px 0 120px;105 font-size: 34px;106 color: #666;107 outline: none;108 background: #fafafa;109 }110 .search-icon, .menu-icon {111 position: absolute;112 top: 50%;113 transform: translateY(-50%);114 }115 .search-icon { left: 28px; }116 .menu-icon { right: -4px; position: relative; margin-left: 8px; }117 .hamburger {118 width: 70px;119 height: 70px;120 border: 2px solid #bbb;121 border-radius: 14px;122 display: flex;123 align-items: center;124 justify-content: center;125 }126 127 /* Banner image */128 .hero {129 margin: 12px 40px 22px;130 }131 .img-box {132 background: #E0E0E0;133 border: 1px solid #BDBDBD;134 height: 380px;135 display: flex;136 align-items: center;137 justify-content: center;138 color: #757575;139 font-size: 34px;140 }141 142 /* Breadcrumb */143 .breadcrumb {144 margin: 18px 40px 8px;145 font-size: 36px;146 color: #222;147 letter-spacing: 1px;148 }149 150 /* Filter section */151 .section-title {152 margin: 36px 40px 16px;153 font-size: 40px;154 font-weight: 700;155 letter-spacing: 1px;156 }157 .filter-box {158 margin: 0 40px 26px;159 height: 92px;160 border: 2px solid #2e5f3a;161 border-radius: 8px;162 display: flex;163 align-items: center;164 justify-content: space-between;165 padding: 0 24px;166 font-size: 34px;167 color: #556b58;168 }169 .caret {170 width: 28px; height: 28px;171 }172 173 /* Showing count */174 .count {175 margin: 40px 40px 10px;176 font-size: 42px;177 color: #666;178 }179 180 /* Product cards */181 .products {182 display: grid;183 grid-template-columns: 1fr 1fr;184 gap: 28px;185 padding: 16px 40px;186 }187 .card {188 background: #f7f7f7;189 padding: 30px;190 border-radius: 8px;191 }192 .product-img {193 height: 420px;194 background: #E0E0E0;195 border: 1px solid #BDBDBD;196 display: flex;197 align-items: center;198 justify-content: center;199 color: #757575;200 font-size: 30px;201 position: relative;202 }203 .nav-arrow {204 position: absolute;205 top: 50%;206 transform: translateY(-50%);207 width: 56px;208 height: 56px;209 background: #fff;210 border-radius: 50%;211 box-shadow: 0 0 0 1px #bbb;212 display: flex;213 align-items: center;214 justify-content: center;215 opacity: 0.9;216 }217 .nav-arrow.left { left: 16px; }218 .nav-arrow.right { right: 16px; }219 220 /* Bottom home indicator */221 .home-indicator {222 position: absolute;223 bottom: 18px;224 left: 50%;225 transform: translateX(-50%);226 width: 380px;227 height: 16px;228 border-radius: 12px;229 background: #d6d6d6;230 }231</style>232</head>233<body>234<div id="render-target">235 236 <!-- Status bar -->237 <div class="status-bar">238 <div>5:12</div>239 <div class="status-icons">240 <div class="status-dot"></div>241 <div class="status-dot"></div>242 <div class="status-dot"></div>243 <div class="status-dot"></div>244 <div class="status-dot" style="width: 10px; height: 10px;"></div>245 <div class="status-dot"></div>246 <div class="status-dot"></div>247 </div>248 </div>249 250 <!-- OTP caution banner -->251 <div class="otp-banner">252 Woodland does not call the customer for asking OTP. Please do not share any OTP with anyone on call to avoid fraudulent transactions.253 </div>254 255 <!-- Utility green bar -->256 <div class="utility-bar">257 <div style="display:flex; align-items:center; gap:10px;">258 <!-- Cart icon -->259 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">260 <path d="M7 4h-2v2h2l2 9h9l2-7h-12zM9 20a2 2 0 1 0 .001-3.999A2 2 0 0 0 9 20zm9 0a2 2 0 1 0 .001-3.999A2 2 0 0 0 18 20z"/>261 </svg>262 <div class="items">263 <span>Cart</span>264 <span class="sep">|</span>265 <span>Find Store</span>266 <span class="sep">|</span>267 <span>Sign In</span>268 <!-- User icon -->269 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" aria-hidden="true" style="margin-left: 8px;">270 <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z"/>271 </svg>272 </div>273 </div>274 </div>275 276 <!-- Header with logo and search -->277 <div class="header">278 <div class="toolbar">279 <div class="logo">280 <div class="tree"></div>281 WOODLAND282 </div>283 284 <div class="search-wrap">285 <input class="search-input" type="text" placeholder="Search Products">286 <div class="search-icon">287 <svg width="54" height="54" viewBox="0 0 24 24" fill="#888" aria-hidden="true">288 <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm7-2 5 5-2 2-5-5 2-2z"/>289 </svg>290 </div>291 </div>292 293 <div class="menu-icon">294 <div class="hamburger">295 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">296 <path d="M3 6h18M3 12h18M3 18h18"/>297 </svg>298 </div>299 </div>300 </div>301 </div>302 303 <!-- Banner image -->304 <div class="hero">305 <div class="img-box">[IMG: Shoes Banner - Endeavour with Ease]</div>306 </div>307 308 <!-- Breadcrumb -->309 <div class="breadcrumb">HOME / SHOP / WOMEN / WOMEN_BOOTS</div>310 311 <!-- Filter section -->312 <div class="section-title">FILTER BY</div>313 314 <div class="filter-box">315 <span>All sizes</span>316 <svg class="caret" viewBox="0 0 24 24" fill="#2e5f3a"><path d="M7 10l5 5 5-5z"/></svg>317 </div>318 319 <div class="filter-box">320 <span>Select Price Range</span>321 <svg class="caret" viewBox="0 0 24 24" fill="#2e5f3a"><path d="M7 10l5 5 5-5z"/></svg>322 </div>323 324 <div class="filter-box">325 <span>All Color</span>326 <svg class="caret" viewBox="0 0 24 24" fill="#2e5f3a"><path d="M7 10l5 5 5-5z"/></svg>327 </div>328 329 <div class="filter-box">330 <span>Select Brands</span>331 <svg class="caret" viewBox="0 0 24 24" fill="#2e5f3a"><path d="M7 10l5 5 5-5z"/></svg>332 </div>333 334 <!-- Showing count -->335 <div class="count">Showing 28 of products 28</div>336 337 <!-- Product grid -->338 <div class="products">339 <div class="card">340 <div class="product-img">341 [IMG: Women's Boot Product - Light Grey]342 <div class="nav-arrow left">343 <svg width="24" height="24" viewBox="0 0 24 24" fill="#333">344 <path d="M15 18l-6-6 6-6v12z"/>345 </svg>346 </div>347 <div class="nav-arrow right">348 <svg width="24" height="24" viewBox="0 0 24 24" fill="#333">349 <path d="M9 6l6 6-6 6V6z"/>350 </svg>351 </div>352 </div>353 </div>354 355 <div class="card">356 <div class="product-img">357 [IMG: Women's Boot Product - Dark Brown]358 <div class="nav-arrow left">359 <svg width="24" height="24" viewBox="0 0 24 24" fill="#333">360 <path d="M15 18l-6-6 6-6v12z"/>361 </svg>362 </div>363 <div class="nav-arrow right">364 <svg width="24" height="24" viewBox="0 0 24 24" fill="#333">365 <path d="M9 6l6 6-6 6V6z"/>366 </svg>367 </div>368 </div>369 </div>370 </div>371 372 <div class="home-indicator"></div>373</div>374</body>375</html>