GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Calendar UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 24px 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #333;26    font-weight: 600;27  }28  .status-left { display: flex; align-items: center; gap: 12px; font-size: 36px; }29  .status-right { display: flex; align-items: center; gap: 24px; }30  .sb-icon { width: 40px; height: 40px; fill: #666; }31 32  /* Top action and title */33  .top-actions {34    position: relative;35    padding: 0 40px;36    height: 64px;37  }38  .cancel {39    position: absolute;40    right: 40px;41    top: 0;42    font-size: 38px;43    color: #1a73e8;44    font-weight: 600;45  }46  .title {47    padding: 24px 40px 0 40px;48    font-size: 64px;49    font-weight: 700;50  }51 52  /* Weekday header */53  .weekdays {54    display: grid;55    grid-template-columns: repeat(7, 1fr);56    gap: 12px;57    padding: 32px 40px 12px 40px;58    color: #7e7e7e;59    font-size: 32px;60    text-align: center;61  }62 63  /* Month section */64  .month {65    padding: 28px 40px 0 40px;66  }67  .month-title {68    font-size: 44px;69    font-weight: 700;70    margin: 18px 0 18px 0;71  }72  .calendar-grid {73    display: grid;74    grid-template-columns: repeat(7, 1fr);75    gap: 12px;76  }77  .day {78    height: 120px;79    border-radius: 24px;80    display: flex;81    align-items: center;82    justify-content: center;83    font-size: 36px;84    font-weight: 600;85    color: #111;86  }87  .day.empty { background: transparent; }88  .day.muted { color: #bdbdbd; }89  .day.accent { color: #1a73e8; }90  .day.sel-mid {91    background: #eaeaea;92    color: #111;93    border-radius: 0;94  }95  .day.sel-start {96    background: #1065ff;97    color: #fff;98    border-radius: 24px 0 0 24px;99  }100  .day.sel-end {101    background: #1065ff;102    color: #fff;103    border-radius: 24px;104  }105 106  /* Footer inputs and button */107  .footer {108    position: absolute;109    left: 0;110    right: 0;111    bottom: 120px;112    padding: 0 40px;113  }114  .inputs {115    display: flex;116    gap: 24px;117    margin-bottom: 24px;118  }119  .date-input {120    flex: 1;121    border: 1.5px solid #cfcfcf;122    border-radius: 12px;123    height: 110px;124    padding: 0 24px;125    display: flex;126    align-items: center;127    gap: 18px;128    font-size: 34px;129    color: #333;130    box-sizing: border-box;131  }132  .cal-icon { width: 44px; height: 44px; fill: none; stroke: #666; stroke-width: 2.5; }133 134  .primary-btn {135    width: 100%;136    height: 118px;137    background: #1769ff;138    color: #fff;139    border: none;140    border-radius: 14px;141    font-size: 42px;142    font-weight: 700;143  }144 145  /* Home indicator */146  .home-indicator {147    position: absolute;148    bottom: 32px;149    left: 50%;150    transform: translateX(-50%);151    width: 240px;152    height: 12px;153    background: #000000;154    opacity: 0.15;155    border-radius: 6px;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Status Bar -->163  <div class="status-bar">164    <div class="status-left">3:35</div>165    <div class="status-right">166      <!-- simple icons -->167      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>168      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 18c4-4 14-4 18 0" stroke="#666" stroke-width="2.2" fill="none" stroke-linecap="round"/></svg>169      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#666"/><rect x="21" y="10" width="2" height="4" rx="1" fill="#666"/></svg>170    </div>171  </div>172 173  <!-- Top action and title -->174  <div class="top-actions">175    <div class="cancel">Cancel</div>176  </div>177  <div class="title">When?</div>178 179  <!-- Weekday header -->180  <div class="weekdays">181    <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>182  </div>183 184  <!-- September -->185  <div class="month">186    <div class="month-title">September 2023</div>187    <div class="calendar-grid">188      <!-- Row 1 -->189      <div class="day empty"></div>190      <div class="day empty"></div>191      <div class="day empty"></div>192      <div class="day empty"></div>193      <div class="day empty"></div>194      <div class="day muted">1</div>195      <div class="day muted">2</div>196 197      <!-- Row 2 -->198      <div class="day muted">3</div>199      <div class="day muted">4</div>200      <div class="day muted">5</div>201      <div class="day accent">6</div>202      <div class="day">7</div>203      <div class="day">8</div>204      <div class="day">9</div>205 206      <!-- Row 3 -->207      <div class="day">10</div>208      <div class="day">11</div>209      <div class="day">12</div>210      <div class="day">13</div>211      <div class="day">14</div>212      <div class="day">15</div>213      <div class="day">16</div>214 215      <!-- Row 4 -->216      <div class="day">17</div>217      <div class="day">18</div>218      <div class="day sel-start">19</div>219      <div class="day sel-mid">20</div>220      <div class="day sel-mid">21</div>221      <div class="day sel-mid">22</div>222      <div class="day sel-mid">23</div>223 224      <!-- Row 5 -->225      <div class="day sel-mid">24</div>226      <div class="day sel-end">25</div>227      <div class="day">26</div>228      <div class="day">27</div>229      <div class="day">28</div>230      <div class="day">29</div>231      <div class="day">30</div>232    </div>233  </div>234 235  <!-- October -->236  <div class="month" style="margin-top: 28px;">237    <div class="month-title">October 2023</div>238    <div class="calendar-grid">239      <!-- Row 1 -->240      <div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>241      <!-- Row 2 -->242      <div class="day">8</div><div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day">12</div><div class="day">13</div><div class="day">14</div>243      <!-- Row 3 -->244      <div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day">18</div><div class="day">19</div><div class="day">20</div><div class="day">21</div>245      <!-- Row 4 -->246      <div class="day">22</div><div class="day">23</div><div class="day">24</div><div class="day">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div>247      <!-- Row 5 -->248      <div class="day">29</div><div class="day">30</div><div class="day">31</div><div class="day empty"></div><div class="day empty"></div><div class="day empty"></div><div class="day empty"></div>249    </div>250  </div>251 252  <!-- Footer controls -->253  <div class="footer">254    <div class="inputs">255      <div class="date-input">256        <svg class="cal-icon" viewBox="0 0 24 24">257          <rect x="3" y="5" width="18" height="16" rx="2" />258          <path d="M8 3v4M16 3v4M3 10h18" />259        </svg>260        <div>Tue, Sep 19</div>261      </div>262      <div class="date-input">263        <svg class="cal-icon" viewBox="0 0 24 24">264          <rect x="3" y="5" width="18" height="16" rx="2" />265          <path d="M8 3v4M16 3v4M3 10h18" />266        </svg>267        <div>Mon, Sep 25</div>268      </div>269    </div>270    <button class="primary-btn">Done</button>271  </div>272 273  <!-- Home indicator -->274  <div class="home-indicator"></div>275</div>276</body>277</html>