GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Flipkart-like Mobile UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15 color: #212121;16 }17 18 /* Simple status bar */19 .status-bar {20 height: 80px;21 background: #F1F2F4;22 display: flex;23 align-items: center;24 padding: 0 32px;25 font-weight: 600;26 color: #424242;27 font-size: 30px;28 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);29 }30 .status-right {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .icon-cloud, .icon-signal, .icon-battery {37 width: 36px; height: 36px;38 }39 40 /* Header / brand area */41 .header {42 padding: 24px 32px 16px 32px;43 background: #fff;44 }45 .brand-row {46 display: flex;47 align-items: center;48 gap: 18px;49 margin-bottom: 20px;50 }51 .brand-bag {52 width: 62px; height: 62px;53 border-radius: 12px;54 background: #FFD54F;55 display: flex; align-items: center; justify-content: center;56 box-shadow: 0 2px 0 rgba(0,0,0,0.1) inset;57 }58 .brand-bag svg { width: 40px; height: 40px; }59 .brand-name {60 font-size: 48px;61 font-weight: 800;62 color: #1A73E8;63 letter-spacing: 0.5px;64 }65 66 .search-row {67 display: flex;68 align-items: center;69 gap: 20px;70 }71 .search-bar {72 flex: 1;73 height: 100px;74 border: 2px solid #E0E0E0;75 border-radius: 60px;76 padding: 0 28px;77 display: flex; align-items: center;78 gap: 22px;79 box-shadow: 0 2px 4px rgba(0,0,0,0.04);80 }81 .search-bar input {82 border: none; outline: none; background: transparent;83 font-size: 36px; color: #333; flex: 1;84 }85 .search-icon, .mic-icon, .camera-icon {86 width: 44px; height: 44px; color: #616161;87 }88 .brand-mall {89 display: flex; align-items: center; gap: 16px;90 font-weight: 600; color: #616161; font-size: 30px;91 }92 .toggle {93 width: 128px; height: 58px; border-radius: 40px;94 background: #F1F2F4; border: 2px solid #DADCE0;95 position: relative;96 }97 .toggle::before {98 content: "OFF";99 position: absolute; right: 18px; top: 50%;100 transform: translateY(-50%);101 font-size: 26px; font-weight: 700; color: #616161;102 }103 .toggle::after {104 content: "";105 position: absolute; left: 6px; top: 7px;106 width: 44px; height: 44px; border-radius: 50%;107 background: #fff; border: 2px solid #D0D0D0;108 box-shadow: 0 1px 2px rgba(0,0,0,0.15);109 }110 111 /* Main banner */112 .main-banner {113 width: 100%;114 height: 620px;115 padding: 18px 24px;116 }117 .img-placeholder {118 width: 100%;119 height: 100%;120 background: #E0E0E0;121 border: 1px solid #BDBDBD;122 display: flex; align-items: center; justify-content: center;123 color: #757575; font-size: 40px; font-weight: 700;124 border-radius: 12px;125 }126 127 /* Quick categories */128 .quick-cats {129 display: flex;130 justify-content: space-between;131 padding: 28px 24px 8px 24px;132 }133 .cat-item {134 width: 190px;135 display: flex; flex-direction: column; align-items: center;136 gap: 16px;137 }138 .cat-circle {139 width: 140px; height: 140px;140 border-radius: 70px;141 background: #F5F6F8;142 border: 1px solid #E0E0E0;143 display: flex; align-items: center; justify-content: center;144 position: relative;145 }146 .cat-circle svg { width: 64px; height: 64px; color: #FF9100; }147 .cat-label {148 font-size: 28px; color: #424242; text-align: center; line-height: 1.2; font-weight: 700;149 }150 .live-badge {151 position: absolute; bottom: -18px; background: #E53935; color: #fff;152 font-size: 24px; font-weight: 800; padding: 6px 14px; border-radius: 14px;153 }154 155 /* Deal cards row */156 .deal-row {157 display: flex; gap: 24px;158 padding: 16px 24px 0 24px;159 }160 .deal-card {161 flex: 1;162 background: #fff;163 border: 1px solid #E0E0E0;164 border-radius: 16px;165 padding: 16px;166 box-shadow: 0 2px 6px rgba(0,0,0,0.03);167 }168 .deal-card .img {169 height: 220px;170 background: #E0E0E0;171 border: 1px solid #BDBDBD;172 border-radius: 12px;173 display: flex; align-items: center; justify-content: center;174 color: #757575; font-weight: 700; font-size: 30px;175 }176 .deal-title { font-size: 34px; font-weight: 800; margin: 18px 8px 8px 8px; color: #424242; }177 .deal-sub { font-size: 30px; color: #1A73E8; font-weight: 800; margin: 0 8px 8px 8px; }178 179 /* Section header */180 .section-header {181 font-size: 46px; font-weight: 800; padding: 28px 24px 20px 24px; color: #212121;182 }183 .most-shopped {184 background: linear-gradient(180deg,#FFD1E6 0%, #F8E4FF 100%);185 padding-top: 12px;186 padding-bottom: 160px;187 }188 .product-grid {189 display: flex; gap: 24px;190 padding: 0 24px;191 }192 .product-card {193 flex: 1;194 background: #fff; border: 1px solid #E0E0E0; border-radius: 16px;195 padding: 18px;196 box-shadow: 0 2px 6px rgba(0,0,0,0.04);197 }198 .product-card .img {199 height: 520px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;200 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px; font-weight: 700;201 }202 203 /* Bottom tip overlay */204 .tip {205 position: absolute; left: 24px; right: 24px; bottom: 220px;206 background: rgba(33,33,33,0.94); color: #fff;207 border-radius: 24px; padding: 28px;208 display: flex; align-items: center; gap: 20px;209 box-shadow: 0 8px 24px rgba(0,0,0,0.35);210 }211 .tip-text { font-size: 34px; line-height: 1.25; font-weight: 700; }212 .tip-close {213 margin-left: auto; width: 58px; height: 58px;214 border-radius: 50%; border: 2px solid rgba(255,255,255,0.35);215 display: flex; align-items: center; justify-content: center;216 cursor: pointer;217 }218 .tip-close svg { width: 28px; height: 28px; color: #fff; }219 220 /* Bottom navigation */221 .bottom-nav {222 position: absolute; left: 0; right: 0; bottom: 0;223 height: 160px; background: #fff; border-top: 1px solid #E0E0E0;224 display: flex; align-items: center; justify-content: space-around;225 }226 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #424242; }227 .nav-item .icon { width: 56px; height: 56px; color: #616161; }228 .nav-item .label { font-size: 28px; font-weight: 700; }229 .nav-item.active .label { color: #1A73E8; }230 .nav-item.active .icon { color: #1A73E8; }231 232 /* Utility icons */233 svg { display: block; }234</style>235</head>236<body>237<div id="render-target">238 239 <!-- Status bar -->240 <div class="status-bar">241 3:20242 <div class="status-right">243 <!-- simple cloud -->244 <svg class="icon-cloud" viewBox="0 0 24 24">245 <path d="M7 18h9a4 4 0 0 0 0-8h-.3A5.5 5.5 0 0 0 6 9.5 4.5 4.5 0 0 0 7 18Z" fill="#616161"/>246 </svg>247 <!-- signal -->248 <svg class="icon-signal" viewBox="0 0 24 24">249 <path d="M3 21h2v-6H3v6Zm4 0h2v-9H7v9Zm4 0h2v-12h-2v12Zm4 0h2V5h-2v16Zm4 0h2V2h-2v19Z" fill="#616161"/>250 </svg>251 <!-- battery with percent -->252 <div style="display:flex;align-items:center;gap:8px;">253 <svg class="icon-battery" viewBox="0 0 24 24">254 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#616161"/>255 <rect x="20" y="10" width="2" height="4" fill="#616161"/>256 <rect x="4" y="8" width="14" height="8" fill="#C8E6C9"/>257 </svg>258 <span style="font-size:28px;font-weight:800;">100%</span>259 </div>260 </div>261 </div>262 263 <!-- Header -->264 <div class="header">265 <div class="brand-row">266 <div class="brand-bag">267 <!-- simple shopping bag icon -->268 <svg viewBox="0 0 24 24">269 <path d="M7 8V6a5 5 0 0 1 10 0v2h-2V6a3 3 0 0 0-6 0v2H7Z" fill="#1A73E8"/>270 <path d="M5 9h14l-1 11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 9Z" fill="#FFCC00"/>271 </svg>272 </div>273 <div class="brand-name">Flipkart</div>274 </div>275 276 <div class="search-row">277 <div class="search-bar">278 <svg class="search-icon" viewBox="0 0 24 24">279 <path d="M10 3a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm8.7 14.3-3.6-3.6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>280 </svg>281 <input type="text" value="Search for products"/>282 <svg class="mic-icon" viewBox="0 0 24 24">283 <rect x="9" y="3" width="6" height="10" rx="3" fill="currentColor"/>284 <path d="M5 11a7 7 0 0 0 14 0M12 18v3" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>285 </svg>286 <svg class="camera-icon" viewBox="0 0 24 24">287 <path d="M6 7h3l1-2h4l1 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Z" fill="currentColor"/>288 <circle cx="12" cy="12" r="3.5" fill="#fff"/>289 </svg>290 </div>291 <div class="brand-mall">292 Brand Mall293 <div class="toggle"></div>294 </div>295 </div>296 </div>297 298 <!-- Banner -->299 <div class="main-banner">300 <div class="img-placeholder">[IMG: Seasonal deal banner]</div>301 </div>302 303 <!-- Quick Categories -->304 <div class="quick-cats">305 <div class="cat-item">306 <div class="cat-circle">307 <svg viewBox="0 0 24 24">308 <path d="M12 2 7 8h5v6l5-6h-5V2Z" fill="#FF9100"/>309 </svg>310 </div>311 <div class="cat-label">SuperCoin</div>312 </div>313 <div class="cat-item">314 <div class="cat-circle">315 <svg viewBox="0 0 24 24">316 <path d="M12 2l9 6-9 6-9-6 9-6Zm0 12v8" stroke="#FF7043" stroke-width="2" fill="none"/>317 </svg>318 </div>319 <div class="cat-label">NextGen Brands</div>320 </div>321 <div class="cat-item">322 <div class="cat-circle">323 <svg viewBox="0 0 24 24">324 <rect x="4" y="4" width="16" height="12" rx="2" fill="#43A047"/>325 <path d="M12 8v4M8 10h8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>326 </svg>327 </div>328 <div class="cat-label">Money+</div>329 </div>330 <div class="cat-item">331 <div class="cat-circle">332 <svg viewBox="0 0 24 24">333 <rect x="4" y="5" width="16" height="12" rx="2" fill="#FB8C00"/>334 <path d="M10 9v4l4-2-4-2Z" fill="#fff"/>335 </svg>336 <div class="live-badge">LIVE</div>337 </div>338 <div class="cat-label">LiveShop+</div>339 </div>340 <div class="cat-item">341 <div class="cat-circle">342 <svg viewBox="0 0 24 24">343 <path d="M7 14h10a3 3 0 0 0-3-3H10a3 3 0 0 0-3 3Zm0 0-2 4m12-4 2 4" stroke="#FF7043" stroke-width="2" fill="none" stroke-linecap="round"/>344 </svg>345 </div>346 <div class="cat-label">Game Zone</div>347 </div>348 </div>349 350 <!-- Deals Row -->351 <div class="deal-row">352 <div class="deal-card">353 <div class="img">[IMG: Home decor items]</div>354 <div class="deal-title">Deals on Decor</div>355 <div class="deal-sub">Up to 80% Off</div>356 </div>357 <div class="deal-card">358 <div class="img">[IMG: Luxury Smartwatch]</div>359 <div class="deal-title">Luxury Smartwatch</div>360 <div class="deal-sub">Spl. Price ₹1,999</div>361 </div>362 <div class="deal-card">363 <div class="img">[IMG: Noise Earbuds]</div>364 <div class="deal-title">Spl. Launch Price</div>365 <div class="deal-sub"><span style="text-decoration:line-through;color:#9E9E9E;">₹3499</span> ₹999</div>366 </div>367 </div>368 369 <!-- Most Shopped section -->370 <div class="most-shopped">371 <div class="section-header">Most Shopped on FK</div>372 <div class="product-grid">373 <div class="product-card">374 <div class="img">[IMG: Dumbbell set and gym accessories]</div>375 </div>376 <div class="product-card">377 <div class="img">[IMG: Multicolor curtains & drapes]</div>378 </div>379 </div>380 </div>381 382 <!-- Tip overlay -->383 <div class="tip">384 <div class="tip-text">For easy access, we've moved your Account, Cart, and Categories here</div>385 <div class="tip-close">386 <svg viewBox="0 0 24 24">387 <path d="M5 5l14 14M19 5 5 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>388 </svg>389 </div>390 </div>391 392 <!-- Bottom Navigation -->393 <div class="bottom-nav">394 <div class="nav-item active">395 <svg class="icon" viewBox="0 0 24 24">396 <path d="M3 10 12 3l9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V10Z" fill="currentColor"/>397 </svg>398 <div class="label">Home</div>399 </div>400 <div class="nav-item">401 <svg class="icon" viewBox="0 0 24 24">402 <path d="M3 3h8v8H3V3Zm10 0h8v8h-8V3ZM3 13h8v8H3v-8Zm10 0h8v8h-8v-8Z" fill="currentColor"/>403 </svg>404 <div class="label">Categories</div>405 </div>406 <div class="nav-item">407 <svg class="icon" viewBox="0 0 24 24">408 <path d="M12 2a6 6 0 0 0-6 6v3L4 13v1h16v-1l-2-2V8a6 6 0 0 0-6-6Zm-5 16a5 5 0 0 0 10 0H7Z" fill="currentColor"/>409 </svg>410 <div class="label">Notifications</div>411 </div>412 <div class="nav-item">413 <svg class="icon" viewBox="0 0 24 24">414 <circle cx="12" cy="7" r="4" fill="currentColor"/>415 <path d="M4 21a8 8 0 0 1 16 0H4Z" fill="currentColor"/>416 </svg>417 <div class="label">Account</div>418 </div>419 <div class="nav-item">420 <svg class="icon" viewBox="0 0 24 24">421 <path d="M6 6h15l-2 8H7L6 6Zm-1 0H3v2h2V6Zm3 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 .001 4A2 2 0 0 0 18 18Z" fill="currentColor"/>422 </svg>423 <div class="label">Cart</div>424 </div>425 </div>426 427</div>428</body>429</html>