GD-ML/AndroidCode
13.4k
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>Select Dates UI</title>7<style>8 :root{9 --navy:#0f2a4d;10 --text:#0f2a4d;11 --muted:#9AA7B8;12 --line:#E7ECF3;13 --blue:#3D63FF;14 --blue-100:#E9F0FF;15 --bg:#FFFFFF;16 --orange:#ff7f2a;17 }18 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }19 #render-target{20 width:1080px; height:2400px;21 position:relative; overflow:hidden;22 background:#fff; color:var(--text);23 }24 25 /* Top OS status tint (for realism only) */26 .os-bar{27 height:130px; background:#c9ced7;28 width:100%;29 }30 31 /* Header */32 .header{33 background:#fff;34 padding:40px 48px 28px 48px;35 border-bottom:1px solid transparent;36 }37 .header-row{38 display:flex; align-items:center; gap:28px;39 }40 .header-title{41 font-size:56px; font-weight:700; letter-spacing:0.2px; color:var(--navy);42 }43 .icon-btn{44 width:72px; height:72px; display:flex; align-items:center; justify-content:center; cursor:default;45 }46 .icon-btn svg{ width:40px; height:40px; stroke:var(--navy); stroke-width:8; }47 48 /* Weekday row */49 .weekday-row{50 display:grid; grid-template-columns:repeat(7,1fr);51 padding:0 48px; margin-top:8px;52 }53 .weekday{54 text-align:center; font-size:32px; color:#71829a; padding:20px 0;55 }56 .weekday.sun,.weekday.sat{ color:#4d6bff; }57 58 /* Month section */59 .month{60 padding:36px 48px 8px 48px;61 }62 .month-title{63 text-align:center; font-size:48px; font-weight:800; color:var(--navy); margin:12px 0 28px 0;64 }65 .calendar-grid{66 display:grid; grid-template-columns:repeat(7, 1fr);67 gap:18px 18px;68 }69 .day{70 height:118px; border-radius:22px;71 display:flex; align-items:center; justify-content:center;72 font-size:40px; font-weight:600; color:#2a3b55;73 position:relative;74 }75 .day.muted{ color:#C2CAD6; font-weight:600; }76 .day.sun,.day.sat{ color:#4d6bff; }77 .day.today{ color:#0d2747; font-weight:800; }78 .range{ background:var(--blue-100); color:#14325a; }79 .start, .end{80 background:var(--blue); color:#fff; 81 }82 .start{ border-top-right-radius:20px; border-bottom-right-radius:20px; }83 .end{ border-top-left-radius:20px; border-bottom-left-radius:20px; }84 .dot{85 width:12px; height:12px; background:var(--orange); border-radius:50%;86 position:absolute; left:50%; transform:translateX(-50%);87 bottom:18px;88 }89 .note-row{90 display:flex; align-items:center; gap:18px; padding:26px 48px 0 48px;91 color:var(--navy); font-size:36px; font-weight:600;92 }93 .note-dot{ width:16px; height:16px; background:var(--orange); border-radius:50%; }94 .divider{ height:2px; background:var(--line); margin:28px 0; }95 96 /* Bottom summary */97 .summary{98 position:absolute; left:0; right:0; bottom:170px;99 border-top:2px solid var(--line);100 background:#fff;101 padding:26px 28px 28px;102 }103 .summary-inner{104 display:flex; justify-content:space-between; align-items:flex-end;105 padding:20px;106 }107 .summary-col small{108 display:block; color:#8fa0b3; font-size:30px; margin-bottom:8px;109 }110 .summary-col b{111 font-size:52px; color:var(--navy);112 }113 .btn{114 margin:16px 20px 0 20px;115 height:120px; border-radius:20px; background:var(--blue); color:#fff;116 display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:700;117 }118 119 /* Bottom handle (gesture bar) */120 .gesture-bar{121 position:absolute; left:50%; transform:translateX(-50%);122 bottom:48px; width:240px; height:12px; border-radius:8px; background:#111;123 opacity:0.8;124 }125</style>126</head>127<body>128<div id="render-target">129 130 <div class="os-bar"></div>131 132 <div class="header">133 <div class="header-row">134 <div class="icon-btn" aria-label="Close">135 <svg viewBox="0 0 24 24" fill="none">136 <path d="M4 4 L20 20 M20 4 L4 20" />137 </svg>138 </div>139 <div class="header-title">Select Dates</div>140 </div>141 </div>142 143 <div class="weekday-row">144 <div class="weekday sun">Sun</div>145 <div class="weekday">Mon</div>146 <div class="weekday">Tue</div>147 <div class="weekday">Wed</div>148 <div class="weekday">Thu</div>149 <div class="weekday">Fri</div>150 <div class="weekday sat">Sat</div>151 </div>152 153 <!-- October -->154 <div class="month">155 <div class="month-title">Oct 2023</div>156 <div class="calendar-grid">157 <!-- Row 1 -->158 <div class="day muted sun">1</div>159 <div class="day muted">2</div>160 <div class="day muted">3</div>161 <div class="day muted">4</div>162 <div class="day muted">5</div>163 <div class="day muted">6</div>164 <div class="day muted sat">7</div>165 <!-- Row 2 -->166 <div class="day">8</div>167 <div class="day"><span>9</span><span class="dot"></span></div>168 <div class="day">10</div>169 <div class="day">11</div>170 <div class="day">12</div>171 <div class="day">13</div>172 <div class="day sat">14</div>173 <!-- Row 3 -->174 <div class="day">15</div>175 <div class="day">16</div>176 <div class="day">17</div>177 <div class="day today">18</div>178 <div class="day">19</div>179 <div class="day">20</div>180 <div class="day sat">21</div>181 <!-- Row 4 -->182 <div class="day sun">22</div>183 <div class="day">23</div>184 <div class="day">24</div>185 <div class="day start">25</div>186 <div class="day range">26</div>187 <div class="day range">27</div>188 <div class="day range sat">28</div>189 <!-- Row 5 -->190 <div class="day end" style="grid-column:1 / span 1;">29</div>191 <div class="day">30</div>192 <div class="day">31</div>193 <div class="day muted"></div>194 <div class="day muted"></div>195 <div class="day muted"></div>196 <div class="day muted"></div>197 </div>198 199 <div class="note-row">200 <span class="note-dot"></span>201 <span>Oct 9 Columbus Day</span>202 </div>203 204 <div class="divider"></div>205 206 <!-- November -->207 <div class="month-title" style="margin-top:8px;">Nov 2023</div>208 <div class="calendar-grid">209 <!-- First row: Sun/Mon/Tue empty -->210 <div class="day muted"></div>211 <div class="day muted"></div>212 <div class="day muted"></div>213 <div class="day">1</div>214 <div class="day">2</div>215 <div class="day">3</div>216 <div class="day sat">4</div>217 <!-- Row 2 -->218 <div class="day sun">5</div>219 <div class="day">6</div>220 <div class="day">7</div>221 <div class="day">8</div>222 <div class="day">9</div>223 <div class="day"><span>10</span><span class="dot"></span></div>224 <div class="day sat"><span>11</span><span class="dot"></span></div>225 <!-- Row 3 -->226 <div class="day sun">12</div>227 <div class="day">13</div>228 <div class="day">14</div>229 <div class="day">15</div>230 <div class="day">16</div>231 <div class="day">17</div>232 <div class="day sat">18</div>233 <!-- Row 4 -->234 <div class="day sun">19</div>235 <div class="day">20</div>236 <div class="day">21</div>237 <div class="day">22</div>238 <div class="day"><span>23</span><span class="dot"></span></div>239 <div class="day">24</div>240 <div class="day sat">25</div>241 <!-- Row 5 -->242 <div class="day sun">26</div>243 <div class="day">27</div>244 <div class="day">28</div>245 <div class="day">29</div>246 <div class="day">30</div>247 <div class="day muted"></div>248 <div class="day muted"></div>249 </div>250 </div>251 252 <div class="summary">253 <div class="summary-inner">254 <div class="summary-col">255 <small>Local time</small>256 <b>Wed, Oct 25</b>257 </div>258 <div class="summary-col" style="text-align:right;">259 <small>Local time</small>260 <b>Sun, Oct 29</b>261 </div>262 </div>263 <div class="btn">Done</div>264 </div>265 266 <div class="gesture-bar"></div>267</div>268</body>269</html>