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">6<title>Calendar Picker</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #333;25 font-size: 38px;26 }27 .status-left {28 display: flex;29 align-items: center;30 gap: 26px;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 26px;36 }37 .icon {38 display: inline-flex;39 align-items: center;40 justify-content: center;41 }42 43 /* Header */44 .cancel-link {45 position: absolute;46 top: 160px;47 right: 36px;48 color: #1976d2;49 font-size: 44px;50 font-weight: 600;51 }52 .title {53 margin-top: 220px;54 padding: 0 48px;55 font-size: 72px;56 font-weight: 800;57 color: #222;58 }59 60 /* Weekday row */61 .weekday-row {62 margin-top: 36px;63 padding: 0 48px;64 display: grid;65 grid-template-columns: repeat(7, 1fr);66 color: #666;67 font-size: 36px;68 text-align: center;69 }70 71 /* Month sections */72 .month {73 margin-top: 44px;74 padding: 0 48px;75 }76 .month-title {77 font-size: 48px;78 font-weight: 800;79 color: #333;80 margin-bottom: 24px;81 }82 .days-grid {83 display: grid;84 grid-template-columns: repeat(7, 1fr);85 grid-auto-rows: 120px;86 gap: 10px 10px;87 }88 .day {89 display: flex;90 align-items: center;91 justify-content: center;92 font-size: 42px;93 color: #333;94 border-radius: 24px;95 }96 .day.disabled { color: #c7c7c7; }97 .day.range { background: #e9eef7; }98 .day.start { background: #e9eef7; border-top-left-radius: 26px; border-bottom-left-radius: 26px; }99 .day.end {100 background: #0b74f0;101 color: #fff;102 border-top-right-radius: 26px;103 border-bottom-right-radius: 26px;104 }105 106 /* Inputs and action */107 .bottom-area {108 position: absolute;109 left: 0;110 right: 0;111 bottom: 140px;112 padding: 0 36px;113 }114 .inputs {115 display: flex;116 gap: 24px;117 margin-bottom: 24px;118 padding: 0 12px;119 }120 .input {121 flex: 1;122 height: 120px;123 border: 3px solid #cfcfcf;124 border-radius: 18px;125 display: flex;126 align-items: center;127 padding: 0 28px;128 gap: 24px;129 font-size: 40px;130 color: #333;131 background: #fff;132 }133 .input.active { border-color: #1976d2; }134 .button {135 height: 120px;136 background: #0b74f0;137 color: #fff;138 border-radius: 18px;139 font-size: 44px;140 font-weight: 700;141 display: flex;142 align-items: center;143 justify-content: center;144 margin: 0 12px;145 }146 147 /* Gesture bar */148 .gesture {149 position: absolute;150 bottom: 36px;151 left: 50%;152 transform: translateX(-50%);153 width: 280px;154 height: 16px;155 background: #000;156 opacity: 0.12;157 border-radius: 12px;158 }159 160 /* Simple SVG icon colors/sizing */161 .svg-24 { width: 48px; height: 48px; }162 .svg-32 { width: 56px; height: 56px; }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Status bar -->169 <div class="status-bar">170 <div class="status-left">171 <div>3:34</div>172 <div class="icon">173 <!-- small app dot -->174 <svg class="svg-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#888"/></svg>175 </div>176 <div class="icon">177 <!-- temperature -->178 <svg class="svg-24" viewBox="0 0 24 24">179 <rect x="9" y="4" width="6" height="12" rx="3" fill="#888"></rect>180 <circle cx="12" cy="18" r="4" fill="#888"></circle>181 </svg>182 </div>183 <div class="icon">184 <!-- timer -->185 <svg class="svg-24" viewBox="0 0 24 24">186 <circle cx="12" cy="12" r="9" stroke="#888" stroke-width="2" fill="none"></circle>187 <rect x="10.5" y="6" width="3" height="6" fill="#888"></rect>188 </svg>189 </div>190 <div class="icon">191 <!-- dot -->192 <svg class="svg-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#888"/></svg>193 </div>194 </div>195 <div class="status-right">196 <div class="icon">197 <!-- signal -->198 <svg class="svg-24" viewBox="0 0 24 24">199 <rect x="3" y="14" width="3" height="7" fill="#555"/>200 <rect x="8" y="11" width="3" height="10" fill="#777"/>201 <rect x="13" y="8" width="3" height="13" fill="#999"/>202 <rect x="18" y="5" width="3" height="16" fill="#bbb"/>203 </svg>204 </div>205 <div class="icon">206 <!-- battery -->207 <svg class="svg-24" viewBox="0 0 28 24">208 <rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="#333" stroke-width="2"></rect>209 <rect x="4" y="8" width="14" height="8" fill="#555"></rect>210 <rect x="22" y="10" width="3" height="8" rx="1" fill="#333"></rect>211 </svg>212 </div>213 </div>214 </div>215 216 <!-- Cancel and title -->217 <div class="cancel-link">Cancel</div>218 <div class="title">When?</div>219 220 <!-- Weekday names -->221 <div class="weekday-row">222 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>223 </div>224 225 <!-- September -->226 <div class="month" style="margin-top: 52px;">227 <div class="month-title">September 2023</div>228 <div class="days-grid">229 <div class="day"></div>230 <div class="day"></div>231 <div class="day"></div>232 <div class="day"></div>233 <div class="day"></div>234 <div class="day disabled">1</div>235 <div class="day disabled">2</div>236 237 <div class="day disabled">3</div>238 <div class="day disabled">4</div>239 <div class="day disabled">5</div>240 <div class="day" style="color:#0b74f0;">6</div>241 <div class="day">7</div>242 <div class="day">8</div>243 <div class="day">9</div>244 245 <div class="day">10</div>246 <div class="day">11</div>247 <div class="day">12</div>248 <div class="day">13</div>249 <div class="day">14</div>250 <div class="day">15</div>251 <div class="day">16</div>252 253 <div class="day">17</div>254 <div class="day">18</div>255 <div class="day">19</div>256 <div class="day">20</div>257 <div class="day">21</div>258 <div class="day">22</div>259 <div class="day">23</div>260 261 <div class="day">24</div>262 <div class="day">25</div>263 <div class="day">26</div>264 <div class="day">27</div>265 <div class="day">28</div>266 <div class="day">29</div>267 <div class="day end">30</div>268 </div>269 </div>270 271 <!-- October -->272 <div class="month" style="margin-top: 68px;">273 <div class="month-title">October 2023</div>274 <div class="days-grid">275 <div class="day start">1</div>276 <div class="day range">2</div>277 <div class="day range">3</div>278 <div class="day range">4</div>279 <div class="day range">5</div>280 <div class="day range">6</div>281 <div class="day end">7</div>282 283 <div class="day">8</div>284 <div class="day">9</div>285 <div class="day">10</div>286 <div class="day">11</div>287 <div class="day">12</div>288 <div class="day">13</div>289 <div class="day">14</div>290 291 <div class="day">15</div>292 <div class="day">16</div>293 <div class="day">17</div>294 <div class="day">18</div>295 <div class="day">19</div>296 <div class="day">20</div>297 <div class="day">21</div>298 299 <div class="day">22</div>300 <div class="day">23</div>301 <div class="day">24</div>302 <div class="day">25</div>303 <div class="day">26</div>304 <div class="day">27</div>305 <div class="day">28</div>306 307 <div class="day">29</div>308 <div class="day">30</div>309 <div class="day">31</div>310 <div class="day"></div>311 <div class="day"></div>312 <div class="day"></div>313 <div class="day"></div>314 </div>315 </div>316 317 <!-- Bottom inputs and button -->318 <div class="bottom-area">319 <div class="inputs">320 <div class="input active">321 <svg class="svg-32" viewBox="0 0 24 24">322 <rect x="3" y="5" width="18" height="15" rx="2" stroke="#1976d2" stroke-width="2" fill="none"></rect>323 <rect x="6" y="10" width="12" height="2" fill="#1976d2"></rect>324 <rect x="7" y="13" width="3" height="3" fill="#1976d2"></rect>325 <rect x="12" y="13" width="3" height="3" fill="#1976d2"></rect>326 </svg>327 <div>Sat, Sep 30</div>328 </div>329 <div class="input">330 <svg class="svg-32" viewBox="0 0 24 24">331 <rect x="3" y="5" width="18" height="15" rx="2" stroke="#777" stroke-width="2" fill="none"></rect>332 <rect x="6" y="10" width="12" height="2" fill="#777"></rect>333 <rect x="7" y="13" width="3" height="3" fill="#777"></rect>334 <rect x="12" y="13" width="3" height="3" fill="#777"></rect>335 </svg>336 <div>Sat, Oct 07</div>337 </div>338 </div>339 <div class="button">Done</div>340 </div>341 342 <div class="gesture"></div>343</div>344</body>345</html>