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 UI 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: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16 color: #111;17 }18 19 /* Header */20 .header {21 position: relative;22 width: 100%;23 height: 240px;24 background: linear-gradient(90deg, #86d3d3, #b6e3c1);25 }26 .status-bar {27 height: 60px;28 padding: 18px 24px;29 font-weight: 600;30 font-size: 34px;31 color: #222;32 display: flex;33 align-items: center;34 justify-content: space-between;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 22px;40 }41 .dot { width: 12px; height: 12px; background: #333; border-radius: 50%; display: inline-block; opacity: 0.7; }42 43 .back-btn {44 position: absolute;45 left: 24px;46 top: 110px;47 width: 70px;48 height: 70px;49 display: inline-flex;50 align-items: center;51 justify-content: center;52 }53 .search-wrap {54 position: absolute;55 left: 110px;56 right: 24px;57 top: 100px;58 height: 92px;59 background: #fff;60 border-radius: 20px;61 box-shadow: 0 6px 16px rgba(0,0,0,0.15);62 display: flex;63 align-items: center;64 padding: 0 24px;65 gap: 16px;66 }67 .search-input {68 flex: 1;69 font-size: 34px;70 color: #333;71 outline: none;72 border: none;73 background: transparent;74 }75 .scan-btn {76 width: 70px;77 height: 70px;78 border-radius: 16px;79 background: #f5f5f5;80 display: inline-flex;81 align-items: center;82 justify-content: center;83 border: 1px solid #ddd;84 }85 86 /* Content list */87 .content {88 position: absolute;89 left: 0;90 right: 0;91 top: 240px;92 bottom: 180px;93 overflow-y: auto;94 padding: 20px 24px 120px;95 background: #ffffff;96 }97 98 .mini-card {99 display: grid;100 grid-template-columns: 360px 1fr;101 gap: 24px;102 background: #fff;103 border: 1px solid #eaeaea;104 border-radius: 22px;105 padding: 22px;106 margin-bottom: 28px;107 }108 109 .card {110 display: grid;111 grid-template-columns: 360px 1fr;112 gap: 24px;113 background: #fff;114 border: 1px solid #eaeaea;115 border-radius: 22px;116 padding: 22px;117 margin-bottom: 28px;118 }119 120 .img {121 width: 100%;122 height: 260px;123 background: #E0E0E0;124 border: 1px solid #BDBDBD;125 border-radius: 18px;126 display: flex;127 align-items: center;128 justify-content: center;129 color: #757575;130 font-size: 28px;131 text-align: center;132 }133 134 .img.tall { height: 300px; position: relative; }135 136 .watch-overlay {137 position: absolute;138 left: 24px;139 bottom: 24px;140 background: rgba(0,0,0,0.55);141 color: #fff;142 padding: 12px 18px;143 border-radius: 24px;144 font-size: 28px;145 display: inline-flex;146 align-items: center;147 gap: 10px;148 }149 .scan-fab {150 position: absolute;151 left: 24px;152 bottom: -28px;153 width: 78px;154 height: 78px;155 border-radius: 50%;156 background: #fff;157 border: 1px solid #ddd;158 display: inline-flex;159 align-items: center;160 justify-content: center;161 box-shadow: 0 4px 10px rgba(0,0,0,0.12);162 }163 164 .title {165 font-size: 36px;166 line-height: 1.25;167 font-weight: 700;168 color: #111;169 margin-bottom: 12px;170 }171 .meta-row {172 display: flex;173 align-items: center;174 gap: 10px;175 margin: 8px 0 12px;176 }177 .badge {178 display: inline-block;179 font-size: 24px;180 color: #333;181 background: #efefef;182 border: 1px solid #ddd;183 border-radius: 8px;184 padding: 4px 10px;185 }186 .rating {187 display: inline-flex;188 align-items: center;189 gap: 8px;190 font-size: 28px;191 color: #007185;192 }193 .stars {194 display: inline-flex;195 gap: 4px;196 transform: translateY(2px);197 }198 199 .deal {200 display: inline-block;201 background: #b94b2c;202 color: #fff;203 font-weight: 700;204 border-radius: 10px;205 padding: 10px 16px;206 font-size: 28px;207 margin: 10px 0 16px;208 width: fit-content;209 }210 .price {211 font-size: 44px;212 font-weight: 800;213 color: #000;214 }215 .mrp {216 font-size: 28px;217 color: #666;218 margin-left: 12px;219 }220 .strike { text-decoration: line-through; color: #777; }221 .save { color: #c45500; font-weight: 600; margin-left: 10px; }222 223 .prime-row {224 display: flex;225 align-items: center;226 gap: 8px;227 font-size: 28px;228 color: #111;229 margin-top: 6px;230 }231 .prime-check {232 color: #f2a93b;233 font-weight: 900;234 }235 .small {236 font-size: 26px;237 color: #555;238 line-height: 1.4;239 margin-top: 6px;240 }241 .divider {242 height: 1px;243 background: #efefef;244 margin: 16px 0;245 }246 247 /* Bottom navigation */248 .bottom-nav {249 position: absolute;250 left: 0;251 right: 0;252 bottom: 0;253 height: 180px;254 border-top: 1px solid #e5e5e5;255 background: #fff;256 }257 .nav-items {258 height: 100%;259 display: grid;260 grid-template-columns: repeat(5, 1fr);261 align-items: center;262 justify-items: center;263 padding-top: 16px;264 }265 .nav-item {266 display: flex;267 flex-direction: column;268 align-items: center;269 gap: 10px;270 font-size: 26px;271 color: #222;272 }273 .nav-item.active { color: #007185; }274 .gesture-bar {275 position: absolute;276 left: 50%;277 transform: translateX(-50%);278 bottom: 10px;279 width: 360px;280 height: 12px;281 background: #d0d0d0;282 border-radius: 6px;283 }284 285 /* Utility icon styles */286 svg { display: block; }287</style>288</head>289<body>290<div id="render-target">291 292 <!-- Header -->293 <div class="header">294 <div class="status-bar">295 <div>10:59</div>296 <div class="status-icons">297 <span class="dot"></span>298 <span class="dot" style="opacity:0.5;"></span>299 <span class="dot" style="opacity:0.8;"></span>300 <span class="dot" style="opacity:0.9;"></span>301 </div>302 </div>303 304 <div class="back-btn">305 <svg width="54" height="54" viewBox="0 0 24 24">306 <path d="M15 18l-6-6 6-6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>307 </svg>308 </div>309 310 <div class="search-wrap">311 <svg width="34" height="34" viewBox="0 0 24 24">312 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>313 <path d="M21 21l-4.5-4.5" stroke="#666" stroke-width="2" stroke-linecap="round"/>314 </svg>315 <div class="search-input">toy car for 2 years old boy</div>316 <div class="scan-btn">317 <svg width="32" height="32" viewBox="0 0 24 24">318 <rect x="5" y="7" width="14" height="10" rx="2" fill="none" stroke="#555" stroke-width="2"/>319 <circle cx="12" cy="12" r="3" fill="none" stroke="#555" stroke-width="2"/>320 </svg>321 </div>322 </div>323 </div>324 325 <!-- Content -->326 <div class="content">327 328 <!-- Mini top card -->329 <div class="mini-card">330 <div class="img">[IMG: Toy vans side-by-side]</div>331 <div>332 <div class="small">Buy any 2, Save 3%</div>333 <div class="prime-row">334 <span class="prime-check">✓</span><span style="color:#2a6db0; font-weight:800;">prime</span>335 <span>Get it by <strong>Today, 22 December</strong></span>336 </div>337 <div class="small">FREE Delivery over ₹499. Fulfilled by Amazon.</div>338 <div class="small">Ages: 12 months - 8 years</div>339 </div>340 </div>341 342 <!-- Product card 1 -->343 <div class="card">344 <div class="img tall" style="position:relative;">345 [IMG: Video thumbnail of toy car demonstration]346 <div class="watch-overlay">347 <svg width="26" height="26" viewBox="0 0 24 24">348 <path d="M4 4h16v16H4z" fill="none" stroke="#fff" stroke-width="2"/>349 <path d="M9 9h6v6H9z" fill="none" stroke="#fff" stroke-width="2"/>350 </svg>351 <span>Watch now</span>352 </div>353 <div class="scan-fab">354 <svg width="32" height="32" viewBox="0 0 24 24">355 <rect x="5" y="7" width="14" height="10" rx="2" fill="none" stroke="#666" stroke-width="2"/>356 <circle cx="12" cy="12" r="3" fill="none" stroke="#666" stroke-width="2"/>357 </svg>358 </div>359 </div>360 <div>361 <div class="title">FunBlast Kids Pull Back Vehicles, Push and Go Crawling Toy Car for Kids & Children (Set of 7 Pcs)</div>362 <div class="meta-row">363 <div class="badge">Car</div>364 </div>365 <div class="rating">366 <span>4.1</span>367 <div class="stars">368 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.1 1.5-6.1L3 9.8l6.3-.6L12 3l2.7 6.2 6.3.6-5 4.5 1.5 6.1z" fill="#f0ad4e"/></svg>369 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.1 1.5-6.1L3 9.8l6.3-.6L12 3l2.7 6.2 6.3.6-5 4.5 1.5 6.1z" fill="#f0ad4e"/></svg>370 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.1 1.5-6.1L3 9.8l6.3-.6L12 3l2.7 6.2 6.3.6-5 4.5 1.5 6.1z" fill="#f0ad4e"/></svg>371 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.1 1.5-6.1L3 9.8l6.3-.6L12 3l2.7 6.2 6.3.6-5 4.5 1.5 6.1z" fill="#f0ad4e"/></svg>372 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.1 1.5-6.1L3 9.8l6.3-.6L12 3l2.7 6.2 6.3.6-5 4.5 1.5 6.1z" fill="#ddd"/></svg>373 </div>374 <span>(6,329)</span>375 </div>376 <div class="small">700+ bought in past month</div>377 <div class="deal">Deal of the Day</div>378 <div style="margin: 6px 0 6px;">379 <span class="price">₹540</span>380 <span class="mrp">M.R.P.: <span class="strike">₹899</span></span>381 <span class="save">(40% off)</span>382 </div>383 <div class="small">Buy any 2, Save 5%</div>384 <div class="prime-row">385 <span class="prime-check">✓</span><span style="color:#2a6db0; font-weight:800;">prime</span>386 <span>Get it by <strong>Tomorrow, 23 December</strong></span>387 </div>388 <div class="small">FREE Delivery by Amazon</div>389 <div class="small">Ages: 24 months and up</div>390 </div>391 </div>392 393 <!-- Product card 2 -->394 <div class="card">395 <div class="img">[IMG: Set of colorful pull-back toy cars]</div>396 <div>397 <div class="title">PRIME DEALS Unbreakable Pull Back Vehicles | Push and Go Crawling Toy for Kids & Children</div>398 <div class="meta-row">399 <div class="badge">Car</div>400 </div>401 <div class="rating">402 <span>4.3</span>403 <div class="stars">404 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.1 1.5-6.1L3 9.8l6.3-.6L12 3l2.7 6.2 6.3.6-5 4.5 1.5 6.1z" fill="#f0ad4e"/></svg>405 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.1 1.5-6.1L3 9.8l6.3-.6L12 3l2.7 6.2 6.3.6-5 4.5 1.5 6.1z" fill="#f0ad4e"/></svg>406 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.1 1.5-6.1L3 9.8l6.3-.6L12 3l2.7 6.2 6.3.6-5 4.5 1.5 6.1z" fill="#f0ad4e"/></svg>407 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.1 1.5-6.1L3 9.8l6.3-.6L12 3l2.7 6.2 6.3.6-5 4.5 1.5 6.1z" fill="#f0ad4e"/></svg>408 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.1 1.5-6.1L3 9.8l6.3-.6L12 3l2.7 6.2 6.3.6-5 4.5 1.5 6.1z" fill="#ddd"/></svg>409 </div>410 <span>(297)</span>411 </div>412 <div class="small">50+ bought in past month</div>413 <div class="deal">Deal of the Day</div>414 <div style="margin: 6px 0 6px;">415 <span class="price">₹444</span>416 <span class="mrp">M.R.P.: <span class="strike">₹1,299</span></span>417 <span class="save">(66% off)</span>418 </div>419 <div class="small">Buy any 2, Save 3%</div>420 <div class="prime-row">421 <span class="prime-check">✓</span><span style="color:#2a6db0; font-weight:800;">prime</span>422 <span>Get it by <strong>Tomorrow, 23 December</strong></span>423 </div>424 <div class="small">FREE Delivery over ₹499. Fulfilled by Amazon.</div>425 <div class="small">Ages: 24 months - 2 years</div>426 </div>427 </div>428 429 </div>430 431 <!-- Bottom Navigation -->432 <div class="bottom-nav">433 <div class="nav-items">434 <div class="nav-item active">435 <svg width="48" height="48" viewBox="0 0 24 24">436 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="#007185" stroke-width="2"/>437 </svg>438 <div>Home</div>439 </div>440 <div class="nav-item">441 <svg width="48" height="48" viewBox="0 0 24 24">442 <circle cx="12" cy="8" r="4" fill="none" stroke="#222" stroke-width="2"/>443 <path d="M4 20c2.5-4 13.5-4 16 0" fill="none" stroke="#222" stroke-width="2"/>444 </svg>445 <div>You</div>446 </div>447 <div class="nav-item">448 <svg width="48" height="48" viewBox="0 0 24 24">449 <rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="#222" stroke-width="2"/>450 <path d="M4 10h16M10 4v16" stroke="#222" stroke-width="2"/>451 </svg>452 <div>More</div>453 </div>454 <div class="nav-item">455 <svg width="48" height="48" viewBox="0 0 24 24">456 <path d="M6 6h15l-2 9H7L6 6z" fill="none" stroke="#222" stroke-width="2"/>457 <circle cx="9" cy="20" r="2" fill="none" stroke="#222" stroke-width="2"/>458 <circle cx="18" cy="20" r="2" fill="none" stroke="#222" stroke-width="2"/>459 </svg>460 <div>Cart</div>461 </div>462 <div class="nav-item">463 <svg width="48" height="48" viewBox="0 0 24 24">464 <path d="M4 7h16M4 12h16M4 17h16" stroke="#222" stroke-width="2" stroke-linecap="round"/>465 </svg>466 <div>Menu</div>467 </div>468 </div>469 <div class="gesture-bar"></div>470 </div>471 472</div>473</body>474</html>