GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Toy Search - Mock UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 0;16 box-shadow: none;17 color: #333;18 }19 20 /* Top status bar */21 .status-bar {22 height: 90px;23 background: #2b2b2b;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 28px;28 font-size: 32px;29 }30 .status-left, .status-right {31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .status-bar .spacer { flex: 1; }36 .dot { width: 10px; height: 10px; background:#bdbdbd; border-radius:50%; display:inline-block; }37 38 /* Promo banner */39 .promo {40 height: 140px;41 background: #a9e3f6;42 display: flex;43 align-items: center;44 justify-content: space-between;45 padding: 0 20px;46 color: #0b4660;47 font-weight: 700;48 }49 .promo .text { text-align: center; width: 85%; line-height: 1.2; font-size: 34px; }50 .icon-btn {51 width: 64px; height: 64px; border-radius: 50%;52 display: flex; align-items: center; justify-content: center;53 background: transparent;54 }55 56 /* Search bar area */57 .search-wrap {58 background: #d61f34;59 padding: 24px 24px 30px;60 position: relative;61 }62 .search-row {63 display: flex;64 align-items: center;65 gap: 18px;66 }67 .pill {68 flex: 1;69 height: 96px;70 background: #fff;71 border-radius: 48px;72 display: flex;73 align-items: center;74 padding: 0 32px;75 font-size: 36px;76 color: #666;77 }78 .pill .placeholder { flex: 1; }79 .search-actions {80 display: flex; align-items: center; gap: 16px; color: #fff;81 }82 83 /* Hero banner placeholder */84 .hero {85 height: 420px;86 margin: 10px 0 6px;87 padding: 0 16px;88 }89 .img-ph {90 width: 100%;91 height: 100%;92 background: #E0E0E0;93 border: 1px solid #BDBDBD;94 display: flex; align-items: center; justify-content: center;95 color: #757575; font-size: 36px; text-align: center;96 }97 98 /* Dots */99 .carousel-dots {100 display: flex; justify-content: center; align-items: center; gap: 24px;101 padding: 18px 0 12px;102 }103 .carousel-dots .dot { width: 22px; height: 22px; background: #d0d0d0; }104 .carousel-dots .active { background: #d61f34; border-radius: 12px; width: 60px; }105 106 /* Product grid */107 .products {108 padding: 14px 14px 220px; /* leave room for bottom bar */109 display: flex; flex-wrap: wrap; gap: 28px;110 }111 .card {112 width: calc(50% - 28px);113 background: #fff;114 border: 1px solid #e6e6e6;115 border-left: 14px solid #f6b9a8;116 border-radius: 12px;117 position: relative;118 padding: 20px;119 box-sizing: border-box;120 }121 .card .prod-img {122 width: 100%;123 height: 360px;124 background: #E0E0E0;125 border: 1px solid #BDBDBD;126 display: flex; align-items: center; justify-content: center;127 color: #757575; font-size: 28px; text-align: center;128 }129 .fav-badge {130 position: absolute;131 right: 20px; top: 16px;132 width: 92px; height: 92px; background: #fff;133 border-radius: 50%;134 box-shadow: 0 2px 6px rgba(0,0,0,0.15);135 display: flex; align-items: center; justify-content: center;136 }137 .card .title {138 margin: 22px 0 8px; font-size: 36px; font-weight: 700; line-height: 1.2;139 }140 .price-line {141 font-size: 30px; color: #9e9e9e; margin: 8px 0;142 }143 .price-line .strike { text-decoration: line-through; margin-right: 10px; }144 .price-line .now { color: #222; font-weight: 700; font-size: 34px; }145 .save { color: #28a745; font-size: 32px; margin: 6px 0 16px; }146 .add-row {147 display: flex; align-items: center; justify-content: flex-end; gap: 10px;148 font-size: 40px; color: #d61f34; font-weight: 700;149 }150 151 /* Bottom actions bar */152 .bottom-bar {153 position: absolute; left: 0; right: 0; bottom: 36px;154 height: 160px; background: #fff; border-top: 1px solid #e3e3e3;155 display: flex; align-items: center; justify-content: space-around;156 }157 .bottom-item { display: flex; align-items: center; gap: 18px; font-size: 40px; color: #111; }158 .gesture {159 position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);160 width: 360px; height: 16px; background: #000; opacity: 0.25; border-radius: 10px;161 }162 163 /* Utility */164 .muted { color: #ffffff; opacity: 0.85; }165</style>166</head>167<body>168<div id="render-target">169 <!-- Status bar -->170 <div class="status-bar">171 <div class="status-left">172 <span style="font-weight:700;">3:30</span>173 <span class="dot"></span>174 <span class="dot"></span>175 <span class="dot"></span>176 </div>177 <div class="spacer"></div>178 <div class="status-right">179 <!-- location pin -->180 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">181 <path d="M12 22s7-7.2 7-12a7 7 0 1 0-14 0c0 4.8 7 12 7 12z"/>182 <circle cx="12" cy="10" r="2.5"/>183 </svg>184 <!-- wifi/connection -->185 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">186 <path d="M2 8a16 16 0 0 1 20 0M5 11a11 11 0 0 1 14 0M8 14a6 6 0 0 1 8 0M11 17a2 2 0 0 1 2 0"/>187 </svg>188 <!-- battery -->189 <svg width="48" height="32" viewBox="0 0 28 14" fill="none" stroke="#fff" stroke-width="2">190 <rect x="1" y="3" width="22" height="8" rx="2"/>191 <rect x="23" y="5" width="4" height="4"/>192 </svg>193 </div>194 </div>195 196 <!-- Promo banner -->197 <div class="promo">198 <div class="icon-btn">199 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#0b4660" stroke-width="2">200 <path d="M15 18l-6-6 6-6"/>201 </svg>202 </div>203 <div class="text">Use Code HAM5 - Addn. 5% off on cart above Rs. 1,499/- - SHOP NOW!!</div>204 <div class="icon-btn">205 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#0b4660" stroke-width="2">206 <path d="M9 6l6 6-6 6"/>207 </svg>208 </div>209 </div>210 211 <!-- Search -->212 <div class="search-wrap">213 <div class="search-row">214 <!-- close icon -->215 <div class="icon-btn" style="background:none;">216 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">217 <path d="M18 6L6 18M6 6l12 12"/>218 </svg>219 </div>220 <div class="pill">221 <div class="placeholder">car for two years old boy</div>222 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#d61f34" stroke-width="2" fill="none">223 <circle cx="11" cy="11" r="7"/>224 <path d="M21 21l-4.3-4.3"/>225 </svg>226 </div>227 <div class="search-actions">228 <!-- heart -->229 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">230 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z"/>231 </svg>232 <!-- bag -->233 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">234 <path d="M6 7h12l-1 13H7L6 7z"/>235 <path d="M9 7a3 3 0 0 1 6 0"/>236 </svg>237 </div>238 </div>239 </div>240 241 <!-- Hero banner -->242 <div class="hero">243 <div class="img-ph">[IMG: Christmas Promo Banner]</div>244 </div>245 246 <!-- Dots -->247 <div class="carousel-dots">248 <div class="active"></div>249 <span class="dot"></span>250 <span class="dot"></span>251 <span class="dot"></span>252 <span class="dot"></span>253 <span class="dot"></span>254 <span class="dot"></span>255 <span class="dot"></span>256 </div>257 258 <!-- Product grid -->259 <div class="products">260 <!-- Card 1 -->261 <div class="card">262 <div class="fav-badge">263 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#e0243a" stroke-width="2.2">264 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z"/>265 </svg>266 </div>267 <div class="prod-img">[IMG: Red toy car close-up]</div>268 <div class="title">Ralleyz Magic Movement Car, Remote Control Toy...</div>269 <div class="price-line"><span>MRP </span><span class="strike">₹3999</span> <span class="now">₹2999</span></div>270 <div class="save">Save 25%</div>271 <div class="add-row">272 Add273 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#d61f34" stroke-width="2">274 <path d="M6 7h12l-1 13H7L6 7z"/>275 <path d="M9 7a3 3 0 0 1 6 0"/>276 </svg>277 </div>278 </div>279 280 <!-- Card 2 -->281 <div class="card">282 <div class="fav-badge">283 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#e0243a" stroke-width="2.2">284 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z"/>285 </svg>286 </div>287 <div class="prod-img">[IMG: Yellow toy car close-up]</div>288 <div class="title">Ralleyz Magic Movement Car, Remote Control Toy...</div>289 <div class="price-line"><span>MRP </span><span class="strike">₹3999</span> <span class="now">₹2999</span></div>290 <div class="save">Save 25%</div>291 <div class="add-row">292 Add293 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#d61f34" stroke-width="2">294 <path d="M6 7h12l-1 13H7L6 7z"/>295 <path d="M9 7a3 3 0 0 1 6 0"/>296 </svg>297 </div>298 </div>299 300 <!-- Card 3 -->301 <div class="card">302 <div class="fav-badge">303 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#e0243a" stroke-width="2.2">304 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z"/>305 </svg>306 </div>307 <div class="prod-img">[IMG: Orange stunt car + controller]</div>308 <div class="title">Seedo Twisting Stunt Car, ...</div>309 <div class="price-line"><span>MRP </span><span class="strike">₹3599</span> <span class="now">₹2699</span></div>310 <div class="save">Save 25%</div>311 <div class="add-row">312 Add313 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#d61f34" stroke-width="2">314 <path d="M6 7h12l-1 13H7L6 7z"/>315 <path d="M9 7a3 3 0 0 1 6 0"/>316 </svg>317 </div>318 </div>319 320 <!-- Card 4 -->321 <div class="card">322 <div class="fav-badge">323 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#e0243a" stroke-width="2.2">324 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z"/>325 </svg>326 </div>327 <div class="prod-img">[IMG: Blue racing car with remote]</div>328 <div class="title">Ralleyz Rustler Racing</div>329 <div class="price-line"><span>MRP </span><span class="strike">₹3499</span> <span class="now">₹2599</span></div>330 <div class="save">Save 25%</div>331 <div class="add-row">332 Add333 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#d61f34" stroke-width="2">334 <path d="M6 7h12l-1 13H7L6 7z"/>335 <path d="M9 7a3 3 0 0 1 6 0"/>336 </svg>337 </div>338 </div>339 </div>340 341 <!-- Bottom sticky bar -->342 <div class="bottom-bar">343 <div class="bottom-item">344 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">345 <path d="M7 8l-3 3 3 3M17 16l3-3-3-3"/>346 <path d="M4 11h16M4 13h16"/>347 </svg>348 <span>Sort</span>349 </div>350 <div class="bottom-item">351 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">352 <path d="M4 7h10M4 12h16M4 17h7"/>353 <circle cx="16" cy="7" r="2"/>354 <circle cx="10" cy="17" r="2"/>355 <circle cx="12" cy="12" r="2"/>356 </svg>357 <span>Filter</span>358 </div>359 </div>360 361 <div class="gesture"></div>362</div>363</body>364</html>