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>Similar Items UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #F2F2F2;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    background: #E8E8E8;21    color: #333;22    display: flex;23    align-items: center;24    padding: 0 28px;25    font-size: 30px;26    letter-spacing: 0.5px;27  }28  .status-left { display: flex; align-items: center; gap: 22px; }29  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }30  .status-icon svg { width: 34px; height: 34px; fill: none; stroke: #444; stroke-width: 2; }31 32  /* Top toolbar */33  .toolbar {34    height: 110px;35    display: flex;36    align-items: center;37    padding: 0 34px;38    background: #F2F2F2;39  }40  .tool-left, .tool-right { display: flex; align-items: center; }41  .tool-left { gap: 18px; }42  .tool-right { margin-left: auto; gap: 36px; }43  .icon-btn {44    width: 54px;45    height: 54px;46    display: flex;47    align-items: center;48    justify-content: center;49    border-radius: 28px;50  }51  .icon-btn svg { width: 36px; height: 36px; stroke: #222; stroke-width: 2.5; fill: none; }52 53  /* Hero image */54  .hero {55    width: 100%;56    height: 580px;57    display: flex;58    align-items: center;59    justify-content: center;60  }61  .img-placeholder {62    background: #E0E0E0;63    border: 1px solid #BDBDBD;64    color: #757575;65    display: flex;66    align-items: center;67    justify-content: center;68    text-align: center;69  }70  .hero .img-placeholder { width: 1000px; height: 560px; font-size: 28px; }71 72  .divider { width: 100%; height: 2px; background: #CFCFCF; }73 74  /* Section header */75  .section-header {76    background: #FFFFFF;77    padding: 34px 36px 26px 36px;78    border-bottom: 1px solid #E0E0E0;79  }80  .section-title {81    font-size: 40px;82    letter-spacing: 1px;83    color: #222;84  }85  .item-count {86    font-size: 26px;87    color: #777;88    margin-left: 18px;89  }90 91  /* Grid of items */92  .grid {93    position: relative;94    background: #FFFFFF;95  }96  .grid::before {97    content: "";98    position: absolute;99    left: 540px;100    top: 0;101    width: 1px;102    height: 1100px;103    background: #DADADA;104  }105  .row {106    display: flex;107    border-bottom: 1px solid #DADADA;108  }109  .card {110    width: 540px;111    padding-bottom: 24px;112  }113  .card .img-wrap {114    position: relative;115    padding: 26px 26px 18px 26px;116  }117  .card .img-placeholder { width: 488px; height: 420px; font-size: 24px; }118  .plus-circle {119    position: absolute;120    left: 50%;121    transform: translateX(-50%);122    bottom: 18px;123    width: 64px;124    height: 64px;125    border-radius: 50%;126    border: 1px solid #C7C7C7;127    background: #FFFFFF;128    display: flex;129    align-items: center;130    justify-content: center;131  }132  .plus-circle svg { width: 28px; height: 28px; stroke: #444; stroke-width: 2.5; fill: none; }133 134  .card-info {135    display: flex;136    align-items: flex-start;137    gap: 14px;138    padding: 0 26px;139  }140  .title {141    flex: 1;142    font-size: 28px;143    color: #333;144    text-transform: uppercase;145    line-height: 36px;146  }147  .bookmark {148    width: 36px;149    height: 36px;150    display: flex;151    align-items: center;152    justify-content: center;153  }154  .bookmark svg { width: 26px; height: 26px; stroke: #333; stroke-width: 2; fill: none; }155 156  .pricing {157    padding: 8px 26px 0 26px;158    display: flex;159    align-items: center;160    gap: 12px;161  }162  .old-price {163    font-size: 24px;164    color: #888;165    text-decoration: line-through;166  }167  .price {168    font-size: 26px;169    color: #333;170  }171  .deal-tag {172    display: inline-flex;173    align-items: center;174    gap: 10px;175    background: #F4E04D;176    color: #222;177    font-weight: bold;178    padding: 8px 12px;179    font-size: 24px;180  }181 182  /* Gesture bar */183  .gesture {184    position: absolute;185    bottom: 34px;186    left: 50%;187    transform: translateX(-50%);188    width: 380px;189    height: 18px;190    background: #BEBEBE;191    border-radius: 9px;192  }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status Bar -->199  <div class="status-bar">200    <div class="status-left">201      <div>8:49</div>202      <div class="status-icon">203        <!-- small circle icon -->204        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" stroke="#444" fill="none"/></svg>205      </div>206      <div class="status-icon">207        <!-- M icon -->208        <svg viewBox="0 0 24 24"><path d="M4 18V6l4 6 4-6v12" /></svg>209      </div>210      <div class="status-icon">211        <!-- M icon -->212        <svg viewBox="0 0 24 24"><path d="M4 18V6l4 6 4-6v12" /></svg>213      </div>214      <div class="status-icon">215        <!-- cloud -->216        <svg viewBox="0 0 24 24"><path d="M6 15h10a3 3 0 0 0 0-6 5 5 0 0 0-9-1 3 3 0 0 0-1 7z"/></svg>217      </div>218    </div>219    <div class="status-right">220      <div class="status-icon">221        <!-- signal -->222        <svg viewBox="0 0 24 24"><path d="M3 18h2M7 14h2M11 10h2M15 6h2"/></svg>223      </div>224      <div class="status-icon">225        <!-- battery -->226        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2"/><rect x="22" y="10" width="4" height="4"/></svg>227      </div>228    </div>229  </div>230 231  <!-- Top toolbar -->232  <div class="toolbar">233    <div class="tool-left">234      <div class="icon-btn" title="Close">235        <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>236      </div>237    </div>238    <div class="tool-right">239      <div class="icon-btn" title="Share">240        <svg viewBox="0 0 24 24">241          <circle cx="6" cy="12" r="2"/>242          <circle cx="18" cy="6" r="2"/>243          <circle cx="18" cy="18" r="2"/>244          <path d="M8 12l8-6M8 12l8 6"/>245        </svg>246      </div>247      <div class="icon-btn" title="Bookmark">248        <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z"/></svg>249      </div>250    </div>251  </div>252 253  <!-- Hero image -->254  <div class="hero">255    <div class="img-placeholder">[IMG: Model wearing black shearling jacket]</div>256  </div>257 258  <div class="divider"></div>259 260  <!-- Section header -->261  <div class="section-header">262    <span class="section-title">SIMILAR ITEMS</span>263    <span class="item-count">10 items</span>264  </div>265 266  <!-- Grid -->267  <div class="grid">268 269    <!-- Row 1 -->270    <div class="row">271      <!-- Card 1 -->272      <div class="card">273        <div class="img-wrap">274          <div class="img-placeholder">[IMG: Black faux leather biker jacket]</div>275          <div class="plus-circle">276            <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>277          </div>278        </div>279        <div class="card-info">280          <div class="title">Faux Leather Biker Jacket</div>281          <div class="bookmark">282            <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z"/></svg>283          </div>284        </div>285        <div class="pricing">286          <span class="old-price">69.90 USD</span>287          <span class="deal-tag"><span>-28%</span> <span>49.99 USD</span></span>288        </div>289      </div>290 291      <!-- Card 2 -->292      <div class="card" style="border-left: 1px solid #DADADA;">293        <div class="img-wrap">294          <div class="img-placeholder">[IMG: Black water and wind protection puffer]</div>295          <div class="plus-circle">296            <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>297          </div>298        </div>299        <div class="card-info">300          <div class="title">Water And Wind Protection Puffer</div>301          <div class="bookmark">302            <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z"/></svg>303          </div>304        </div>305        <div class="pricing">306          <span class="price">69.90 USD</span>307        </div>308      </div>309    </div>310 311    <!-- Row 2 -->312    <div class="row">313      <!-- Card 3 -->314      <div class="card">315        <div class="img-wrap" style="padding-bottom: 32px;">316          <div class="img-placeholder">[IMG: Black cropped jacket with buttons]</div>317          <div class="plus-circle">318            <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>319          </div>320        </div>321      </div>322 323      <!-- Card 4 -->324      <div class="card" style="border-left: 1px solid #DADADA;">325        <div class="img-wrap" style="padding-bottom: 32px;">326          <div class="img-placeholder">[IMG: Black cropped zip jacket]</div>327          <div class="plus-circle">328            <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>329          </div>330        </div>331      </div>332    </div>333 334  </div>335 336  <!-- Bottom gesture bar -->337  <div class="gesture"></div>338</div>339</body>340</html>