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>Calendar UI</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, sans-serif;16 color: #333;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0; right: 0;24 height: 110px;25 background: #000;26 color: #fff;27 padding: 0 40px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 box-sizing: border-box;32 }33 .status-left { font-size: 34px; font-weight: 600; letter-spacing: 0.5px; }34 .status-right { display: flex; align-items: center; gap: 24px; }35 .status-text { font-size: 30px; }36 37 /* Header */38 .app-bar {39 position: absolute;40 top: 110px;41 left: 0; right: 0;42 height: 150px;43 display: flex;44 align-items: center;45 gap: 24px;46 padding: 0 40px;47 box-sizing: border-box;48 background: #fff;49 border-bottom: 1px solid #eee;50 }51 .app-title {52 font-size: 48px;53 font-weight: 700;54 color: #333;55 }56 .back-btn {57 width: 64px; height: 64px;58 display: inline-flex; align-items: center; justify-content: center;59 border-radius: 50%;60 background: transparent;61 }62 63 /* Content area */64 .content {65 position: absolute;66 top: 260px; /* status (110) + app-bar (150) */67 bottom: 210px; /* space for bottom controls */68 left: 0; right: 0;69 overflow: hidden;70 padding: 20px 40px 0 40px;71 box-sizing: border-box;72 }73 74 .weekday-row {75 display: grid;76 grid-template-columns: repeat(7, 1fr);77 padding: 40px 20px 20px 20px;78 color: #c8cfd6;79 font-size: 28px;80 font-weight: 700;81 letter-spacing: 8px;82 text-align: center;83 }84 85 .month-label {86 padding: 30px 20px 10px 20px;87 color: #8d8f94;88 font-size: 28px;89 font-weight: 800;90 letter-spacing: 2px;91 text-transform: uppercase;92 }93 94 .calendar {95 margin: 10px 10px 30px 10px;96 display: grid;97 grid-template-columns: repeat(7, 1fr);98 grid-auto-rows: 140px;99 }100 101 .day {102 position: relative;103 display: flex;104 align-items: center;105 justify-content: center;106 color: #3f4246;107 font-size: 44px;108 font-weight: 600;109 }110 .day .num {111 width: 110px;112 height: 110px;113 border-radius: 50%;114 display: flex; align-items: center; justify-content: center;115 }116 .day.muted { color: #cfd6dc; }117 .day.selected .num {118 background: #ff6661;119 color: #fff;120 font-weight: 800;121 font-size: 50px;122 }123 .dot {124 position: absolute;125 bottom: 24px;126 width: 14px; height: 14px;127 background: #07c1d0;128 border-radius: 50%;129 }130 131 /* Bottom action area */132 .bottom-area {133 position: absolute;134 left: 0; right: 0;135 bottom: 90px; /* leave room for home indicator */136 padding: 20px 40px 0 40px;137 box-sizing: border-box;138 border-top: 1px solid #e7e7e7;139 }140 .primary-btn {141 width: 100%;142 padding: 36px 24px;143 background: #ff6661;144 color: #fff;145 font-size: 36px;146 font-weight: 800;147 text-align: center;148 border-radius: 28px;149 letter-spacing: 2px;150 }151 152 /* Home indicator area (black) */153 .home-indicator-wrap {154 position: absolute;155 bottom: 0;156 left: 0; right: 0;157 height: 90px;158 background: #000;159 display: flex;160 align-items: center;161 justify-content: center;162 }163 .home-indicator {164 width: 220px;165 height: 10px;166 background: #d5d5d5;167 border-radius: 6px;168 opacity: 0.85;169 }170</style>171</head>172<body>173<div id="render-target">174 <!-- Status bar -->175 <div class="status-bar">176 <div class="status-left">12:41</div>177 <div class="status-right">178 <!-- Simple warning icon -->179 <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">180 <path d="M12 2L1 21h22L12 2zm0 6l1 7h-2l1-7zm-1 9h2v2h-2v-2z"/>181 </svg>182 <!-- WiFi icon -->183 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">184 <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-6-4.1l1.4 1.4A6 6 0 0 1 18.6 16l1.4-1.4A8 8 0 0 0 6 14.4zm-3-4l1.4 1.4A12 12 0 0 1 20.6 12l1.4-1.4A14 14 0 0 0 3 10.4z"/>185 </svg>186 <!-- Battery icon with percentage -->187 <div class="status-text">100%</div>188 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">189 <path d="M16 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm5 3h-1v6h1c.6 0 1-.4 1-1V10c0-.6-.4-1-1-1z"/>190 </svg>191 </div>192 </div>193 194 <!-- App bar -->195 <div class="app-bar">196 <div class="back-btn">197 <svg width="44" height="44" viewBox="0 0 24 24" fill="#333" aria-hidden="true">198 <path d="M15.4 3.6L7 12l8.4 8.4L17.8 18 11.8 12l6-6-2.4-2.4z"/>199 </svg>200 </div>201 <div class="app-title">Thu, Nov 2</div>202 </div>203 204 <!-- Content -->205 <div class="content">206 <div class="weekday-row">207 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>208 </div>209 210 <div class="month-label">November 2023</div>211 <div class="calendar" aria-label="November 2023 calendar">212 <!-- Empty cells for Sun, Mon, Tue -->213 <div class="day"></div>214 <div class="day"></div>215 <div class="day"></div>216 <!-- 1, 2 muted (past) -->217 <div class="day muted"><div class="num">1</div></div>218 <div class="day muted"><div class="num">2</div></div>219 <!-- Selected 3 -->220 <div class="day selected"><div class="num">3</div></div>221 <div class="day"><div class="num">4</div></div>222 223 <!-- Row 2 -->224 <div class="day"><div class="num">5</div></div>225 <div class="day"><div class="num">6</div></div>226 <div class="day"><div class="num">7</div><span class="dot"></span></div>227 <div class="day"><div class="num">8</div></div>228 <div class="day"><div class="num">9</div></div>229 <div class="day"><div class="num">10</div></div>230 <div class="day"><div class="num">11</div></div>231 232 <!-- Row 3 -->233 <div class="day"><div class="num">12</div></div>234 <div class="day"><div class="num">13</div><span class="dot"></span></div>235 <div class="day"><div class="num">14</div><span class="dot"></span></div>236 <div class="day"><div class="num">15</div><span class="dot"></span></div>237 <div class="day"><div class="num">16</div></div>238 <div class="day"><div class="num">17</div></div>239 <div class="day"><div class="num">18</div></div>240 241 <!-- Row 4 -->242 <div class="day"><div class="num">19</div></div>243 <div class="day"><div class="num">20</div></div>244 <div class="day"><div class="num">21</div></div>245 <div class="day"><div class="num">22</div></div>246 <div class="day"><div class="num">23</div></div>247 <div class="day"><div class="num">24</div></div>248 <div class="day"><div class="num">25</div></div>249 250 <!-- Row 5 -->251 <div class="day"><div class="num">26</div></div>252 <div class="day"><div class="num">27</div></div>253 <div class="day"><div class="num">28</div></div>254 <div class="day"><div class="num">29</div></div>255 <div class="day"><div class="num">30</div></div>256 <!-- Empty cells to complete grid -->257 <div class="day"></div>258 <div class="day"></div>259 </div>260 261 <div class="month-label">December 2023</div>262 <div class="calendar" aria-label="December 2023 calendar">263 <!-- Empty cells for Sun..Thu -->264 <div class="day"></div>265 <div class="day"></div>266 <div class="day"></div>267 <div class="day"></div>268 <div class="day"></div>269 <!-- Fri, Sat -->270 <div class="day"><div class="num">1</div></div>271 <div class="day"><div class="num">2</div></div>272 273 <!-- Row 2 -->274 <div class="day"><div class="num">3</div></div>275 <div class="day"><div class="num">4</div></div>276 <div class="day"><div class="num">5</div></div>277 <div class="day"><div class="num">6</div></div>278 <div class="day"><div class="num">7</div></div>279 <div class="day"><div class="num">8</div></div>280 <div class="day"><div class="num">9</div></div>281 282 <!-- Row 3 -->283 <div class="day"><div class="num">10</div></div>284 <div class="day"><div class="num">11</div></div>285 <div class="day"><div class="num">12</div></div>286 <div class="day"><div class="num">13</div></div>287 <div class="day"><div class="num">14</div></div>288 <div class="day"><div class="num">15</div></div>289 <div class="day"><div class="num">16</div></div>290 291 <!-- Row 4 -->292 <div class="day"><div class="num">17</div></div>293 <div class="day"><div class="num">18</div></div>294 <div class="day"><div class="num">19</div></div>295 <div class="day"><div class="num">20</div></div>296 <div class="day"><div class="num">21</div></div>297 <div class="day"><div class="num">22</div></div>298 <div class="day"><div class="num">23</div></div>299 300 <!-- Row 5 -->301 <div class="day"><div class="num">24</div></div>302 <div class="day"><div class="num">25</div></div>303 <div class="day"><div class="num">26</div></div>304 <div class="day"><div class="num">27</div></div>305 <div class="day"><div class="num">28</div></div>306 <div class="day"><div class="num">29</div></div>307 <div class="day"><div class="num">30</div></div>308 </div>309 </div>310 311 <!-- Bottom button -->312 <div class="bottom-area">313 <div class="primary-btn">SELECT THIS DATE</div>314 </div>315 316 <!-- Home indicator -->317 <div class="home-indicator-wrap">318 <div class="home-indicator"></div>319 </div>320</div>321</body>322</html>