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>UI Render</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: #000; color: #fff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 }15 16 :root{17 --line:#2a2a2a;18 --muted:#a9a9a9;19 --chip:#1a1a1a;20 --banner:#1c1c1c;21 --blue:#78A7FF;22 --blue-ghost:#1a2744;23 --pink:#ff5d87;24 }25 26 /* Status bar */27 .status-bar {28 position: absolute; top: 0; left: 0; right: 0;29 height: 96px; padding: 0 32px;30 display: flex; align-items: center; justify-content: space-between;31 font-size: 32px; opacity: 0.95;32 }33 .status-right { display: flex; align-items: center; gap: 22px; }34 .status-dot { width: 12px; height: 12px; background:#ccc; border-radius: 50%; opacity: .7; }35 .battery {36 display: flex; align-items: center; gap: 8px; font-size: 28px;37 }38 .battery-icon {39 width: 40px; height: 22px; border: 2px solid #fff; border-radius: 6px; position: relative;40 }41 .battery-icon::after {42 content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#fff; border-radius:2px;43 }44 .battery-fill { position:absolute; left:3px; top:3px; height:14px; width:28px; background:#fff; border-radius:3px; }45 46 /* App bar */47 .app-bar {48 position: absolute; top: 96px; left: 0; right: 0;49 height: 120px; padding: 0 24px;50 display: flex; align-items: center; border-bottom: 1px solid var(--line);51 }52 .back-btn { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; }53 .app-title { font-size: 52px; font-weight: 600; margin-left: 8px; }54 .actions { margin-left: auto; display:flex; gap: 18px; }55 .circle-action {56 width: 88px; height: 88px; background: #141414; border-radius: 50%;57 display:flex; align-items:center; justify-content:center; border: 1px solid #262626;58 }59 .circle-action svg { width: 44px; height: 44px; }60 61 /* Content area */62 .content { position: absolute; top: 216px; left: 0; right: 0; padding: 24px; }63 64 .qty-card {65 border: 1px solid var(--line); border-radius: 22px;66 padding: 28px; margin-bottom: 26px; display:flex; align-items:center; justify-content: space-between;67 }68 .qty-card .label { color: #bdbdbd; font-size: 36px; }69 .qty-card .value { font-size: 40px; font-weight: 600; color:#fff; margin-left: 8px; }70 .qty-card .right { display:flex; align-items:center; gap: 10px; }71 .dropdown { width: 20px; height: 20px; border-right: 3px solid #9e9e9e; border-bottom: 3px solid #9e9e9e; transform: rotate(45deg); margin-right: 8px; }72 73 .btn {74 height: 128px; border-radius: 64px; font-size: 44px; font-weight: 700;75 display:flex; align-items:center; justify-content:center; margin: 20px 8px;76 }77 .btn.primary { background: var(--blue); color: #0b0b0b; }78 .btn.outline {79 border: 3px solid var(--blue); color: var(--blue); background: transparent;80 }81 .btn.outline .heart { margin-right: 18px; }82 .btn.outline svg { width: 44px; height: 44px; }83 84 .trending {85 display:flex; align-items:center; gap: 26px;86 background: var(--banner); border-radius: 32px; padding: 24px 28px; margin: 32px 8px;87 }88 .bolt-wrap {89 width: 92px; height: 92px; border-radius:50%; background:#0d0d0d;90 border: 1px solid #2e2e2e; display:flex; align-items:center; justify-content:center;91 }92 .trending .text { font-size: 36px; line-height: 48px; }93 .trending .text strong { font-weight: 800; }94 95 .divider { height: 1px; background: var(--line); margin: 24px 8px 10px; }96 97 .section { padding: 22px 8px; }98 .section h2 {99 font-size: 52px; font-weight: 800; margin: 12px 0 24px;100 }101 .row {102 display:flex; align-items:center; justify-content:space-between; margin: 12px 0;103 }104 .row .label { color: var(--muted); font-size: 36px; }105 .row .value { font-size: 38px; }106 .row .value.pink { color: var(--pink); font-weight: 700; }107 .row .chev { width: 40px; height: 40px; margin-left: 12px; }108 .subtext { color: var(--muted); font-size: 34px; margin-top: 8px; }109 110 /* Bottom nav */111 .bottom-nav {112 position: absolute; left: 0; right: 0; bottom: 120px;113 height: 180px; background:#0f0f0f; border-top: 1px solid var(--line);114 display:flex; align-items:center; justify-content:space-around; padding: 0 24px;115 }116 .nav-item {117 width: 20%; display:flex; flex-direction:column; align-items:center; gap: 16px;118 color:#d7d7d7; font-size: 30px;119 }120 .nav-item svg { width: 54px; height: 54px; }121 .nav-item.active .badge {122 width: 92px; height: 92px; border-radius: 50%; background: #16233d; display:flex; align-items:center; justify-content:center; border: 2px solid var(--blue);123 }124 .nav-item.active span { color: #8fb7ff; }125 126 .gesture {127 position:absolute; bottom: 36px; left:50%; transform:translateX(-50%);128 width: 280px; height: 10px; background:#3f3f3f; border-radius: 8px;129 }130</style>131</head>132<body>133<div id="render-target">134 135 <!-- Status bar -->136 <div class="status-bar">137 <div>11:03</div>138 <div class="status-right">139 <div class="status-dot"></div>140 <div class="status-dot" style="width:22px;height:22px;border-radius:6px;"></div>141 <div class="status-dot"></div>142 <div class="status-dot"></div>143 <div class="battery">144 <div class="battery-icon"><div class="battery-fill"></div></div>145 <div>100%</div>146 </div>147 </div>148 </div>149 150 <!-- App bar -->151 <div class="app-bar">152 <div class="back-btn">153 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">154 <path d="M15 6 L9 12 L15 18"/>155 </svg>156 </div>157 <div class="app-title">Item</div>158 <div class="actions">159 <div class="circle-action">160 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">161 <circle cx="11" cy="11" r="7"></circle>162 <path d="M20 20 L16.5 16.5"></path>163 </svg>164 </div>165 <div class="circle-action">166 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">167 <path d="M3 6h18l-2 8H6L3 6z"></path>168 <circle cx="8" cy="19" r="2"></circle>169 <circle cx="17" cy="19" r="2"></circle>170 </svg>171 </div>172 <div class="circle-action">173 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">174 <circle cx="18" cy="5" r="3"></circle>175 <circle cx="6" cy="12" r="3"></circle>176 <circle cx="18" cy="19" r="3"></circle>177 <path d="M8.9 10.9 L15 7.5"></path>178 <path d="M9 13 L15 16.5"></path>179 </svg>180 </div>181 <div class="circle-action">182 <svg viewBox="0 0 24 24" fill="#fff">183 <circle cx="6" cy="12" r="2"></circle>184 <circle cx="12" cy="12" r="2"></circle>185 <circle cx="18" cy="12" r="2"></circle>186 </svg>187 </div>188 </div>189 </div>190 191 <div class="content">192 <!-- Quantity selector -->193 <div class="qty-card">194 <div style="display:flex; align-items:center;">195 <span class="label">Quantity:</span>196 <span class="value">1</span>197 </div>198 <div class="right">199 <div class="dropdown"></div>200 </div>201 </div>202 203 <!-- Buttons -->204 <div class="btn primary">Buy It Now</div>205 <div class="btn outline">Add to cart</div>206 <div class="btn outline">207 <svg class="heart" viewBox="0 0 24 24" fill="none" stroke="#78A7FF" stroke-width="2">208 <path d="M12 20s-7-4.4-7-9a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 4.6-7 9-7 9z"/>209 </svg>210 Add to watchlist211 </div>212 213 <!-- Trending banner -->214 <div class="trending">215 <div class="bolt-wrap">216 <svg viewBox="0 0 24 24" fill="#fff">217 <path d="M13 2L6 13h5l-1 9 8-12h-6l1-8z"></path>218 </svg>219 </div>220 <div class="text"><strong>This one's trending.</strong> 80 have already sold.</div>221 </div>222 223 <div class="divider"></div>224 225 <!-- About section -->226 <div class="section">227 <h2>About this item</h2>228 <div class="row">229 <div class="label">Condition</div>230 <div style="display:flex; align-items:center; gap:14px;">231 <div class="value">New with box</div>232 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">233 <path d="M8 4l8 8-8 8"/>234 </svg>235 </div>236 </div>237 <div class="row">238 <div class="label">Quantity</div>239 <div style="display:flex; align-items:center; gap:14px;">240 <div class="value pink">Almost gone</div>241 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">242 <path d="M8 4l8 8-8 8"/>243 </svg>244 </div>245 </div>246 <div class="subtext">80 sold</div>247 </div>248 249 <div class="divider"></div>250 251 <!-- Description preview -->252 <div class="section">253 <h2>Item description from the seller</h2>254 <div class="row">255 <div style="color:#e5e5e5; font-size:36px; line-height:48px;">256 American vintage-style beading adorns supple tan nubuck for a subtly bohemian, autumnal take on our...257 </div>258 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">259 <path d="M8 4l8 8-8 8"/>260 </svg>261 </div>262 </div>263 264 <div class="divider"></div>265 266 <!-- Shipping section -->267 <div class="section">268 <h2>Shipping, returns, and payments</h2>269 <div class="row">270 <div class="label">Location</div>271 <div style="display:flex; align-items:center; gap:16px;">272 <div class="value" style="max-width:600px; text-align:right;">273 Hanover, Pennsylvania, United States274 </div>275 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">276 <path d="M8 4l8 8-8 8"/>277 </svg>278 </div>279 </div>280 </div>281 </div>282 283 <!-- Bottom navigation -->284 <div class="bottom-nav">285 <div class="nav-item">286 <svg viewBox="0 0 24 24" fill="none" stroke="#d7d7d7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">287 <path d="M3 11l9-8 9 8v8H3z"></path>288 <path d="M9 21V12h6v9"></path>289 </svg>290 <span>Home</span>291 </div>292 <div class="nav-item">293 <svg viewBox="0 0 24 24" fill="none" stroke="#d7d7d7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">294 <circle cx="12" cy="7" r="4"></circle>295 <path d="M4 22c2-5 14-5 16 0"></path>296 </svg>297 <span>My eBay</span>298 </div>299 <div class="nav-item active">300 <div class="badge">301 <svg viewBox="0 0 24 24" fill="none" stroke="#8fb7ff" stroke-width="2">302 <circle cx="11" cy="11" r="7"></circle>303 <path d="M20 20 L16.5 16.5"></path>304 </svg>305 </div>306 <span>Search</span>307 </div>308 <div class="nav-item">309 <svg viewBox="0 0 24 24" fill="none" stroke="#d7d7d7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">310 <path d="M6 8a6 6 0 0 1 12 0v5l2 2H4l2-2V8"></path>311 </svg>312 <span>Inbox</span>313 </div>314 <div class="nav-item">315 <svg viewBox="0 0 24 24" fill="none" stroke="#d7d7d7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">316 <path d="M20 6l-4-4H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2z"></path>317 <circle cx="15" cy="9" r="2"></circle>318 </svg>319 <span>Selling</span>320 </div>321 </div>322 323 <div class="gesture"></div>324</div>325</body>326</html>