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<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #000;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 40px;26    font-size: 34px;27    justify-content: space-between;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 24px;33    font-size: 28px;34    opacity: 0.9;35  }36  .status-dot {37    width: 10px; height: 10px; background: #fff; border-radius: 50%;38    display: inline-block;39    opacity: 0.8;40  }41  .battery {42    display: inline-flex;43    align-items: center;44    gap: 8px;45  }46  .battery svg { display: block; }47 48  /* Header */49  .header {50    height: 220px;51    display: flex;52    align-items: center;53    padding: 0 40px;54    border-bottom: 1px solid #eee;55    background: #fff;56  }57  .header-title {58    font-size: 48px;59    font-weight: 600;60    margin-left: 28px;61  }62  .close-icon {63    width: 56px;64    height: 56px;65  }66 67  /* Selection summary */68  .selection {69    padding: 40px;70    display: flex;71    align-items: center;72    justify-content: space-between;73    gap: 20px;74    border-bottom: 1px solid #eee;75  }76  .sel-col {77    flex: 1;78  }79  .label {80    font-size: 30px;81    color: #777;82    margin-bottom: 12px;83  }84  .date {85    font-size: 56px;86    font-weight: 700;87  }88  .arrow {89    width: 72px;90    height: 72px;91    display: flex;92    align-items: center;93    justify-content: center;94  }95 96  /* Calendar */97  .calendar {98    padding: 10px 24px 0 24px;99  }100  .month-title {101    text-align: center;102    font-size: 40px;103    font-weight: 500;104    color: #333;105    margin: 32px 0 18px;106  }107  .weekdays {108    display: flex;109    justify-content: space-between;110    padding: 0 16px;111    color: #8a8f99;112    font-size: 32px;113    margin-bottom: 8px;114  }115  .weekday {116    width: calc((100% - 32px) / 7);117    text-align: center;118  }119  .week {120    display: flex;121    justify-content: space-between;122    padding: 0 16px;123    border-top: 1px solid #e9ebef;124    height: 130px;125    align-items: center;126  }127  .day {128    width: calc((100% - 32px) / 7);129    text-align: center;130    font-size: 36px;131    color: #9aa1aa;132  }133  .muted { color: #c0c7d1; }134 135  /* Selected range styles */136  .week.range {137    background: #dfeaff;138    border-top-color: #d1dcf3;139  }140  .day .pill {141    width: 96px;142    height: 96px;143    margin: 0 auto;144    border-radius: 50%;145    background: #4d8af7;146    color: #fff;147    display: flex;148    align-items: center;149    justify-content: center;150    font-weight: 700;151  }152 153  /* January section spacing */154  .divider {155    border-top: 1px solid #e9ebef;156    margin: 0 16px;157  }158 159  /* Primary button */160  .primary-cta {161    position: absolute;162    left: 70px;163    bottom: 200px;164    width: 940px;165    height: 120px;166    background: #2f6ef4;167    color: #fff;168    border-radius: 60px;169    display: flex;170    align-items: center;171    justify-content: center;172    font-size: 40px;173    font-weight: 700;174    box-shadow: 0 6px 16px rgba(47, 110, 244, 0.3);175  }176 177  /* Bottom gesture bar */178  .gesture-bar {179    position: absolute;180    bottom: 0;181    left: 0;182    width: 1080px;183    height: 120px;184    background: #000;185    display: flex;186    align-items: center;187    justify-content: center;188  }189  .handle {190    width: 200px;191    height: 10px;192    background: #bbb;193    border-radius: 6px;194    opacity: 0.8;195  }196</style>197</head>198<body>199<div id="render-target">200  <!-- Top system status bar -->201  <div class="status-bar">202    <div>6:26</div>203    <div class="status-right">204      <span class="status-dot"></span>205      <span class="status-dot"></span>206      <span class="battery">207        <svg width="40" height="22" viewBox="0 0 40 22">208          <rect x="1" y="3" width="34" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"></rect>209          <rect x="3" y="5" width="26" height="12" fill="#fff"></rect>210          <rect x="35" y="7" width="4" height="8" fill="#fff"></rect>211        </svg>212        <span>100%</span>213      </span>214    </div>215  </div>216 217  <!-- App header -->218  <div class="header">219    <svg class="close-icon" viewBox="0 0 24 24">220      <path d="M5 5 L19 19 M19 5 L5 19" stroke="#000" stroke-width="2.5" stroke-linecap="round" fill="none"></path>221    </svg>222    <div class="header-title">Calendar</div>223  </div>224 225  <!-- Selection summary -->226  <div class="selection">227    <div class="sel-col">228      <div class="label">Check-in</div>229      <div class="date">Sun, Dec 24</div>230    </div>231    <div class="arrow">232      <svg width="48" height="48" viewBox="0 0 24 24">233        <path d="M8 5 L16 12 L8 19" fill="none" stroke="#777" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>234      </svg>235    </div>236    <div class="sel-col" style="text-align:right;">237      <div class="label">Check-out</div>238      <div class="date">Sun, Dec 31</div>239    </div>240  </div>241 242  <!-- Calendar content -->243  <div class="calendar">244    <div class="month-title">December 2023</div>245    <div class="weekdays">246      <div class="weekday">Sun</div><div class="weekday">Mon</div><div class="weekday">Tue</div>247      <div class="weekday">Wed</div><div class="weekday">Thu</div><div class="weekday">Fri</div><div class="weekday">Sat</div>248    </div>249 250    <!-- Early week (muted) -->251    <div class="week">252      <div class="day muted">12</div><div class="day muted">13</div><div class="day muted">14</div>253      <div class="day muted">15</div><div class="day muted">16</div><div class="day muted">17</div><div class="day muted">18</div>254    </div>255    <div class="week">256      <div class="day muted">19</div><div class="day muted">20</div><div class="day muted">21</div>257      <div class="day muted">22</div><div class="day muted">23</div><div class="day muted">24</div><div class="day muted">25</div>258    </div>259 260    <!-- Selected range week -->261    <div class="week range">262      <div class="day">263        <div class="pill">24</div>264      </div>265      <div class="day">25</div>266      <div class="day">26</div>267      <div class="day">27</div>268      <div class="day">28</div>269      <div class="day">29</div>270      <div class="day">30</div>271    </div>272 273    <!-- 31 row -->274    <div class="week range" style="border-top-color:#d1dcf3;">275      <div class="day">276        <div class="pill">31</div>277      </div>278      <div class="day"></div>279      <div class="day"></div>280      <div class="day"></div>281      <div class="day"></div>282      <div class="day"></div>283      <div class="day"></div>284    </div>285 286    <div class="divider"></div>287 288    <!-- January section -->289    <div class="month-title">January 2024</div>290    <div class="weekdays" style="margin-bottom: 24px;">291      <div class="weekday">Sun</div><div class="weekday">Mon</div><div class="weekday">Tue</div>292      <div class="weekday">Wed</div><div class="weekday">Thu</div><div class="weekday">Fri</div><div class="weekday">Sat</div>293    </div>294  </div>295 296  <!-- Primary action button -->297  <div class="primary-cta">OK (7 Nights)</div>298 299  <!-- Bottom gesture bar -->300  <div class="gesture-bar">301    <div class="handle"></div>302  </div>303</div>304</body>305</html>