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 :root{9 --bg:#000000;10 --text:#FFFFFF;11 --muted:#9E9E9E;12 --divider:#2A2A2A;13 --chip:#1A1A1A;14 --blue:#6FA6FF;15 --nav:#1F1F1F;16 }17 body{ margin:0; padding:0; background:transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }18 #render-target{19 width:1080px; height:2400px; position:relative; overflow:hidden;20 background:var(--bg); color:var(--text);21 }22 /* Status bar */23 .status-bar{24 height:90px; padding:0 34px; display:flex; align-items:center; justify-content:space-between;25 color:#f1f1f1; font-size:30px; letter-spacing:0.5px;26 }27 .status-icons{ display:flex; gap:20px; align-items:center; opacity:0.9; }28 .dot{ width:8px; height:8px; background:#eaeaea; border-radius:50%; display:inline-block; }29 /* Header */30 .header{ padding:18px 28px; display:flex; align-items:center; justify-content:space-between; }31 .left-head{ display:flex; align-items:center; gap:18px; }32 .back{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; }33 .title{ font-size:44px; font-weight:700; }34 .actions{ display:flex; gap:18px; }35 .circle-btn{36 width:92px; height:92px; background:var(--chip); border-radius:50%;37 display:flex; align-items:center; justify-content:center; border:1px solid #2d2d2d;38 }39 .circle-btn svg{ width:40px; height:40px; fill:#e6e6e6; }40 /* Content */41 .content{ padding:0 36px 220px 36px; overflow-y:auto; height:1980px; }42 h1.item-name{43 font-size:60px; line-height:1.1; margin:10px 0 24px 0; font-weight:800;44 }45 .seller{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }46 .seller-info{ display:flex; align-items:center; gap:24px; }47 .avatar{48 width:110px; height:110px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:50%;49 display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; text-align:center; padding:8px;50 }51 .seller-text .name{ font-size:34px; font-weight:600; }52 .seller-text .fb{ font-size:30px; color:var(--muted); margin-top:6px; }53 .chev svg{ width:32px; height:32px; fill:#e6e6e6; opacity:0.9; }54 .price{ font-size:86px; font-weight:800; margin:22px 0 6px 0; }55 .subtext{ color:var(--muted); font-size:30px; margin-bottom:26px; }56 .row{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }57 .row .label{ color:var(--muted); font-size:34px; }58 .row .value{ font-size:36px; display:flex; align-items:center; gap:12px; }59 .info-dot{60 width:36px; height:36px; border-radius:50%; border:2px solid #7d7d7d; color:#7d7d7d;61 display:flex; align-items:center; justify-content:center; font-size:22px;62 }63 .primary-btn{64 margin-top:24px; height:120px; background:var(--blue); border:none; border-radius:60px;65 display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:700; color:#0b0b0b;66 }67 .secondary-btn{68 margin-top:22px; height:118px; background:transparent; border-radius:60px;69 border:3px solid var(--blue); color:var(--blue); display:flex; align-items:center; justify-content:center;70 font-size:40px; font-weight:700; gap:18px;71 }72 .secondary-btn svg{ width:40px; height:40px; stroke:var(--blue); fill:none; stroke-width:6; }73 .divider{ height:2px; background:var(--divider); margin:30px 0; }74 .section-title{ font-size:46px; font-weight:800; margin:18px 0; }75 .kv{ display:flex; justify-content:space-between; padding:18px 0; }76 .kv .k{ color:var(--muted); font-size:34px; }77 .kv .v{ font-size:36px; }78 .row-link{ display:flex; align-items:center; justify-content:space-between; }79 .row-link .section-title{ margin:28px 0; }80 .bidding-grid{81 display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:6px;82 }83 .kv.small .k{ font-size:30px; }84 .kv.small .v{ font-size:34px; }85 /* Bottom nav */86 .bottom-nav{87 position:absolute; left:0; right:0; bottom:30px; width:100%;88 height:170px; background:var(--nav); border-top:1px solid #2b2b2b;89 display:flex; align-items:center; justify-content:space-around;90 }91 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#d7d7d7; font-size:26px; }92 .nav-item svg{ width:46px; height:46px; fill:#d7d7d7; }93 .nav-item.active svg{ fill:var(--blue); }94 .nav-item.active .bubble{95 width:90px; height:90px; background:#101820; border-radius:50%; display:flex; align-items:center; justify-content:center;96 box-shadow:inset 0 0 0 2px #2b2b2b;97 }98 .home-pill{99 position:absolute; bottom:8px; left:50%; transform:translateX(-50%);100 width:220px; height:10px; background:#e7e7e7; border-radius:6px; opacity:0.9;101 }102</style>103</head>104<body>105<div id="render-target">106 <!-- Simulated status bar -->107 <div class="status-bar">108 <div>12:41</div>109 <div class="status-icons">110 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>111 <svg width="34" height="22" viewBox="0 0 24 24"><path fill="#eaeaea" d="M3 11h2v2H3v-2m3-4h2v10H6V7m3 2h2v6H9V9m3-4h2v14h-2V5m3 6h2v2h-2v-2z"/></svg>112 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#eaeaea" d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2m6-6v-5c0-3.07-1.64-5.64-4.5-6.32V3a1.5 1.5 0 1 0-3 0v1.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>113 </div>114 </div>115 116 <!-- Header -->117 <div class="header">118 <div class="left-head">119 <div class="back" aria-label="Back">120 <svg viewBox="0 0 24 24"><path fill="#e6e6e6" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>121 </div>122 <div class="title">Item</div>123 </div>124 <div class="actions">125 <div class="circle-btn" title="Search">126 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21l1-1-5.5-5zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.505 4.505 0 0 1 9.5 14z"/></svg>127 </div>128 <div class="circle-btn" title="Cart">129 <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.15 14h9.7c.75 0 1.41-.41 1.75-1.03L22 7H6.31l-.95-2H2v2h2l3.6 7.59L6.25 17h11.5v-2H8.53l.62-1z"/></svg>130 </div>131 <div class="circle-btn" title="Share">132 <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.3 3.3 0 0 0 0-1.39l7.05-4.11A3 3 0 1 0 15 5a2.98 2.98 0 0 0 .06.58L8 9.69A3 3 0 1 0 9 12c0-.23-.03-.45-.08-.66l7.02 4.09c.05.19.06.39.06.57A3 3 0 1 0 18 16.08z"/></svg>133 </div>134 <div class="circle-btn" title="More">135 <svg viewBox="0 0 24 24"><path d="M12 8a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 8zm0 6a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 14zm0 6a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 20z"/></svg>136 </div>137 </div>138 </div>139 140 <div class="content">141 <h1 class="item-name">Strong Suction, 4400mAh, Black</h1>142 143 <div class="seller">144 <div class="seller-info">145 <div class="avatar">[IMG: Seller Avatar]</div>146 <div class="seller-text">147 <div class="name">xpectmoreforless (435400)</div>148 <div class="fb">96.5% positive feedback</div>149 </div>150 </div>151 <div class="chev">152 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>153 </div>154 </div>155 156 <div class="price">$29.99</div>157 <div class="subtext">Starting bid · 3d 9h left</div>158 159 <div class="row">160 <div class="label">Condition</div>161 <div class="value">New <span class="info-dot">i</span></div>162 </div>163 164 <button class="primary-btn">Place bid</button>165 <button class="secondary-btn">166 <svg viewBox="0 0 24 24"><path d="M12 21s-6.5-4.35-8.5-7.35C1.2 10.6 2.77 7 6 7c2.08 0 3.4 1.41 4 2.09C10.6 8.41 11.92 7 14 7c3.23 0 4.8 3.6 2.5 6.65C18.5 16.65 12 21 12 21z"/></svg>167 Add to watchlist168 </button>169 170 <div class="divider"></div>171 172 <div class="row-link">173 <div class="section-title">About this item</div>174 <div class="chev">175 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>176 </div>177 </div>178 <div class="kv">179 <div class="k">Condition</div>180 <div class="v">New</div>181 </div>182 <div class="kv">183 <div class="k">Quantity</div>184 <div class="v">1 available</div>185 </div>186 187 <div class="divider"></div>188 189 <div class="row-link">190 <div class="section-title">Item description from the seller</div>191 <div class="chev">192 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>193 </div>194 </div>195 196 <div class="divider"></div>197 198 <div class="row-link">199 <div class="section-title">Bidding</div>200 <div class="chev">201 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>202 </div>203 </div>204 <div class="bidding-grid">205 <div class="kv small">206 <div class="k">Time left</div>207 <div class="v">3d 9h</div>208 </div>209 <div class="kv small">210 <div class="k">Ends</div>211 <div class="v">Mon, Oct 02, 10:35 AM</div>212 </div>213 <div class="kv small">214 <div class="k">Bids</div>215 <div class="v">0</div>216 </div>217 <div class="kv small">218 <div class="k">Bidders</div>219 <div class="v">0</div>220 </div>221 </div>222 </div>223 224 <!-- Bottom navigation -->225 <div class="bottom-nav">226 <div class="nav-item">227 <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>228 <div>Home</div>229 </div>230 <div class="nav-item">231 <svg viewBox="0 0 24 24"><path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z"/></svg>232 <div>My eBay</div>233 </div>234 <div class="nav-item active">235 <div class="bubble">236 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21l1-1-5.5-5zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.505 4.505 0 0 1 9.5 14z"/></svg>237 </div>238 <div>Search</div>239 </div>240 <div class="nav-item">241 <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2m6-6v-5c0-3.07-1.64-5.64-4.5-6.32V3a1.5 1.5 0 1 0-3 0v1.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>242 <div>Inbox</div>243 </div>244 <div class="nav-item">245 <svg viewBox="0 0 24 24"><path d="M5 5v14h14V5H5zm2 2h10v10H7V7z"/></svg>246 <div>Selling</div>247 </div>248 </div>249 <div class="home-pill"></div>250</div>251</body>252</html>