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>Date Picker - Choose date</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, "Apple Color Emoji", "Segoe UI Emoji";16    color: #1A2B57;17  }18 19  /* Top app bar */20  .appbar {21    position: relative;22    padding: 70px 48px 24px 48px;23  }24  .close-btn {25    width: 72px;26    height: 72px;27    border-radius: 36px;28    display: inline-flex;29    justify-content: center;30    align-items: center;31    cursor: default;32  }33  .close-btn svg { width: 40px; height: 40px; stroke: #1A2B57; stroke-width: 5; }34  .title {35    position: absolute;36    left: 132px;37    top: 78px;38    font-size: 56px;39    font-weight: 800;40    letter-spacing: 0.2px;41  }42 43  /* Date chips row */44  .chip-row {45    display: flex;46    gap: 24px;47    padding: 24px 48px 12px 48px;48  }49  .chip {50    padding: 28px 36px;51    border: 2px solid #C9D3EA;52    border-radius: 24px;53    font-size: 38px;54    color: #1A2B57;55    background: #ffffff;56  }57  .chip.secondary {58    color: #9AA4B5;59    background: #F2F4F8;60    border-color: #E3E8F2;61  }62 63  /* Weekday header */64  .weekday {65    display: grid;66    grid-template-columns: repeat(7, 1fr);67    padding: 24px 36px 16px 36px;68    color: #A6AEC0;69    font-size: 34px;70    text-align: center;71  }72 73  /* Month section */74  .month-label {75    background: #F2F4F8;76    color: #A6AEC0;77    padding: 24px 48px;78    font-weight: 700;79    font-size: 32px;80    letter-spacing: 1px;81  }82  .calendar {83    padding: 24px 36px 8px 36px;84  }85  .grid {86    display: grid;87    grid-template-columns: repeat(7, 1fr);88    gap: 22px 0;89    text-align: center;90    font-size: 40px;91  }92  .day {93    color: #2B3C6B;94    opacity: 0.9;95  }96  .muted { color: #AEB6C6; opacity: 0.35; }97  .selected {98    display: inline-flex;99    width: 132px;100    height: 132px;101    border-radius: 50%;102    background: #6D89C4;103    color: #ffffff;104    align-items: center;105    justify-content: center;106    font-weight: 700;107    margin: 0 auto;108  }109 110  /* Bottom confirm area */111  .confirm-wrap {112    position: absolute;113    left: 0;114    right: 0;115    bottom: 96px;116    padding: 24px 24px 24px 24px;117    background: linear-gradient(to top, rgba(0,0,0,0.04), rgba(0,0,0,0));118  }119  .confirm-btn {120    width: calc(100% - 64px);121    margin: 0 auto;122    height: 144px;123    background: #E7726E;124    border-radius: 28px;125    color: #ffffff;126    font-size: 48px;127    font-weight: 700;128    display: flex;129    align-items: center;130    justify-content: center;131    box-shadow: 0 8px 18px rgba(231,114,110,0.35);132  }133 134  /* Bottom system bar mock */135  .system-bottom {136    position: absolute;137    left: 0; right: 0; bottom: 0;138    height: 96px;139    background: #0F1633;140  }141  .home-indicator {142    position: absolute;143    left: 50%;144    transform: translateX(-50%);145    bottom: 28px;146    width: 240px;147    height: 10px;148    background: #D8DBE6;149    border-radius: 6px;150    opacity: 0.85;151  }152</style>153</head>154<body>155<div id="render-target">156 157  <!-- Header -->158  <div class="appbar">159    <div class="close-btn" aria-label="Close">160      <svg viewBox="0 0 24 24" fill="none">161        <path d="M5 5 L19 19 M19 5 L5 19" />162      </svg>163    </div>164    <div class="title">Choose date</div>165  </div>166 167  <!-- Chips -->168  <div class="chip-row">169    <div class="chip">Tue, Nov 21</div>170    <div class="chip secondary">+ Add Return</div>171  </div>172 173  <!-- Weekday headings -->174  <div class="weekday">175    <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>176  </div>177 178  <!-- November -->179  <div class="month-label">NOVEMBER 2023</div>180  <div class="calendar">181    <div class="grid">182      <!-- Row 1 (leading days from previous month) -->183      <div class="muted">29</div>184      <div class="muted">30</div>185      <div class="muted">31</div>186      <div class="muted">1</div>187      <div class="muted">2</div>188      <div class="muted">3</div>189      <div class="muted">4</div>190      <!-- Row 2 -->191      <div class="muted">5</div><div class="muted">6</div><div class="muted">7</div>192      <div class="muted">8</div><div class="muted">9</div><div class="muted">10</div><div class="muted">11</div>193      <!-- Row 3 -->194      <div class="muted">12</div><div class="muted">13</div><div class="muted">14</div>195      <div class="muted">15</div><div class="muted">16</div><div class="muted">17</div><div class="muted">18</div>196      <!-- Row 4 actual visible with selection -->197      <div class="muted">19</div><div class="muted">20</div>198      <div><div class="selected">21</div></div>199      <div class="day">22</div><div class="day">23</div><div class="day">24</div><div class="day">25</div>200      <!-- Row 5 -->201      <div class="day">26</div><div class="day">27</div><div class="day">28</div>202      <div class="day">29</div><div class="day">30</div><div class="muted">1</div><div class="muted">2</div>203    </div>204  </div>205 206  <!-- December -->207  <div class="month-label">DECEMBER 2023</div>208  <div class="calendar">209    <div class="grid">210      <!-- First row of December (1st on Fri) -->211      <div class="muted">26</div><div class="muted">27</div><div class="muted">28</div>212      <div class="muted">29</div><div class="muted">30</div><div class="day">1</div><div class="day">2</div>213      <!-- Row 2 -->214      <div class="day">3</div><div class="day">4</div><div class="day">5</div>215      <div class="day">6</div><div class="day">7</div><div class="day">8</div><div class="day">9</div>216      <!-- Row 3 -->217      <div class="day">10</div><div class="day">11</div><div class="day">12</div>218      <div class="day">13</div><div class="day">14</div><div class="day">15</div><div class="day">16</div>219      <!-- Row 4 -->220      <div class="day">17</div><div class="day">18</div><div class="day">19</div>221      <div class="day">20</div><div class="day">21</div><div class="day">22</div><div class="day">23</div>222    </div>223  </div>224 225  <!-- Confirm button -->226  <div class="confirm-wrap">227    <div class="confirm-btn">Confirm</div>228  </div>229 230  <!-- Bottom system bar -->231  <div class="system-bottom">232    <div class="home-indicator"></div>233  </div>234 235</div>236</body>237</html>