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; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #262626;15 color: #FFFFFF;16 }17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 height: 96px;22 width: 100%;23 background: #1f1f1f;24 color: #ddd;25 display: flex;26 align-items: center;27 padding: 0 36px;28 font-size: 32px;29 box-sizing: border-box;30 }31 .status-bar .right {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .appbar {38 position: absolute;39 top: 96px;40 left: 0;41 height: 120px;42 width: 100%;43 background: #2c2c2c;44 display: flex;45 align-items: center;46 padding: 0 32px;47 box-sizing: border-box;48 }49 .appbar .title {50 font-size: 44px;51 margin-left: 18px;52 color: #eaeaea;53 }54 .appbar .actions {55 margin-left: auto;56 display: flex;57 gap: 40px;58 }59 .content {60 position: absolute;61 top: 216px; /* 96 + 120 */62 left: 0;63 width: 100%;64 padding: 0 40px 40px;65 box-sizing: border-box;66 }67 .list-text {68 font-size: 34px;69 line-height: 52px;70 color: #e6e6e6;71 margin-top: 18px;72 }73 .divider {74 height: 2px;75 background: #515151;76 margin: 24px 0 18px;77 }78 .ad-label {79 text-align: center;80 color: #bdbdbd;81 font-size: 30px;82 margin: 10px 0 18px;83 }84 .ad-card {85 width: 1000px;86 height: 600px;87 margin: 0 auto;88 border-radius: 18px;89 background: linear-gradient(180deg,#a57b19 0%, #1b1b1b 45%, #0f0f0f 100%);90 position: relative;91 box-shadow: 0 10px 20px rgba(0,0,0,0.35);92 padding: 40px;93 box-sizing: border-box;94 }95 .ad-card .close {96 position: absolute;97 right: 18px;98 top: 18px;99 display: flex;100 gap: 10px;101 align-items: center;102 }103 .ad-card .logo {104 width: 170px;105 height: 170px;106 background: #E0E0E0;107 border: 1px solid #BDBDBD;108 display: flex;109 justify-content: center;110 align-items: center;111 color: #757575;112 border-radius: 28px;113 margin: 20px auto 20px;114 font-size: 28px;115 }116 .ad-card .app-name {117 text-align: center;118 font-size: 58px;119 color: #ffffff;120 margin-top: 6px;121 }122 .ad-card .installed {123 display: flex;124 justify-content: center;125 align-items: center;126 gap: 12px;127 margin-top: 10px;128 color: #cfcfcf;129 font-size: 34px;130 }131 .ad-card .cta {132 width: 560px;133 height: 90px;134 background: #2463f1;135 border-radius: 44px;136 margin: 40px auto 0;137 display: flex;138 align-items: center;139 justify-content: center;140 color: #ffffff;141 font-size: 44px;142 font-weight: 600;143 }144 145 .seller-section {146 margin-top: 32px;147 color: #eee;148 }149 .seller-header {150 display: flex;151 align-items: center;152 gap: 16px;153 font-size: 36px;154 }155 .badge {156 background: #444;157 color: #eaeaea;158 font-size: 30px;159 padding: 10px 18px;160 border-radius: 12px;161 margin-left: 16px;162 }163 .chevron {164 margin-left: auto;165 }166 .seller-title {167 font-size: 50px;168 margin-top: 26px;169 color: #f3f3f3;170 }171 .ratings {172 display: flex;173 align-items: center;174 gap: 10px;175 margin-top: 18px;176 }177 .ratings .link {178 color: #5da4ff;179 font-size: 34px;180 margin-left: 12px;181 }182 .subtext {183 font-size: 32px;184 color: #c9c9c9;185 margin-top: 14px;186 }187 .section-title {188 font-size: 42px;189 margin-top: 28px;190 color: #f0f0f0;191 }192 .info-row {193 display: flex;194 align-items: center;195 gap: 18px;196 margin-top: 18px;197 font-size: 36px;198 }199 .open {200 color: #5bb86a;201 font-weight: 600;202 }203 .dim {204 color: #c7c7c7;205 }206 .report-row {207 display: flex;208 align-items: center;209 gap: 18px;210 font-size: 36px;211 color: #eee;212 margin: 24px 0;213 }214 215 .actions-bar {216 position: absolute;217 left: 0;218 bottom: 150px;219 width: 100%;220 padding: 0 40px;221 box-sizing: border-box;222 display: flex;223 gap: 28px;224 }225 .btn {226 flex: 1;227 height: 110px;228 background: #efe17a;229 border-radius: 18px;230 color: #1c1c1c;231 display: flex;232 align-items: center;233 justify-content: center;234 gap: 16px;235 font-size: 42px;236 font-weight: 600;237 box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);238 }239 .bottom-labels {240 position: absolute;241 left: 40px;242 bottom: 90px;243 right: 40px;244 display: flex;245 justify-content: space-between;246 color: #e9e9e9;247 font-size: 34px;248 }249 .home-indicator {250 position: absolute;251 bottom: 24px;252 left: 50%;253 transform: translateX(-50%);254 width: 350px;255 height: 12px;256 background: rgba(255,255,255,0.9);257 border-radius: 6px;258 }259 /* Icon helpers */260 svg { display: block; }261</style>262</head>263<body>264<div id="render-target">265 266 <!-- Status bar -->267 <div class="status-bar">268 <div>3:44</div>269 <div class="right">270 <!-- simple status icons -->271 <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfcfcf"><circle cx="12" cy="12" r="10"/></svg>272 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2"><path d="M2 18l8-8 5 5 7-7"/></svg>273 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2"><rect x="4" y="7" width="16" height="10" rx="2"/><rect x="6" y="9" width="10" height="6" fill="#cfcfcf"/></svg>274 <div style="display:flex;align-items:center;gap:8px;">275 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2"><path d="M2 7h20v10H2z"/><rect x="16" y="9" width="4" height="6" fill="#cfcfcf"/></svg>276 <span>100%</span>277 </div>278 </div>279 </div>280 281 <!-- App bar -->282 <div class="appbar">283 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>284 <div class="title">4 from 528</div>285 <div class="actions">286 <!-- document icon -->287 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">288 <path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/>289 </svg>290 <!-- star icon -->291 <svg width="48" height="48" viewBox="0 0 24 24" fill="#eaeaea">292 <path d="M12 2l3.1 6.5 7 .9-5.2 4.9 1.5 7.1-6.4-3.6-6.4 3.6 1.5-7.1L1.9 9.4l7-.9z"/>293 </svg>294 <!-- share icon -->295 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">296 <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>297 <path d="M8.6 11l6.9-4.3M8.6 13l6.9 4.3"/>298 </svg>299 </div>300 </div>301 302 <!-- Main content -->303 <div class="content">304 <div class="list-text">305 USA Import mit reparierten Vorschaden<br>306 Inkl. 1 Jahr Gewährleistung<br>307 Inkl. 1 Jahr Premium Gebrauchtwagen Garantie<br>308 Inspektion / Service NEU<br>309 Komplett aufbereitetes Fahrzeug inkl. einer TÜV<br>310 Vollabnahme<br>311 Das Fahrzeug kann gerne jedem x beliebigen Gutachter...312 </div>313 314 <div class="divider"></div>315 316 <div class="ad-label">Advertisement</div>317 <div class="ad-card">318 <div class="close">319 <!-- info icon -->320 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8h.01M11 12h2v5h-2z"/></svg>321 <!-- close icon -->322 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2"><path d="M6 6l12 12M18 6l-12 12"/></svg>323 </div>324 <div class="logo">[IMG: Instagram Logo]</div>325 <div class="app-name">Instagram</div>326 <div class="installed">327 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>328 <span>Installed</span>329 </div>330 <div class="cta">Open</div>331 </div>332 333 <div class="divider" style="margin-top: 28px;"></div>334 335 <div class="seller-section">336 <div class="seller-header">337 <!-- person icon -->338 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">339 <circle cx="12" cy="7" r="4"/>340 <path d="M5 21c0-4 3-7 7-7s7 3 7 7"/>341 </svg>342 <span>Seller</span>343 <span class="badge">Dealer</span>344 <div class="chevron">345 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>346 </div>347 </div>348 349 <div class="seller-title">Autowelt Korshow</div>350 351 <div class="ratings">352 <!-- 5 stars -->353 <svg width="38" height="38" viewBox="0 0 24 24" fill="#ffd54f"><path d="M12 2l3.1 6.5 7 .9-5.2 4.9 1.5 7.1-6.4-3.6-6.4 3.6 1.5-7.1L1.9 9.4l7-.9z"/></svg>354 <svg width="38" height="38" viewBox="0 0 24 24" fill="#ffd54f"><path d="M12 2l3.1 6.5 7 .9-5.2 4.9 1.5 7.1-6.4-3.6-6.4 3.6 1.5-7.1L1.9 9.4l7-.9z"/></svg>355 <svg width="38" height="38" viewBox="0 0 24 24" fill="#ffd54f"><path d="M12 2l3.1 6.5 7 .9-5.2 4.9 1.5 7.1-6.4-3.6-6.4 3.6 1.5-7.1L1.9 9.4l7-.9z"/></svg>356 <svg width="38" height="38" viewBox="0 0 24 24" fill="#ffd54f"><path d="M12 2l3.1 6.5 7 .9-5.2 4.9 1.5 7.1-6.4-3.6-6.4 3.6 1.5-7.1L1.9 9.4l7-.9z"/></svg>357 <svg width="38" height="38" viewBox="0 0 24 24" fill="#ffd54f"><path d="M12 2l3.1 6.5 7 .9-5.2 4.9 1.5 7.1-6.4-3.6-6.4 3.6 1.5-7.1L1.9 9.4l7-.9z"/></svg>358 <div class="link">30 Ratings</div>359 </div>360 361 <div class="subtext">Customer of AutoScout24 since 2021</div>362 363 <div class="section-title">Autohaus</div>364 365 <div class="info-row">366 <!-- clock icon -->367 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">368 <circle cx="12" cy="12" r="9"/>369 <path d="M12 7v6l4 2"/>370 </svg>371 <span class="open">Open</span>372 <span class="dim">· Closes 18:00</span>373 </div>374 375 <div class="info-row">376 <!-- location icon -->377 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">378 <path d="M12 21s-7-7-7-11a7 7 0 0114 0c0 4-7 11-7 11z"/>379 <circle cx="12" cy="10" r="3"/>380 </svg>381 <span>Saerbeck, DE</span>382 </div>383 384 <div class="divider" style="margin: 26px 0;"></div>385 386 <div class="report-row">387 <!-- warning icon -->388 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">389 <path d="M12 3l10 18H2z"/><path d="M12 10v4M12 18h.01"/>390 </svg>391 <span>Report error</span>392 </div>393 </div>394 </div>395 396 <!-- Bottom actions -->397 <div class="actions-bar">398 <div class="btn">399 <!-- phone icon -->400 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#1c1c1c" stroke-width="2">401 <path d="M22 16.92V21a2 2 0 01-2.18 2 19.86 19.86 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.86 19.86 0 01-3.07-8.63A2 2 0 014 1h4.09a2 2 0 012 1.72c.12.9.33 1.77.62 2.61a2 2 0 01-.45 2.11L9 8a16 16 0 006 6l.56-.26a2 2 0 012.11-.45c.84.29 1.71.5 2.61.62A2 2 0 0122 16.92z"/>402 </svg>403 <span>Call</span>404 </div>405 <div class="btn">406 <!-- envelope icon -->407 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#1c1c1c" stroke-width="2">408 <rect x="3" y="5" width="18" height="14" rx="2"/>409 <path d="M3 7l9 6 9-6"/>410 </svg>411 <span>E-mail</span>412 </div>413 </div>414 415 <div class="bottom-labels">416 <div>Similar vehicles</div>417 <div>More</div>418 </div>419 420 <div class="home-indicator"></div>421</div>422</body>423</html>