GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Reviews UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 100px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #212121;23    font-size: 40px;24    box-sizing: border-box;25  }26  .status-icons {27    display: flex;28    align-items: center;29    gap: 24px;30  }31  .icon {32    width: 40px;33    height: 40px;34  }35 36  /* Brand header */37  .brand-header {38    padding: 24px 36px;39    display: flex;40    align-items: center;41    justify-content: space-between;42    box-sizing: border-box;43    border-bottom: 1px solid #e5e5e5;44  }45  .brand-left {46    display: flex;47    align-items: center;48    gap: 20px;49  }50  .logo-box {51    width: 90px;52    height: 60px;53    background: #E0E0E0;54    border: 1px solid #BDBDBD;55    display: flex;56    justify-content: center;57    align-items: center;58    color: #757575;59    font-size: 22px;60  }61  .brand-title {62    font-weight: 700;63    color: #111;64    font-size: 34px;65    letter-spacing: 0.3px;66  }67  .menu-right {68    display: flex;69    align-items: center;70    gap: 16px;71    color: #111;72    font-size: 34px;73  }74  .hamburger {75    width: 60px;76    height: 60px;77  }78 79  /* Content area */80  .content {81    padding: 36px;82    box-sizing: border-box;83  }84  .review-block {85    position: relative;86    margin-bottom: 28px;87  }88  .review-title {89    font-size: 48px;90    font-weight: 700;91    color: #222;92    margin-bottom: 16px;93  }94  .review-text {95    font-size: 36px;96    line-height: 1.45;97    color: #333;98    margin-bottom: 20px;99  }100  .date {101    font-size: 30px;102    color: #757575;103    margin: 18px 0;104  }105  .report-link {106    position: absolute;107    right: 0;108    top: 10px;109    color: #2b66d9;110    font-size: 34px;111    text-decoration: none;112  }113  .report-link.small {114    position: static;115    display: inline-block;116    float: right;117    margin-top: 10px;118  }119 120  .answer {121    border-left: 5px solid #e6e6e6;122    padding-left: 24px;123    margin-top: 10px;124  }125  .answer .label {126    color: #888;127    font-weight: 700;128    font-size: 34px;129  }130  .answer .text {131    font-size: 34px;132    line-height: 1.5;133    color: #333;134    margin-top: 8px;135  }136  .divider {137    height: 16px;138    background: #f5f5f5;139    margin: 20px -36px 0 -36px;140  }141 142  .section-title {143    font-size: 52px;144    font-weight: 700;145    color: #222;146    margin: 40px 0 24px;147  }148 149  .stars-row {150    display: flex;151    align-items: center;152    gap: 16px;153    margin-bottom: 6px;154  }155  .star {156    width: 44px;157    height: 44px;158  }159  .details-link {160    color: #2b66d9;161    font-size: 36px;162    text-decoration: none;163    margin-left: 24px;164  }165 166  .author {167    font-size: 40px;168    font-weight: 700;169    color: #222;170    margin: 24px 0 14px;171  }172 173  .review-body {174    font-size: 36px;175    line-height: 1.5;176    color: #333;177    margin-bottom: 16px;178  }179 180  .footer-note {181    font-size: 28px;182    color: #777;183  }184 185  /* Recaptcha placeholder */186  .recaptcha {187    position: absolute;188    right: 24px;189    bottom: 120px;190    width: 260px;191    height: 200px;192    background: #E0E0E0;193    border: 1px solid #BDBDBD;194    display: flex;195    justify-content: center;196    align-items: center;197    color: #757575;198    font-size: 26px;199    border-radius: 8px;200  }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status bar -->207  <div class="status-bar">208    <div>5:18</div>209    <div class="status-icons">210      <!-- small gear/dot icons to mimic system icons -->211      <svg class="icon" viewBox="0 0 24 24">212        <circle cx="12" cy="12" r="10" fill="#9e9e9e"></circle>213      </svg>214      <svg class="icon" viewBox="0 0 24 24">215        <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="#616161"></rect>216        <rect x="20.5" y="9" width="2.5" height="6" fill="#616161"></rect>217      </svg>218    </div>219  </div>220 221  <!-- Brand header -->222  <div class="brand-header">223    <div class="brand-left">224      <div class="logo-box">[IMG: Logo]</div>225      <div class="brand-title">REFFGEN & SCHMUCK</div>226    </div>227    <div class="menu-right">228      <svg class="hamburger" viewBox="0 0 24 24">229        <rect x="2" y="5" width="20" height="2" fill="#333"></rect>230        <rect x="2" y="11" width="20" height="2" fill="#333"></rect>231        <rect x="2" y="17" width="20" height="2" fill="#333"></rect>232      </svg>233      <span>menu</span>234    </div>235  </div>236 237  <!-- Content -->238  <div class="content">239 240    <!-- First review -->241    <div class="review-block">242      <a class="report-link" href="#">Report</a>243      <div class="review-title">Cieri</div>244      <div class="review-text">245        I was very satisfied with the advice and am glad I bought my car there! :)246      </div>247      <div class="date">May 16, 2023</div>248 249      <div class="answer">250        <div class="label">Answer : <strong>Reffgen & Schmuck Automobile GmbH</strong></div>251        <div class="text">252          Hello, we are pleased that you are satisfied with the advice and the car and wish you all the best for the future. Best regards, your Reffgen & Jewelry team253        </div>254        <div class="date">May 22, 2023</div>255        <a class="report-link small" href="#">Report</a>256      </div>257    </div>258 259    <div class="divider"></div>260 261    <!-- Comments header -->262    <div class="section-title">357 comments</div>263 264    <!-- Comment 1 -->265    <div class="stars-row">266      <!-- 5 stars -->267      <svg class="star" viewBox="0 0 24 24"><path fill="#000" d="M12 1.8l3 6.1 6.8.6-5.1 4.2 1.8 6.6-6.5-3.8-6.5 3.8 1.8-6.6-5.1-4.2 6.8-.6z"/></svg>268      <svg class="star" viewBox="0 0 24 24"><path fill="#000" d="M12 1.8l3 6.1 6.8.6-5.1 4.2 1.8 6.6-6.5-3.8-6.5 3.8 1.8-6.6-5.1-4.2 6.8-.6z"/></svg>269      <svg class="star" viewBox="0 0 24 24"><path fill="#000" d="M12 1.8l3 6.1 6.8.6-5.1 4.2 1.8 6.6-6.5-3.8-6.5 3.8 1.8-6.6-5.1-4.2 6.8-.6z"/></svg>270      <svg class="star" viewBox="0 0 24 24"><path fill="#000" d="M12 1.8l3 6.1 6.8.6-5.1 4.2 1.8 6.6-6.5-3.8-6.5 3.8 1.8-6.6-5.1-4.2 6.8-.6z"/></svg>271      <svg class="star" viewBox="0 0 24 24"><path fill="#000" d="M12 1.8l3 6.1 6.8.6-5.1 4.2 1.8 6.6-6.5-3.8-6.5 3.8 1.8-6.6-5.1-4.2 6.8-.6z"/></svg>272      <a class="details-link" href="#">Details</a>273    </div>274 275    <div class="author">Jenesstar</div>276    <div class="review-body">277      A very nice and competent contact... The purchase of the vehicle was made possible in a very short time... Thank you for your spontaneity and the great vehicle!278    </div>279    <div class="footer-note">12/04/2023</div>280    <a class="report-link small" href="#">Report</a>281 282    <!-- Comment 2 -->283    <div class="stars-row" style="margin-top: 28px;">284      <svg class="star" viewBox="0 0 24 24"><path fill="#000" d="M12 1.8l3 6.1 6.8.6-5.1 4.2 1.8 6.6-6.5-3.8-6.5 3.8 1.8-6.6-5.1-4.2 6.8-.6z"/></svg>285      <svg class="star" viewBox="0 0 24 24"><path fill="#000" d="M12 1.8l3 6.1 6.8.6-5.1 4.2 1.8 6.6-6.5-3.8-6.5 3.8 1.8-6.6-5.1-4.2 6.8-.6z"/></svg>286      <svg class="star" viewBox="0 0 24 24"><path fill="#000" d="M12 1.8l3 6.1 6.8.6-5.1 4.2 1.8 6.6-6.5-3.8-6.5 3.8 1.8-6.6-5.1-4.2 6.8-.6z"/></svg>287      <svg class="star" viewBox="0 0 24 24"><path fill="#000" d="M12 1.8l3 6.1 6.8.6-5.1 4.2 1.8 6.6-6.5-3.8-6.5 3.8 1.8-6.6-5.1-4.2 6.8-.6z"/></svg>288      <svg class="star" viewBox="0 0 24 24"><path fill="#000" d="M12 1.8l3 6.1 6.8.6-5.1 4.2 1.8 6.6-6.5-3.8-6.5 3.8 1.8-6.6-5.1-4.2 6.8-.6z"/></svg>289      <a class="details-link" href="#">Details</a>290    </div>291    <div class="author">Feuling</div>292 293  </div>294 295  <!-- Recaptcha placeholder -->296  <div class="recaptcha">[IMG: reCAPTCHA]</div>297 298</div>299</body>300</html>