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.0">6<title>Booking Calendar Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0b3d91; /* app header background */13    border-radius: 20px;14  }15 16  /* Header / App bar */17  .status-bar {18    height: 72px;19    color: #fff;20    padding: 0 30px;21    display: flex;22    align-items: center;23    font-size: 30px;24    justify-content: space-between;25    opacity: 0.95;26  }27  .status-right { display: flex; align-items: center; gap: 26px; }28  .top-icons svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 3; }29 30  .branding {31    text-align: center;32    color: #fff;33    font-weight: 700;34    font-size: 64px;35    margin-top: 30px;36  }37 38  .header-actions {39    position: absolute;40    top: 140px;41    right: 30px;42    display: flex;43    gap: 26px;44  }45  .header-actions svg { width: 54px; height: 54px; stroke: #cfe0ff; stroke-width: 4; fill: none; }46 47  .tab-row {48    margin: 240px 30px 0 30px;49    display: flex;50    gap: 26px;51    color: #e6f0ff;52    align-items: center;53  }54  .tab {55    display: flex; align-items: center; gap: 18px;56    padding: 20px 32px;57    border: 2px solid rgba(255,255,255,0.7);58    border-radius: 54px;59    font-size: 36px;60    color: #e6f0ff;61  }62  .tab svg { width: 46px; height: 46px; stroke: #e6f0ff; stroke-width: 3; fill: none; }63  .tab.secondary { border-color: rgba(255,255,255,0.35); color: #cfe0ff; }64 65  /* Faint search card peeking under sheet */66  .search-card {67    margin: 40px 40px 0 40px;68    background: #fff;69    border: 3px solid #e29d1a;70    border-radius: 18px;71    height: 120px;72    display: flex; align-items: center;73    padding: 0 30px;74    color: #333;75    font-size: 40px;76  }77 78  /* Bottom sheet */79  .sheet {80    position: absolute;81    left: 0; right: 0;82    top: 460px; /* overlay from top */83    height: 1940px;84    background: #fff;85    border-top-left-radius: 38px;86    border-top-right-radius: 38px;87    box-shadow: 0 -8px 24px rgba(0,0,0,0.25);88  }89  .sheet .grabber {90    position: absolute; left: 50%; transform: translateX(-50%);91    top: 12px;92    width: 160px; height: 18px;93    background: #d6d6d6; border-radius: 12px;94  }95  .sheet-content { padding: 60px 40px 40px 40px; }96 97  .weekdays {98    display: grid; grid-template-columns: repeat(7, 1fr);99    color: #6d6d6d; font-size: 32px;100    margin-bottom: 26px;101  }102 103  .month-title {104    font-size: 56px; font-weight: 700; color: #222; margin: 26px 0 10px 0;105  }106 107  .calendar-grid {108    display: grid; grid-template-columns: repeat(7, 1fr);109    gap: 10px;110  }111  .day {112    height: 120px;113    display: flex; align-items: center; justify-content: center;114    font-size: 40px; color: #555;115    border-radius: 22px;116  }117  .muted { color: #bdbdbd; }118  .blue-text { color: #2f6ee5; }119 120  .in-range { background: #eeeeee; color: #333; }121  .start-day, .end-day {122    background: #2f6ee5; color: #fff; font-weight: 700;123    border-radius: 20px;124  }125 126  /* Actions under calendar */127  .chip-row {128    display: flex; gap: 24px; flex-wrap: nowrap;129    margin-top: 40px;130  }131  .chip {132    padding: 22px 32px;133    border-radius: 50px;134    border: 3px solid #bdbdbd;135    color: #333; font-size: 36px; background: #fff;136  }137  .chip.primary {138    border-color: #2f6ee5; color: #2f6ee5;139  }140 141  .summary {142    text-align: center; color: #333; font-size: 40px; margin: 26px 0 24px 0;143  }144 145  .cta {146    margin: 0 30px;147    height: 130px;148    background: #2f6ee5;149    color: #fff; font-size: 48px; font-weight: 700;150    border-radius: 16px;151    display: flex; align-items: center; justify-content: center;152  }153 154  /* Simple helper for SVG icons */155  .icon { display: inline-flex; align-items: center; justify-content: center; }156 157</style>158</head>159<body>160<div id="render-target">161 162  <div class="status-bar">163    <div>1:39</div>164    <div class="status-right top-icons">165      <svg viewBox="0 0 24 24"><path d="M3 12h18M12 3v18"/></svg>166      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>167      <svg viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="18" rx="2"/></svg>168      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg>169    </div>170  </div>171 172  <div class="branding">Booking.com</div>173 174  <div class="header-actions">175    <!-- Chat bubble -->176    <svg viewBox="0 0 24 24">177      <path d="M3 5h18v11H9l-6 5z"/>178    </svg>179    <!-- Bell -->180    <svg viewBox="0 0 24 24">181      <path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z"/>182      <circle cx="12" cy="20" r="2"/>183    </svg>184  </div>185 186  <div class="tab-row">187    <div class="tab">188      <svg viewBox="0 0 24 24"><path d="M3 9h18v10H3z"/><path d="M7 9V6h10v3"/></svg>189      <span>Stays</span>190    </div>191    <div class="tab secondary">192      <svg viewBox="0 0 24 24"><path d="M2 16l20-6-6 7-5-2-4 4z"/></svg>193      <span>Flights</span>194    </div>195    <div class="tab secondary">196      <svg viewBox="0 0 24 24"><path d="M3 16h18l-2-5H5z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>197      <span>Car rental</span>198    </div>199    <div class="tab secondary">200      <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M6 11h12"/></svg>201      <span>TAXI</span>202    </div>203  </div>204 205  <div class="search-card">• Amsterdam</div>206 207  <!-- Bottom sheet -->208  <div class="sheet">209    <div class="grabber"></div>210    <div class="sheet-content">211 212      <div class="weekdays">213        <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>214      </div>215 216      <div class="month-title">December 2023</div>217 218      <div class="calendar-grid">219        <!-- Row starting with 3 -->220        <div class="muted day">3</div>221        <div class="muted day">4</div>222        <div class="muted day">5</div>223        <div class="muted day">6</div>224        <div class="muted day">7</div>225        <div class="muted day">8</div>226        <div class="muted day">9</div>227 228        <div class="muted day">10</div>229        <div class="muted day">11</div>230        <div class="muted day">12</div>231        <div class="muted day">13</div>232        <div class="day blue-text">14</div>233        <div class="day">15</div>234        <div class="day">16</div>235 236        <div class="start-day day">17</div>237        <div class="in-range day">18</div>238        <div class="in-range day">19</div>239        <div class="in-range day">20</div>240        <div class="in-range day">21</div>241        <div class="in-range day">22</div>242        <div class="in-range day">23</div>243 244        <div class="end-day day">24</div>245        <div class="day">25</div>246        <div class="day">26</div>247        <div class="day">27</div>248        <div class="day">28</div>249        <div class="day">29</div>250        <div class="day">30</div>251 252        <div class="day">31</div>253        <!-- filler to keep grid aligned -->254        <div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div>255      </div>256 257      <div class="month-title" style="margin-top: 40px;">January 2024</div>258 259      <div class="calendar-grid">260        <div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>261        <div class="day">8</div><div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day">12</div><div class="day">13</div><div class="day"></div>262      </div>263 264      <div class="chip-row">265        <div class="chip primary">Exact dates</div>266        <div class="chip">± 1 day</div>267        <div class="chip">± 2 days</div>268        <div class="chip">± 3 days</div>269        <div class="chip">± 7 days</div>270      </div>271 272      <div class="summary">Dec 17 - Dec 24 (7 nights)</div>273 274      <div class="cta">Select dates</div>275 276    </div>277  </div>278 279</div>280</body>281</html>