GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Mobile UI - Jumia Skeleton</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #333;16  }17 18  /* Top status bar */19  .status-bar {20    height: 120px;21    background: #2b2b2b;22  }23 24  .page {25    padding: 24px 28px 0 28px;26  }27 28  /* Search row */29  .search-row {30    display: flex;31    align-items: center;32    gap: 20px;33    margin-top: 12px;34    margin-bottom: 16px;35  }36  .search-box {37    flex: 1;38    height: 110px;39    border-radius: 18px;40    background: #ffffff;41    border: 1px solid #ddd;42    display: flex;43    align-items: center;44    padding: 0 26px;45    box-shadow: 0 2px 4px rgba(0,0,0,0.05);46  }47  .search-box svg {48    width: 44px; height: 44px; fill: #6d6d6d; margin-right: 18px;49  }50  .search-placeholder {51    color: #9a9a9a;52    font-size: 42px;53  }54  .cart-btn {55    width: 120px;56    height: 110px;57    border-radius: 18px;58    background: #ffffff;59    border: 1px solid #ddd;60    display: flex;61    align-items: center;62    justify-content: center;63  }64  .cart-btn svg { width: 48px; height: 48px; fill: #5a5a5a; }65 66  .divider {67    height: 16px;68    background: #f0f0f0;69    margin: 10px -28px 16px -28px;70  }71 72  /* Placeholders (images/banners) */73  .placeholder {74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    color: #757575;77    display: flex;78    align-items: center;79    justify-content: center;80    border-radius: 22px;81    text-align: center;82  }83 84  .hero {85    height: 360px;86    margin-bottom: 26px;87    font-size: 36px;88  }89 90  .mini-grid {91    display: grid;92    grid-template-columns: repeat(4, 1fr);93    gap: 24px;94    margin-bottom: 26px;95  }96  .mini-card { height: 200px; font-size: 28px; }97 98  .thin-line {99    height: 26px;100    width: 620px;101    background: #f0f0f0;102    border-radius: 6px;103    margin: 6px 0 28px 6px;104  }105 106  .two-col {107    display: grid;108    grid-template-columns: 1fr 1fr;109    gap: 28px;110    margin-bottom: 18px;111  }112  .promo { height: 480px; font-size: 32px; }113 114  .text-lines {115    display: grid;116    grid-template-columns: 1fr;117    gap: 16px;118    margin: 10px 0 34px;119  }120  .line {121    height: 30px;122    background: #f0f0f0;123    border-radius: 8px;124  }125  .line.short { width: 60%; }126  .line.tiny { width: 40%; }127 128  /* Bottom navigation */129  .bottom-nav {130    position: absolute;131    left: 0; right: 0; bottom: 120px;132    height: 170px;133    background: #ffffff;134    border-top: 1px solid #e6e6e6;135    display: flex;136    justify-content: space-around;137    align-items: center;138    padding: 14px 0 8px;139  }140  .nav-item {141    display: flex;142    flex-direction: column;143    align-items: center;144    gap: 12px;145    color: #1f1f1f;146    width: 20%;147  }148  .nav-item svg { width: 56px; height: 56px; }149  .nav-item .label { font-size: 34px; }150  .active { color: #ff8a00; }151  .active svg { fill: #ff8a00; }152 153  /* small star badge for Feed */154  .badge-star {155    position: absolute;156    top: -6px;157    right: -8px;158    width: 22px;159    height: 22px;160    background: #ffb400;161    border-radius: 50%;162    display: flex; align-items: center; justify-content: center;163  }164  .badge-star svg { width: 18px; height: 18px; fill: #fff; }165 166  /* device home indicator area */167  .home-indicator {168    position: absolute;169    left: 0; right: 0; bottom: 0;170    height: 120px;171    background: #000000;172    display: flex;173    align-items: center;174    justify-content: center;175  }176  .home-pill {177    width: 240px; height: 12px; background: #e5e5e5; border-radius: 10px; opacity: 0.8;178  }179</style>180</head>181<body>182<div id="render-target">183  <div class="status-bar"></div>184 185  <div class="page">186    <div class="search-row">187      <div class="search-box">188        <!-- search icon -->189        <svg viewBox="0 0 24 24">190          <path d="M10 2a8 8 0 106.32 13.09l4.3 4.3a1 1 0 001.42-1.42l-4.3-4.3A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z"/>191        </svg>192        <div class="search-placeholder">Search on Jumia</div>193      </div>194      <div class="cart-btn" aria-label="Cart">195        <svg viewBox="0 0 24 24">196          <path d="M7 4h-2a1 1 0 100 2h1l1.2 6.4A3 3 0 0010.1 15H17a1 1 0 100-2h-6.9a1 1 0 01-1-.8L8 10h9.2a2 2 0 001.9-1.5l1-3.5A1 1 0 0019.1 4H7zm2 13a2 2 0 110 4 2 2 0 010-4zm8 0a2 2 0 110 4 2 2 0 010-4z"/>197        </svg>198      </div>199    </div>200 201    <div class="divider"></div>202 203    <div class="placeholder hero">[IMG: Promo Banner]</div>204 205    <div class="mini-grid">206      <div class="placeholder mini-card">[IMG]</div>207      <div class="placeholder mini-card">[IMG]</div>208      <div class="placeholder mini-card">[IMG]</div>209      <div class="placeholder mini-card">[IMG]</div>210    </div>211 212    <div class="thin-line"></div>213 214    <div class="two-col">215      <div>216        <div class="placeholder promo">[IMG: Product Promo]</div>217        <div class="text-lines">218          <div class="line"></div>219          <div class="line short"></div>220          <div class="line tiny"></div>221        </div>222      </div>223      <div>224        <div class="placeholder promo">[IMG: Product Promo]</div>225        <div class="text-lines">226          <div class="line"></div>227          <div class="line short"></div>228          <div class="line tiny"></div>229        </div>230      </div>231    </div>232 233    <!-- Additional row of placeholders to fill space similar to screenshot -->234    <div class="two-col">235      <div class="placeholder promo" style="height: 240px;">[IMG]</div>236      <div class="placeholder promo" style="height: 240px;">[IMG]</div>237    </div>238  </div>239 240  <!-- Bottom navigation -->241  <div class="bottom-nav">242    <div class="nav-item active">243      <svg viewBox="0 0 24 24">244        <path d="M12 3l9 7v10a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1V10l9-7z"/>245      </svg>246      <div class="label">Home</div>247    </div>248    <div class="nav-item">249      <svg viewBox="0 0 24 24" fill="#1f1f1f">250        <path d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z"/>251      </svg>252      <div class="label">Categories</div>253    </div>254    <div class="nav-item" style="position: relative;">255      <svg viewBox="0 0 24 24" fill="#1f1f1f">256        <path d="M4 4h2v16H4V4zm5 4h2v12H9V8zm5 3h2v9h-2v-9zm5 4h2v5h-2v-5z"/>257      </svg>258      <div class="badge-star">259        <svg viewBox="0 0 24 24"><path d="M12 3l2.3 4.7 5.2.8-3.8 3.7.9 5.2L12 15.9 7.4 17.4l.9-5.2L4.5 8.5l5.2-.8L12 3z"/></svg>260      </div>261      <div class="label">Feed</div>262    </div>263    <div class="nav-item">264      <svg viewBox="0 0 24 24" fill="#1f1f1f">265        <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/>266      </svg>267      <div class="label">Account</div>268    </div>269    <div class="nav-item">270      <svg viewBox="0 0 24 24" fill="#1f1f1f">271        <path d="M11 18h2v2h-2v-2zm1-16C7.7 2 5 4.7 5 8h2a6 6 0 1112 0c0 2.6-1.7 4.8-4 5.6V16h-2v-3a2 2 0 002-2h-2a4 4 0 10-4-4H5c0-4.4 3.6-8 8-8z"/>272      </svg>273      <div class="label">Help</div>274    </div>275  </div>276 277  <div class="home-indicator">278    <div class="home-pill"></div>279  </div>280</div>281</body>282</html>