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>Listing UI</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#121212; color:#F5F5F5;12  }13  .status-bar {14    height:96px; padding:0 28px;15    display:flex; align-items:center; justify-content:space-between;16    color:#eaeaea; font-size:32px; letter-spacing:1px;17  }18  .status-icons { display:flex; gap:26px; align-items:center; }19  .icon { width:44px; height:44px; fill:#e0e0e0; }20  .nav-bar {21    height:110px; padding:0 22px; display:flex; align-items:center; justify-content:space-between;22    border-top:1px solid #1e1e1e; border-bottom:1px solid #1e1e1e;23  }24  .nav-left { display:flex; align-items:center; gap:16px; }25  .nav-title { font-size:44px; font-weight:600; color:#eaeaea; }26  .nav-right { display:flex; gap:30px; align-items:center; }27  .hero {28    height:420px; background:#E0E0E0; border-bottom:1px solid #2b2b2b; border-top:1px solid #2b2b2b;29    display:flex; align-items:center; justify-content:center; color:#555; font-size:38px; font-weight:600;30  }31  .section { padding:34px 36px; }32  .row { display:flex; align-items:center; gap:18px; }33  .chip {34    background:#2a2a2a; color:#d9d9d9; padding:10px 18px; border-radius:12px; font-size:30px; border:1px solid #3a3a3a;35  }36  .divider { height:1px; background:#1e1e1e; margin:26px 0; }37  .dealer-name { font-size:44px; font-weight:700; line-height:1.2; margin-top:16px; }38  .sub { color:#bdbdbd; font-size:30px; }39  .rating { margin-top:18px; display:flex; align-items:center; gap:18px; }40  .star { width:32px; height:32px; fill:#FFD54F; }41  .heading { font-size:40px; font-weight:700; margin-top:30px; }42  .info-line { margin-top:18px; display:flex; align-items:center; gap:16px; font-size:34px; color:#ddd; }43  .open { color:#4CAF50; font-weight:700; }44  .report { margin-top:36px; padding:26px 0; border-top:1px solid #1e1e1e; border-bottom:1px solid #1e1e1e; display:flex; align-items:center; justify-content:space-between; }45  .report .left { display:flex; align-items:center; gap:20px; font-size:36px; }46  .chev { width:36px; height:36px; fill:#9e9e9e; }47  .sim-header { padding:30px 36px 10px 36px; display:flex; align-items:flex-end; justify-content:space-between; }48  .sim-title { font-size:44px; font-weight:800; }49  .more { font-size:34px; color:#8ab4ff; }50  .cards {51    padding-left:36px; padding-right:20px;52    display:flex; gap:26px; overflow-x:auto;53  }54  .card {55    width:620px; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:18px;56    overflow:hidden; flex:0 0 auto;57  }58  .card-img {59    height:330px; background:#E0E0E0; border-bottom:1px solid #2a2a2a; display:flex; justify-content:center; align-items:center; color:#666; font-weight:600;60    position:relative;61  }62  .fav {63    position:absolute; top:16px; right:16px;64    width:70px; height:70px; background:#0f0f0f; border:1px solid #2a2a2a; border-radius:50%;65    display:flex; align-items:center; justify-content:center;66  }67  .fav svg { width:36px; height:36px; fill:#e0e0e0; }68  .card-body { padding:22px; }69  .car-title { font-size:36px; color:#eaeaea; font-weight:700; }70  .price { font-size:40px; margin-top:14px; font-weight:800; }71  .muted { color:#bdbdbd; font-size:30px; margin-top:10px; }72  .dealer-pill { margin-top:12px; display:inline-block; }73  .location { display:flex; align-items:center; gap:10px; color:#bdbdbd; font-size:30px; margin-top:10px; }74  .sticky {75    position:absolute; bottom:140px; left:0; right:0; padding:0 36px;76    display:flex; gap:36px;77  }78  .btn {79    flex:1; background:#FFD54F; color:#1a1a1a; font-weight:800; font-size:38px; padding:28px 0; border-radius:18px; display:flex; align-items:center; justify-content:center; gap:18px;80  }81  .btn svg { width:44px; height:44px; fill:#1a1a1a; }82  .footnote {83    position:absolute; bottom:100px; left:36px; right:36px; color:#bdbdbd; font-size:26px;84  }85  /* helper icons sizes */86  .small-icon { width:40px; height:40px; fill:#bdbdbd; }87</style>88</head>89<body>90<div id="render-target">91  <!-- Status bar -->92  <div class="status-bar">93    <div>11:54</div>94    <div class="status-icons">95      <svg class="icon" viewBox="0 0 24 24"><path d="M7 2l-2 4H2v12h20V6h-3l-2-4H7zm5 3a2 2 0 110 4 2 2 0 010-4z"/></svg>96      <svg class="icon" viewBox="0 0 24 24"><path d="M7 4h10v2H7V4zm-3 4h16v12H4V8zm2 2v8h12v-8H6z"/></svg>97      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18v2H3z"/></svg>98      <svg class="icon" viewBox="0 0 24 24"><path d="M18 7h-3V4h3v3zM9 7H6V4h3v3zM6 20H3v-3h3v3zm12 0h-3v-3h3v3z"/></svg>99    </div>100  </div>101 102  <!-- Top navigation -->103  <div class="nav-bar">104    <div class="nav-left">105      <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 19L8.5 12l7-7-1.5-1.5L5.5 12l8.5 8.5z"/></svg>106      <div class="nav-title">2 from 13</div>107    </div>108    <div class="nav-right">109      <svg class="icon" viewBox="0 0 24 24"><path d="M6 2h12v6H6V2zm0 8h12v12H6V10zm2 2v8h8v-8H8z"/></svg>110      <svg class="icon" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.6-7L2 8.9l7.1-.6L12 2l2.9 6.3 7.1.6-5.4 5.1 1.6 7z"/></svg>111      <svg class="icon" viewBox="0 0 24 24"><path d="M18 8a3 3 0 10-2.8-4H9a3 3 0 100 2h6.2A3 3 0 0018 8zM6 10a3 3 0 100 6 3 3 0 000-6zm12 2a3 3 0 100 6 3 3 0 000-6z"/></svg>112    </div>113  </div>114 115  <!-- Gallery -->116  <div class="hero">[IMG: Vehicle gallery]</div>117 118  <!-- Seller section -->119  <div class="section">120    <div class="row">121      <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 12a5 5 0 10-5-5 5 5 0 005 5zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>122      <div style="font-size:38px;">Seller</div>123      <div class="chip">Dealer</div>124    </div>125 126    <div class="dealer-name">Andreas Pfüller -Autohaus Stollberg e.K.</div>127 128    <div class="rating">129      <div class="row">130        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.6.6-5 4.6 1.4 6.5L12 17l-5.9 3 1.4-6.5-5-4.6 6.6-.6z"/></svg>131        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.6.6-5 4.6 1.4 6.5L12 17l-5.9 3 1.4-6.5-5-4.6 6.6-.6z"/></svg>132        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.6.6-5 4.6 1.4 6.5L12 17l-5.9 3 1.4-6.5-5-4.6 6.6-.6z"/></svg>133        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.6.6-5 4.6 1.4 6.5L12 17l-5.9 3 1.4-6.5-5-4.6 6.6-.6z"/></svg>134        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l2.9 6.3 6.6.6-5 4.6 1.4 6.5L12 17l-5.9 3 1.4-6.5-5-4.6 6.6-.6z"/></svg>135      </div>136      <div class="sub" style="font-size:34px;">80 Ratings</div>137    </div>138 139    <div class="sub" style="margin-top:14px;">Customer of AutoScout24 since 2002</div>140 141    <div class="heading">Verkauf</div>142 143    <div class="info-line">144      <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/></svg>145      <span class="open">Open</span>146      <span>· Closes 18:00</span>147    </div>148 149    <div class="info-line">150      <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 2a7 7 0 00-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 119.5 9 2.5 2.5 0 0112 11.5z"/></svg>151      <span>Stollberg, DE</span>152    </div>153 154    <div class="report">155      <div class="left">156        <svg class="small-icon" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>157        <span>Report error</span>158      </div>159      <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>160    </div>161  </div>162 163  <!-- Similar vehicles -->164  <div class="sim-header">165    <div class="sim-title">Similar vehicles</div>166    <div class="more">More</div>167  </div>168 169  <div class="cards">170    <!-- Card 1 -->171    <div class="card">172      <div class="card-img">173        [IMG: White Toyota Camry]174        <div class="fav">175          <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.6-7L2 8.9l7.1-.6L12 2l2.9 6.3 7.1.6-5.4 5.1 1.6 7z"/></svg>176        </div>177      </div>178      <div class="card-body">179        <div class="car-title">Toyota Camry 2,5 -I-VVT...</div>180        <div class="price">€ 40,480.-</div>181        <div class="muted">3 km, 11/2023</div>182        <div class="dealer-pill chip">Dealer</div>183        <div class="location">184          <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 2a7 7 0 00-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 119.5 9 2.5 2.5 0 0112 11.5z"/></svg>185          <span>DE 13088 Berlin</span>186        </div>187      </div>188    </div>189 190    <!-- Card 2 -->191    <div class="card">192      <div class="card-img" style="background:#101010; color:#888;">[IMG: Toyota Camry 2.5 Hybrid]</div>193      <div class="card-body">194        <div class="car-title">Toyota Camry 2.5 Hybri...</div>195        <div class="price">€ 43,486.-</div>196        <div class="muted">1 km, -</div>197        <div class="dealer-pill chip">Dealer</div>198        <div class="location">199          <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 2a7 7 0 00-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 119.5 9 2.5 2.5 0 0112 11.5z"/></svg>200          <span>DE 49084 Osnabrück</span>201        </div>202      </div>203    </div>204 205    <!-- Card 3 (partial) -->206    <div class="card">207      <div class="card-img">[IMG: Blue sedan]</div>208      <div class="card-body">209        <div class="car-title">Toyota Camry</div>210        <div class="price">€ 38,9..-</div>211        <div class="muted">90 km, 2023</div>212        <div class="dealer-pill chip">Dealer</div>213        <div class="location">214          <svg class="small-icon" viewBox="0 0 24 24"><path d="M12 2a7 7 0 00-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 119.5 9 2.5 2.5 0 0112 11.5z"/></svg>215          <span>DE ...</span>216        </div>217      </div>218    </div>219  </div>220 221  <!-- Sticky actions -->222  <div class="sticky">223    <div class="btn">224      <svg viewBox="0 0 24 24"><path d="M6.6 10.8a15 15 0 006.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1 .4 2.2.7 3.4.7.7 0 1.2.5 1.2 1.2V21c0 .7-.5 1.2-1.2 1.2A18.8 18.8 0 012 3.2C2 2.5 2.5 2 3.2 2H7c.7 0 1.2.5 1.2 1.2 0 1.2.2 2.3.7 3.4.2.4.1.9-.2 1.2l-2 2z"/></svg>225      <span>Call</span>226    </div>227    <div class="btn" style="background:#FFEB7A;">228      <svg viewBox="0 0 24 24"><path d="M12 13L2 6.5V18h20V6.5L12 13zm0-2l10-6H2l10 6z"/></svg>229      <span>E-mail</span>230    </div>231  </div>232 233  <div class="footnote">* You can obtain more information on the official fuel</div>234</div>235</body>236</html>