GD-ML/AndroidCode

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; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16  }17 18  /* Top bars */19  .status-bar {20    height: 80px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #eaeaea;26    font-size: 34px;27    letter-spacing: 0.5px;28  }29  .status-icons span {30    display: inline-block;31    width: 22px;32    height: 22px;33    margin-left: 22px;34    border-radius: 50%;35    background: #eaeaea22;36  }37 38  .header {39    height: 120px;40    display: flex;41    align-items: center;42    padding: 0 28px;43  }44  .header .title {45    font-size: 48px;46    font-weight: 600;47    margin-left: 18px;48  }49  .header .right-icons {50    margin-left: auto;51    display: flex;52    align-items: center;53    gap: 34px;54  }55  .icon {56    width: 48px;57    height: 48px;58    fill: none;59    stroke: #eaeaea;60    stroke-width: 3;61  }62  .divider {63    height: 1px;64    background: #2b2b2b;65    margin: 8px 0;66  }67 68  /* Info rows */69  .content {70    padding: 0 36px;71  }72  .info-row {73    display: flex;74    padding: 28px 0;75  }76  .info-row .label {77    width: 50%;78    color: #b9b9b9;79    font-size: 36px;80  }81  .info-row .value {82    width: 50%;83    color: #ffffff;84    font-size: 36px;85    font-weight: 600;86  }87 88  /* List rows with chevron */89  .list-row {90    display: flex;91    align-items: center;92    padding: 34px 0;93  }94  .list-row .text {95    font-size: 40px;96    margin-left: 18px;97    font-weight: 600;98  }99  .chev {100    margin-left: auto;101    width: 44px;102    height: 44px;103    stroke: #eaeaea;104  }105 106  /* Description */107  .section-title {108    display: flex;109    align-items: center;110    padding: 36px 0 10px 0;111  }112  .section-title .text {113    font-size: 40px;114    margin-left: 18px;115    font-weight: 700;116  }117  .description {118    color: #d9d9d9;119    font-size: 36px;120    line-height: 1.5;121    padding: 12px 0 0 70px;122  }123  .desc-line {124    margin: 20px 0;125  }126 127  .note {128    color: #cfcfcf;129    font-size: 36px;130    padding-left: 36px;131    padding-right: 36px;132  }133 134  .ad-label {135    text-align: center;136    color: #b9b9b9;137    margin: 12px 0 16px 0;138    font-size: 34px;139    letter-spacing: 0.5px;140  }141  .ad-placeholder {142    margin: 0 auto;143    width: 920px;144    height: 620px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    color: #757575;148    display: flex;149    align-items: center;150    justify-content: center;151    text-align: center;152    border-radius: 10px;153    font-size: 32px;154  }155 156  /* Bottom actions */157  .action-bar {158    position: absolute;159    bottom: 28px;160    left: 0;161    width: 100%;162    padding: 0 36px;163    display: flex;164    justify-content: space-between;165    gap: 32px;166  }167  .btn {168    flex: 1;169    background: #e8de86;170    color: #0f0f0f;171    border-radius: 22px;172    height: 140px;173    display: flex;174    align-items: center;175    justify-content: center;176    gap: 22px;177    font-size: 44px;178    font-weight: 700;179  }180  .btn svg { width: 50px; height: 50px; stroke: #0f0f0f; stroke-width: 3; }181 182  /* Subtle underline mimic */183  .long-underline {184    margin: 26px 36px;185    height: 2px;186    background: #2b2b2b;187  }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Status Bar -->194  <div class="status-bar">195    <div>11:54</div>196    <div class="status-icons">197      <span></span><span></span><span></span><span></span>198    </div>199  </div>200 201  <!-- Header -->202  <div class="header">203    <svg class="icon" viewBox="0 0 48 48">204      <polyline points="28,8 14,24 28,40"></polyline>205    </svg>206    <div class="title">2 from 13</div>207    <div class="right-icons">208      <!-- document -->209      <svg class="icon" viewBox="0 0 48 48">210        <rect x="10" y="8" width="24" height="32" rx="3"></rect>211        <line x1="14" y1="16" x2="30" y2="16"></line>212        <line x1="14" y1="22" x2="30" y2="22"></line>213      </svg>214      <!-- star -->215      <svg class="icon" viewBox="0 0 48 48">216        <polygon points="24,6 29,18 42,18 32,26 36,40 24,32 12,40 16,26 6,18 19,18"></polygon>217      </svg>218      <!-- share -->219      <svg class="icon" viewBox="0 0 48 48">220        <circle cx="36" cy="12" r="5"></circle>221        <circle cx="12" cy="24" r="5"></circle>222        <circle cx="36" cy="36" r="5"></circle>223        <line x1="16" y1="22" x2="31" y2="14"></line>224        <line x1="16" y1="26" x2="31" y2="34"></line>225      </svg>226    </div>227  </div>228 229  <!-- Emission Information -->230  <div class="content">231    <div class="info-row">232      <div class="label">CO₂-emissions WLTP</div>233      <div class="value">125 g/km (comb.)</div>234    </div>235    <div class="divider"></div>236    <div class="info-row">237      <div class="label">Emission class</div>238      <div class="value">Euro 6d‑TEMP</div>239    </div>240    <div class="divider"></div>241    <div class="info-row">242      <div class="label">Emission sticker</div>243      <div class="value">4 (Green)</div>244    </div>245  </div>246 247  <div class="divider" style="margin: 22px 0;"></div>248 249  <!-- List Items -->250  <div class="content">251    <div class="list-row">252      <!-- seat icon -->253      <svg class="icon" viewBox="0 0 48 48">254        <rect x="12" y="10" width="18" height="16" rx="4"></rect>255        <path d="M14 30 h16 a6 6 0 0 1 6 6 v2 H12 v-6 a2 2 0 0 1 2-2z"></path>256      </svg>257      <div class="text">Equipment</div>258      <svg class="chev" viewBox="0 0 48 48">259        <polyline points="18,10 30,24 18,38" fill="none" stroke-width="3"></polyline>260      </svg>261    </div>262    <div class="divider"></div>263 264    <div class="list-row">265      <!-- palette/circle icon -->266      <svg class="icon" viewBox="0 0 48 48">267        <circle cx="20" cy="20" r="10"></circle>268      </svg>269      <div class="text">Color and Upholstery</div>270      <svg class="chev" viewBox="0 0 48 48">271        <polyline points="18,10 30,24 18,38" fill="none" stroke-width="3"></polyline>272      </svg>273    </div>274    <div class="divider"></div>275 276    <div class="section-title">277      <!-- book icon -->278      <svg class="icon" viewBox="0 0 48 48">279        <path d="M12 10 h16 a4 4 0 0 1 4 4 v22 h-20 a4 4 0 0 0 -4 4 v-26 a4 4 0 0 1 4 -4z"></path>280        <line x1="12" y1="18" x2="32" y2="18"></line>281      </svg>282      <div class="text">Vehicle description</div>283      <svg class="chev" viewBox="0 0 48 48" style="margin-left:auto;">284        <polyline points="18,10 30,24 18,38" fill="none" stroke-width="3"></polyline>285      </svg>286    </div>287 288    <div class="description">289      <div class="desc-line">Verfügbar ab: 31.12.2023 - Sie können sich das Fahrzeug</div>290      <div class="desc-line">aber bereits reservieren</div>291      <div class="desc-line" style="margin-top:28px;">• Ihr Ansprechpartner für dieses KFZ:</div>292    </div>293 294    <div class="note" style="margin-top: 24px;">295      Verkaufsteam der AMZGRUPPE, Tel: 037296/979444 über diese Nummer auch Whatsapp296    </div>297    <div class="long-underline"></div>298  </div>299 300  <!-- Advertisement -->301  <div class="content">302    <div class="ad-label">Advertisement</div>303    <div class="ad-placeholder">[IMG: Advertisement - Mobile gadgets (earbuds & phones)]</div>304  </div>305 306  <!-- Bottom Action Buttons -->307  <div class="action-bar">308    <div class="btn">309      <svg viewBox="0 0 48 48">310        <path d="M14 8 l6 6 -5 5 c3 6 7 10 13 13 l5-5 6 6 c-4 4-8 6-12 6 -10-4-18-12-22-22 0-4 2-8 6-12z" fill="none"></path>311      </svg>312      <span>Call</span>313    </div>314    <div class="btn">315      <svg viewBox="0 0 48 48">316        <rect x="6" y="10" width="36" height="28" rx="4" fill="none"></rect>317        <polyline points="8,12 24,24 40,12" fill="none"></polyline>318      </svg>319      <span>E-mail</span>320    </div>321  </div>322 323</div>324</body>325</html>