GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Live Aqua Urban Resort Mexico - UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Colors */17  .blue { background:#153C8A; }18  .accent { color:#1e63c9; }19  .muted { color:#6f7a86; }20 21  /* Top bars */22  .status-bar {23    height: 90px;24    padding: 0 40px;25    display: flex;26    align-items: center;27    color: #fff;28    font-weight: 600;29    font-size: 34px;30  }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 26px;36  }37  /* Simple icons */38  .icon { width: 48px; height: 48px; display: inline-block; }39  .icon svg { width: 100%; height: 100%; }40 41  /* Header */42  .app-bar {43    height: 150px;44    padding: 0 34px;45    display: flex;46    align-items: center;47    color: #fff;48  }49  .app-bar .title {50    font-size: 44px;51    font-weight: 700;52    margin-left: 24px;53  }54  .app-actions {55    margin-left: auto;56    display: flex;57    gap: 28px;58    align-items: center;59  }60 61  /* Content */62  .content {63    padding: 30px 34px 220px 34px; /* bottom padding to make room for sticky button */64    background: #fff;65  }66  .card {67    border-top: 1px solid #e5e7eb;68    padding-top: 28px;69  }70  .price-row {71    display: flex;72    align-items: baseline;73    gap: 18px;74  }75  .strike {76    color:#d23b3b;77    text-decoration: line-through;78    font-size: 42px;79    font-weight: 700;80  }81  .price {82    font-size: 66px;83    font-weight: 800;84    color:#111;85  }86  .chevron {87    margin-left: auto;88    width: 42px;89    height: 42px;90  }91  .subtext { font-size: 32px; color:#6f7a86; margin-top: 8px; }92 93  .section {94    border-top: 1px solid #e5e7eb;95    padding: 28px 0;96  }97  .two-col {98    display: grid;99    grid-template-columns: 1fr 1fr;100    gap: 20px;101  }102  .label { font-size: 32px; color:#2d3640; }103  .value { font-size: 40px; font-weight: 700; color:#1e63c9; margin-top: 8px; }104 105  .map {106    margin-top: 18px;107    width: 100%;108    height: 520px;109    background:#E0E0E0;110    border:1px solid #BDBDBD;111    display:flex; justify-content:center; align-items:center;112    color:#757575; font-size:34px; font-weight:600;113  }114 115  .address {116    margin-top: 22px;117    font-size: 34px;118    line-height: 1.45;119    color:#2d3640;120  }121 122  .rating-header {123    margin-top: 30px;124    display:flex; align-items:center; gap:24px;125  }126  .badge {127    width: 86px; height: 86px; background:#1e63c9; color:#fff; 128    display:flex; justify-content:center; align-items:center;129    border-radius:14px; font-size:38px; font-weight:800;130  }131  .rating-title {132    font-size: 44px; font-weight:800; color:#111;133  }134  .link { font-size: 30px; color:#6f7a86; margin-left: 8px; }135 136  .meter {137    margin-top: 34px;138  }139  .meter-row {140    display:flex; align-items:center; margin-bottom: 32px;141  }142  .meter-row .name { font-size: 36px; color:#2d3640; flex: 0 0 220px; }143  .meter-row .track {144    flex: 1;145    height: 16px;146    background:#e6e9eb;147    border-radius: 10px;148    margin: 0 18px;149    position: relative;150    overflow: hidden;151  }152  .meter-row .fill {153    position:absolute; left:0; top:0; bottom:0;154    background:#228b22;155    border-radius:10px;156  }157  .meter-row .score {158    font-size: 34px; color:#2d3640; width: 80px; text-align: right;159  }160 161  /* Sticky button */162  .sticky {163    position: absolute;164    left: 0; right: 0; bottom: 0;165    padding: 18px 24px 34px 24px;166    background: rgba(255,255,255,0.96);167    border-top: 1px solid #e5e7eb;168  }169  .cta {170    width: 100%;171    height: 120px;172    background:#1e63c9;173    color:#fff;174    border-radius: 16px;175    font-size: 46px;176    font-weight: 800;177    display:flex; align-items:center; justify-content:center;178    box-shadow: 0 4px 8px rgba(0,0,0,0.2);179  }180 181  /* Bottom gesture pill (visual only) */182  .gesture-pill {183    position: absolute;184    bottom: 12px;185    left: 50%;186    transform: translateX(-50%);187    width: 380px;188    height: 14px;189    background:#cfcfcf;190    border-radius: 10px;191  }192</style>193</head>194<body>195<div id="render-target">196 197  <!-- Top blue status bar -->198  <div class="status-bar blue">199    7:17200    <div class="status-right">201      <span style="font-size:32px;">M</span>202      <span style="font-size:32px;">B.</span>203      <span class="icon">204        <svg viewBox="0 0 24 24" fill="#fff"><path d="M3 8c4-4 14-4 18 0l-3 3c-3-3-9-3-12 0L3 8zm4 4c3-3 10-3 13 0l-3 3c-2-2-5-2-7 0l-3-3zm4 4c1-1 4-1 5 0l-3 3-2-3z"/></svg>205      </span>206      <span class="icon">207        <svg viewBox="0 0 24 24" fill="#fff"><path d="M16 4h-8C6.9 4 6 4.9 6 6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H8V6h8v12z"/></svg>208      </span>209    </div>210  </div>211 212  <!-- App bar -->213  <div class="app-bar blue">214    <span class="icon">215      <svg viewBox="0 0 24 24" fill="#fff"><path d="M15.5 5l-7 7 7 7 1.5-1.5L11 12l6-6z"/></svg>216    </span>217    <div class="title">Live Aqua Urban Resort Mexico</div>218    <div class="app-actions">219      <span class="icon">220        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 21s-6-4.35-9-8.5C1 9 3.5 6 6.5 6c2 0 3.5 1.5 5.5 3.5C14.5 7.5 16 6 18 6c3 0 5 3 5 6.5C18 16.65 12 21 12 21z"/></svg>221      </span>222      <span class="icon">223        <svg viewBox="0 0 24 24" fill="#fff"><path d="M18 8l-6-6-1.4 1.4L14.2 7H6v2h8.2l-3.6 3.6L12 14l6-6zM6 18h12v-2H6v2z"/></svg>224      </span>225    </div>226  </div>227 228  <!-- Content -->229  <div class="content">230    <div class="card">231      <div style="font-size:36px; color:#2d3640; margin-bottom:8px;">Price for 1 night, 2 adults</div>232      <div class="price-row">233        <div class="strike">US$665</div>234        <div class="price">US$466</div>235        <div class="chevron">236          <svg viewBox="0 0 24 24" fill="#9aa4af"><path d="M9 6l6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/></svg>237        </div>238      </div>239      <div class="subtext">+ US$91 taxes and charges</div>240    </div>241 242    <div class="section two-col">243      <div>244        <div class="label">Check-in</div>245        <div class="value">Fri, Oct 27</div>246      </div>247      <div>248        <div class="label">Check-out</div>249        <div class="value">Sat, Oct 28</div>250      </div>251    </div>252 253    <div class="section">254      <div class="label" style="font-size:38px; margin-bottom:12px;">Rooms and guests</div>255      <div class="value" style="font-size:38px; font-weight:700;">1 room, 2 adults, 0 children</div>256 257      <div class="map">[IMG: Google Map - Hotel Location]</div>258 259      <div class="address">260        Avenida Paseo de los Tamarindos Numero, 98. Colonia Bosques de las Lomas, 05120 Mexico City, Mexico • 8.4 miles from downtown/center261      </div>262 263      <div class="rating-header">264        <div class="badge">9.5</div>265        <div>266          <div class="rating-title">Exceptional</div>267          <div class="link">See all 534 reviews</div>268        </div>269      </div>270 271      <div class="meter">272        <div class="meter-row">273          <div class="name">Cleanliness</div>274          <div class="track"><div class="fill" style="width:97%;"></div></div>275          <div class="score">9.7</div>276        </div>277        <div class="meter-row">278          <div class="name">Comfort</div>279          <div class="track"><div class="fill" style="width:97%;"></div></div>280          <div class="score">9.7</div>281        </div>282        <div class="meter-row">283          <div class="name">Facilities</div>284          <div class="track"><div class="fill" style="width:96%;"></div></div>285          <div class="score">9.6</div>286        </div>287      </div>288    </div>289  </div>290 291  <!-- Sticky CTA -->292  <div class="sticky">293    <div class="cta">Select rooms</div>294  </div>295 296  <div class="gesture-pill"></div>297</div>298</body>299</html>