GD-ML/AndroidCode

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>Living room furniture</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Top app bar */23  .top-area {24    position: relative;25    height: 160px;26    padding: 40px 48px 0 48px;27  }28  .icon-btn {29    width: 56px;30    height: 56px;31    display: inline-flex;32    align-items: center;33    justify-content: center;34    border-radius: 28px;35    cursor: pointer;36  }37  .icon-left {38    position: absolute;39    left: 28px;40    top: 52px;41  }42  .icon-right {43    position: absolute;44    right: 28px;45    top: 52px;46  }47  .title {48    margin: 40px 48px 16px 48px;49    font-size: 72px;50    line-height: 82px;51    font-weight: 700;52    color: #222222;53  }54 55  /* Category list */56  .cat-list {57    margin: 12px 0 0 0;58    padding: 0 48px;59  }60  .cat-item {61    list-style: none;62    font-size: 46px;63    line-height: 60px;64    color: #222;65    padding: 36px 0;66    border-bottom: 1px solid #eeeeee;67  }68 69  /* Section headers */70  .section {71    margin: 24px 0 0 0;72  }73  .section-title {74    padding: 24px 48px 8px 48px;75    font-size: 52px;76    font-weight: 700;77    color: #333;78    position: relative;79  }80  .section-title .accent {81    position: absolute;82    left: 48px;83    bottom: 0;84    width: 180px;85    height: 10px;86    background: #B6D524;87    border-radius: 5px;88  }89 90  /* Horizontal cards */91  .h-scroll {92    margin-top: 24px;93    padding: 0 48px 0 48px;94    overflow-x: auto;95    white-space: nowrap;96  }97  .card {98    display: inline-block;99    width: 300px;100    margin-right: 36px;101    vertical-align: top;102  }103  .img-box {104    width: 300px;105    height: 210px;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    border-radius: 28px;109    display: flex;110    align-items: center;111    justify-content: center;112    color: #757575;113    font-size: 32px;114    text-align: center;115  }116  .card-label {117    text-align: center;118    font-size: 38px;119    color: #333;120    margin-top: 18px;121  }122 123  .divider {124    margin: 28px 0;125    height: 1px;126    background: #eeeeee;127  }128 129  /* Bottom navigation bar */130  .bottom-nav {131    position: absolute;132    left: 0;133    bottom: 0;134    width: 1080px;135    height: 180px;136    background: #ffffff;137    border-top: 1px solid #e9e9e9;138    display: flex;139    align-items: center;140    justify-content: space-around;141  }142  .nav-item {143    width: 180px;144    text-align: center;145    color: #7a7a7a;146  }147  .nav-item svg {148    display: block;149    margin: 0 auto;150  }151  .nav-label {152    font-size: 32px;153    margin-top: 10px;154  }155  .nav-active {156    color: #000;157    position: relative;158  }159  .nav-active::before {160    content: "";161    position: absolute;162    top: -20px;163    left: 50%;164    transform: translateX(-50%);165    width: 140px;166    height: 10px;167    background: #B6D524;168    border-radius: 5px;169  }170 171  /* Page content footer spacing to keep above nav */172  .page-content {173    padding-bottom: 220px;174  }175</style>176</head>177<body>178<div id="render-target">179  <div class="top-area">180    <div class="icon-btn icon-left">181      <svg width="56" height="56" viewBox="0 0 56 56">182        <path d="M32 14 L18 28 L32 42" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>183      </svg>184    </div>185    <div class="icon-btn icon-right">186      <svg width="56" height="56" viewBox="0 0 56 56">187        <circle cx="24" cy="24" r="14" stroke="#222" stroke-width="4" fill="none"></circle>188        <line x1="36" y1="36" x2="48" y2="48" stroke="#222" stroke-width="4" stroke-linecap="round"></line>189      </svg>190    </div>191  </div>192 193  <div class="title">Living room furniture</div>194 195  <div class="page-content">196    <ul class="cat-list">197      <li class="cat-item">Sofas</li>198      <li class="cat-item">Recliners</li>199      <li class="cat-item">Occasional Chairs</li>200      <li class="cat-item">Entertainment Units</li>201      <li class="cat-item">Tables</li>202      <li class="cat-item">Shoe Racks</li>203      <li class="cat-item">Wall Shelves</li>204    </ul>205 206    <div class="section">207      <div class="section-title">208        Shop by Categories209        <span class="accent"></span>210      </div>211      <div class="h-scroll">212        <div class="card">213          <div class="img-box">[IMG: Sofa product]</div>214          <div class="card-label">Sofas</div>215        </div>216        <div class="card">217          <div class="img-box">[IMG: Recliner chair]</div>218          <div class="card-label">Recliners</div>219        </div>220        <div class="card">221          <div class="img-box">[IMG: Entertainment unit]</div>222          <div class="card-label">Entertainment units</div>223        </div>224      </div>225    </div>226 227    <div class="divider"></div>228 229    <div class="section-title" style="margin-top:8px;">230      Collections in Trend231    </div>232  </div>233 234  <div class="bottom-nav">235    <div class="nav-item">236      <svg width="64" height="64" viewBox="0 0 56 56">237        <path d="M8 26 L28 12 L48 26 V48 H12 V26 Z" fill="none" stroke="#7a7a7a" stroke-width="3" stroke-linejoin="round"></path>238        <rect x="24" y="34" width="8" height="14" fill="none" stroke="#7a7a7a" stroke-width="3"></rect>239      </svg>240      <div class="nav-label">Home</div>241    </div>242    <div class="nav-item nav-active">243      <svg width="64" height="64" viewBox="0 0 56 56">244        <circle cx="24" cy="24" r="14" stroke="#000" stroke-width="3" fill="none"></circle>245        <line x1="36" y1="36" x2="48" y2="48" stroke="#000" stroke-width="3" stroke-linecap="round"></line>246        <line x1="16" y1="16" x2="20" y2="16" stroke="#000" stroke-width="3" stroke-linecap="round"></line>247        <line x1="16" y1="22" x2="24" y2="22" stroke="#000" stroke-width="3" stroke-linecap="round"></line>248      </svg>249      <div class="nav-label">Department</div>250    </div>251    <div class="nav-item">252      <svg width="64" height="64" viewBox="0 0 56 56">253        <path d="M16 22 H40 V44 H16 Z" fill="none" stroke="#7a7a7a" stroke-width="3"></path>254        <path d="M20 22 C20 16 24 14 28 14 C32 14 36 16 36 22" fill="none" stroke="#7a7a7a" stroke-width="3"></path>255      </svg>256      <div class="nav-label">Basket</div>257    </div>258    <div class="nav-item">259      <svg width="64" height="64" viewBox="0 0 56 56">260        <path d="M28 46 L12 30 C8 26 10 18 18 18 C22 18 25 20 28 24 C31 20 34 18 38 18 C46 18 48 26 44 30 Z" fill="none" stroke="#7a7a7a" stroke-width="3" stroke-linejoin="round"></path>261      </svg>262      <div class="nav-label">Favourites</div>263    </div>264    <div class="nav-item">265      <svg width="64" height="64" viewBox="0 0 56 56">266        <circle cx="28" cy="20" r="10" fill="none" stroke="#7a7a7a" stroke-width="3"></circle>267        <path d="M10 48 C12 36 22 34 28 34 C34 34 44 36 46 48" fill="none" stroke="#7a7a7a" stroke-width="3" stroke-linecap="round"></path>268      </svg>269      <div class="nav-label">Account</div>270    </div>271  </div>272</div>273</body>274</html>