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 Search Mock</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background: linear-gradient(180deg, #b2e5e1 0%, #cdebdc 40%, #ffffff 40%);12 color:#111;13 }14 15 /* Status bar */16 .status-bar{17 height:90px; padding:0 28px;18 display:flex; align-items:center; justify-content:space-between;19 color:#1b1b1b; font-weight:600; font-size:40px;20 }21 .status-icons{ display:flex; align-items:center; gap:22px; }22 .dot{ width:10px; height:10px; background:#333; border-radius:50%; display:inline-block; }23 24 /* Search bar */25 .search-wrap{26 padding:20px 26px 16px;27 }28 .search-bar{29 background:#fff; border-radius:22px; border:1px solid #d9e2e1;30 display:flex; align-items:center; padding:16px 18px; height:96px;31 box-shadow: 0 1px 0 rgba(0,0,0,0.05);32 }33 .icon-btn{34 width:72px; height:72px; display:flex; align-items:center; justify-content:center;35 color:#2c2c2c;36 }37 .search-input{38 flex:1; display:flex; align-items:center; gap:16px; padding:0 8px;39 }40 .search-input .placeholder{41 color:#1a1a1a; font-size:40px;42 }43 .mag{44 width:46px; height:46px; border-radius:50%;45 display:flex; align-items:center; justify-content:center;46 color:#5f6d6c;47 }48 49 /* Location bar */50 .location-bar{51 margin:0 26px; margin-top:6px;52 background:#e9f4f1; border:1px solid #cfe6df; border-radius:18px;53 padding:18px 20px; display:flex; align-items:center; gap:18px;54 color:#1f2a2a; font-size:36px;55 }56 .caret{ margin-left:auto; }57 58 /* Filters row */59 .filters-row{60 margin:18px 0 8px; padding:0 26px; display:flex; align-items:center; gap:18px;61 overflow:hidden;62 }63 .chip{64 padding:18px 26px; background:#f4f6f6; border:1px solid #d6dddb; border-radius:28px;65 font-size:34px; color:#153a3a;66 }67 .chip.primary{ background:#fff; border-color:#cdd6d4; }68 .prime-toggle{ display:flex; align-items:center; gap:10px; font-size:34px; }69 .toggle{70 width:84px; height:44px; background:#dfe7e5; border-radius:22px; position:relative;71 }72 .toggle:after{73 content:""; width:36px; height:36px; background:#fff; border:1px solid #c7d2ce;74 border-radius:50%; position:absolute; top:3px; left:4px;75 }76 77 /* Section header with logo */78 .brand-header{79 padding:10px 26px 8px; display:flex; align-items:center; gap:16px; font-size:44px; color:#173131;80 }81 .brand-logo{82 width:78px; height:78px; border:2px solid #bdbdbd; border-radius:8px;83 display:flex; align-items:center; justify-content:center; font-weight:bold;84 }85 86 /* Image placeholder */87 .img-hero{88 margin:12px 26px;89 height:560px; border:1px solid #BDBDBD; background:#E0E0E0;90 border-radius:16px; display:flex; align-items:center; justify-content:center; color:#555;91 font-size:38px; text-align:center; padding:14px;92 }93 94 /* Deal cards row */95 .deal-row{ display:flex; gap:22px; padding:0 26px; }96 .deal-card{97 flex:1; background:#fff; border:1px solid #e2e2e2; border-radius:18px; overflow:hidden;98 }99 .deal-img{ height:180px; background:#E0E0E0; border-bottom:1px solid #d0d0d0; display:flex; align-items:center; justify-content:center; color:#666; font-size:30px; }100 .deal-body{ padding:18px; }101 .deal-tag{102 display:inline-block; background:#b23a2b; color:#fff; padding:8px 16px; border-radius:12px; font-size:30px; margin-bottom:10px;103 }104 .price-line{ font-size:44px; font-weight:700; margin-top:6px; }105 .old-price{ color:#7b8b89; font-size:30px; text-decoration:line-through; margin-left:8px; }106 .prime-badge{ color:#2f74ff; font-size:30px; margin-left:10px; }107 108 .sub-row{109 padding:18px 26px; display:flex; align-items:center; justify-content:space-between; color:#155050; font-size:36px;110 }111 .sponsored{ color:#596665; display:flex; align-items:center; gap:8px; }112 113 .note{114 padding:12px 26px; color:#263636; font-size:36px;115 }116 117 /* Grid of products */118 .grid{119 padding:8px 26px 0; display:flex; gap:22px;120 }121 .grid .card{122 flex:1; height:420px; background:#fff; border:1px solid #dcdcdc; border-radius:16px; padding:18px;123 display:flex; align-items:center; justify-content:center;124 }125 .grid .card .img{126 width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:12px;127 display:flex; align-items:center; justify-content:center; color:#666; font-size:34px; text-align:center; padding:10px;128 }129 130 /* Bottom Nav */131 .bottom-nav{132 position:absolute; bottom:86px; left:0; right:0; height:120px;133 border-top:1px solid #e3e3e3; background:#ffffff;134 display:flex; align-items:center; justify-content:space-around;135 }136 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:8px; color:#0c3b3a; font-size:32px; }137 .nav-item span{ font-size:32px; }138 .pill{139 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);140 width:360px; height:14px; background:#c9c9c9; border-radius:10px;141 }142 143 /* Simple utility */144 .muted{ color:#81908e; }145</style>146</head>147<body>148<div id="render-target">149 150 <!-- Status Bar -->151 <div class="status-bar">152 <div>10:38</div>153 <div class="status-icons">154 <svg width="38" height="38" viewBox="0 0 24 24"><path fill="#333" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/></svg>155 <div>16°</div>156 <div class="dot"></div>157 <svg width="38" height="38" viewBox="0 0 24 24"><path fill="#333" d="M12 2 1 21h22L12 2zm0 3.84L19.53 19H4.47L12 5.84z"/></svg>158 <svg width="38" height="38" viewBox="0 0 24 24"><path fill="#333" d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zM18 16v-5c0-3.07-1.63-5.64-4.5-6.32V3a1.5 1.5 0 0 0-3 0v1.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>159 <svg width="38" height="38" viewBox="0 0 24 24"><path fill="#333" d="M12 4a8 8 0 1 0 .001 16.001A8 8 0 0 0 12 4zm1 4h-2v6h6v-2h-4V8z"/></svg>160 </div>161 </div>162 163 <!-- Search -->164 <div class="search-wrap">165 <div class="search-bar">166 <div class="icon-btn">167 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#333" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>168 </div>169 <div class="search-input">170 <div class="mag">171 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#687776" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/></svg>172 </div>173 <div class="placeholder">nike shoes for men</div>174 </div>175 <div class="icon-btn">176 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#333" d="M12 5c-3.86 0-7 3.14-7 7 0 3.31 2.69 6 6 6h2c3.31 0 6-2.69 6-6 0-3.86-3.14-7-7-7zm0 2c2.76 0 5 2.24 5 5a5 5 0 0 1-5 5h-2a5 5 0 0 1 0-10h2zm-1 2v6l5-3-5-3z"/></svg>177 </div>178 </div>179 </div>180 181 <!-- Location bar -->182 <div class="location-bar">183 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#2a3f3f" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/></svg>184 <div>Select a location to see product availability</div>185 <div class="caret">186 <svg width="30" height="30" viewBox="0 0 24 24"><path fill="#304040" d="M7 10l5 5 5-5z"/></svg>187 </div>188 </div>189 190 <!-- Filters row -->191 <div class="filters-row">192 <div class="prime-toggle">193 <span style="color:#1592ff; font-weight:700;">prime</span>194 <div class="toggle"></div>195 </div>196 <div class="chip primary">₹500 - ₹1,000</div>197 <div class="chip primary">₹1,000 - ₹2,500</div>198 <div class="chip" style="margin-left:auto; display:flex; align-items:center; gap:10px;">199 Filters200 <svg width="26" height="26" viewBox="0 0 24 24"><path fill="#153a3a" d="M3 5h18v2H3V5zm4 6h10v2H7v-2zm-2 6h14v2H5v-2z"/></svg>201 </div>202 </div>203 204 <!-- Brand header -->205 <div class="brand-header">206 <div class="brand-logo">C</div>207 <div>Premium Footwear by Centrino</div>208 </div>209 210 <!-- Hero image -->211 <div class="img-hero">[IMG: Large hero photo - tan casual shoes on feet, outdoor background]</div>212 213 <!-- Deal cards -->214 <div class="deal-row">215 <div class="deal-card">216 <div class="deal-img">[IMG: Navy Slip-on]</div>217 <div class="deal-body">218 <div class="deal-tag">Deal of the Day</div>219 <div class="price-line">₹749 <span class="prime-badge">prime</span></div>220 <div class="old-price">₹2,199 (66% off)</div>221 </div>222 </div>223 <div class="deal-card">224 <div class="deal-img">[IMG: Tan Sandals]</div>225 <div class="deal-body">226 <div class="deal-tag">Deal of the Day</div>227 <div class="price-line">₹799 <span class="prime-badge">prime</span></div>228 <div class="old-price">₹2,499 (68% off)</div>229 </div>230 </div>231 </div>232 233 <div class="sub-row">234 <div>Save up to 77% on centrino</div>235 <div class="sponsored">Sponsored236 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#596665" d="M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>237 </div>238 </div>239 240 <div class="note">Price and other details may vary based on product size and colour.</div>241 242 <!-- Grid of two products -->243 <div class="grid">244 <div class="card">245 <div class="img">[IMG: Black Running Shoes Pair]</div>246 </div>247 <div class="card">248 <div class="img">[IMG: Black Nike Shoes with Red Swoosh]</div>249 </div>250 </div>251 252 <!-- Bottom Nav -->253 <div class="bottom-nav">254 <div class="nav-item">255 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#0c3b3a" d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>256 <span>Home</span>257 </div>258 <div class="nav-item">259 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#0c3b3a" d="M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z"/></svg>260 <span>You</span>261 </div>262 <div class="nav-item">263 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#0c3b3a" d="M12 6V4l-4 4 4 4V10c3.31 0 6 2.69 6 6a6 6 0 0 1-6 6v-2a4 4 0 0 0 0-8z"/></svg>264 <span>More</span>265 </div>266 <div class="nav-item">267 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#0c3b3a" d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.16 14l.84-2h8l2.24-7H6.21L5.27 2H2v2h2l3.6 7.59-1.35 2.45C5.52 15.37 6.48 17 8 17h12v-2H8.42c-.14 0-.25-.11-.26-.24l.01-.06L8.53 14h-1.37z"/></svg>268 <span>Cart</span>269 </div>270 <div class="nav-item">271 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#0c3b3a" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>272 <span>Menu</span>273 </div>274 </div>275 276 <div class="pill"></div>277</div>278</body>279</html>