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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; color: #213A6B;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 32px;20    display: flex; align-items: center; justify-content: space-between;21    color: #5C6D8F; font-size: 30px;22  }23  .status-right { display: flex; align-items: center; gap: 20px; }24  .icon { width: 34px; height: 34px; display: inline-block; }25 26  /* Header */27  .header {28    padding: 8px 40px 24px 40px;29    border-bottom: 1px solid #F0F2F7;30  }31  .title-row {32    display: flex; align-items: center; gap: 24px;33  }34  .title-row h1 {35    margin: 0; font-size: 48px; font-weight: 800; color: #0F2A66;36  }37  .close-btn {38    width: 52px; height: 52px; border: none; background: transparent; padding: 0; cursor: default;39  }40  .close-btn svg { width: 52px; height: 52px; }41  .filters {42    margin-top: 28px;43    display: flex; gap: 24px;44  }45  .pill {46    flex: 1;47    height: 92px;48    border: 2px solid #A9B7D1;49    background: #F8FAFD;50    border-radius: 20px;51    display: flex; align-items: center; justify-content: space-between;52    padding: 0 28px; font-size: 32px; color: #2C4478;53  }54  .pill .right-icon { width: 30px; height: 30px; }55 56  /* Weekday header */57  .weekdays {58    margin: 18px 40px 10px 40px;59    display: grid; grid-template-columns: repeat(7, 1fr);60    color: #7C8BAA; font-size: 26px; letter-spacing: 3px;61    text-align: center;62  }63 64  /* Month label band */65  .month-band {66    margin-top: 18px;67    height: 90px; line-height: 90px;68    background: #F2F5FA;69    padding: 0 40px;70    color: #9AA7C2; font-weight: 700; font-size: 28px;71  }72 73  /* Calendar grid */74  .calendar {75    padding: 22px 40px 10px 40px;76    display: grid; grid-template-columns: repeat(7, 1fr);77    grid-gap: 18px;78  }79  .day {80    height: 120px;81    border-radius: 12px;82    display: flex; align-items: center; justify-content: center;83    font-size: 34px; font-weight: 600; color: #2E4779;84  }85  .day.dim { color: #D3DBE9; }86  .day.blank { background: transparent; }87  .day.selected {88    position: relative; color: #ffffff; font-weight: 700;89  }90  .day.selected span {91    position: relative; z-index: 2;92  }93  .day.selected::before {94    content: "";95    position: absolute; width: 140px; height: 140px; border-radius: 50%;96    background: #5C86C6; /* selected blue */97    z-index: 1;98  }99 100  /* Bottom confirmation bar */101  .confirm-area {102    position: absolute; left: 0; right: 0; bottom: 110px;103    background: #ffffff; padding: 22px 24px;104    box-shadow: 0 -2px 0 #F0F2F7 inset;105  }106  .confirm-btn {107    height: 108px; border-radius: 24px;108    background: #F56C6C; color: #ffffff;109    display: flex; align-items: center; justify-content: center;110    font-size: 38px; font-weight: 700;111    box-shadow: 0 6px 12px rgba(245,108,108,0.35);112  }113 114  /* Bottom system bar */115  .system-bar {116    position: absolute; left: 0; right: 0; bottom: 0;117    height: 110px; background: #0E2143;118    display: flex; align-items: center; justify-content: center;119  }120  .home-indicator {121    width: 220px; height: 12px; border-radius: 6px;122    background: #D9DDE7; opacity: 0.8;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status bar -->130  <div class="status-bar">131    <div>1:43</div>132    <div class="status-right">133      <!-- simple status icons -->134      <svg class="icon" viewBox="0 0 24 24">135        <circle cx="12" cy="12" r="9" fill="#9AA7C2"></circle>136      </svg>137      <svg class="icon" viewBox="0 0 24 24">138        <circle cx="12" cy="12" r="9" fill="#9AA7C2"></circle>139      </svg>140      <svg class="icon" viewBox="0 0 24 24">141        <rect x="2" y="6" width="20" height="12" rx="2" fill="#9AA7C2"></rect>142      </svg>143      <svg class="icon" viewBox="0 0 24 24">144        <path d="M3 12h14l-4 4M17 8l-4 4" stroke="#9AA7C2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>145      </svg>146    </div>147  </div>148 149  <!-- Header -->150  <div class="header">151    <div class="title-row">152      <button class="close-btn" aria-label="Close">153        <svg viewBox="0 0 24 24">154          <path d="M5 5L19 19M19 5L5 19" stroke="#203864" stroke-width="2.5" stroke-linecap="round"></path>155        </svg>156      </button>157      <h1>Choose date</h1>158    </div>159 160    <div class="filters">161      <div class="pill">162        <span>Fri, Nov 10</span>163      </div>164      <div class="pill">165        <span>Fri, Nov 10</span>166        <svg class="right-icon" viewBox="0 0 24 24">167          <path d="M5 5L19 19M19 5L5 19" stroke="#A9B7D1" stroke-width="2.5" stroke-linecap="round"></path>168        </svg>169      </div>170    </div>171  </div>172 173  <!-- Weekday header -->174  <div class="weekdays">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-band">NOVEMBER 2023</div>180  <div class="calendar">181    <!-- Row 1 -->182    <div class="day blank"></div>183    <div class="day blank"></div>184    <div class="day blank"></div>185    <div class="day dim">1</div>186    <div class="day dim">2</div>187    <div class="day dim">3</div>188    <div class="day dim">4</div>189 190    <!-- Row 2 -->191    <div class="day">5</div>192    <div class="day">6</div>193    <div class="day">7</div>194    <div class="day">8</div>195    <div class="day">9</div>196    <div class="day selected"><span>10</span></div>197    <div class="day">11</div>198 199    <!-- Row 3 -->200    <div class="day">12</div>201    <div class="day">13</div>202    <div class="day">14</div>203    <div class="day">15</div>204    <div class="day">16</div>205    <div class="day">17</div>206    <div class="day">18</div>207 208    <!-- Row 4 -->209    <div class="day">19</div>210    <div class="day">20</div>211    <div class="day">21</div>212    <div class="day">22</div>213    <div class="day">23</div>214    <div class="day">24</div>215    <div class="day">25</div>216 217    <!-- Row 5 -->218    <div class="day">26</div>219    <div class="day">27</div>220    <div class="day">28</div>221    <div class="day">29</div>222    <div class="day">30</div>223    <div class="day blank"></div>224    <div class="day blank"></div>225  </div>226 227  <!-- December -->228  <div class="month-band">DECEMBER 2023</div>229  <div class="calendar">230    <!-- Row 1 -->231    <div class="day blank"></div>232    <div class="day blank"></div>233    <div class="day blank"></div>234    <div class="day blank"></div>235    <div class="day blank"></div>236    <div class="day">1</div>237    <div class="day">2</div>238 239    <!-- Row 2 -->240    <div class="day">3</div>241    <div class="day">4</div>242    <div class="day">5</div>243    <div class="day">6</div>244    <div class="day">7</div>245    <div class="day">8</div>246    <div class="day">9</div>247 248    <!-- Row 3 -->249    <div class="day">10</div>250    <div class="day">11</div>251    <div class="day">12</div>252    <div class="day">13</div>253    <div class="day">14</div>254    <div class="day">15</div>255    <div class="day">16</div>256 257    <!-- Row 4 -->258    <div class="day">17</div>259    <div class="day">18</div>260    <div class="day">19</div>261    <div class="day">20</div>262    <div class="day">21</div>263    <div class="day">22</div>264    <div class="day">23</div>265  </div>266 267  <!-- Confirm area -->268  <div class="confirm-area">269    <div class="confirm-btn">Confirm</div>270  </div>271 272  <!-- Bottom system bar -->273  <div class="system-bar">274    <div class="home-indicator"></div>275  </div>276 277</div>278</body>279</html>