GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Hotel Details - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    color: #1c1c1c;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    background: #153e84;22    color: #fff;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    box-sizing: border-box;28  }29  .status-left {30    font-weight: 600;31    font-size: 40px;32    letter-spacing: 0.5px;33  }34  .status-center {35    display: flex;36    gap: 16px;37  }38  .dot {39    width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9;40  }41  .status-right {42    display: flex; align-items: center; gap: 24px;43  }44  .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 4; }45 46  /* Top app bar */47  .appbar {48    height: 160px;49    background: #153e84;50    color: #fff;51    padding: 0 36px;52    display: flex;53    align-items: center;54    box-sizing: border-box;55    border-bottom-left-radius: 0;56    border-bottom-right-radius: 0;57    position: relative;58  }59  .appbar .title {60    font-size: 46px;61    font-weight: 600;62    margin-left: 24px;63  }64  .appbar .left {65    display: flex; align-items: center;66  }67  .appbar .right {68    margin-left: auto;69    display: flex; align-items: center; gap: 36px;70  }71  .icon-btn svg {72    width: 56px; height: 56px;73    stroke: #fff; fill: none; stroke-width: 4;74  }75  .back-icon svg { width: 64px; height: 64px; }76 77  /* Content area */78  .content {79    padding: 36px;80    box-sizing: border-box;81  }82  .two-col {83    display: grid;84    grid-template-columns: 1fr 1fr;85    column-gap: 36px;86    row-gap: 16px;87  }88  .label {89    font-size: 38px;90    color: #555;91  }92  .value {93    font-size: 42px;94    color: #1976d2;95    font-weight: 600;96    margin-top: 8px;97  }98  .full-row {99    margin-top: 36px;100  }101 102  /* Map card */103  .card {104    margin-top: 36px;105    background: #fff;106    border-radius: 12px;107    border: 1px solid #E0E0E0;108    box-shadow: 0 1px 0 rgba(0,0,0,0.06);109    padding: 28px;110  }111  .image-placeholder {112    width: 100%;113    height: 520px;114    background: #E0E0E0;115    border: 1px solid #BDBDBD;116    border-radius: 8px;117    display: flex; align-items: center; justify-content: center;118    color: #757575;119    font-size: 36px;120    font-weight: 600;121  }122  .desc {123    font-size: 40px;124    line-height: 1.4;125    color: #333;126    margin-top: 28px;127  }128 129  .divider {130    height: 24px;131    background: #f0f0f0;132    margin: 36px -36px;133  }134 135  /* Nearby beaches */136  .section-title {137    font-size: 48px; font-weight: 700; color: #333; margin-bottom: 28px;138  }139  .list {140    display: flex; flex-direction: column; gap: 34px;141  }142  .list-item {143    display: flex; justify-content: space-between; align-items: center;144    font-size: 44px;145  }146  .distance {147    color: #757575;148    font-size: 42px;149  }150 151  /* Bottom CTA */152  .bottom-bar {153    position: absolute;154    left: 0; right: 0; bottom: 72px;155    padding: 24px 28px;156    background: #ffffff;157    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);158  }159  .cta-btn {160    width: 100%;161    height: 140px;162    background: #2f66b3;163    color: #fff;164    font-size: 48px;165    font-weight: 700;166    border-radius: 16px;167    display: flex; align-items: center; justify-content: center;168  }169  .home-indicator {170    position: absolute;171    bottom: 16px; left: 50%;172    transform: translateX(-50%);173    width: 320px; height: 16px;174    background: #1a1a1a;175    opacity: 0.9;176    border-radius: 10px;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div class="status-left">8:44</div>186    <div class="status-center">187      <div class="dot"></div>188      <div class="dot"></div>189      <div class="dot"></div>190      <div class="dot" style="opacity:0.6;"></div>191    </div>192    <div class="status-right">193      <div class="status-icon">194        <!-- WiFi icon -->195        <svg viewBox="0 0 24 24">196          <path d="M2 8c5-4 15-4 20 0"/>197          <path d="M5 12c3-3 11-3 14 0"/>198          <path d="M9 16c2-2 4-2 6 0"/>199          <circle cx="12" cy="20" r="1.8" fill="#fff" stroke="none"></circle>200        </svg>201      </div>202      <div class="status-icon">203        <!-- Battery icon -->204        <svg viewBox="0 0 28 16">205          <rect x="1" y="2" width="22" height="12" rx="2"></rect>206          <rect x="24" y="5" width="3" height="6" rx="1"></rect>207          <rect x="3" y="4" width="17" height="8" rx="1" fill="#fff" stroke="none"></rect>208        </svg>209      </div>210    </div>211  </div>212 213  <!-- App bar -->214  <div class="appbar">215    <div class="left">216      <div class="back-icon icon-btn">217        <svg viewBox="0 0 24 24">218          <path d="M15 5l-7 7 7 7" />219        </svg>220      </div>221      <div class="title">Sallés Hotel Pere IV</div>222    </div>223    <div class="right">224      <div class="icon-btn" aria-label="Favorite">225        <svg viewBox="0 0 24 24">226          <path d="M12 21s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-11 10z"/>227        </svg>228      </div>229      <div class="icon-btn" aria-label="Share">230        <svg viewBox="0 0 24 24">231          <circle cx="6" cy="12" r="2"></circle>232          <circle cx="18" cy="6" r="2"></circle>233          <circle cx="18" cy="18" r="2"></circle>234          <path d="M8 12l8-6M8 12l8 6" />235        </svg>236      </div>237    </div>238  </div>239 240  <!-- Main content -->241  <div class="content">242    <div class="two-col">243      <div>244        <div class="label">Check-in</div>245        <div class="value">Wed, Nov 01</div>246      </div>247      <div>248        <div class="label">Check-out</div>249        <div class="value">Sun, Nov 05</div>250      </div>251    </div>252 253    <div class="full-row">254      <div class="label">Rooms and guests</div>255      <div class="value">1 room, 2 adults, 0 children</div>256    </div>257 258    <div class="card">259      <div class="image-placeholder">[IMG: Google Map - Hotel location]</div>260      <div class="desc">261        Pallars, 128-130, 08018 Barcelona, Spain • 850 feet from subway/metro station (Bogatell) • 1.3 miles from downtown/center262      </div>263    </div>264 265    <div class="divider"></div>266 267    <div class="section-title">Nearby beaches</div>268    <div class="list">269      <div class="list-item">270        <div>Nova Icaria Beach</div><div class="distance">0.7 mi. away</div>271      </div>272      <div class="list-item">273        <div>Bogatell Beach</div><div class="distance">0.7 mi. away</div>274      </div>275      <div class="list-item">276        <div>Somorrostro Beach</div><div class="distance">0.8 mi. away</div>277      </div>278      <div class="list-item">279        <div>Mar Bella Beach</div><div class="distance">0.9 mi. away</div>280      </div>281      <div class="list-item">282        <div>Barceloneta Beach</div><div class="distance">1.1 mi. away</div>283      </div>284      <div class="list-item">285        <div>Nova Mar Bella Beach</div><div class="distance">1.1 mi. away</div>286      </div>287      <div class="list-item">288        <div>Llevant</div><div class="distance">1.3 mi. away</div>289      </div>290      <div class="list-item">291        <div>Sant Miquel Beach</div><div class="distance">1.3 mi. away</div>292      </div>293      <div class="list-item">294        <div>Sant Sebastian Beach</div><div class="distance">1.6 mi. away</div>295      </div>296    </div>297  </div>298 299  <!-- Bottom CTA -->300  <div class="bottom-bar">301    <div class="cta-btn">Select rooms</div>302  </div>303  <div class="home-indicator"></div>304 305</div>306</body>307</html>