GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Choose Date UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    height: 110px;18    padding: 0 40px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #202020;23    font-size: 40px;24  }25  .status-icons {26    display: flex;27    gap: 24px;28    align-items: center;29  }30  .status-icons svg { width: 40px; height: 40px; }31 32  /* Header */33  .header {34    padding: 20px 40px 10px 40px;35  }36  .close-row {37    height: 80px;38    display: flex;39    align-items: center;40  }41  .close-btn {42    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; cursor: pointer;43  }44  .close-btn svg { width: 40px; height: 40px; }45  .title {46    font-size: 64px;47    font-weight: 800;48    color: #142A5C;49    margin-top: 10px;50  }51 52  /* Pills */53  .pill-row {54    display: flex;55    gap: 24px;56    padding: 24px 40px 8px 40px;57  }58  .pill {59    flex: 1;60    height: 120px;61    border-radius: 22px;62    border: 2px solid #C9D0DB;63    display: flex;64    align-items: center;65    padding: 0 32px;66    font-size: 44px;67    color: #2E3C5F;68    background: #F7F8FC;69  }70  .pill.secondary {71    color: #96A0B5;72    background: #F1F3F8;73  }74 75  /* Weekday labels */76  .weekday-row {77    display: grid;78    grid-template-columns: repeat(7, 1fr);79    padding: 20px 40px;80    gap: 0;81    color: #9AA3B8;82    font-size: 38px;83    letter-spacing: 2px;84    text-align: center;85  }86 87  /* Month label */88  .month-label {89    font-size: 36px;90    color: #8892A8;91    background: #F3F5FA;92    padding: 28px 40px;93    text-transform: uppercase;94    font-weight: 700;95    letter-spacing: 2px;96  }97 98  /* Calendar grid */99  .month {100    padding: 20px 40px 30px 40px;101  }102  .grid {103    display: grid;104    grid-template-columns: repeat(7, 1fr);105    gap: 14px;106  }107  .day {108    height: 150px;109    position: relative;110    display: flex;111    align-items: center;112    justify-content: center;113    color: #2E416E;114    font-size: 48px;115    font-weight: 700;116  }117  .day.empty { color: transparent; }118  .day.muted { color: #C7CEDD; font-weight: 700; }119  .day.selected {120    color: #FFFFFF;121    z-index: 1;122  }123  .day.selected::before {124    content: "";125    position: absolute;126    width: 190px;127    height: 190px;128    background: #698AC3;129    border-radius: 50%;130    top: 50%;131    left: 50%;132    transform: translate(-50%, -50%);133    z-index: 0;134  }135 136  /* Confirm bar */137  .confirm-bar {138    position: absolute;139    left: 0; right: 0; bottom: 120px;140    padding: 0 40px;141  }142  .confirm-btn {143    height: 140px;144    background: #E9706B;145    color: #FFFFFF;146    font-size: 54px;147    font-weight: 800;148    border-radius: 28px;149    display: flex;150    align-items: center;151    justify-content: center;152    box-shadow: 0 10px 20px rgba(233, 112, 107, 0.35);153  }154 155  /* Bottom safe area indicator */156  .home-indicator {157    position: absolute;158    bottom: 40px;159    left: 50%;160    width: 360px;161    height: 14px;162    background: #D0D5E2;163    border-radius: 10px;164    transform: translateX(-50%);165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status bar -->172  <div class="status-bar">173    <div>11:59</div>174    <div class="status-icons">175      <!-- Wi-Fi icon -->176      <svg viewBox="0 0 24 24">177        <path d="M2 8c5-4 15-4 20 0" stroke="#384A75" stroke-width="2" fill="none" stroke-linecap="round"/>178        <path d="M5 11c4-3 10-3 14 0" stroke="#384A75" stroke-width="2" fill="none" stroke-linecap="round"/>179        <path d="M8 14c3-2 5-2 8 0" stroke="#384A75" stroke-width="2" fill="none" stroke-linecap="round"/>180        <circle cx="12" cy="17" r="1.6" fill="#384A75"/>181      </svg>182      <!-- Battery icon -->183      <svg viewBox="0 0 28 16">184        <rect x="1" y="3" width="22" height="10" rx="2" stroke="#384A75" stroke-width="2" fill="none"/>185        <rect x="3" y="5" width="18" height="6" rx="1" fill="#384A75"/>186        <rect x="24" y="6" width="3" height="4" rx="1" fill="#384A75"/>187      </svg>188    </div>189  </div>190 191  <!-- Header -->192  <div class="header">193    <div class="close-row">194      <div class="close-btn">195        <svg viewBox="0 0 24 24">196          <path d="M5 5l14 14M19 5L5 19" stroke="#20315F" stroke-width="3" stroke-linecap="round"/>197        </svg>198      </div>199    </div>200    <div class="title">Choose date</div>201  </div>202 203  <!-- Pills -->204  <div class="pill-row">205    <div class="pill">Sat, Nov 04</div>206    <div class="pill secondary">+ Add Return</div>207  </div>208 209  <!-- Weekday labels -->210  <div class="weekday-row">211    <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>212  </div>213 214  <!-- November -->215  <div class="month-label">November 2023</div>216  <div class="month">217    <div class="grid">218      <div class="day empty"></div>219      <div class="day empty"></div>220      <div class="day muted">1</div>221      <div class="day muted">2</div>222      <div class="day muted">3</div>223      <div class="day selected">4</div>224      <div class="day">5</div>225      <div class="day">6</div>226      <div class="day">7</div>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 232      <div class="day">12</div>233      <div class="day">13</div>234      <div class="day">14</div>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 240      <div class="day">19</div>241      <div class="day">20</div>242      <div class="day">21</div>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 248      <div class="day">26</div>249      <div class="day">27</div>250      <div class="day">28</div>251      <div class="day">29</div>252      <div class="day">30</div>253      <div class="day empty"></div>254      <div class="day empty"></div>255    </div>256  </div>257 258  <!-- December -->259  <div class="month-label">December 2023</div>260  <div class="month">261    <div class="grid">262      <div class="day empty"></div>263      <div class="day empty"></div>264      <div class="day empty"></div>265      <div class="day empty"></div>266      <div class="day empty"></div>267      <div class="day muted">1</div>268      <div class="day muted">2</div>269 270      <div class="day">3</div>271      <div class="day">4</div>272      <div class="day">5</div>273      <div class="day">6</div>274      <div class="day">7</div>275      <div class="day">8</div>276      <div class="day">9</div>277 278      <div class="day">10</div>279      <div class="day">11</div>280      <div class="day">12</div>281      <div class="day">13</div>282      <div class="day">14</div>283      <div class="day">15</div>284      <div class="day">16</div>285 286      <div class="day">17</div>287      <div class="day">18</div>288      <div class="day">19</div>289      <div class="day">20</div>290      <div class="day">21</div>291      <div class="day">22</div>292      <div class="day">23</div>293    </div>294  </div>295 296  <!-- Confirm button -->297  <div class="confirm-bar">298    <div class="confirm-btn">Confirm</div>299  </div>300 301  <!-- Bottom home indicator -->302  <div class="home-indicator"></div>303 304</div>305</body>306</html>