GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>All rooms UI</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: #F5F6FA;14  }15 16  /* Top decorative header */17  .header {18    position: relative;19    height: 620px;20    background: linear-gradient(180deg, #f7d1d6 0%, #f6cbd3 100%);21  }22  .header::after{23    content:"";24    position:absolute;25    right:-120px;26    bottom:40px;27    width:520px;28    height:520px;29    border-radius:50%;30    background: radial-gradient(circle at 40% 40%, #ff7a87 0%, #f25b6b 55%, #ed5666 80%);31    opacity: 0.35;32  }33 34  /* Back button */35  .back-btn {36    position: absolute;37    top: 160px;38    left: 48px;39    width: 96px;40    height: 96px;41    border-radius: 50%;42    background: #fff;43    box-shadow: 0 8px 18px rgba(0,0,0,0.15);44    display: flex;45    align-items: center;46    justify-content: center;47  }48 49  /* Currency pill */50  .currency {51    position: absolute;52    top: 160px;53    right: 48px;54    background: #fff;55    border-radius: 50px;56    box-shadow: 0 8px 18px rgba(0,0,0,0.15);57    padding: 20px 28px;58    display: flex;59    align-items: center;60    gap: 16px;61  }62  .currency .icon-wrap{63    width: 56px; height: 56px;64    border-radius: 28px;65    background: #F2F3F7;66    display:flex; align-items:center; justify-content:center;67  }68  .currency span { font-weight: 700; color: #222; font-size: 32px; }69 70  .title {71    position: absolute;72    left: 48px;73    top: 300px;74    font-size: 72px;75    font-weight: 800;76    color: #222;77  }78 79  /* Search card */80  .card {81    position: relative;82    width: 996px;83    margin: 0 auto;84    top: -70px;85    background: #fff;86    border-radius: 36px;87    box-shadow: 0 10px 30px rgba(0,0,0,0.15);88    padding-bottom: 44px;89  }90 91  .tabs {92    display: flex;93    gap: 48px;94    padding: 36px 40px 20px 40px;95    align-items: center;96    border-bottom: 1px solid #E4E7F2;97    position: relative;98  }99  .tab {100    font-size: 38px;101    font-weight: 700;102    color: #6a7ab0;103  }104  .tab.active { color: #2D6BFF; }105  .active-underline {106    position: absolute;107    left: 40px;108    bottom: -1px;109    width: 160px;110    height: 8px;111    background: #2D6BFF;112    border-radius: 4px;113  }114  .badge-new {115    position: absolute;116    top: -22px;117    left: 330px;118    background: #E53935;119    color: #fff;120    font-weight: 700;121    font-size: 28px;122    padding: 10px 18px;123    border-radius: 10px;124    box-shadow: 0 6px 14px rgba(229,57,53,0.35);125  }126 127  .fields {128    padding: 28px 40px 0 40px;129  }130  .pill {131    height: 116px;132    border-radius: 58px;133    background: #eef1f7;134    display: flex;135    align-items: center;136    padding: 0 36px;137    font-size: 40px;138    color: #1c1f29;139    margin-bottom: 24px;140    gap: 24px;141  }142  .pill .icon {143    width: 56px; height: 56px;144    display:flex; align-items:center; justify-content:center;145  }146 147  .dates{148    display:flex;149    gap: 28px;150    margin-bottom: 24px;151  }152  .pill.small{ flex:1; }153 154  .card-actions{155    display:flex;156    align-items:center;157    gap: 28px;158    padding: 20px 40px 0 40px;159  }160  .circle-outline {161    width: 120px;162    height: 120px;163    border-radius: 60px;164    border: 3px solid #2D6BFF;165    display:flex; align-items:center; justify-content:center;166    color:#2D6BFF;167    background:#fff;168  }169  .search-btn{170    flex:1;171    height: 120px;172    border-radius: 60px;173    background: #2D6BFF;174    color:#fff;175    font-size: 46px;176    font-weight:700;177    border:none;178  }179 180  /* Discount section */181  .section-title{182    margin: 40px 48px 20px 48px;183    font-size: 56px;184    font-weight: 800;185    color:#222;186  }187  .coupon-row{188    display:flex;189    gap: 24px;190    padding: 0 40px;191  }192  .coupon-card{193    width: 480px;194    border: 2px solid #D5DBF2;195    border-radius: 28px;196    background:#fff;197    box-shadow: 0 10px 22px rgba(0,0,0,0.06);198    padding: 24px;199    display:flex;200    gap: 22px;201  }202  .coupon-img{203    width: 160px; height: 160px;204    background:#E0E0E0;205    border:1px solid #BDBDBD;206    display:flex; align-items:center; justify-content:center;207    color:#757575; font-weight:700; text-align:center; font-size:24px;208    border-radius: 16px;209  }210  .coupon-body{211    flex:1;212    display:flex; flex-direction:column; gap:8px;213  }214  .coupon-title{215    font-size: 42px; font-weight: 800; color:#1f2430; line-height: 1.2;216  }217  .coupon-sub{218    font-size: 30px; color:#5a6072;219  }220  .coupon-link{221    margin-top:auto;222    color:#2D6BFF;223    font-weight:700;224    font-size: 36px;225  }226 227  /* Bottom system bar imitation */228  .system-bar{229    position:absolute;230    left:0; right:0; bottom:0;231    height: 120px;232    background:#000;233  }234  .home-indicator{235    position:absolute;236    left:50%;237    transform:translateX(-50%);238    bottom:32px;239    width: 220px; height: 14px;240    background:#fff; border-radius: 7px; opacity:0.85;241  }242</style>243</head>244<body>245<div id="render-target">246 247  <div class="header">248    <div class="back-btn">249      <svg width="48" height="48" viewBox="0 0 24 24">250        <path d="M14 6 L8 12 L14 18" stroke="#222" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>251      </svg>252    </div>253 254    <div class="currency">255      <div class="icon-wrap">256        <svg width="30" height="30" viewBox="0 0 24 24">257          <circle cx="12" cy="12" r="10" fill="none" stroke="#70757a" stroke-width="1.8"/>258          <text x="8" y="16" font-size="10" fill="#70757a">₹</text>259        </svg>260      </div>261      <span>INR</span>262    </div>263 264    <div class="title">All rooms</div>265  </div>266 267  <div class="card">268    <div class="tabs">269      <div class="tab active">Overnight</div>270      <div class="tab">Day Use</div>271      <div class="active-underline"></div>272      <div class="badge-new">New!</div>273    </div>274 275    <div class="fields">276      <div class="pill">277        <div class="icon">278          <svg width="44" height="44" viewBox="0 0 24 24">279            <circle cx="10" cy="10" r="6" stroke="#3b4252" stroke-width="2" fill="none"/>280            <line x1="15" y1="15" x2="22" y2="22" stroke="#3b4252" stroke-width="2" stroke-linecap="round"/>281          </svg>282        </div>283        <div>London</div>284      </div>285 286      <div class="dates">287        <div class="pill small">288          <div class="icon">289            <svg width="44" height="44" viewBox="0 0 24 24">290              <rect x="3" y="5" width="18" height="16" rx="3" fill="none" stroke="#303643" stroke-width="2"/>291              <line x1="7" y1="3" x2="7" y2="7" stroke="#303643" stroke-width="2" stroke-linecap="round"/>292              <line x1="17" y1="3" x2="17" y2="7" stroke="#303643" stroke-width="2" stroke-linecap="round"/>293            </svg>294          </div>295          <div>Mon, Jan 15, 2024</div>296        </div>297 298        <div class="pill small">299          <div class="icon">300            <svg width="44" height="44" viewBox="0 0 24 24">301              <rect x="3" y="5" width="18" height="16" rx="3" fill="none" stroke="#303643" stroke-width="2"/>302              <line x1="7" y1="3" x2="7" y2="7" stroke="#303643" stroke-width="2" stroke-linecap="round"/>303              <line x1="17" y1="3" x2="17" y2="7" stroke="#303643" stroke-width="2" stroke-linecap="round"/>304            </svg>305          </div>306          <div>Tue, Jan 16, 2024</div>307        </div>308      </div>309 310      <div class="pill">311        <div class="icon">312          <svg width="44" height="44" viewBox="0 0 24 24">313            <circle cx="12" cy="8" r="4" fill="#303643"/>314            <path d="M4 20c2-4 14-4 16 0" stroke="#303643" stroke-width="2" fill="none" stroke-linecap="round"/>315          </svg>316        </div>317        <div>1 room 1 adult</div>318      </div>319    </div>320 321    <div class="card-actions">322      <div class="circle-outline">323        <svg width="48" height="48" viewBox="0 0 24 24">324          <path d="M12 3c3.3 0 6 2.6 6 5.9 0 4.9-6 11.1-6 11.1S6 13.8 6 8.9C6 5.6 8.7 3 12 3z" fill="none" stroke="#2D6BFF" stroke-width="2"/>325          <circle cx="12" cy="9" r="2" fill="#2D6BFF"/>326        </svg>327      </div>328      <button class="search-btn">Search</button>329    </div>330  </div>331 332  <div class="section-title">Discount Coupons</div>333 334  <div class="coupon-row">335    <div class="coupon-card">336      <div class="coupon-img">[IMG: Coupon 5% OFF]</div>337      <div class="coupon-body">338        <div class="coupon-title">UP TO ₹8,000 …</div>339        <div class="coupon-sub">* No minimum spend required. | Offer expires in 3 days!</div>340        <div class="coupon-link">Get coupon</div>341      </div>342    </div>343 344    <div class="coupon-card">345      <div class="coupon-img">[IMG: Coupon 8% OFF]</div>346      <div class="coupon-body">347        <div class="coupon-title">UP TO 8% OFF</div>348        <div class="coupon-sub">Min. spend applies. Offer expires soon.</div>349        <div class="coupon-link">Get coupon</div>350      </div>351    </div>352  </div>353 354  <div class="system-bar">355    <div class="home-indicator"></div>356  </div>357</div>358</body>359</html>