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>Watchlist UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #000000;20    color: #ffffff;21  }22 23  /* General helpers */24  .row {25    display: flex;26    align-items: center;27  }28  .space-between {29    justify-content: space-between;30  }31  .muted {32    color: #bdbdbd;33  }34  .divider {35    height: 1px;36    background: #2a2a2a;37    width: 100%;38  }39 40  /* Header */41  .header {42    padding: 68px 36px 16px 36px;43  }44  .title-wrap {45    display: flex;46    align-items: center;47    gap: 24px;48  }49  .title {50    font-size: 64px;51    font-weight: 700;52    letter-spacing: 0.2px;53  }54  .circle-icon {55    width: 96px;56    height: 96px;57    border-radius: 50%;58    background: #1a1a1a;59    display: inline-flex;60    align-items: center;61    justify-content: center;62  }63  .circle-icon.large {64    width: 110px;65    height: 110px;66  }67  .circle-icon svg {68    fill: #ffffff;69  }70 71  /* Tabs & actions */72  .tabs {73    padding: 28px 36px 6px 36px;74    display: flex;75    gap: 80px;76    align-items: flex-end;77  }78  .tab {79    font-size: 40px;80    color: #cfcfcf;81  }82  .tab.active {83    color: #ffffff;84    position: relative;85  }86  .tab.active::after {87    content: "";88    position: absolute;89    left: 0;90    bottom: -14px;91    width: 120px;92    height: 6px;93    background: #e6e6e6;94    border-radius: 6px;95  }96 97  .actions-bar {98    padding: 22px 36px 10px 36px;99  }100  .link {101    color: #2e7bf6;102    font-size: 38px;103    font-weight: 600;104  }105  .action-links {106    display: flex;107    gap: 36px;108  }109 110  /* Filter chips */111  .chips {112    padding: 26px 24px;113    display: flex;114    gap: 28px;115  }116  .chip {117    padding: 22px 34px;118    border: 2px solid #6d6d6d;119    color: #ffffff;120    border-radius: 999px;121    font-size: 36px;122    background: transparent;123    display: inline-flex;124    align-items: center;125    white-space: nowrap;126  }127 128  /* Listing card */129  .list-area {130    padding: 24px 24px 0 24px;131  }132  .card {133    padding: 26px 12px 26px 12px;134    border-top: 2px solid #2a2a2a;135  }136  .card-content {137    display: flex;138    gap: 28px;139  }140  .thumb {141    width: 360px;142    height: 300px;143    background: #E0E0E0;144    border: 1px solid #BDBDBD;145    color: #757575;146    display: flex;147    align-items: center;148    justify-content: center;149    border-radius: 32px;150    text-align: center;151    font-size: 28px;152    line-height: 1.3;153  }154  .details {155    flex: 1;156    min-width: 0;157  }158  .item-title {159    font-size: 44px;160    font-weight: 600;161    margin-top: 8px;162    margin-bottom: 22px;163  }164  .price-row {165    display: flex;166    justify-content: space-between;167    align-items: flex-start;168  }169  .price {170    font-size: 60px;171    font-weight: 800;172  }173  .offer {174    text-align: right;175    color: #bfbfbf;176    font-size: 32px;177    line-height: 1.35;178    padding-top: 8px;179  }180</style>181</head>182<body>183<div id="render-target">184  <!-- Header -->185  <div class="header">186    <div class="row space-between">187      <div class="title-wrap">188        <div class="circle-icon" aria-label="Menu">189          <svg width="42" height="42" viewBox="0 0 24 24">190            <rect x="3" y="6" width="18" height="2"></rect>191            <rect x="3" y="11" width="18" height="2"></rect>192            <rect x="3" y="16" width="18" height="2"></rect>193          </svg>194        </div>195        <div class="title">Watchlist</div>196      </div>197      <div class="row" style="gap:18px;">198        <div class="circle-icon large" aria-label="Search">199          <svg width="40" height="40" viewBox="0 0 24 24">200            <path d="M15.5 14h-.79l-.28-.27a6 6 0 1 0-.71.71l.27.28v.79L20 19.5 19.5 20l-4-4zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"></path>201          </svg>202        </div>203        <div class="circle-icon large" aria-label="Cart">204          <svg width="40" height="40" viewBox="0 0 24 24">205            <path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.2 6h12.2l-1.5 7H8.1L6.6 4H3v2h2.2l2 10h10.9l2-9h-2.1"></path>206          </svg>207        </div>208      </div>209    </div>210  </div>211 212  <!-- Tabs -->213  <div class="tabs">214    <div class="tab active">Active</div>215    <div class="tab">Ended</div>216  </div>217 218  <!-- Find / Edit / Refine -->219  <div class="actions-bar row space-between">220    <div class="link">Find</div>221    <div class="action-links">222      <div class="link">Edit</div>223      <div class="link">Refine</div>224    </div>225  </div>226 227  <!-- Chips -->228  <div class="chips">229    <div class="chip">All Categories (1)</div>230    <div class="chip">Digital Cameras (1)</div>231  </div>232 233  <div class="divider"></div>234 235  <!-- Listing -->236  <div class="list-area">237    <div class="card">238      <div class="card-content">239        <div class="thumb">[IMG: Nikon camera listing photo]</div>240        <div class="details">241          <div class="item-title">Nikon d5500 camera with Lens And Bag. Barely Used</div>242          <div class="price-row">243            <div class="price">$385.00</div>244            <div class="offer">245              Or Best Offer<br />246              29d 0h247            </div>248          </div>249        </div>250      </div>251    </div>252  </div>253</div>254</body>255</html>