GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Amazon Mobile UI Mock</title>5<style>6 body{margin:0;padding:0;background:transparent;}7 #render-target{8 position:relative;9 width:1080px;10 height:2400px;11 overflow:hidden;12 background:#ffffff;13 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;14 color:#222;15 }16 17 /* Header area */18 .header{19 position:relative;20 width:100%;21 background:linear-gradient(180deg,#a9e4df 0%, #cbeeea 60%, #e7f7f5 100%);22 padding-bottom:24px;23 }24 .status-bar{25 height:56px;26 display:flex;27 align-items:center;28 justify-content:space-between;29 padding:0 28px;30 font-size:28px;31 color:#2b2b2b;32 opacity:0.9;33 }34 .status-right{35 display:flex;36 gap:14px;37 align-items:center;38 }39 .search-row{40 display:flex;41 align-items:center;42 gap:18px;43 padding:14px 24px 8px 24px;44 }45 .back-btn{46 width:64px;height:64px;border-radius:32px;47 display:flex;align-items:center;justify-content:center;48 }49 .search-box{50 flex:1;51 height:92px;52 background:#fff;53 border-radius:20px;54 box-shadow:0 2px 0 rgba(0,0,0,0.06);55 display:flex;align-items:center;56 padding:0 22px;57 gap:18px;58 }59 .search-input{60 flex:1;61 font-size:32px;62 color:#222;63 white-space:nowrap;64 overflow:hidden;65 text-overflow:ellipsis;66 }67 .icon-btn{68 width:64px;height:64px;border-radius:18px;69 display:flex;align-items:center;justify-content:center;70 color:#4a4a4a;71 }72 73 .location-row{74 margin:8px 24px 10px 24px;75 height:64px;76 display:flex;align-items:center;77 gap:12px;78 color:#2e2e2e;79 font-size:30px;80 }81 .pin{82 width:40px;height:40px;border-radius:20px;background:#fff;83 display:flex;align-items:center;justify-content:center;84 box-shadow:0 1px 0 rgba(0,0,0,0.05);85 }86 87 .chips{88 display:flex;align-items:center;gap:14px;89 padding:8px 24px 18px 24px;90 }91 .chip{92 background:#fff;93 border-radius:26px;94 padding:16px 22px;95 font-size:28px;96 color:#333;97 box-shadow:0 1px 0 rgba(0,0,0,0.06);98 display:flex;align-items:center;gap:10px;99 }100 .chip .toggle{101 width:58px;height:30px;border-radius:15px;background:#e9e9e9;position:relative;102 }103 .chip .toggle::after{104 content:"";105 width:28px;height:28px;border-radius:14px;background:#fff;106 position:absolute;left:2px;top:1px;box-shadow:0 0 0 1px #cfcfcf inset;107 }108 109 /* Content area */110 .content{111 background:#fafafa;112 padding:18px 24px 160px 24px;113 }114 .hint{115 font-size:28px;color:#666;margin-bottom:18px;116 }117 118 .card{119 background:#fff;border-radius:16px;120 box-shadow:0 1px 0 rgba(0,0,0,0.08);121 margin-bottom:22px;122 display:grid;grid-template-columns:300px 1fr;123 }124 .card .img{125 padding:16px;126 display:flex;align-items:center;justify-content:center;127 }128 .img-placeholder{129 width:268px;height:268px;background:#E0E0E0;border:1px solid #BDBDBD;130 display:flex;align-items:center;justify-content:center;color:#757575;font-size:24px;text-align:center;border-radius:6px;131 }132 .card .details{133 padding:18px 22px 22px 10px;134 }135 .label-small{136 font-size:26px;color:#777;margin-bottom:6px;137 }138 .brand{139 font-size:34px;font-weight:600;margin-bottom:6px;140 }141 .title{142 font-size:30px;line-height:1.25;color:#222;margin-bottom:8px;143 }144 .badge{145 display:inline-block;background:#eef6ff;color:#1b6adf;border:1px solid #cfe0ff;146 border-radius:14px;padding:6px 12px;font-size:26px;margin:6px 0 10px 0;147 }148 .rating-row{149 display:flex;align-items:center;gap:10px;font-size:28px;margin:6px 0 10px 0;150 }151 .stars{color:#f5a623;font-size:28px;letter-spacing:2px;}152 .deal{153 display:inline-block;background:#a3351a;color:#fff;border-radius:12px;154 padding:10px 14px;font-size:26px;margin:6px 0 12px 0;155 }156 .price-line{157 font-size:38px;font-weight:700;margin-bottom:6px;158 }159 .mrp{160 font-size:26px;color:#666;margin-left:10px;font-weight:500;161 }162 .shipping{163 font-size:28px;color:#333;margin-top:6px;164 }165 .free{166 font-size:28px;color:#444;margin-top:6px;167 }168 169 .ac-pill{170 display:inline-block;background:#0f1111;color:#fff;border-radius:28px;171 padding:16px 22px;font-size:28px;margin:8px 0 12px 0;172 }173 174 /* Bottom navigation */175 .bottom-bar{176 position:absolute;left:0;bottom:0;width:100%;height:138px;background:#fff;177 box-shadow:0 -2px 8px rgba(0,0,0,0.06);178 display:flex;align-items:center;justify-content:space-around;179 }180 .nav-item{181 width:20%;text-align:center;color:#333;font-size:26px;182 }183 .nav-icon{184 width:56px;height:56px;margin:0 auto 8px auto;color:#2e2e2e;185 display:flex;align-items:center;justify-content:center;186 }187 188 /* Simple svg defaults */189 svg{display:block}190</style>191</head>192<body>193<div id="render-target">194 195 <div class="header">196 <div class="status-bar">197 <div>2:13</div>198 <div class="status-right">199 <div style="width:24px;height:24px;border:2px solid #444;border-radius:4px;"></div>200 <div style="width:26px;height:26px;border-radius:13px;border:2px solid #444;"></div>201 <div style="width:26px;height:16px;border-radius:3px;border:2px solid #444;position:relative;">202 <div style="position:absolute;right:-6px;top:4px;width:6px;height:8px;background:#444;border-radius:1px;"></div>203 </div>204 </div>205 </div>206 207 <div class="search-row">208 <div class="back-btn">209 <svg width="36" height="36" viewBox="0 0 24 24">210 <path d="M15 18l-6-6 6-6" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>211 </svg>212 </div>213 214 <div class="search-box">215 <svg width="34" height="34" viewBox="0 0 24 24">216 <circle cx="11" cy="11" r="7" stroke="#4a4a4a" stroke-width="2" fill="none"/>217 <path d="M20 20l-4.2-4.2" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>218 </svg>219 <div class="search-input">Yonex Badminton Racket</div>220 <div class="icon-btn">221 <svg width="30" height="30" viewBox="0 0 24 24">222 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" stroke="#4a4a4a" fill="none" stroke-width="2"/>223 <circle cx="12" cy="12" r="3" stroke="#4a4a4a" fill="none" stroke-width="2"/>224 </svg>225 </div>226 <div class="icon-btn">227 <svg width="30" height="30" viewBox="0 0 24 24">228 <path d="M9 3h6v10a3 3 0 1 1-6 0V3z" stroke="#4a4a4a" fill="none" stroke-width="2"/>229 <path d="M8 20h8" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"/>230 </svg>231 </div>232 </div>233 </div>234 235 <div class="location-row">236 <div class="pin">237 <svg width="24" height="24" viewBox="0 0 24 24">238 <path d="M12 21s-6-7-6-11a6 6 0 1 1 12 0c0 4-6 11-6 11z" stroke="#2d6f6e" fill="none" stroke-width="2"/>239 <circle cx="12" cy="10" r="2.8" stroke="#2d6f6e" fill="none" stroke-width="2"/>240 </svg>241 </div>242 <div style="flex:1;">Deliver to Delhi 110025</div>243 <svg width="28" height="28" viewBox="0 0 24 24">244 <path d="M7 9l5 5 5-5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>245 </svg>246 </div>247 248 <div class="chips">249 <div class="chip">250 <span style="color:#ffb300;">Prime</span>251 <div class="toggle"></div>252 </div>253 <div class="chip">254 <span style="color:#ffb300;">★ ★ ★ ★</span>255 <span>and Up</span>256 </div>257 <div class="chip">YONEX</div>258 <div class="chip">L</div>259 <div class="chip">Filters260 <svg width="20" height="20" viewBox="0 0 24 24">261 <path d="M7 10l5 5 5-5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>262 </svg>263 </div>264 </div>265 </div>266 267 <div class="content">268 <div class="hint">Price and other details may vary based on product size and colour.</div>269 270 <!-- Card 1 -->271 <div class="card">272 <div class="img">273 <div class="img-placeholder">[IMG: Senston 2 Player Racket Set]</div>274 </div>275 <div class="details">276 <div class="label-small">Sponsored</div>277 <div class="brand">Senston</div>278 <div class="title">2 Player Badminton Racket Set - Including 1 Badminton Bag/2 Rackets/2 Badminton /2 Grip...</div>279 <span class="badge">Badminton</span>280 281 <div class="rating-row">282 <div style="font-weight:700;">4.4</div>283 <div class="stars">★ ★ ★ ★ ★</div>284 <div style="color:#666;">(6,621)</div>285 </div>286 287 <div class="deal">Limited time deal</div>288 289 <div class="price-line">₹2,374 <span class="mrp">M.R.P: ₹2,799 (15% off)</span></div>290 <div class="shipping">Get it by <span style="font-weight:600;">Sunday, 3 December</span></div>291 <div class="free">FREE Delivery by Amazon</div>292 </div>293 </div>294 295 <!-- Card 2 -->296 <div class="card">297 <div class="img">298 <div class="img-placeholder">[IMG: OXXO Warbird Graphite Racket + Bag]</div>299 </div>300 <div class="details">301 <div class="label-small">Sponsored</div>302 <div class="brand">OXXO</div>303 <div class="title">Warbird High Modulus Graphite Lightweight (75g) Professional Badminton Racket, Designed in...</div>304 <span class="badge">Badminton</span>305 306 <div class="rating-row">307 <div style="font-weight:700;">3.5</div>308 <div class="stars">★ ★ ★ ★ ☆</div>309 <div style="color:#666;">(9)</div>310 </div>311 312 <div class="deal">Limited time deal</div>313 314 <div class="price-line">₹1,969 <span class="mrp">M.R.P: ₹6,999 (72% off)</span></div>315 <div class="shipping">Get it by <span style="font-weight:600;">Monday, 4 December</span></div>316 <div class="free">FREE Delivery by Amazon</div>317 </div>318 </div>319 320 <div class="ac-pill">Amazon's Choice</div>321 322 <!-- Placeholder for next product title strip -->323 <div style="background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 0 rgba(0,0,0,0.08);">324 <div class="brand">YONEX</div>325 <div class="title">ZR 100 Light Aluminium</div>326 </div>327 328 </div>329 330 <!-- Bottom navigation -->331 <div class="bottom-bar">332 <div class="nav-item">333 <div class="nav-icon">334 <svg width="40" height="40" viewBox="0 0 24 24">335 <path d="M3 11l9-7 9 7v9H3z" stroke="#2e2e2e" fill="none" stroke-width="2"/>336 </svg>337 </div>338 <div>Home</div>339 </div>340 <div class="nav-item">341 <div class="nav-icon">342 <svg width="40" height="40" viewBox="0 0 24 24">343 <circle cx="12" cy="8" r="4" stroke="#2e2e2e" fill="none" stroke-width="2"/>344 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#2e2e2e" fill="none" stroke-width="2"/>345 </svg>346 </div>347 <div>You</div>348 </div>349 <div class="nav-item">350 <div class="nav-icon">351 <svg width="40" height="40" viewBox="0 0 24 24">352 <path d="M4 6h16M6 12h12M8 18h8" stroke="#2e2e2e" stroke-width="2" stroke-linecap="round"/>353 </svg>354 </div>355 <div>More</div>356 </div>357 <div class="nav-item">358 <div class="nav-icon">359 <svg width="40" height="40" viewBox="0 0 24 24">360 <path d="M6 6h14l-2 9H7L6 6z" stroke="#2e2e2e" fill="none" stroke-width="2"/>361 <circle cx="9" cy="20" r="2" stroke="#2e2e2e" fill="none" stroke-width="2"/>362 <circle cx="17" cy="20" r="2" stroke="#2e2e2e" fill="none" stroke-width="2"/>363 </svg>364 </div>365 <div>Cart</div>366 </div>367 <div class="nav-item">368 <div class="nav-icon">369 <svg width="40" height="40" viewBox="0 0 24 24">370 <path d="M4 5h16v14H4zM8 9h8M8 13h8" stroke="#2e2e2e" fill="none" stroke-width="2"/>371 </svg>372 </div>373 <div>Menu</div>374 </div>375 </div>376 377</div>378</body>379</html>