GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>E-commerce UI Mock</title>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 }16 17 /* Generic helpers */18 .row { display: flex; align-items: center; }19 .space-between { justify-content: space-between; }20 .divider { height: 1px; background: #E0E0E0; margin: 20px 0; }21 .section { padding: 0 36px; }22 .muted { color: #757575; }23 .green { color: #1aa130; }24 .grey-bg { background: #F4F5F7; }25 .badge {26 position: absolute; top: -8px; right: -8px;27 background: #E53935; color: #fff; font-size: 26px; line-height: 26px;28 border-radius: 18px; padding: 6px 10px;29 border: 2px solid #fff;30 }31 32 /* Status bar */33 .status-bar { height: 100px; padding: 0 36px; color: #616161; font-size: 36px; }34 .status-icons svg { width: 40px; height: 40px; margin-left: 22px; }35 36 /* Search header */37 .header { padding: 18px 36px 8px 36px; }38 .back-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 20px; }39 .search-box {40 flex: 1;41 height: 110px; border-radius: 18px; background: #F1F3F4;42 border: 1px solid #E0E0E0; padding: 0 26px;43 display: flex; align-items: center; justify-content: space-between;44 color: #9E9E9E; font-size: 36px;45 }46 .search-right { display: flex; align-items: center; }47 .search-right svg { width: 44px; height: 44px; margin-left: 18px; }48 .cart-wrap { position: relative; width: 90px; display: flex; align-items: center; justify-content: center; }49 50 /* Offer section */51 .offer-block { padding: 22px 36px; }52 .offer-line { display: flex; align-items: center; }53 .deal-badge {54 width: 150px; height: 90px;55 background: #E0E0E0; border: 1px solid #BDBDBD;56 display: flex; align-items: center; justify-content: center; color: #757575; margin-right: 24px; font-size: 28px;57 }58 .chevron-down { margin-left: auto; }59 .chevron-down svg { width: 36px; height: 36px; }60 61 /* Banner */62 .soft-banner {63 margin: 10px 0 0 0;64 background: #FFF4D6;65 padding: 26px 36px;66 display: flex; align-items: center;67 font-size: 34px; color: #333;68 }69 .banner-img {70 width: 90px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD;71 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; margin-right: 20px;72 }73 74 /* Card */75 .card {76 margin: 24px 36px;77 border: 1px solid #E0E0E0;78 border-radius: 18px;79 background: #fff;80 box-shadow: 0 2px 0 rgba(0,0,0,0.02);81 padding: 24px;82 }83 .card-title { font-size: 42px; font-weight: 700; color: #222; }84 .card-sub { font-size: 32px; color: #757575; margin-top: 8px; }85 .left-icon {86 width: 90px; height: 90px; border-radius: 45px; background: #E0E0E0; border: 1px solid #BDBDBD;87 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; margin-right: 20px;88 }89 .error-bar {90 margin-top: 24px; background: #FDECEC; border: 1px solid #F5B7B1;91 color: #D32F2F; padding: 18px 20px; font-size: 32px; border-radius: 12px;92 }93 .card-actions { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; }94 .link-more { font-size: 34px; color: #333; display: flex; align-items: center; }95 .primary-btn {96 background: #2E6CF6; color: #fff; font-size: 34px; font-weight: 700;97 padding: 24px 32px; border-radius: 14px; border: none;98 }99 100 /* List rows */101 .list-row { padding: 20px 36px; display: flex; align-items: center; justify-content: space-between; }102 .list-row .left { display: flex; align-items: center; }103 .list-row .icon {104 width: 56px; height: 56px; border-radius: 12px; background: #E0F2F1; margin-right: 18px;105 display: flex; align-items: center; justify-content: center;106 }107 .list-row .text { font-size: 36px; color: #333; font-weight: 600; }108 .arrow-right svg { width: 34px; height: 34px; }109 110 .cashback { padding: 18px 36px; }111 .cashback .row { align-items: flex-start; }112 .coin {113 width: 64px; height: 64px; border-radius: 32px; background: #FFF8E1; border: 1px solid #E0E0E0;114 display: flex; align-items: center; justify-content: center; margin-right: 18px; font-size: 34px;115 }116 .cashback-title { font-size: 36px; color: #333; font-weight: 600; }117 .cashback-sub { font-size: 30px; color: #757575; margin-top: 8px; }118 .cashback-sub .link { color: #1a73e8; }119 120 /* GST block */121 .gst-block { padding: 24px 36px; display: flex; align-items: center; justify-content: space-between; }122 .gst-text { max-width: 640px; }123 .gst-title { font-size: 40px; font-weight: 700; color: #333; }124 .gst-sub { font-size: 32px; color: #757575; margin-top: 8px; }125 .gst-image {126 width: 250px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;127 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 10px;128 }129 130 /* Highlights & Actions */131 .highlights { padding: 24px 36px; }132 .high-title { font-size: 46px; font-weight: 700; color: #333; margin-bottom: 22px; }133 134 .actions { display: grid; grid-template-columns: 160px 420px 400px; grid-gap: 24px; }135 .tile {136 height: 120px; border: 1px solid #E0E0E0; border-radius: 16px; background: #fff;137 display: flex; align-items: center; justify-content: center; color: #333; font-size: 34px; font-weight: 600;138 }139 .tile .cart-plus { display: flex; align-items: center; }140 .tile .cart-plus svg { width: 40px; height: 40px; margin-right: 12px; }141 .emi-btn {142 height: 120px; border: 1px solid #E0E0E0; border-radius: 16px; background: #fff;143 display: flex; align-items: center; justify-content: center; font-size: 36px; color: #333; font-weight: 600;144 }145 .buy-btn {146 height: 120px; border-radius: 16px; background: #FFCC00; color: #000; font-weight: 700; font-size: 38px;147 display: flex; align-items: center; justify-content: center;148 }149 150 /* Floating help button */151 .fab {152 position: absolute; right: 36px; bottom: 260px;153 width: 120px; height: 120px; border-radius: 60px; background: #2E6CF6; box-shadow: 0 8px 20px rgba(0,0,0,0.2);154 display: flex; align-items: center; justify-content: center;155 }156 .fab-inner {157 width: 96px; height: 96px; border-radius: 48px; background: #FFEB3B;158 display: flex; align-items: center; justify-content: center; font-weight: 800; color: #2E6CF6; font-size: 42px;159 }160 161 /* Gesture bar */162 .gesture {163 position: absolute; left: 50%; transform: translateX(-50%);164 bottom: 26px; width: 300px; height: 12px; border-radius: 8px; background: #000;165 opacity: 0.1;166 }167</style>168</head>169<body>170<div id="render-target">171 172 <!-- Status bar -->173 <div class="status-bar row space-between">174 <div>10:34</div>175 <div class="status-icons row">176 <!-- Signal -->177 <svg viewBox="0 0 24 24">178 <rect x="2" y="16" width="3" height="6" fill="#666"></rect>179 <rect x="7" y="12" width="3" height="10" fill="#666"></rect>180 <rect x="12" y="8" width="3" height="14" fill="#666"></rect>181 <rect x="17" y="4" width="3" height="18" fill="#666"></rect>182 </svg>183 <!-- Battery -->184 <svg viewBox="0 0 30 24">185 <rect x="1" y="5" width="24" height="14" rx="2" ry="2" stroke="#666" fill="none" stroke-width="2"></rect>186 <rect x="3" y="7" width="18" height="10" fill="#666"></rect>187 <rect x="26" y="9" width="3" height="6" fill="#666"></rect>188 </svg>189 </div>190 </div>191 192 <!-- Search header -->193 <div class="header row">194 <div class="back-icon">195 <svg viewBox="0 0 24 24">196 <path d="M15 5l-7 7 7 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>197 </svg>198 </div>199 <div class="search-box">200 <div class="muted">Search for products</div>201 <div class="search-right">202 <!-- Mic -->203 <svg viewBox="0 0 24 24">204 <rect x="9" y="4" width="6" height="10" rx="3" fill="#757575"></rect>205 <path d="M5 11c0 4 3 6 7 6s7-2 7-6" stroke="#757575" stroke-width="2" fill="none"></path>206 <rect x="11" y="18" width="2" height="3" fill="#757575"></rect>207 </svg>208 </div>209 </div>210 <div class="cart-wrap">211 <svg viewBox="0 0 24 24" width="54" height="54">212 <path d="M3 5h3l2 10h9l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>213 <circle cx="10" cy="20" r="2" fill="#333"></circle>214 <circle cx="17" cy="20" r="2" fill="#333"></circle>215 </svg>216 <div class="badge">1</div>217 </div>218 </div>219 220 <!-- Offer area -->221 <div class="offer-block">222 <div class="offer-line">223 <div class="deal-badge">[IMG: WOW! DEAL]</div>224 <div>225 <div style="font-size:44px; font-weight:800; color:#333;">226 Get at <span class="green">₹78,999</span> or <span class="green">13,167/m</span>227 </div>228 <div class="muted" style="font-size:32px; margin-top:4px;">With Bank offer</div>229 </div>230 <div class="chevron-down">231 <svg viewBox="0 0 24 24">232 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>233 </svg>234 </div>235 </div>236 </div>237 238 <div class="divider"></div>239 240 <!-- All offers row -->241 <div class="list-row">242 <div class="left">243 <div style="font-size:38px; font-weight:800; color:#333;">All Offers & Coupons</div>244 </div>245 <div class="arrow-right">246 <svg viewBox="0 0 24 24">247 <path d="M9 6l6 6-6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>248 </svg>249 </div>250 </div>251 252 <!-- Yellow banner -->253 <div class="soft-banner">254 <div class="banner-img">[IMG: Sale Badge]</div>255 <div>Big Bachat Dhamaal Sale Ends in : <span class="muted">13h 25m 12s</span></div>256 </div>257 258 <!-- Exchange card -->259 <div class="card">260 <div class="row">261 <div class="left-icon">↔</div>262 <div>263 <div class="card-title">Exchange your old phone in 30 seconds</div>264 <div class="card-sub">Get exchange value up to <span class="green">₹23,300</span></div>265 </div>266 </div>267 <div class="error-bar">Enter pincode to check if exchange is available</div>268 <div class="card-actions">269 <div class="link-more">Show more270 <svg viewBox="0 0 24 24" style="margin-left:10px; width:28px; height:28px;">271 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>272 </svg>273 </div>274 <button class="primary-btn">Change Pincode</button>275 </div>276 </div>277 278 <div class="divider"></div>279 280 <!-- Bestsellers row -->281 <div class="list-row">282 <div class="left">283 <div class="icon">284 <svg viewBox="0 0 24 24" width="32" height="32">285 <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#00C4B4"></path>286 </svg>287 </div>288 <div class="text">See bestsellers in Mobiles - Handsets</div>289 </div>290 <div class="arrow-right">291 <svg viewBox="0 0 24 24">292 <path d="M9 6l6 6-6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>293 </svg>294 </div>295 </div>296 297 <div class="divider"></div>298 299 <!-- Cashback info -->300 <div class="cashback">301 <div class="row">302 <div class="coin">⚡</div>303 <div>304 <div class="cashback-title">You will earn 50 SuperCoins cashback</div>305 <div class="cashback-sub">Use it to save on your next order. <span class="link">How?</span></div>306 </div>307 </div>308 </div>309 310 <div class="divider"></div>311 312 <!-- GST block -->313 <div class="gst-block">314 <div class="gst-text">315 <div class="gst-title">GST Invoice Available</div>316 <div class="gst-sub">Save Up to 28% on business purchases</div>317 <div class="cashback-sub" style="margin-top:10px;"><span class="link">Know More</span> ›</div>318 </div>319 <div class="gst-image">[IMG: GST Illustration]</div>320 </div>321 322 <!-- Highlights and actions -->323 <div class="highlights">324 <div class="high-title">Highlights</div>325 <div class="actions">326 <div class="tile">327 <div class="cart-plus">328 <svg viewBox="0 0 24 24">329 <path d="M3 6h4l2 10h9l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>330 </svg>331 +332 </div>333 </div>334 <div class="emi-btn">Pay with EMI</div>335 <div class="buy-btn">Buy now</div>336 </div>337 </div>338 339 <!-- Floating help button -->340 <div class="fab">341 <div class="fab-inner">F</div>342 </div>343 344 <!-- Gesture bar -->345 <div class="gesture"></div>346</div>347</body>348</html>