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 - August 2023</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 0;12 }13 14 /* Status bar */15 .status-bar {16 height: 96px; background: #163D75; color: #fff;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 32px; font-size: 40px; box-sizing: border-box;19 }20 .status-icons { display: flex; align-items: center; gap: 28px; }21 .icon { width: 48px; height: 48px; }22 .icon svg { width: 100%; height: 100%; fill: #ffffff; }23 24 /* App header */25 .app-bar {26 height: 220px; background: #1F58A8; color: #fff; position: relative;27 padding: 0 32px; box-sizing: border-box;28 display: flex; align-items: center; justify-content: space-between;29 }30 .app-left { display: flex; align-items: center; gap: 28px; }31 .hamburger svg { width: 60px; height: 60px; fill: #fff; }32 .title { line-height: 1.1; }33 .title .year { font-size: 40px; opacity: 0.85; }34 .title .month { font-size: 86px; font-weight: 600; margin-top: 6px; }35 .app-right { display: flex; align-items: center; gap: 36px; }36 .app-right .icon svg { width: 56px; height: 56px; fill: #fff; }37 38 /* Day-of-week row */39 .dow {40 height: 110px; display: grid; grid-template-columns: repeat(7, 1fr);41 align-items: center; padding: 0 48px; box-sizing: border-box;42 color: #9aa1a9; font-size: 38px; background: #ffffff;43 }44 .dow span { text-align: center; }45 .dow .sun { color: #c74343; }46 .dow .wed { color: #3a7bd5; }47 48 /* Calendar grid */49 .calendar {50 padding: 0 48px; box-sizing: border-box;51 }52 .grid {53 display: grid; grid-template-columns: repeat(7, 1fr);54 grid-auto-rows: 150px; gap: 8px; color: #9aa1a9;55 }56 .cell {57 position: relative; background: #ffffff; border-radius: 8px;58 display: flex; align-items: flex-start; justify-content: center;59 padding-top: 18px; font-size: 52px; font-weight: 500;60 }61 .cell.sun { color: #c74343; }62 .cell.muted { color: #d1d6db; background: #f3f3f5; }63 .cell.selected {64 background: #cfe6ff; border: 2px solid #3a7bd5; color: #3a7bd5;65 }66 .cell.selected::after {67 content: ""; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);68 width: 14px; height: 14px; background: #3a7bd5; border-radius: 50%;69 }70 .cell.selected .bar {71 position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);72 width: 120px; height: 12px; background: #3a7bd5; border-radius: 6px;73 box-shadow: inset 0 -10px 0 rgba(255,255,255,0.7);74 }75 76 /* Events area header + list */77 .events-wrap {78 margin-top: 18px; background: #f5f6f7; border-top: 1px solid #e2e3e6;79 padding-top: 18px;80 }81 .day-strip {82 display: flex; align-items: flex-start; padding: 0 24px; box-sizing: border-box;83 }84 .day-left {85 width: 140px; text-align: center; padding-top: 10px;86 color: #2e77c4;87 }88 .day-left .num { font-size: 72px; font-weight: 600; line-height: 1; }89 .day-left .weekday { font-size: 36px; margin-top: 8px; }90 .cards {91 flex: 1; padding-left: 16px;92 }93 94 .event-card {95 position: relative; background: #ffffff; border-radius: 12px;96 box-shadow: 0 1px 0 rgba(0,0,0,0.08); margin: 18px 24px 18px 0;97 padding: 22px 24px; display: flex; align-items: flex-start;98 }99 .event-card::before {100 content: ""; position: absolute; left: 0; top: 0; bottom: 0;101 width: 18px; background: #2e77c4; border-top-left-radius: 12px; border-bottom-left-radius: 12px;102 }103 .event-content { flex: 1; padding-left: 18px; }104 .event-title { font-size: 44px; font-weight: 700; color: #2b2b2b; display: flex; align-items: center; gap: 12px; }105 .event-sub { font-size: 34px; color: #6b6f74; margin-top: 10px; line-height: 1.35; }106 .event-side {107 width: 100px; display: flex; justify-content: center; align-items: center;108 }109 .avatar-placeholder {110 width: 88px; height: 88px; background: #E0E0E0; border: 1px solid #BDBDBD;111 border-radius: 50%; display: flex; align-items: center; justify-content: center;112 color: #757575; font-size: 20px; text-align: center; padding: 6px;113 }114 .clock-icon svg { width: 38px; height: 38px; fill: #6b6f74; }115 116 /* Bottom area */117 .bottom-black {118 position: absolute; left: 0; right: 0; bottom: 0;119 height: 160px; background: #000;120 display: flex; align-items: center; justify-content: center;121 }122 .pill {123 width: 240px; height: 18px; background: #fff; border-radius: 9px; opacity: 0.85;124 }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Status Bar -->131 <div class="status-bar">132 <div>12:16</div>133 <div class="status-icons">134 <!-- calendar tiny -->135 <div class="icon">136 <svg viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h3v16H4V4h3V2zm-1 6h12v10H6V8z"/></svg>137 </div>138 <!-- square with arrow (rotate) -->139 <div class="icon">140 <svg viewBox="0 0 24 24"><path d="M3 3h18v18H3V3zm5 5v8h8V8H8zm6 2h-4v4h4v-4z"/></svg>141 </div>142 <!-- calendar 31 -->143 <div class="icon">144 <svg viewBox="0 0 24 24"><path d="M5 4h14v16H5V4zm2 4v2h10V8H7zm0 4v6h10v-6H7z"/></svg>145 </div>146 <!-- dot -->147 <div class="icon">148 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>149 </div>150 <!-- wifi -->151 <div class="icon">152 <svg viewBox="0 0 24 24"><path d="M2 8.5C6.2 5.2 17.8 5.2 22 8.5l-2 2c-3.5-2.7-10.5-2.7-14 0l-2-2zm4 4c2.9-2.1 9.1-2.1 12 0l-2 2c-2-1.5-6-1.5-8 0l-2-2zm6 6l-3-3 3-3 3 3-3 3z"/></svg>153 </div>154 <!-- battery -->155 <div class="icon">156 <svg viewBox="0 0 24 24"><path d="M2 7h17v10H2V7zm19 3h1v4h-1v-4z"/></svg>157 </div>158 </div>159 </div>160 161 <!-- App Header -->162 <div class="app-bar">163 <div class="app-left">164 <div class="hamburger">165 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>166 </div>167 <div class="title">168 <div class="year">2023</div>169 <div class="month">August</div>170 </div>171 </div>172 <div class="app-right">173 <!-- calendar icon -->174 <div class="icon">175 <svg viewBox="0 0 24 24"><path d="M6 2h2v2h8V2h2v2h2v16H4V4h2V2zm0 6h12v10H6V8z"/></svg>176 </div>177 <!-- plus -->178 <div class="icon">179 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>180 </div>181 <!-- more vertical -->182 <div class="icon">183 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>184 </div>185 </div>186 </div>187 188 <!-- Day Of Week Row -->189 <div class="dow">190 <span class="sun">S</span>191 <span>M</span>192 <span>T</span>193 <span class="wed">W</span>194 <span>T</span>195 <span>F</span>196 <span>S</span>197 </div>198 199 <!-- Calendar Grid -->200 <div class="calendar">201 <div class="grid">202 <!-- Week 1: last two days of July -->203 <div class="cell sun muted">30</div>204 <div class="cell muted">31</div>205 <div class="cell">1</div>206 <div class="cell">2</div>207 <div class="cell">3</div>208 <div class="cell">4</div>209 <div class="cell">5</div>210 <!-- Week 2 -->211 <div class="cell sun">6</div>212 <div class="cell">7</div>213 <div class="cell selected">9<div class="bar"></div></div>214 <div class="cell">9</div>215 <div class="cell">10</div>216 <div class="cell">11</div>217 <div class="cell">12</div>218 <!-- Week 3 -->219 <div class="cell sun">13</div>220 <div class="cell">14</div>221 <div class="cell">15</div>222 <div class="cell">16</div>223 <div class="cell">17</div>224 <div class="cell">18</div>225 <div class="cell">19</div>226 <!-- Week 4 -->227 <div class="cell sun">20</div>228 <div class="cell">21</div>229 <div class="cell">22</div>230 <div class="cell">23</div>231 <div class="cell">24</div>232 <div class="cell">25</div>233 <div class="cell">26</div>234 <!-- Week 5 -->235 <div class="cell sun">27</div>236 <div class="cell">28</div>237 <div class="cell">29</div>238 <div class="cell">30</div>239 <div class="cell">31</div>240 <div class="cell muted">1</div>241 <div class="cell muted">2</div>242 <!-- Week 6 (muted next month) -->243 <div class="cell sun muted">3</div>244 <div class="cell muted">4</div>245 <div class="cell muted">5</div>246 <div class="cell muted">6</div>247 <div class="cell muted">7</div>248 <div class="cell muted">8</div>249 <div class="cell muted">9</div>250 </div>251 </div>252 253 <!-- Events List for Selected Day -->254 <div class="events-wrap">255 <div class="day-strip">256 <div class="day-left">257 <div class="num">9</div>258 <div class="weekday">Wed</div>259 </div>260 <div class="cards">261 262 <div class="event-card">263 <div class="event-content">264 <div class="event-title">Birthday 🎊 celebration</div>265 <div class="event-sub">Global Foyer Mall, Sector 43, Gurugram, Haryana 122002, India</div>266 </div>267 <div class="event-side">268 <div class="avatar-placeholder">[IMG: User Avatar]</div>269 </div>270 </div>271 272 <div class="event-card">273 <div class="event-content">274 <div class="event-title">275 Live Raters Meeting276 <span class="clock-icon">277 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6l5 3 1-1-4-2V7z"/></svg>278 </span>279 </div>280 <div class="event-sub">Plot No.7, Oxygen Business Park SEZ, Tower 3, Noida-Greater Noida Expy, Sector 144, Noida, …</div>281 </div>282 </div>283 284 <div class="event-card">285 <div class="event-content">286 <div class="event-title">Redeployement Meeting</div>287 <div class="event-sub">GlobalLogic Technologies Limited, Faridabad - Gurgaon Rd, Gwal Pahari, …</div>288 </div>289 <div class="event-side">290 <div class="avatar-placeholder">[IMG: User Avatar]</div>291 </div>292 </div>293 294 <div class="event-card">295 <div class="event-content">296 <div class="event-title">297 Task Feedback Meeting298 <span class="clock-icon">299 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6l5 3 1-1-4-2V7z"/></svg>300 </span>301 </div>302 <div class="event-sub">Gwal Pahari Police Station, C4HR+9X9, Faridabad - Gurgaon Rd, Gwal Pahari, Bandhw…</div>303 </div>304 </div>305 306 <div class="event-card">307 <div class="event-content">308 <div class="event-title">309 Town Hall Meeting310 <span class="clock-icon">311 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6l5 3 1-1-4-2V7z"/></svg>312 </span>313 </div>314 <div class="event-sub">Globallogic gurgaon bandhwari</div>315 </div>316 </div>317 318 </div>319 </div>320 </div>321 322 <!-- Bottom navigation indicator -->323 <div class="bottom-black">324 <div class="pill"></div>325 </div>326 327</div>328</body>329</html>