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>Home décor - Listing</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 18px;21    left: 28px;22    right: 28px;23    height: 56px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #111;28    font-weight: 600;29    font-size: 32px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .icon { display:inline-flex; }37 38  /* Header */39  .app-header {40    position: absolute;41    top: 92px;42    left: 0;43    right: 0;44    height: 72px;45    display: flex;46    align-items: center;47    justify-content: center;48    font-size: 44px;49    font-weight: 700;50  }51  .back-btn {52    position: absolute;53    left: 24px;54    top: 50%;55    transform: translateY(-50%);56    width: 64px; height: 64px;57    display: flex; align-items: center; justify-content: center;58  }59 60  /* Filter chips */61  .chips {62    position: absolute;63    top: 192px;64    left: 24px;65    right: 24px;66    display: flex;67    gap: 24px;68  }69  .chip {70    padding: 22px 38px;71    border-radius: 48px;72    background: #f3f3f3;73    color: #111;74    font-size: 34px;75    font-weight: 600;76    border: 2px solid transparent;77  }78  .chip.active {79    background: #fff;80    border: 4px solid #111;81  }82  .tab-underline {83    position: absolute;84    top: 312px;85    left: 44px;86    width: 180px;87    height: 8px;88    background: #111;89    border-radius: 8px;90  }91 92  /* Product grid */93  .content {94    position: absolute;95    top: 340px;96    left: 0; right: 0;97    padding: 0 44px 0 44px;98  }99  .grid {100    display: grid;101    grid-template-columns: 1fr 1fr;102    column-gap: 40px;103    row-gap: 64px;104  }105  .product {106    position: relative;107  }108  .img {109    width: 100%;110    height: 360px;111    background: #E0E0E0;112    border: 1px solid #BDBDBD;113    color: #757575;114    display: flex; align-items: center; justify-content: center;115    font-size: 30px;116  }117  .title {118    margin-top: 26px;119    font-weight: 800;120    font-size: 34px;121    letter-spacing: 0.5px;122  }123  .desc {124    margin-top: 6px;125    color: #444;126    font-size: 28px;127  }128  .price {129    margin-top: 18px;130    font-size: 46px;131    font-weight: 800;132  }133  /* Floating add buttons on first row */134  .fab {135    position: absolute;136    bottom: -54px;137    left: 50%;138    transform: translateX(-50%);139    width: 116px;140    height: 116px;141    background: #1E4D9B;142    border-radius: 58px;143    display: flex; align-items: center; justify-content: center;144    box-shadow: 0 8px 16px rgba(0,0,0,0.15);145  }146  .divider {147    height: 2px;148    background: #E6E6E6;149    margin: 90px 24px 40px 24px;150  }151  .heart {152    position: absolute;153    top: -10px;154    right: 16px;155  }156 157  /* Sale tag */158  .sale {159    margin-top: 12px;160    display: inline-block;161    background: #F2D100;162    color: #111;163    padding: 10px 18px;164    font-weight: 800;165    font-size: 36px;166    border-bottom: 8px solid #E63B2E;167    border-radius: 6px;168  }169 170  /* Bottom nav */171  .bottom-nav {172    position: absolute;173    left: 0; right: 0;174    bottom: 90px;175    height: 140px;176    border-top: 1px solid #e9e9e9;177    background: #fff;178    display: flex;179    align-items: center;180    justify-content: space-around;181  }182  .nav-item { width: 120px; height: 120px; display:flex; align-items:center; justify-content:center; position: relative; }183  .badge {184    position: absolute;185    top: 16px; right: 24px;186    background: #1E4D9B;187    color: #fff;188    font-weight: 700;189    font-size: 26px;190    line-height: 34px;191    width: 42px; height: 42px;192    border-radius: 21px;193    display: flex; align-items: center; justify-content: center;194  }195 196  /* Home indicator */197  .home-indicator {198    position: absolute;199    bottom: 24px;200    left: 50%;201    transform: translateX(-50%);202    width: 300px;203    height: 12px;204    background: #0f0f0f;205    border-radius: 8px;206    opacity: 0.9;207  }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Status bar -->214  <div class="status-bar">215    <div>11:11</div>216    <div class="status-icons">217      <span class="icon">218        <svg width="40" height="28" viewBox="0 0 24 14" fill="none">219          <path d="M2 12c3-8 17-8 20 0" stroke="#111" stroke-width="2" fill="none"/>220          <circle cx="12" cy="12" r="2" fill="#111"/>221        </svg>222      </span>223      <span class="icon">224        <svg width="26" height="26" viewBox="0 0 24 24" fill="none">225          <circle cx="12" cy="12" r="10" stroke="#111" stroke-width="2"/>226          <circle cx="12" cy="12" r="3" fill="#111"/>227        </svg>228      </span>229      <span class="icon">230        <svg width="30" height="26" viewBox="0 0 28 16" fill="none">231          <rect x="1" y="1" width="22" height="14" rx="3" stroke="#111" stroke-width="2"/>232          <rect x="24" y="4" width="3" height="8" rx="1.5" fill="#111"/>233        </svg>234      </span>235    </div>236  </div>237 238  <!-- Header -->239  <div class="app-header">240    <div class="back-btn" aria-label="Back">241      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">242        <path d="M15 5L8 12l7 7" stroke="#111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>243      </svg>244    </div>245    Home décor246  </div>247 248  <!-- Chips -->249  <div class="chips">250    <div class="chip active">Best match</div>251    <div class="chip">Color</div>252    <div class="chip">Category</div>253    <div class="chip">Si