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>Car Detail UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #EDEDED;15 }16 17 /* Top status bar */18 .status-bar {19 height: 72px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: flex-end;24 color: #fff;25 font-size: 28px;26 opacity: 0.9;27 }28 29 /* App bar */30 .app-bar {31 height: 120px;32 padding: 0 32px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 }37 .app-left, .app-right { display: flex; align-items: center; gap: 28px; }38 .title { font-size: 44px; font-weight: 600; }39 40 /* Icons */41 .icon {42 width: 56px;43 height: 56px;44 display: inline-flex;45 align-items: center;46 justify-content: center;47 border-radius: 10px;48 color: #EDEDED;49 }50 51 /* two-column spec rows */52 .content { padding: 0 36px; }53 .row-pair {54 display: grid;55 grid-template-columns: 1fr auto;56 padding: 24px 0;57 border-bottom: 1px solid #2A2A2A;58 font-size: 38px;59 }60 .label { color: #C7C7C7; }61 .value { color: #FFFFFF; font-weight: 600; }62 63 /* Section headers with icons */64 .section {65 border-top: 1px solid #2A2A2A;66 padding-top: 24px;67 margin-top: 24px;68 }69 .section-header {70 display: flex;71 align-items: center;72 justify-content: space-between;73 padding: 22px 0;74 }75 .header-left {76 display: flex;77 align-items: center;78 gap: 22px;79 }80 .section-title {81 font-size: 42px;82 font-weight: 700;83 }84 .chevron {85 width: 42px;86 height: 42px;87 opacity: 0.8;88 }89 90 /* Notes box */91 .notes-box {92 background: #1F1F1F;93 padding: 28px;94 border-radius: 16px;95 border: 1px solid #2A2A2A;96 color: #CFCFCF;97 font-size: 36px;98 line-height: 1.35;99 margin-bottom: 22px;100 }101 102 /* Energy grid */103 .grid {104 margin-top: 8px;105 border-top: 1px solid #2A2A2A;106 }107 .grid .row {108 display: grid;109 grid-template-columns: 1fr auto;110 padding: 26px 0;111 border-bottom: 1px solid #2A2A2A;112 font-size: 38px;113 }114 .grid .row .left { color: #C7C7C7; }115 .grid .row .right { font-weight: 600; }116 117 /* List items for expandable sections */118 .list-item {119 display: flex;120 align-items: center;121 justify-content: space-between;122 padding: 30px 0;123 border-bottom: 1px solid #2A2A2A;124 font-size: 42px;125 }126 .list-left {127 display: flex;128 align-items: center;129 gap: 24px;130 }131 132 /* Bottom action buttons */133 .bottom-actions {134 position: absolute;135 bottom: 28px;136 left: 36px;137 right: 36px;138 display: flex;139 gap: 32px;140 }141 .btn {142 flex: 1;143 background: #E6E086;144 color: #0D0D0D;145 font-weight: 700;146 font-size: 42px;147 border-radius: 18px;148 padding: 26px 22px;149 display: flex;150 align-items: center;151 justify-content: center;152 gap: 18px;153 box-shadow: 0 2px 0 rgba(0,0,0,0.35) inset;154 }155 .faded-note {156 color: #A5A5A5;157 font-size: 34px;158 margin-top: 8px;159 }160 161 /* Small helper */162 .spacer-16 { height: 16px; }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Status bar mock -->169 <div class="status-bar">170 <!-- right-side simple status shapes -->171 <span style="margin-right:auto; font-weight:600;">11:54</span>172 <span style="margin-right:12px;">◦</span>173 <span style="margin-right:12px;">◦</span>174 <span style="margin-right:12px;">◦</span>175 <span style="margin-right:20px;">◦</span>176 <span style="font-size:26px;">📶</span>177 <span style="margin-left:10px;">🔋</span>178 </div>179 180 <!-- App bar -->181 <div class="app-bar">182 <div class="app-left">183 <div class="icon" aria-label="Back">184 <svg viewBox="0 0 24 24" width="46" height="46" fill="#FFFFFF">185 <path d="M15.5 3.5 7 12l8.5 8.5-1.8 1.8L3.5 12l10.2-10.3 1.8 1.8z"/>186 </svg>187 </div>188 <div class="title">2 from 13</div>189 </div>190 <div class="app-right">191 <div class="icon" title="Document">192 <svg viewBox="0 0 24 24" width="40" height="40" fill="#FFFFFF">193 <path d="M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V9h5.5L14 3.5z"/>194 </svg>195 </div>196 <div class="icon" title="Star">197 <svg viewBox="0 0 24 24" width="42" height="42" fill="#FFFFFF">198 <path d="M12 17.3 5.8 21l1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/>199 </svg>200 </div>201 <div class="icon" title="Share">202 <svg viewBox="0 0 24 24" width="42" height="42" fill="#FFFFFF">203 <path d="M18 16.1c-1 0-1.9.4-2.5 1l-6.1-3.2c.1-.3.1-.6.1-.9s0-.6-.1-.9l6.1-3.2c.6.6 1.5 1 2.5 1 2 0 3.6-1.6 3.6-3.6S20 2.7 18 2.7s-3.6 1.6-3.6 3.6c0 .3 0 .6.1.9L8.4 10C7.8 9.4 6.9 9 5.9 9 3.9 9 2.3 10.6 2.3 12.6s1.6 3.6 3.6 3.6c1 0 1.9-.4 2.5-1l6.1 3.2c-.1.3-.1.6-.1.9 0 2 1.6 3.6 3.6 3.6s3.6-1.6 3.6-3.6-1.6-3.6-3.6-3.6z"/>204 </svg>205 </div>206 </div>207 </div>208 209 <div class="content">210 <!-- Three summary rows -->211 <div class="row-pair">212 <div class="label">Full Service History</div>213 <div class="value">Yes</div>214 </div>215 <div class="row-pair">216 <div class="label">Non Smoker Car</div>217 <div class="value">Yes</div>218 </div>219 <div class="row-pair">220 <div class="label">HU/AU new</div>221 <div class="value">Yes</div>222 </div>223 224 <!-- Notes -->225 <div class="section">226 <div class="section-header">227 <div class="header-left">228 <svg width="46" height="46" viewBox="0 0 24 24" fill="#EDEDED">229 <path d="M4 4h16v2H4zm0 5h16v2H4zm0 5h10v2H4z"/>230 </svg>231 <div class="section-title">My Notes</div>232 </div>233 </div>234 <div class="notes-box">235 start adding your notes to this vehicle. they will be only visible to you.236 </div>237 </div>238 239 <!-- Technical Data link -->240 <div class="section">241 <div class="section-header">242 <div class="header-left">243 <svg width="46" height="46" viewBox="0 0 24 24" fill="#EDEDED">244 <path d="M22 12.7v-1.4l-2.2-.5a6 6 0 0 0-.6-1.5l1.3-1.9-1-1-1.9 1.3c-.5-.3-1-.5-1.5-.6L15.7 3h-1.4l-.5 2.2c-.5.1-1 .3-1.5.6L9.4 4.5l-1 1 1.3 1.9c-.3.5-.5 1-.6 1.5L6 9.3v1.4l2.2.5c.1.5.3 1 .6 1.5L7.5 14.6l1 1 1.9-1.3c.5.3 1 .5 1.5.6l.5 2.1h1.4l.5-2.2c.5-.1 1-.3 1.5-.6l1.9 1.3 1-1-1.3-1.9c.3-.5.5-1 .6-1.5L22 12.7zM12 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>245 </svg>246 <div class="section-title">Technical Data</div>247 </div>248 <svg class="chevron" viewBox="0 0 24 24" fill="#EDEDED">249 <path d="m9 6 6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/>250 </svg>251 </div>252 </div>253 254 <!-- Energy Consumption section -->255 <div class="section">256 <div class="section-header">257 <div class="header-left">258 <svg width="46" height="46" viewBox="0 0 24 24" fill="#EDEDED">259 <path d="M13 2 3 14h6l-2 8 10-12h-6z"/>260 </svg>261 <div class="section-title">Energy Consumption</div>262 </div>263 </div>264 <div class="grid">265 <div class="row">266 <div class="left">Fuel type</div>267 <div class="right">Regular/Benzine 91</div>268 </div>269 <div class="row">270 <div class="left">Other energy sources</div>271 <div class="right">Electricity</div>272 </div>273 <div class="row">274 <div class="left">Fuel consump. WLTP</div>275 <div class="right">5.5 l/100 km (comb.)</div>276 </div>277 <div class="row">278 <div class="left">CO₂-emissions WLTP</div>279 <div class="right">125 g/km (comb.)</div>280 </div>281 <div class="row">282 <div class="left">Emission class</div>283 <div class="right">Euro 6d-TEMP</div>284 </div>285 <div class="row">286 <div class="left">Emission sticker</div>287 <div class="right">4 (Green)</div>288 </div>289 </div>290 </div>291 292 <!-- Additional expandable list items -->293 <div class="section">294 <div class="list-item">295 <div class="list-left">296 <svg width="46" height="46" viewBox="0 0 24 24" fill="#EDEDED">297 <path d="M7 20h10v-2H7v2zM4 6h16v2H4V6zm2 6h12v2H6v-2z"/>298 </svg>299 <div>Equipment</div>300 </div>301 <svg class="chevron" viewBox="0 0 24 24" fill="#EDEDED">302 <path d="m9 6 6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/>303 </svg>304 </div>305 306 <div class="list-item">307 <div class="list-left">308 <svg width="46" height="46" viewBox="0 0 24 24" fill="#EDEDED">309 <path d="M12 2l4 6H8l4-6zm0 20l-4-6h8l-4 6zM2 12l6-4v8l-6-4zm20 0l-6 4V8l6 4z"/>310 </svg>311 <div>Color and Upholstery</div>312 </div>313 <svg class="chevron" viewBox="0 0 24 24" fill="#EDEDED">314 <path d="m9 6 6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/>315 </svg>316 </div>317 318 <div class="list-item" style="border-bottom:none;">319 <div class="list-left">320 <svg width="46" height="46" viewBox="0 0 24 24" fill="#EDEDED">321 <path d="M4 4h16v14H5.5L4 19.5V4zm2 3v2h12V7H6zm0 4v2h12v-2H6z"/>322 </svg>323 <div>Vehicle description</div>324 </div>325 <svg class="chevron" viewBox="0 0 24 24" fill="#EDEDED">326 <path d="m9 6 6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/>327 </svg>328 </div>329 </div>330 331 <div class="faded-note">verfügbar ab: 31.12.2023 - Sie können sich das Fahrzeug aber bereits reservieren</div>332 <div class="spacer-16"></div>333 </div>334 335 <!-- Bottom sticky actions -->336 <div class="bottom-actions">337 <div class="btn">338 <svg width="44" height="44" viewBox="0 0 24 24" fill="#0D0D0D">339 <path d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.5.7 3.8.7.6 0 1.1.5 1.1 1.1V20c0 .6-.5 1.1-1.1 1.1C10.8 21.1 3 13.3 3 3.7 3 3.1 3.5 2.6 4.1 2.6H6c.6 0 1.1.5 1.1 1.1 0 1.3.2 2.6.7 3.8.1.4 0 .8-.3 1.1l-2 2.2z"/>340 </svg>341 <span>Call</span>342 </div>343 <div class="btn">344 <svg width="44" height="44" viewBox="0 0 24 24" fill="#0D0D0D">345 <path d="M20 4H4c-1.1 0-2 .9-2 2v12l4-4h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 6H6l-2 2V6h16v4z"/>346 </svg>347 <span>E-mail</span>348 </div>349 </div>350 351</div>352</body>353</html>