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 Dates UI</title>7<style>8  :root{9    --accent:#ff6f40;10    --text:#1a1a1a;11    --muted:#8a8f98;12    --light:#e9eef5;13    --blue:#1f6ef2;14    --range:#e5eefc;15  }16  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }17  #render-target{18    width:1080px; height:2400px; position:relative; overflow:hidden;19    background:#ffffff; box-shadow:0 10px 24px rgba(0,0,0,0.12);20  }21 22  /* Status bar */23  .status-bar{24    height:100px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#000; font-weight:600;25    font-size:38px;26  }27  .sb-left{display:flex; align-items:center; gap:18px;}28  .sb-right{display:flex; align-items:center; gap:28px; color:#333;}29  .icon{display:inline-flex; align-items:center; justify-content:center;}30  .battery svg{width:54px; height:32px;}31  .wifi svg{width:40px; height:36px;}32 33  /* Header */34  .header{35    display:flex; align-items:center; gap:28px;36    padding:18px 36px 8px 36px;37  }38  .close-btn{width:72px; height:72px; border:none; background:transparent; cursor:pointer;}39  .close-btn svg{width:56px; height:56px; stroke:#222; stroke-width:6; stroke-linecap:round;}40  .title{font-size:56px; font-weight:800; color:#111; margin-top:6px;}41 42  /* Check-in/out row */43  .check-row{44    display:flex; align-items:flex-start; justify-content:space-between;45    padding:28px 48px 16px 48px; position:relative;46  }47  .check-block{width:45%;}48  .label{color:var(--muted); font-size:34px; margin-bottom:8px;}49  .date-strong{font-size:52px; font-weight:800; color:#0f0f12;}50  .nights-pill{51    position:absolute; left:50%; transform:translateX(-50%);52    top:24px; background:#e8f0fe; color:#3a5ea8; font-weight:700;53    padding:18px 28px; border-radius:999px; font-size:34px; border:1px solid #d5e0f5;54  }55 56  /* Weekday row */57  .weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:0; padding:24px 60px 12px 60px; text-align:center;}58  .weekday{font-size:30px; color:#939aa3; letter-spacing:1px; font-weight:700;}59  .weekday.accent{color:var(--accent);}60  .divider{height:2px; background:#e6e8eb; margin:0 48px;}61 62  /* Month sections */63  .month-section{padding:40px 0; position:relative;}64  .month-title{ text-align:center; font-size:44px; font-weight:700; color:#111; margin-bottom:28px;}65  .month-grid{66    position:relative;67    padding:0 72px;68    display:grid; grid-template-columns:repeat(7,1fr); gap:30px;69  }70  .day, .empty{71    width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;72    font-size:42px; color:#12161a; font-weight:700;73  }74  .empty{color:transparent;}75  .day.disabled{color:#cfd3d9; font-weight:700;}76  .day.selected{77    background:var(--blue); color:#fff; border-radius:999px;78  }79  .range{80    position:absolute; left:72px; top:0px; height:calc(100% / 6 - 30px); /* approx first row height */81    width:calc((100% - 144px) * 5 / 7);82    background:var(--range); border-radius:80px;83    z-index:0;84  }85  .month-grid .day{position:relative; z-index:1;}86 87  /* CTA */88  .cta-wrap{89    position:absolute; left:0; right:0; bottom:160px; padding:0 36px;90  }91  .cta-btn{92    width:100%; background:var(--accent); color:#fff; border:none; border-radius:24px;93    font-size:46px; font-weight:800; padding:36px 24px; box-shadow:0 10px 18px rgba(255,111,64,0.35);94  }95  .home-indicator{96    position:absolute; left:50%; transform:translateX(-50%);97    bottom:48px; width:360px; height:18px; background:#000; opacity:0.85; border-radius:12px;98  }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status Bar -->105  <div class="status-bar">106    <div class="sb-left">107      <div>12:49</div>108    </div>109    <div class="sb-right">110      <div class="wifi icon">111        <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">112          <path d="M2 8c5-4 15-4 20 0"></path>113          <path d="M5 12c3-2 11-2 14 0"></path>114          <path d="M8 16c2-1 6-1 8 0"></path>115          <circle cx="12" cy="19" r="1.5" fill="#333"></circle>116        </svg>117      </div>118      <div class="battery icon">119        <svg viewBox="0 0 26 14">120          <rect x="1" y="2" width="20" height="10" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>121          <rect x="3" y="4" width="16" height="6" fill="#333"/>122          <rect x="22" y="5" width="3" height="4" rx="1" fill="#333"/>123        </svg>124      </div>125      <div style="font-weight:700;">100%</div>126    </div>127  </div>128 129  <!-- Header -->130  <div class="header">131    <button class="close-btn" aria-label="Close">132      <svg viewBox="0 0 24 24" fill="none">133        <path d="M5 5 L19 19" />134        <path d="M19 5 L5 19" />135      </svg>136    </button>137    <div class="title">Select Dates</div>138  </div>139 140  <!-- Check-in / Check-out -->141  <div class="check-row">142    <div class="check-block">143      <div class="label">Check-in</div>144      <div class="date-strong">1 Jan 2024</div>145    </div>146    <div class="nights-pill">4 Nights</div>147    <div class="check-block" style="text-align:right;">148      <div class="label">Check-out</div>149      <div class="date-strong">5 Jan 2024</div>150    </div>151  </div>152 153  <!-- Weekdays -->154  <div class="weekdays">155    <div class="weekday">MON</div>156    <div class="weekday">TUE</div>157    <div class="weekday">WED</div>158    <div class="weekday">THU</div>159    <div class="weekday">FRI</div>160    <div class="weekday accent">SAT</div>161    <div class="weekday accent">SUN</div>162  </div>163  <div class="divider"></div>164 165  <!-- December 2023 -->166  <div class="month-section">167    <div class="month-title">December 2023</div>168    <div class="month-grid">169      <!-- December starts on FRI: add four empties -->170      <div class="empty"></div>171      <div class="empty"></div>172      <div class="empty"></div>173      <div class="empty"></div>174 175      <div class="day disabled">1</div>176      <div class="day disabled">2</div>177      <div class="day disabled">3</div>178      <div class="day disabled">4</div>179      <div class="day disabled">5</div>180      <div class="day disabled">6</div>181      <div class="day disabled">7</div>182      <div class="day disabled">8</div>183      <div class="day disabled">9</div>184      <div class="day disabled">10</div>185      <div class="day disabled">11</div>186      <div class="day disabled">12</div>187      <div class="day disabled">13</div>188      <div class="day disabled">14</div>189      <div class="day disabled">15</div>190      <div class="day disabled">16</div>191      <div class="day disabled">17</div>192 193      <div class="day">18</div>194      <div class="day">19</div>195      <div class="day">20</div>196      <div class="day">21</div>197      <div class="day">22</div>198      <div class="day">23</div>199      <div class="day">24</div>200      <div class="day">25</div>201      <div class="day">26</div>202      <div class="day">27</div>203      <div class="day">28</div>204      <div class="day">29</div>205      <div class="day">30</div>206      <div class="day">31</div>207    </div>208  </div>209 210  <!-- January 2024 -->211  <div class="month-section">212    <div class="month-title">January 2024</div>213 214    <!-- Range pill behind 1-5 -->215    <div class="range" aria-hidden="true"></div>216 217    <div class="month-grid">218      <!-- January 2024 starts on MON -->219      <div class="day selected">1</div>220      <div class="day">2</div>221      <div class="day">3</div>222      <div class="day">4</div>223      <div class="day selected">5</div>224      <div class="day">6</div>225      <div class="day">7</div>226 227      <div class="day">8</div>228      <div class="day">9</div>229      <div class="day">10</div>230      <div class="day">11</div>231      <div class="day">12</div>232      <div class="day">13</div>233      <div class="day">14</div>234 235      <div class="day">15</div>236      <div class="day">16</div>237      <div class="day">17</div>238      <div class="day">18</div>239      <div class="day">19</div>240      <div class="day">20</div>241      <div class="day">21</div>242 243      <div class="day">22</div>244      <div class="day">23</div>245      <div class="day">24</div>246      <div class="day">25</div>247      <div class="day">26</div>248      <div class="day">27</div>249      <div class="day">28</div>250 251      <div class="day">29</div>252      <div class="day">30</div>253      <div class="day">31</div>254      <!-- trailing empties not needed -->255    </div>256  </div>257 258  <!-- CTA Button -->259  <div class="cta-wrap">260    <button class="cta-btn">Continue For 4 Nights</button>261  </div>262 263  <!-- Home indicator -->264  <div class="home-indicator"></div>265</div>266</body>267</html>