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>Reviews 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:#ffffff; color:#222;12  }13 14  /* Status bar */15  .statusbar {16    height:84px;17    display:flex; align-items:center;18    padding:0 28px;19    font-size:32px; color:#222;20  }21  .statusbar .spacer { flex:1; }22  .status-icons { display:flex; align-items:center; gap:22px; }23  .icon {24    width:36px; height:36px;25  }26 27  /* Top header */28  .top-header {29    display:flex; align-items:center;30    padding:22px 34px;31    border-bottom:1px solid #e8e8e8;32  }33  .brand {34    display:flex; align-items:center; gap:20px;35  }36  .brand-mark {37    width:240px; height:70px;38    background:#E0E0E0; border:1px solid #BDBDBD;39    display:flex; align-items:center; justify-content:center;40    color:#757575; font-size:26px;41  }42  .menu {43    margin-left:auto; display:flex; align-items:center; gap:18px;44    color:#111; font-size:42px;45  }46  .hamburger { width:64px; height:44px; }47 48  /* Page content */49  .content { padding-bottom:140px; }50  .row {51    display:flex; align-items:center;52    padding:30px 36px;53    color:#6b6b6b; font-size:34px;54  }55  .row .right-link { margin-left:auto; color:#4f7ddb; text-decoration:none; }56 57  .divider { height:16px; background:#fafafa; border-top:1px solid #eee; border-bottom:1px solid #eee; }58 59  .review {60    padding:36px;61    border-bottom:1px solid #eeeeee;62  }63  .stars-row {64    display:flex; align-items:center; gap:10px;65    margin-bottom:24px;66  }67  .star { font-size:44px; color:#0e0e0e; }68  .details-link { margin-left:20px; color:#1a73e8; font-size:38px; text-decoration:none; }69  .reviewer {70    font-size:46px; font-weight:700; margin:8px 0 16px 0; color:#1c1c1c;71  }72  .text {73    font-size:36px; line-height:1.5; color:#2f2f2f;74    margin-bottom:24px;75  }76  .meta {77    display:flex; align-items:center;78    font-size:32px; color:#7a7a7a;79  }80  .meta a { margin-left:auto; color:#4f7ddb; text-decoration:none; }81 82  /* Floating recaptcha badge */83  .recaptcha {84    position:absolute; right:28px; bottom:160px;85    width:360px; height:180px;86    background:#ffffff; border:1px solid #d0d0d0; border-radius:12px;87    display:flex; align-items:center; padding:18px; gap:16px;88    box-shadow:0 8px 20px rgba(0,0,0,0.12);89  }90  .recaptcha .badge {91    width:100px; height:100px; border-radius:12px;92    background:#E0E0E0; border:1px solid #BDBDBD;93    display:flex; align-items:center; justify-content:center; color:#777; font-size:22px; text-align:center;94  }95  .recaptcha .txt { font-size:28px; color:#6b6b6b; }96  .phone-indicator {97    position:absolute; left:50%; transform:translateX(-50%);98    bottom:22px; width:360px; height:14px; background:#bcbcbc; border-radius:7px; opacity:.6;99  }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Status bar -->106  <div class="statusbar">107    <div style="font-weight:600;">5:18</div>108    <div class="spacer"></div>109    <div class="status-icons">110      <!-- simple sun icon -->111      <svg class="icon" viewBox="0 0 24 24">112        <circle cx="12" cy="12" r="4" fill="#222"/>113      </svg>114      <!-- location dot -->115      <svg class="icon" viewBox="0 0 24 24">116        <circle cx="12" cy="9" r="4" fill="#222"/>117        <path d="M12 13 L8 21 L16 21 Z" fill="#222"/>118      </svg>119    </div>120  </div>121 122  <!-- Header with logo and menu -->123  <div class="top-header">124    <div class="brand">125      <div class="brand-mark">[IMG: Reffgen & Schmuck Logo]</div>126    </div>127    <div class="menu">128      <svg class="hamburger" viewBox="0 0 24 24">129        <rect x="2" y="4" width="20" height="2" fill="#222"/>130        <rect x="2" y="11" width="20" height="2" fill="#222"/>131        <rect x="2" y="18" width="20" height="2" fill="#222"/>132      </svg>133      <span>menu</span>134    </div>135  </div>136 137  <div class="content">138 139    <!-- lone date row showing top item tail -->140    <div class="row">141      <span>12/04/2023</span>142      <a class="right-link" href="#">Report</a>143    </div>144 145    <div class="divider"></div>146 147    <!-- Review 1 -->148    <div class="review">149      <div class="stars-row">150        <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>151        <a class="details-link" href="#">Details</a>152      </div>153      <div class="reviewer">Feuling</div>154      <div class="text">155        The purchase process is optimal in every respect, from the first telephone contact to the delivery of the vehicle.156        Very friendly, competent employee.157      </div>158      <div class="meta">159        <span>12/04/2023</span>160        <a href="#">Report</a>161      </div>162    </div>163 164    <!-- Review 2 -->165    <div class="review">166      <div class="stars-row">167        <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>168        <a class="details-link" href="#">Details</a>169      </div>170      <div class="reviewer">Andreas Burgard</div>171      <div class="text">172        Every car on the farm is well maintained. No junk to be found. The purchase process went smoothly.173        I will 100% buy my next car there again.174      </div>175      <div class="meta">176        <span>November 15, 2023</span>177        <a href="#">Report</a>178      </div>179    </div>180 181    <!-- Review 3 -->182    <div class="review" style="border-bottom:none;">183      <div class="stars-row">184        <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>185        <a class="details-link" href="#">Details</a>186      </div>187      <div class="reviewer">Harald Vetter</div>188      <div class="text">189        Professional and constructive contact right from the start. Very satisfied with the entire process.190        Absolutely recommendable to others.191      </div>192      <div class="meta">193        <span>November 4, 2023</span>194      </div>195    </div>196 197  </div>198 199  <!-- Floating reCAPTCHA badge -->200  <div class="recaptcha">201    <div class="badge">[IMG: reCAPTCHA]</div>202    <div class="txt">Privacy - Terms</div>203  </div>204 205  <div class="phone-indicator"></div>206</div>207</body>208</html>