GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Amazon Size Selection Mock</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; color:#111; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#f6f7f8;12 border-radius:0;13 }14 /* Header */15 .header {16 height:220px;17 background: linear-gradient(180deg, #9cd7cf 0%, #c2e6d9 100%);18 position:relative;19 padding-top:50px;20 }21 .back-btn {22 position:absolute; left:28px; top:86px;23 width:64px; height:64px; border-radius:32px;24 display:flex; align-items:center; justify-content:center;25 background:transparent;26 }27 .search-wrap {28 margin:0 40px 0 110px;29 height:92px;30 background:#fff; border:1px solid #dcdfe3;31 border-radius:22px;32 display:flex; align-items:center; gap:22px;33 padding:0 26px;34 }35 .search-input {36 flex:1; font-size:40px; color:#333;37 }38 .icon-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }39 .ic {40 width:44px; height:44px; stroke:#333; fill:none; stroke-width:6;41 }42 43 /* Content area */44 .content {45 position:absolute; left:0; right:0; top:220px; bottom:150px;46 overflow-y:auto; padding-bottom:40px;47 }48 /* Thumbnails row */49 .thumb-row {50 background:#fff; border-bottom:1px solid #e6e6e6;51 padding:18px 0 10px 0;52 }53 .thumbs { display:flex; gap:38px; padding:0 26px; }54 .thumb {55 width:260px;56 display:flex; flex-direction:column; align-items:center;57 }58 .thumb .img {59 width:220px; height:220px; border-radius:120px;60 background:#E0E0E0; border:1px solid #BDBDBD;61 display:flex; align-items:center; justify-content:center;62 color:#757575; font-size:28px; text-align:center;63 }64 .price-note {65 margin-top:10px; text-align:center; color:#666; font-size:30px; line-height:40px;66 }67 68 /* Size selector */69 .section { background:#fff; padding:30px 26px; border-bottom:1px solid #e6e6e6; }70 .size-title { font-size:44px; font-weight:700; margin-bottom:22px; }71 .size-title .val { color:#000; }72 .size-grid { display:flex; gap:22px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:10px; }73 .size-pill {74 width:150px; height:120px; border:2px solid #cfd3d8; border-radius:16px;75 display:flex; align-items:center; justify-content:center;76 font-size:44px; color:#222; background:#fff;77 }78 .size-pill.active { background:#000; color:#fff; border-color:#000; }79 .size-pill.disabled { color:#9aa0a6; background:#f3f4f5; position:relative; }80 .size-pill.disabled:after {81 content:""; position:absolute; height:2px; width:180px; background:#9aa0a6;82 transform:rotate(-30deg); top:58px; left:-10px;83 }84 85 /* Utility rows */86 .row-link {87 display:flex; align-items:center; justify-content:space-between;88 padding:32px 26px; background:#f6f8f9; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;89 font-size:40px; color:#111;90 }91 .row-link .left { display:flex; align-items:center; gap:20px; }92 .chev { width:34px; height:34px; stroke:#666; fill:none; stroke-width:8; }93 .text-link {94 padding:26px; font-size:38px; color:#2a6df1;95 background:#fff; border-bottom:1px solid #e6e6e6;96 }97 .buy-options {98 margin:26px; background:#fff; border:1px solid #dfe3e7; border-radius:18px;99 padding:36px; font-size:44px; font-weight:600; color:#111;100 display:flex; align-items:center; justify-content:space-between;101 }102 103 .subtle-row {104 padding:28px; font-size:38px; color:#2563eb; background:#fff;105 border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;106 }107 .subtle-row span { color:#6b7280; margin-left:18px; }108 109 .top-brand {110 display:flex; align-items:center; gap:24px; padding:30px 26px;111 background:#fff; border-bottom:1px solid #e6e6e6;112 }113 .badge {114 width:120px; height:120px; border-radius:60px; background:#f5f6f7; border:1px solid #dadde1;115 display:flex; align-items:center; justify-content:center;116 }117 .badge-star { width:70px; height:70px; fill:#f1b90c; }118 .brand-text { font-size:40px; color:#2563eb; }119 120 .section-header {121 display:flex; justify-content:space-between; align-items:center;122 padding:34px 26px; background:#fff; border-top:10px solid #f5f6f7; border-bottom:1px solid #e6e6e6;123 font-size:46px; font-weight:700;124 }125 126 .product-details { background:#fff; padding:26px; }127 .pd-title { font-size:52px; font-weight:700; margin:12px 0 24px; }128 .detail { margin:30px 0; }129 .detail .label { font-size:38px; color:#444; margin-bottom:6px; }130 .detail .value { font-size:42px; color:#111; font-weight:600; }131 132 /* Bottom navigation */133 .bottom-nav {134 position:absolute; left:0; right:0; bottom:0;135 height:150px; background:#fff; border-top:1px solid #dadde1;136 display:flex; align-items:center; justify-content:space-around;137 }138 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#0f1111; font-size:34px; }139 .nav-item .label { font-size:36px; }140 .nav-ic { width:56px; height:56px; stroke:#111; fill:none; stroke-width:6; }141 .cart-count {142 position:absolute; margin-left:28px; margin-top:-8px;143 background:#0f62fe; color:#fff; width:40px; height:40px; border-radius:20px;144 display:flex; align-items:center; justify-content:center; font-size:26px;145 }146</style>147</head>148<body>149<div id="render-target">150 <!-- Header with search -->151 <div class="header">152 <div class="back-btn" aria-label="Back">153 <svg class="ic" viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"/></svg>154 </div>155 <div class="search-wrap">156 <svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16.5" y1="16.5" x2="22" y2="22"></line></svg>157 <div class="search-input">Search Amazon.in</div>158 <div class="icon-btn" title="Camera">159 <svg class="ic" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"></rect><circle cx="12" cy="12" r="3"></circle></svg>160 </div>161 <div class="icon-btn" title="Microphone">162 <svg class="ic" viewBox="0 0 24 24"><rect x="9" y="4" width="6" height="10" rx="3"></rect><path d="M12 18 v3"></path><path d="M5 12 c0 4 3 6 7 6 s7-2 7-6"></path></svg>163 </div>164 </div>165 </div>166 167 <div class="content">168 <!-- Thumbnails -->169 <div class="thumb-row">170 <div class="thumbs">171 <div class="thumb">172 <div class="img">[IMG: Jogger 1]</div>173 <div class="price-note">1 option from<br>₹931.00</div>174 </div>175 <div class="thumb">176 <div class="img" style="border:6px solid #111;">[IMG: Jogger 2]</div>177 <div class="price-note">1 option from<br>₹931.00</div>178 </div>179 <div class="thumb">180 <div class="img">[IMG: Jogger 3]</div>181 <div class="price-note">1 option from<br>₹931.00</div>182 </div>183 </div>184 </div>185 186 <!-- Size selector -->187 <div class="section">188 <div class="size-title">Size: <span class="val">XL</span></div>189 <div class="size-grid">190 <div class="size-pill">XS</div>191 <div class="size-pill">S</div>192 <div class="size-pill">M</div>193 <div class="size-pill">L</div>194 <div class="size-pill active">XL</div>195 <div class="size-pill disabled">2XL</div>196 <div class="size-pill">3XL</div>197 </div>198 </div>199 200 <div class="row-link">201 <div class="left">202 <svg class="ic" viewBox="0 0 24 24"><path d="M2 12 h6" stroke-width="8"/><path d="M5 7 l-3 5 l3 5" stroke-width="4"></path></svg>203 <div style="font-size:42px;">Find your size</div>204 </div>205 <svg class="chev" viewBox="0 0 24 24"><path d="M9 5 l6 7 l-6 7" /></svg>206 </div>207 208 <div class="text-link">Size guide</div>209 210 <div class="buy-options">211 <div>See All Buying Options</div>212 <svg class="chev" viewBox="0 0 24 24"><path d="M9 5 l6 7 l-6 7" /></svg>213 </div>214 215 <div class="subtle-row">View Wish List <span>- private</span></div>216 217 <div class="top-brand">218 <div class="badge">219 <svg class="badge-star" viewBox="0 0 24 24"><path d="M12 2 L14.8 8.5 L22 9.2 L16.8 13.6 L18.5 20.5 L12 16.8 L5.5 20.5 L7.2 13.6 L2 9.2 L9.2 8.5 Z"/></svg>220 </div>221 <div class="brand-text">Top Brand</div>222 </div>223 224 <div class="section-header">225 <div>Size guide</div>226 <svg class="chev" viewBox="0 0 24 24"><path d="M7 9 l5 5 l5-5" /></svg>227 </div>228 229 <div class="product-details">230 <div class="pd-title">Product details</div>231 <div class="detail">232 <div class="label">Material Type</div>233 <div class="value">Cotton</div>234 </div>235 <div class="detail">236 <div class="label">Length</div>237 <div class="value">Ankle Length</div>238 </div>239 <div class="detail">240 <div class="label">Style</div>241 <div class="value">Casual Fit</div>242 </div>243 </div>244 </div>245 246 <!-- Bottom navigation -->247 <div class="bottom-nav">248 <div class="nav-item">249 <svg class="nav-ic" viewBox="0 0 24 24"><path d="M3 10 L12 3 L21 10"></path><path d="M5 10 V21 H19 V10"></path></svg>250 <div class="label">Home</div>251 </div>252 <div class="nav-item">253 <svg class="nav-ic" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21 c2-5 14-5 16 0"></path></svg>254 <div class="label">You</div>255 </div>256 <div class="nav-item">257 <svg class="nav-ic" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"></rect><path d="M8 8 h8 v8 H8 Z"></path></svg>258 <div class="label">More</div>259 </div>260 <div class="nav-item" style="position:relative;">261 <div class="cart-count">1</div>262 <svg class="nav-ic" viewBox="0 0 24 24"><path d="M3 5 h3 l2 12 h9 l2-9 H7"></path><circle cx="10" cy="20" r="1.5"></circle><circle cx="17" cy="20" r="1.5"></circle></svg>263 <div class="label">Cart</div>264 </div>265 <div class="nav-item">266 <svg class="nav-ic" viewBox="0 0 24 24"><path d="M4 6 h16"></path><path d="M4 12 h16"></path><path d="M4 18 h16"></path></svg>267 <div class="label">Menu</div>268 </div>269 </div>270</div>271</body>272</html>