GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Item Detail - Dark UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, 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 /* Header */19 .header {20 height: 150px;21 padding: 24px 36px;22 display: flex;23 align-items: center;24 box-sizing: border-box;25 }26 .back-btn {27 width: 64px; height: 64px; border-radius: 32px;28 background: #1c1c1c; display: flex; align-items: center; justify-content: center;29 margin-right: 20px; border: 1px solid #2a2a2a;30 }31 .title {32 font-size: 44px; font-weight: 700; margin-right: auto;33 }34 .header-actions { display: flex; gap: 18px; }35 .circle-btn {36 width: 72px; height: 72px; border-radius: 36px;37 background: #2b2b2b; border: 1px solid #3a3a3a;38 display: flex; align-items: center; justify-content: center;39 }40 .circle-btn svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.2; }41 42 /* Trending banner */43 .trending {44 margin: 6px 36px 28px 36px;45 background: #121212;46 border-radius: 20px;47 padding: 22px 26px;48 display: flex; align-items: center; gap: 18px;49 font-size: 32px; font-weight: 700;50 }51 .trending .light { font-weight: 500; color: #cccccc; }52 .trend-icon {53 width: 46px; height: 46px; border-radius: 23px;54 background: #1c1c1c; border: 1px solid #2a2a2a;55 display: flex; align-items: center; justify-content: center;56 }57 .trend-icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; }58 59 /* Sections */60 h2.section-title {61 font-size: 46px; font-weight: 800; margin: 20px 36px 8px 36px;62 }63 64 /* About this item rows */65 .about { margin-top: 6px; }66 .rows { margin: 0 36px; }67 .row {68 display: flex; align-items: flex-start; justify-content: space-between;69 padding: 20px 0; border-bottom: 1px solid #161616;70 }71 .label { width: 45%; font-size: 32px; color: #bdbdbd; }72 .value { width: 55%; font-size: 32px; color: #ffffff; }73 .value .low { color: #ff7b93; font-weight: 700; display: block; }74 .value .sub { font-size: 28px; color: #c9c9c9; margin-top: 8px; }75 .chev {76 width: 40px; height: 40px; margin-left: 8px;77 display: flex; align-items: center; justify-content: center;78 }79 .chev svg { width: 28px; height: 28px; stroke: #dcdcdc; stroke-width: 2.6; fill: none; }80 81 /* Description link */82 .description { margin-top: 6px; }83 .link-row {84 margin: 12px 36px 24px 36px;85 display: flex; align-items: center; justify-content: space-between;86 padding: 18px 0;87 }88 .link-row .link { font-size: 34px; text-decoration: underline; }89 .link-row .chev svg { stroke: #bdbdbd; }90 91 /* Consider items */92 .consider-top {93 margin: 26px 36px 12px 36px;94 display: flex; align-items: flex-end; justify-content: space-between;95 }96 .consider-top h2 { margin: 0; font-size: 46px; font-weight: 800; }97 .consider-top .sub { color: #bdbdbd; font-size: 30px; margin-top: 6px; }98 .see-all {99 background: transparent; color: #fff; border: 2px solid #3a3a3a;100 padding: 18px 28px; border-radius: 44px; font-size: 32px;101 display: flex; align-items: center; gap: 12px;102 }103 .see-all svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.4; fill: none; }104 105 .cards {106 margin: 6px 36px 0 36px;107 display: flex; gap: 24px;108 overflow: hidden;109 }110 .card {111 width: 312px; background: #111; border-radius: 28px;112 padding: 18px; box-sizing: border-box; position: relative;113 }114 .card .fav {115 position: absolute; right: 18px; top: 18px;116 width: 56px; height: 56px; border-radius: 28px;117 border: 2px solid #ffffff; display: flex; align-items: center; justify-content: center;118 background: rgba(255,255,255,0.05);119 }120 .fav svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.2; }121 .image {122 width: 100%; height: 220px;123 background: #E0E0E0; border: 1px solid #BDBDBD;124 border-radius: 20px;125 display: flex; align-items: center; justify-content: center;126 color: #757575; font-size: 28px; text-align: center;127 }128 .card-title {129 margin-top: 16px; font-size: 28px; font-weight: 600; line-height: 1.2;130 }131 132 /* Bottom navigation bar */133 .bottom-bar {134 position: absolute; bottom: 0; left: 0; width: 100%;135 height: 190px; background: #1f1f1f; border-top: 1px solid #2b2b2b;136 display: flex; align-items: center; justify-content: space-around;137 box-sizing: border-box; padding-top: 8px;138 }139 .nav-item { width: 20%; text-align: center; color: #d7d7d7; }140 .nav-icon { margin: 16px auto 8px auto; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; }141 .nav-label { font-size: 26px; }142 .nav-item.active .nav-label { color: #78a8ff; font-weight: 700; }143 .search-bubble {144 width: 74px; height: 74px; border-radius: 37px;145 background: #2758ff; display: flex; align-items: center; justify-content: center;146 box-shadow: 0 6px 18px rgba(39,88,255,0.4);147 }148 .nav-icon svg { width: 36px; height: 36px; stroke: #fff; stroke-width: 2.2; fill: none; }149 .badge {150 position: absolute; top: -6px; right: -6px;151 background: #ff4d6d; color: #fff; font-size: 20px; font-weight: 700;152 width: 30px; height: 30px; border-radius: 15px;153 display: flex; align-items: center; justify-content: center;154 border: 2px solid #1f1f1f;155 }156 .bell-wrap { position: relative; width: 68px; height: 68px; margin: 16px auto 8px auto; display: flex; align-items: center; justify-content: center; }157 158 /* Gesture bar */159 .gesture {160 position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);161 width: 360px; height: 10px; border-radius: 5px; background: #ffffff20;162 }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Header -->169 <div class="header">170 <div class="back-btn">171 <svg viewBox="0 0 24 24">172 <path d="M15 4 L7 12 L15 20" />173 </svg>174 </div>175 <div class="title">Item</div>176 <div class="header-actions">177 <div class="circle-btn">178 <svg viewBox="0 0 24 24">179 <circle cx="11" cy="11" r="6"></circle>180 <path d="M16 16 L21 21"></path>181 </svg>182 </div>183 <div class="circle-btn">184 <svg viewBox="0 0 24 24">185 <path d="M3 6 H21 L19 18 H7 L5 6 Z"></path>186 <circle cx="9" cy="20" r="1.5"></circle>187 <circle cx="17" cy="20" r="1.5"></circle>188 </svg>189 </div>190 <div class="circle-btn">191 <!-- Use a simple share arrow -->192 <svg viewBox="0 0 24 24">193 <path d="M6 12 L18 6 M12 6 H18 V12" />194 </svg>195 </div>196 <div class="circle-btn">197 <svg viewBox="0 0 24 24">198 <circle cx="12" cy="5" r="2"></circle>199 <circle cx="12" cy="12" r="2"></circle>200 <circle cx="12" cy="19" r="2"></circle>201 </svg>202 </div>203 </div>204 </div>205 206 <!-- Trending banner -->207 <div class="trending">208 <div class="trend-icon">209 <svg viewBox="0 0 24 24">210 <path d="M13 3 L6 13 H11 L9 21 L18 10 H13 Z"></path>211 </svg>212 </div>213 <div>This one's trending. <span class="light">429 have already sold.</span></div>214 </div>215 216 <!-- About this item -->217 <section class="about">218 <h2 class="section-title">About this item</h2>219 <div class="rows">220 <div class="row">221 <div class="label">Condition</div>222 <div class="value">New with box</div>223 </div>224 <div class="row">225 <div class="label">Quantity</div>226 <div class="value">227 <span class="low">Almost gone</span>228 <div class="sub">429 sold</div>229 </div>230 </div>231 <div class="row">232 <div class="label">Item Number</div>233 <div class="value">134502910737</div>234 <div class="chev">235 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" /></svg>236 </div>237 </div>238 <div class="row">239 <div class="label">Department</div>240 <div class="value">womens</div>241 </div>242 <div class="row">243 <div class="label">Brand</div>244 <div class="value">Skechers</div>245 </div>246 </div>247 </section>248 249 <!-- Description -->250 <section class="description">251 <h2 class="section-title">Item description from the seller</h2>252 <div class="link-row">253 <span class="link">See full description</span>254 <span class="chev">255 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" /></svg>256 </span>257 </div>258 </section>259 260 <!-- Consider these items -->261 <section class="consider">262 <div class="consider-top">263 <div>264 <h2>Consider these items</h2>265 <div class="sub">Sponsored</div>266 </div>267 <button class="see-all">268 See all269 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" /></svg>270 </button>271 </div>272 273 <div class="cards">274 <!-- Card 1 -->275 <div class="card">276 <div class="fav">277 <svg viewBox="0 0 24 24">278 <path d="M12 19 C10 17 6 15 6 10 C6 8 7.5 6.5 9.5 6.5 C10.7 6.5 11.6 7.1 12 8 C12.4 7.1 13.3 6.5 14.5 6.5 C16.5 6.5 18 8 18 10 C18 15 14 17 12 19 Z"></path>279 </svg>280 </div>281 <div class="image">[IMG: Black Skechers Shoe]</div>282 <div class="card-title">Skechers Arch Fit</div>283 </div>284 285 <!-- Card 2 -->286 <div class="card">287 <div class="fav">288 <svg viewBox="0 0 24 24">289 <path d="M12 19 C10 17 6 15 6 10 C6 8 7.5 6.5 9.5 6.5 C10.7 6.5 11.6 7.1 12 8 C12.4 7.1 13.3 6.5 14.5 6.5 C16.5 6.5 18 8 18 10 C18 15 14 17 12 19 Z"></path>290 </svg>291 </div>292 <div class="image">[IMG: Black Skechers Shoe]</div>293 <div class="card-title">Skechers Uno 2</div>294 </div>295 296 <!-- Card 3 -->297 <div class="card">298 <div class="fav">299 <svg viewBox="0 0 24 24">300 <path d="M12 19 C10 17 6 15 6 10 C6 8 7.5 6.5 9.5 6.5 C10.7 6.5 11.6 7.1 12 8 C12.4 7.1 13.3 6.5 14.5 6.5 C16.5 6.5 18 8 18 10 C18 15 14 17 12 19 Z"></path>301 </svg>302 </div>303 <div class="image">[IMG: Grey Nike Air Shoe]</div>304 <div class="card-title">Nike Air Jordan Sneaker</div>305 </div>306 </div>307 </section>308 309 <!-- Bottom navigation -->310 <div class="bottom-bar">311 <div class="nav-item">312 <div class="nav-icon">313 <svg viewBox="0 0 24 24"><path d="M3 12 L12 4 L21 12"></path><path d="M5 11 V20 H19 V11"></path></svg>314 </div>315 <div class="nav-label">Home</div>316 </div>317 318 <div class="nav-item">319 <div class="nav-icon">320 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 20 C4 15 8 14 12 14 C16 14 20 15 20 20"></path></svg>321 </div>322 <div class="nav-label">My eBay</div>323 </div>324 325 <div class="nav-item active">326 <div class="search-bubble">327 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6" style="stroke:#fff;"/><path d="M16 16 L21 21" style="stroke:#fff;"/></svg>328 </div>329 <div class="nav-label">Search</div>330 </div>331 332 <div class="nav-item">333 <div class="bell-wrap">334 <svg viewBox="0 0 24 24">335 <path d="M12 22 C13.1 22 14 21.1 14 20 H10 C10 21.1 10.9 22 12 22 Z"></path>336 <path d="M18 16 H6 V11 C6 7.7 8.3 5 12 5 C15.7 5 18 7.7 18 11 V16 Z"></path>337 </svg>338 <span class="badge">1</span>339 </div>340 <div class="nav-label">Inbox</div>341 </div>342 343 <div class="nav-item">344 <div class="nav-icon">345 <svg viewBox="0 0 24 24">346 <path d="M4 7 L16 7 L20 11 L16 15 L4 15 Z"></path>347 <circle cx="8" cy="11" r="2"></circle>348 </svg>349 </div>350 <div class="nav-label">Selling</div>351 </div>352 353 <div class="gesture"></div>354 </div>355 356</div>357</body>358</html>