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</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; height: 2400px; position: relative; overflow: hidden;11    background: #000;12    color: #fff;13  }14  .header {15    height: 180px;16    display: flex; align-items: center; justify-content: space-between;17    padding: 0 36px;18  }19  .back-title { display: flex; align-items: center; gap: 22px; }20  .title { font-size: 52px; font-weight: 600; }21  .circle-btns { display: flex; align-items: center; gap: 24px; }22  .circle {23    width: 92px; height: 92px; border-radius: 50%;24    background: #2b2b2b; display: flex; align-items: center; justify-content: center;25  }26  .icon { width: 44px; height: 44px; }27  .main-image {28    width: 920px; height: 640px; background: #fff; border-radius: 8px;29    margin: 24px 0 0 80px; position: relative;30  }31  .img-ph {32    position: absolute; left: 40px; right: 40px; top: 60px; bottom: 60px;33    background: #E0E0E0; border: 1px solid #BDBDBD;34    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;35  }36  .heart-float {37    position: absolute; right: -40px; bottom: 80px;38    width: 100px; height: 100px; border-radius: 50%; background: #2b2b2b;39    display: flex; align-items: center; justify-content: center;40  }41  .heart-icon { width: 50px; height: 50px; }42  .count-pill {43    position: absolute; right: 26px; top: 260px;44    background: #d0d0d0; color: #000; font-weight: 600;45    padding: 16px 24px; border-radius: 28px; font-size: 30px;46  }47  .thumbs {48    margin: 26px 0 0 40px;49    display: flex; gap: 26px; padding: 24px 36px;50  }51  .thumb {52    width: 186px; height: 150px; background: #121212; border-radius: 26px; position: relative;53    box-shadow: inset 0 0 0 2px #fff;54  }55  .thumb.selected { box-shadow: inset 0 0 0 6px #fff; }56  .thumb .ph {57    position: absolute; left: 16px; right: 16px; top: 16px; bottom: 16px;58    background: #E0E0E0; border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;60    border-radius: 12px;61  }62  .product-title {63    margin: 30px 40px 0 40px; font-size: 46px; font-weight: 700; line-height: 1.2;64  }65  .store {66    margin: 24px 40px 0 40px; display: flex; align-items: center; justify-content: space-between;67  }68  .store-left { display: flex; align-items: center; gap: 22px; }69  .brand-ph {70    width: 120px; height: 44px; background: #E0E0E0; border: 1px solid #BDBDBD;71    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;72    border-radius: 6px;73  }74  .store-text { display: flex; flex-direction: column; }75  .store-name { font-size: 28px; font-weight: 600; }76  .store-sub { font-size: 26px; color: #b8b8b8; margin-top: 6px; }77  .price-block { margin: 30px 40px 0 40px; }78  .price { font-size: 64px; font-weight: 800; }79  .list-price { margin-top: 10px; font-size: 30px; }80  .list-price .strike { text-decoration: line-through; color: #b8b8b8; margin-right: 14px; }81  .list-price .save { color: #ff5a7f; }82  .condition { margin: 34px 40px 0 40px; display: flex; align-items: center; gap: 26px; }83  .cond-label { color: #9e9e9e; font-size: 32px; }84  .cond-value { font-size: 32px; }85  .size-card {86    margin: 24px 40px 0 40px; height: 120px; border-radius: 20px; border: 2px solid #2e2e2e;87    display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: #0a0a0a;88  }89  .size-text { font-size: 32px; }90  .bottom-nav {91    position: absolute; left: 0; right: 0; bottom: 0; height: 220px;92    background: #0c0c0c; border-top: 1px solid #1f1f1f;93    display: flex; align-items: center; justify-content: space-around;94    padding-bottom: 24px;95  }96  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; }97  .nav-icon {98    width: 72px; height: 72px; border-radius: 50%;99    display: flex; align-items: center; justify-content: center;100  }101  .nav-label { font-size: 26px; color: #dcdcdc; }102  .nav-active .nav-icon { box-shadow: inset 0 0 0 6px #2d5cff; }103  .nav-active .nav-label { color: #2d5cff; font-weight: 600; }104  .gesture {105    position: absolute; left: 50%; transform: translateX(-50%);106    bottom: 12px; width: 220px; height: 10px; background: #fff; border-radius: 8px; opacity: 0.8;107  }108</style>109</head>110<body>111<div id="render-target">112 113  <div class="header">114    <div class="back-title">115      <div class="circle" style="background:#000;">116        <svg class="icon" viewBox="0 0 24 24">117          <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>118        </svg>119      </div>120      <div class="title">Item</div>121    </div>122    <div class="circle-btns">123      <div class="circle">124        <svg class="icon" viewBox="0 0 24 24">125          <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/>126          <line x1="20" y1="20" x2="16.5" y2="16.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>127        </svg>128      </div>129      <div class="circle">130        <svg class="icon" viewBox="0 0 24 24">131          <path d="M3 6h18l-2 10H5L3 6z" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>132          <circle cx="9" cy="20" r="2" fill="#fff"/>133          <circle cx="17" cy="20" r="2" fill="#fff"/>134        </svg>135      </div>136      <div class="circle">137        <svg class="icon" viewBox="0 0 24 24">138          <circle cx="6" cy="8" r="2" fill="#fff"/>139          <circle cx="18" cy="5" r="2" fill="#fff"/>140          <circle cx="18" cy="19" r="2" fill="#fff"/>141          <path d="M7.8 9.2l8.4-3.2M7.8 14.8l8.4 3.2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>142        </svg>143      </div>144      <div class="circle">145        <svg class="icon" viewBox="0 0 24 24">146          <circle cx="12" cy="5" r="2" fill="#fff"/>147          <circle cx="12" cy="12" r="2" fill="#fff"/>148          <circle cx="12" cy="19" r="2" fill="#fff"/>149        </svg>150      </div>151    </div>152  </div>153 154  <div class="count-pill">1 of 5</div>155 156  <div class="main-image">157    <div class="img-ph">[IMG: Brown Leather Wallabee Shoe]</div>158    <div class="heart-float">159      <svg class="heart-icon" viewBox="0 0 24 24">160        <path d="M12 21c-4.5-3.5-7.5-6-8.8-8.2-1.5-2.6-.5-6 2.4-7.3 2.2-1 4.8-.3 6.4 1.5 1.6-1.8 4.2-2.5 6.4-1.5 2.9 1.3 3.9 4.7 2.4 7.3C19.5 15 16.5 17.5 12 21z" fill="#fff"/>161      </svg>162    </div>163  </div>164 165  <div class="thumbs">166    <div class="thumb selected"><div class="ph">[IMG: Shoe Angle 1]</div></div>167    <div class="thumb"><div class="ph">[IMG: Shoe Angle 2]</div></div>168    <div class="thumb"><div class="ph">[IMG: Shoe Angle 3]</div></div>169    <div class="thumb"><div class="ph">[IMG: Shoe Angle 4]</div></div>170    <div class="thumb"><div class="ph">[IMG: Shoe Angle 5]</div></div>171  </div>172 173  <div class="product-title">174    Clarks Originals Womens Wallabee Moccasin Cup Brown Leather Shoes175  </div>176 177  <div class="store">178    <div class="store-left">179      <div class="brand-ph">[IMG: Clarks Logo]</div>180      <div class="store-text">181        <div class="store-name">CLARKS OFFICIAL STORE (6435)</div>182        <div class="store-sub">98.6% positive feedback</div>183      </div>184    </div>185    <div class="circle" style="width:68px;height:68px;background:#1f1f1f;">186      <svg viewBox="0 0 24 24" class="icon" style="width:32px;height:32px;">187        <path d="M8 5l8 7-8 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>188      </svg>189    </div>190  </div>191 192  <div class="price-block">193    <div class="price">$74.99</div>194    <div class="list-price">195      <span class="strike">$160.00</span>196      <span class="save">Save $85.01 (53% off)</span>197    </div>198  </div>199 200  <div class="condition">201    <div class="cond-label">Condition</div>202    <div class="cond-value">New with box</div>203    <svg viewBox="0 0 24 24" width="34" height="34">204      <circle cx="12" cy="12" r="10" stroke="#b8b8b8" stroke-width="2" fill="none"/>205      <circle cx="12" cy="8" r="1.5" fill="#b8b8b8"/>206      <path d="M12 11v6" stroke="#b8b8b8" stroke-width="2" stroke-linecap="round"/>207    </svg>208  </div>209 210  <div class="size-card">211    <div class="size-text">US Shoe Size: <strong>7</strong></div>212    <svg viewBox="0 0 24 24" width="36" height="36">213      <path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>214    </svg>215  </div>216 217  <div class="bottom-nav">218    <div class="nav-item">219      <div class="nav-icon">220        <svg viewBox="0 0 24 24" width="40" height="40">221          <path d="M3 11l9-7 9 7v9H15v-6H9v6H3z" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>222        </svg>223      </div>224      <div class="nav-label">Home</div>225    </div>226    <div class="nav-item">227      <div class="nav-icon">228        <svg viewBox="0 0 24 24" width="40" height="40">229          <circle cx="12" cy="8" r="4" stroke="#fff" stroke-width="2" fill="none"/>230          <path d="M4 21c2.5-4 6-6 8-6s5.5 2 8 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>231        </svg>232      </div>233      <div class="nav-label">My eBay</div>234    </div>235    <div class="nav-item nav-active">236      <div class="nav-icon">237        <svg viewBox="0 0 24 24" width="40" height="40">238          <circle cx="11" cy="11" r="7" stroke="#2d5cff" stroke-width="2" fill="none"/>239          <line x1="20" y1="20" x2="16.5" y2="16.5" stroke="#2d5cff" stroke-width="2" stroke-linecap="round"/>240        </svg>241      </div>242      <div class="nav-label">Search</div>243    </div>244    <div class="nav-item">245      <div class="nav-icon">246        <svg viewBox="0 0 24 24" width="40" height="40">247          <path d="M6 8a6 6 0 0112 0v5l2 3H4l2-3V8z" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>248          <circle cx="12" cy="20" r="1.5" fill="#fff"/>249        </svg>250      </div>251      <div class="nav-label">Inbox</div>252    </div>253    <div class="nav-item">254      <div class="nav-icon">255        <svg viewBox="0 0 24 24" width="40" height="40">256          <path d="M5 3h10l4 4-10 14H5z" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>257          <circle cx="14" cy="8" r="2" fill="#fff"/>258        </svg>259      </div>260      <div class="nav-label">Selling</div>261    </div>262    <div class="gesture"></div>263  </div>264 265</div>266</body>267</html>