GD-ML/AndroidCode
13.4k
1<html lang="de">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Autoscout24 Reviews UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #212121; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 70px;23 padding: 0 30px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 font-size: 30px;28 color: #555;29 }30 .status-icons { display: flex; gap: 22px; align-items: center; }31 32 /* Browser bar */33 .browser-bar {34 position: absolute;35 top: 70px;36 left: 0;37 width: 1080px;38 height: 120px;39 border-bottom: 1px solid #e0e0e0;40 padding: 0 24px;41 display: flex;42 align-items: center;43 gap: 18px;44 }45 .bb-left, .bb-right { display: flex; align-items: center; gap: 18px; }46 .bb-title {47 display: flex;48 flex-direction: column;49 line-height: 1.25;50 }51 .bb-title .top { font-size: 34px; color: #1a1a1a; }52 .bb-title .sub { font-size: 28px; color: #757575; }53 .spacer { flex: 1; }54 55 /* Site header */56 .site-head {57 position: absolute;58 top: 190px;59 left: 0;60 width: 1080px;61 height: 120px;62 border-bottom: 1px solid #eee;63 padding: 0 32px;64 display: flex;65 align-items: center;66 justify-content: space-between;67 background: #fafafa;68 }69 .logo {70 width: 320px;71 height: 80px;72 background: #E0E0E0;73 border: 1px solid #BDBDBD;74 display: flex;75 align-items: center;76 justify-content: center;77 color: #757575;78 font-size: 26px;79 }80 .menu { display: flex; align-items: center; gap: 18px; font-size: 34px; color: #333; }81 82 /* Title block */83 .title-block {84 position: absolute;85 top: 330px;86 left: 60px;87 width: 960px;88 text-align: center;89 }90 .main-title {91 font-size: 56px;92 font-weight: 700;93 line-height: 1.2;94 margin-bottom: 28px;95 }96 .rating-row {97 display: flex;98 justify-content: center;99 align-items: center;100 gap: 22px;101 margin-bottom: 28px;102 }103 .rating-row .link { color: #1976d2; font-size: 34px; }104 105 .info-line {106 font-size: 36px;107 color: #333;108 margin-bottom: 18px;109 }110 .link-blue { color: #1976d2; font-size: 36px; margin-bottom: 30px; }111 112 .actions {113 display: flex;114 justify-content: center;115 gap: 30px;116 margin-top: 12px;117 }118 .btn-yellow {119 width: 480px;120 height: 110px;121 background: #ffeb3b;122 border-radius: 18px;123 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);124 display: flex;125 align-items: center;126 justify-content: center;127 font-size: 40px;128 font-weight: 700;129 color: #1a1a1a;130 }131 132 /* Ratings card */133 .card {134 position: absolute;135 top: 720px;136 left: 30px;137 width: 1020px;138 border-top: 1px solid #e0e0e0;139 padding-top: 40px;140 }141 .center { text-align: center; }142 .small { font-size: 34px; color: #333; }143 .big-score { font-size: 160px; font-weight: 700; margin: 20px 0; }144 .stars-big { display: flex; justify-content: center; gap: 16px; margin: 18px 0 28px; }145 .note { font-size: 34px; color: #333; }146 .criteria {147 margin-top: 60px;148 padding: 0 20px 40px;149 }150 .criterion {151 display: flex;152 align-items: center;153 gap: 14px;154 font-size: 40px;155 margin: 20px 0;156 color: #333;157 }158 .stars-row { display: flex; gap: 10px; }159 160 /* Bottom translator hint (mock) */161 .translator {162 position: absolute;163 bottom: 80px;164 left: 20px;165 width: 1040px;166 height: 120px;167 border: 1px solid #dcdcdc;168 background: #f7f7f7;169 border-radius: 16px;170 display: flex;171 align-items: center;172 justify-content: space-between;173 padding: 0 22px;174 color: #333;175 font-size: 34px;176 }177 178 /* Icons */179 .icon { width: 40px; height: 40px; fill: #333; }180 .icon.x { width: 44px; height: 44px; }181 .icon.share, .icon.more { width: 42px; height: 42px; }182 .icon.lock { width: 34px; height: 34px; fill: #4caf50; }183 .icon.menu { width: 48px; height: 48px; }184 .star {185 width: 40px; height: 40px; fill: #1a1a1a;186 }187 .star.sm { width: 30px; height: 30px; }188 .star.big { width: 44px; height: 44px; }189</style>190</head>191<body>192<div id="render-target">193 194 <!-- Status bar -->195 <div class="status-bar">196 <div>5:18</div>197 <div class="status-icons">198 <!-- simple status dots -->199 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#9e9e9e"/></svg>200 <svg class="icon" viewBox="0 0 24 24"><path d="M3 11h18v2H3z" fill="#9e9e9e"/></svg>201 </div>202 </div>203 204 <!-- Browser bar -->205 <div class="browser-bar">206 <div class="bb-left">207 <svg class="icon x" viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>208 <svg class="icon lock" viewBox="0 0 24 24"><path d="M12 1a5 5 0 00-5 5v3H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2V11a2 2 0 00-2-2h-2V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9z"/></svg>209 <div class="bb-title">210 <div class="top">Reviews of Reffgen & Schmuck ...</div>211 <div class="sub">autoscout24.de</div>212 </div>213 </div>214 <div class="spacer"></div>215 <div class="bb-right">216 <svg class="icon share" viewBox="0 0 24 24"><path d="M18 16a3 3 0 00-2.65 1.61L8.9 13.7a3.1 3.1 0 000-3.4l6.45-3.9A3 3 0 0018 8a3 3 0 10-2.9-4A3 3 0 0015 6l-7 4a3 3 0 000 4l7 4a3 3 0 103-2z"/></svg>217 <svg class="icon more" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>218 </div>219 </div>220 221 <!-- Site header -->222 <div class="site-head">223 <div class="logo">[IMG: REFFGEN & SCHMUCK logo]</div>224 <div class="menu">225 <svg class="icon menu" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>226 <div>Menü</div>227 </div>228 </div>229 230 <!-- Title block -->231 <div class="title-block">232 <div class="main-title">Reffgen & Schmuck Automobile<br>GmbH</div>233 234 <div class="rating-row">235 <div class="stars-row">236 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>237 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>238 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>239 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>240 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>241 </div>242 <div class="link">359 Bewertungen</div>243 </div>244 245 <div class="info-line">Radeberger Straße 1, 68309 Mannheim</div>246 <div class="link-blue">Öffnungszeiten</div>247 248 <div class="actions">249 <div class="btn-yellow">Anrufen</div>250 <div class="btn-yellow">E-Mail senden</div>251 </div>252 </div>253 254 <!-- Ratings card -->255 <div class="card">256 <div class="center small">359 Bewertungen</div>257 <div class="center big-score">4,7</div>258 <div class="stars-big">259 <svg class="star big" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>260 <svg class="star big" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>261 <svg class="star big" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>262 <svg class="star big" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>263 <svg class="star big" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>264 </div>265 <div class="center note">98% Weiterempfehlungen</div>266 267 <div class="criteria">268 <div class="criterion">269 <div class="stars-row">270 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>271 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>272 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>273 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>274 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>275 </div>276 <div>Gesamteindruck</div>277 </div>278 279 <div class="criterion">280 <div class="stars-row">281 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>282 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>283 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>284 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>285 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>286 </div>287 <div>Erreichbarkeit</div>288 </div>289 290 <div class="criterion">291 <div class="stars-row">292 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>293 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>294 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>295 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>296 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>297 </div>298 <div>Zuverlässigkeit</div>299 </div>300 301 <div class="criterion">302 <div class="stars-row">303 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>304 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>305 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>306 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>307 <svg class="star sm" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>308 </div>309 <div>Angebotsbeschreibung</div>310 </div>311 </div>312 </div>313 314 <!-- Translator mock -->315 <div class="translator">316 <div>German</div>317 <div class="status-icons">318 <svg class="icon" viewBox="0 0 24 24"><path d="M4 5h16v14H4z" fill="#bdbdbd"/><path d="M6 8h12v2H6zm0 4h8v2H6z" fill="#757575"/></svg>319 <svg class="icon" viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>320 </div>321 </div>322 323</div>324</body>325</html>