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>Item Detail Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000; /* app background */15    color: #fff;16  }17 18  /* Top app bar */19  .topbar {20    height: 120px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25  }26  .left-top {27    display: flex;28    align-items: center;29    gap: 20px;30  }31  .title { font-size: 44px; font-weight: 600; letter-spacing: 0.2px; }32  .circle-icon {33    width: 88px; height: 88px; border-radius: 44px;34    background: #1f1f1f; display: flex; align-items: center; justify-content: center;35  }36  .top-actions { display: flex; gap: 16px; }37 38  /* Image area */39  .image-wrap {40    position: relative;41    width: 1080px;42    height: 740px;43    background: #111;44  }45  .img-ph {46    position: absolute; left: 0; top: 0;47    width: 100%; height: 100%;48    background: #E0E0E0;49    border-top: 1px solid #BDBDBD;50    border-bottom: 1px solid #BDBDBD;51    display: flex; align-items: center; justify-content: center;52    color: #757575; font-size: 36px; text-align: center; padding: 0 40px;53  }54  .chip {55    position: absolute; right: 24px; top: 24px;56    background: #e6e6e6; color: #000;57    border-radius: 28px;58    padding: 12px 22px;59    font-size: 32px; font-weight: 600;60  }61 62  .dots {63    height: 70px;64    display: flex; align-items: center; justify-content: center;65    gap: 16px;66  }67  .dot {68    width: 16px; height: 16px; border-radius: 8px; background: #6e6e6e;69  }70  .dot.active { background: #bfbfbf; width: 18px; height: 18px; }71 72  /* Content */73  .content {74    padding: 24px 36px 0 36px;75  }76  .title-row {77    position: relative;78    padding-right: 140px;79  }80  .wishlist {81    position: absolute; right: 0; top: 0;82  }83  .item-title {84    font-size: 56px; line-height: 1.12; font-weight: 800; margin: 8px 0 26px 0;85  }86 87  .seller-row {88    display: flex; align-items: center; justify-content: space-between;89    margin: 8px 0 26px 0;90  }91  .seller-info { display: flex; align-items: center; gap: 18px; }92  .avatar {93    width: 76px; height: 76px; border-radius: 50%;94    background: #E0E0E0; border: 1px solid #BDBDBD;95    display: flex; align-items: center; justify-content: center;96    color: #757575; font-size: 22px;97  }98  .seller-name { font-size: 34px; color: #eaeaea; }99  .chev { width: 40px; height: 40px; }100 101  .price {102    margin-top: 6px;103    font-size: 66px; font-weight: 800;104  }105  .price-line {106    display: flex; align-items: baseline; gap: 18px;107  }108  .muted { color: #b5b5b5; }109  .muted-2 { color: #a1a1a1; font-size: 34px; margin-top: 10px; }110 111  .delivery { margin-top: 26px; font-size: 34px; color: #cfcfcf; }112  .delivery b { color: #fff; font-weight: 700; }113 114  .condition {115    margin-top: 24px; display: flex; align-items: center; gap: 18px;116    font-size: 34px;117  }118  .condition .label { color: #8a8a8a; width: 180px; }119  .condition .value { color: #fff; font-weight: 600; }120 121  .cta {122    margin: 40px 16px 260px 16px;123    display: flex; justify-content: center;124  }125  .btn {126    width: 100%;127    max-width: 1000px;128    height: 120px; border-radius: 60px;129    background: #5f8cff;130    display: flex; align-items: center; justify-content: center;131    font-size: 42px; font-weight: 800; color: #fff;132    box-shadow: 0 6px 0 rgba(0,0,0,0.25) inset;133  }134 135  /* Bottom navigation */136  .bottom-nav {137    position: absolute; left: 0; bottom: 50px;138    width: 100%; height: 170px;139    background: #0f0f10; border-top: 1px solid #1f1f1f;140    display: flex; align-items: center; justify-content: space-around;141  }142  .nav-item {143    display: flex; flex-direction: column; align-items: center; gap: 10px;144    color: #e5e5e5; font-size: 28px;145  }146  .nav-item .icon-wrap {147    width: 92px; height: 92px; border-radius: 46px;148    display: flex; align-items: center; justify-content: center;149  }150  .nav-item.active .icon-wrap { background: rgba(61, 117, 255, 0.25); }151  .nav-item.active span { color: #6da2ff; font-weight: 700; }152 153  .home-pill {154    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);155    width: 330px; height: 12px; background: #fff; opacity: .9; border-radius: 8px;156  }157 158  /* SVG sizing helpers */159  svg { display: block; }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Top App Bar -->166  <div class="topbar">167    <div class="left-top">168      <div class="circle-icon" style="background:#000;">169        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">170          <path d="M15.5 19.5 8 12l7.5-7.5-1.5-1.5L5 12l9 9 1.5-1.5z"/>171        </svg>172      </div>173      <div class="title">Item</div>174    </div>175    <div class="top-actions">176      <div class="circle-icon">177        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">178          <path d="M10 18a8 8 0 1 1 5.3-14L20 8.7l-1.3 1.3-3.3-3.3A6 6 0 1 0 10 16z"/>179        </svg>180      </div>181      <div class="circle-icon">182        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">183          <path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM3 4h2l3.6 7.6-1.2 2.1A2 2 0 0 0 9.1 16H19v-2H9.1l1-1.8h7.7a2 2 0 0 0 1.8-1.1l2.2-4.5H6.2L5.3 4H3z"/>184        </svg>185      </div>186      <div class="circle-icon">187        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">188          <path d="M15 8V4l7 8-7 8v-4H3V8h12zm-2 2H5v6h8v2l4-5-4-5v2z"/>189        </svg>190      </div>191      <div class="circle-icon">192        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">193          <path d="M12 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>194        </svg>195      </div>196    </div>197  </div>198 199  <!-- Image gallery -->200  <div class="image-wrap">201    <div class="img-ph">[IMG: Vintage White Metal Sofa - Product Photo]</div>202    <div class="chip">1 of 18</div>203  </div>204 205  <div class="dots">206    <div class="dot"></div>207    <div class="dot"></div>208    <div class="dot active"></div>209    <div class="dot"></div>210    <div class="dot"></div>211  </div>212 213  <!-- Content -->214  <div class="content">215    <div class="title-row">216      <div class="wishlist circle-icon">217        <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#69a1ff" stroke-width="2">218          <path d="M12 21s-7-4.7-9.5-8.3C.8 9.4 2.2 6 5.5 6c2 0 3.2 1.3 3.9 2.4C10.9 7.3 12 6 14 6c3.3 0 4.7 3.4 3 6.7C19 16.3 12 21 12 21z"/>219        </svg>220      </div>221      <div class="item-title">222        Vintage Sofa Handmade Rare Furniture Wooden White Metal Coated Embossed Work223      </div>224    </div>225 226    <div class="seller-row">227      <div class="seller-info">228        <div class="avatar">Avatar</div>229        <div class="seller-name">shreemanibalaji (229)</div>230      </div>231      <svg class="chev" viewBox="0 0 24 24" fill="#fff">232        <path d="M9 4l8 8-8 8-1.5-1.5L14 12 7.5 5.5 9 4z"/>233      </svg>234    </div>235 236    <div class="price-line">237      <div class="price">$6,000.00</div>238      <div class="muted" style="font-size:36px;">Free shipping</div>239    </div>240    <div class="muted-2">or Best Offer</div>241 242    <div class="delivery">Est. delivery <b>Wed, Dec 6 - Thu, Jan 4</b></div>243 244    <div class="condition">245      <div class="label">Condition</div>246      <div class="value">New</div>247      <svg width="28" height="28" viewBox="0 0 24 24" fill="#bfbfbf">248        <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>249      </svg>250    </div>251 252    <div class="cta">253      <div class="btn">Buy It Now</div>254    </div>255  </div>256 257  <!-- Bottom Navigation -->258  <div class="bottom-nav">259    <div class="nav-item">260      <div class="icon-wrap">261        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">262          <path d="M12 3l9 8-1.4 1.4L18 10.3V20h-5v-5H11v5H6v-9.7L4.4 12.4 3 11l9-8z"/>263        </svg>264      </div>265      <span>Home</span>266    </div>267    <div class="nav-item">268      <div class="icon-wrap">269        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">270          <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z"/>271        </svg>272      </div>273      <span>My eBay</span>274    </div>275    <div class="nav-item active">276      <div class="icon-wrap">277        <svg width="44" height="44" viewBox="0 0 24 24" fill="#6da2ff">278          <path d="M10 18a8 8 0 1 1 5.3-14L20 8.7l-1.3 1.3-3.3-3.3A6 6 0 1 0 10 16z"/>279        </svg>280      </div>281      <span>Search</span>282    </div>283    <div class="nav-item">284      <div class="icon-wrap">285        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">286          <path d="M12 22a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22zM18 16v-5a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z"/>287        </svg>288      </div>289      <span>Inbox</span>290    </div>291    <div class="nav-item">292      <div class="icon-wrap">293        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">294          <path d="M12 2l7 7-7 13L5 9l7-7zm0 4.4L8.4 9h7.2L12 6.4z"/>295        </svg>296      </div>297      <span>Selling</span>298    </div>299  </div>300 301  <div class="home-pill"></div>302</div>303</body>304</html>