GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Listing UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #151515;14 color: #fff;15 }16 17 /* Status bar */18 .statusbar {19 height: 96px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #eaeaea;25 font-weight: 600;26 font-size: 36px;27 letter-spacing: 0.5px;28 background: #1b1b1b;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 28px;34 }35 .dot {36 width: 16px; height: 16px; border-radius: 50%; background: #eaeaea; opacity: .9;37 }38 .battery {39 width: 54px; height: 26px; border: 3px solid #eaeaea; border-radius: 6px; position: relative;40 }41 .battery::before {42 content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 10px; background: #eaeaea; border-radius: 2px;43 }44 .battery::after {45 content: ""; position: absolute; left: 3px; top: 3px; width: 36px; height: 18px; background: #eaeaea;46 }47 48 /* Hero image */49 .hero {50 position: relative;51 width: 1080px;52 height: 740px;53 background: linear-gradient(0deg, #0f0f0f 0%, #0f0f0f 20%, #111 100%);54 display: flex;55 align-items: center;56 justify-content: center;57 }58 .img-placeholder {59 width: 1002px;60 height: 640px;61 background: #E0E0E0;62 border: 1px solid #BDBDBD;63 color: #555;64 display: flex;65 align-items: center;66 justify-content: center;67 font-size: 34px;68 border-radius: 10px;69 }70 .overlay-icon {71 position: absolute;72 width: 68px; height: 68px;73 background: rgba(0,0,0,0.45);74 border-radius: 50%;75 display: flex; align-items: center; justify-content: center;76 }77 .overlay-back { left: 24px; top: 110px; }78 .overlay-doc { right: 240px; top: 110px; }79 .overlay-star { right: 140px; top: 110px; }80 .overlay-share { right: 40px; top: 110px; }81 .count {82 position: absolute;83 left: 130px;84 top: 122px;85 color: #fff;86 font-size: 40px;87 font-weight: 600;88 text-shadow: 0 1px 2px rgba(0,0,0,.6);89 }90 .thumb-counter {91 position: absolute;92 right: 24px;93 bottom: 24px;94 background: rgba(0,0,0,0.55);95 color: #fff;96 padding: 12px 18px;97 border-radius: 12px;98 font-size: 34px;99 display: flex; align-items: center; gap: 14px;100 }101 .thumb-icon {102 width: 30px; height: 24px; border: 2px solid #fff; border-radius: 4px; position: relative;103 }104 .thumb-icon::after {105 content: ""; position: absolute; right: -6px; top: 7px; width: 10px; height: 10px; border: 2px solid #fff; border-left: none; border-radius: 0 4px 4px 0;106 }107 108 /* Content area */109 .content {110 background: #1c1c1c;111 padding: 36px 36px 240px;112 }113 .title {114 font-size: 64px;115 font-weight: 800;116 margin: 18px 0 12px;117 }118 .subtitle {119 color: #cfcfcf;120 font-size: 38px;121 line-height: 1.3;122 margin-bottom: 28px;123 }124 .location {125 display: flex; align-items: center; gap: 14px;126 color: #9fd3ff;127 font-size: 36px;128 margin-bottom: 44px;129 }130 .price {131 font-size: 70px;132 font-weight: 800;133 margin: 12px 0 28px;134 }135 136 .spec-grid {137 display: grid;138 grid-template-columns: 1fr 1fr;139 gap: 26px 40px;140 margin-top: 24px;141 margin-bottom: 32px;142 }143 .spec-item {144 border-top: 1px solid #2a2a2a;145 padding-top: 30px;146 display: grid;147 grid-template-columns: 68px 1fr;148 align-items: start;149 column-gap: 22px;150 }151 .spec-item h4 {152 font-size: 30px; color: #cfcfcf; margin: 0 0 6px;153 }154 .spec-item p {155 font-size: 34px; color: #ffffff; margin: 0;156 }157 .icon-box {158 width: 60px; height: 60px; border-radius: 12px;159 background: #2a2a2a; display: flex; align-items: center; justify-content: center;160 }161 162 .ad {163 margin: 22px -36px 18px;164 padding: 26px 0;165 text-align: center;166 color: #bdbdbd;167 border-top: 1px solid #2a2a2a;168 border-bottom: 1px solid #2a2a2a;169 font-size: 34px;170 }171 172 .tradein {173 margin-top: 26px;174 background: #232323;175 border: 1px solid #2e2e2e;176 border-radius: 18px;177 padding: 28px;178 }179 .tradein-title {180 display: flex; align-items: center; gap: 18px;181 font-weight: 700; font-size: 38px; margin: 0 0 12px;182 }183 .tradein p { margin: 0; color: #dcdcdc; font-size: 34px; }184 185 /* Bottom action bar */186 .bottom-actions {187 position: absolute;188 left: 0; right: 0; bottom: 20px;189 padding: 0 24px;190 }191 .action-row {192 display: grid;193 grid-template-columns: 1fr 1.1fr 1fr;194 gap: 20px;195 }196 .btn {197 height: 120px;198 border-radius: 18px;199 font-size: 40px;200 font-weight: 700;201 border: none;202 display: flex; align-items: center; justify-content: center; gap: 22px;203 }204 .btn-yellow { background: #efe37a; color: #1b1b1b; }205 .btn-gray { background: #3a3a3a; color: #d7d7d7; }206 207 /* Small helpers */208 .pin {209 width: 28px; height: 28px; border-radius: 50%; border: 3px solid #9fd3ff; position: relative;210 }211 .pin::after {212 content:""; position:absolute; left: 9px; bottom:-10px; width:10px; height:16px; background:#9fd3ff; clip-path: polygon(50% 0, 0 100%, 100% 100%);213 }214 .small-muted { color: #bdbdbd; font-size: 32px; }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Status bar -->221 <div class="statusbar">222 <div>11:53</div>223 <div class="status-icons">224 <div class="dot"></div>225 <div class="dot" style="opacity:.7;"></div>226 <div class="dot" style="opacity:.5;"></div>227 <div class="dot" style="opacity:.8;"></div>228 <div class="battery"></div>229 </div>230 </div>231 232 <!-- Hero image section -->233 <div class="hero">234 <div class="img-placeholder">[IMG: Toyota Camry in showroom]</div>235 236 <div class="overlay-icon overlay-back" aria-label="Back">237 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">238 <path d="M14.5 5L7.5 12l7 7" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>239 </svg>240 </div>241 <div class="count">2 from 13</div>242 243 <div class="overlay-icon overlay-doc" aria-label="Document">244 <svg width="32" height="32" viewBox="0 0 24 24" fill="none">245 <path d="M7 4h7l4 4v12H7z" stroke="#fff" stroke-width="2"/>246 <path d="M14 4v4h4" stroke="#fff" stroke-width="2"/>247 </svg>248 </div>249 <div class="overlay-icon overlay-star" aria-label="Favorite">250 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff">251 <path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.7l6-0.5L12 4l3 5.2 6 .5-5.2 4.8 1.4 5.9z"/>252 </svg>253 </div>254 <div class="overlay-icon overlay-share" aria-label="Share">255 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">256 <path d="M16 7a3 3 0 100-6 3 3 0 000 6zM6 14a3 3 0 100-6 3 3 0 000 6zm10 9a3 3 0 100-6 3 3 0 000 6z" fill="#fff"/>257 <path d="M8 10l6-4M8 12l6 4" stroke="#1b1b1b" stroke-width="2"/>258 </svg>259 </div>260 261 <div class="thumb-counter">262 <div class="thumb-icon"></div>263 <div>1/28</div>264 </div>265 </div>266 267 <!-- Content -->268 <div class="content">269 <div class="title">Toyota Camry</div>270 <div class="subtitle">2.5 Hybrid Keyless+Navi+Kamera+LED+Leder</div>271 272 <div class="location">273 <div class="pin"></div>274 <div>Stollberg, DE</div>275 </div>276 277 <div class="price">€ 38,950.-</div>278 279 <div class="spec-grid">280 <!-- Mileage -->281 <div class="spec-item">282 <div class="icon-box">283 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">284 <path d="M3 16h18M8 12h8M5 20h14" stroke="#bfbfbf" stroke-width="2" stroke-linecap="round"/>285 </svg>286 </div>287 <div>288 <h4>Mileage</h4>289 <p>20 km</p>290 </div>291 </div>292 293 <!-- Transmission -->294 <div class="spec-item">295 <div class="icon-box">296 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">297 <circle cx="12" cy="12" r="6" stroke="#bfbfbf" stroke-width="2"/>298 <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#bfbfbf" stroke-width="2" stroke-linecap="round"/>299 </svg>300 </div>301 <div>302 <h4>Transmission</h4>303 <p>Automatic</p>304 </div>305 </div>306 307 <!-- First registration -->308 <div class="spec-item">309 <div class="icon-box">310 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">311 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#bfbfbf" stroke-width="2"/>312 <path d="M3 9h18" stroke="#bfbfbf" stroke-width="2"/>313 </svg>314 </div>315 <div>316 <h4>First registration</h4>317 <p>11/2023</p>318 </div>319 </div>320 321 <!-- Fuel type -->322 <div class="spec-item">323 <div class="icon-box">324 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">325 <rect x="4" y="3" width="8" height="14" rx="2" stroke="#bfbfbf" stroke-width="2"/>326 <path d="M18 7v8a3 3 0 01-3 3h-3" stroke="#bfbfbf" stroke-width="2"/>327 <path d="M16 4l3 3" stroke="#38e4a3" stroke-width="2"/>328 <path d="M9 7l-2 4h3l-2 4" stroke="#38e4a3" stroke-width="2"/>329 </svg>330 </div>331 <div>332 <h4>Fuel type</h4>333 <p>Electric/Gasoline</p>334 </div>335 </div>336 337 <!-- Power -->338 <div class="spec-item">339 <div class="icon-box">340 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">341 <path d="M4 14a8 8 0 0116 0" stroke="#bfbfbf" stroke-width="2"/>342 <path d="M12 10v6" stroke="#bfbfbf" stroke-width="2" stroke-linecap="round"/>343 </svg>344 </div>345 <div>346 <h4>Power</h4>347 <p>178 hp (131 kW)</p>348 </div>349 </div>350 351 <!-- Seller -->352 <div class="spec-item">353 <div class="icon-box">354 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">355 <circle cx="12" cy="7" r="4" stroke="#bfbfbf" stroke-width="2"/>356 <path d="M4 20a8 8 0 0116 0" stroke="#bfbfbf" stroke-width="2"/>357 </svg>358 </div>359 <div>360 <h4>Seller</h4>361 <p>Dealer</p>362 </div>363 </div>364 </div>365 366 <div class="ad">Advertisement</div>367 368 <div class="tradein">369 <div class="tradein-title">370 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">371 <rect x="2" y="10" width="20" height="7" rx="2" stroke="#dcdcdc" stroke-width="2"/>372 <circle cx="7" cy="18" r="2" fill="#dcdcdc"/>373 <circle cx="17" cy="18" r="2" fill="#dcdcdc"/>374 </svg>375 <span>Trade-In</span>376 </div>377 <p>Buy and sell conveniently in just one step!</p>378 </div>379 </div>380 381 <!-- Bottom call/email buttons -->382 <div class="bottom-actions">383 <div class="action-row">384 <button class="btn btn-yellow">385 <svg width="38" height="38" viewBox="0 0 24 24" fill="none">386 <path d="M6 2l3 3-2 3c1.5 3 4 5.5 7 7l3-2 3 3-2 3c-6 1-14-7-13-13L6 2z" fill="#1b1b1b"/>387 </svg>388 <span>Call</span>389 </button>390 <button class="btn btn-gray">Add vehicle data</button>391 <button class="btn btn-yellow">392 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">393 <rect x="3" y="5" width="18" height="14" rx="2" stroke="#1b1b1b" stroke-width="2" fill="#1b1b1b"/>394 <path d="M4 6l8 6 8-6" stroke="#efe37a" stroke-width="2"/>395 </svg>396 <span>E-mail</span>397 </button>398 </div>399 </div>400 401</div>402</body>403</html>