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>Homecentre UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 box-sizing: border-box;14 }15 16 /* Status bar */17 .status-bar {18 height: 80px;19 padding: 0 34px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #333;24 font-size: 36px;25 }26 .status-icons { display: flex; gap: 28px; align-items: center; }27 .status-icons svg { width: 36px; height: 36px; }28 29 /* Header */30 .header {31 height: 140px;32 padding: 0 40px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 border-bottom: 1px solid #eee;37 }38 .brand {39 display: flex; align-items: center; gap: 24px;40 color: #8CC63F; font-weight: 700; font-size: 54px;41 letter-spacing: 0.5px;42 }43 .brand svg { width: 56px; height: 56px; }44 .header-actions { display: flex; gap: 40px; align-items: center; }45 .icon { width: 48px; height: 48px; }46 .notif {47 position: relative;48 }49 .notif-dot {50 position: absolute; right: -2px; top: -2px;51 width: 16px; height: 16px; background: #ff5a5a; border-radius: 50%;52 border: 2px solid #fff;53 }54 55 /* Category strip */56 .categories {57 padding: 28px 24px 20px;58 display: flex;59 gap: 36px;60 overflow: hidden;61 }62 .cat-item {63 width: 188px;64 text-align: center;65 }66 .cat-img {67 width: 180px; height: 180px;68 background: #E0E0E0; border: 1px solid #BDBDBD;69 color: #757575; display: flex; align-items: center; justify-content: center;70 border-radius: 50%;71 font-size: 26px; line-height: 1.2; padding: 16px; box-sizing: border-box;72 margin: 0 auto 18px;73 }74 .cat-label {75 font-size: 34px; font-weight: 700; color: #111;76 }77 78 /* Hero banner */79 .hero {80 margin-top: 8px;81 margin-bottom: 18px;82 width: 100%;83 height: 620px;84 position: relative;85 }86 .hero .img {87 width: 100%; height: 100%;88 background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;89 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;90 }91 .hero .overlay {92 position: absolute; left: 40px; top: 60px;93 background: rgba(255,255,255,0.85);94 padding: 28px 34px;95 }96 .overlay .title { font-size: 64px; font-weight: 800; color: #222; margin-bottom: 12px; }97 .overlay .subtitle { font-size: 34px; color: #333; margin-bottom: 22px; }98 .overlay .cta {99 display: inline-block; background: #000; color: #fff; font-size: 34px; padding: 16px 28px;100 }101 102 /* Carousel dots */103 .dots {104 height: 40px; display: flex; align-items: center; justify-content: center; gap: 18px;105 }106 .dot {107 width: 18px; height: 18px; background: #CFCFCF; border-radius: 50%;108 }109 .dot.active { background: #8CC63F; }110 111 /* Promo banner */112 .promo {113 margin-top: 6px;114 width: 100%; height: 420px;115 background: #9aa084;116 display: flex; align-items: center; justify-content: center; color: #fff;117 text-align: center;118 border-top: 1px solid #eee; border-bottom: 1px solid #eee;119 }120 .promo-content { max-width: 900px; }121 .promo h2 { margin: 0 0 18px; font-size: 60px; font-weight: 700; }122 .promo p { margin: 0 0 22px; font-size: 36px; }123 .promo .code {124 display: inline-block; color: #fff; border: 2px solid rgba(255,255,255,0.7);125 padding: 16px 24px; font-size: 36px; letter-spacing: 2px;126 }127 128 .divider { height: 24px; background: #f5f5f5; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }129 130 .section-title {131 padding: 34px 32px; font-size: 48px; font-weight: 800; color: #222;132 }133 134 /* Sticky experience bar */135 .experience-bar {136 position: absolute; left: 0; right: 0; bottom: 200px;137 height: 110px; background: #6b6b6b; color: #fff;138 display: flex; align-items: center; justify-content: space-between;139 padding: 0 34px; box-sizing: border-box;140 }141 .experience-bar .text { font-size: 40px; font-weight: 700; }142 .experience-bar .actions { display: flex; align-items: center; gap: 30px; }143 .btn-login {144 background: #8CC63F; color: #000; font-weight: 700; padding: 18px 36px; font-size: 34px;145 }146 .close {147 font-size: 48px; line-height: 1; color: #fff; opacity: 0.9;148 }149 150 /* Bottom navigation */151 .bottom-nav {152 position: absolute; left: 0; bottom: 40px;153 width: 100%; height: 160px; background: #fff; border-top: 1px solid #e5e5e5;154 display: flex; justify-content: space-around; align-items: center;155 }156 .nav-item { width: 200px; text-align: center; color: #777; }157 .nav-item svg { width: 54px; height: 54px; margin-bottom: 12px; }158 .nav-item .label { font-size: 30px; }159 .nav-item.active .label { color: #8CC63F; font-weight: 700; }160 .nav-item.active svg path, .nav-item.active svg { stroke: #8CC63F; fill: none; }161 162 /* Gesture bar */163 .gesture {164 position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: #000;165 }166 .gesture .pill {167 width: 220px; height: 10px; background: #fff; opacity: 0.85; border-radius: 10px;168 position: absolute; left: 50%; top: 15px; transform: translateX(-50%);169 }170</style>171</head>172<body>173<div id="render-target">174 175 <!-- Status Bar -->176 <div class="status-bar">177 <div>1:27</div>178 <div class="status-icons">179 <!-- Cloud icon -->180 <svg viewBox="0 0 24 24">181 <path d="M6 17h10a4 4 0 0 0 0-8 5 5 0 0 0-9-1A4 4 0 0 0 6 17z" fill="#666"></path>182 </svg>183 <!-- WiFi icon -->184 <svg viewBox="0 0 24 24">185 <path d="M2 8c5-4 15-4 20 0M5 12c3-2 11-2 14 0M9 16c2-1 4-1 6 0M12 20l1-1-1-1-1 1 1 1z" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path>186 </svg>187 <!-- Battery icon -->188 <svg viewBox="0 0 28 24">189 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"></rect>190 <rect x="4" y="8" width="12" height="8" fill="#666"></rect>191 <rect x="22" y="10" width="4" height="4" fill="#666"></rect>192 </svg>193 </div>194 </div>195 196 <!-- Header -->197 <div class="header">198 <div class="brand">199 <svg viewBox="0 0 24 24">200 <path d="M3 10l9-6 9 6v10h-6v-6H9v6H3z" fill="#8CC63F"></path>201 </svg>202 <span>homecentre</span>203 </div>204 <div class="header-actions">205 <div class="notif icon">206 <svg viewBox="0 0 24 24">207 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5L4 18v2h16v-2l-2-2z" fill="none" stroke="#111" stroke-width="2"></path>208 </svg>209 <span class="notif-dot"></span>210 </div>211 <div class="icon">212 <svg viewBox="0 0 24 24">213 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"></circle>214 <path d="M16 16l5 5" stroke="#111" stroke-width="2" stroke-linecap="round"></path>215 </svg>216 </div>217 </div>218 </div>219 220 <!-- Categories -->221 <div class="categories">222 <div class="cat-item">223 <div class="cat-img">[IMG: Sofa]</div>224 <div class="cat-label">Living Room</div>225 </div>226 <div class="cat-item">227 <div class="cat-img">[IMG: Bed]</div>228 <div class="cat-label">Bed Room</div>229 </div>230 <div class="cat-item">231 <div class="cat-img">[IMG: Dining Set]</div>232 <div class="cat-label">Dining Room</div>233 </div>234 <div class="cat-item">235 <div class="cat-img">[IMG: Home Office]</div>236 <div class="cat-label">Home Office</div>237 </div>238 <div class="cat-item">239 <div class="cat-img">[IMG: Decor]</div>240 <div class="cat-label">Decor</div>241 </div>242 </div>243 244 <!-- Hero Banner -->245 <div class="hero">246 <div class="img">[IMG: Bedroom Hero Banner]</div>247 <div class="overlay">248 <div class="title">Just Arrived</div>249 <div class="subtitle">Bring home the latest in-trend furniture collections</div>250 <div class="cta">SHOP NOW</div>251 </div>252 </div>253 254 <!-- Dots -->255 <div class="dots">256 <div class="dot active"></div>257 <div class="dot"></div>258 <div class="dot"></div>259 <div class="dot"></div>260 <div class="dot"></div>261 </div>262 263 <!-- Promo Banner -->264 <div class="promo">265 <div class="promo-content">266 <h2>Extra 10% off</h2>267 <p>on exclusive online furniture</p>268 <div class="code">USE CODE : ONX10</div>269 </div>270 </div>271 272 <div class="divider"></div>273 274 <!-- Section Title -->275 <div class="section-title">Recent Searches</div>276 277 <!-- Sticky Experience Bar -->278 <div class="experience-bar">279 <div class="text">For a richer experience</div>280 <div class="actions">281 <div class="btn-login">Login</div>282 <div class="close">×</div>283 </div>284 </div>285 286 <!-- Bottom Navigation -->287 <div class="bottom-nav">288 <div class="nav-item active">289 <svg viewBox="0 0 24 24">290 <path d="M3 11l9-7 9 7v9h-6v-5H9v5H3z" stroke="#999" stroke-width="2" fill="none"></path>291 </svg>292 <div class="label">Home</div>293 </div>294 <div class="nav-item">295 <svg viewBox="0 0 24 24">296 <circle cx="11" cy="11" r="6" stroke="#999" stroke-width="2" fill="none"></circle>297 <path d="M16 16l5 5" stroke="#999" stroke-width="2" stroke-linecap="round"></path>298 </svg>299 <div class="label">Department</div>300 </div>301 <div class="nav-item">302 <svg viewBox="0 0 24 24">303 <path d="M6 7h12l-1 12H7L6 7zm3-3h6l1 3H8l1-3z" stroke="#999" stroke-width="2" fill="none"></path>304 </svg>305 <div class="label">Basket</div>306 </div>307 <div class="nav-item">308 <svg viewBox="0 0 24 24">309 <path d="M12 21s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-11 10z" stroke="#999" stroke-width="2" fill="none"></path>310 </svg>311 <div class="label">Favourites</div>312 </div>313 <div class="nav-item">314 <svg viewBox="0 0 24 24">315 <circle cx="12" cy="8" r="4" stroke="#999" stroke-width="2" fill="none"></circle>316 <path d="M4 22c0-5 4-8 8-8s8 3 8 8" stroke="#999" stroke-width="2" fill="none"></path>317 </svg>318 <div class="label">Account</div>319 </div>320 </div>321 322 <!-- Gesture Bar -->323 <div class="gesture">324 <div class="pill"></div>325 </div>326 327</div>328</body>329</html>