GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Item Detail Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000000;14    border-radius: 24px;15    box-shadow: 0 6px 30px rgba(0,0,0,0.35);16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17    color: #fff;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 100%;26    height: 120px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 40px;31    box-sizing: border-box;32    color: #fff;33    font-size: 40px;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 22px;40  }41  .status-dot {42    width: 12px; height: 12px; background: #fff; border-radius: 50%;43    opacity: 0.9;44  }45  .wifi-icon, .battery-icon {46    width: 42px; height: 36px;47  }48 49  /* Header */50  .header {51    position: absolute;52    top: 120px;53    left: 0;54    width: 100%;55    height: 150px;56    display: flex;57    align-items: center;58    padding: 0 36px;59    box-sizing: border-box;60  }61  .back {62    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;63    margin-right: 22px;64  }65  .title {66    font-size: 64px;67    font-weight: 700;68    margin-right: auto;69  }70  .actions {71    display: flex;72    align-items: center;73    gap: 22px;74  }75  .action-circle {76    width: 110px; height: 110px;77    border-radius: 55px;78    background: #2b2b2b;79    display: flex; align-items: center; justify-content: center;80  }81  .action-circle svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 4; }82 83  /* Content */84  .content {85    position: absolute;86    top: 300px;87    left: 0;88    width: 100%;89    box-sizing: border-box;90    padding: 0 40px;91  }92  .image-card {93    width: 1000px;94    margin: 0 auto;95    background: #ffffff;96    border-radius: 10px;97    box-sizing: border-box;98    padding: 28px;99    position: relative;100  }101  .img-placeholder {102    width: 944px;103    height: 640px;104    background: #E0E0E0;105    border: 1px solid #BDBDBD;106    display: flex;107    align-items: center;108    justify-content: center;109    color: #757575;110    font-size: 34px;111    text-align: center;112  }113  .image-counter {114    position: absolute;115    top: 22px;116    right: 22px;117    background: rgba(80,80,80,0.7);118    color: #fff;119    padding: 10px 16px;120    border-radius: 20px;121    font-size: 28px;122  }123  .heart-fab {124    position: absolute;125    right: -10px;126    bottom: -60px;127    width: 120px;128    height: 120px;129    border-radius: 60px;130    background: #2b2b2b;131    display: flex; align-items: center; justify-content: center;132    box-shadow: 0 8px 20px rgba(0,0,0,0.5);133  }134  .heart-fab svg { width: 60px; height: 60px; stroke: #fff; fill: none; stroke-width: 5; }135 136  .dots {137    display: flex;138    justify-content: center;139    gap: 18px;140    margin: 70px 0 20px 0;141  }142  .dot {143    width: 16px; height: 16px; border-radius: 8px; background: #2a2a2a;144  }145  .dot.active {146    width: 22px; height: 22px; border-radius: 11px; background: #474747;147  }148 149  .product-title {150    margin-top: 40px;151    font-size: 52px;152    font-weight: 800;153    line-height: 1.22;154    letter-spacing: 0.2px;155    padding: 0 12px;156  }157 158  /* Bottom navigation */159  .bottom-nav {160    position: absolute;161    left: 0; right: 0; bottom: 80px;162    height: 220px;163    background: #1a1a1a;164    display: flex;165    align-items: center;166    justify-content: space-around;167    padding: 20px 0;168    box-sizing: border-box;169    border-top: 1px solid #2b2b2b;170  }171  .nav-item {172    width: 200px;173    display: flex; flex-direction: column;174    align-items: center; justify-content: center;175    color: #d6d6d6;176    font-size: 32px;177    gap: 18px;178  }179  .nav-item .icon {180    width: 80px; height: 80px;181  }182  .nav-item.selected .icon-wrap {183    background: #233450;184    border-radius: 40px;185    padding: 16px;186  }187  .nav-item.selected { color: #6fa0ff; }188  .nav-item svg { width: 64px; height: 64px; stroke: #d6d6d6; fill: none; stroke-width: 5; }189  .nav-item.selected svg { stroke: #6fa0ff; }190  .badge {191    position: absolute;192    top: 6px; right: -6px;193    background: #ff6b7e; color: #fff;194    width: 34px; height: 34px; border-radius: 17px;195    font-size: 24px; display: flex; align-items: center; justify-content: center;196    border: 2px solid #1a1a1a;197  }198 199  .home-indicator {200    position: absolute;201    bottom: 18px;202    left: 50%;203    transform: translateX(-50%);204    width: 300px; height: 12px; border-radius: 6px;205    background: #e8e8e8;206    opacity: 0.9;207  }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Status Bar -->214  <div class="status-bar">215    <div>7:33</div>216    <div class="status-right">217      <div class="status-dot"></div>218      <div class="status-dot"></div>219      <div class="status-dot"></div>220      <svg class="wifi-icon" viewBox="0 0 24 24">221        <path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M9 16c2-2 4-2 6 0"/>222        <circle cx="12" cy="20" r="2" fill="#fff" stroke="none"></circle>223      </svg>224      <svg class="battery-icon" viewBox="0 0 36 24">225        <rect x="2" y="5" width="28" height="14" rx="3" ry="3" stroke="#fff" fill="none" stroke-width="2"></rect>226        <rect x="30" y="8" width="4" height="8" rx="2" ry="2" fill="#fff"></rect>227        <rect x="5" y="8" width="22" height="8" fill="#fff"></rect>228      </svg>229    </div>230  </div>231 232  <!-- Header -->233  <div class="header">234    <div class="back">235      <svg viewBox="0 0 24 24">236        <path d="M15 19l-7-7 7-7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>237      </svg>238    </div>239    <div class="title">Item</div>240    <div class="actions">241      <div class="action-circle">242        <svg viewBox="0 0 24 24">243          <circle cx="11" cy="11" r="7"></circle>244          <path d="M20 20l-4-4"></path>245        </svg>246      </div>247      <div class="action-circle">248        <svg viewBox="0 0 24 24">249          <path d="M3 6h18l-2 8H6L3 6z"></path>250          <circle cx="8" cy="19" r="2"></circle>251          <circle cx="17" cy="19" r="2"></circle>252        </svg>253      </div>254      <div class="action-circle">255        <svg viewBox="0 0 24 24">256          <circle cx="6" cy="12" r="2"></circle>257          <circle cx="12" cy="7" r="2"></circle>258          <circle cx="18" cy="12" r="2"></circle>259          <path d="M7.8 10.6l3.2-2.4M12.9 8.9l3.2 2.4"></path>260        </svg>261      </div>262      <div class="action-circle">263        <svg viewBox="0 0 24 24">264          <circle cx="12" cy="5" r="2"></circle>265          <circle cx="12" cy="12" r="2"></circle>266          <circle cx="12" cy="19" r="2"></circle>267        </svg>268      </div>269    </div>270  </div>271 272  <!-- Content -->273  <div class="content">274    <div class="image-card">275      <div class="image-counter">1 of 11</div>276      <div class="img-placeholder">[IMG: Black Skechers Slip-On Sneakers]</div>277      <div class="heart-fab">278        <svg viewBox="0 0 24 24">279          <path d="M12 20s-7-4.5-7-9.5A4.5 4.5 0 0 1 9.5 6c1.7 0 2.5 1 2.5 1s0.8-1 2.5-1A4.5 4.5 0 0 1 19 10.5C19 15.5 12 20 12 20z"></path>280        </svg>281      </div>282    </div>283 284    <div class="dots">285      <div class="dot"></div>286      <div class="dot active"></div>287      <div class="dot"></div>288      <div class="dot"></div>289      <div class="dot"></div>290    </div>291 292    <div class="product-title">293      Skechers Women's Arch Comfort Sneaker Walking Shoes Ladies Comfortable Shoe294    </div>295  </div>296 297  <!-- Bottom Navigation -->298  <div class="bottom-nav">299    <div class="nav-item">300      <div class="icon-wrap">301        <svg class="icon" viewBox="0 0 24 24">302          <path d="M3 11l9-7 9 7v9H14v-6H10v6H3z"></path>303        </svg>304      </div>305      <div>Home</div>306    </div>307 308    <div class="nav-item">309      <div class="icon-wrap">310        <svg class="icon" viewBox="0 0 24 24">311          <circle cx="12" cy="8" r="4"></circle>312          <path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path>313        </svg>314      </div>315      <div>My eBay</div>316    </div>317 318    <div class="nav-item selected">319      <div class="icon-wrap">320        <svg class="icon" viewBox="0 0 24 24">321          <circle cx="11" cy="11" r="7"></circle>322          <path d="M20 20l-4-4"></path>323        </svg>324      </div>325      <div>Search</div>326    </div>327 328    <div class="nav-item" style="position: relative;">329      <div class="icon-wrap" style="position: relative;">330        <svg class="icon" viewBox="0 0 24 24">331          <path d="M6 10a6 6 0 1 1 12 0v5H4v-5"></path>332          <path d="M8 19h8"></path>333        </svg>334        <div class="badge">1</div>335      </div>336      <div>Inbox</div>337    </div>338 339    <div class="nav-item">340      <div class="icon-wrap">341        <svg class="icon" viewBox="0 0 24 24">342          <path d="M4 9l8-6 8 8-8 8-8-8z"></path>343          <circle cx="16" cy="12" r="2"></circle>344        </svg>345      </div>346      <div>Selling</div>347    </div>348  </div>349 350  <div class="home-indicator"></div>351 352</div>353</body>354</html>