GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Calendar Dialog UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f0f12;13    color: #e9e5f4;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    color: #d9d5e7;24    font-size: 44px;25    display: flex;26    align-items: center;27    padding: 0 32px;28    box-sizing: border-box;29  }30  .status-left { flex: 1; }31  .status-right {32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .icon-square {37    width: 38px;38    height: 38px;39    border-radius: 6px;40    background: #5a5866;41    opacity: 0.9;42  }43  .battery {44    width: 64px;45    height: 32px;46    border: 3px solid #d9d5e7;47    border-radius: 6px;48    position: relative;49  }50  .battery::after {51    content: "";52    position: absolute;53    right: -10px;54    top: 8px;55    width: 8px;56    height: 16px;57    background: #d9d5e7;58    border-radius: 2px;59  }60  .battery .level {61    position: absolute;62    left: 3px;63    top: 3px;64    height: 22px;65    width: 40px;66    background: #d9d5e7;67  }68 69  /* Page header behind dialog */70  .page-header {71    position: absolute;72    top: 160px;73    left: 120px;74    right: 120px;75    color: #bcb7c9;76    font-size: 72px;77    line-height: 1.2;78    opacity: 0.35;79  }80  .save-pill {81    position: absolute;82    top: 200px;83    right: 72px;84    background: #7f6aa8;85    color: #f3e9ff;86    border-radius: 40px;87    padding: 26px 44px;88    font-size: 50px;89    opacity: 0.9;90  }91 92  /* Dialog/modal */93  .dialog {94    position: absolute;95    left: 54px;96    top: 470px;97    width: 972px;98    height: 1380px;99    background: #2b2730;100    border-radius: 56px;101    box-shadow: 0 40px 120px rgba(0,0,0,0.5);102    padding: 56px;103    box-sizing: border-box;104  }105  .dialog-title {106    font-size: 48px;107    color: #d7d0e3;108    margin-bottom: 30px;109  }110  .big-date {111    font-size: 90px;112    color: #e6def2;113    margin-bottom: 10px;114    display: flex;115    align-items: center;116    gap: 24px;117  }118  .edit-pencil {119    width: 40px; height: 40px;120    display: inline-block;121  }122  .month-row {123    display: flex;124    align-items: center;125    gap: 18px;126    font-size: 50px;127    color: #cabfe0;128    margin: 26px 0 36px;129  }130  .chevrons {131    margin-left: auto;132    display: flex;133    gap: 40px;134    color: #cfc6e4;135    font-size: 64px;136  }137  .weekdays {138    display: grid;139    grid-template-columns: repeat(7, 1fr);140    font-size: 44px;141    color: #b3a9c9;142    margin-top: 10px;143    margin-bottom: 24px;144    text-align: center;145  }146  .calendar {147    display: grid;148    grid-template-columns: repeat(7, 1fr);149    grid-auto-rows: 120px;150    gap: 10px;151    color: #e4deef;152    font-size: 56px;153    text-align: center;154    align-items: center;155  }156  .day {157    display: flex;158    justify-content: center;159    align-items: center;160  }161  .day .pill {162    width: 110px;163    height: 110px;164    line-height: 110px;165    border-radius: 60px;166    display: inline-block;167  }168  .selected .pill {169    background: #c9a9ff;170    color: #221b2b;171    font-weight: bold;172  }173  .ring .pill {174    border: 4px solid #b59ef1;175    color: #e6def2;176  }177  .calendar .muted { opacity: 0.3; }178  .dialog-actions {179    position: absolute;180    bottom: 60px;181    right: 60px;182    display: flex;183    gap: 80px;184    font-size: 52px;185    color: #caaeff;186  }187 188  /* Faint background content */189  .background-lines {190    position: absolute;191    bottom: 220px;192    left: 120px;193    width: 840px;194    color: #7c768a;195    opacity: 0.28;196    font-size: 42px;197    line-height: 1.6;198  }199</style>200</head>201<body>202<div id="render-target">203  <!-- Status bar -->204  <div class="status-bar">205    <div class="status-left">2:07</div>206    <div class="status-right">207      <div class="icon-square"></div>208      <div class="icon-square"></div>209      <div class="icon-square"></div>210      <!-- Wi-Fi icon -->211      <svg width="52" height="52" viewBox="0 0 24 24" fill="none">212        <path d="M2 8a16 16 0 0 1 20 0" stroke="#d9d5e7" stroke-width="2" stroke-linecap="round"/>213        <path d="M5 12a11 11 0 0 1 14 0" stroke="#d9d5e7" stroke-width="2" stroke-linecap="round"/>214        <path d="M8 16a6 6 0 0 1 8 0" stroke="#d9d5e7" stroke-width="2" stroke-linecap="round"/>215        <circle cx="12" cy="20" r="2" fill="#d9d5e7"/>216      </svg>217      <div class="battery"><div class="level"></div></div>218    </div>219  </div>220 221  <!-- Page header content (dimmed) -->222  <div class="page-header">Zoom meeting invitation -<br>ABC</div>223  <div class="save-pill">Save</div>224 225  <!-- Dialog -->226  <div class="dialog">227    <div class="dialog-title">Select Date</div>228    <div class="big-date">229      Jul 25, 2023230      <!-- simple pencil icon -->231      <svg class="edit-pencil" viewBox="0 0 24 24">232        <path d="M3 17l2 4 4-2 10-10-4-4L5 15 3 17z" fill="#cfc3e6"/>233      </svg>234    </div>235 236    <div class="month-row">237      July 2023238      <span style="font-size:38px;opacity:0.8;">▼</span>239      <div class="chevrons"><span>‹</span><span>›</span></div>240    </div>241 242    <div class="weekdays">243      <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>244    </div>245 246    <div class="calendar">247      <!-- Row 1 (blanks then 1 on Saturday) -->248      <div class="day muted"></div>249      <div class="day muted"></div>250      <div class="day muted"></div>251      <div class="day muted"></div>252      <div class="day muted"></div>253      <div class="day muted"></div>254      <div class="day"><span class="pill">1</span></div>255 256      <!-- Row 2: 2..8 -->257      <div class="day"><span class="pill">2</span></div>258      <div class="day"><span class="pill">3</span></div>259      <div class="day"><span class="pill">4</span></div>260      <div class="day"><span class="pill">5</span></div>261      <div class="day"><span class="pill">6</span></div>262      <div class="day"><span class="pill">7</span></div>263      <div class="day"><span class="pill">8</span></div>264 265      <!-- Row 3: 9..15 -->266      <div class="day"><span class="pill">9</span></div>267      <div class="day"><span class="pill">10</span></div>268      <div class="day"><span class="pill">11</span></div>269      <div class="day"><span class="pill">12</span></div>270      <div class="day"><span class="pill">13</span></div>271      <div class="day"><span class="pill">14</span></div>272      <div class="day"><span class="pill">15</span></div>273 274      <!-- Row 4: 16..22 -->275      <div class="day"><span class="pill">16</span></div>276      <div class="day"><span class="pill">17</span></div>277      <div class="day"><span class="pill">18</span></div>278      <div class="day"><span class="pill">19</span></div>279      <div class="day"><span class="pill">20</span></div>280      <div class="day"><span class="pill">21</span></div>281      <div class="day"><span class="pill">22</span></div>282 283      <!-- Row 5: 23..29 (24 ring, 25 selected) -->284      <div class="day"><span class="pill">23</span></div>285      <div class="day ring"><span class="pill">24</span></div>286      <div class="day selected"><span class="pill">25</span></div>287      <div class="day"><span class="pill">26</span></div>288      <div class="day"><span class="pill">27</span></div>289      <div class="day"><span class="pill">28</span></div>290      <div class="day"><span class="pill">29</span></div>291 292      <!-- Row 6: 30..31 -->293      <div class="day"><span class="pill">30</span></div>294      <div class="day"><span class="pill">31</span></div>295      <div class="day muted"></div>296      <div class="day muted"></div>297      <div class="day muted"></div>298      <div class="day muted"></div>299      <div class="day muted"></div>300    </div>301 302    <div class="dialog-actions">303      <div>Cancel</div>304      <div>OK</div>305    </div>306  </div>307 308  <!-- Faint background content near bottom -->309  <div class="background-lines">310    .us/j/83912965774?pwd=<br>311    KK3Kn03sI2dDEcms1GNVUV8ahbl8w4.1<br>312    Add notification313  </div>314</div>315</body>316</html>