GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Jumia Home UI - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FAFAFA; border-radius: 0;13 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;14 color: #111;15 }16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 120px; background: #2B2B2B; color: #FFF;19 display: flex; align-items: center; padding: 0 32px;20 font-weight: 600; font-size: 36px;21 }22 .status-bar .icons { margin-left: auto; display: flex; gap: 24px; align-items: center; }23 .app-header {24 position: absolute; top: 120px; left: 0; right: 0;25 height: 180px; background: #1F1F1F;26 display: flex; align-items: center; padding: 0 32px;27 }28 .search-box {29 flex: 1; height: 112px; border-radius: 16px; background: #FFFFFF;30 display: flex; align-items: center; padding: 0 28px; gap: 24px;31 box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;32 font-size: 38px; color: #9E9E9E;33 }34 .header-action {35 width: 96px; height: 96px; margin-left: 24px; border-radius: 16px;36 display: flex; align-items: center; justify-content: center;37 color: #FFF; border: 2px solid #3A3A3A;38 }39 40 .peach-strip {41 position: absolute; top: 300px; left: 0; right: 0;42 height: 120px; background: #F7E2CF; color: #7A4F2C;43 display: flex; align-items: center; justify-content: center;44 font-size: 42px; font-weight: 700;45 letter-spacing: 0.2px;46 }47 .quick-actions {48 position: absolute; top: 420px; left: 0; right: 0;49 height: 180px; display: flex; gap: 24px; padding: 0 32px;50 }51 .qa-item {52 flex: 1; min-width: 0; background: #F1E7DB; border-radius: 18px;53 display: flex; align-items: center; justify-content: center; gap: 18px;54 color: #6E614F; font-size: 30px; font-weight: 700;55 border: 1px solid #E2D6C8;56 }57 .qa-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }58 59 .carousel {60 position: absolute; top: 620px; left: 0; right: 0;61 height: 380px; padding: 0 32px; display: flex; gap: 24px;62 }63 .promo-card {64 flex: 1; border-radius: 18px; background: #FFE2B6;65 border: 1px solid #E8B979; display: flex; align-items: center; justify-content: center;66 font-weight: 800; font-size: 40px; color: #CB6C1D;67 }68 .dots {69 position: absolute; top: 1010px; left: 0; right: 0; height: 40px;70 display: flex; align-items: center; justify-content: center; gap: 14px;71 }72 .dot { width: 22px; height: 22px; border-radius: 50%; background: #D0D0D0; }73 .dot.active { background: #FF9800; }74 75 .section-title {76 position: absolute; top: 1060px; left: 0; right: 0;77 height: 120px; background: #F7E2CF; display: flex; align-items: center; justify-content: center;78 font-size: 42px; font-weight: 800; color: #6E4B2D;79 }80 81 .categories {82 position: absolute; top: 1180px; left: 0; right: 0;83 height: 300px; padding: 0 32px; display: flex; gap: 24px;84 }85 .cat-card {86 flex: 1; background: #FFF; border-radius: 18px; border: 1px solid #E6E6E6;87 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;88 }89 .img {90 width: 180px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;91 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center; border-radius: 8px;92 }93 .cat-label { font-size: 28px; color: #444; font-weight: 600; text-align: center; padding: 0 16px; }94 95 .flash-header {96 position: absolute; top: 1488px; left: 0; right: 0; height: 140px;97 background: #D84315; color: #FFF; display: flex; align-items: center; padding: 0 32px;98 }99 .flash-header .left {100 display: flex; align-items: center; gap: 18px; font-size: 42px; font-weight: 800;101 }102 .flash-header .sub { font-size: 30px; font-weight: 700; opacity: 0.9; }103 .flash-header .see-all { margin-left: auto; font-size: 34px; font-weight: 800; }104 105 .products {106 position: absolute; top: 1628px; left: 0; right: 0; height: 600px;107 padding: 24px 32px 0; display: flex; gap: 24px;108 }109 .product {110 flex: 1; background: #FFF; border-radius: 18px; border: 1px solid #E6E6E6;111 padding: 18px; position: relative;112 }113 .product .discount {114 position: absolute; top: 18px; left: 18px; background: #FCE9D6; color: #C26A2B;115 padding: 10px 18px; border-radius: 10px; font-weight: 800; font-size: 28px;116 }117 .product .pimg {118 width: 100%; height: 280px; background: #E0E0E0; border: 1px solid #BDBDBD;119 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; border-radius: 12px;120 margin-bottom: 16px;121 }122 .product .title { font-size: 30px; color: #333; line-height: 1.3; height: 76px; overflow: hidden; }123 .product .price { font-size: 40px; font-weight: 800; margin-top: 10px; }124 .product .meta { font-size: 26px; color: #777; margin-top: 6px; }125 126 .bottom-nav {127 position: absolute; bottom: 40px; left: 0; right: 0; height: 160px;128 background: #FFFFFF; border-top: 1px solid #E6E6E6;129 display: flex; align-items: center; justify-content: space-around;130 }131 .tab {132 display: flex; flex-direction: column; align-items: center; gap: 10px; color: #333;133 font-size: 28px;134 }135 .tab .icon { width: 48px; height: 48px; }136 .tab.active { color: #F57C00; font-weight: 800; }137 .home-indicator {138 position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);139 width: 220px; height: 16px; background: #000; opacity: 0.2; border-radius: 8px;140 }141 142 /* Generic helper */143 .label-muted { color: #757575; }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status Bar -->150 <div class="status-bar">151 12:58152 <div class="icons">153 <!-- simple status icons -->154 <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="#FFF"><circle cx="12" cy="12" r="8"/></svg>155 <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="#FFF"><rect x="3" y="5" width="18" height="14" rx="2"/></svg>156 <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="#FFF"><path d="M12 2l8 8-8 8-8-8 8-8z"/></svg>157 <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="#FFF"><path d="M6 18h12l-6-12-6 12z"/></svg>158 <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="#FFF"><path d="M17 7v10l-5-3-5 3V7l5 3 5-3z"/></svg>159 <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="#FFF"><path d="M3 11h18v2H3z"/></svg>160 <!-- battery -->161 <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="#FFF"><rect x="2" y="7" width="18" height="10" rx="2"/><rect x="21" y="10" width="2" height="4"/></svg>162 </div>163 </div>164 165 <!-- Header with search -->166 <div class="app-header">167 <div class="search-box">168 <svg width="44" height="44" viewBox="0 0 24 24" fill="#9E9E9E"><circle cx="10" cy="10" r="6"/><path d="M14.5 14.5l5 5" stroke="#9E9E9E" stroke-width="2" fill="none"/></svg>169 <div>Search on Jumia</div>170 </div>171 <div class="header-action" aria-label="Cart">172 <svg width="54" height="54" viewBox="0 0 24 24" fill="#FFFFFF">173 <path d="M7 4h-2l-1 2v2h2l2 8h10l2-8H7zM9 20a2 2 0 110-4 2 2 0 010 4zm8 0a2 2 0 110-4 2 2 0 010 4z"/>174 </svg>175 </div>176 </div>177 178 <!-- Peach strip -->179 <div class="peach-strip">180 ☆Daily Surprises☆ ⇔181 </div>182 183 <!-- Quick actions -->184 <div class="quick-actions">185 <div class="qa-item">186 <div class="qa-icon">187 <svg width="48" height="48" viewBox="0 0 24 24" fill="#F57C00"><path d="M13 2l-1 7h7l-8 13 2-9H6l7-11z"/></svg>188 </div>189 <div>FLASH SALES</div>190 </div>191 <div class="qa-item">192 <div class="qa-icon">193 <svg width="48" height="48" viewBox="0 0 24 24" fill="#B0A395"><circle cx="12" cy="12" r="9"/><path d="M12 12V6" stroke="#6E614F" stroke-width="2"/><path d="M12 12l4 3" stroke="#6E614F" stroke-width="2"/></svg>194 </div>195 <div>ONE DAY OFFER</div>196 </div>197 <div class="qa-item">198 <div class="qa-icon">199 <svg width="48" height="48" viewBox="0 0 24 24" fill="#6E614F"><text x="3" y="17" font-size="14" fill="#6E614F">0%</text></svg>200 </div>201 <div>BUY NOW PAY LATER</div>202 </div>203 <div class="qa-item">204 <div class="qa-icon">205 <svg width="48" height="48" viewBox="0 0 24 24" fill="#C5A66A"><circle cx="12" cy="12" r="9"/><text x="8" y="16" font-size="10" fill="#6E614F">EGP</text></svg>206 </div>207 <div>WALLET</div>208 </div>209 <div class="qa-item">210 <div class="qa-icon">211 <svg width="48" height="48" viewBox="0 0 24 24" fill="#F7B500"><circle cx="12" cy="12" r="9"/><path d="M8 12h8" stroke="#6E614F" stroke-width="2"/></svg>212 </div>213 <div>POINTS</div>214 </div>215 </div>216 217 <!-- Promo carousel -->218 <div class="carousel">219 <div class="promo-card">220 NEW YEAR SALE — Up to 50% OFF221 </div>222 <div class="promo-card" style="background:#FFD392; border-color:#F4B04D; color:#D76608;">223 NEW YEAR SALE — Up to 35% OFF224 </div>225 </div>226 <div class="dots">227 <div class="dot"></div><div class="dot active"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>228 </div>229 230 <!-- Daily offers title -->231 <div class="section-title">Daily Offers On All Your Needs ⇔</div>232 233 <!-- Categories row -->234 <div class="categories">235 <div class="cat-card">236 <div class="img">[IMG: Lifestyle/Reading]</div>237 <div class="cat-label">New Year's Resolutions</div>238 </div>239 <div class="cat-card">240 <div class="img">[IMG: Phones & Accessories]</div>241 <div class="cat-label">Phones & Accessories</div>242 </div>243 <div class="cat-card">244 <div class="img">[IMG: Appliances]</div>245 <div class="cat-label">Appliances</div>246 </div>247 <div class="cat-card">248 <div class="img">[IMG: Winter Socks]</div>249 <div class="cat-label">Winter Essentials</div>250 </div>251 <div class="cat-card">252 <div class="img">[IMG: Women Fashion]</div>253 <div class="cat-label">Women Fashion</div>254 </div>255 </div>256 257 <!-- Flash sales header -->258 <div class="flash-header">259 <div class="left">260 <svg width="56" height="56" viewBox="0 0 24 24" fill="#FFC107"><path d="M13 2l-1 7h7l-8 13 2-9H6l7-11z"/></svg>261 <div>262 Flash Sales Every Day<br>263 <span class="sub">TIME LEFT: 01h : 31m : 56s</span>264 </div>265 </div>266 <div class="see-all">SEE ALL</div>267 </div>268 269 <!-- Products -->270 <div class="products">271 <div class="product">272 <div class="discount">-16%</div>273 <div class="pimg">[IMG: HP Wired Mouse]</div>274 <div class="title">4QM14AA - 1000 Wired Mouse</div>275 <div class="price">EGP 142.00</div>276 <div class="meta">30 items left</div>277 </div>278 <div class="product">279 <div class="discount">-15%</div>280 <div class="pimg">[IMG: HP Backpack]</div>281 <div class="title">T0F84AA - 15.6-inch Backpack</div>282 <div class="price">EGP 1,278.00</div>283 <div class="meta">11 items left</div>284 </div>285 <div class="product">286 <div class="discount">-7%</div>287 <div class="pimg">[IMG: Wired Keyboard + Mouse]</div>288 <div class="title">320MK Wired Desktop Keyboard & Mouse</div>289 <div class="price">EGP 639.00</div>290 <div class="meta">28 items left</div>291 </div>292 </div>293 294 <!-- Bottom navigation -->295 <div class="bottom-nav">296 <div class="tab active">297 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">298 <path d="M12 3l9 8v10h-6v-6H9v6H3V11l9-8z"/>299 </svg>300 <div>Home</div>301 </div>302 <div class="tab">303 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">304 <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>305 </svg>306 <div>Categories</div>307 </div>308 <div class="tab">309 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">310 <path d="M4 13c6 0 8 4 16 4v-3c-8 0-10-4-16-4v3z"/><circle cx="6" cy="7" r="2"/><path d="M18 9l-2 3 4 0-2-3z"/>311 </svg>312 <div>Feed</div>313 </div>314 <div class="tab">315 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">316 <circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6H4z"/>317 </svg>318 <div>Account</div>319 </div>320 <div class="tab">321 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">322 <circle cx="12" cy="12" r="10"/><path d="M12 17h0.01"/><path d="M12 7a3 3 0 013 3c0 2-3 2-3 4" stroke="#333" stroke-width="2" fill="none"/>323 </svg>324 <div>Help</div>325 </div>326 </div>327 328 <div class="home-indicator"></div>329 330</div>331</body>332</html>