GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Tesla Listing UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 box-shadow: 0 8px 24px rgba(0,0,0,0.12);14 border-radius: 24px;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 84px;24 padding: 0 24px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #2c2c2c;29 font-size: 30px;30 }31 .status-right {32 display: flex;33 gap: 22px;34 align-items: center;35 }36 .icon {37 width: 34px;38 height: 34px;39 }40 41 /* Top overlay navigation (inside image area) */42 .top-overlay {43 position: absolute;44 top: 92px;45 left: 0;46 width: 1080px;47 height: 72px;48 display: flex;49 align-items: center;50 padding: 0 24px;51 color: #000;52 z-index: 3;53 }54 .overlay-center {55 position: absolute;56 left: 50%;57 transform: translateX(-50%);58 font-size: 36px;59 color: #1a1a1a;60 font-weight: 600;61 }62 .overlay-right {63 margin-left: auto;64 display: flex;65 gap: 24px;66 align-items: center;67 }68 .overlay-btn {69 width: 60px;70 height: 60px;71 background: rgba(255,255,255,0.92);72 border-radius: 14px;73 display: flex;74 align-items: center;75 justify-content: center;76 box-shadow: 0 2px 6px rgba(0,0,0,0.12);77 border: 1px solid #e5e5e5;78 }79 80 /* Image area */81 .gallery {82 position: absolute;83 top: 132px;84 left: 0;85 width: 1080px;86 height: 720px;87 background: #E0E0E0;88 border-top: 1px solid #BDBDBD;89 border-bottom: 1px solid #BDBDBD;90 display: flex;91 align-items: center;92 justify-content: center;93 color: #595959;94 font-size: 30px;95 letter-spacing: 0.2px;96 }97 .dealer-banner {98 position: absolute;99 bottom: 0;100 left: 0;101 width: 1080px;102 height: 160px;103 background: #ffffff;104 border-top: 1px solid #e6e6e6;105 display: flex;106 align-items: center;107 justify-content: center;108 font-weight: 800;109 color: #000000;110 font-size: 48px;111 }112 .img-counter {113 position: absolute;114 right: 24px;115 bottom: 180px;116 background: rgba(0,0,0,0.65);117 color: #fff;118 padding: 10px 18px;119 border-radius: 14px;120 display: flex;121 align-items: center;122 gap: 10px;123 font-size: 28px;124 }125 126 /* Content area */127 .content {128 position: absolute;129 top: 900px;130 left: 0;131 width: 100%;132 padding: 0 36px;133 }134 .title {135 font-size: 54px;136 font-weight: 800;137 color: #111;138 margin-bottom: 18px;139 }140 .subtitle {141 font-size: 42px;142 color: #2c2c2c;143 margin-bottom: 8px;144 font-weight: 700;145 }146 .subtitle2 {147 font-size: 40px;148 color: #2c2c2c;149 margin-bottom: 22px;150 }151 .features {152 font-size: 32px;153 color: #444;154 line-height: 1.55;155 margin-bottom: 24px;156 }157 .location {158 display: flex;159 align-items: center;160 gap: 12px;161 font-size: 36px;162 color: #1e73be;163 margin: 14px 0 26px 0;164 }165 .divider {166 width: 100%;167 height: 2px;168 background: #efefef;169 margin: 18px 0 28px 0;170 }171 .price {172 font-size: 64px;173 font-weight: 900;174 color: #000;175 margin: 16px 0 26px 0;176 }177 178 /* Spec grid */179 .spec-grid {180 display: grid;181 grid-template-columns: 1fr 1fr;182 gap: 28px 28px;183 margin-top: 8px;184 }185 .spec-card {186 border: 1px solid #ececec;187 border-radius: 16px;188 padding: 22px;189 display: flex;190 align-items: center;191 gap: 18px;192 background: #fafafa;193 }194 .spec-label {195 font-size: 28px;196 color: #6a6a6a;197 }198 .spec-value {199 font-size: 36px;200 color: #111;201 font-weight: 700;202 margin-top: 4px;203 }204 .spec-texts {205 display: flex;206 flex-direction: column;207 }208 .ad-title {209 text-align: center;210 font-size: 32px;211 color: #666;212 margin: 36px 0 16px;213 }214 215 /* Buttons */216 .actions {217 display: flex;218 gap: 28px;219 padding: 0 36px;220 }221 .btn {222 flex: 1;223 height: 140px;224 background: #f6e451;225 border-radius: 24px;226 display: flex;227 align-items: center;228 justify-content: center;229 gap: 18px;230 font-size: 42px;231 font-weight: 800;232 color: #2d2d2d;233 border: 1px solid #e1d775;234 box-shadow: 0 4px 10px rgba(0,0,0,0.08);235 }236 237 /* Simple icon styles */238 .svg-24 { width: 24px; height: 24px; }239 .svg-28 { width: 28px; height: 28px; }240 .svg-32 { width: 32px; height: 32px; }241 .svg-40 { width: 40px; height: 40px; }242 243</style>244</head>245<body>246<div id="render-target">247 248 <!-- Status bar -->249 <div class="status-bar">250 <div>5:17</div>251 <div class="status-right">252 <!-- simple circle icon -->253 <svg class="icon" viewBox="0 0 24 24">254 <circle cx="12" cy="12" r="10" fill="#9e9e9e"></circle>255 <circle cx="12" cy="12" r="4" fill="#ffffff"></circle>256 </svg>257 <!-- small signal icon -->258 <svg class="icon" viewBox="0 0 24 24">259 <rect x="2" y="16" width="3" height="6" fill="#9e9e9e"></rect>260 <rect x="7" y="12" width="3" height="10" fill="#9e9e9e"></rect>261 <rect x="12" y="8" width="3" height="14" fill="#9e9e9e"></rect>262 <rect x="17" y="4" width="3" height="18" fill="#9e9e9e"></rect>263 </svg>264 </div>265 </div>266 267 <!-- Overlay navigation -->268 <div class="top-overlay">269 <!-- back arrow box -->270 <div class="overlay-btn">271 <svg class="svg-32" viewBox="0 0 24 24">272 <path d="M15 18L9 12l6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>273 </svg>274 </div>275 <div class="overlay-center">1 from 826</div>276 <div class="overlay-right">277 <div class="overlay-btn">278 <!-- document icon -->279 <svg class="svg-32" viewBox="0 0 24 24">280 <rect x="5" y="3" width="12" height="18" rx="2" fill="#222"></rect>281 <line x1="8" y1="8" x2="16" y2="8" stroke="#fff" stroke-width="2"/>282 <line x1="8" y1="12" x2="16" y2="12" stroke="#fff" stroke-width="2"/>283 </svg>284 </div>285 <div class="overlay-btn">286 <!-- star -->287 <svg class="svg-32" viewBox="0 0 24 24">288 <path d="M12 3l3 6 6 .9-4.5 4.3 1.1 6.5L12 18l-5.6 2.7 1.1-6.5L3 9.9 9 9l3-6z" fill="#111"/>289 </svg>290 </div>291 <div class="overlay-btn">292 <!-- share -->293 <svg class="svg-32" viewBox="0 0 24 24">294 <circle cx="5" cy="12" r="3" fill="#111"></circle>295 <circle cx="19" cy="5" r="3" fill="#111"></circle>296 <circle cx="19" cy="19" r="3" fill="#111"></circle>297 <path d="M7.5 11l8-4M7.5 13l8 4" stroke="#111" stroke-width="2" fill="none"/>298 </svg>299 </div>300 </div>301 </div>302 303 <!-- Image area -->304 <div class="gallery">305 [IMG: Tesla Model X in showroom]306 <div class="dealer-banner">REFFGEN & SCHMUCK AUTO_LIEBE</div>307 <div class="img-counter">308 <svg class="svg-28" viewBox="0 0 24 24">309 <rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="#fff"></rect>310 <circle cx="12" cy="12" r="3.5" fill="#000"></circle>311 </svg>312 <span>1/38</span>313 </div>314 </div>315 316 <!-- Content -->317 <div class="content">318 <div class="title">Tesla Model X</div>319 <div class="subtitle">X PERFORMANCE DUAL</div>320 <div class="subtitle2">7SITZ+LEDER+PANO+ALUR22</div>321 322 <div class="features">323 Blind spot monitor, Trailer hitch, 4WD, Induction charging for smartphones, Heated steering wheel,324 Electrically adjustable seats, Spoiler, Integrated music streaming325 </div>326 327 <div class="location">328 <svg class="svg-32" viewBox="0 0 24 24">329 <path d="M12 2c-4.4 0-8 3.4-8 7.6 0 5.2 8 12.4 8 12.4s8-7.2 8-12.4C20 5.4 16.4 2 12 2z" fill="#1e73be"></path>330 <circle cx="12" cy="9" r="3.2" fill="#fff"></circle>331 </svg>332 <span>Mannheim, DE</span>333 </div>334 335 <div class="price">€ 47,444.-</div>336 <div class="divider"></div>337 338 <div class="spec-grid">339 <div class="spec-card">340 <svg class="svg-40" viewBox="0 0 24 24">341 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"></circle>342 <path d="M12 12l4-3" stroke="#777" stroke-width="2" stroke-linecap="round"/>343 </svg>344 <div class="spec-texts">345 <div class="spec-label">Mileage</div>346 <div class="spec-value">81,800 km</div>347 </div>348 </div>349 350 <div class="spec-card">351 <svg class="svg-40" viewBox="0 0 24 24">352 <path d="M4 10h16v4H4z" fill="#777"></path>353 <circle cx="8" cy="16" r="3" fill="#999"></circle>354 <circle cx="16" cy="16" r="3" fill="#999"></circle>355 </svg>356 <div class="spec-texts">357 <div class="spec-label">Transmission</div>358 <div class="spec-value">Automatic</div>359 </div>360 </div>361 362 <div class="spec-card">363 <svg class="svg-40" viewBox="0 0 24 24">364 <rect x="5" y="3" width="14" height="18" rx="2" fill="#777"></rect>365 <line x1="8" y1="8" x2="16" y2="8" stroke="#fff" stroke-width="2"/>366 </svg>367 <div class="spec-texts">368 <div class="spec-label">First registration</div>369 <div class="spec-value">04/2017</div>370 </div>371 </div>372 373 <div class="spec-card">374 <svg class="svg-40" viewBox="0 0 24 24">375 <rect x="7" y="3" width="10" height="18" rx="2" fill="#777"></rect>376 <path d="M2 12h6" stroke="#777" stroke-width="2"></path>377 <polygon points="6,10 10,12 6,14" fill="#777"></polygon>378 </svg>379 <div class="spec-texts">380 <div class="spec-label">Fuel type</div>381 <div class="spec-value">Electric</div>382 </div>383 </div>384 385 <div class="spec-card">386 <svg class="svg-40" viewBox="0 0 24 24">387 <path d="M12 2l4 8h-8l4-8zM10 13h4v9h-4z" fill="#777"></path>388 </svg>389 <div class="spec-texts">390 <div class="spec-label">Power</div>391 <div class="spec-value">772 hp (568 kW)</div>392 </div>393 </div>394 395 <div class="spec-card">396 <svg class="svg-40" viewBox="0 0 24 24">397 <circle cx="12" cy="7" r="4" fill="#777"></circle>398 <rect x="5" y="12" width="14" height="8" rx="4" fill="#999"></rect>399 </svg>400 <div class="spec-texts">401 <div class="spec-label">Seller</div>402 <div class="spec-value">Dealer</div>403 </div>404 </div>405 </div>406 407 <div class="ad-title">Advertisement</div>408 <div class="actions">409 <div class="btn">410 <svg class="svg-40" viewBox="0 0 24 24">411 <path d="M6 2h4l2 6-3 2c1.5 3 3.5 5 6 6l2-3 6 2v4c-8 2-16-6-17-17z" fill="#333"></path>412 </svg>413 <span>Call</span>414 </div>415 <div class="btn">416 <svg class="svg-40" viewBox="0 0 24 24">417 <rect x="3" y="5" width="18" height="14" rx="2" fill="#333"></rect>418 <path d="M3 8l9 6 9-6" stroke="#fff" stroke-width="2" fill="none"></path>419 </svg>420 <span>E-mail</span>421 </div>422 </div>423 </div>424 425</div>426</body>427</html>