GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Calendar UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; color: #112B46;13 }14 15 .status-bar {16 height: 160px;17 background: #cfd5dd;18 }19 20 .header {21 height: 140px;22 display: flex;23 align-items: center;24 padding: 0 48px;25 border-bottom: 1px solid #e9edf2;26 box-sizing: border-box;27 }28 .icon-btn {29 width: 80px; height: 80px; border: none; background: transparent; padding: 0; margin-right: 20px; cursor: default;30 }31 .icon-btn svg { width: 48px; height: 48px; }32 .title {33 font-size: 56px; font-weight: 700; letter-spacing: 0.2px;34 }35 36 .weekday-row {37 display: grid; grid-template-columns: repeat(7, 1fr);38 padding: 24px 60px 16px 60px;39 font-size: 32px; font-weight: 600;40 color: #66788A;41 }42 .weekday-row span:first-child,43 .weekday-row span:last-child { color: #3B6CF9; }44 45 .month-title {46 text-align: center;47 font-size: 48px; font-weight: 800;48 margin: 22px 0 12px 0;49 }50 51 .calendar-grid {52 display: grid; grid-template-columns: repeat(7, 1fr);53 padding: 0 60px 8px 60px;54 box-sizing: border-box;55 row-gap: 34px;56 }57 .day {58 height: 118px;59 position: relative;60 display: flex; align-items: center; justify-content: center;61 font-size: 40px; font-weight: 700;62 }63 .day.muted { color: #c9d2dc; font-weight: 700; }64 .day.sun { color: #3B6CF9; }65 .day.empty { color: transparent; }66 .day .event-dot {67 position: absolute; top: 18px; left: 18px;68 width: 14px; height: 14px; border-radius: 50%;69 background: #ff8f2c;70 }71 .day .num { z-index: 1; }72 73 .day.selected .num {74 background: #376BFF; color: #ffffff;75 padding: 22px 28px; border-radius: 20px;76 min-width: 90px; text-align: center; display: inline-block;77 }78 .day.selected .tooltip {79 position: absolute; top: -135px; left: 50%; transform: translateX(-50%);80 background: #425669; color: #ffffff;81 padding: 22px 28px; border-radius: 18px;82 font-size: 36px; font-weight: 800;83 box-shadow: 0 6px 16px rgba(0,0,0,0.18);84 text-align: center;85 }86 .day.selected .tooltip small {87 display: block; font-size: 28px; font-weight: 600; opacity: 0.9; margin-top: 6px;88 }89 .day.selected .tooltip:after {90 content: "";91 position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);92 width: 0; height: 0;93 border-left: 16px solid transparent;94 border-right: 16px solid transparent;95 border-top: 16px solid #425669;96 }97 98 .holiday-note {99 display: flex; align-items: center;100 padding: 26px 60px;101 font-size: 36px; font-weight: 600; color: #233a52;102 }103 .holiday-note .dot {104 width: 16px; height: 16px; border-radius: 50%; background: #ff8f2c; margin-right: 18px;105 }106 .divider { height: 2px; background: #e9edf2; margin: 8px 60px 10px 60px; }107 108 /* Bottom sheet */109 .bottom-sheet {110 position: absolute; left: 0; right: 0; bottom: 84px;111 background: #ffffff;112 border-top: 1px solid #e9edf2;113 padding: 24px 40px 34px 40px;114 box-sizing: border-box;115 }116 .info-row {117 display: flex; justify-content: space-between; align-items: flex-end;118 padding: 0 20px 18px 20px;119 }120 .label { font-size: 30px; color: #95A3AF; font-weight: 700; }121 .value-left { font-size: 52px; font-weight: 800; color: #102d46; margin-top: 8px; }122 .value-right { font-size: 46px; font-weight: 800; color: #356BFF; margin-top: 8px; }123 124 .cta {125 margin: 12px 20px 0 20px;126 background: #E5E8ED; color: #aab3bd;127 border-radius: 22px;128 height: 120px; display: flex; align-items: center; justify-content: center;129 font-size: 44px; font-weight: 800;130 }131 132 .gesture-bar {133 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);134 width: 240px; height: 16px; border-radius: 12px; background: #000;135 opacity: 0.7;136 }137</style>138</head>139<body>140<div id="render-target">141 <div class="status-bar"></div>142 143 <div class="header">144 <button class="icon-btn" aria-label="Close">145 <svg viewBox="0 0 24 24" fill="none" stroke="#112B46" stroke-width="2" stroke-linecap="round">146 <path d="M5 5 L19 19"></path>147 <path d="M19 5 L5 19"></path>148 </svg>149 </button>150 <div class="title">Select Dates</div>151 </div>152 153 <div class="weekday-row">154 <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>155 </div>156 157 <div class="month-title">Oct 2023</div>158 159 <div class="calendar-grid" id="oct-grid">160 <div class="day sun muted"><span class="num">1</span></div>161 <div class="day muted"><span class="num">2</span></div>162 <div class="day muted"><span class="num">3</span></div>163 <div class="day muted"><span class="num">4</span></div>164 <div class="day muted"><span class="num">5</span></div>165 <div class="day muted"><span class="num">6</span></div>166 <div class="day sun"><span class="num">7</span></div>167 168 <div class="day muted sun"><span class="num">8</span></div>169 <div class="day"><span class="event-dot"></span><span class="num">9</span></div>170 <div class="day muted"><span class="num">10</span></div>171 <div class="day muted"><span class="num">11</span></div>172 <div class="day muted"><span class="num">12</span></div>173 <div class="day muted"><span class="num">13</span></div>174 <div class="day sun"><span class="num">14</span></div>175 176 <div class="day"><span class="num">15</span></div>177 <div class="day"><span class="num">16</span></div>178 <div class="day"><span class="num">17</span></div>179 <div class="day"><span class="num">18</span></div>180 <div class="day"><span class="num">19</span></div>181 <div class="day"><span class="num">20</span></div>182 <div class="day sun"><span class="num">21</span></div>183 184 <div class="day"><span class="num">22</span></div>185 <div class="day"><span class="num">23</span></div>186 <div class="day"><span class="num">24</span></div>187 <div class="day selected">188 <div class="tooltip">Oct 25<small>Select return date</small></div>189 <span class="num">25</span>190 </div>191 <div class="day"><span class="num">26</span></div>192 <div class="day"><span class="num">27</span></div>193 <div class="day sun"><span class="num">28</span></div>194 195 <div class="day"><span class="num">29</span></div>196 <div class="day"><span class="num">30</span></div>197 <div class="day"><span class="num">31</span></div>198 <div class="day empty"></div>199 <div class="day empty"></div>200 <div class="day empty"></div>201 <div class="day empty"></div>202 </div>203 204 <div class="holiday-note"><span class="dot"></span>Oct 9 Columbus Day</div>205 206 <div class="divider"></div>207 208 <div class="month-title">Nov 2023</div>209 210 <div class="calendar-grid" id="nov-grid">211 <div class="day empty"></div>212 <div class="day empty"></div>213 <div class="day empty"></div>214 <div class="day"><span class="num">1</span></div>215 <div class="day"><span class="num">2</span></div>216 <div class="day"><span class="num">3</span></div>217 <div class="day sun"><span class="num">4</span></div>218 219 <div class="day sun"><span class="num">5</span></div>220 <div class="day"><span class="num">6</span></div>221 <div class="day"><span class="num">7</span></div>222 <div class="day"><span class="num">8</span></div>223 <div class="day"><span class="num">9</span></div>224 <div class="day"><span class="event-dot"></span><span class="num">10</span></div>225 <div class="day sun"><span class="event-dot"></span><span class="num">11</span></div>226 227 <div class="day sun"><span class="num">12</span></div>228 <div class="day"><span class="num">13</span></div>229 <div class="day"><span class="num">14</span></div>230 <div class="day"><span class="num">15</span></div>231 <div class="day"><span class="num">16</span></div>232 <div class="day"><span class="num">17</span></div>233 <div class="day sun"><span class="num">18</span></div>234 235 <div class="day sun"><span class="num">19</span></div>236 <div class="day"><span class="num">20</span></div>237 <div class="day"><span class="num">21</span></div>238 <div class="day"><span class="event-dot"></span><span class="num">22</span></div>239 <div class="day"><span class="num">23</span><span class="event-dot"></span></div>240 <div class="day"><span class="num">24</span></div>241 <div class="day sun"><span class="num">25</span></div>242 243 <div class="day sun"><span class="num">26</span></div>244 <div class="day"><span class="num">27</span></div>245 <div class="day"><span class="num">28</span></div>246 <div class="day"><span class="num">29</span></div>247 <div class="day"><span class="num">30</span></div>248 <div class="day empty"></div>249 <div class="day empty"></div>250 </div>251 252 <div class="bottom-sheet">253 <div class="info-row">254 <div>255 <div class="label">Local time</div>256 <div class="value-left">Wed, Oct 25</div>257 </div>258 <div style="text-align:right;">259 <div class="label">Local time</div>260 <div class="value-right">Return</div>261 </div>262 </div>263 <div class="cta">Done</div>264 </div>265 266 <div class="gesture-bar"></div>267</div>268</body>269</html>