GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Hotel Listing UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: linear-gradient(180deg, #0b0e12 0%, #0a1016 40%, #0b1218 100%);13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    display: flex;24    align-items: center;25    padding: 0 40px;26    color: #eaeaea;27    font-weight: 600;28    font-size: 42px;29    letter-spacing: 0.5px;30    z-index: 5;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .status-icon { width: 36px; height: 36px; opacity: 0.9; }39 40  /* Hero image */41  .hero {42    position: absolute;43    top: 0;44    left: 0;45    width: 1080px;46    height: 1050px;47    background: #E0E0E0;48    border-bottom: 1px solid #BDBDBD;49    display: flex;50    align-items: center;51    justify-content: center;52    color: #757575;53    font-size: 40px;54  }55  .top-actions {56    position: absolute;57    top: 130px;58    left: 30px;59    right: 30px;60    display: flex;61    align-items: center;62    justify-content: space-between;63    z-index: 6;64  }65  .icon-btn {66    width: 88px;67    height: 88px;68    display: inline-flex;69    align-items: center;70    justify-content: center;71    border-radius: 44px;72    background: rgba(0,0,0,0.35);73  }74  .icon-btn svg { width: 44px; height: 44px; stroke: #fff; }75  .right-actions { display: flex; gap: 24px; }76 77  .pager {78    position: absolute;79    top: 720px;80    width: 100%;81    display: flex;82    justify-content: center;83    gap: 16px;84    z-index: 4;85  }86  .dot {87    width: 20px; height: 20px; border-radius: 50%;88    background: rgba(255,255,255,0.85);89  }90  .dot.dim { background: rgba(255,255,255,0.45); }91  .count {92    position: absolute;93    right: 36px;94    top: 740px;95    color: rgba(255,255,255,0.85);96    font-size: 34px;97    z-index: 4;98  }99 100  /* Bottom card */101  .sheet {102    position: absolute;103    left: 0;104    right: 0;105    top: 880px;106    height: 1520px;107    background: #0b141a;108    border-top-left-radius: 64px;109    border-top-right-radius: 64px;110    box-shadow: 0 -12px 40px rgba(0,0,0,0.45);111    padding: 70px 50px 40px;112  }113  .hotel-title {114    font-size: 64px; font-weight: 800; letter-spacing: 0.2px;115  }116  .stars {117    display: inline-flex; gap: 8px; margin-left: 16px; vertical-align: middle;118  }119  .stars svg { width: 40px; height: 40px; fill: #ff5a3a; }120  .details-row {121    color: #6dd5e6;122    font-size: 34px;123    margin-top: 26px;124    display: flex;125    align-items: center;126    gap: 20px;127  }128  .edit-icon { width: 34px; height: 34px; stroke: #6dd5e6; }129  .rating-row {130    margin-top: 40px;131    display: flex;132    align-items: center;133    gap: 22px;134    font-size: 42px;135  }136  .trip-dots { display: inline-flex; gap: 8px; }137  .trip-dot { width: 22px; height: 22px; border-radius: 50%; background: #35d39d; }138  .reviews { color: #c9d0d6; font-size: 40px; }139 140  .pill {141    margin-top: 28px;142    display: inline-flex;143    align-items: center;144    gap: 16px;145    background: #0f2b2e;146    color: #9ce9e8;147    padding: 18px 26px;148    border-radius: 18px;149    font-size: 34px;150  }151  .thumb { width: 34px; height: 34px; fill: #9ce9e8; }152 153  .address {154    margin-top: 34px;155    display: flex;156    align-items: center;157    gap: 18px;158    color: #cbd3da;159    font-size: 36px;160  }161  .pin { width: 34px; height: 34px; fill: #cbd3da; }162 163  .section-title {164    margin-top: 54px;165    color: #bfc7ce;166    font-size: 44px;167    font-weight: 700;168  }169 170  .price-card {171    margin-top: 28px;172    background: #0d1b22;173    border-radius: 26px;174    padding: 34px;175    display: flex;176    flex-direction: column;177    gap: 22px;178  }179  .pc-top {180    display: flex; align-items: center;181  }182  .logo-box {183    width: 280px; height: 140px;184    background: #E0E0E0; border: 1px solid #BDBDBD;185    display: flex; align-items: center; justify-content: center;186    color: #757575; font-weight: 700; border-radius: 16px;187    font-size: 42px;188  }189  .price {190    margin-left: auto;191    text-align: right;192    color: #fff;193    font-size: 72px;194    font-weight: 800;195  }196  .price small { color: #b5bbc1; font-size: 34px; font-weight: 600; margin-left: 10px; }197 198  .pc-mid {199    display: flex;200    justify-content: space-between;201    color: #8b949c;202    font-size: 34px;203    padding: 0 8px;204  }205  .cta {206    margin-top: 20px;207    width: 100%;208    background: #1799a1;209    color: #fff;210    font-size: 46px;211    font-weight: 800;212    padding: 28px 0;213    border: none;214    border-radius: 18px;215    letter-spacing: 0.5px;216  }217 218  .footer-row {219    margin-top: 36px;220    display: flex;221    justify-content: space-between;222    align-items: center;223    color: #cdd4da;224    font-size: 40px;225  }226  .see-all { color: #85e5ef; font-weight: 700; }227 228  /* Home indicator */229  .home-indicator {230    position: absolute;231    bottom: 22px;232    left: 50%;233    transform: translateX(-50%);234    width: 390px; height: 12px;235    background: #e5e5e5;236    border-radius: 8px;237    opacity: 0.9;238  }239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Status bar -->245  <div class="status-bar">246    10:04247    <div class="status-right">248      <!-- simple status icons -->249      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#fff"/></svg>250      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#9fe8ff"/></svg>251      <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="3" fill="#fff"/></svg>252      <svg class="status-icon" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" stroke="#fff" fill="none" stroke-width="2"/><rect x="20" y="10" width="2" height="4" fill="#fff"/></svg>253    </div>254  </div>255 256  <!-- Hero image placeholder -->257  <div class="hero">[IMG: Hotel photo banner]</div>258 259  <!-- Top overlay actions -->260  <div class="top-actions">261    <div class="icon-btn">262      <!-- back arrow -->263      <svg viewBox="0 0 24 24" stroke-width="2" fill="none">264        <path d="M15 5l-7 7 7 7" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"/>265      </svg>266    </div>267    <div class="right-actions">268      <div class="icon-btn">269        <!-- heart -->270        <svg viewBox="0 0 24 24" stroke-width="2" fill="none">271          <path d="M12 21s-6-4.35-9-8.2C-1 7.5 3 3 7 5.2c2 .9 3 2.8 5 2.8s3-1.9 5-2.8C21 3 25 7.5 21 12.8C18 16.65 12 21 12 21z" stroke="#fff" stroke-linejoin="round"/>272        </svg>273      </div>274      <div class="icon-btn">275        <!-- share -->276        <svg viewBox="0 0 24 24" stroke-width="2" fill="none">277          <circle cx="18" cy="5" r="3" stroke="#fff"/>278          <circle cx="6" cy="12" r="3" stroke="#fff"/>279          <circle cx="18" cy="19" r="3" stroke="#fff"/>280          <path d="M8.5 11l7-4M8.5 13l7 4" stroke="#fff" stroke-linecap="round"/>281        </svg>282      </div>283    </div>284  </div>285 286  <!-- pager dots and count -->287  <div class="pager">288    <div class="dot"></div>289    <div class="dot dim"></div>290    <div class="dot dim"></div>291    <div class="dot dim"></div>292  </div>293  <div class="count">1/123</div>294 295  <!-- Bottom sheet content -->296  <div class="sheet">297    <div class="hotel-title">298      Hyatt Regency Vancouver299      <span class="stars">300        <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9l-5 4.9L18.2 21 12 17.8 5.8 21 7 13.9 2 9l6.9-0.7L12 2z"/></svg>301        <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9l-5 4.9L18.2 21 12 17.8 5.8 21 7 13.9 2 9l6.9-0.7L12 2z"/></svg>302        <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9l-5 4.9L18.2 21 12 17.8 5.8 21 7 13.9 2 9l6.9-0.7L12 2z"/></svg>303        <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9l-5 4.9L18.2 21 12 17.8 5.8 21 7 13.9 2 9l6.9-0.7L12 2z"/></svg>304      </span>305    </div>306 307    <div class="details-row">308      DEC 15 – 16, 2023, 3 ADULTS, 2 ROOMS309      <svg class="edit-icon" viewBox="0 0 24 24" fill="none">310        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" stroke="#6dd5e6"/>311        <path d="M20.71 7.04a1.0 1.0 0 0 0 0-1.41l-2.34-2.34a1.0 1.0 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" stroke="#6dd5e6"/>312      </svg>313    </div>314 315    <div class="rating-row">316      <div>4.5</div>317      <div class="trip-dots">318        <div class="trip-dot"></div>319        <div class="trip-dot"></div>320        <div class="trip-dot"></div>321        <div class="trip-dot"></div>322        <div class="trip-dot" style="opacity:0.7"></div>323      </div>324      <div class="reviews">(5,945)</div>325    </div>326 327    <div class="pill">328      <svg class="thumb" viewBox="0 0 24 24"><path d="M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6l1-4V3a2 2 0 0 0-4 0v5l-4 6v7h11c1.1 0 2-.9 2-2l0-8z"/></svg>329      Location 5.0/5330    </div>331 332    <div class="address">333      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>334      655 Burrard Street, V6C 2R7 Vancouver, Canada335    </div>336 337    <div class="section-title">Lowest price for 1 night</div>338 339    <div class="price-card">340      <div class="pc-top">341        <div class="logo-box">algotels</div>342        <div class="price">$395 <small>total</small></div>343      </div>344      <div class="pc-mid">345        <div>Taxes and fees not included.</div>346        <div style="color:#c9fff9;">Free cancellation</div>347      </div>348      <button class="cta">GO TO SITE</button>349    </div>350 351    <div class="footer-row">352      <div>More popular choices</div>353      <div class="see-all">See all</div>354    </div>355  </div>356 357  <div class="home-indicator"></div>358</div>359</body>360</html>