GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Item Page Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1">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: #000000;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 80px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #FFFFFF;26    font-size: 32px;27    opacity: 0.9;28  }29  .status-icons { display: flex; gap: 24px; align-items: center; }30  .status-dot { width: 8px; height: 8px; background: #FFFFFF; border-radius: 50%; opacity: 0.6; }31 32  /* App bar */33  .app-bar {34    height: 140px;35    display: flex;36    align-items: center;37    padding: 0 24px;38  }39  .app-left {40    display: flex;41    align-items: center;42    gap: 20px;43  }44  .back-icon {45    width: 60px; height: 60px;46    display: inline-flex; align-items: center; justify-content: center;47  }48  .app-title {49    font-size: 54px; font-weight: 700;50  }51  .app-actions {52    margin-left: auto;53    display: flex;54    gap: 20px;55  }56  .circle-btn {57    width: 100px; height: 100px; border-radius: 50%;58    background: #1f1f1f; display: flex; align-items: center; justify-content: center;59  }60  .circle-btn svg { fill: #FFFFFF; opacity: 0.9; }61 62  /* Image area */63  .image-area {64    width: 100%;65    padding: 0 40px;66    margin-top: 10px;67  }68  .image-card {69    background: #FFFFFF;70    border-radius: 12px;71    padding: 20px;72  }73  .img-placeholder {74    width: 100%;75    height: 560px;76    background: #E0E0E0;77    border: 1px solid #BDBDBD;78    border-radius: 8px;79    display: flex; align-items: center; justify-content: center;80    color: #757575; font-size: 32px; font-weight: 600;81  }82  .img-gap { height: 24px; }83  .pager {84    display: flex; justify-content: center; gap: 16px; margin: 26px 0 12px;85  }86  .dot { width: 16px; height: 16px; border-radius: 50%; background: #777; opacity: 0.6; }87  .dot.active { background: #AAA; opacity: 1; }88 89  .count-chip {90    position: absolute;91    top: 360px;92    right: 40px;93    background: #2b2b2b;94    color: #FFFFFF;95    padding: 16px 22px;96    border-radius: 28px;97    font-size: 34px;98  }99  .fav-fab {100    position: absolute;101    right: 40px;102    top: 1340px;103    width: 120px; height: 120px; border-radius: 60px;104    background: #1f1f1f;105    display: flex; align-items: center; justify-content: center;106  }107 108  /* Title and seller */109  .content {110    padding: 0 40px;111  }112  .item-title {113    font-size: 56px; font-weight: 800; line-height: 1.15; margin-top: 20px;114  }115  .seller-row {116    display: flex; align-items: center; margin-top: 30px;117  }118  .avatar {119    width: 110px; height: 110px; border-radius: 55px; overflow: hidden;120    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;121    display: flex; align-items: center; justify-content: center; font-size: 24px;122  }123  .seller-info { margin-left: 24px; }124  .seller-name { font-size: 36px; font-weight: 700; }125  .seller-sub { font-size: 30px; color: #B5B5B5; margin-top: 6px; }126  .seller-row .chev {127    margin-left: auto;128    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;129  }130 131  /* Pricing */132  .price-line {133    margin-top: 30px;134    font-size: 60px; font-weight: 900;135  }136  .shipping {137    font-size: 36px; color: #B5B5B5; font-weight: 600;138    margin-left: 12px;139  }140  .delivery {141    margin-top: 18px;142    font-size: 34px; color: #B5B5B5;143  }144  .delivery .date { color: #FFFFFF; font-weight: 700; }145 146  /* Bottom nav */147  .bottom-nav {148    position: absolute; left: 0; bottom: 0; width: 100%;149    height: 190px; border-top: 1px solid #1e1e1e; background: #000000;150    display: flex; align-items: center; justify-content: space-around;151  }152  .nav-item {153    display: flex; flex-direction: column; align-items: center; gap: 14px;154    color: #B5B5B5; font-size: 26px;155  }156  .nav-item .icon-wrap {157    width: 82px; height: 82px; border-radius: 41px; display: flex; align-items: center; justify-content: center;158    background: transparent;159  }160  .nav-item.active { color: #3D83FF; }161  .nav-item.active .icon-wrap { background: #162b66; }162  .gesture {163    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);164    width: 320px; height: 12px; background: #FFFFFF; border-radius: 6px; opacity: 0.8;165  }166</style>167</head>168<body>169<div id="render-target">170  <!-- Status bar -->171  <div class="status-bar">172    <div>4:55</div>173    <div class="status-icons">174      <div class="status-dot"></div>175      <div class="status-dot"></div>176      <div class="status-dot"></div>177      <div class="status-dot"></div>178    </div>179  </div>180 181  <!-- App bar -->182  <div class="app-bar">183    <div class="app-left">184      <div class="back-icon">185        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>186      </div>187      <div class="app-title">Item</div>188    </div>189    <div class="app-actions">190      <div class="circle-btn">191        <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>192      </div>193      <div class="circle-btn">194        <svg width="36" height="36" viewBox="0 0 24 24"><path d="M7 7h12l-1.5 9H8.5L7 7z" fill="#fff"/><circle cx="9" cy="19" r="1.5" fill="#fff"/><circle cx="16" cy="19" r="1.5" fill="#fff"/></svg>195      </div>196      <div class="circle-btn">197        <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="6" cy="12" r="2" fill="#fff"/><circle cx="12" cy="7" r="2" fill="#fff"/><circle cx="18" cy="17" r="2" fill="#fff"/><path d="M7.5 11l3-3M13.5 8l3 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>198      </div>199      <div class="circle-btn">200        <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#fff"/><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="12" cy="19" r="2" fill="#fff"/></svg>201      </div>202    </div>203  </div>204 205  <!-- Image carousel area -->206  <div class="image-area">207    <div class="image-card">208      <div class="img-placeholder">[IMG: Olive Trail Running Shoe]</div>209      <div class="img-gap"></div>210      <div class="img-placeholder">[IMG: Black Trail Running Shoe]</div>211    </div>212    <div class="pager">213      <div class="dot active"></div>214      <div class="dot"></div>215      <div class="dot"></div>216      <div class="dot"></div>217      <div class="dot"></div>218    </div>219    <div class="count-chip">1 of 13</div>220    <div class="fav-fab">221      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.4-7 10-7 10z" fill="#1f1f1f" stroke="#5aa1ff" stroke-width="2"/></svg>222    </div>223  </div>224 225  <!-- Content -->226  <div class="content">227    <div class="item-title">Adidas AX2S Men's Trail Running Hiking Sneakers Athletic Shoes</div>228 229    <div class="seller-row">230      <div class="avatar">[IMG: Store Avatar]</div>231      <div class="seller-info">232        <div class="seller-name">GHV Store (3096)</div>233        <div class="seller-sub">99.5% positive feedback</div>234      </div>235      <div class="chev">236        <svg width="36" height="36" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>237      </div>238    </div>239 240    <div class="price-line">241      $79.99 - $100.00242      <span class="shipping">+ $102.97 shipping</span>243    </div>244    <div class="delivery">Est. delivery <span class="date">Tue, Dec 26 - Thu, Jan 11</span></div>245  </div>246 247  <!-- Bottom navigation -->248  <div class="bottom-nav">249    <div class="nav-item">250      <div class="icon-wrap">251        <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 5l8 7v7h-5v-5H9v5H4v-7z" fill="#B5B5B5"/></svg>252      </div>253      <div>Home</div>254    </div>255    <div class="nav-item">256      <div class="icon-wrap">257        <svg width="38" height="38" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#B5B5B5"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#B5B5B5"/></svg>258      </div>259      <div>My eBay</div>260    </div>261    <div class="nav-item active">262      <div class="icon-wrap">263        <svg width="38" height="38" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#3D83FF" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#3D83FF" stroke-width="2" fill="none" stroke-linecap="round"/></svg>264      </div>265      <div>Search</div>266    </div>267    <div class="nav-item">268      <div class="icon-wrap">269        <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2V9a2 2 0 1 0-4 0v11a2 2 0 0 0 2 2zM7 10v8M17 10v8" stroke="#B5B5B5" stroke-width="2" fill="none"/></svg>270      </div>271      <div>Inbox</div>272    </div>273    <div class="nav-item">274      <div class="icon-wrap">275        <svg width="38" height="38" viewBox="0 0 24 24"><path d="M4 6l2-2h12l2 2v12l-2 2H6l-2-2z" stroke="#B5B5B5" stroke-width="2" fill="none"/><path d="M8 10h8M8 14h5" stroke="#B5B5B5" stroke-width="2"/></svg>276      </div>277      <div>Selling</div>278    </div>279    <div class="gesture"></div>280  </div>281</div>282</body>283</html>