GD-ML/AndroidCode
13.4k
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 - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #000;15 color: #fff;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 }18 19 /* Top bar */20 .topbar {21 position: relative;22 height: 160px;23 padding: 40px 40px 0 40px;24 }25 .topbar-inner {26 display: flex;27 align-items: center;28 justify-content: space-between;29 }30 .title {31 font-size: 44px;32 font-weight: 600;33 margin-left: 20px;34 }35 .left-group {36 display: flex;37 align-items: center;38 }39 .circle-btn {40 width: 92px;41 height: 92px;42 border-radius: 46px;43 background: #1a1a1a;44 display: flex;45 align-items: center;46 justify-content: center;47 }48 .circle-btn + .circle-btn { margin-left: 20px; }49 .action-group { display: flex; align-items: center; gap: 20px; }50 51 /* Content area */52 .content {53 padding: 0 48px;54 }55 .price-line {56 margin-top: 20px;57 display: flex;58 align-items: baseline;59 gap: 16px;60 }61 .price {62 font-size: 64px;63 font-weight: 800;64 letter-spacing: -0.5px;65 }66 .shipping {67 color: #9e9e9e;68 font-size: 34px;69 }70 .delivery {71 margin-top: 22px;72 color: #cfcfcf;73 font-size: 36px;74 }75 .delivery .bold { color: #fff; font-weight: 700; }76 .kv-row {77 margin-top: 26px;78 display: flex;79 align-items: center;80 gap: 18px;81 font-size: 34px;82 }83 .kv-row .key { color: #9e9e9e; }84 .kv-row .value { color: #fff; font-weight: 600; }85 .info-icon {86 width: 40px; height: 40px;87 border-radius: 20px;88 background: #1a1a1a;89 display: inline-flex; align-items: center; justify-content: center;90 }91 92 /* Select boxes */93 .select {94 margin-top: 34px;95 border: 2px solid #2a2a2a;96 border-radius: 26px;97 height: 120px;98 padding: 0 30px;99 display: flex; align-items: center; justify-content: space-between;100 background: #0b0b0b;101 }102 .select .label {103 font-size: 36px;104 color: #cfcfcf;105 }106 .select .value {107 font-size: 36px;108 color: #fff;109 font-weight: 700;110 margin-left: 8px;111 }112 .select .right {113 display: flex; align-items: center;114 }115 116 /* Buttons */117 .btn-primary {118 margin-top: 46px;119 height: 130px;120 border-radius: 65px;121 background: #7f9cff;122 color: #fff;123 font-size: 40px;124 font-weight: 700;125 display: flex; align-items: center; justify-content: center;126 }127 .btn-outline {128 margin-top: 22px;129 height: 120px;130 border-radius: 60px;131 border: 3px solid #8fb1ff;132 color: #8fb1ff;133 background: transparent;134 font-size: 38px;135 font-weight: 600;136 display: flex; align-items: center; justify-content: center;137 }138 .btn-outline .left-icon { margin-right: 16px; display: inline-flex; }139 .btn-outline:focus, .btn-primary:focus { outline: none; }140 141 /* Trending card */142 .trending {143 margin: 28px 0 12px 0;144 background: #1f1f1f;145 border-radius: 28px;146 padding: 26px 30px;147 display: flex; align-items: center;148 }149 .trend-icon-wrap {150 width: 72px; height: 72px;151 border-radius: 36px;152 background: #0d0d0d;153 margin-right: 22px;154 display: flex; align-items: center; justify-content: center;155 }156 .trending .text {157 font-size: 34px;158 color: #e6e6e6;159 }160 .trending .text b { color: #fff; }161 162 /* About section */163 .section-title {164 margin-top: 34px;165 font-size: 48px;166 font-weight: 800;167 }168 .detail-row {169 margin-top: 26px;170 display: grid;171 grid-template-columns: 1fr 1fr;172 font-size: 36px;173 }174 .detail-row .label { color: #9e9e9e; }175 .detail-row .value { color: #fff; }176 .detail-row .value.alert { color: #ff8fa2; font-weight: 700; }177 178 /* Bottom nav */179 .bottom-nav {180 position: absolute;181 left: 0; right: 0; bottom: 0;182 height: 180px;183 background: #121212;184 border-top: 1px solid #1f1f1f;185 display: flex; align-items: center; justify-content: space-around;186 padding: 14px 0 0 0;187 }188 .nav-item {189 width: 180px;190 display: flex; flex-direction: column; align-items: center; gap: 14px;191 color: #bdbdbd; font-size: 28px;192 }193 .nav-item.active { color: #7f9cff; }194 .nav-icon {195 width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;196 }197 .nav-icon.active-ring {198 border-radius: 42px;199 background: #1b1b1b;200 box-shadow: 0 0 0 4px #203a8f inset, 0 0 0 2px #7f9cff inset;201 }202 .badge {203 position: absolute;204 top: -6px; right: -6px;205 width: 40px; height: 40px;206 background: #ff6e83; color: #fff; border-radius: 20px;207 font-size: 24px; font-weight: 700;208 display: flex; align-items: center; justify-content: center;209 }210 211 /* Home indicator */212 .home-indicator {213 position: absolute;214 bottom: 12px; left: 50%;215 transform: translateX(-50%);216 width: 240px; height: 12px;217 background: #e6e6e6; border-radius: 6px;218 opacity: 0.9;219 }220</style>221</head>222<body>223<div id="render-target">224 <!-- Top App Bar -->225 <div class="topbar">226 <div class="topbar-inner">227 <div class="left-group">228 <div class="circle-btn" aria-label="Back">229 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">230 <path d="M14 6l-6 6 6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>231 </svg>232 </div>233 <div class="title">Item</div>234 </div>235 <div class="action-group">236 <div class="circle-btn" aria-label="Search">237 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">238 <circle cx="10.5" cy="10.5" r="6" stroke="#fff" stroke-width="2"/>239 <path d="M16 16l5 5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>240 </svg>241 </div>242 <div class="circle-btn" aria-label="Cart">243 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">244 <path d="M3 4h2l2 12h10l2-8H7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>245 <circle cx="10" cy="20" r="1.8" fill="#fff"/>246 <circle cx="17" cy="20" r="1.8" fill="#fff"/>247 </svg>248 </div>249 <div class="circle-btn" aria-label="Share">250 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">251 <circle cx="6" cy="12" r="2" stroke="#fff" stroke-width="2"/>252 <circle cx="18" cy="6" r="2" stroke="#fff" stroke-width="2"/>253 <circle cx="18" cy="18" r="2" stroke="#fff" stroke-width="2"/>254 <path d="M8 12l8-6M8 12l8 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>255 </svg>256 </div>257 <div class="circle-btn" aria-label="More">258 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">259 <circle cx="5" cy="12" r="2"/>260 <circle cx="12" cy="12" r="2"/>261 <circle cx="19" cy="12" r="2"/>262 </svg>263 </div>264 </div>265 </div>266 </div>267 268 <!-- Content -->269 <div class="content">270 <div class="price-line">271 <div class="price">$37.99</div>272 <div class="shipping">+ $54.33 shipping</div>273 </div>274 <div class="delivery">Est. delivery <span class="bold">Thu, Nov 2 - Wed, Nov 22</span></div>275 276 <div class="kv-row">277 <div class="key">Condition</div>278 <div class="value">New with box</div>279 <div class="info-icon" aria-label="Info">280 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">281 <circle cx="12" cy="12" r="10" stroke="#bdbdbd" stroke-width="2"/>282 <path d="M12 16v-5" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/>283 <circle cx="12" cy="8" r="1.4" fill="#bdbdbd"/>284 </svg>285 </div>286 </div>287 288 <!-- Select boxes -->289 <div class="select">290 <div class="left">291 <span class="label">Color:</span>292 <span class="value">Select</span>293 </div>294 <div class="right">295 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">296 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>297 </svg>298 </div>299 </div>300 <div class="select">301 <div class="left">302 <span class="label">Size:</span>303 <span class="value">Select</span>304 </div>305 <div class="right">306 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">307 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>308 </svg>309 </div>310 </div>311 <div class="select">312 <div class="left">313 <span class="label">Quantity:</span>314 <span class="value">1</span>315 </div>316 <div class="right">317 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">318 <path d="M6 9l6 6 6-6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>319 </svg>320 </div>321 </div>322 323 <!-- CTAs -->324 <div class="btn-primary">Buy It Now</div>325 <div class="btn-outline">Add to cart</div>326 <div class="btn-outline">327 <span class="left-icon">328 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">329 <path d="M12 21s-7-4.4-7-9.4A4.6 4.6 0 0 1 12 8a4.6 4.6 0 0 1 7 3.6c0 5-7 9.4-7 9.4z" stroke="#8fb1ff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>330 </svg>331 </span>332 Add to watchlist333 </div>334 335 <!-- Trending -->336 <div class="trending">337 <div class="trend-icon-wrap">338 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">339 <path d="M13 3L6 13h5l-1 8 8-12h-5l0-6z" fill="#fff"/>340 </svg>341 </div>342 <div class="text"><b>This one's trending.</b> 429 have already sold.</div>343 </div>344 345 <!-- About section -->346 <div class="section-title">About this item</div>347 <div class="detail-row">348 <div class="label">Condition</div><div class="value">New with box</div>349 </div>350 <div class="detail-row">351 <div class="label">Quantity</div><div class="value alert">Almost gone</div>352 </div>353 </div>354 355 <!-- Bottom Navigation -->356 <div class="bottom-nav">357 <div class="nav-item">358 <div class="nav-icon" style="position: relative;">359 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">360 <path d="M3 11l9-7 9 7v9H15v-6H9v6H3v-9z" stroke="#bdbdbd" stroke-width="2" stroke-linejoin="round"/>361 </svg>362 </div>363 <div>Home</div>364 </div>365 <div class="nav-item">366 <div class="nav-icon">367 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">368 <circle cx="12" cy="8" r="4" stroke="#bdbdbd" stroke-width="2"/>369 <path d="M4 21c2.5-4 13.5-4 16 0" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/>370 </svg>371 </div>372 <div>My eBay</div>373 </div>374 <div class="nav-item active">375 <div class="nav-icon active-ring">376 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">377 <circle cx="10.5" cy="10.5" r="6" stroke="#7f9cff" stroke-width="2"/>378 <path d="M16 16l5 5" stroke="#7f9cff" stroke-width="2" stroke-linecap="round"/>379 </svg>380 </div>381 <div>Search</div>382 </div>383 <div class="nav-item">384 <div class="nav-icon" style="position: relative;">385 <span class="badge">1</span>386 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">387 <path d="M12 3c-3 0-5 2.5-5 6v3l-2 2v1h14v-1l-2-2V9c0-3.5-2-6-5-6z" stroke="#bdbdbd" stroke-width="2" stroke-linejoin="round"/>388 </svg>389 </div>390 <div>Inbox</div>391 </div>392 <div class="nav-item">393 <div class="nav-icon">394 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">395 <path d="M4 5h12l4 7-7 7-9-14z" stroke="#bdbdbd" stroke-width="2" stroke-linejoin="round"/>396 <circle cx="7" cy="9" r="1.5" fill="#bdbdbd"/>397 </svg>398 </div>399 <div>Selling</div>400 </div>401 </div>402 403 <div class="home-indicator"></div>404</div>405</body>406</html>