GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Guest Reviews UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #1d1d1d;17  }18 19  /* Header */20  .header {21    position: relative;22    width: 100%;23    background: #0f3a85;24    color: #fff;25  }26  .status {27    height: 90px;28    display: flex;29    align-items: center;30    padding: 0 40px;31    font-size: 34px;32    font-weight: 600;33  }34  .status .spacer { flex: 1; }35  .status .status-icons { display: flex; align-items: center; gap: 24px; }36  .status .pill {37    width: 36px; height: 20px; border-radius: 4px; background: rgba(255,255,255,0.25);38  }39  .toolbar {40    display: flex;41    align-items: center;42    padding: 20px 36px 28px;43    gap: 26px;44  }45  .toolbar-title {46    font-size: 52px;47    font-weight: 700;48    letter-spacing: 0.2px;49  }50  .icon-btn {51    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;52  }53  .icon-white { fill: #ffffff; stroke: #ffffff; }54 55  /* Content */56  .content {57    position: relative;58    padding: 28px 36px 180px;59    background: #fff;60  }61 62  .hotel-title {63    font-size: 52px;64    font-weight: 800;65    margin: 24px 0 24px;66  }67 68  .rating-row {69    display: flex;70    align-items: center;71    gap: 24px;72    margin-bottom: 20px;73  }74  .score-box {75    background: #133a84;76    color: #fff;77    width: 110px;78    height: 86px;79    border-radius: 18px;80    display: flex; align-items: center; justify-content: center;81    font-size: 40px; font-weight: 800;82  }83  .rating-text .title { font-size: 36px; font-weight: 700; }84  .rating-text .sub { font-size: 30px; color: #6b6f75; }85 86  .divider { height: 1px; background: #e6e7ea; margin: 22px 0; }87 88  .row-select {89    display: flex; align-items: center;90    justify-content: space-between;91    padding: 28px 4px;92    font-size: 36px;93  }94  .row-select .label { font-weight: 800; color: #202228; }95  .row-select .value { font-weight: 500; color: #555b62; }96 97  .topics-header {98    display: flex; align-items: center; justify-content: space-between;99    margin-top: 10px; margin-bottom: 22px;100  }101  .topics-header .label {102    font-size: 38px; font-weight: 800;103  }104 105  .chips { display: flex; flex-wrap: wrap; gap: 18px 18px; }106  .chip {107    display: inline-flex;108    align-items: center;109    gap: 12px;110    padding: 18px 28px;111    border: 2px solid #cfcfcf;112    border-radius: 44px;113    font-size: 34px;114    color: #2a2a2a;115    background: #fff;116  }117 118  .sort-row {119    display: flex; align-items: center; justify-content: space-between;120    padding: 30px 4px;121    font-size: 36px;122    border-top: 1px solid #e6e7ea;123    border-bottom: 1px solid #e6e7ea;124    margin-top: 18px;125  }126  .sort-row .label { font-weight: 800; }127  .sort-row .value { color: #555b62; font-weight: 600; display: inline-flex; align-items: center; gap: 12px; }128 129  /* Review card */130  .review-card {131    position: relative;132    border: 1px solid #e0e0e0;133    border-radius: 18px;134    background: #fff;135    padding: 26px 28px 28px;136    margin-top: 26px;137  }138  .review-top { display: flex; align-items: center; gap: 24px; }139  .avatar {140    width: 86px; height: 86px; border-radius: 50%;141    background: #d9d9d9; color: #666; font-weight: 800; font-size: 40px;142    display: flex; align-items: center; justify-content: center;143  }144  .user-info { display: flex; flex-direction: column; gap: 6px; }145  .user-name { font-size: 36px; font-weight: 800; }146  .user-country { display: flex; align-items: center; gap: 12px; color: #6b6f75; font-size: 30px; }147  .flag-placeholder {148    width: 70px; height: 44px; background: #E0E0E0; border: 1px solid #BDBDBD;149    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px; border-radius: 4px;150  }151  .review-score {152    position: absolute; right: 24px; top: 24px;153    background: #133a84; color: #fff; font-weight: 800; font-size: 36px;154    padding: 14px 18px; border-radius: 12px;155  }156  .date { margin-top: 18px; color: #6b6f75; font-size: 30px; }157  .review-title {158    margin-top: 14px;159    font-size: 40px; font-weight: 800; line-height: 1.25;160  }161  .review-body {162    margin-top: 18px; display: flex; align-items: center; gap: 16px;163    font-size: 34px; color: #333;164  }165  .green { color: #24a159; }166 167  /* Bottom CTA */168  .bottom-cta {169    position: absolute;170    left: 20px; right: 20px; bottom: 120px;171    height: 118px; background: #2e6fbe; color: #fff; border-radius: 10px;172    display: flex; align-items: center; justify-content: center;173    font-size: 40px; font-weight: 800;174    box-shadow: 0 3px 6px rgba(0,0,0,0.15);175  }176  .home-indicator {177    position: absolute; bottom: 40px; left: 50%;178    transform: translateX(-50%);179    width: 320px; height: 12px; background: #e5e5e5; border-radius: 10px;180  }181 182  /* Small helper icons */183  .chev-icon { width: 40px; height: 40px; }184  .search-icon { width: 40px; height: 40px; }185</style>186</head>187<body>188<div id="render-target">189  <!-- Header area -->190  <div class="header">191    <div class="status">192      8:45193      <div class="spacer"></div>194      <div class="status-icons">195        <div class="pill"></div>196        <div class="pill"></div>197        <div class="pill" style="width:54px;"></div>198      </div>199    </div>200    <div class="toolbar">201      <div class="icon-btn">202        <svg class="icon-white" viewBox="0 0 48 48">203          <path d="M30 10 L16 24 L30 38" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>204        </svg>205      </div>206      <div class="toolbar-title">Reviews</div>207      <div class="spacer"></div>208      <div class="icon-btn" title="Info">209        <svg class="icon-white" viewBox="0 0 48 48">210          <circle cx="24" cy="24" r="20" fill="none" stroke-width="3"></circle>211          <circle cx="24" cy="16" r="2"></circle>212          <path d="M24 22 L24 34" stroke-width="3" fill="none" stroke-linecap="round"></path>213        </svg>214      </div>215    </div>216  </div>217 218  <!-- Content -->219  <div class="content">220    <div class="hotel-title">Guest reviews for Sallés Hotel Pere IV</div>221 222    <div class="rating-row">223      <div class="score-box">8.1</div>224      <div class="rating-text">225        <div class="title">Very Good</div>226        <div class="sub">7665 reviews</div>227      </div>228      <div class="spacer"></div>229      <svg class="chev-icon" viewBox="0 0 24 24">230        <path d="M6 9 L12 15 L18 9" fill="none" stroke="#73777e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>231      </svg>232    </div>233 234    <div class="divider"></div>235 236    <div class="row-select">237      <div>238        <span class="label">Filter by:</span>239        <span class="value"> All Reviews</span>240      </div>241      <svg class="chev-icon" viewBox="0 0 24 24">242        <path d="M6 9 L12 15 L18 9" fill="none" stroke="#73777e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>243      </svg>244    </div>245 246    <div class="divider"></div>247 248    <div class="row-select">249      <div>250        <span class="label">Show reviews in:</span>251        <span class="value"> All languages</span>252      </div>253      <svg class="chev-icon" viewBox="0 0 24 24">254        <path d="M6 9 L12 15 L18 9" fill="none" stroke="#73777e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>255      </svg>256    </div>257 258    <div class="divider"></div>259 260    <div class="row-select">261      <div>262        <span class="label">Filter by:</span>263        <span class="value"> Time of year</span>264      </div>265      <svg class="chev-icon" viewBox="0 0 24 24">266        <path d="M6 9 L12 15 L18 9" fill="none" stroke="#73777e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>267      </svg>268    </div>269 270    <div class="divider"></div>271 272    <div class="topics-header">273      <div class="label">Select a topic to search reviews:</div>274      <svg class="chev-icon" viewBox="0 0 24 24">275        <path d="M6 9 L12 15 L18 9" fill="none" stroke="#73777e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>276      </svg>277    </div>278 279    <div class="chips">280      <div class="chip">Room</div>281      <div class="chip">Spa</div>282      <div class="chip">Breakfast</div>283      <div class="chip">Swimming pool</div>284      <div class="chip">Clean</div>285      <div class="chip">Location</div>286      <div class="chip">Suite</div>287      <div class="chip">Bed</div>288      <div class="chip">Onsen</div>289      <div class="chip">Bar</div>290      <div class="chip">291        <svg class="search-icon" viewBox="0 0 24 24">292          <circle cx="10" cy="10" r="6" fill="none" stroke="#6b6f75" stroke-width="2"></circle>293          <path d="M14.5 14.5 L20 20" stroke="#6b6f75" stroke-width="2" stroke-linecap="round"></path>294        </svg>295      </div>296    </div>297 298    <div class="sort-row">299      <div class="label">Sort by:</div>300      <div class="value">301        Most relevant302        <svg class="chev-icon" viewBox="0 0 24 24">303          <path d="M6 9 L12 15 L18 9" fill="none" stroke="#73777e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>304        </svg>305      </div>306    </div>307 308    <!-- Review Card -->309    <div class="review-card">310      <div class="review-score">8.0</div>311      <div class="review-top">312        <div class="avatar">T</div>313        <div class="user-info">314          <div class="user-name">Tobias</div>315          <div class="user-country">316            <div class="flag-placeholder">[IMG: Denmark Flag]</div>317            Denmark318          </div>319        </div>320      </div>321      <div class="date">Tue, 17 Oct 2023</div>322      <div class="review-title">Beautiful hotel, nice breakfast - but also expected for that cost.</div>323      <div class="review-body">324        <svg viewBox="0 0 48 48" width="40" height="40">325          <circle cx="24" cy="24" r="20" fill="none" stroke="#24a159" stroke-width="3"></circle>326          <path d="M16 26 Q24 34 32 26" fill="none" stroke="#24a159" stroke-width="3" stroke-linecap="round"></path>327          <circle cx="18" cy="18" r="2" fill="#24a159"></circle>328          <circle cx="30" cy="18" r="2" fill="#24a159"></circle>329        </svg>330        <span><span class="green">Breakfast was nice.</span> The location nice as well.</span>331      </div>332    </div>333 334  </div>335 336  <!-- Bottom CTA and home indicator -->337  <div class="bottom-cta">Select rooms</div>338  <div class="home-indicator"></div>339</div>340</body>341</html>