GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>All rooms - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F7F8FC;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #111;17  }18 19  /* Hero header */20  .hero {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 520px;24    background: linear-gradient(180deg, #ffd6dc 0%, #ffe1e6 100%);25    border-bottom-left-radius: 160px;26  }27  .hero .bubble {28    position: absolute;29    width: 420px; height: 420px;30    background: radial-gradient(circle at 30% 30%, #ff6b6b, #ff4a64);31    border-radius: 50%;32    right: -80px; bottom: -120px;33    opacity: 0.7;34  }35 36  .back-btn {37    position: absolute;38    top: 120px; left: 48px;39    width: 104px; height: 104px;40    border-radius: 52px;41    background: #fff;42    box-shadow: 0 8px 20px rgba(0,0,0,0.15);43    display: flex; align-items: center; justify-content: center;44  }45  .back-btn svg { width: 42px; height: 42px; stroke: #202124; }46 47  .title {48    position: absolute;49    left: 48px;50    top: 230px;51    font-weight: 800;52    font-size: 72px;53    letter-spacing: -0.5px;54    color: #222;55  }56 57  .currency-chip {58    position: absolute;59    right: 48px; top: 150px;60    background: #fff;61    border-radius: 40px;62    padding: 16px 26px;63    box-shadow: 0 6px 16px rgba(0,0,0,0.15);64    display: inline-flex; align-items: center; gap: 16px;65    font-weight: 600;66  }67  .currency-chip .coin {68    width: 56px; height: 56px; border-radius: 28px;69    background: #F7F9FF;70    border: 2px solid #E5EAF6;71    display: flex; align-items: center; justify-content: center;72    font-weight: 700; color: #2F6BFF;73  }74 75  /* Search card */76  .search-card {77    position: absolute;78    left: 48px; right: 48px;79    top: 360px;80    background: #fff;81    border-radius: 28px;82    box-shadow: 0 18px 40px rgba(0,0,0,0.15);83    overflow: hidden;84  }85  .tabs {86    display: flex;87    gap: 40px;88    padding: 32px 36px 18px 36px;89    font-size: 40px;90    align-items: flex-end;91    font-weight: 600;92    color: #7a7f8c;93    position: relative;94    border-bottom: 1px solid #E7EAF2;95  }96  .tab.active { color: #2F6BFF; }97  .active-line {98    position: absolute;99    left: 36px; bottom: 0;100    width: 200px; height: 6px; border-radius: 3px;101    background: #2F6BFF;102  }103  .new-badge {104    position: absolute;105    left: 450px; top: -18px;106    background: #E53935; color: #fff;107    font-size: 28px; font-weight: 700;108    padding: 10px 16px; border-radius: 10px;109    box-shadow: 0 6px 14px rgba(229,57,53,0.35);110  }111 112  .fields { padding: 28px 32px 36px; }113 114  .input-pill {115    height: 116px;116    background: #EEF2FF;117    border-radius: 58px;118    display: flex; align-items: center;119    padding: 0 34px;120    justify-content: space-between;121    color: #222;122    margin: 18px 0;123  }124  .input-left {125    display: flex; align-items: center; gap: 22px;126    font-size: 40px; font-weight: 600;127  }128  .input-left .hint { color: #4b4f58; font-weight: 600; }129  .pill-icon {130    width: 56px; height: 56px;131    display: flex; align-items: center; justify-content: center;132    color: #4b4f58;133  }134  .pill-row {135    display: flex; gap: 24px; margin: 18px 0;136  }137  .pill-row .half { flex: 1; }138 139  .action-row {140    display: flex; align-items: center; gap: 28px;141    margin-top: 12px;142  }143  .circle-tool {144    width: 116px; height: 116px;145    border-radius: 58px;146    border: 2px solid #9CBCFF;147    color: #2F6BFF;148    display: flex; align-items: center; justify-content: center;149    background: #F2F6FF;150  }151  .search-btn {152    flex: 1;153    height: 116px;154    border-radius: 58px;155    background: #2F6BFF;156    color: #fff;157    font-size: 44px;158    font-weight: 700;159    display: flex; align-items: center; justify-content: center;160    box-shadow: 0 10px 18px rgba(47,107,255,0.35);161  }162 163  /* Coupons section */164  .section {165    position: absolute;166    left: 48px; right: 48px;167    top: 1050px;168  }169  .section h2 {170    margin: 0 0 26px 0;171    font-size: 52px; font-weight: 800; color: #2b2e33;172  }173  .coupon-list {174    display: flex; gap: 24px;175  }176  .coupon-card {177    background: #fff;178    border-radius: 26px;179    border: 1px solid #DFE6F2;180    width: 964px;181    height: 300px;182    display: flex; overflow: hidden;183    box-shadow: 0 8px 18px rgba(0,0,0,0.06);184  }185  .coupon-img {186    width: 260px; height: 100%;187    background: #E0E0E0;188    border-right: 1px solid #BDBDBD;189    display: flex; align-items: center; justify-content: center;190    color: #757575; font-weight: 700;191  }192  .coupon-body {193    flex: 1;194    padding: 26px 30px;195    display: flex; flex-direction: column; justify-content: space-between;196  }197  .coupon-title {198    font-size: 44px; font-weight: 800; color: #2b2e33;199    line-height: 1.1;200  }201  .coupon-desc {202    color: #6b727d; font-size: 30px; margin-top: 6px;203  }204  .coupon-link {205    align-self: flex-end;206    color: #2F6BFF; font-weight: 700; font-size: 36px;207  }208 209  .coupon-card.small {210    width: 420px;211  }212  .coupon-img.small { width: 180px; }213</style>214</head>215<body>216<div id="render-target">217 218  <!-- Pink hero header -->219  <div class="hero">220    <div class="bubble"></div>221  </div>222 223  <!-- Back Button -->224  <div class="back-btn">225    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">226      <path d="M15 18l-6-6 6-6"></path>227    </svg>228  </div>229 230  <!-- Title -->231  <div class="title">All rooms</div>232 233  <!-- Currency pill -->234  <div class="currency-chip">235    <div class="coin">₹</div>236    <span>INR</span>237  </div>238 239  <!-- Search card -->240  <div class="search-card">241    <div class="tabs">242      <div class="tab active">Overnight</div>243      <div class="tab">Day Use</div>244      <div class="active-line"></div>245      <div class="new-badge">New!</div>246    </div>247 248    <div class="fields">249      <!-- Location -->250      <div class="input-pill">251        <div class="input-left">252          <div class="pill-icon">253            <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#3A3F48" stroke-width="2" stroke-linecap="round">254              <circle cx="11" cy="11" r="7"></circle>255              <path d="M20 20l-4-4"></path>256            </svg>257          </div>258          <span class="hint">Paris</span>259        </div>260        <div class="pill-icon">261          <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#3A3F48" stroke-width="2" stroke-linecap="round">262            <circle cx="12" cy="12" r="3"></circle>263            <path d="M12 2v3M12 19v3M2 12h3M19 12h3"></path>264          </svg>265        </div>266      </div>267 268      <!-- Dates -->269      <div class="pill-row">270        <div class="half input-pill">271          <div class="input-left">272            <div class="pill-icon">273              <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#3A3F48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">274                <rect x="3" y="4" width="18" height="16" rx="2"></rect>275                <path d="M16 2v4M8 2v4M3 10h18"></path>276              </svg>277            </div>278            <span class="hint">Tue, Oct 17</span>279          </div>280        </div>281 282        <div class="half input-pill">283          <div class="input-left">284            <div class="pill-icon">285              <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#3A3F48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">286                <rect x="3" y="4" width="18" height="16" rx="2"></rect>287                <path d="M16 2v4M8 2v4M3 10h18"></path>288              </svg>289            </div>290            <span class="hint">Wed, Oct 18</span>291          </div>292        </div>293      </div>294 295      <!-- Guests -->296      <div class="input-pill">297        <div class="input-left">298          <div class="pill-icon">299            <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#3A3F48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">300              <circle cx="12" cy="7" r="4"></circle>301              <path d="M4 22c1.5-4 6-6 8-6s6.5 2 8 6"></path>302            </svg>303          </div>304          <span class="hint">1 room 2 adults</span>305        </div>306      </div>307 308      <!-- Actions -->309      <div class="action-row">310        <div class="circle-tool">311          <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#2F6BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">312            <path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z"></path>313          </svg>314        </div>315        <div class="search-btn">Search</div>316      </div>317    </div>318  </div>319 320  <!-- Discount coupons -->321  <div class="section">322    <h2>Discount Coupons</h2>323    <div class="coupon-list">324      <div class="coupon-card">325        <div class="coupon-img">[IMG: 3% OFF ticket]</div>326        <div class="coupon-body">327          <div>328            <div class="coupon-title">UP TO ₹8,000 ...</div>329            <div class="coupon-desc">* No minimum spend required. | Offer expires in 3 days!</div>330          </div>331          <div class="coupon-link">Get coupon</div>332        </div>333      </div>334 335      <div class="coupon-card small">336        <div class="coupon-img small">[IMG: 6% OFF ticket]</div>337        <div class="coupon-body">338          <div class="coupon-title">UP TO ...</div>339          <div class="coupon-desc">Min. spend applies | Offer expires soon</div>340          <div class="coupon-link">Get coupon</div>341        </div>342      </div>343    </div>344  </div>345 346</div>347</body>348</html>