GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Item Detail UI</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;11 position:relative; overflow:hidden;12 background:#0A0A0A; color:#FFFFFF;13 border-radius:26px; box-shadow:0 4px 18px rgba(0,0,0,0.35);14 }15 16 /* General */17 .screen { width:100%; height:100%; }18 .row { display:flex; align-items:center; }19 .muted { color:#BFC6D2; }20 .divider { height:1px; background:#2A2A2A; margin:24px 36px; }21 .chevron { margin-left:auto; }22 .chevron svg { fill:none; stroke:#DADDE3; stroke-width:6; }23 .section-title { font-size:52px; font-weight:800; margin:0 36px 18px; line-height:1.15; }24 .label { color:#C7CBD4; font-size:34px; }25 .value { color:#FFFFFF; font-size:34px; }26 .dots { display:flex; gap:20px; justify-content:center; padding:18px 0 8px; }27 .dot { width:16px; height:16px; border-radius:50%; background:#8A8A8A; opacity:0.5; }28 .dot.active { opacity:1; background:#CFCFCF; }29 30 /* Top bar */31 .topbar {32 height:150px; padding:0 24px;33 display:flex; align-items:center; gap:24px;34 }35 .top-title { font-size:42px; font-weight:700; margin-left:6px; }36 .circle-icon {37 width:88px; height:88px; border-radius:50%;38 background:#1C1C1C; display:flex; align-items:center; justify-content:center;39 }40 .circle-icon svg { width:46px; height:46px; fill:none; stroke:#FFFFFF; stroke-width:6; }41 42 /* Image area */43 .hero {44 margin:12px 36px 8px;45 background:#E0E0E0; border:1px solid #BDBDBD;46 height:250px; display:flex; align-items:center; justify-content:center;47 color:#757575; font-size:36px; font-weight:600;48 position:relative;49 }50 .fav-floating {51 position:absolute; right:36px; top:370px;52 width:100px; height:100px; border-radius:50%;53 background:#1C1C1C; display:flex; align-items:center; justify-content:center;54 box-shadow:0 6px 16px rgba(0,0,0,0.4);55 }56 .fav-floating svg { width:52px; height:52px; fill:none; stroke:#FFFFFF; stroke-width:6; }57 58 /* Title */59 .item-title {60 font-size:56px; font-weight:900; line-height:1.2;61 margin:18px 36px 26px;62 }63 64 /* Seller row */65 .seller {66 margin:0 36px; padding:12px 0; display:flex; align-items:center;67 }68 .avatar {69 width:88px; height:88px; border-radius:50%;70 background:#E0E0E0; border:1px solid #BDBDBD;71 display:flex; align-items:center; justify-content:center;72 color:#757575; font-size:22px;73 margin-right:22px;74 }75 .seller .name { font-size:38px; font-weight:700; }76 .seller .feedback { font-size:32px; color:#BFC6D2; margin-top:4px; }77 78 /* Price block */79 .price { margin:28px 36px 10px; }80 .amount { font-size:74px; font-weight:800; }81 .small-note { font-size:32px; color:#BFC6D2; margin-top:8px; }82 83 /* Condition row */84 .condition-row { margin:28px 36px 34px; display:flex; align-items:center; gap:18px; }85 .info-icon { width:40px; height:40px; }86 .info-icon svg { width:40px; height:40px; fill:none; stroke:#BFC6D2; stroke-width:6; }87 88 /* Buttons */89 .primary-btn {90 margin:18px 36px 18px;91 height:140px; border-radius:70px;92 background:#6FA8FF; color:#0A0A0A;93 display:flex; align-items:center; justify-content:center;94 font-size:46px; font-weight:800;95 }96 .outline-btn {97 margin:0 36px 24px;98 height:130px; border-radius:70px;99 border:3px solid #6FA8FF; color:#CFE0FF;100 display:flex; align-items:center; justify-content:center;101 gap:18px; font-size:40px; font-weight:700;102 }103 .outline-btn svg { width:44px; height:44px; fill:none; stroke:#8CB8FF; stroke-width:6; }104 105 /* Info section */106 .info-section { padding:6px 0 8px; }107 .info-header {108 margin:10px 36px 8px; display:flex; align-items:center;109 }110 .info-header h3 { margin:0; font-size:46px; font-weight:800; }111 .kv { margin:20px 36px; display:flex; align-items:center; }112 .kv .label { width:300px; }113 .kv .value { margin-left:auto; }114 115 /* Item description link */116 .desc-link { margin:16px 36px; display:flex; align-items:center; }117 .desc-link h3 { margin:0; font-size:46px; font-weight:800; }118 119 /* Bottom navigation */120 .tabbar {121 position:absolute; left:0; right:0; bottom:0;122 height:220px; background:#1A1A1A; border-top:1px solid #2A2A2A;123 display:flex; align-items:flex-start; justify-content:space-around;124 padding-top:22px;125 }126 .tab { width:20%; display:flex; flex-direction:column; align-items:center; color:#DDE1E8; }127 .tab svg { width:54px; height:54px; fill:none; stroke:#DDE1E8; stroke-width:6; }128 .tab span { margin-top:16px; font-size:30px; }129 .tab.active svg { stroke:#6FA8FF; }130 .tab.active span { color:#6FA8FF; }131</style>132</head>133<body>134<div id="render-target">135 <div class="screen">136 <!-- Top Bar -->137 <div class="topbar">138 <div class="circle-icon">139 <!-- Back arrow -->140 <svg viewBox="0 0 48 48">141 <path d="M30 8 L14 24 L30 40" />142 </svg>143 </div>144 <div class="top-title">Item</div>145 <div style="margin-left:auto; display:flex; gap:18px;">146 <div class="circle-icon">147 <!-- Search -->148 <svg viewBox="0 0 48 48">149 <circle cx="20" cy="20" r="12"></circle>150 <line x1="30" y1="30" x2="42" y2="42"></line>151 </svg>152 </div>153 <div class="circle-icon">154 <!-- Cart -->155 <svg viewBox="0 0 48 48">156 <path d="M6 10 H14 L18 34 H38 L42 18 H18" />157 <circle cx="20" cy="40" r="3"></circle>158 <circle cx="34" cy="40" r="3"></circle>159 </svg>160 </div>161 <div class="circle-icon">162 <!-- Share -->163 <svg viewBox="0 0 48 48">164 <circle cx="12" cy="24" r="5"></circle>165 <circle cx="34" cy="12" r="5"></circle>166 <circle cx="34" cy="36" r="5"></circle>167 <path d="M17 23 L29 14 M17 25 L29 34" />168 </svg>169 </div>170 <div class="circle-icon">171 <!-- More (vertical dots) -->172 <svg viewBox="0 0 48 48">173 <circle cx="24" cy="12" r="4"></circle>174 <circle cx="24" cy="24" r="4"></circle>175 <circle cx="24" cy="36" r="4"></circle>176 </svg>177 </div>178 </div>179 </div>180 181 <!-- Product image carousel -->182 <div class="hero">[IMG: Robot Vacuum Product Photo]</div>183 <div class="dots">184 <span class="dot active"></span>185 <span class="dot"></span>186 <span class="dot"></span>187 <span class="dot"></span>188 <span class="dot"></span>189 </div>190 191 <!-- Floating favorite button -->192 <div class="fav-floating">193 <svg viewBox="0 0 48 48">194 <path d="M24 38 L12 28 C6 22 10 12 18 12 C22 12 24 16 24 16 C24 16 26 12 30 12 C38 12 42 22 36 28 Z" />195 </svg>196 </div>197 198 <!-- Item title -->199 <div class="item-title">200 FDW Robot Vacuum Cleaner 2000Pa Strong Suction, 4400mAh, Black201 </div>202 203 <!-- Seller -->204 <div class="seller">205 <div class="avatar">[IMG: Seller Avatar]</div>206 <div style="display:flex; flex-direction:column;">207 <div class="name">xpectmoreforless (435402)</div>208 <div class="feedback">96.5% positive feedback</div>209 </div>210 <div class="chevron">211 <svg viewBox="0 0 48 48">212 <path d="M18 10 L32 24 L18 38" />213 </svg>214 </div>215 </div>216 217 <!-- Price -->218 <div class="price">219 <div class="amount">$29.99</div>220 <div class="small-note">Starting bid • 2d 17h left</div>221 </div>222 223 <!-- Condition row -->224 <div class="condition-row">225 <div class="label">Condition</div>226 <div class="value">New</div>227 <div class="info-icon" title="info">228 <svg viewBox="0 0 48 48">229 <circle cx="24" cy="24" r="18"></circle>230 <line x1="24" y1="16" x2="24" y2="16"></line>231 <path d="M24 22 V34"></path>232 </svg>233 </div>234 </div>235 236 <!-- Buttons -->237 <div class="primary-btn">Place bid</div>238 <div class="outline-btn">239 <svg viewBox="0 0 48 48">240 <path d="M24 38 L12 28 C6 22 10 12 18 12 C22 12 24 16 24 16 C24 16 26 12 30 12 C38 12 42 22 36 28 Z" />241 </svg>242 Added to watchlist243 </div>244 245 <div class="divider"></div>246 247 <!-- About this item -->248 <div class="info-section">249 <div class="info-header">250 <h3>About this item</h3>251 <div class="chevron">252 <svg viewBox="0 0 48 48"><path d="M18 10 L32 24 L18 38" /></svg>253 </div>254 </div>255 <div class="kv">256 <div class="label">Condition</div>257 <div class="value">New</div>258 </div>259 <div class="kv">260 <div class="label">Quantity</div>261 <div class="value">1 available</div>262 </div>263 </div>264 265 <div class="divider"></div>266 267 <!-- Item description -->268 <div class="desc-link">269 <h3>Item description from the seller</h3>270 <div class="chevron">271 <svg viewBox="0 0 48 48"><path d="M18 10 L32 24 L18 38" /></svg>272 </div>273 </div>274 275 <!-- Bottom Tab Bar -->276 <div class="tabbar">277 <div class="tab">278 <!-- Home -->279 <svg viewBox="0 0 48 48"><path d="M6 24 L24 10 L42 24 V40 H30 V28 H18 V40 H6 Z"/></svg>280 <span>Home</span>281 </div>282 <div class="tab">283 <!-- My eBay / profile -->284 <svg viewBox="0 0 48 48"><circle cx="24" cy="16" r="8"></circle><path d="M8 40 C10 30 38 30 40 40"/></svg>285 <span>My eBay</span>286 </div>287 <div class="tab active">288 <!-- Search -->289 <svg viewBox="0 0 48 48"><circle cx="22" cy="22" r="12"></circle><line x1="32" y1="32" x2="44" y2="44"></line></svg>290 <span>Search</span>291 </div>292 <div class="tab">293 <!-- Inbox / bell -->294 <svg viewBox="0 0 48 48"><path d="M24 8 C18 8 16 14 16 20 V30 L10 34 H38 L32 30 V20 C32 14 30 8 24 8"/><circle cx="24" cy="38" r="3"></circle></svg>295 <span>Inbox</span>296 </div>297 <div class="tab">298 <!-- Selling / tag -->299 <svg viewBox="0 0 48 48"><path d="M10 20 L28 6 L42 20 L24 34 Z"/><circle cx="30" cy="14" r="3"></circle></svg>300 <span>Selling</span>301 </div>302 </div>303 </div>304</div>305</body>306</html>