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>Auto Listing UI</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff; color:#1b1b1b;11  }12  .statusbar {13    height:100px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; font-size:36px; color:#4b4b4b;14  }15  .topbar {16    height:120px; display:flex; align-items:center; padding:0 24px; border-bottom:1px solid #ececec;17  }18  .icon-btn { width:96px; height:96px; display:flex; align-items:center; justify-content:center; }19  .title { font-size:46px; font-weight:600; flex:1; text-align:left; padding-left:10px; color:#222; }20  .ad-banner { text-align:center; color:#757575; padding:22px 0; font-size:34px; border-bottom:1px solid #f0f0f0; }21  .section { padding:28px 36px; }22  .row { display:flex; align-items:center; }23  .seller-name { font-size:44px; font-weight:700; margin:8px 0 14px; }24  .badge { background:#eee; color:#333; border-radius:16px; padding:8px 16px; font-size:28px; margin-left:16px; }25  .rating { color:#ffb300; font-size:38px; letter-spacing:4px; }26  .rating a { color:#2573d8; text-decoration:none; font-size:34px; margin-left:16px; }27  .small { color:#6b6b6b; font-size:32px; margin-top:6px; }28  .info-row { display:flex; align-items:center; gap:18px; margin-top:24px; color:#2e7d32; font-size:36px; }29  .info-row .muted { color:#6b6b6b; }30  .chip { border:1px solid #dcdcdc; border-radius:14px; padding:8px 16px; font-size:30px; color:#6b6b6b; }31  .divider { height:1px; background:#ececec; margin:8px 0 0; }32  .report { padding:26px 36px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #f1f1f1; border-bottom:1px solid #f1f1f1; }33  .report .left { display:flex; align-items:center; gap:20px; font-size:38px; color:#222; }34  .similar-header { display:flex; align-items:center; justify-content:space-between; padding:30px 36px 14px; }35  .similar-header .more { color:#2b79e3; font-size:36px; }36  .carousel { padding:10px 0 16px 24px; display:flex; gap:24px; overflow:hidden; }37  .card { width:330px; border:1px solid #e3e3e3; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.04); }38  .card-img { height:230px; background:#E0E0E0; border-bottom:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; position:relative; }39  .fav { position:absolute; right:14px; top:14px; width:64px; height:64px; border-radius:50%; background:#ffffff; box-shadow:0 2px 6px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center; }40  .card-body { padding:18px; }41  .card-title { font-size:32px; font-weight:700; line-height:1.2; height:78px; overflow:hidden; }42  .price { font-size:38px; font-weight:800; margin:12px 0; }43  .meta { color:#6b6b6b; font-size:30px; }44  .dealer-tag { display:inline-block; margin-top:12px; padding:8px 14px; border-radius:10px; background:#eee; font-size:28px; color:#333; }45  .loc { display:flex; align-items:center; gap:8px; color:#6b6b6b; font-size:28px; margin-top:10px; }46  .disclaimer { padding:24px 36px 180px; color:#6b6b6b; font-size:30px; line-height:1.5; }47  .sticky-bar {48    position:absolute; bottom:40px; left:36px; right:36px;49    background:#ffe84e; border-radius:22px; display:flex; justify-content:space-between; padding:22px 28px; gap:24px; box-shadow:0 6px 16px rgba(0,0,0,0.15);50  }51  .cta { flex:1; background:#ffef70; border-radius:16px; display:flex; align-items:center; gap:18px; padding:18px 22px; font-size:40px; font-weight:700; color:#2b2b2b; }52  .cta:nth-child(2){ background:#ffd52e; }53  .dot-open { width:18px; height:18px; background:#2e7d32; border-radius:50%; display:inline-block; margin-right:10px; }54  /* Simple icon styles */55  svg { width:48px; height:48px; }56  .sm { width:40px; height:40px; }57  .loc svg, .info-row svg { width:40px; height:40px; }58</style>59</head>60<body>61<div id="render-target">62 63  <!-- Status bar -->64  <div class="statusbar">65    <div>5:17</div>66    <div style="display:flex; align-items:center; gap:24px;">67      <svg viewBox="0 0 24 24"><path d="M4 10h4v4H4zM10 6h4v8h-4zM16 3h4v14h-4z" fill="#7a7a7a"/></svg>68      <svg viewBox="0 0 24 24"><path d="M17 2H7a2 2 0 0 0-2 2v16l7-3 7 3V4a2 2 0 0 0-2-2z" fill="#7a7a7a"/></svg>69    </div>70  </div>71 72  <!-- App header -->73  <div class="topbar">74    <div class="icon-btn">75      <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>76    </div>77    <div class="title">1 from 826</div>78    <div class="icon-btn">79      <svg viewBox="0 0 24 24"><path d="M6 2h9l3 3v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" fill="none" stroke="#222" stroke-width="2"/><path d="M14 2v4h4" stroke="#222" stroke-width="2"/></svg>80    </div>81    <div class="icon-btn">82      <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4 8.04 4 9.54 4.81 10.35 6.09 11.16 4.81 12.66 4 14.2 4 16.7 4 18.7 6 18.7 8.5c0 3.78-3.4 6.86-8.05 11.54L12 21.35z" fill="none" stroke="#222" stroke-width="1.6"/></svg>83    </div>84    <div class="icon-btn">85      <svg viewBox="0 0 24 24"><path d="M18 8l-6 6-6-6" stroke="#222" stroke-width="2" fill="none"/></svg>86    </div>87  </div>88 89  <div class="ad-banner">Advertisement</div>90 91  <!-- Seller section -->92  <div class="section">93    <div class="row" style="gap:16px; color:#222; font-size:36px;">94      <svg class="sm" viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z" fill="#222"/></svg>95      <div style="font-weight:700">Seller</div>96      <div class="badge">Dealer</div>97    </div>98 99    <div class="seller-name">Reffgen & Schmuck Automobile GmbH</div>100 101    <div class="row" style="align-items:center;">102      <div class="rating">★★★★★</div>103      <a href="#" class="rating" style="color:#2b79e3; letter-spacing:0;">359 Ratings</a>104    </div>105    <div class="small">Customer of AutoScout24 since 2008</div>106 107    <div class="info-row">108      <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0-6a1 1 0 0 1 1 1v2h-2V3a1 1 0 0 1 1-1zm0 18v2h-2v-2h2z" fill="#2e7d32" opacity="0.0"/><circle cx="12" cy="12" r="8" stroke="#2e7d32" stroke-width="2" fill="none"/></svg>109      <div><span class="dot-open"></span>Open · <span class="muted">Closes 18:00</span></div>110    </div>111 112    <div class="info-row" style="color:#222; margin-top:18px;">113      <svg viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#222"/></svg>114      <div class="muted" style="color:#222;">Mannheim, DE</div>115    </div>116  </div>117 118  <div class="report">119    <div class="left">120      <svg viewBox="0 0 24 24"><path d="M12 2l10 6v8l-10 6-10-6V8l10-6zm0 4l-6 3.6V14l6 3.6L18 14V9.6L12 6z" fill="#2c2c2c"/></svg>121      <div>Report error</div>122    </div>123    <div>124      <svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>125    </div>126  </div>127 128  <!-- Similar vehicles -->129  <div class="similar-header">130    <div style="font-size:44px; font-weight:800;">Similar vehicles</div>131    <div class="more">More</div>132  </div>133 134  <div class="carousel">135    <!-- Card 1 -->136    <div class="card">137      <div class="card-img">[IMG: Tesla Model X - grey]138        <div class="fav">139          <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4 8.1 4 9.6 4.9 10.35 6.2 11.1 4.9 12.6 4 14.2 4 16.7 4 18.7 6 18.7 8.5c0 3.8-3.4 6.9-8.05 11.55L12 21.35z" fill="none" stroke="#222" stroke-width="1.6"/></svg>140        </div>141      </div>142      <div class="card-body">143        <div class="card-title">Tesla Model X 90D 7 SIT...</div>144        <div class="price">€ 44,880.-</div>145        <div class="meta">45,000 km, 11/2016</div>146        <div class="dealer-tag">Dealer</div>147        <div class="loc">148          <svg viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#6b6b6b"/></svg>149          <span>DE 12103 Berlin</span>150        </div>151      </div>152    </div>153 154    <!-- Card 2 -->155    <div class="card">156      <div class="card-img">[IMG: Tesla Model X - blue]157        <div class="fav">158          <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4 8.1 4 9.6 4.9 10.35 6.2 11.1 4.9 12.6 4 14.2 4 16.7 4 18.7 6 18.7 8.5c0 3.8-3.4 6.9-8.05 11.55L12 21.35z" fill="none" stroke="#222" stroke-width="1.6"/></svg>159        </div>160      </div>161      <div class="card-body">162        <div class="card-title">Tesla Model X MODEL X ...</div>163        <div class="price">€ 49,950.-</div>164        <div class="meta">91,711 km, 12/2017</div>165        <div class="dealer-tag">Dealer</div>166        <div class="loc">167          <svg viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#6b6b6b"/></svg>168          <span>DE 48599 Gronau</span>169        </div>170      </div>171    </div>172 173    <!-- Card 3 -->174    <div class="card">175      <div class="card-img">[IMG: Tesla Model X - black]176        <div class="fav">177          <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4 8.1 4 9.6 4.9 10.35 6.2 11.1 4.9 12.6 4 14.2 4 16.7 4 18.7 6 18.7 8.5c0 3.8-3.4 6.9-8.05 11.55L12 21.35z" fill="none" stroke="#222" stroke-width="1.6"/></svg>178        </div>179      </div>180      <div class="card-body">181        <div class="card-title">Tesla Model X 75D</div>182        <div class="price">€ 41,5..-</div>183        <div class="meta">82,760 km, 2017</div>184        <div class="dealer-tag">Dealer</div>185        <div class="loc">186          <svg viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#6b6b6b"/></svg>187          <span>DE</span>188        </div>189      </div>190    </div>191  </div>192 193  <!-- Disclaimer text -->194  <div class="disclaimer">195    * You can obtain more information on the official fuel consumption and official specific CO₂ emissions of new passenger vehicles from the guideline on fuel consumption and CO₂ emissions of new passenger vehicles. This guideline is available free of charge in the internet and from all dealerships.196  </div>197 198  <!-- Sticky bottom bar -->199  <div class="sticky-bar">200    <div class="cta">201      <svg viewBox="0 0 24 24"><path d="M6.6 10.8c1.8 3.5 4.1 5.8 7.6 7.6l2.5-2.5a1 1 0 0 1 1.1-.24 13 13 0 0 0 3.9 0.62 1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.8 22 2 13.2 2 2a1 1 0 0 1 1-1h3.72a1 1 0 0 1 1 1 13 13 0 0 0 .62 3.9 1 1 0 0 1-.24 1.1L6.6 10.8z" fill="#2b2b2b"/></svg>202      Call203    </div>204    <div class="cta">205      <svg viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" fill="#2b2b2b"/></svg>206      E-mail207    </div>208  </div>209 210</div>211</body>212</html>