GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Live Aqua Urban Resort Mexico - 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  /* Top app bar */16  .appbar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 180px;22    background: #0e3c89; /* booking-like blue */23    color: #fff;24  }25  .status-row {26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 24px 32px 0 32px;30    font-weight: 600;31    font-size: 40px;32  }33  .status-left { display: flex; align-items: center; gap: 22px; }34  .status-right { display: flex; align-items: center; gap: 26px; }35  .app-actions {36    position: absolute;37    right: 32px;38    top: 94px;39    display: flex;40    gap: 28px;41  }42  .back-btn {43    position: absolute;44    left: 28px;45    top: 92px;46    width: 72px;47    height: 72px;48    display: flex;49    align-items: center;50    justify-content: center;51  }52  .icon { width: 50px; height: 50px; fill: #ffffff; }53  .icon-outline { stroke: #ffffff; stroke-width: 6; fill: none; }54 55  /* Content below app bar */56  .content {57    position: absolute;58    top: 180px;59    left: 0;60    right: 0;61    bottom: 0;62    overflow-y: auto;63  }64 65  .title-block {66    padding: 30px 32px 20px 32px;67    color: #222;68  }69  .hotel-title {70    font-size: 66px;71    font-weight: 700;72    line-height: 1.15;73    margin: 0 0 18px 0;74  }75  .rating-row {76    display: flex;77    align-items: center;78    gap: 12px;79  }80  .star { width: 40px; height: 40px; fill: #f7c948; }81  .thumb { width: 42px; height: 42px; fill: #f7c948; }82  .score-badge {83    margin-left: 20px;84    background: #0e3c89;85    color: #fff;86    font-weight: 700;87    border-radius: 18px;88    padding: 16px 20px;89    font-size: 40px;90  }91 92  /* Image collage */93  .img-grid {94    display: grid;95    grid-template-columns: 1fr 1fr;96    gap: 18px;97    padding: 0 32px 22px 32px;98  }99  .img-tile {100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    color: #757575;103    display: flex;104    align-items: center;105    justify-content: center;106    font-size: 36px;107    text-align: center;108  }109  .tile-large { height: 420px; }110  .img-row-2 {111    display: grid;112    grid-template-columns: 1fr 1fr 1fr;113    gap: 18px;114    padding: 0 32px 26px 32px;115  }116  .tile-medium { height: 320px; position: relative; }117  .overlay-count {118    position: absolute;119    right: 24px;120    top: 22px;121    background: rgba(0,0,0,0.6);122    color: #fff;123    padding: 10px 18px;124    border-radius: 14px;125    font-size: 44px;126    font-weight: 700;127  }128 129  /* Price card */130  .price-card {131    margin: 0 0 0 0;132    padding: 26px 32px 12px 32px;133    border-top: 1px solid #ececec;134  }135  .discount-tag {136    display: inline-block;137    background: #2dbf4f;138    color: #fff;139    border-radius: 10px;140    padding: 12px 16px;141    font-size: 36px;142    font-weight: 700;143    margin-bottom: 20px;144  }145  .price-row {146    display: flex;147    align-items: center;148    justify-content: space-between;149  }150  .price-text {151    color: #222;152  }153  .price-title {154    font-size: 44px;155    margin-bottom: 18px;156  }157  .strike {158    color: #d9534f;159    text-decoration: line-through;160    font-size: 46px;161    margin-right: 16px;162  }163  .new-price {164    font-size: 64px;165    font-weight: 800;166    color: #000;167  }168  .taxes {169    font-size: 36px;170    color: #666;171    margin-top: 6px;172  }173  .chevron {174    width: 46px;175    height: 46px;176    fill: none;177    stroke: #888;178    stroke-width: 8;179  }180 181  /* Check-in/out section */182  .check-section {183    border-top: 12px solid #f1f1f1;184    margin-top: 22px;185    padding: 22px 32px 8px 32px;186  }187  .check-row {188    display: grid;189    grid-template-columns: 1fr 1fr;190    gap: 28px;191  }192  .label {193    color: #333;194    font-size: 44px;195    font-weight: 700;196  }197  .value {198    color: #0e3c89;199    font-size: 50px;200    font-weight: 800;201    margin-top: 12px;202  }203 204  .guest-section {205    padding: 26px 32px 22px 32px;206  }207  .guest-title {208    font-size: 44px;209    font-weight: 700;210    color: #333;211  }212  .guest-value {213    font-size: 48px;214    color: #0e3c89;215    margin-top: 14px;216    font-weight: 800;217  }218 219  .map-preview {220    margin: 10px 32px 220px 32px;221    height: 220px;222    background: #E0E0E0;223    border: 1px solid #BDBDBD;224    color: #757575;225    display: flex;226    align-items: center;227    justify-content: center;228    font-size: 38px;229  }230 231  /* Bottom call-to-action button */232  .cta {233    position: absolute;234    bottom: 24px;235    left: 32px;236    right: 32px;237    height: 120px;238    background: #2a62c7;239    color: #fff;240    border-radius: 12px;241    display: flex;242    align-items: center;243    justify-content: center;244    font-size: 54px;245    font-weight: 800;246    box-shadow: 0 6px 14px rgba(0,0,0,0.2);247  }248 249</style>250</head>251<body>252<div id="render-target">253 254  <!-- App Bar -->255  <div class="appbar">256    <div class="status-row">257      <div class="status-left">258        <div>7:15</div>259        <div style="font-size:38px;">✉️</div>260        <div style="font-weight:800;">B.</div>261      </div>262      <div class="status-right">263        <!-- wifi icon -->264        <svg class="icon" viewBox="0 0 24 24">265          <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c2-1 4-1 6 0l-3 3-3-3z"/>266        </svg>267        <!-- battery icon -->268        <svg class="icon" viewBox="0 0 24 24">269          <rect x="2" y="6" width="18" height="12" fill="#ffffff" stroke="#ffffff" stroke-width="2"></rect>270          <rect x="4" y="8" width="14" height="8" fill="#0e3c89"></rect>271          <rect x="20" y="10" width="2" height="4" fill="#ffffff"></rect>272        </svg>273      </div>274    </div>275 276    <div class="back-btn">277      <svg class="icon" viewBox="0 0 24 24">278        <path d="M15 6l-6 6 6 6" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>279      </svg>280    </div>281 282    <div class="app-actions">283      <!-- heart outline -->284      <svg class="icon" viewBox="0 0 24 24">285        <path class="icon-outline" d="M12 21s-6-4.35-8.5-7A5.5 5.5 0 1 1 12 6a5.5 5.5 0 1 1 8.5 8c-2.5 2.65-8.5 7-8.5 7z"></path>286      </svg>287      <!-- share icon -->288      <svg class="icon" viewBox="0 0 24 24">289        <path d="M18 16a3 3 0 0 0-2.6 1.5L8.8 14a3 3 0 0 0 0-4l6.6-3.5A3 3 0 1 0 16 5a3 3 0 0 0-2.4 1.2L6.9 9.7a3 3 0 1 0 0 4.6l6.7 3.6A3 3 0 1 0 18 16z" fill="#ffffff"></path>290      </svg>291    </div>292  </div>293 294  <!-- Content -->295  <div class="content">296    <div class="title-block">297      <div class="hotel-title">Live Aqua Urban Resort Mexico</div>298      <div class="rating-row">299        <!-- stars -->300        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>301        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>302        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>303        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>304        <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>305        <!-- thumbs up -->306        <svg class="thumb" viewBox="0 0 24 24"><path d="M2 10h5v10H2V10zm7 10h8a3 3 0 0 0 3-3v-6a2 2 0 0 0-2-2h-5l1-5-5 4v12z"/></svg>307        <div class="score-badge">9.5</div>308      </div>309    </div>310 311    <!-- Image collage -->312    <div class="img-grid">313      <div class="img-tile tile-large">[IMG: Tall Building Exterior]</div>314      <div class="img-tile tile-large">[IMG: LIVE AQUA Logo]</div>315    </div>316    <div class="img-row-2">317      <div class="img-tile tile-medium">[IMG: Hotel Lobby Interior]</div>318      <div class="img-tile tile-medium">[IMG: Room & Freestanding Bathtub]</div>319      <div class="img-tile tile-medium">320        [IMG: Restaurant / Bar]321        <div class="overlay-count">+162</div>322      </div>323    </div>324 325    <!-- Price card -->326    <div class="price-card">327      <div class="discount-tag">30% off</div>328      <div class="price-row">329        <div class="price-text">330          <div class="price-title">Price for 1 night, 2 adults</div>331          <div>332            <span class="strike">US$665</span>333            <span class="new-price">US$466</span>334          </div>335          <div class="taxes">+ US$91 taxes and charges</div>336        </div>337        <svg class="chevron" viewBox="0 0 24 24">338          <path d="M8 4l8 8-8 8" />339        </svg>340      </div>341    </div>342 343    <!-- Check-in/out -->344    <div class="check-section">345      <div class="check-row">346        <div>347          <div class="label">Check-in</div>348          <div class="value">Fri, Oct 27</div>349        </div>350        <div>351          <div class="label">Check-out</div>352          <div class="value">Sat, Oct 28</div>353        </div>354      </div>355    </div>356 357    <!-- Guests -->358    <div class="guest-section">359      <div class="guest-title">Rooms and guests</div>360      <div class="guest-value">1 room, 2 adults, 0 children</div>361    </div>362 363    <!-- Map preview -->364    <div class="map-preview">[IMG: Map / Location Preview]</div>365  </div>366 367  <!-- CTA -->368  <div class="cta">Select rooms</div>369 370</div>371</body>372</html>