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>Woodland - Women Boots Category</title>7<style>8 body { margin:0; padding:0; background: transparent; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; font-family: Arial, Helvetica, sans-serif; color:#333;12 }13 14 /* Top status area */15 .statusbar {16 height:120px; background:#000; color:#fff; display:flex; align-items:center;17 padding:0 30px; box-sizing:border-box; font-weight:600; font-size:40px;18 }19 .status-icons { margin-left:auto; display:flex; gap:26px; align-items:center; }20 .dot { width:18px; height:18px; border-radius:50%; background:#fff; opacity:0.9; }21 .notice {22 background:#000; color:#fff; text-align:center; padding:24px 60px; font-size:34px; line-height:1.4;23 }24 25 /* Green nav strip */26 .nav-strip {27 height:90px; background:#4a6a3d; color:#fff; display:flex; align-items:center;28 padding:0 30px; box-sizing:border-box; font-size:34px;29 }30 .nav-strip .links { margin-left:auto; display:flex; gap:24px; align-items:center; }31 .nav-link { color:#fff; }32 .icon { display:inline-block; vertical-align:middle; }33 .icon svg { width:36px; height:36px; fill:#fff; }34 35 /* Header with logo & search */36 .header { padding:24px 30px 16px; display:flex; align-items:center; gap:26px; }37 .logo {38 display:flex; align-items:center; gap:16px; color:#2f6b3c; font-weight:800; font-size:44px;39 }40 .logo .tree svg { width:52px; height:52px; fill:#2f6b3c; }41 .search-wrap {42 flex:1; position:relative;43 }44 .search-input {45 width:100%; height:100px; border-radius:14px; border:2px solid #d8d8d8; box-sizing:border-box;46 padding:0 120px 0 26px; font-size:36px; color:#777; background:#f8f8f8;47 }48 .search-icon {49 position:absolute; right:74px; top:50%; transform:translateY(-50%);50 }51 .hamburger {52 width:90px; height:90px; border-radius:12px; border:2px solid #d8d8d8; display:flex; align-items:center; justify-content:center;53 background:#f3f3f3;54 }55 .hamburger svg { width:48px; height:48px; fill:#666; }56 57 /* Banner */58 .banner { margin:16px 30px 24px; }59 .img-placeholder {60 width: 1020px; height: 300px; background:#E0E0E0; border:1px solid #BDBDBD;61 display:flex; align-items:center; justify-content:center; color:#757575; font-size:38px; font-weight:600;62 }63 64 /* Breadcrumbs */65 .breadcrumbs { margin:20px 30px 26px; font-size:40px; letter-spacing:1px; color:#222; }66 67 /* Filters */68 .filters { margin:12px 30px 10px; }69 .filters h2 { font-size:50px; margin:22px 0; color:#222; }70 .select {71 height:100px; border:2px solid #2f6b3c; border-radius:8px; margin-bottom:26px; display:flex;72 align-items:center; padding:0 22px; font-size:36px; color:#2f6b3c; justify-content:space-between;73 }74 .caret svg { width:36px; height:36px; fill:#2f6b3c; }75 76 /* Showing text */77 .showing { margin:24px 30px; font-size:44px; color:#666; }78 79 /* Product grid */80 .grid { display:flex; flex-wrap:wrap; gap:30px; padding:0 30px; box-sizing:border-box; }81 .card {82 width:480px; background:#fff; border-radius:8px; border:1px solid #e5e5e5;83 padding:24px; box-sizing:border-box;84 }85 .product-img {86 width:100%; height:420px; background:#E0E0E0; border:1px solid #BDBDBD;87 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;88 position:relative;89 }90 .chev {91 position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px;92 display:flex; align-items:center; justify-content:center;93 background:#fff; border-radius:50%; border:1px solid #cfcfcf;94 }95 .chev.left { left:12px; }96 .chev.right { right:12px; }97 .chev svg { width:28px; height:28px; fill:#333; }98 99 /* Bottom home bar */100 .homebar {101 position:absolute; bottom:0; left:0; width:100%; height:100px; background:#000;102 display:flex; align-items:center; justify-content:center;103 }104 .homebar .pill {105 width:280px; height:10px; background:#fff; border-radius:10px; opacity:0.8;106 }107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Status bar and OTP notice -->113 <div class="statusbar">114 <div>5:14</div>115 <div class="status-icons">116 <div class="dot"></div>117 <div class="dot"></div>118 <div class="dot"></div>119 <div class="dot"></div>120 </div>121 </div>122 <div class="notice">123 Woodland does not call the customer for asking OTP. Please do not share any OTP with anyone on call to avoid fraudulent transactions.124 </div>125 126 <!-- Green navigation strip -->127 <div class="nav-strip">128 <div class="links">129 <span class="icon" title="Cart">130 <svg viewBox="0 0 24 24"><path d="M7 4h-2l-1 2v2h2l3 7h9l2-7h-12l-1-2h-2zM9 20a2 2 0 110-4 2 2 0 010 4zm8 0a2 2 0 110-4 2 2 0 010 4z"/></svg>131 </span>132 <span class="nav-link">Cart</span>133 <span>|</span>134 <span class="nav-link">Find Store</span>135 <span>|</span>136 <span class="nav-link">Sign In</span>137 <span class="icon" title="User">138 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 10c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/></svg>139 </span>140 </div>141 </div>142 143 <!-- Header -->144 <div class="header">145 <div class="logo">146 <span class="tree">147 <svg viewBox="0 0 24 24"><path d="M12 2l-3 4h2l-3 4h3l-4 6h6v4h2v-4h6l-4-6h3l-3-4h2l-3-4z"/></svg>148 </span>149 WOODLAND150 </div>151 <div class="search-wrap">152 <input class="search-input" type="text" placeholder="Search Products">153 <div class="search-icon icon">154 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14.1l4.3 4.3 1.4-1.4-4.3-4.3A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>155 </div>156 </div>157 <div class="hamburger">158 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>159 </div>160 </div>161 162 <!-- Banner -->163 <div class="banner">164 <div class="img-placeholder">[IMG: Boots Banner - "ENDEAVOUR WITH EASE"]</div>165 </div>166 167 <!-- Breadcrumbs -->168 <div class="breadcrumbs">HOME / SHOP / WOMEN / WOMEN_BOOTS</div>169 170 <!-- Filters -->171 <div class="filters">172 <h2>FILTER BY</h2>173 174 <div class="select">175 <span>42</span>176 <span class="caret"><svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg></span>177 </div>178 179 <div class="select">180 <span>Select Price Range</span>181 <span class="caret"><svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg></span>182 </div>183 184 <div class="select">185 <span>All Color</span>186 <span class="caret"><svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg></span>187 </div>188 189 <div class="select">190 <span>Select Brands</span>191 <span class="caret"><svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg></span>192 </div>193 </div>194 195 <!-- Showing text -->196 <div class="showing">Showing 28 of products 28</div>197 198 <!-- Product grid -->199 <div class="grid">200 <div class="card">201 <div class="product-img">202 [IMG: Beige Boot]203 <div class="chev left"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg></div>204 <div class="chev right"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg></div>205 </div>206 </div>207 <div class="card">208 <div class="product-img">209 [IMG: Brown Trek Shoe]210 <div class="chev left"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg></div>211 <div class="chev right"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg></div>212 </div>213 </div>214 </div>215 216 <!-- Bottom home bar -->217 <div class="homebar">218 <div class="pill"></div>219 </div>220 221</div>222</body>223</html>