GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Calendar - Aug 2023</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #FFFFFF;11 }12 13 /* Status bar */14 .status-bar {15 height: 96px;16 padding: 0 40px;17 display: flex; align-items: center; justify-content: space-between;18 color: #666; font-size: 36px; letter-spacing: 0.5px;19 }20 .status-right { display: flex; align-items: center; gap: 18px; }21 .wifi-icon, .battery-icon {22 display: inline-block; vertical-align: middle;23 }24 .wifi-icon svg, .battery-icon svg { height: 34px; width: 48px; }25 26 /* Header / month selector */27 .header {28 height: 132px;29 padding: 0 40px;30 display: flex; align-items: center; justify-content: space-between;31 }32 .header-left { display: flex; align-items: center; gap: 28px; }33 .calendar-square {34 position: relative; width: 64px; height: 64px; border-radius: 14px; border: 2px solid #C7C7C7;35 }36 .calendar-square .dot {37 position: absolute; width: 16px; height: 16px; border-radius: 50%;38 background: #FF6B6B; top: -6px; left: -6px;39 }40 .hamburger { width: 52px; height: 44px; position: relative; }41 .hamburger span { position: absolute; left: 0; right: 0; height: 4px; background: #8D8D8D; border-radius: 3px; }42 .hamburger span:nth-child(1){ top: 6px; }43 .hamburger span:nth-child(2){ top: 20px; }44 .hamburger span:nth-child(3){ top: 34px; }45 46 .month-title {47 font-size: 64px; font-weight: 800; color: #111; letter-spacing: 0.5px;48 display: flex; align-items: center; gap: 14px;49 }50 .chev {51 width: 24px; height: 24px;52 border: 3px solid #C8C8C8; border-left: 3px solid transparent; border-top: 3px solid transparent;53 transform: rotate(45deg); margin-top: 14px;54 }55 .more-btn {56 width: 64px; height: 64px; border-radius: 50%; border: 2px solid #DADADA; display: flex; align-items: center; justify-content: center;57 }58 .more-btn div { width: 6px; height: 6px; background: #A8A8A8; border-radius: 50%; margin: 3px; display: inline-block; }59 60 /* Calendar */61 .calendar-wrap { padding: 0 40px; }62 .weekday-row {63 margin-top: 16px; padding: 0 20px;64 display: grid; grid-template-columns: repeat(7, 1fr); color: #888;65 font-size: 32px;66 }67 .calendar-grid {68 margin-top: 18px; padding: 16px 12px 0;69 display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 120px;70 }71 .day {72 font-size: 44px; color: #222; display: flex; align-items: center; justify-content: center; position: relative;73 }74 .day.other { color: #D0D0D0; }75 .day.selected {76 color: #FFFFFF; font-weight: 700;77 }78 .day.selected::before {79 content: ""; position: absolute; width: 96px; height: 96px; background: #2F77F1;80 border-radius: 50%;81 z-index: -1;82 }83 84 /* Under-week indicator */85 .week-indicator {86 height: 88px; margin-top: 14px; border-bottom: 4px solid #EAEAEA; margin-left: 40px; margin-right: 40px;87 display: flex; align-items: center; color: #2F77F1; font-weight: 700; gap: 12px;88 }89 .week-indicator .line { height: 6px; width: 80px; background: #2F77F1; border-radius: 3px; position: relative; top: 30px; }90 91 /* Sections */92 .section {93 background: #F3F3F3; color: #8A8A8A; padding: 26px 40px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 30px;94 }95 96 /* Event rows */97 .events { padding: 22px 40px; }98 .event-row {99 display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: center; margin-bottom: 26px;100 }101 .time { color: #3A3A3A; font-weight: 700; font-size: 36px; }102 .time .sub { display: block; color: #9A9A9A; font-weight: 600; font-size: 26px; margin-top: 6px; }103 104 .card {105 background: #FFFFFF; border: 1px solid #ECECEC; border-radius: 18px; height: 110px;106 display: flex; align-items: center; padding: 0 28px; font-size: 36px; color: #6E6E6E; box-shadow: 0 6px 18px rgba(0,0,0,0.06);107 justify-content: space-between;108 }109 .card .left { display: flex; align-items: center; gap: 18px; }110 .card.done { color: #B0B0B0; text-decoration: line-through; }111 .check {112 width: 44px; height: 44px; border-radius: 50%; border: 3px solid #D9D9D9; display: inline-flex; align-items: center; justify-content: center;113 }114 .check svg { width: 24px; height: 24px; }115 .close-x {116 width: 44px; height: 44px; border-radius: 50%; background: #F0F0F0; display: flex; align-items: center; justify-content: center; color: #9A9A9A; font-weight: 800;117 }118 119 .pill {120 background: #BFE6F0; color: #FFFFFF; border: none; height: 110px; border-radius: 18px; display: flex; align-items: center; padding: 0 28px; font-weight: 800; font-size: 36px;121 }122 .pill.blue { background: #BFE6F0; color: #0C4461; }123 .pill.green { background: #3E9857; color: #FFFFFF; }124 125 .spaced { padding: 26px 40px; }126 127 /* Floating input at bottom */128 .bottom-ui {129 position: absolute; left: 0; right: 0; bottom: 140px;130 padding: 0 40px;131 display: flex; align-items: center; gap: 36px;132 }133 .home-outline {134 width: 64px; height: 64px; color: #3C7BFF;135 }136 .floating-input {137 flex: 1; height: 136px; background: #FFFFFF; border-radius: 68px;138 box-shadow: 0 18px 40px rgba(0,0,0,0.12);139 display: flex; align-items: center; justify-content: space-between; padding: 0 36px;140 border: 1px solid #F0F0F0;141 }142 .floating-input .placeholder { color: #9E9E9E; font-size: 38px; }143 .mini-cal {144 width: 84px; height: 84px; border-radius: 22px; border: 3px solid #3C7BFF; color: #3C7BFF; display: flex; align-items: center; justify-content: center;145 }146 147 /* Gesture bar */148 .gesture {149 position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);150 width: 260px; height: 14px; background: #9E9E9E; border-radius: 10px; opacity: 0.6;151 }152</style>153</head>154<body>155<div id="render-target">156 157 <!-- Status bar -->158 <div class="status-bar">159 <div>8:59</div>160 <div class="status-right">161 <span class="wifi-icon">162 <svg viewBox="0 0 24 24" fill="#777"><path d="M12 18.5l2 2-2 2-2-2 2-2zm-5-5l2 2 3-3 3 3 2-2-5-5-5 5z"/></svg>163 </span>164 <span class="battery-icon">165 <svg viewBox="0 0 36 18">166 <rect x="1" y="2" width="28" height="14" rx="2" ry="2" fill="#777"/>167 <rect x="3" y="4" width="24" height="10" fill="#fff"/>168 <rect x="3" y="4" width="18" height="10" fill="#77AA77"/>169 <rect x="30" y="6" width="4" height="6" rx="1" fill="#777"/>170 </svg>171 </span>172 <span>100%</span>173 </div>174 </div>175 176 <!-- Header -->177 <div class="header">178 <div class="header-left">179 <div class="calendar-square"><div class="dot"></div></div>180 <div class="hamburger">181 <span></span><span></span><span></span>182 </div>183 </div>184 <div class="month-title">Aug 2023 <span class="chev"></span></div>185 <div class="more-btn">186 <div></div><div></div><div></div>187 </div>188 </div>189 190 <!-- Calendar -->191 <div class="calendar-wrap">192 <div class="weekday-row">193 <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>194 </div>195 <div class="calendar-grid">196 <div class="day other">30</div>197 <div class="day other">31</div>198 <div class="day">1</div>199 <div class="day">2</div>200 <div class="day">3</div>201 <div class="day">4</div>202 <div class="day">5</div>203 204 <div class="day">6</div>205 <div class="day">7</div>206 <div class="day">8</div>207 <div class="day">9</div>208 <div class="day">10</div>209 <div class="day selected">11</div>210 <div class="day">12</div>211 212 <div class="day">13</div>213 <div class="day">14</div>214 <div class="day">15</div>215 <div class="day">16</div>216 <div class="day">17</div>217 <div class="day">18</div>218 <div class="day">19</div>219 220 <div class="day">20</div>221 <div class="day">21</div>222 <div class="day">22</div>223 <div class="day">23</div>224 <div class="day">24</div>225 <div class="day">25</div>226 <div class="day">26</div>227 228 <div class="day">27</div>229 <div class="day">28</div>230 <div class="day">29</div>231 <div class="day">30</div>232 <div class="day">31</div>233 <div class="day other">1</div>234 <div class="day other">2</div>235 </div>236 </div>237 238 <div class="week-indicator">239 <div style="color:#889; font-weight:800; margin-right:6px;">FRI</div>240 <div style="color:#2F77F1; font-size:40px;">11</div>241 <div class="line"></div>242 </div>243 244 <!-- Today section -->245 <div class="section">Today, Friday, August 11</div>246 <div class="events">247 <div class="event-row">248 <div class="time">08:33 AM</div>249 <div class="card done">250 <div class="left">251 <div class="check">252 <svg viewBox="0 0 24 24" fill="#D9D9D9"><path d="M9 16.5l-3.5-3.5 1.4-1.4L9 13.7l8.1-8.1 1.4 1.4z"/></svg>253 </div>254 <div>Morning Yoga session</div>255 </div>256 <div class="close-x">×</div>257 </div>258 </div>259 260 <div class="event-row">261 <div class="time"><div>11:30 AM</div><span class="sub">1 hour</span></div>262 <div class="pill blue">HR meeting</div>263 </div>264 </div>265 266 <!-- Other days -->267 <div class="section">Tuesday, August 15</div>268 <div class="spaced">269 <div class="pill green" style="margin: 22px 0;">Independence Day</div>270 </div>271 272 <div class="section">Wednesday, August 16</div>273 <div class="spaced">274 <div class="pill green" style="margin: 22px 0;">Parsi New Year</div>275 </div>276 277 <div class="section">Sunday, August 20</div>278 279 <!-- Bottom floating UI -->280 <div class="bottom-ui">281 <div class="home-outline">282 <svg viewBox="0 0 24 24" fill="none" stroke="#3C7BFF" stroke-width="2.5">283 <path d="M3 11l9-8 9 8"></path>284 <path d="M5 10v10h5v-6h4v6h5V10"></path>285 </svg>286 </div>287 <div class="floating-input">288 <div class="placeholder">I want to...</div>289 <div class="mini-cal">290 <svg viewBox="0 0 24 24" width="42" height="42" fill="none" stroke="#3C7BFF" stroke-width="2">291 <rect x="3" y="5" width="18" height="16" rx="3"></rect>292 <path d="M3 9h18M8 3v4M16 3v4"></path>293 </svg>294 </div>295 </div>296 </div>297 298 <!-- Gesture -->299 <div class="gesture"></div>300 301</div>302</body>303</html>