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>Select Check-in Date</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Top status (time + small icons) */16  .status-bar {17    position: absolute; top: 20px; left: 40px; right: 40px; height: 60px;18    font-size: 32px; color: #262b36;19  }20  .status-bar .time { position: absolute; left: 0; top: 0; line-height: 60px; }21  .status-bar .icons { position: absolute; right: 0; top: 0; height: 60px; display: flex; align-items: center; gap: 24px; }22  .icon-wifi { width: 28px; height: 28px; }23  .icon-battery {24    width: 38px; height: 18px; border: 2px solid #777; border-radius: 4px; position: relative;25  }26  .icon-battery::after {27    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 10px; background: #777; border-radius: 2px;28  }29  .icon-battery .level { width: 22px; height: 12px; background: #777; margin: 2px; border-radius: 2px; }30 31  /* Header */32  .header {33    position: absolute; top: 90px; left: 0; right: 0; height: 140px;34    display: flex; align-items: center; justify-content: center;35  }36  .header .title {37    font-size: 52px; font-weight: 700; color: #1f2a37;38  }39  .back-btn {40    position: absolute; left: 24px; top: 108px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;41  }42  .back-btn svg { width: 48px; height: 48px; }43  .divider-line {44    position: absolute; left: 0; right: 0; top: 220px; height: 1px; background: #eaeaea;45  }46 47  /* Day-of-week row */48  .dow {49    position: absolute; left: 0; right: 0; top: 220px;50    padding: 24px 60px 18px;51    display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;52    color: #9aa5b1; font-size: 32px; border-bottom: 1px solid #eeeeee;53  }54 55  /* Content area */56  .content {57    position: absolute; left: 0; right: 0; top: 320px; padding: 0 60px;58  }59  .month {60    margin-bottom: 120px;61  }62  .month-title {63    text-align: center; font-size: 44px; font-weight: 600; color: #1f2a37; margin: 24px 0 36px;64  }65  .calendar-grid {66    display: grid; grid-template-columns: repeat(7, 1fr);67    grid-auto-rows: 120px; gap: 10px 6px; padding: 0 6px;68  }69  .date {70    display: flex; align-items: center; justify-content: center;71    font-size: 38px; color: #1f2a37;72  }73  .blank { opacity: 0; }74  .muted { color: #cfd6de; }75  .selected-left, .selected-right {76    background: #1677ff; color: #ffffff; font-weight: 600;77  }78  .selected-left {79    border-top-left-radius: 32px; border-bottom-left-radius: 32px;80  }81  .selected-right {82    border-top-right-radius: 32px; border-bottom-right-radius: 32px;83  }84 85  /* Holiday pill card */86  .holiday-pill {87    position: absolute; right: 60px; top: 1140px; /* roughly near Jan 4 */88    display: flex; align-items: center; gap: 22px;89    background: #ffffff; border-radius: 44px; padding: 16px 28px 16px 16px;90    box-shadow: 0 10px 24px rgba(0,0,0,0.08); border: 1px solid #f1f1f1;91    color: #ff7a00; font-size: 32px; font-weight: 600;92  }93  .holiday-pill .img {94    width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;95    border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;96  }97 98  /* Selection inputs */99  .inputs {100    position: absolute; left: 60px; right: 60px; top: 1450px;101    display: grid; grid-template-columns: 1fr 1fr; gap: 32px;102  }103  .chip {104    height: 160px; border-radius: 24px; padding: 22px 28px; display: flex; flex-direction: column; justify-content: center;105    border: 3px solid #e5e8ee; color: #1f2a37;106    box-shadow: 0 0 0 rgba(0,0,0,0);107  }108  .chip.primary { border-color: #1677ff; }109  .chip .label {110    font-size: 30px; color: #7b8a98; margin-bottom: 12px;111  }112  .chip.primary .label { color: #1677ff; }113  .chip .value {114    font-size: 40px; font-weight: 600;115  }116 117  /* Footer actions */118  .footer {119    position: absolute; left: 60px; right: 60px; bottom: 160px;120    display: flex; align-items: center; justify-content: space-between;121  }122  .btn {123    height: 120px; min-width: 260px; border-radius: 28px; display: flex; align-items: center; justify-content: center;124    font-size: 40px; font-weight: 700; border: none;125  }126  .btn-clear {127    background: #ffe7d3; color: #ff7a00;128    padding: 0 36px;129  }130  .btn-select {131    background: #ff7a00; color: #ffffff; padding: 0 56px;132    box-shadow: 0 8px 20px rgba(255,122,0,0.35);133  }134 135  /* Home indicator */136  .home-indicator {137    position: absolute; left: 50%; transform: translateX(-50%);138    bottom: 48px; width: 300px; height: 10px; background: #000; border-radius: 6px;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Top status bar -->146  <div class="status-bar">147    <div class="time">10:51</div>148    <div class="icons">149      <svg class="icon-wifi" viewBox="0 0 24 24">150        <path d="M2 8c5-4 15-4 20 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>151        <path d="M5 12c4-3 10-3 14 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>152        <circle cx="12" cy="16" r="2" fill="#777"/>153      </svg>154      <div class="icon-battery"><div class="level"></div></div>155    </div>156  </div>157 158  <!-- Header -->159  <div class="back-btn">160    <svg viewBox="0 0 24 24">161      <path d="M15 19 L8 12 L15 5" stroke="#1f2a37" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>162    </svg>163  </div>164  <div class="header">165    <div class="title">Select Check-in Date</div>166  </div>167 168  <div class="divider-line"></div>169 170  <!-- Day-of-week row -->171  <div class="dow">172    <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>173  </div>174 175  <!-- Content (months) -->176  <div class="content">177    <!-- December 2023 -->178    <div class="month">179      <div class="month-title">December 2023</div>180      <div class="calendar-grid">181        <!-- Row 1: Sun-Thu blank, Fri=1, Sat=2 -->182        <div class="date blank"></div><div class="date blank"></div><div class="date blank"></div><div class="date blank"></div><div class="date blank"></div>183        <div class="date muted">1</div><div class="date muted">2</div>184 185        <!-- Row 2: 3-9 muted -->186        <div class="date muted">3</div><div class="date muted">4</div><div class="date muted">5</div><div class="date muted">6</div><div class="date muted">7</div><div class="date muted">8</div><div class="date muted">9</div>187 188        <!-- Row 3: 10-16 muted -->189        <div class="date muted">10</div><div class="date muted">11</div><div class="date muted">12</div><div class="date muted">13</div><div class="date muted">14</div><div class="date muted">15</div><div class="date muted">16</div>190 191        <!-- Row 4: 17-23 active -->192        <div class="date">17</div><div class="date">18</div><div class="date">19</div><div class="date">20</div><div class="date">21</div><div class="date">22</div><div class="date">23</div>193 194        <!-- Row 5: 24-30 with selected 25-26 -->195        <div class="date">24</div>196        <div class="date selected-left">25</div>197        <div class="date selected-right">26</div>198        <div class="date">27</div><div class="date">28</div><div class="date">29</div><div class="date">30</div>199 200        <!-- Row 6: 31 -->201        <div class="date">31</div>202        <div class="date blank"></div><div class="date blank"></div><div class="date blank"></div><div class="date blank"></div><div class="date blank"></div><div class="date blank"></div>203      </div>204    </div>205 206    <!-- January 2024 -->207    <div class="month">208      <div class="month-title">January 2024</div>209      <div class="calendar-grid">210        <!-- Row 1: Sun blank, 1-6 -->211        <div class="date blank"></div>212        <div class="date">1</div><div class="date">2</div><div class="date">3</div><div class="date">4</div><div class="date">5</div><div class="date">6</div>213        <!-- Row 2: 7-13 -->214        <div class="date">7</div><div class="date">8</div><div class="date">9</div><div class="date">10</div><div class="date">11</div><div class="date">12</div><div class="date">13</div>215      </div>216    </div>217 218    <!-- Holiday pill card -->219    <div class="holiday-pill">220      <div class="img">[IMG: Holiday Icon]</div>221      <div>Holiday List</div>222    </div>223  </div>224 225  <!-- Selection inputs -->226  <div class="inputs">227    <div class="chip primary">228      <div class="label">Check-in date</div>229      <div class="value">Mon, 25 Dec</div>230    </div>231    <div class="chip">232      <div class="label">Check-out date</div>233      <div class="value">Tue, 26 Dec</div>234    </div>235  </div>236 237  <!-- Footer buttons -->238  <div class="footer">239    <button class="btn btn-clear">Clear</button>240    <button class="btn btn-select">Select</button>241  </div>242 243  <div class="home-indicator"></div>244</div>245</body>246</html>