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>DMart Ready UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #2b2b2b; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 28px;16 box-shadow: 0 12px 40px rgba(0,0,0,0.15);17 }18 19 /* Top status bar */20 .status-bar {21 height: 130px;22 background: #2e7d32;23 color: #ffffff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 font-weight: 600;28 font-size: 32px;29 }30 .status-right {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 28px;35 }36 .icon { display: inline-flex; align-items: center; justify-content: center; }37 .icon svg { width: 40px; height: 40px; fill: #ffffff; }38 39 /* App bar */40 .app-bar {41 height: 150px;42 background: #2e7d32;43 display: flex;44 align-items: center;45 padding: 0 40px;46 color: #ffffff;47 }48 .hamburger svg, .cart svg, .user svg { fill: #ffffff; }49 .brand {50 margin-left: 24px;51 font-size: 54px;52 font-weight: 800;53 letter-spacing: 0.2px;54 display: flex;55 align-items: baseline;56 gap: 12px;57 }58 .brand .ready {59 font-size: 38px;60 color: #ff6f00;61 font-weight: 800;62 }63 .app-actions {64 margin-left: auto;65 display: flex;66 align-items: center;67 gap: 36px;68 }69 70 /* Search bar */71 .search-wrap {72 padding: 26px 40px 16px 40px;73 background: #f8f9fa;74 }75 .search {76 height: 120px;77 background: #ffffff;78 border: 2px solid #e0e0e0;79 border-radius: 24px;80 display: flex;81 align-items: center;82 padding: 0 28px;83 box-shadow: 0 6px 16px rgba(0,0,0,0.06);84 }85 .search .placeholder {86 margin-left: 22px;87 font-size: 40px;88 color: #757575;89 flex: 1;90 }91 .search .mic svg, .search .magnify svg { fill: #6b6b6b; }92 93 /* Location & delivery info card */94 .location-card {95 margin: 12px 40px 22px 40px;96 background: #e8f5e9;97 border: 2px solid #c8e6c9;98 border-radius: 22px;99 display: flex;100 align-items: center;101 padding: 26px 28px;102 gap: 26px;103 }104 .loc-left, .loc-right { display: flex; align-items: center; gap: 18px; }105 .loc-left { width: 380px; }106 .loc-pin {107 display: flex;108 flex-direction: column;109 line-height: 1.2;110 }111 .loc-pin .pin-top {112 display: flex; align-items: center; gap: 14px; font-weight: 800; color: #2e7d32; font-size: 40px;113 }114 .loc-pin .sub { font-size: 34px; color: #616161; margin-top: 8px; }115 .divider {116 height: 72px; width: 2px; background: #c8e6c9;117 margin: 0 18px;118 }119 .loc-right-text {120 display: flex; flex-direction: column; line-height: 1.2;121 }122 .loc-right-text .title { font-size: 36px; color: #5e5e5e; }123 .loc-right-text .time { font-size: 40px; font-weight: 800; color: #2e7d32; margin-top: 8px; }124 125 /* Banner */126 .banner {127 margin: 10px 40px 20px 40px;128 height: 520px;129 border-radius: 22px;130 overflow: hidden;131 border: 1px solid #bdbdbd;132 background: #E0E0E0;133 display: flex;134 align-items: center;135 justify-content: center;136 color: #757575;137 font-size: 44px;138 font-weight: 700;139 }140 141 /* Slider dots */142 .dots {143 display: flex; gap: 14px; justify-content: center; align-items: center;144 margin-bottom: 20px;145 }146 .dot { width: 20px; height: 20px; border-radius: 10px; background: #dedede; }147 .dot.active { background: #4caf50; }148 149 /* Popular categories */150 .section-header {151 display: flex; align-items: center; justify-content: space-between;152 padding: 10px 40px 0 40px;153 }154 .section-title {155 font-size: 56px; font-weight: 700; color: #383838;156 }157 .section-title .light { font-weight: 500; color: #6c6c6c; margin-right: 12px; }158 .view-all { color: #2e7d32; font-size: 42px; font-weight: 700; display: flex; align-items: center; gap: 12px; }159 160 .categories {161 display: flex; gap: 24px; padding: 30px 40px 26px 40px;162 }163 .cat-card {164 width: 194px;165 background: #ffffff;166 border: 2px solid #eeeeee;167 border-radius: 28px;168 padding: 24px;169 display: flex; flex-direction: column; align-items: center;170 box-shadow: 0 6px 14px rgba(0,0,0,0.06);171 }172 .cat-img {173 width: 146px; height: 146px; border: 1px solid #BDBDBD; background: #E0E0E0; border-radius: 20px;174 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; text-align: center; padding: 10px;175 }176 .cat-label {177 margin-top: 22px; font-size: 34px; text-align: center; color: #424242; font-weight: 700; line-height: 1.2;178 }179 180 /* Cashback banners row */181 .cashback-row {182 display: flex; gap: 24px; padding: 10px 40px;183 }184 .cash-banner {185 flex: 1;186 height: 170px;187 border: 1px solid #bdbdbd;188 background: #E0E0E0;189 border-radius: 20px;190 display: flex; align-items: center; justify-content: center;191 color: #757575; font-weight: 800; font-size: 34px; text-align: center; padding: 10px;192 }193 194 /* Season's Special */195 .section-header.small { padding-top: 34px; }196 .season-banner {197 margin: 18px 40px 0 40px;198 height: 460px;199 border: 1px solid #bdbdbd;200 border-radius: 22px;201 background: #E0E0E0;202 display: flex; align-items: center; justify-content: center;203 color: #757575; font-size: 44px; font-weight: 700; text-align: center; padding: 10px;204 }205 206 /* Bottom gesture bar (OS) */207 .gesture {208 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);209 width: 360px; height: 20px; background: #000000; border-radius: 12px; opacity: 0.85;210 }211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Status bar -->217 <div class="status-bar">218 <div>10:09</div>219 <div class="status-right">220 <span class="icon" title="video"><svg viewBox="0 0 24 24"><path d="M17 10l4-2v8l-4-2v2H3V8h14v2z"/></svg></span>221 <span class="icon" title="messages"><svg viewBox="0 0 24 24"><path d="M3 4h18v12H6l-3 3V4z"/></svg></span>222 <span class="icon" title="wallet"><svg viewBox="0 0 24 24"><path d="M2 7h18a2 2 0 012 2v6a2 2 0 01-2 2H2V7zm14 3a2 2 0 100 4 2 2 0 000-4z"/></svg></span>223 <span class="icon" title="dot"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg></span>224 <span class="icon" title="wifi"><svg viewBox="0 0 24 24"><path d="M2 8a16 16 0 0120 0l-2 2a12 12 0 00-16 0L2 8zm4 4a10 10 0 0112 0l-2 2a6 6 0 00-8 0l-2-2zm6 6a2 2 0 110 4 2 2 0 010-4z"/></svg></span>225 <span class="icon" title="battery"><svg viewBox="0 0 24 24"><path d="M2 8h18v8H2V8zm20 3h2v2h-2v-2z"/></svg></span>226 </div>227 </div>228 229 <!-- App bar -->230 <div class="app-bar">231 <div class="hamburger icon"><svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg></div>232 <div class="brand">233 <span>DMart</span>234 <span class="ready">ready</span>235 </div>236 <div class="app-actions">237 <div class="cart icon"><svg viewBox="0 0 24 24"><path d="M7 18a2 2 0 114 0 2 2 0 01-4 0zm8 0a2 2 0 114 0 2 2 0 01-4 0zM3 4h2l2 12h12l2-8H7"/></svg></div>238 <div class="user icon"><svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm7 8H5a7 7 0 0114 0z"/></svg></div>239 </div>240 </div>241 242 <!-- Search -->243 <div class="search-wrap">244 <div class="search">245 <div class="magnify icon"><svg viewBox="0 0 24 24"><path d="M10 4a6 6 0 104 10l4 4-2 2-4-4a6 6 0 00-2-12z"/></svg></div>246 <div class="placeholder">Aapko Kya Chahiye?</div>247 <div class="mic icon"><svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm-6-3h2a4 4 0 008 0h2a6 6 0 01-6 6v2h-2v-2a6 6 0 01-6-6z"/></svg></div>248 </div>249 </div>250 251 <!-- Location & delivery info -->252 <div class="location-card">253 <div class="loc-left">254 <div class="icon" style="color:#2e7d32;"><svg viewBox="0 0 24 24"><path fill="#2e7d32" d="M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 9a2 2 0 100-4 2 2 0 000 4z"/></svg></div>255 <div class="loc-pin">256 <div class="pin-top">412207257 <span class="icon" style="margin-left:10px;"><svg viewBox="0 0 24 24"><path fill="#2e7d32" d="M7 10l5 5 5-5H7z"/></svg></span>258 </div>259 <div class="sub">Wagholi</div>260 </div>261 </div>262 <div class="divider"></div>263 <div class="loc-right">264 <div class="icon"><svg viewBox="0 0 24 24"><path fill="#2e7d32" d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1-4-2V7z"/></svg></div>265 <div class="loc-right-text">266 <div class="title">Earliest Home Delivery time slot available</div>267 <div class="time">Thursday 07:00 AM - 09:30 AM</div>268 </div>269 </div>270 </div>271 272 <!-- Main banner -->273 <div class="banner">[IMG: Skin Care promotional banner]</div>274 275 <!-- Slider dots -->276 <div class="dots">277 <div class="dot"></div>278 <div class="dot"></div>279 <div class="dot active"></div>280 </div>281 282 <!-- Popular Categories -->283 <div class="section-header">284 <div class="section-title"><span class="light">Popular</span>Categories</div>285 <div class="view-all">View All286 <span class="icon"><svg viewBox="0 0 24 24"><path fill="#2e7d32" d="M8 5l8 7-8 7V5z"/></svg></span>287 </div>288 </div>289 290 <div class="categories">291 <div class="cat-card">292 <div class="cat-img">[IMG: Personal Care]</div>293 <div class="cat-label">Personal<br>Care</div>294 </div>295 <div class="cat-card">296 <div class="cat-img">[IMG: Dairy]</div>297 <div class="cat-label">Dairy</div>298 </div>299 <div class="cat-card">300 <div class="cat-img">[IMG: Biscuits & Cookies]</div>301 <div class="cat-label">Biscuits &<br>Cookies</div>302 </div>303 <div class="cat-card">304 <div class="cat-img">[IMG: Tissue Paper & Napkins]</div>305 <div class="cat-label">Tissue Paper<br>& Napkins</div>306 </div>307 <div class="cat-card">308 <div class="cat-img">[IMG: Shaving Needs]</div>309 <div class="cat-label">Shaving<br>Needs</div>310 </div>311 </div>312 313 <!-- Cashback banners -->314 <div class="cashback-row">315 <div class="cash-banner">[IMG: Kotak 7% Cashback banner]</div>316 <div class="cash-banner">[IMG: IDFC FIRST 5% Cashback banner]</div>317 </div>318 319 <!-- Season's Special -->320 <div class="section-header small">321 <div class="section-title"><span class="light">Season’s</span>Special</div>322 </div>323 <div class="season-banner">[IMG: The Monsoon Collection banner]</div>324 325 <!-- Bottom gesture bar -->326 <div class="gesture"></div>327</div>328</body>329</html>