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 - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000000; color: #FFFFFF;13 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;14 }15 .page { padding: 32px; }16 .status-bar {17 height: 80px;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 32px; color: #FFFFFF; font-weight: 600;20 opacity: 0.9;21 }22 .status-icons { display: flex; gap: 16px; align-items: center; }23 .dot { width: 10px; height: 10px; border-radius: 50%; background:#fff; opacity:0.9; }24 .battery {25 width: 30px; height: 16px; border: 2px solid #fff; border-radius: 3px; position: relative;26 }27 .battery::after { content:""; position:absolute; right:-6px; top:4px; width:4px; height:8px; background:#fff; border-radius:1px; }28 .battery-fill { width: 70%; height: 100%; background:#fff; }29 .app-bar { display:flex; align-items:center; justify-content:space-between; padding: 8px 32px; }30 .app-left { display:flex; align-items:center; gap:24px; }31 .title { font-size: 42px; font-weight: 700; }32 .chip-row { display:flex; align-items:center; gap:20px; }33 .chip {34 width:68px; height:68px; border-radius:50%;35 background:#1E1E1E; display:flex; align-items:center; justify-content:center;36 }37 .icon { fill:#FFFFFF; opacity:0.95; }38 .seller-row { display:flex; align-items:center; justify-content:space-between; margin-top: 24px; padding: 12px 0; }39 .seller-info { display:flex; align-items:center; gap:22px; }40 .avatar {41 width:68px; height:68px; border-radius:50%;42 background:#E0E0E0; border:1px solid #BDBDBD;43 display:flex; align-items:center; justify-content:center;44 color:#757575; font-size:20px;45 }46 .seller-text .name { font-size:34px; font-weight:600; }47 .seller-text .sub { font-size:28px; color:#B0B0B0; margin-top:6px; }48 .chev-right {49 width: 24px; height: 24px; border-right: 4px solid #fff; border-top: 4px solid #fff;50 transform: rotate(45deg);51 margin-right: 10px;52 }53 .price { font-size:64px; font-weight: 800; margin-top: 30px; }54 .shipping { font-size:28px; color:#CFCFCF; margin-left: 8px; font-weight: 500; }55 .delivery { margin-top: 24px; font-size:30px; color:#DADADA; }56 .delivery .bold { font-weight: 800; color:#FFFFFF; }57 .condition-bar {58 display:flex; align-items:center; justify-content:space-between;59 margin-top: 22px; padding-right: 8px;60 }61 .cond-left { font-size:28px; color:#A8A8A8; }62 .cond-right { display:flex; align-items:center; gap:10px; font-size:30px; font-weight:600; }63 .info-circle {64 width:30px; height:30px; border-radius:50%; border:2px solid #9E9E9E; color:#9E9E9E;65 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px;66 }67 .dropdown {68 margin-top: 22px; padding: 26px 28px;69 background:#101010; border:2px solid #2B2B2B; border-radius:18px;70 display:flex; align-items:center; justify-content:space-between;71 font-size:32px; color:#DADADA;72 }73 .dropdown strong { color:#FFFFFF; }74 .caret {75 width:0; height:0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid #CFCFCF;76 }77 .cta-group { margin-top: 40px; }78 .btn-primary {79 background:#78A7FF; color:#0B0B0B; font-weight:800; color:#FFFFFF;80 border-radius:44px; height:110px; display:flex; align-items:center; justify-content:center;81 font-size:36px;82 }83 .btn-outline {84 margin-top: 22px; height:104px; border-radius:44px;85 border:3px solid #6FA6FF; color:#7FB2FF; display:flex; align-items:center; justify-content:center;86 font-size:34px; font-weight:700; background: transparent;87 }88 .btn-outline .icon { margin-right: 14px; }89 .trend {90 margin-top: 36px; background:#1D1D1D; border-radius:24px;91 padding: 22px 24px; display:flex; align-items:center; gap:18px; color:#EDEDED; font-size:30px;92 }93 .trend .bolt {94 width:50px; height:50px; border-radius:50%; background:#000; border:2px solid #3A3A3A;95 display:flex; align-items:center; justify-content:center;96 }97 .section-title { margin-top: 40px; font-size:42px; font-weight:800; }98 /* Bottom navigation */99 .bottom-bar {100 position:absolute; bottom:0; left:0; width:100%;101 background:#0F0F0F; border-top:1px solid #242424;102 padding-top: 18px; padding-bottom: 24px;103 }104 .nav-icons { display:flex; align-items:flex-end; justify-content:space-around; padding: 0 24px; }105 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#CFCFCF; }106 .nav-item.active .circle { background:#283651; }107 .nav-item.active .label { color:#76AEFF; font-weight:700; }108 .circle { width:84px; height:84px; border-radius:42px; background:#1B1B1B; display:flex; align-items:center; justify-content:center; }109 .label { font-size:26px; }110 .badge {111 position:absolute; top:-6px; right:-6px; background:#FF3B57; color:#fff;112 font-size:22px; width:34px; height:34px; border-radius:50%;113 display:flex; align-items:center; justify-content:center; font-weight:800;114 border:3px solid #0F0F0F;115 }116 .home, .user, .search, .bell, .tag { fill:#FFFFFF; opacity:0.92; }117 .handle {118 position:absolute; bottom:8px; left:50%; transform:translateX(-50%);119 width: 240px; height: 10px; border-radius: 10px; background:#FFFFFF22;120 }121</style>122</head>123<body>124<div id="render-target">125 <div class="status-bar">126 <div style="display:flex; align-items:center; gap:12px;">127 <span style="font-size:30px;">8:59</span>128 </div>129 <div class="status-icons">130 <div class="dot"></div>131 <div class="dot"></div>132 <div class="dot"></div>133 <div class="battery"><div class="battery-fill"></div></div>134 </div>135 </div>136 137 <div class="app-bar">138 <div class="app-left">139 <svg width="40" height="40" viewBox="0 0 24 24" class="icon">140 <path d="M15 18l-6-6 6-6" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>141 </svg>142 <div class="title">Item</div>143 </div>144 <div class="chip-row">145 <div class="chip">146 <svg class="icon" width="30" height="30" viewBox="0 0 24 24">147 <circle cx="11" cy="11" r="7" stroke="white" stroke-width="2" fill="none"/>148 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="white" stroke-width="2"/>149 </svg>150 </div>151 <div class="chip">152 <svg class="icon" width="30" height="30" viewBox="0 0 24 24">153 <path d="M7 7h12l-1 8H8L7 7z" fill="none" stroke="white" stroke-width="2"/>154 <circle cx="9" cy="19" r="1.6" fill="white"/>155 <circle cx="17" cy="19" r="1.6" fill="white"/>156 </svg>157 </div>158 <div class="chip">159 <svg class="icon" width="30" height="30" viewBox="0 0 24 24">160 <path d="M4 12l6-6v4h8v4H10v4z" fill="none" stroke="white" stroke-width="2" stroke-linejoin="round"/>161 </svg>162 </div>163 <div class="chip">164 <svg class="icon" width="30" height="30" viewBox="0 0 24 24">165 <circle cx="5" cy="12" r="2" fill="white"/>166 <circle cx="12" cy="12" r="2" fill="white"/>167 <circle cx="19" cy="12" r="2" fill="white"/>168 </svg>169 </div>170 </div>171 </div>172 173 <div class="page">174 <div class="seller-row">175 <div class="seller-info">176 <div class="avatar">[IMG: Seller Avatar]</div>177 <div class="seller-text">178 <div class="name">thecharmingturtlestore (21580)</div>179 <div class="sub">99.6% positive feedback</div>180 </div>181 </div>182 <div class="chev-right"></div>183 </div>184 185 <div style="display:flex; align-items:flex-end; gap:12px;">186 <div class="price">$37.99</div>187 <div class="shipping">+ $74.34 shipping</div>188 </div>189 190 <div class="delivery">Est. delivery <span class="bold">Thu, Nov 2 - Wed, Nov 22</span></div>191 192 <div class="condition-bar">193 <div class="cond-left">Condition</div>194 <div class="cond-right">195 <span>New with box</span>196 <div class="info-circle">i</div>197 </div>198 </div>199 200 <div class="dropdown">201 <div>Color: <strong>Gray</strong></div>202 <div class="caret"></div>203 </div>204 <div class="dropdown">205 <div>Size: <strong>8</strong></div>206 <div class="caret"></div>207 </div>208 <div class="dropdown">209 <div>Quantity: <strong>1</strong></div>210 <div class="caret"></div>211 </div>212 213 <div class="cta-group">214 <div class="btn-primary">Buy It Now</div>215 <div class="btn-outline">Add to cart</div>216 <div class="btn-outline">217 <svg class="icon" width="28" height="28" viewBox="0 0 24 24">218 <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="none" stroke="#7FB2FF" stroke-width="2"/>219 </svg>220 Add to watchlist221 </div>222 </div>223 224 <div class="trend">225 <div class="bolt">226 <svg width="28" height="28" viewBox="0 0 24 24" class="icon">227 <path d="M13 3L4 14h7l-1 7 8-11h-7l2-7z" fill="white"/>228 </svg>229 </div>230 <div>This one's trending. 429 have already sold.</div>231 </div>232 233 <div class="section-title">About this item</div>234 </div>235 236 <div class="bottom-bar">237 <div class="nav-icons">238 <div class="nav-item">239 <div class="circle">240 <svg class="home" width="40" height="40" viewBox="0 0 24 24">241 <path d="M3 11l9-7 9 7v9H14v-6H10v6H3z" fill="white"/>242 </svg>243 </div>244 <div class="label">Home</div>245 </div>246 <div class="nav-item">247 <div class="circle">248 <svg class="user" width="40" height="40" viewBox="0 0 24 24">249 <circle cx="12" cy="8" r="4" fill="white"/>250 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="white" stroke-width="2"/>251 </svg>252 </div>253 <div class="label">My eBay</div>254 </div>255 <div class="nav-item active">256 <div class="circle" style="position:relative;">257 <svg class="search" width="40" height="40" viewBox="0 0 24 24">258 <circle cx="11" cy="11" r="6" stroke="white" stroke-width="2" fill="none"/>259 <line x1="16" y1="16" x2="22" y2="22" stroke="white" stroke-width="2"/>260 </svg>261 </div>262 <div class="label">Search</div>263 </div>264 <div class="nav-item">265 <div class="circle" style="position:relative;">266 <svg class="bell" width="40" height="40" viewBox="0 0 24 24">267 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm7-6V11a7 7 0 1 0-14 0v5l-2 2h18l-2-2z" fill="white"/>268 </svg>269 <div class="badge">1</div>270 </div>271 <div class="label">Inbox</div>272 </div>273 <div class="nav-item">274 <div class="circle">275 <svg class="tag" width="40" height="40" viewBox="0 0 24 24">276 <path d="M3 12l9-9 9 9-9 9-9-9z" fill="none" stroke="white" stroke-width="2"/>277 <circle cx="12" cy="7" r="2" fill="white"/>278 </svg>279 </div>280 <div class="label">Selling</div>281 </div>282 </div>283 </div>284 285 <div class="handle"></div>286</div>287</body>288</html>