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, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 74px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 30px;27    letter-spacing: 1px;28  }29  .sb-right {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .sb-icon svg { width: 36px; height: 36px; fill: none; stroke: #EDEDED; stroke-width: 2.5; }35 36  /* App bar */37  .app-bar {38    height: 132px;39    padding: 0 28px;40    display: flex;41    align-items: center;42    justify-content: space-between;43  }44  .left-group {45    display: flex;46    align-items: center;47    gap: 24px;48  }49  .title { font-size: 48px; font-weight: 700; letter-spacing: 0.3px; }50  .action-group {51    display: flex;52    align-items: center;53    gap: 18px;54  }55  .icon-btn {56    width: 92px;57    height: 92px;58    background: #2A2A2A;59    border-radius: 50%;60    display: flex;61    align-items: center;62    justify-content: center;63  }64  .icon-btn svg { width: 44px; height: 44px; stroke: #FFFFFF; fill: none; stroke-width: 2.5; }65 66  /* Hero image */67  .hero {68    position: relative;69    margin-top: 10px;70  }71  .img-ph {72    width: 100%;73    height: 980px;74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    display: flex;77    align-items: center;78    justify-content: center;79    color: #555;80    font-size: 36px;81    font-weight: 600;82  }83  .ribbon {84    position: absolute;85    top: 210px;86    left: 32px;87    background: #C8102E;88    color: #fff;89    padding: 18px 26px;90    border-radius: 12px;91    font-size: 34px;92    font-weight: 700;93  }94  .count-badge {95    position: absolute;96    top: 220px;97    right: 28px;98    background: rgba(255,255,255,0.2);99    color: #fff;100    padding: 14px 22px;101    border-radius: 12px;102    font-size: 32px;103    font-weight: 700;104  }105  .pager-dots {106    position: absolute;107    bottom: 92px;108    left: 50%;109    transform: translateX(-50%);110    display: flex;111    gap: 14px;112    align-items: center;113  }114  .dot { width: 16px; height: 16px; border-radius: 50%; background: #6A6A6A; }115  .dot.active { width: 26px; height: 26px; background: #BDBDBD; }116  .fav-btn {117    position: absolute;118    right: 28px;119    bottom: 40px;120    width: 120px;121    height: 120px;122    border-radius: 50%;123    background: rgba(255,255,255,0.1);124    display: flex;125    align-items: center;126    justify-content: center;127  }128  .fav-btn svg { width: 60px; height: 60px; fill: none; stroke: #FFFFFF; stroke-width: 2.5; }129 130  /* Content */131  .content {132    padding: 36px 36px 24px 36px;133  }134  .title-main {135    font-size: 58px;136    line-height: 1.16;137    margin: 6px 0 26px 0;138    font-weight: 800;139  }140  .seller {141    margin-top: 6px;142    padding: 14px 0 10px 0;143    position: relative;144  }145  .seller-row {146    display: flex;147    align-items: center;148    gap: 18px;149    font-size: 34px;150  }151  .seller .store-ic {152    width: 56px; height: 56px; background: #2A2A2A; border-radius: 50%;153    display: flex; align-items: center; justify-content: center;154  }155  .seller .store-ic svg { width: 32px; height: 32px; stroke: #fff; fill: none; stroke-width: 2.2; }156  .seller a {157    display: inline-block;158    margin-left: 74px;159    margin-top: 6px;160    color: #A8D0FF;161    text-decoration: underline;162    font-size: 32px;163  }164  .chevron {165    position: absolute;166    right: 10px;167    top: 18px;168  }169  .chevron svg { width: 40px; height: 40px; stroke: #FFFFFF; fill: none; stroke-width: 3; }170 171  .price {172    margin-top: 28px;173    font-size: 70px;174    font-weight: 800;175  }176  .shipping {177    font-size: 36px;178    color: #D0D0D0;179    font-weight: 500;180  }181 182  .delivery {183    margin-top: 22px;184    color: #EDEDED;185    font-size: 36px;186    font-weight: 600;187  }188 189  .meta-row {190    margin-top: 34px;191    display: flex;192    align-items: center;193    justify-content: space-between;194    color: #DCDCDC;195    font-size: 34px;196  }197  .meta-row .value {198    color: #FFFFFF;199    opacity: 0.9;200    font-weight: 600;201    display: flex;202    align-items: center;203    gap: 12px;204  }205  .meta-row .value .info svg { width: 32px; height: 32px; stroke: #DCDCDC; fill: none; stroke-width: 2.5; }206 207  .qty {208    margin-top: 40px;209    color: #DCDCDC;210    font-size: 32px;211  }212  .select {213    margin-top: 18px;214    width: 100%;215    height: 112px;216    border-radius: 18px;217    background: #101010;218    border: 2px solid #303030;219    display: flex;220    align-items: center;221    justify-content: space-between;222    padding: 0 28px;223    font-size: 40px;224    color: #FFFFFF;225  }226  .caret {227    width: 0; height: 0;228    border-left: 14px solid transparent;229    border-right: 14px solid transparent;230    border-top: 18px solid #FFFFFF;231    margin-left: 10px;232  }233</style>234</head>235<body>236<div id="render-target">237 238  <!-- Status bar -->239  <div class="status-bar">240    <div>8:25</div>241    <div class="sb-right">242      <div class="sb-icon">243        <svg viewBox="0 0 24 24"><path d="M2 18c3-4 7-6 10-6s7 2 10 6" /><path d="M6 18c2-3 5-4 6-4s4 1 6 4" /><circle cx="12" cy="18" r="1.2" fill="#EDEDED"/></svg>244      </div>245      <div class="sb-icon">246        <svg viewBox="0 0 24 24"><rect x="3" y="7" width="14" height="10" rx="2"/><path d="M17 10l4-2v8l-4-2"/></svg>247      </div>248      <div class="sb-icon">249        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><rect x="5" y="8" width="14" height="8" rx="1"/></svg>250      </div>251    </div>252  </div>253 254  <!-- App bar -->255  <div class="app-bar">256    <div class="left-group">257      <div class="icon-btn" aria-label="Menu">258        <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>259      </div>260      <div class="title">Item</div>261    </div>262    <div class="action-group">263      <div class="icon-btn" aria-label="Search">264        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>265      </div>266      <div class="icon-btn" aria-label="Cart">267        <svg viewBox="0 0 24 24"><path d="M3 5h2l2 11h10l2-7H6"/><circle cx="9" cy="19" r="1.8" fill="#fff"/><circle cx="16" cy="19" r="1.8" fill="#fff"/></svg>268      </div>269      <div class="icon-btn" aria-label="Share">270        <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 12l8-6M8 12l8 6"/></svg>271      </div>272      <div class="icon-btn" aria-label="More">273        <svg 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>274      </div>275    </div>276  </div>277 278  <!-- Product hero image -->279  <div class="hero">280    <div class="img-ph">[IMG: iPhone 14 Pro Max - Close-up Product Photo]</div>281 282    <div class="ribbon">19 watched in the last 24 hours</div>283    <div class="count-badge">1 of 2</div>284 285    <div class="pager-dots">286      <div class="dot active"></div>287      <div class="dot"></div>288    </div>289 290    <div class="fav-btn" aria-label="Save">291      <svg viewBox="0 0 24 24"><path d="M12 21s-7.5-5.1-7.5-10.2A4.8 4.8 0 0 1 12 7a4.8 4.8 0 0 1 7.5 3.8C19.5 15.9 12 21 12 21z"/></svg>292    </div>293  </div>294 295  <!-- Content -->296  <div class="content">297    <div class="title-main">iPhone 14 Pro Max - Unlocked - 128GB - Black - Excellent</div>298 299    <div class="seller">300      <div class="seller-row">301        <div class="store-ic">302          <svg viewBox="0 0 24 24">303            <path d="M3 9h18" />304            <path d="M4 9l1-3h14l1 3" />305            <rect x="5" y="9" width="14" height="9" rx="1"/>306          </svg>307        </div>308        <div>buybackboss (11826)</div>309      </div>310      <a href="#">99.2% positive feedback</a>311      <div class="chevron">312        <svg viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>313      </div>314    </div>315 316    <div class="price">$975.00 <span class="shipping"> + $42.69 Shipping</span></div>317 318    <div class="delivery">Est. delivery Mon, Jul 24 - Thu, Aug 10</div>319 320    <div class="meta-row">321      <div>Condition</div>322      <div class="value">Excellent - Refurbished323        <span class="info">324          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 16v-5"/><circle cx="12" cy="7.5" r="1.2" fill="#DCDCDC"/></svg>325        </span>326      </div>327    </div>328 329    <div class="qty">Quantity 4 available</div>330    <div class="select">331      <div>1</div>332      <div class="caret"></div>333    </div>334  </div>335 336</div>337</body>338</html>