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>Calendar Picker</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; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;13    color: #212121; box-sizing: border-box;14  }15 16  .topbar {17    height: 160px;18    padding: 40px 40px 0 40px;19    position: relative;20  }21  .cancel-btn {22    position: absolute; right: 40px; top: 60px;23    font-size: 44px; color: #1A73E8; text-decoration: none;24  }25 26  .content { padding: 0 48px; }27  .title {28    margin: 10px 0 40px;29    font-size: 72px; font-weight: 700; color: #212121;30  }31 32  .weekdays {33    display: grid; grid-template-columns: repeat(7, 1fr);34    margin-bottom: 16px; color: #757575; font-size: 34px;35  }36  .weekdays span { text-align: center; padding: 20px 0; }37 38  .month-title {39    font-size: 46px; font-weight: 700; color: #2E2E2E;40    margin: 28px 0 10px;41  }42 43  .days-grid {44    display: grid; grid-template-columns: repeat(7, 1fr);45    grid-auto-rows: 128px; text-align: center;46  }47  .day {48    display: flex; align-items: center; justify-content: center;49    font-size: 42px; color: #212121;50  }51  .day.empty { color: transparent; }52  .day.disabled { color: #BDBDBD; }53  .day.accent { color: #1A73E8; font-weight: 600; }54  .day.selected { color: #FFFFFF; }55  .pill {56    background: #0B66FF; color: #FFFFFF;57    padding: 24px 46px; border-radius: 28px; display: inline-block;58    min-width: 140px;59  }60 61  .footer {62    position: absolute; left: 0; right: 0; bottom: 180px;63    padding: 22px 40px 0;64    background: #FAFAFA; border-top: 1px solid #E0E0E0;65  }66  .input-row {67    display: flex; gap: 28px; padding: 18px 0 22px;68  }69  .date-input {70    flex: 1; height: 120px; border: 2px solid #BDBDBD;71    border-radius: 14px; display: flex; align-items: center; padding: 0 26px;72    font-size: 38px; color: #333; background: #FFFFFF; box-sizing: border-box;73  }74  .date-input.active {75    border-color: #1A73E8; box-shadow: 0 0 0 3px rgba(26,115,232,0.2);76  }77  .cal-icon { margin-right: 22px; }78  .done-btn {79    height: 120px; border-radius: 16px; background: #E0E0E0;80    color: #9E9E9E; font-size: 42px; font-weight: 600;81    display: flex; align-items: center; justify-content: center;82    margin: 10px 0 26px;83  }84 85  .gesture {86    position: absolute; bottom: 42px; left: 50%;87    transform: translateX(-50%);88    width: 220px; height: 12px; border-radius: 6px;89    background: #000; opacity: 0.18;90  }91</style>92</head>93<body>94<div id="render-target">95  <div class="topbar">96    <a class="cancel-btn" href="#">Cancel</a>97  </div>98 99  <div class="content">100    <div class="title">When?</div>101 102    <div class="weekdays">103      <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>104    </div>105 106    <div class="month-title">September 2023</div>107    <div class="days-grid">108      <!-- Week 1 -->109      <div class="day empty"></div>110      <div class="day empty"></div>111      <div class="day empty"></div>112      <div class="day empty"></div>113      <div class="day empty"></div>114      <div class="day disabled">1</div>115      <div class="day disabled">2</div>116      <!-- Week 2 -->117      <div class="day disabled">3</div>118      <div class="day disabled">4</div>119      <div class="day disabled">5</div>120      <div class="day accent">6</div>121      <div class="day">7</div>122      <div class="day">8</div>123      <div class="day">9</div>124      <!-- Week 3 -->125      <div class="day">10</div>126      <div class="day">11</div>127      <div class="day">12</div>128      <div class="day">13</div>129      <div class="day">14</div>130      <div class="day">15</div>131      <div class="day">16</div>132      <!-- Week 4 -->133      <div class="day">17</div>134      <div class="day">18</div>135      <div class="day selected"><span class="pill">19</span></div>136      <div class="day">20</div>137      <div class="day">21</div>138      <div class="day">22</div>139      <div class="day">23</div>140      <!-- Week 5 -->141      <div class="day">24</div>142      <div class="day">25</div>143      <div class="day">26</div>144      <div class="day">27</div>145      <div class="day">28</div>146      <div class="day">29</div>147      <div class="day">30</div>148    </div>149 150    <div class="month-title" style="margin-top: 56px;">October 2023</div>151    <div class="days-grid">152      <!-- Week 1 -->153      <div class="day">1</div>154      <div class="day">2</div>155      <div class="day">3</div>156      <div class="day">4</div>157      <div class="day">5</div>158      <div class="day">6</div>159      <div class="day">7</div>160      <!-- Week 2 -->161      <div class="day">8</div>162      <div class="day">9</div>163      <div class="day">10</div>164      <div class="day">11</div>165      <div class="day">12</div>166      <div class="day">13</div>167      <div class="day">14</div>168      <!-- Week 3 -->169      <div class="day">15</div>170      <div class="day">16</div>171      <div class="day">17</div>172      <div class="day">18</div>173      <div class="day">19</div>174      <div class="day">20</div>175      <div class="day">21</div>176      <!-- Week 4 -->177      <div class="day">22</div>178      <div class="day">23</div>179      <div class="day">24</div>180      <div class="day">25</div>181      <div class="day">26</div>182      <div class="day">27</div>183      <div class="day">28</div>184      <!-- Week 5 -->185      <div class="day">29</div>186      <div class="day">30</div>187      <div class="day">31</div>188      <div class="day empty"></div>189      <div class="day empty"></div>190      <div class="day empty"></div>191      <div class="day empty"></div>192    </div>193  </div>194 195  <div class="footer">196    <div class="input-row">197      <div class="date-input">198        <div class="cal-icon">199          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2" stroke-linecap="round">200            <rect x="3" y="5" width="18" height="16" rx="2"></rect>201            <line x1="8" y1="3" x2="8" y2="7"></line>202            <line x1="16" y1="3" x2="16" y2="7"></line>203            <line x1="3" y1="10" x2="21" y2="10"></line>204          </svg>205        </div>206        Tue, Sep 19207      </div>208      <div class="date-input active">209        <div class="cal-icon">210          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#1A73E8" stroke-width="2" stroke-linecap="round">211            <rect x="3" y="5" width="18" height="16" rx="2"></rect>212            <line x1="8" y1="3" x2="8" y2="7"></line>213            <line x1="16" y1="3" x2="16" y2="7"></line>214            <line x1="3" y1="10" x2="21" y2="10"></line>215          </svg>216        </div>217        Return218      </div>219    </div>220 221    <div class="done-btn">Done</div>222  </div>223 224  <div class="gesture"></div>225</div>226</body>227</html>