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 Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;16 color: #3D3D3D;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0; right: 0;23 height: 120px;24 background: #000000;25 color: #FFFFFF;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 40px;30 box-sizing: border-box;31 font-size: 42px;32 letter-spacing: 0.5px;33 }34 .sb-left { display: flex; align-items: center; gap: 20px; }35 .sb-right { display: flex; align-items: center; gap: 24px; }36 .icon {37 width: 48px; height: 48px;38 display: inline-flex; align-items: center; justify-content: center;39 }40 .icon svg { width: 100%; height: 100%; }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 120px; left: 0; right: 0;46 height: 120px;47 display: flex;48 align-items: center;49 padding: 0 36px;50 box-sizing: border-box;51 background: #FFFFFF;52 }53 .back-btn {54 width: 88px; height: 88px;55 border-radius: 44px;56 display: inline-flex;57 align-items: center; justify-content: center;58 }59 .title {60 font-size: 48px;61 font-weight: 700;62 margin-left: 16px;63 color: #303033;64 }65 66 .content {67 position: absolute;68 left: 0; right: 0;69 top: 240px;70 bottom: 310px; /* leave space for footer and gesture area */71 padding: 10px 56px 0 56px;72 box-sizing: border-box;73 overflow: hidden;74 }75 76 /* Weekdays header */77 .weekdays {78 margin-top: 24px;79 display: grid;80 grid-template-columns: repeat(7, 1fr);81 text-align: center;82 color: #C9CDD3;83 font-weight: 700;84 font-size: 28px;85 letter-spacing: 8px;86 }87 88 /* Month section */89 .month {90 margin-top: 48px;91 }92 .month h3 {93 margin: 24px 0 24px 0;94 color: #8D949B;95 letter-spacing: 2px;96 font-size: 34px;97 font-weight: 800;98 }99 100 .grid {101 display: grid;102 grid-template-columns: repeat(7, 1fr);103 gap: 34px 34px; /* row gap, column gap */104 }105 106 .day {107 height: 120px;108 display: flex;109 align-items: center;110 justify-content: center;111 flex-direction: column;112 }113 114 .num {115 width: 96px;116 height: 96px;117 border-radius: 50%;118 display: flex;119 align-items: center;120 justify-content: center;121 font-size: 42px;122 font-weight: 700;123 color: #4C4F55;124 }125 126 .day.out .num {127 color: #D7DCE2;128 }129 130 .day.ring .num {131 color: #A9B1B9;132 border: 4px solid #DEE3EA;133 }134 135 .day.selected .num {136 background: #FF5C5F;137 color: #FFFFFF;138 }139 140 .dot {141 width: 14px; height: 14px;142 background: #17C8D8;143 border-radius: 50%;144 margin-top: 10px;145 }146 147 .spacer-xxl { height: 20px; }148 149 /* Footer with button */150 .footer {151 position: absolute;152 left: 0; right: 0; bottom: 90px;153 height: 220px;154 background: #FFFFFF;155 border-top: 1px solid #E7EBEF;156 display: flex;157 align-items: center;158 justify-content: center;159 padding: 0 56px;160 box-sizing: border-box;161 }162 .cta {163 width: 100%;164 height: 140px;165 background: #FF5C5F;166 color: #FFFFFF;167 border-radius: 28px;168 display: flex;169 align-items: center;170 justify-content: center;171 text-transform: uppercase;172 letter-spacing: 3px;173 font-weight: 800;174 font-size: 36px;175 box-shadow: 0 6px 12px rgba(255, 92, 95, 0.35);176 }177 178 /* Gesture area */179 .gesture {180 position: absolute;181 left: 0; right: 0; bottom: 0;182 height: 90px;183 background: #000000;184 display: flex;185 align-items: center;186 justify-content: center;187 }188 .home-indicator {189 width: 260px;190 height: 10px;191 border-radius: 6px;192 background: #D9D9D9;193 opacity: 0.9;194 }195</style>196</head>197<body>198<div id="render-target">199 <!-- Status Bar -->200 <div class="status-bar">201 <div class="sb-left">202 <div>12:41</div>203 <div class="icon" aria-label="warning">204 <svg viewBox="0 0 24 24" fill="#FFFFFF">205 <path d="M1 20h22L12 2 1 20zm12-3h-2v2h2v-2zm0-6h-2v5h2v-5z"/>206 </svg>207 </div>208 </div>209 <div class="sb-right">210 <div class="icon" aria-label="wifi">211 <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">212 <path d="M2 8c5-5 15-5 20 0"/>213 <path d="M5 11c3.5-3.5 10.5-3.5 14 0"/>214 <path d="M8 14c2-2 6-2 8 0"/>215 <circle cx="12" cy="18" r="1.8" fill="#FFFFFF" stroke="none"/>216 </svg>217 </div>218 <div class="icon" aria-label="battery">219 <svg viewBox="0 0 28 16" fill="none" stroke="#FFFFFF" stroke-width="2">220 <rect x="1" y="3" width="22" height="10" rx="2"></rect>221 <rect x="3" y="5" width="16" height="6" rx="1" fill="#FFFFFF" stroke="none"></rect>222 <rect x="24" y="6" width="3" height="4" rx="1" fill="#FFFFFF" stroke="none"></rect>223 </svg>224 </div>225 <div>100%</div>226 </div>227 </div>228 229 <!-- App Bar -->230 <div class="app-bar">231 <div class="back-btn" aria-label="Back">232 <svg viewBox="0 0 24 24" width="44" height="44" fill="#4B4F55">233 <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>234 </svg>235 </div>236 <div class="title">Sat, Nov 4</div>237 </div>238 239 <!-- Content -->240 <div class="content">241 <div class="weekdays">242 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>243 </div>244 245 <!-- November -->246 <div class="month">247 <h3>NOVEMBER 2023</h3>248 <div class="grid">249 <!-- Row 1 -->250 <div class="day blank"></div>251 <div class="day blank"></div>252 <div class="day blank"></div>253 <div class="day out"><div class="num">1</div></div>254 <div class="day out"><div class="num">2</div></div>255 <div class="day ring"><div class="num">3</div></div>256 <div class="day"><div class="num">4</div></div>257 <!-- Row 2 -->258 <div class="day selected"><div class="num">5</div></div>259 <div class="day"><div class="num">6</div></div>260 <div class="day"><div class="num">7</div><div class="dot"></div></div>261 <div class="day"><div class="num">8</div></div>262 <div class="day"><div class="num">9</div></div>263 <div class="day"><div class="num">10</div></div>264 <div class="day"><div class="num">11</div></div>265 <!-- Row 3 -->266 <div class="day"><div class="num">12</div></div>267 <div class="day"><div class="num">13</div><div class="dot"></div></div>268 <div class="day"><div class="num">14</div><div class="dot"></div></div>269 <div class="day"><div class="num">15</div><div class="dot"></div></div>270 <div class="day"><div class="num">16</div></div>271 <div class="day"><div class="num">17</div></div>272 <div class="day"><div class="num">18</div></div>273 <!-- Row 4 -->274 <div class="day"><div class="num">19</div></div>275 <div class="day"><div class="num">20</div></div>276 <div class="day"><div class="num">21</div></div>277 <div class="day"><div class="num">22</div></div>278 <div class="day"><div class="num">23</div></div>279 <div class="day"><div class="num">24</div></div>280 <div class="day"><div class="num">25</div></div>281 <!-- Row 5 -->282 <div class="day"><div class="num">26</div></div>283 <div class="day"><div class="num">27</div></div>284 <div class="day"><div class="num">28</div></div>285 <div class="day"><div class="num">29</div></div>286 <div class="day"><div class="num">30</div></div>287 <div class="day blank"></div>288 <div class="day blank"></div>289 </div>290 </div>291 292 <!-- December -->293 <div class="month" style="margin-top: 72px;">294 <h3>DECEMBER 2023</h3>295 <div class="grid">296 <!-- Row 1 -->297 <div class="day blank"></div>298 <div class="day blank"></div>299 <div class="day blank"></div>300 <div class="day blank"></div>301 <div class="day blank"></div>302 <div class="day"><div class="num">1</div></div>303 <div class="day"><div class="num">2</div></div>304 <!-- Row 2 -->305 <div class="day"><div class="num">3</div></div>306 <div class="day"><div class="num">4</div></div>307 <div class="day"><div class="num">5</div></div>308 <div class="day"><div class="num">6</div></div>309 <div class="day"><div class="num">7</div></div>310 <div class="day"><div class="num">8</div></div>311 <div class="day"><div class="num">9</div></div>312 <!-- Row 3 -->313 <div class="day"><div class="num">10</div></div>314 <div class="day"><div class="num">11</div></div>315 <div class="day"><div class="num">12</div></div>316 <div class="day"><div class="num">13</div></div>317 <div class="day"><div class="num">14</div></div>318 <div class="day"><div class="num">15</div></div>319 <div class="day"><div class="num">16</div></div>320 <!-- Row 4 -->321 <div class="day"><div class="num">17</div></div>322 <div class="day"><div class="num">18</div></div>323 <div class="day"><div class="num">19</div></div>324 <div class="day"><div class="num">20</div></div>325 <div class="day"><div class="num">21</div></div>326 <div class="day"><div class="num">22</div></div>327 <div class="day"><div class="num">23</div></div>328 <!-- Row 5 -->329 <div class="day"><div class="num">24</div></div>330 <div class="day"><div class="num">25</div></div>331 <div class="day"><div class="num">26</div></div>332 <div class="day"><div class="num">27</div></div>333 <div class="day"><div class="num">28</div></div>334 <div class="day"><div class="num">29</div></div>335 <div class="day"><div class="num">30</div></div>336 </div>337 </div>338 <div class="spacer-xxl"></div>339 </div>340 341 <!-- Footer with CTA -->342 <div class="footer">343 <div class="cta">SELECT THIS DATE</div>344 </div>345 346 <!-- Gesture area -->347 <div class="gesture">348 <div class="home-indicator"></div>349 </div>350</div>351</body>352</html>