GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile Search Results Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F6F7F9;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;16 color: #222;17 }18 19 /* Top gradient/status + search */20 .top-gradient {21 width: 100%;22 height: 240px;23 background: linear-gradient(180deg, #9FE1D4 0%, #97D9E1 100%);24 padding: 24px 32px 0 32px;25 box-sizing: border-box;26 }27 .status-row {28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #1d1d1d;32 font-size: 38px;33 opacity: 0.9;34 }35 .status-icons {36 display: flex;37 gap: 24px;38 align-items: center;39 }40 .search-row {41 display: flex;42 align-items: center;43 gap: 24px;44 margin-top: 22px;45 }46 .icon-btn {47 width: 84px;48 height: 84px;49 border-radius: 30px;50 background: transparent;51 display: flex;52 align-items: center;53 justify-content: center;54 }55 .search-pill {56 flex: 1;57 height: 96px;58 background: #fff;59 border-radius: 48px;60 box-shadow: 0 6px 14px rgba(0,0,0,0.08);61 border: 1px solid #E6E6E6;62 display: flex;63 align-items: center;64 padding: 0 24px 0 24px;65 box-sizing: border-box;66 gap: 18px;67 }68 .search-icon {69 width: 44px;70 height: 44px;71 color: #606770;72 flex: 0 0 auto;73 }74 .search-text {75 font-size: 36px;76 color: #444;77 flex: 1 1 auto;78 white-space: nowrap;79 overflow: hidden;80 text-overflow: ellipsis;81 }82 .scan-btn {83 width: 72px;84 height: 72px;85 border-radius: 24px;86 background: #F2F4F7;87 border: 1px solid #E1E4E8;88 display: flex;89 align-items: center;90 justify-content: center;91 color: #57606a;92 }93 94 /* Content list */95 .content {96 position: absolute;97 top: 240px;98 left: 0;99 right: 0;100 bottom: 170px; /* for bottom nav space */101 overflow: hidden; /* static render */102 }103 .feed {104 padding: 18px 24px 0 24px;105 box-sizing: border-box;106 }107 .card {108 background: #fff;109 border: 1px solid #EFEFEF;110 border-radius: 24px;111 padding: 22px;112 display: grid;113 grid-template-columns: 360px 1fr;114 gap: 26px;115 margin-bottom: 26px;116 }117 .img-ph {118 width: 100%;119 height: 360px;120 background: #E0E0E0;121 border: 1px solid #BDBDBD;122 border-radius: 16px;123 display: flex;124 align-items: center;125 justify-content: center;126 color: #757575;127 font-size: 30px;128 text-align: center;129 padding: 10px;130 box-sizing: border-box;131 }132 .meta .sponsored {133 color: #8D8D8D;134 font-size: 28px;135 margin-bottom: 8px;136 }137 .title {138 font-size: 36px;139 line-height: 1.26;140 margin-bottom: 10px;141 }142 .chip {143 display: inline-block;144 font-size: 26px;145 padding: 8px 12px;146 border-radius: 8px;147 background: #F2F4F7;148 color: #555;149 border: 1px solid #E5E7EB;150 margin-right: 8px;151 }152 .rating-row {153 display: flex;154 align-items: center;155 gap: 10px;156 margin: 12px 0 6px 0;157 }158 .rating-row .score { font-size: 30px; color: #0A7; }159 .stars { display: inline-flex; gap: 2px; }160 .star {161 width: 28px; height: 28px; color: #F59E0B;162 }163 .count { font-size: 28px; color: #777; }164 .bought { font-size: 28px; color: #6E7781; margin-top: 2px; }165 .deal-badge {166 display: inline-block;167 background: #A9442E;168 color: #fff;169 padding: 10px 14px;170 border-radius: 10px;171 font-size: 28px;172 margin: 12px 0;173 }174 .price-row {175 display: flex;176 align-items: baseline;177 gap: 14px;178 margin: 8px 0;179 }180 .price {181 font-size: 48px;182 font-weight: 600;183 }184 .mrp {185 font-size: 28px;186 color: #7A7A7A;187 text-decoration: line-through;188 }189 .off {190 font-size: 28px; color: #374151;191 }192 .prime-row {193 display: flex;194 align-items: center;195 gap: 12px;196 color: #0A7;197 font-weight: 600;198 font-size: 30px;199 margin-top: 10px;200 }201 .prime-sub {202 font-size: 28px;203 color: #4B5563;204 font-weight: 400;205 }206 .age {207 margin-top: 10px;208 font-size: 28px;209 color: #6B7280;210 }211 .best-seller {212 position: absolute;213 top: -8px;214 left: 24px;215 background: #F59E0B;216 color: #fff;217 font-size: 28px;218 padding: 10px 14px;219 border-top-left-radius: 12px;220 border-top-right-radius: 12px;221 border-bottom-right-radius: 12px;222 }223 224 /* Floating scan shortcut */225 .float-scan {226 position: absolute;227 left: 36px;228 bottom: 210px;229 width: 108px;230 height: 108px;231 border-radius: 32px;232 background: #FFFFFF;233 border: 1px solid #E5E7EB;234 box-shadow: 0 8px 16px rgba(0,0,0,0.08);235 display: flex;236 align-items: center;237 justify-content: center;238 color: #111827;239 }240 241 /* Bottom navigation */242 .bottom-nav {243 position: absolute;244 left: 0; right: 0; bottom: 0;245 height: 170px;246 background: #fff;247 border-top: 1px solid #E5E7EB;248 display: grid;249 grid-template-columns: repeat(5, 1fr);250 padding: 14px 0 26px 0;251 box-sizing: border-box;252 }253 .nav-item {254 display: flex;255 flex-direction: column;256 align-items: center;257 justify-content: center;258 gap: 10px;259 color: #4B5563;260 font-size: 28px;261 }262 .nav-item.active { color: #10B981; }263 .nav-icon { width: 44px; height: 44px; }264</style>265</head>266<body>267<div id="render-target">268 269 <div class="top-gradient">270 <div class="status-row">271 <div>10:59</div>272 <div class="status-icons">273 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M12 3a9 9 0 100 18 9 9 0 000-18z" stroke="#2C3E50" stroke-width="2"/></svg>274 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#2C3E50" stroke-width="2"/><path d="M12 6v6l4 2" stroke="#2C3E50" stroke-width="2"/></svg>275 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M3 12h18M7 16h10M9 20h6" stroke="#2C3E50" stroke-width="2"/></svg>276 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" stroke="#2C3E50" stroke-width="2"/></svg>277 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M3 12h18" stroke="#2C3E50" stroke-width="2"/></svg>278 </div>279 </div>280 281 <div class="search-row">282 <div class="icon-btn">283 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">284 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>285 </svg>286 </div>287 <div class="search-pill">288 <svg class="search-icon" viewBox="0 0 24 24" fill="none">289 <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"></circle>290 <path d="M20 20l-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>291 </svg>292 <div class="search-text">toy car for 2 years old boy</div>293 <div class="scan-btn" aria-label="scan">294 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">295 <rect x="4" y="4" width="16" height="16" rx="3" stroke="currentColor" stroke-width="2"/>296 <path d="M7 4v3M17 4v3M7 20v-3M17 20v-3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>297 </svg>298 </div>299 </div>300 </div>301 </div>302 303 <div class="content">304 <div class="feed">305 306 <!-- Card 1 -->307 <div class="card">308 <div class="img-ph">[IMG: Kids activity kit illustration]</div>309 <div class="meta">310 <div class="sponsored">Sponsored</div>311 <div class="title">Little Sparks 7 in 1 Smart Busy Box Learning Kit for Kids Age 3,4,5 Gift Toy for Boys & Girls</div>312 <div class="chip">MDF</div>313 <div class="rating-row">314 <div class="score">4.3</div>315 <div class="stars">316 <svg class="star" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l2.9 6h6.3l-5 3.7 1.9 6.3L12 15.8 5.9 19l1.9-6.3-5-3.7h6.3z"/></svg>317 <svg class="star" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l2.9 6h6.3l-5 3.7 1.9 6.3L12 15.8 5.9 19l1.9-6.3-5-3.7h6.3z"/></svg>318 <svg class="star" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l2.9 6h6.3l-5 3.7 1.9 6.3L12 15.8 5.9 19l1.9-6.3-5-3.7h6.3z"/></svg>319 <svg class="star" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l2.9 6h6.3l-5 3.7 1.9 6.3L12 15.8 5.9 19l1.9-6.3-5-3.7h6.3z"/></svg>320 <svg class="star" viewBox="0 0 24 24" fill="#FCD34D"><path d="M12 3l2.9 6h6.3l-5 3.7 1.9 6.3L12 15.8V3z"/></svg>321 </div>322 <div class="count">(43)</div>323 </div>324 <div class="bought">400+ bought in past month</div>325 <div class="deal-badge">Deal of the Day</div>326 <div class="price-row">327 <div class="price">₹639</div>328 <div class="mrp">M.R.P.: ₹849</div>329 <div class="off">(25% off)</div>330 </div>331 <div class="prime-row">332 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M4 12l4 4 12-12" stroke="#10B981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>333 <div>prime</div>334 <div class="prime-sub">Get it by Tomorrow, 23 December</div>335 </div>336 <div class="prime-sub">FREE Delivery by Amazon</div>337 <div class="age">Ages: 36 months - 5 years</div>338 </div>339 </div>340 341 <!-- Card 2 with best seller ribbon -->342 <div style="position: relative;">343 <div class="best-seller">Best seller</div>344 </div>345 <div class="card" style="margin-top: 0;">346 <div class="img-ph">[IMG: Pack of 4 foldable toy vehicles]</div>347 <div class="meta">348 <div class="title">Kiddie Galaxia Food Transport Foldable Vehicles Car Toy Pack Of 4 With 1 Screwdriver Tools</div>349 <div class="rating-row">350 <div class="score">4.0</div>351 <div class="stars">352 <svg class="star" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l2.9 6h6.3l-5 3.7 1.9 6.3L12 15.8 5.9 19l1.9-6.3-5-3.7h6.3z"/></svg>353 <svg class="star" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l2.9 6h6.3l-5 3.7 1.9 6.3L12 15.8 5.9 19l1.9-6.3-5-3.7h6.3z"/></svg>354 <svg class="star" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l2.9 6h6.3l-5 3.7 1.9 6.3L12 15.8 5.9 19l1.9-6.3-5-3.7h6.3z"/></svg>355 <svg class="star" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l2.9 6h6.3l-5 3.7 1.9 6.3L12 15.8 5.9 19l1.9-6.3-5-3.7h6.3z"/></svg>356 <svg class="star" viewBox="0 0 24 24" fill="#E5E7EB"><path d="M12 3l2.9 6h6.3l-5 3.7 1.9 6.3L12 15.8 5.9 19l1.9-6.3-5-3.7h6.3z"/></svg>357 </div>358 <div class="count">(959)</div>359 </div>360 <div class="bought">100+ bought in past month</div>361 <div class="deal-badge">Deal of the Day</div>362 <div class="price-row">363 <div class="price">₹474</div>364 <div class="mrp">M.R.P.: ₹1,999</div>365 <div class="off">(76% off)</div>366 </div>367 <div class="prime-row">368 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M4 12l4 4 12-12" stroke="#10B981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>369 <div>prime</div>370 <div class="prime-sub">Get it by Today, 22 December</div>371 </div>372 <div class="prime-sub">FREE Delivery over ₹499. Fulfilled by Amazon.</div>373 <div class="age">Ages: 12 months - 8 years</div>374 </div>375 </div>376 377 <!-- Card 3 -->378 <div class="card">379 <div class="img-ph">[IMG: Cartoon characters board for toddlers]</div>380 <div class="meta">381 <div class="title">Activity Board for 2 Year Olds - Early Learning Fun Set</div>382 <div class="bought">700+ bought in past month</div>383 <div class="deal-badge">Deal of the Day</div>384 <div class="price-row">385 <div class="price">₹699</div>386 <div class="mrp">M.R.P.: ₹999</div>387 <div class="off">(30% off)</div>388 </div>389 <div class="prime-row">390 <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M4 12l4 4 12-12" stroke="#10B981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>391 <div>prime</div>392 <div class="prime-sub">Get it by Today, 22 December</div>393 </div>394 <div class="prime-sub">FREE Delivery by Amazon</div>395 <div class="age">Ages: 24 months - 3 years</div>396 </div>397 </div>398 399 </div>400 </div>401 402 <div class="float-scan" aria-label="scan">403 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">404 <rect x="4" y="4" width="16" height="16" rx="3" stroke="#111827" stroke-width="2"/>405 <path d="M7 4v3M17 4v3M7 20v-3M17 20v-3" stroke="#111827" stroke-width="2" stroke-linecap="round"/>406 </svg>407 </div>408 409 <div class="bottom-nav">410 <div class="nav-item active">411 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">412 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" stroke="#10B981" stroke-width="2"/>413 <path d="M9 21v-6h6v6" stroke="#10B981" stroke-width="2"/>414 </svg>415 <div>Home</div>416 </div>417 <div class="nav-item">418 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">419 <circle cx="12" cy="7" r="4" stroke="#4B5563" stroke-width="2"/>420 <path d="M4 21c1.5-4 6-6 8-6s6.5 2 8 6" stroke="#4B5563" stroke-width="2" stroke-linecap="round"/>421 </svg>422 <div>You</div>423 </div>424 <div class="nav-item">425 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">426 <rect x="4" y="4" width="6" height="6" stroke="#4B5563" stroke-width="2"/>427 <rect x="14" y="4" width="6" height="6" stroke="#4B5563" stroke-width="2"/>428 <rect x="4" y="14" width="6" height="6" stroke="#4B5563" stroke-width="2"/>429 <rect x="14" y="14" width="6" height="6" stroke="#4B5563" stroke-width="2"/>430 </svg>431 <div>More</div>432 </div>433 <div class="nav-item">434 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">435 <path d="M6 6h14l-2 10H7L6 6z" stroke="#4B5563" stroke-width="2"/>436 <circle cx="9" cy="20" r="1.5" fill="#4B5563"/>437 <circle cx="17" cy="20" r="1.5" fill="#4B5563"/>438 </svg>439 <div>Cart</div>440 </div>441 <div class="nav-item">442 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">443 <path d="M3 6h18M3 12h18M3 18h18" stroke="#4B5563" stroke-width="2" stroke-linecap="round"/>444 </svg>445 <div>Menu</div>446 </div>447 </div>448 449</div>450</body>451</html>