GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon - Nike Men's Track Pants</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background: linear-gradient(#a8e4de 0%, #d6ebe7 30%, #ffffff 30%);10 color:#111;11 }12 13 /* Top status bar */14 .statusbar {15 position:absolute; top:0; left:0; width:100%; height:120px;16 display:flex; align-items:center; justify-content:space-between;17 padding:0 40px; font-size:36px; color:#2f3d3c;18 }19 .status-icons { display:flex; align-items:center; gap:22px; font-size:30px; }20 .icon-cloud { width:34px; height:24px; background:#597; border-radius:6px; opacity:.3; }21 .battery {22 width:80px; height:34px; border:3px solid #2f3d3c; border-radius:8px; position:relative;23 }24 .battery::after { content:""; position:absolute; right:-12px; top:8px; width:10px; height:16px; background:#2f3d3c; border-radius:3px; }25 .battery .level { position:absolute; left:3px; top:3px; height:26px; width:64px; background:#2f3d3c; border-radius:5px; }26 .percent { font-size:30px; margin-left:6px; }27 28 /* Back button */29 .back-btn {30 position:absolute; top:120px; left:24px; width:86px; height:86px;31 display:flex; align-items:center; justify-content:center;32 border-radius:20px; background:#ffffff; box-shadow:0 2px 6px rgba(0,0,0,0.12);33 }34 .back-btn svg { width:42px; height:42px; }35 36 /* Search bar */37 .search-box {38 position:absolute; top:112px; left:130px; width:900px; height:110px;39 background:#fff; border-radius:60px; box-shadow:0 3px 10px rgba(0,0,0,0.12);40 display:flex; align-items:center; padding:0 28px; gap:20px;41 }42 .search-box .input-text { flex:1; font-size:36px; color:#222; }43 .search-icon, .camera-icon {44 width:54px; height:54px; display:flex; align-items:center; justify-content:center;45 border-radius:50%; background:#f2f2f2; border:1px solid #ddd;46 }47 .search-icon svg, .camera-icon svg { width:32px; height:32px; }48 49 /* Results area */50 .results {51 position:absolute; top:260px; left:0; right:0; bottom:200px;52 background:#fff;53 }54 .grid {55 display:flex; flex-wrap:wrap; gap:24px; padding:24px;56 }57 .card {58 width:504px; background:#fff; border-radius:16px;59 box-shadow:0 2px 6px rgba(0,0,0,0.06);60 border:1px solid #e9e9e9; overflow:hidden;61 }62 .card .img {63 height:490px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;64 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px;65 }66 .card .content { padding:24px; }67 .brand { font-size:40px; font-weight:bold; margin-bottom:8px; }68 .title { font-size:34px; color:#333; line-height:1.2; }69 .rating { display:flex; align-items:center; gap:8px; margin:12px 0; font-size:32px; color:#2a80a1; }70 .stars { display:flex; gap:4px; }71 .stars svg { width:26px; height:26px; }72 .gray svg path { fill:#cfcfcf; }73 .price-row { display:flex; align-items:baseline; gap:14px; margin:10px 0; }74 .price { font-size:46px; font-weight:700; }75 .mrp { font-size:28px; color:#666; }76 .mrp del { color:#909090; }77 .off { font-size:28px; color:#333; }78 .prime {79 display:inline-flex; align-items:center; gap:8px; margin:12px 0;80 background:#fff; border:1px solid #e5e5e5; border-radius:10px; padding:8px 12px; font-size:28px;81 }82 .prime .check {83 width:22px; height:22px; border-radius:50%; background:#ffcc00; display:flex; align-items:center; justify-content:center;84 }85 .prime .check svg { width:14px; height:14px; }86 .delivery { font-size:28px; color:#666; margin-top:6px; }87 88 /* Color swatches */89 .swatches { display:flex; gap:14px; margin:8px 0 10px 0; }90 .swatch {91 width:46px; height:46px; border-radius:50%; border:2px solid #444;92 }93 .swatch.gray { background:#4a4a4a; }94 .swatch.black { background:#000; }95 96 /* Bottom nav */97 .navbar {98 position:absolute; bottom:0; left:0; width:100%; height:180px; background:#fff;99 border-top:1px solid #e6e6e6; display:flex; align-items:center; justify-content:space-around;100 }101 .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#111; }102 .nav-item .label { font-size:32px; }103 .nav-item svg { width:54px; height:54px; }104 .progress {105 position:absolute; bottom:190px; left:50%; transform:translateX(-50%);106 width:640px; height:14px; background:#e9e9e9; border-radius:8px; overflow:hidden;107 }108 .progress .bar { width:320px; height:100%; background:#a1a1a1; }109</style>110</head>111<body>112<div id="render-target">113 114 <div class="statusbar">115 <div>3:20</div>116 <div class="status-icons">117 <div class="icon-cloud"></div>118 <div style="font-size:34px;">📶</div>119 <div class="battery"><div class="level"></div></div>120 <div class="percent">100%</div>121 </div>122 </div>123 124 <div class="back-btn">125 <svg viewBox="0 0 24 24">126 <path d="M15 18l-6-6 6-6" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>127 </svg>128 </div>129 130 <div class="search-box">131 <div class="search-icon">132 <svg viewBox="0 0 24 24">133 <circle cx="10" cy="10" r="7" stroke="#555" stroke-width="2" fill="none"/>134 <path d="M16 16l5 5" stroke="#555" stroke-width="2" stroke-linecap="round"/>135 </svg>136 </div>137 <div class="input-text">nike men's track pants</div>138 <div class="camera-icon">139 <svg viewBox="0 0 24 24">140 <rect x="4" y="7" width="16" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>141 <path d="M9 7l2-3h2l2 3" stroke="#555" stroke-width="2" fill="none"/>142 <circle cx="12" cy="13" r="3" fill="none" stroke="#555" stroke-width="2"/>143 </svg>144 </div>145 </div>146 147 <div class="results">148 <div class="grid">149 150 <!-- Card 1 -->151 <div class="card">152 <div class="img">[IMG: Jogger Track Pants]</div>153 <div class="content">154 <div class="brand">Nike</div>155 <div class="title">Men's Jogger Track Pants</div>156 <div class="rating">157 <div>2.6</div>158 <div class="stars">159 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#f8a33b"/></svg>160 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#f8a33b"/></svg>161 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#f8a33b"/></svg>162 <span class="gray">163 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#cfcfcf"/></svg>164 </span>165 <span class="gray">166 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#cfcfcf"/></svg>167 </span>168 </div>169 <div style="color:#666; font-size:28px;">(5)</div>170 </div>171 <div class="price-row">172 <div class="price">₹5,619</div>173 <div class="mrp">M.R.P: <del>₹7,495</del></div>174 <div class="off">25% off</div>175 </div>176 <div class="prime">177 <div class="check">178 <svg viewBox="0 0 16 16">179 <path d="M3 8l3 3 7-7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>180 </svg>181 </div>182 prime183 </div>184 <div class="delivery">FREE Delivery by Amazon</div>185 </div>186 </div>187 188 <!-- Card 2 -->189 <div class="card">190 <div class="img">[IMG: Regular Track Pants Front]</div>191 <div class="content">192 <div class="swatches">193 <div class="swatch gray"></div>194 <div class="swatch black"></div>195 </div>196 <div class="brand">Nike</div>197 <div class="title">Men's Regular Trackpant</div>198 <div class="rating">199 <div>3.0</div>200 <div class="stars">201 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#f8a33b"/></svg>202 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#f8a33b"/></svg>203 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#f8a33b"/></svg>204 <span class="gray"><svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#cfcfcf"/></svg></span>205 <span class="gray"><svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#cfcfcf"/></svg></span>206 </div>207 <div style="color:#666; font-size:28px;">(3)</div>208 </div>209 <div class="price-row">210 <div class="price">₹1,969</div>211 <div class="mrp">M.R.P: <del>₹2,895</del></div>212 <div class="off">32% off</div>213 </div>214 <div class="prime">215 <div class="check">216 <svg viewBox="0 0 16 16">217 <path d="M3 8l3 3 7-7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>218 </svg>219 </div>220 prime221 </div>222 <div class="delivery">FREE Delivery by Amazon</div>223 </div>224 </div>225 226 <!-- Card 3 -->227 <div class="card">228 <div class="img">[IMG: Black Track Pants - Swoosh]</div>229 <div class="content">230 <div class="brand">Nike</div>231 <div class="title">Mens' Regular Track Pants (932258-…)</div>232 <div class="price-row">233 <div class="price">₹1,919</div>234 <div class="mrp">M.R.P: <del>₹3,495</del></div>235 <div class="off">45% off</div>236 </div>237 <div class="prime">238 <div class="check">239 <svg viewBox="0 0 16 16">240 <path d="M3 8l3 3 7-7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>241 </svg>242 </div>243 prime244 </div>245 <div class="delivery">FREE Delivery by Amazon</div>246 </div>247 </div>248 249 <!-- Card 4 -->250 <div class="card">251 <div class="img">[IMG: Relaxed Track Pants]</div>252 <div class="content">253 <div class="brand">Nike</div>254 <div class="title">Men's Relaxed Track Pants</div>255 <div class="rating">256 <div>4.0</div>257 <div class="stars">258 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#f8a33b"/></svg>259 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#f8a33b"/></svg>260 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#f8a33b"/></svg>261 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#f8a33b"/></svg>262 <span class="gray"><svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1-6-4-4 6-1 3-6 3 6 6 1-4 4 1 6z" fill="#cfcfcf"/></svg></span>263 </div>264 <div style="color:#666; font-size:28px;">(13)</div>265 </div>266 <div class="price-row">267 <div class="price">₹2,359</div>268 <div class="mrp">M.R.P: <del>₹4,295</del></div>269 <div class="off">45% off</div>270 </div>271 <div class="prime">272 <div class="check">273 <svg viewBox="0 0 16 16">274 <path d="M3 8l3 3 7-7" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>275 </svg>276 </div>277 prime278 </div>279 <div class="delivery">FREE Delivery by Amazon</div>280 </div>281 </div>282 283 </div>284 </div>285 286 <div class="progress"><div class="bar"></div></div>287 288 <div class="navbar">289 <div class="nav-item">290 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-6v-6H10v6H4a1 1 0 0 1-1-1z" fill="#111"/></svg>291 <div class="label">Home</div>292 </div>293 <div class="nav-item">294 <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="4" fill="#111"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="#111"/></svg>295 <div class="label">You</div>296 </div>297 <div class="nav-item">298 <svg viewBox="0 0 24 24"><path d="M12 3a2 2 0 0 1 2 2v5h5a2 2 0 1 1 0 4h-5v5a2 2 0 1 1-4 0v-5H5a2 2 0 1 1 0-4h5V5a2 2 0 0 1 2-2z" fill="#111"/></svg>299 <div class="label">More</div>300 </div>301 <div class="nav-item">302 <svg viewBox="0 0 24 24"><path d="M6 6h14l-2 9H8L6 6z" fill="none" stroke="#111" stroke-width="2"/><circle cx="9" cy="20" r="2" fill="#111"/><circle cx="17" cy="20" r="2" fill="#111"/></svg>303 <div class="label">Cart</div>304 </div>305 <div class="nav-item">306 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>307 <div class="label">Menu</div>308 </div>309 </div>310 311</div>312</body>313</html>