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>Choose date UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar mock */18  .status-bar {19    height: 110px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #6b7280;25    font-weight: 600;26    font-size: 34px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 26px;32  }33  .status-dot { width: 24px; height: 24px; background: #9CA3AF; border-radius: 50%; }34  .battery {35    width: 36px; height: 24px; border: 3px solid #9CA3AF; border-radius: 6px; position: relative;36  }37  .battery::after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 8px; background: #9CA3AF; border-radius: 2px; }38  .battery-fill { position: absolute; left: 3px; top: 3px; width: 24px; height: 14px; background: #9CA3AF; border-radius: 3px; }39 40  /* Header */41  .header {42    padding: 10px 40px 0 40px;43  }44  .title-row {45    display: flex;46    align-items: center;47    gap: 26px;48    margin-top: 6px;49  }50  .close-icon {51    width: 56px; height: 56px;52  }53  .close-icon svg path { stroke: #16264B; stroke-width: 6px; stroke-linecap: round; }54  .title {55    font-size: 64px;56    font-weight: 800;57    color: #16264B; /* deep navy */58    letter-spacing: 0.2px;59  }60 61  /* Chips */62  .chips {63    margin-top: 30px;64    display: flex;65    gap: 26px;66  }67  .chip {68    height: 110px;69    border-radius: 20px;70    display: flex; align-items: center;71    padding: 0 30px;72    font-size: 40px;73    font-weight: 600;74  }75  .chip.primary {76    border: 3px solid #D3DAE7;77    color: #1F2D54;78    min-width: 520px;79    box-sizing: border-box;80    background: #FFFFFF;81  }82  .chip.secondary {83    background: #F1F3F7;84    color: #9AA3B6;85    min-width: 420px;86  }87 88  /* Weekdays */89  .weekdays {90    margin: 36px 20px 10px 20px;91    display: grid;92    grid-template-columns: repeat(7, 1fr);93    gap: 0;94    color: #9AA3B6;95    font-size: 34px;96    font-weight: 700;97    text-align: center;98  }99  .weekdays div { padding: 18px 0; }100 101  /* Month label strip */102  .month-strip {103    background: #F1F4F9;104    color: #97A3B8;105    font-weight: 800;106    letter-spacing: 2px;107    font-size: 30px;108    padding: 24px 40px;109    text-transform: uppercase;110    margin-top: 10px;111  }112 113  /* Calendar grid */114  .calendar {115    padding: 34px 40px 18px 40px;116  }117  .grid {118    display: grid;119    grid-template-columns: repeat(7, 1fr);120    gap: 18px 18px;121  }122  .day {123    height: 135px;124    display: flex;125    align-items: center;126    justify-content: center;127    color: #2E3A66;128    font-size: 40px;129    font-weight: 700;130    position: relative;131  }132  .day.past { color: #CBD3E2; }133  .day.empty { color: transparent; }134  .day .circle {135    width: 104px; height: 104px; border-radius: 50%;136    background: #5D8BC5;137    color: #ffffff;138    display: flex; align-items: center; justify-content: center;139  }140 141  /* Bottom action area */142  .bottom-sheet {143    position: absolute;144    left: 0; right: 0; bottom: 120px;145    background: #FFFFFF;146    padding: 26px 40px 38px 40px;147    box-shadow: 0 -8px 24px rgba(20, 38, 75, 0.06);148  }149  .cta {150    width: 100%;151    height: 130px;152    background: #F56E73; /* salmon coral */153    border: none;154    border-radius: 28px;155    color: #FFFFFF;156    font-size: 46px;157    font-weight: 700;158    letter-spacing: 0.4px;159    cursor: pointer;160  }161 162  /* Bottom safe area / nav bar */163  .nav-bar {164    position: absolute;165    left: 0; right: 0; bottom: 0;166    height: 120px;167    background: #0F1E3F;168    display: flex; align-items: center; justify-content: center;169  }170  .home-indicator {171    width: 220px; height: 12px; background: #E5E7EB; border-radius: 10px;172    opacity: 0.9;173  }174</style>175</head>176<body>177<div id="render-target">178  <!-- Mock status bar -->179  <div class="status-bar">180    <div>5:59</div>181    <div class="status-icons">182      <div class="status-dot"></div>183      <div style="font-size:28px;color:#9CA3AF;">28°</div>184      <div class="status-dot"></div>185      <div class="status-dot"></div>186      <div class="battery"><div class="battery-fill"></div></div>187    </div>188  </div>189 190  <!-- Header -->191  <div class="header">192    <div class="title-row">193      <div class="close-icon">194        <svg viewBox="0 0 56 56">195          <path d="M12 12 L44 44 M44 12 L12 44"></path>196        </svg>197      </div>198      <div class="title">Choose date</div>199    </div>200 201    <div class="chips">202      <div class="chip primary">Wed, Sep 13</div>203      <div class="chip secondary">+ Add Return</div>204    </div>205  </div>206 207  <!-- Weekdays -->208  <div class="weekdays">209    <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>210  </div>211 212  <!-- September -->213  <div class="month-strip">September 2023</div>214  <div class="calendar">215    <div class="grid">216      <!-- Row 1 (Sun–Sat): Sun–Thu empty, Fri 1, Sat 2 -->217      <div class="day empty">.</div>218      <div class="day empty">.</div>219      <div class="day empty">.</div>220      <div class="day empty">.</div>221      <div class="day empty">.</div>222      <div class="day past">1</div>223      <div class="day past">2</div>224      <!-- Row 2 -->225      <div class="day past">3</div>226      <div class="day past">4</div>227      <div class="day past">5</div>228      <div class="day past">6</div>229      <div class="day past">7</div>230      <div class="day past">8</div>231      <div class="day past">9</div>232      <!-- Row 3 -->233      <div class="day past">10</div>234      <div class="day past">11</div>235      <div class="day past">12</div>236      <div class="day"><div class="circle">13</div></div>237      <div class="day">14</div>238      <div class="day">15</div>239      <div class="day">16</div>240      <!-- Row 4 -->241      <div class="day">17</div>242      <div class="day">18</div>243      <div class="day">19</div>244      <div class="day">20</div>245      <div class="day">21</div>246      <div class="day">22</div>247      <div class="day">23</div>248      <!-- Row 5 -->249      <div class="day">24</div>250      <div class="day">25</div>251      <div class="day">26</div>252      <div class="day">27</div>253      <div class="day">28</div>254      <div class="day">29</div>255      <div class="day">30</div>256    </div>257  </div>258 259  <!-- October -->260  <div class="month-strip">October 2023</div>261  <div class="calendar">262    <div class="grid">263      <!-- Row 1: starts on Sunday -->264      <div class="day">1</div>265      <div class="day">2</div>266      <div class="day">3</div>267      <div class="day">4</div>268      <div class="day">5</div>269      <div class="day">6</div>270      <div class="day">7</div>271      <!-- Row 2 -->272      <div class="day">8</div>273      <div class="day">9</div>274      <div class="day">10</div>275      <div class="day">11</div>276      <div class="day">12</div>277      <div class="day">13</div>278      <div class="day">14</div>279      <!-- Row 3 -->280      <div class="day">15</div>281      <div class="day">16</div>282      <div class="day">17</div>283      <div class="day">18</div>284      <div class="day">19</div>285      <div class="day">20</div>286      <div class="day">21</div>287      <!-- Row 4 -->288      <div class="day">22</div>289      <div class="day">23</div>290      <div class="day">24</div>291      <div class="day">25</div>292      <div class="day">26</div>293      <div class="day">27</div>294      <div class="day">28</div>295      <!-- Row 5 (partial for visual balance) -->296      <div class="day">29</div>297      <div class="day">30</div>298      <div class="day">31</div>299      <div class="day empty">.</div>300      <div class="day empty">.</div>301      <div class="day empty">.</div>302      <div class="day empty">.</div>303    </div>304  </div>305 306  <!-- Bottom action -->307  <div class="bottom-sheet">308    <button class="cta">Confirm</button>309  </div>310 311  <!-- Device nav bar mock -->312  <div class="nav-bar">313    <div class="home-indicator"></div>314  </div>315</div>316</body>317</html>