GD-ML/AndroidCode

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>Table Top UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FAFAFA;15    box-shadow: 0 8px 24px rgba(0,0,0,0.15);16    border-radius: 0;17  }18 19  /* Header */20  .header {21    position: relative;22    width: 100%;23    height: 260px;24    background: linear-gradient(90deg,#3346a6 0%, #6b3fa5 52%, #d45386 100%);25    color: #fff;26  }27  .topbar {28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 60px 42px 0 42px;32  }33  .title-area {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .app-title {39    font-size: 44px;40    font-weight: 600;41    letter-spacing: 0.3px;42  }43  .icon-btn {44    width: 56px;45    height: 56px;46    display: inline-flex;47    align-items: center;48    justify-content: center;49    border-radius: 16px;50  }51 52  /* Search bar */53  .search-bar {54    position: absolute;55    left: 40px;56    right: 40px;57    bottom: -40px;58    height: 104px;59    background: #ffffff;60    border-radius: 52px;61    box-shadow: 0 10px 22px rgba(0,0,0,0.15);62    display: flex;63    align-items: center;64    padding: 0 28px;65  }66  .search-left {67    display: flex;68    align-items: center;69    gap: 22px;70    color: #6c2a5d;71    font-size: 40px;72  }73  .search-text {74    font-size: 42px;75    color: #777;76  }77  .search-right {78    margin-left: auto;79    color: #a13b6a;80  }81 82  /* Banner */83  .banner {84    margin: 100px 30px 0 30px;85    height: 520px;86    border-radius: 18px;87    overflow: hidden;88  }89  .img-box {90    width: 100%;91    height: 100%;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    display: flex;95    align-items: center;96    justify-content: center;97    color: #757575;98    font-size: 36px;99    text-align: center;100  }101 102  /* Grid cards */103  .card-grid {104    display: flex;105    gap: 26px;106    padding: 26px 30px;107  }108  .card {109    flex: 1;110    height: 440px;111    border-radius: 26px;112    overflow: hidden;113    position: relative;114  }115  .card .img-box { border-radius: 26px; font-size: 34px; }116  .card-title {117    position: absolute;118    left: 24px;119    bottom: 24px;120    color: #fff;121    font-size: 40px;122    font-weight: 700;123    text-shadow: 0 3px 8px rgba(0,0,0,0.35);124  }125 126  /* Bottom navigation */127  .bottom-nav {128    position: absolute;129    left: 26px;130    right: 26px;131    bottom: 90px;132    height: 160px;133    background: #ffffff;134    border-radius: 36px;135    box-shadow: 0 10px 24px rgba(0,0,0,0.2);136    display: flex;137    align-items: center;138    justify-content: space-around;139    padding: 0 26px;140  }141  .tab-item {142    width: 180px;143    height: 120px;144    display: flex;145    flex-direction: column;146    align-items: center;147    justify-content: center;148    color: #6b3fa5;149    gap: 10px;150  }151  .tab-label {152    font-size: 32px;153    color: #333;154  }155  .tab-center {156    width: 180px;157    height: 130px;158    border-radius: 26px;159    background: #fff;160    box-shadow: 0 8px 16px rgba(0,0,0,0.18);161    display: flex;162    align-items: center;163    justify-content: center;164    flex-direction: column;165    gap: 10px;166    margin-top: -40px;167    border: 1px solid #eee;168  }169 170  /* SVG common */171  .svg-ic { width: 50px; height: 50px; }172  .stroke-white { stroke: #fff; }173  .stroke-purple { stroke: #6b3fa5; }174  .stroke-rose { stroke: #a13b6a; }175  .stroke-gray { stroke: #777; }176  .fill-none { fill: none; }177  .round { stroke-linecap: round; stroke-linejoin: round; }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Header with title and icons -->184  <div class="header">185    <div class="topbar">186      <div class="title-area">187        <!-- Hamburger -->188        <div class="icon-btn">189          <svg class="svg-ic fill-none stroke-white round" viewBox="0 0 48 48">190            <path d="M8 12h32M8 24h32M8 36h32" stroke-width="4"/>191          </svg>192        </div>193        <div class="app-title">Table Top</div>194      </div>195      <div style="display:flex; gap:24px;">196        <!-- Heart -->197        <div class="icon-btn">198          <svg class="svg-ic fill-none stroke-white round" viewBox="0 0 48 48">199            <path d="M24 38s-10-6-15-12c-3-4-2-10 3-13 6-4 12 2 12 6 0-4 6-10 12-6 5 3 6 9 3 13-5 6-15 12-15 12z" stroke-width="3"/>200          </svg>201        </div>202        <!-- Bell -->203        <div class="icon-btn">204          <svg class="svg-ic fill-none stroke-white round" viewBox="0 0 48 48">205            <path d="M24 10c-6 0-10 5-10 11v6l-4 4h28l-4-4v-6c0-6-4-11-10-11z" stroke-width="3"/>206            <path d="M20 40c2 2 6 2 8 0" stroke-width="3"/>207          </svg>208        </div>209      </div>210    </div>211 212    <!-- Search Bar -->213    <div class="search-bar">214      <div class="search-left">215        <svg class="svg-ic fill-none stroke-rose round" viewBox="0 0 48 48">216          <circle cx="20" cy="20" r="12" stroke-width="3"></circle>217          <path d="M32 32l8 8" stroke-width="3"></path>218        </svg>219        <div class="search-text">door</div>220      </div>221      <div class="search-right">222        <svg class="svg-ic fill-none stroke-rose round" viewBox="0 0 48 48">223          <path d="M12 12l24 24M36 12L12 36" stroke-width="4"></path>224        </svg>225      </div>226    </div>227  </div>228 229  <!-- Banner -->230  <div class="banner">231    <div class="img-box">[IMG: Ad Banner - Quartz Kitchen Sink]</div>232  </div>233 234  <!-- Two product cards -->235  <div class="card-grid">236    <div class="card">237      <div class="img-box">[IMG: Kitchen Countertop - Dark Granite]</div>238      <div class="card-title">Kitchen Top</div>239    </div>240    <div class="card">241      <div class="img-box">[IMG: Kitchen Island - Quartz Surface]</div>242      <div class="card-title">Quartz</div>243    </div>244  </div>245 246  <!-- Bottom Navigation -->247  <div class="bottom-nav">248    <div class="tab-item">249      <svg class="svg-ic fill-none stroke-purple round" viewBox="0 0 48 48">250        <path d="M8 22l16-12 16 12v16H30V28H18v10H8z" stroke-width="3"></path>251      </svg>252      <div class="tab-label">Home</div>253    </div>254    <div class="tab-item">255      <svg class="svg-ic fill-none stroke-purple round" viewBox="0 0 48 48">256        <path d="M10 14h28M10 24h28M10 34h28" stroke-width="3"/>257        <circle cx="10" cy="14" r="1.5" stroke-width="3"/>258        <circle cx="10" cy="24" r="1.5" stroke-width="3"/>259        <circle cx="10" cy="34" r="1.5" stroke-width="3"/>260      </svg>261      <div class="tab-label">Category</div>262    </div>263 264    <div class="tab-center">265      <svg class="svg-ic fill-none stroke-rose round" viewBox="0 0 48 48">266        <rect x="10" y="10" width="28" height="28" rx="4" stroke-width="3"/>267        <path d="M16 18h14M16 24h10M16 30h14" stroke-width="3"/>268        <path d="M20 24l2 2 4-5" stroke-width="3"/>269      </svg>270      <div class="tab-label" style="font-weight:600;">Upload Enquiry</div>271    </div>272 273    <div class="tab-item">274      <svg class="svg-ic fill-none stroke-purple round" viewBox="0 0 48 48">275        <circle cx="24" cy="16" r="8" stroke-width="3"/>276        <path d="M10 40c0-8 7-12 14-12s14 4 14 12" stroke-width="3"/>277      </svg>278      <div class="tab-label">Account</div>279    </div>280    <div class="tab-item">281      <svg class="svg-ic fill-none stroke-purple round" viewBox="0 0 48 48">282        <path d="M10 14h28l-4 20H14l-4-20z" stroke-width="3"/>283        <circle cx="18" cy="38" r="3" stroke-width="3"/>284        <circle cx="30" cy="38" r="3" stroke-width="3"/>285      </svg>286      <div class="tab-label">Basket</div>287    </div>288  </div>289 290</div>291</body>292</html>