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>Live Aqua Urban Resort Mexico - Reviews</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#FFFFFF;12    color:#111;13  }14 15  /* Header / App bar */16  .appbar {17    position:absolute; left:0; top:0; width:100%;18    background:#133b8f;19    color:#fff;20    padding-top:18px;21    box-sizing:border-box;22  }23  .status {24    display:flex; align-items:center; justify-content:flex-start;25    padding:12px 28px 8px 28px;26    font-size:32px; letter-spacing:0.5px;27    opacity:0.95;28  }29  .status .dot { width:10px; height:10px; background:#fff; border-radius:50%; margin-left:12px; opacity:0.9; }30  .nav {31    display:flex; align-items:center; justify-content:space-between;32    padding:18px 24px 24px 24px;33  }34  .nav-left { display:flex; align-items:center; gap:18px; }35  .title {36    font-size:40px; font-weight:700; line-height:1.2; max-width:760px;37  }38  .icon-btn {39    width:64px; height:64px; display:flex; align-items:center; justify-content:center;40    background:transparent; border:none; padding:0; color:#fff;41  }42  .icon {43    width:40px; height:40px; fill:#fff;44  }45 46  /* Content */47  .content {48    position:absolute; top:190px; left:0; right:0; bottom:160px;49    overflow:hidden;50  }51  .scroll {52    height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;53    padding:24px 24px 200px 24px; box-sizing:border-box;54  }55 56  .rating-card {57    margin-top:12px;58    background:#fff;59    border-top:1px solid #e6e6e6;60    padding-top:28px;61  }62  .row {63    display:flex; align-items:center;64  }65  .score-box {66    width:112px; height:112px; background:#1a73e8; color:#fff;67    border-radius:20px; display:flex; align-items:center; justify-content:center;68    font-weight:800; font-size:44px; margin-right:22px;69  }70  .rating-text h2 { margin:0; font-size:46px; font-weight:800; }71  .link { color:#2b6fe8; font-size:30px; margin-top:8px; }72  .metric {73    margin-top:36px;74  }75  .metric .label {76    display:flex; align-items:center; justify-content:space-between;77    font-size:34px; margin-bottom:10px;78  }79  .metric .left {80    display:flex; align-items:center; gap:12px;81  }82  .up {83    width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent;84    border-bottom:16px solid #2e7d32; margin-top:-6px;85  }86  .progress {87    width:100%; height:18px; background:#eee; border-radius:10px;88    overflow:hidden;89  }90  .progress .fill {91    height:100%; background:#2e7d32; width:94%;92  }93  .progress .fill.wide { width:96%; }94  .progress .fill.widest { width:97%; }95  .metric .value {96    color:#111; font-weight:700; margin-left:16px;97  }98  .hint {99    color:#3a7f3a; font-size:30px; display:flex; align-items:center; gap:12px;100    margin-top:22px;101  }102 103  .summary-link {104    margin-top:28px; color:#2b6fe8; font-size:34px; display:flex; align-items:center; gap:10px;105  }106  .chev-down {107    width:22px; height:22px; border:2px solid #2b6fe8; border-left:none; border-top:none;108    transform:rotate(45deg); margin-top:-6px;109  }110 111  /* Reviews */112  .section-title {113    font-size:48px; font-weight:800; margin:36px 0 20px 0;114  }115  .review {116    display:flex; align-items:flex-start; gap:22px;117    padding:22px 0;118    border-bottom:1px solid #e6e6e6;119  }120  .avatar {121    width:78px; height:78px; border-radius:50%; background:#e0e0e0;122    display:flex; align-items:center; justify-content:center; font-weight:700; color:#555; border:1px solid #cfcfcf;123    flex-shrink:0;124  }125  .review-body { flex:1; }126  .review-header {127    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;128  }129  .name {130    font-size:36px; font-weight:800;131  }132  .pill {133    display:inline-flex; align-items:center; gap:10px; color:#555; font-size:30px; margin-top:6px;134  }135  .flag {136    width:44px; height:28px; background:#E0E0E0; border:1px solid #BDBDBD;137    display:inline-flex; align-items:center; justify-content:center; color:#757575; font-size:18px;138  }139  .quote {140    font-size:38px; line-height:1.45; color:#333; margin-top:10px;141  }142 143  /* Sticky bottom button */144  .sticky {145    position:absolute; left:0; right:0; bottom:0;146    background:#0e57d9; height:144px;147    display:flex; align-items:center; justify-content:center;148    box-shadow:0 -2px 10px rgba(0,0,0,0.15);149  }150  .sticky span {151    color:#fff; font-size:44px; font-weight:800; letter-spacing:0.3px;152  }153 154  /* Small utilities */155  .spacer-8 { height:8px; }156</style>157</head>158<body>159<div id="render-target">160  <!-- App Bar -->161  <div class="appbar">162    <div class="status">163      <div>7:17</div>164      <div class="dot"></div>165      <div class="dot"></div>166    </div>167    <div class="nav">168      <div class="nav-left">169        <button class="icon-btn" aria-label="Back">170          <svg class="icon" viewBox="0 0 24 24">171            <path d="M14.7 5.3L9 11l5.7 5.7-1.4 1.4L6.2 12l7.1-7.1z"/>172          </svg>173        </button>174        <div class="title">Live Aqua Urban Resort Mexico</div>175      </div>176      <div class="nav-right" style="display:flex; align-items:center; gap:10px;">177        <button class="icon-btn" aria-label="Favorite">178          <svg class="icon" viewBox="0 0 24 24">179            <path d="M12 21.35l-1.45-1.32C6.4 16 4 13.76 4 10.99 4 8.79 5.79 7 8 7c1.26 0 2.45.59 3.2 1.52C11.55 7.59 12.74 7 14 7c2.21 0 4 1.79 4 3.99 0 2.77-2.4 5.01-6.55 9.04L12 21.35z" fill="none" stroke="#fff" stroke-width="1.5"/>180          </svg>181        </button>182        <button class="icon-btn" aria-label="Share">183          <svg class="icon" viewBox="0 0 24 24">184            <path d="M18 16.1c-.7 0-1.3.3-1.7.8L8.9 12.7c.1-.2.1-.5.1-.7s0-.5-.1-.7l7.3-4.2c.4.5 1 .8 1.7.8 1.3 0 2.3-1 2.3-2.2S19.3 2.2 18 2.2s-2.3 1-2.3 2.2c0 .2 0 .5.1.7l-7.3 4.2c-.4-.5-1-.8-1.7-.8-1.3 0-2.3 1-2.3 2.2s1 2.2 2.3 2.2c.7 0 1.3-.3 1.7-.8l6.9 4.1c-.1.2-.1.5-.1.7 0 1.2 1 2.2 2.3 2.2s2.3-1 2.3-2.2-1-2.2-2.3-2.2z"/>185          </svg>186        </button>187      </div>188    </div>189  </div>190 191  <!-- Content Scroll Area -->192  <div class="content">193    <div class="scroll">194      <!-- Rating area -->195      <div class="rating-card">196        <div class="row" style="align-items:flex-start;">197          <div class="score-box">9.5</div>198          <div class="rating-text">199            <h2>Exceptional</h2>200            <div class="link">See all 534 reviews</div>201          </div>202        </div>203 204        <!-- Metrics -->205        <div class="metric">206          <div class="label">207            <div class="left">208              <span>Cleanliness</span>209              <span class="up"></span>210            </div>211            <div class="value">9.7</div>212          </div>213          <div class="progress">214            <div class="fill widest"></div>215          </div>216        </div>217 218        <div class="metric">219          <div class="label">220            <div class="left">221              <span>Comfort</span>222              <span class="up"></span>223            </div>224            <div class="value">9.7</div>225          </div>226          <div class="progress">227            <div class="fill widest"></div>228          </div>229        </div>230 231        <div class="metric">232          <div class="label">233            <div class="left">234              <span>Facilities</span>235              <span class="up"></span>236            </div>237            <div class="value">9.6</div>238          </div>239          <div class="progress">240            <div class="fill wide"></div>241          </div>242        </div>243 244        <div class="hint">245          <span class="up"></span>246          <span>High score for Mexico City</span>247        </div>248 249        <div class="summary-link">250          <span>Show summary</span>251          <span class="chev-down"></span>252        </div>253      </div>254 255      <!-- Reviews list -->256      <div class="section-title">What guests loved the most:</div>257 258      <div class="review">259        <div class="avatar">S</div>260        <div class="review-body">261          <div class="review-header">262            <div class="name">Suzette – Family</div>263          </div>264          <div class="pill">265            <div class="flag">[Flag]</div>266            <span>United Kingdom</span>267          </div>268          <div class="quote">"lovely hotel, beautiful design and fantastic service"</div>269        </div>270      </div>271 272      <div class="review">273        <div class="avatar" style="background:#cde5cd;">C</div>274        <div class="review-body">275          <div class="review-header">276            <div class="name">Carlos – Couple</div>277          </div>278          <div class="pill">279            <div class="flag">[Flag]</div>280            <span>United States of America</span>281          </div>282          <div class="quote">283            "The Location and Property are excellent. All Staff Members from the reservation desk to every other284            person working at the Hotel are very professional and helpful."285          </div>286        </div>287      </div>288 289      <div class="review">290        <div class="avatar">A</div>291        <div class="review-body">292          <div class="review-header">293            <div class="name">Andrea – Couple</div>294          </div>295          <div class="pill">296            <div class="flag">[Flag]</div>297            <span>Mexico</span>298          </div>299          <div class="quote">300            "Beautiful rooms and amazing staff. Would definitely return!"301          </div>302        </div>303      </div>304 305    </div>306  </div>307 308  <!-- Sticky bottom action -->309  <div class="sticky">310    <span>Select rooms</span>311  </div>312</div>313</body>314</html>