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>Calendar UI</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: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #1F1F1F;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    background: #000;23    color: #fff;24    font-size: 36px;25    line-height: 120px;26    padding: 0 40px;27    box-sizing: border-box;28  }29  .status-bar .right {30    float: right;31    display: flex;32    align-items: center;33    gap: 20px;34    line-height: 1;35    margin-top: 42px;36  }37  .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0.8; }38 39  /* Header */40  .header {41    height: 180px;42    background: #fff;43    box-sizing: border-box;44    border-bottom: 1px solid #EAEAEA;45    display: flex;46    align-items: center;47    padding: 0 40px;48    gap: 24px;49  }50  .header-title {51    font-size: 48px;52    font-weight: 600;53  }54  .icon-btn {55    width: 72px;56    height: 72px;57    display: inline-flex;58    align-items: center;59    justify-content: center;60  }61  .icon {62    width: 48px;63    height: 48px;64    fill: none;65    stroke: #1F1F1F;66    stroke-width: 5;67    stroke-linecap: round;68  }69 70  /* Check-in/out row */71  .dates-row {72    display: grid;73    grid-template-columns: 1fr 120px 1fr;74    align-items: center;75    padding: 40px 60px 30px 60px;76    gap: 20px;77  }78  .date-block small {79    display: block;80    color: #6B6F76;81    font-size: 32px;82    margin-bottom: 8px;83  }84  .date-block .big {85    font-size: 64px;86    font-weight: 700;87  }88  .arrow-wrap {89    display: flex;90    align-items: center;91    justify-content: center;92  }93  .arrow-icon {94    width: 64px;95    height: 64px;96    fill: none;97    stroke: #1F1F1F;98    stroke-width: 7;99    stroke-linecap: round;100    stroke-linejoin: round;101  }102  .divider {103    height: 1px;104    background: #ECECEC;105    margin: 0 40px 10px 40px;106  }107 108  /* Calendar */109  .month {110    padding: 30px 40px 10px 40px;111  }112  .month-title {113    text-align: center;114    font-size: 40px;115    font-weight: 600;116    color: #34373C;117    margin: 20px 0 20px;118  }119  .weekday-row {120    display: grid;121    grid-template-columns: repeat(7, 1fr);122    color: #6B6F76;123    font-size: 32px;124    padding: 20px 10px;125  }126  .weekday-row div { text-align: center; }127 128  .week {129    display: grid;130    grid-template-columns: repeat(7, 1fr);131    border-top: 1px solid #ECECEC;132    padding: 26px 10px;133    min-height: 120px;134  }135  .day {136    text-align: center;137    color: #9AA0A6;138    font-size: 36px;139  }140  .day.emph { color: #2B2F36; font-weight: 600; }141 142  /* Bottom CTA */143  .cta {144    position: absolute;145    left: 54px;146    right: 54px;147    bottom: 170px;148    height: 140px;149    background: #3D6BE8;150    color: #fff;151    border-radius: 80px;152    display: flex;153    align-items: center;154    justify-content: center;155    font-size: 44px;156    font-weight: 600;157    box-shadow: 0 6px 12px rgba(61,107,232,0.35);158  }159 160  /* Navigation bar */161  .nav-bar {162    position: absolute;163    bottom: 0;164    left: 0;165    right: 0;166    height: 120px;167    background: #000;168    display: flex;169    align-items: center;170    justify-content: center;171  }172  .home-pill {173    width: 260px;174    height: 12px;175    border-radius: 8px;176    background: #D6D6D6;177    opacity: 0.9;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status bar -->185  <div class="status-bar">186    6:25187    <div class="right">188      <div class="dot"></div>189      <div class="dot"></div>190      <div class="dot"></div>191      100%192    </div>193  </div>194 195  <!-- Header -->196  <div class="header">197    <div class="icon-btn" aria-label="Close">198      <svg class="icon" viewBox="0 0 24 24">199        <path d="M5 5 L19 19"></path>200        <path d="M19 5 L5 19"></path>201      </svg>202    </div>203    <div class="header-title">Calendar</div>204  </div>205 206  <!-- Check-in / Check-out -->207  <div class="dates-row">208    <div class="date-block">209      <small>Check-in</small>210      <div class="big">Tue, Oct 17</div>211    </div>212    <div class="arrow-wrap">213      <svg class="arrow-icon" viewBox="0 0 24 24">214        <path d="M4 12 H18"></path>215        <path d="M14 7 L19 12 L14 17"></path>216      </svg>217    </div>218    <div class="date-block" style="text-align:right;">219      <small>Check-out</small>220      <div class="big">Wed, Oct 18</div>221    </div>222  </div>223  <div class="divider"></div>224 225  <!-- First visible week (late Oct) to match top of screenshot -->226  <div class="month">227    <div class="week">228      <div class="day">12</div>229      <div class="day">13</div>230      <div class="day">14</div>231      <div class="day">15</div>232      <div class="day emph">16</div>233      <div class="day emph">17</div>234      <div class="day">18</div>235    </div>236    <div class="week">237      <div class="day">19</div>238      <div class="day">20</div>239      <div class="day">21</div>240      <div class="day">22</div>241      <div class="day">23</div>242      <div class="day">24</div>243      <div class="day">25</div>244    </div>245    <div class="week" style="border-bottom:1px solid #ECECEC;">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      <div class="day"></div>252      <div class="day"></div>253    </div>254  </div>255 256  <!-- December 2023 -->257  <div class="month">258    <div class="month-title">December 2023</div>259    <div class="weekday-row">260      <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>261    </div>262 263    <div class="week">264      <div class="day"></div>265      <div class="day"></div>266      <div class="day"></div>267      <div class="day"></div>268      <div class="day">1</div>269      <div class="day">2</div>270      <div class="day"></div>271    </div>272    <div class="week">273      <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><div class="day">8</div><div class="day">9</div>274    </div>275    <div class="week">276      <div class="day">10</div><div class="day">11</div><div class="day">12</div><div class="day">13</div><div class="day">14</div><div class="day">15</div><div class="day">16</div>277    </div>278    <div class="week">279      <div class="day">17</div><div class="day">18</div><div class="day">19</div><div class="day">20</div><div class="day">21</div><div class="day">22</div><div class="day">23</div>280    </div>281    <div class="week">282      <div class="day">24</div><div class="day">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div><div class="day">29</div><div class="day">30</div>283    </div>284    <div class="week" style="border-bottom:1px solid #ECECEC;">285      <div class="day">31</div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div>286    </div>287  </div>288 289  <!-- January 2024 -->290  <div class="month" style="padding-bottom: 240px;">291    <div class="month-title">January 2024</div>292    <div class="weekday-row">293      <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>294    </div>295  </div>296 297  <!-- CTA button -->298  <div class="cta">OK (1 Night)</div>299 300  <!-- Bottom nav bar -->301  <div class="nav-bar">302    <div class="home-pill"></div>303  </div>304</div>305</body>306</html>