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>Booking Calendar UI</title>7<style>8  :root{9    --brand-blue:#0E3A88;10    --cta-blue:#2E6CE6;11    --text:#1D1D1F;12    --muted:#9E9E9E;13    --divider:#E5E5EA;14    --bg:#FFFFFF;15    --range-fill:#EFEFF4;16  }17  body{18    margin:0;19    padding:0;20    background:transparent;21    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;22    color:var(--text);23  }24  #render-target{25    position:relative;26    overflow:hidden;27    width:1080px;28    height:2400px;29    background:var(--brand-blue);30    border-radius:24px; /* outer visual styling on the container */31    box-shadow: 0 30px 60px rgba(0,0,0,0.25);32  }33 34  /* Top header (Booking.com) */35  .topbar{36    position:absolute;37    top:0; left:0;38    width:100%;39    height:520px;40    background:var(--brand-blue);41  }42  .status-bar{43    position:absolute;44    top:28px; left:36px;45    width:1008px;46    height:48px;47    color:#fff;48    font-weight:600;49    font-size:36px;50    display:flex;51    align-items:center;52    justify-content:space-between;53  }54  .status-right{55    display:flex; gap:28px; align-items:center;56  }57  .brand{58    position:absolute;59    top:150px; left:0; right:0;60    text-align:center;61    color:#fff;62    font-size:64px;63    font-weight:700;64    letter-spacing:0.5px;65  }66  .brand-icons{67    position:absolute;68    top:160px; right:60px;69    display:flex; gap:28px;70  }71  .brand-icons svg{ stroke:#fff; fill:none; width:56px; height:56px; stroke-width:6; }72 73  .nav-tabs{74    position:absolute;75    top:260px; left:40px; right:40px;76    display:flex; gap:36px; align-items:center;77  }78  .tab{79    display:flex; align-items:center; gap:16px;80    color:#cdd7ff;81    font-size:40px;82  }83  .tab svg{ width:56px; height:56px; fill:none; stroke:#cdd7ff; stroke-width:6; }84  .tab.active{85    border:2px solid #cdd7ff;86    color:#ffffff;87    border-radius:56px;88    padding:18px 28px;89  }90  .tab.active svg{ stroke:#ffffff; }91 92  /* Bottom sheet (calendar) */93  .sheet{94    position:absolute;95    left:0; right:0;96    top:360px;97    height:1840px;98    background:#fff;99    border-top-left-radius:36px;100    border-top-right-radius:36px;101    box-shadow: 0 -10px 24px rgba(0,0,0,0.25);102  }103  .grabber{104    position:absolute;105    top:16px; left:50%;106    transform:translateX(-50%);107    width:180px; height:16px;108    background:#C7C7CC;109    border-radius:10px;110  }111  .sheet-inner{112    position:absolute;113    top:52px; left:0; right:0; bottom:0;114    overflow:hidden;115    padding:24px 40px 24px 40px;116  }117 118  .weekday-row{119    display:flex; justify-content:space-between;120    padding:12px 20px 8px 20px;121    color:#5E5E5E;122    font-size:38px;123    border-radius:16px;124  }125 126  .month{127    margin-top:22px;128  }129  .month h2{130    margin:22px 20px;131    font-size:56px;132    font-weight:800;133    color:#000;134  }135  .calendar-grid{136    display:grid;137    grid-template-columns:repeat(7, 1fr);138    gap:16px;139    padding:0 20px;140  }141  .day{142    height:120px;143    border-radius:24px;144    display:flex; align-items:center; justify-content:center;145    font-size:42px;146    color:#000;147  }148  .day.muted{ color:var(--muted); }149  .day.blue-text{ color:#2E6CE6; font-weight:700; }150  .day.range-start{151    background:var(--cta-blue);152    color:#fff; font-weight:700;153    border-radius:28px;154  }155  .day.in-range{156    background:var(--range-fill);157    color:#222;158    border-radius:18px;159  }160  .day.range-end{161    background:var(--cta-blue);162    color:#fff; font-weight:700;163    border-radius:28px;164  }165 166  /* Flexibility chips */167  .chips{168    margin-top:30px;169    padding:0 20px;170    display:flex; gap:24px; flex-wrap:nowrap;171  }172  .chip{173    padding:20px 30px;174    border:2px solid #C7C7CC;175    border-radius:42px;176    color:#333;177    font-size:40px;178    background:#fff;179  }180  .chip.selected{181    border-color:var(--cta-blue);182    color:var(--cta-blue);183    font-weight:600;184  }185 186  .selected-range-text{187    text-align:center;188    font-size:42px;189    margin:26px 0 18px 0;190    color:#000;191    font-weight:600;192  }193 194  .cta{195    margin:0 40px;196    height:140px;197    background:var(--cta-blue);198    color:#fff;199    border-radius:20px;200    display:flex; align-items:center; justify-content:center;201    font-size:48px;202    font-weight:700;203    box-shadow: 0 10px 18px rgba(46,108,230,0.4);204  }205 206  /* Bottom system bar */207  .system-bar{208    position:absolute;209    bottom:0; left:0; right:0;210    height:120px;211    background:#000;212  }213  .home-indicator{214    position:absolute;215    bottom:24px; left:50%;216    transform:translateX(-50%);217    width:250px; height:16px;218    background:#D1D1D6;219    border-radius:10px;220  }221</style>222</head>223<body>224<div id="render-target">225  <!-- Header area -->226  <div class="topbar">227    <div class="status-bar">228      <div>1:40</div>229      <div class="status-right">230        <!-- Simple status glyphs -->231        <svg viewBox="0 0 24 24">232          <circle cx="12" cy="12" r="10" stroke="#fff" fill="none" stroke-width="3"></circle>233          <path d="M12 6v6l4 2" stroke="#fff" stroke-width="3" fill="none"></path>234        </svg>235        <svg viewBox="0 0 24 24">236          <path d="M4 12l6 6 10-14" stroke="#fff" stroke-width="3" fill="none"></path>237        </svg>238        <svg viewBox="0 0 24 24">239          <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="3"></rect>240          <rect x="19" y="9" width="2" height="6" fill="#fff"></rect>241        </svg>242        <svg viewBox="0 0 24 24">243          <circle cx="12" cy="12" r="10" stroke="#fff" fill="none" stroke-width="3"></circle>244        </svg>245      </div>246    </div>247 248    <div class="brand">Booking.com</div>249    <div class="bran