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: Arial, Helvetica, sans-serif;16 color: #263238;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0;23 width: 100%;24 height: 120px;25 background: #000000;26 color: #FFFFFF;27 display: flex;28 align-items: center;29 justify-content: space-between;30 padding: 0 40px;31 box-sizing: border-box;32 font-size: 40px;33 letter-spacing: 0.5px;34 }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 30px;39 }40 .icon {41 width: 40px; height: 40px;42 }43 .battery {44 width: 70px; height: 40px;45 }46 47 /* Header */48 .header {49 position: absolute;50 top: 120px; left: 0;51 width: 100%;52 height: 160px;53 background: #37474F;54 color: #FFFFFF;55 display: flex;56 align-items: center;57 padding: 0 40px;58 box-sizing: border-box;59 }60 .header-title {61 font-size: 56px;62 font-weight: 600;63 letter-spacing: 1px;64 margin-left: 24px;65 }66 67 /* Content */68 .content {69 position: absolute;70 top: 280px; left: 0;71 width: 100%;72 height: calc(2400px - 280px - 140px);73 overflow: hidden;74 padding: 0 30px;75 box-sizing: border-box;76 }77 78 .month-section {79 margin: 30px 10px 40px;80 padding: 0 20px 10px;81 box-sizing: border-box;82 }83 .month-title {84 text-align: center;85 font-size: 56px;86 font-weight: 600;87 color: #37474F;88 margin: 20px 0 14px;89 }90 .divider {91 height: 3px;92 background: #E0E0E0;93 margin: 0 10px 22px;94 }95 96 .dow {97 display: grid;98 grid-template-columns: repeat(7, 1fr);99 text-align: center;100 color: #9E9E9E;101 font-size: 44px;102 margin-bottom: 18px;103 }104 105 .days {106 display: grid;107 grid-template-columns: repeat(7, 1fr);108 row-gap: 30px;109 column-gap: 0;110 }111 .day {112 height: 120px;113 display: flex;114 align-items: center;115 justify-content: center;116 font-size: 52px;117 color: #29B6F6; /* active month blue */118 }119 .muted { color: #BDBDBD; }120 .selected {121 width: 104px;122 height: 86px;123 background: #1E88E5;124 color: #FFFFFF;125 border-radius: 24px;126 display: flex;127 align-items: center;128 justify-content: center;129 font-weight: 700;130 }131 132 /* Right thin scrollbar track (visual) */133 .right-track {134 position: absolute;135 top: 280px;136 right: 20px;137 width: 10px;138 height: 1500px;139 background: #E0E0E0;140 border-radius: 5px;141 }142 143 /* Bottom gesture bar */144 .gesture-bar {145 position: absolute;146 bottom: 40px; left: 50%;147 transform: translateX(-50%);148 width: 320px;149 height: 16px;150 background: #DADADA;151 border-radius: 8px;152 }153</style>154</head>155<body>156<div id="render-target">157 158 <!-- Status bar -->159 <div class="status-bar">160 <div>8:07</div>161 <div class="status-icons">162 <!-- simple placeholders -->163 <svg class="icon" viewBox="0 0 24 24" fill="#fff">164 <circle cx="12" cy="12" r="10"></circle>165 </svg>166 <svg class="icon" viewBox="0 0 24 24" fill="#fff">167 <rect x="3" y="6" width="18" height="12" rx="2"></rect>168 </svg>169 <svg class="icon" viewBox="0 0 24 24" fill="#fff">170 <path d="M4 10h16v4H4z"></path>171 </svg>172 <svg class="battery" viewBox="0 0 34 18">173 <rect x="1" y="3" width="28" height="12" rx="2" fill="#fff"></rect>174 <rect x="30" y="6" width="3" height="6" fill="#fff"></rect>175 </svg>176 <div>97%</div>177 </div>178 </div>179 180 <!-- Header -->181 <div class="header">182 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff">183 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>184 </svg>185 <div class="header-title">BERLIN - ULM</div>186 </div>187 188 <!-- Content area -->189 <div class="content">190 191 <!-- November 2023 -->192 <div class="month-section">193 <div class="month-title">November 2023</div>194 <div class="divider"></div>195 196 <div class="dow">197 <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div>198 </div>199 200 <div class="days">201 <div class="day muted">30</div>202 <div class="day muted">31</div>203 <div class="day">1</div>204 <div class="day">2</div>205 <div class="day"><div class="selected">3</div></div>206 <div class="day">4</div>207 <div class="day">5</div>208 209 <div class="day">6</div><div class="day">7</div><div class="day">8</div>210 <div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day">12</div>211 212 <div class="day">13</div><div class="day">14</div><div class="day">15</div>213 <div class="day">16</div><div class="day">17</div><div class="day">18</div><div class="day">19</div>214 215 <div class="day">20</div><div class="day">21</div><div class="day">22</div>216 <div class="day">23</div><div class="day">24</div><div class="day">25</div><div class="day">26</div>217 218 <div class="day">27</div><div class="day">28</div><div class="day">29</div>219 <div class="day">30</div><div class="day muted">1</div><div class="day muted">2</div><div class="day muted">3</div>220 221 <div class="day muted">4</div><div class="day muted">5</div><div class="day muted">6</div>222 <div class="day muted">7</div><div class="day muted">8</div><div class="day muted">9</div><div class="day muted">10</div>223 </div>224 </div>225 226 <!-- December 2023 -->227 <div class="month-section">228 <div class="month-title">December 2023</div>229 <div class="divider"></div>230 231 <div class="dow">232 <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div>233 </div>234 235 <div class="days">236 <div class="day muted">27</div><div class="day muted">28</div><div class="day muted">29</div>237 <div class="day muted">30</div><div class="day">1</div><div class="day">2</div><div class="day">3</div>238 239 <div class="day">4</div><div class="day">5</div><div class="day">6</div>240 <div class="day">7</div><div class="day">8</div><div class="day">9</div><div class="day">10</div>241 242 <div class="day">11</div><div class="day">12</div><div class="day">13</div>243 <div class="day">14</div><div class="day">15</div><div class="day">16</div><div class="day">17</div>244 245 <div class="day">18</div><div class="day">19</div><div class="day">20</div>246 <div class="day">21</div><div class="day">22</div><div class="day">23</div><div class="day">24</div>247 248 <div class="day">25</div><div class="day">26</div><div class="day">27</div>249 <div class="day">28</div><div class="day">29</div><div class="day">30</div><div class="day">31</div>250 251 <div class="day muted">1</div><div class="day muted">2</div><div class="day muted">3</div>252 <div class="day muted">4</div><div class="day muted">5</div><div class="day muted">6</div><div class="day muted">7</div>253 </div>254 </div>255 256 <!-- January 2024 -->257 <div class="month-section">258 <div class="month-title">January 2024</div>259 <div class="divider"></div>260 261 <div class="dow">262 <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div>263 </div>264 </div>265 266 </div>267 268 <div class="right-track"></div>269 <div class="gesture-bar"></div>270 271</div>272</body>273</html>