GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Yonex Badminton Racket - Mock UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #f4f7f9;13 }14 15 /* Top gradient header */16 .top-gradient {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 240px;22 background: linear-gradient(180deg,#a9e8e5 0%, #c4f0ec 50%, #d1f5f1 100%);23 }24 25 /* Status bar */26 .status-bar {27 position: absolute;28 top: 20px;29 left: 24px;30 width: 1032px;31 height: 60px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #1a1a1a;36 font-size: 36px;37 opacity: 0.9;38 }39 .status-icons {40 display: flex;41 align-items: center;42 gap: 28px;43 }44 .status-icons svg { width: 40px; height: 40px; fill: #333; }45 46 /* Search area */47 .search-row {48 position: absolute;49 top: 92px;50 left: 24px;51 width: 1032px;52 display: flex;53 align-items: center;54 gap: 18px;55 }56 .back-btn {57 width: 72px;58 height: 72px;59 border-radius: 16px;60 display: flex;61 align-items: center;62 justify-content: center;63 }64 .back-btn svg { width: 44px; height: 44px; }65 .search-bar {66 flex: 1;67 height: 100px;68 border-radius: 26px;69 background: #fff;70 box-shadow: 0 2px 0 rgba(0,0,0,0.06);71 display: flex;72 align-items: center;73 padding: 0 28px;74 gap: 22px;75 border: 1px solid #e1e5ea;76 }77 .search-icon { width: 46px; height: 46px; fill: #4a4a4a; }78 .search-text {79 flex: 1;80 font-size: 36px;81 color: #1f1f1f;82 }83 .search-actions { display: flex; align-items: center; gap: 28px; }84 .action-icon { width: 44px; height: 44px; fill: #4a4a4a; opacity: 0.8; }85 86 /* Content list area */87 .content {88 position: absolute;89 top: 240px;90 left: 0;91 width: 1080px;92 height: 1960px;93 overflow: hidden;94 padding: 0 24px;95 }96 97 .card {98 background: #fff;99 border: 1px solid #e5e7eb;100 border-radius: 16px;101 margin: 18px 0;102 padding: 18px;103 display: grid;104 grid-template-columns: 300px 1fr;105 gap: 22px;106 }107 .img {108 width: 300px;109 height: 300px;110 background: #E0E0E0;111 border: 1px solid #BDBDBD;112 border-radius: 12px;113 display: flex;114 align-items: center;115 justify-content: center;116 color: #757575;117 text-align: center;118 font-size: 26px;119 padding: 12px;120 }121 .details { padding-right: 6px; }122 .brand {123 font-weight: 700;124 font-size: 36px;125 color: #1a1a1a;126 margin-bottom: 8px;127 }128 .title {129 font-size: 32px;130 line-height: 1.25;131 color: #1f2937;132 margin-bottom: 8px;133 }134 .pill {135 display: inline-block;136 font-size: 24px;137 background: #edf2ff;138 color: #3b4858;139 border: 1px solid #dbe4ff;140 border-radius: 12px;141 padding: 4px 12px;142 margin-bottom: 8px;143 }144 145 /* Ratings */146 .rating-row {147 display: inline-flex;148 align-items: center;149 gap: 8px;150 margin: 8px 0 12px;151 }152 .rating-row .score { font-size: 28px; color: #1f1f1f; }153 .stars svg { width: 28px; height: 28px; }154 .count { font-size: 26px; color: #6b7280; }155 156 .badge-deal {157 display: inline-block;158 background: #b4361d;159 color: #fff;160 padding: 8px 14px;161 font-size: 26px;162 border-radius: 10px;163 margin: 8px 0 10px;164 }165 166 .price-row {167 font-size: 40px;168 color: #111827;169 margin: 8px 0;170 }171 .mrp {172 font-size: 28px;173 color: #6b7280;174 margin-left: 12px;175 }176 .mrp del { color: #8b9099; }177 .delivery {178 font-size: 28px;179 color: #374151;180 margin-top: 6px;181 }182 .free {183 font-size: 26px;184 color: #0f766e;185 margin-top: 2px;186 }187 188 /* Amazon's Choice ribbon */189 .ribbon {190 position: absolute;191 left: 24px;192 transform: translateY(-16px);193 background: #232f3e;194 color: #fff;195 font-size: 28px;196 padding: 10px 16px;197 border-radius: 12px;198 display: inline-flex;199 align-items: center;200 gap: 8px;201 }202 .ribbon .accent { color: #f59e0b; font-weight: 700; }203 204 /* Bottom nav bar */205 .bottom-nav {206 position: absolute;207 bottom: 120px;208 left: 0;209 width: 1080px;210 height: 140px;211 border-top: 1px solid #e5e7eb;212 background: #fff;213 display: flex;214 justify-content: space-around;215 align-items: center;216 }217 .nav-item {218 display: flex;219 flex-direction: column;220 align-items: center;221 gap: 8px;222 color: #111827;223 font-size: 28px;224 }225 .nav-item svg { width: 56px; height: 56px; fill: #111827; }226 227 .gesture-bar {228 position: absolute;229 bottom: 40px;230 left: 290px;231 width: 500px;232 height: 12px;233 background: #c8c8c8;234 border-radius: 8px;235 }236</style>237</head>238<body>239<div id="render-target">240 241 <!-- Header gradient -->242 <div class="top-gradient"></div>243 244 <!-- Status bar -->245 <div class="status-bar">246 <div>2:14</div>247 <div class="status-icons">248 <!-- Signal -->249 <svg viewBox="0 0 24 24"><path d="M2 20h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V12zm4-4h2v14h-2V8zm4-6h2v20h-2V2z"/></svg>250 <!-- WiFi -->251 <svg viewBox="0 0 24 24"><path d="M12 18l-2.5 2.5L12 23l2.5-2.5L12 18zm-6-6l2 2a7 7 0 018 0l2-2a9 9 0 00-12 0zm-4-4l2 2a13 13 0 0116 0l2-2a15 15 0 00-20 0z"/></svg>252 <!-- Battery -->253 <svg viewBox="0 0 24 24"><path d="M20 7h2v10h-2V7zM2 7h16v10H2V7zm2 2v6h12V9H4z"/></svg>254 </div>255 </div>256 257 <!-- Search bar row -->258 <div class="search-row">259 <div class="back-btn">260 <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7v14z"/></svg>261 </div>262 <div class="search-bar">263 <svg class="search-icon" viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zM10 15a5 5 0 110-10 5 5 0 010 10z"/></svg>264 <div class="search-text">Yonex Badminton Racket</div>265 <div class="search-actions">266 <!-- Camera -->267 <svg class="action-icon" viewBox="0 0 24 24"><path d="M9 4l2-2h2l2 2h4v16H3V4h6zm3 4a6 6 0 100 12 6 6 0 000-12zm0 2a4 4 0 110 8 4 4 0 010-8z"/></svg>268 <!-- Mic -->269 <svg class="action-icon" viewBox="0 0 24 24"><path d="M12 15a4 4 0 004-4V6a4 4 0 10-8 0v5a4 4 0 004 4zm1 2.9V22h-2v-4.1A7 7 0 015 12h2a5 5 0 0010 0h2a7 7 0 01-6 5.9z"/></svg>270 </div>271 </div>272 </div>273 274 <!-- Content list -->275 <div class="content">276 277 <!-- Card 1 -->278 <div class="card">279 <div class="img">[IMG: Yonex Racket with Carry Bag]</div>280 <div class="details">281 <div class="brand">Badminton</div>282 <div class="title">Lightweight (759) Professional Badminton Racket, Designed in...</div>283 284 <span class="pill">Badminton</span>285 286 <div class="rating-row">287 <div class="score">3.5</div>288 <div class="stars">289 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>290 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>291 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>292 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>293 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>294 </div>295 <div class="count">(9)</div>296 </div>297 298 <span class="badge-deal">Limited time deal</span>299 300 <div class="price-row">₹1,969 <span class="mrp">M.R.P: <del>₹6,999</del> (72% off)</span></div>301 <div class="delivery">Get it by <strong>Monday, 4 December</strong></div>302 <div class="free">FREE Delivery by Amazon</div>303 </div>304 </div>305 306 <!-- Amazon's Choice Ribbon -->307 <div class="ribbon">Amazon's <span class="accent">Choice</span></div>308 309 <!-- Card 2 -->310 <div class="card" style="margin-top: 24px;">311 <div class="img">[IMG: YONEX ZR100 Set (Rackets + Cover)]</div>312 <div class="details">313 <div class="brand">YONEX</div>314 <div class="title">ZR 100 Light Aluminium Badminton Racquet with Full Cover (Blue/Orange) Made in Ind...</div>315 316 <span class="pill">Badminton</span>317 318 <div class="rating-row">319 <div class="score">4.1</div>320 <div class="stars">321 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>322 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>323 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>324 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>325 <svg viewBox="0 0 24 24"><path fill="#d1d5db" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>326 </div>327 <div class="count">(7,379)</div>328 </div>329 330 <div class="delivery" style="color:#374151;">700+ bought in past month</div>331 332 <div class="price-row">₹927.20 <span class="mrp">M.R.P: <del>₹1,600</del> (42% off)</span></div>333 <div class="delivery">Get it by <strong>Saturday, 2 December</strong></div>334 <div class="free">FREE Delivery by Amazon</div>335 </div>336 </div>337 338 <!-- Card 3 -->339 <div class="card">340 <div class="img">[IMG: Yonex Nanoray Light 18i Racket]</div>341 <div class="details">342 <div class="brand">YONEX</div>343 <div class="title">Nanoray Light 18i Graphite Badminton Racquet With Free Full Cover (77 Grams, 30 Lbs Tension...)</div>344 345 <span class="pill">Badminton</span>346 347 <div class="rating-row">348 <div class="score">4.3</div>349 <div class="stars">350 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>351 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>352 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>353 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>354 <svg viewBox="0 0 24 24"><path fill="#d1d5db" d="M12 17.3l-6.2 3.5 1.6-6.9L2 9l7-.6L12 2l3 6.4 7 .6-5.4 4.9 1.6 6.9z"/></svg>355 </div>356 <div class="count">(17,085)</div>357 </div>358 359 <div class="delivery">2K+ bought in past month</div>360 361 <span class="badge-deal">Limited time deal</span>362 363 <div class="price-row">₹2,040 <span class="mrp">M.R.P: <del>₹2,990</del> (32% off)</span></div>364 <div class="delivery">Get it by <strong>Saturday, 2 December</strong></div>365 <div class="free">FREE Delivery by Amazon</div>366 </div>367 </div>368 369 <!-- Spacer to mimic scroll -->370 <div style="height: 180px;"></div>371 </div>372 373 <!-- Bottom navigation -->374 <div class="bottom-nav">375 <div class="nav-item">376 <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v9h-6v-6H9v6H3v-9z"/></svg>377 <div>Home</div>378 </div>379 <div class="nav-item">380 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 9c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/></svg>381 <div>You</div>382 </div>383 <div class="nav-item">384 <svg viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5zm-9 9l9 5 9-5v7l-9 5-9-5v-7z"/></svg>385 <div>More</div>386 </div>387 <div class="nav-item">388 <svg viewBox="0 0 24 24"><path d="M7 6h13l-2 12H7L5 4H2V2h4l1 4zm3 4h2v6h-2v-6zm4 0h2v6h-2v-6z"/></svg>389 <div>Cart</div>390 </div>391 <div class="nav-item">392 <svg viewBox="0 0 24 24"><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></svg>393 <div>Menu</div>394 </div>395 </div>396 397 <!-- Gesture bar -->398 <div class="gesture-bar"></div>399 400</div>401</body>402</html>