GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Calendar UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .statusbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 130px;23    background: #000000;24    color: #ffffff;25    padding: 0 36px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    font-size: 42px;31    letter-spacing: 0.5px;32  }33  .sb-left { display: flex; align-items: center; gap: 20px; }34  .sb-right { display: flex; align-items: center; gap: 28px; }35  .sb-icon {36    width: 40px; height: 40px;37  }38 39  /* Header sheet */40  .sheet {41    position: absolute;42    top: 130px;43    left: 0;44    width: 1080px;45    background: #ffffff;46    border-top-left-radius: 0;47    border-top-right-radius: 0;48  }49 50  .topbar {51    display: flex;52    align-items: center;53    padding: 36px 36px 24px 36px;54    box-sizing: border-box;55  }56  .close-btn {57    width: 64px; height: 64px;58    margin-right: 24px;59  }60  .title {61    font-size: 48px;62    font-weight: 600;63    color: #1f1f1f;64  }65 66  .selection-row {67    display: flex;68    align-items: center;69    justify-content: space-between;70    padding: 24px 48px 28px 48px;71    box-sizing: border-box;72  }73  .sel-block {74    display: flex; flex-direction: column;75  }76  .label {77    font-size: 30px;78    color: #6b6f76;79    margin-bottom: 6px;80  }81  .value {82    font-size: 48px;83    font-weight: 700;84    color: #1f1f1f;85  }86  .arrow {87    width: 48px; height: 48px; margin: 0 28px;88  }89  .divider { height: 2px; background: #e9eaed; width: 100%; }90 91  /* Calendar sections */92  .month-preview {93    padding: 30px 36px 0 36px;94  }95  .week-row {96    display: grid;97    grid-template-columns: repeat(7, 1fr);98    padding: 42px 8px;99    box-sizing: border-box;100    color: #a3a9b2;101    font-size: 36px;102    border-bottom: 2px solid #e9eaed;103  }104  .week-row:last-child { border-bottom: 2px solid #e9eaed; }105 106  .month-header {107    text-align: center;108    padding: 38px 0 18px 0;109    color: #3c4046;110    font-size: 40px;111    font-weight: 500;112  }113  .dow {114    display: grid;115    grid-template-columns: repeat(7, 1fr);116    color: #7a818b;117    font-size: 36px;118    padding: 18px 36px 26px 36px;119    box-sizing: border-box;120    border-bottom: 2px solid #e9eaed;121  }122 123  .month-grid {124    padding: 0 36px;125    box-sizing: border-box;126  }127  .row {128    display: grid;129    grid-template-columns: repeat(7, 1fr);130    font-size: 40px;131    color: #8d939c;132    padding: 38px 8px;133    box-sizing: border-box;134    align-items: center;135    border-bottom: 2px solid #e9eaed;136  }137  .day {138    display: flex; align-items: center; justify-content: center; position: relative;139  }140  .muted { color: #c2c7cf; }141  .selected {142    width: 112px; height: 112px; border-radius: 56px;143    background: #3b78ff;144    color: #ffffff; display: flex; align-items: center; justify-content: center;145    font-weight: 600;146  }147 148  .next-month-header {149    text-align: center;150    padding: 42px 0 16px 0;151    font-size: 40px; color: #3c4046; font-weight: 500;152  }153  .next-dow {154    display: grid;155    grid-template-columns: repeat(7, 1fr);156    color: #7a818b;157    font-size: 36px;158    padding: 12px 36px 24px 36px;159    box-sizing: border-box;160  }161 162  /* Bottom CTA */163  .cta-wrap {164    position: absolute;165    left: 0;166    bottom: 160px;167    width: 100%;168    display: flex;169    justify-content: center;170  }171  .cta {172    width: 920px;173    height: 120px;174    background: #3b78ff;175    color: #ffffff;176    border-radius: 60px;177    display: flex;178    align-items: center; justify-content: center;179    font-size: 42px;180    font-weight: 600;181    box-shadow: 0 2px 0 rgba(0,0,0,0.06);182  }183 184  /* Gesture bar area */185  .gesture {186    position: absolute;187    bottom: 0; left: 0;188    width: 1080px; height: 160px;189    background: #000000;190    display: flex; align-items: center; justify-content: center;191  }192  .home-pill {193    width: 260px; height: 16px; background: #ffffff; border-radius: 8px; opacity: 0.9;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status bar -->201  <div class="statusbar">202    <div class="sb-left">203      <span>6:26</span>204      <!-- simple icons placeholders -->205      <svg class="sb-icon" viewBox="0 0 24 24">206        <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>207      </svg>208      <svg class="sb-icon" viewBox="0 0 24 24">209        <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>210        <rect x="21" y="10" width="2" height="4" fill="#fff"></rect>211      </svg>212    </div>213    <div class="sb-right">214      <svg class="sb-icon" viewBox="0 0 24 24">215        <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>216        <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>217      </svg>218      <svg class="sb-icon" viewBox="0 0 24 24">219        <rect x="2" y="7" width="16" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>220        <rect x="18" y="10" width="3" height="4" fill="#fff"></rect>221        <rect x="4" y="9" width="12" height="6" fill="#fff"></rect>222      </svg>223      <span>100%</span>224    </div>225  </div>226 227  <!-- White sheet -->228  <div class="sheet">229    <div class="topbar">230      <svg class="close-btn" viewBox="0 0 24 24">231        <path d="M4 4 L20 20 M20 4 L4 20" stroke="#1f1f1f" stroke-width="2.5" stroke-linecap="round"></path>232      </svg>233      <div class="title">Calendar</div>234    </div>235 236    <div class="selection-row">237      <div class="sel-block">238        <div class="label">Check-in</div>239        <div class="value">Sun, Dec 24</div>240      </div>241      <svg class="arrow" viewBox="0 0 24 24">242        <path d="M5 12h10M11 6l6 6-6 6" stroke="#1f1f1f" stroke-width="2.5" stroke-linecap="round" fill="none"></path>243      </svg>244      <div class="sel-block" style="align-items: flex-end; text-align: right;">245        <div class="label">Check-out</div>246      </div>247    </div>248    <div class="divider"></div>249 250    <!-- Preview rows (previous month dates) -->251    <div class="month-preview">252      <div class="week-row">253        <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><div class="day">17</div><div class="day">18</div>254      </div>255      <div class="week-row">256        <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><div class="day">24</div><div class="day">25</div>257      </div>258      <div class="week-row" style="border-bottom: 2px solid #e9eaed;">259        <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><div class="day muted"></div><div class="day muted"></div>260      </div>261    </div>262 263    <!-- December 2023 -->264    <div class="month-header">December 2023</div>265    <div class="dow">266      <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>267    </div>268 269    <div class="month-grid">270      <!-- Row 1 -->271      <div class="row">272        <div class="day muted"></div>273        <div class="day muted"></div>274        <div class="day muted"></div>275        <div class="day muted"></div>276        <div class="day muted"></div>277        <div class="day">1</div>278        <div class="day">2</div>279      </div>280      <!-- Row 2 -->281      <div class="row">282        <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>283      </div>284      <!-- Row 3 -->285      <div class="row">286        <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>287      </div>288      <!-- Row 4 -->289      <div class="row">290        <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>291      </div>292      <!-- Row 5 -->293      <div class="row">294        <div class="day"><div class="selected">24</div></div>295        <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>296      </div>297      <!-- Row 6 -->298      <div class="row">299        <div class="day">31</div>300        <div class="day muted"></div><div class="day muted"></div><div class="day muted"></div><div class="day muted"></div><div class="day muted"></div><div class="day muted"></div>301      </div>302    </div>303 304    <!-- January header -->305    <div class="next-month-header">January 2024</div>306    <div class="next-dow">307      <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>308    </div>309  </div>310 311  <!-- Bottom CTA -->312  <div class="cta-wrap">313    <div class="cta">OK (1 Night)</div>314  </div>315 316  <!-- Gesture bar -->317  <div class="gesture">318    <div class="home-pill"></div>319  </div>320</div>321</body>322</html>