GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Daily Lesson - Calendar</title>6<style>7 @font-face{8 font-family: "InterUI";9 src: local("Inter"), local("Inter Regular");10 }11 body {12 margin: 0;13 padding: 0;14 background: transparent;15 font-family: InterUI, Arial, Helvetica, sans-serif;16 }17 #render-target {18 width: 1080px;19 height: 2400px;20 position: relative;21 overflow: hidden;22 background: linear-gradient(180deg, #5fb1ff 0%, #5a7cf0 35%, #6a54d4 65%, #5f45c6 100%);23 color: #ffffff;24 }25 26 /* Status bar */27 .status-bar {28 position: absolute;29 top: 0;30 left: 0;31 right: 0;32 height: 90px;33 padding: 0 36px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 font-weight: 600;38 font-size: 36px;39 letter-spacing: 1px;40 opacity: 0.95;41 }42 .status-right {43 display: flex;44 gap: 20px;45 align-items: center;46 }47 .icon-cloud, .icon-wifi, .icon-battery {48 width: 40px;49 height: 40px;50 opacity: 0.95;51 }52 53 /* Header title */54 .header {55 position: absolute;56 top: 90px;57 left: 36px;58 right: 36px;59 height: 110px;60 display: flex;61 align-items: center;62 justify-content: space-between;63 }64 .title {65 font-size: 64px;66 font-weight: 700;67 }68 .crown {69 width: 86px;70 height: 86px;71 }72 73 /* Tabs */74 .tabs {75 position: absolute;76 top: 210px;77 left: 36px;78 right: 36px;79 height: 140px;80 display: grid;81 grid-template-columns: 1fr 1fr 1fr;82 gap: 22px;83 }84 .tab {85 position: relative;86 border-radius: 26px;87 padding: 22px 26px;88 background: rgba(255,255,255,0.12);89 backdrop-filter: blur(2px);90 border: 1px solid rgba(255,255,255,0.15);91 }92 .tab.active {93 background: rgba(255,255,255,0.22);94 }95 .tab-title {96 font-size: 38px;97 font-weight: 700;98 margin-bottom: 4px;99 }100 .tab-sub {101 display: flex;102 align-items: center;103 gap: 12px;104 font-size: 32px;105 opacity: 0.95;106 }107 .small-icon {108 width: 34px; height: 34px;109 }110 111 /* Calendar card */112 .calendar-card {113 position: absolute;114 top: 380px;115 left: 0;116 right: 0;117 bottom: 370px;118 padding: 0 36px;119 }120 .cal-surface {121 width: 100%;122 height: 100%;123 border-radius: 24px;124 background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.12) 100%);125 border-left: 1px solid rgba(255,255,255,0.18);126 border-right: 1px solid rgba(255,255,255,0.12);127 position: relative;128 padding: 32px 28px 24px;129 }130 131 .cal-head {132 display: flex;133 align-items: center;134 gap: 16px;135 padding: 10px 8px 16px 8px;136 }137 .back-btn {138 width: 52px; height: 52px;139 display: flex; align-items: center; justify-content: center;140 border-radius: 26px;141 background: rgba(255,255,255,0.12);142 }143 .month-label {144 font-size: 66px;145 font-weight: 800;146 margin-left: 16px;147 display: flex; align-items: center; gap: 14px;148 }149 .caret {150 width: 26px; height: 26px;151 transform: rotate(180deg);152 opacity: 0.95;153 }154 155 .weekdays {156 display: grid;157 grid-template-columns: repeat(7, 1fr);158 gap: 16px;159 padding: 14px 6px;160 margin-top: 6px;161 font-weight: 700;162 opacity: 0.9;163 color: rgba(255,255,255,0.85);164 }165 .weekday {166 text-align: center;167 font-size: 34px;168 }169 170 .days {171 display: grid;172 grid-template-columns: repeat(7, 1fr);173 gap: 22px 18px;174 padding: 8px 6px;175 margin-top: 10px;176 }177 .day {178 width: 120px;179 height: 120px;180 margin: 0 auto;181 border-radius: 50%;182 background: rgba(26,35,126,0.45);183 box-shadow: inset 0 2px 0 rgba(255,255,255,0.08);184 color: #ffffff;185 display: flex;186 align-items: center;187 justify-content: center;188 font-size: 46px;189 font-weight: 700;190 letter-spacing: 1px;191 }192 .muted {193 opacity: 0.35;194 }195 .weekend {196 background: rgba(40,48,140,0.55);197 }198 .selected-ring {199 border: 10px solid #55d663;200 background: rgba(28,41,108,0.6);201 }202 203 /* Right side Weekly Quiz chips */204 .weekly-quiz-side {205 position: absolute;206 top: 260px;207 right: 20px;208 width: 200px;209 text-align: center;210 }211 .weekly-quiz-side .label {212 font-size: 34px;213 line-height: 38px;214 font-weight: 800;215 }216 .chip {217 margin: 18px auto 0;218 width: 140px;219 height: 140px;220 border-radius: 36px;221 background: radial-gradient(circle at 30% 30%, #70d7ff, #4aa9ff);222 display: flex;223 align-items: center;224 justify-content: center;225 color: #0a2b4a;226 font-size: 56px;227 font-weight: 900;228 border: 4px solid rgba(255,255,255,0.65);229 box-shadow: 0 10px 20px rgba(0,0,0,0.25);230 }231 232 /* Footer / Start area */233 .footer {234 position: absolute;235 left: 0;236 right: 0;237 bottom: 0;238 height: 370px;239 background: linear-gradient(0deg, rgba(64,25,138,0.65), rgba(116,78,222,0.4));240 display: flex;241 flex-direction: column;242 justify-content: center;243 padding: 0 60px;244 }245 .handsfree {246 font-size: 58px;247 font-weight: 700;248 text-align: left;249 margin-bottom: 34px;250 }251 .footer-actions {252 display: flex;253 align-items: center;254 justify-content: space-between;255 }256 .play-wrap {257 position: relative;258 width: 172px; height: 172px;259 border-radius: 86px;260 background: radial-gradient(circle at 30% 30%, #ff6de5, #9336ff);261 display: flex;262 align-items: center; justify-content: center;263 box-shadow: 0 12px 24px rgba(0,0,0,0.35);264 }265 .play-wrap .check {266 position: absolute;267 right: -6px; top: -6px;268 width: 56px; height: 56px;269 background: #d6ffe2;270 color: #22a44e;271 font-weight: 900;272 border-radius: 50%;273 display: flex; align-items: center; justify-content: center;274 border: 6px solid #ffffff55;275 font-size: 34px;276 }277 .start-btn {278 width: 480px;279 height: 150px;280 border-radius: 90px;281 background: linear-gradient(180deg, #ffb177, #e27437);282 color: #ffffff;283 font-weight: 800;284 font-size: 72px;285 border: 6px solid rgba(255,255,255,0.35);286 box-shadow: 0 14px 28px rgba(0,0,0,0.35);287 display: flex; align-items: center; justify-content: center;288 }289 290 /* Utility icons */291 svg { display: block; }292</style>293</head>294<body>295<div id="render-target">296 297 <!-- Status Bar -->298 <div class="status-bar">299 <div>1:33</div>300 <div class="status-right">301 <!-- mail, play icons are simplified as dots with shapes -->302 <svg class="icon-cloud" viewBox="0 0 24 24" fill="white">303 <path d="M6 15h10a4 4 0 0 0 0-8 5 5 0 0 0-9.8 1A3.5 3.5 0 0 0 6 15z"/>304 </svg>305 <svg class="icon-wifi" viewBox="0 0 24 24" fill="white">306 <path d="M2 8a16 16 0 0 1 20 0l-1.6 1.6a13.5 13.5 0 0 0-16.8 0L2 8zm3.6 3.6a11 11 0 0 1 12.8 0L16.8 13a8.5 8.5 0 0 0-9.6 0l-1.6-1.4zm3.6 3.4a6 6 0 0 1 5.6 0L12 18l-2.8-3z"/>307 </svg>308 <svg class="icon-battery" viewBox="0 0 28 16" fill="white">309 <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="white" stroke-width="2" fill="none"/>310 <rect x="3" y="5" width="14" height="6" fill="white"/>311 <rect x="24" y="6" width="3" height="4" fill="white"/>312 </svg>313 </div>314 </div>315 316 <!-- Header -->317 <div class="header">318 <div class="title">Daily Lesson</div>319 <svg class="crown" viewBox="0 0 64 64">320 <path fill="#ffcf4b" d="M6 24l10 8 8-16 12 18 12-14 10 8v20H6z"/>321 <rect x="6" y="44" width="52" height="8" fill="#f3a93d"/>322 </svg>323 </div>324 325 <!-- Tabs -->326 <div class="tabs">327 <div class="tab active">328 <div class="tab-title">Daily Lesson</div>329 <div class="tab-sub">330 <svg class="small-icon" viewBox="0 0 24 24" fill="white">331 <path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm1-6v2h6V2h-6zM5 2h6v2H5V2zm-2 6h2v12H3V8zm16 0h2v12h-2V8z"/>332 </svg>333 <span>Ready</span>334 </div>335 </div>336 <div class="tab">337 <div class="tab-title">Weekly Quiz</div>338 <div class="tab-sub">339 <svg class="small-icon" viewBox="0 0 24 24" fill="white">340 <path d="M12 2l2.5 5L20 8l-4 4 .9 6L12 15l-4.9 3 1-6L4 8l5.5-1L12 2z"/>341 </svg>342 <span>6 days</span>343 </div>344 </div>345 <div class="tab">346 <div class="tab-title">Monthly</div>347 <div class="tab-sub">348 <svg class="small-icon" viewBox="0 0 24 24" fill="white">349 <path d="M17 3H7a2 2 0 0 0-2 2v14l7-3 7 3V5a2 2 0 0 0-2-2z"/>350 </svg>351 <span>Challenge • 6 days</span>352 </div>353 </div>354 </div>355 356 <!-- Calendar -->357 <div class="calendar-card">358 <div class="cal-surface">359 360 <div class="cal-head">361 <div class="back-btn">362 <svg width="28" height="28" viewBox="0 0 24 24" fill="white">363 <path d="M15.5 4L7 12l8.5 8 1.5-1.6L10.2 12l6.8-6.4L15.5 4z"/>364 </svg>365 </div>366 <div class="month-label">367 June 2023368 <svg class="caret" viewBox="0 0 24 24" fill="white">369 <path d="M7 10l5 5 5-5z"/>370 </svg>371 </div>372 </div>373 374 <div class="weekdays">375 <div class="weekday">M</div>376 <div class="weekday">T</div>377 <div class="weekday">W</div>378 <div class="weekday">T</div>379 <div class="weekday">F</div>380 <div class="weekday">S</div>381 <div class="weekday">S</div>382 </div>383 384 <div class="days">385 <div class="day muted">29</div>386 <div class="day muted">30</div>387 <div class="day muted">31</div>388 <div class="day">01</div>389 <div class="day">02</div>390 <div class="day weekend">03</div>391 <div class="day weekend">04</div>392 393 <div class="day">05</div>394 <div class="day">06</div>395 <div class="day">07</div>396 <div class="day">08</div>397 <div class="day">09</div>398 <div class="day weekend">10</div>399 <div class="day weekend">11</div>400 401 <div class="day">12</div>402 <div class="day">13</div>403 <div class="day">14</div>404 <div class="day">15</div>405 <div class="day">16</div>406 <div class="day weekend">17</div>407 <div class="day weekend">18</div>408 409 <div class="day selected-ring">19</div>410 <div class="day">20</div>411 <div class="day">21</div>412 <div class="day">22</div>413 <div class="day">23</div>414 <div class="day weekend">24</div>415 <div class="day weekend">25</div>416 417 <div class="day">26</div>418 <div class="day">27</div>419 <div class="day">28</div>420 <div class="day">29</div>421 <div class="day">30</div>422 <div class="day muted">01</div>423 <div class="day muted">02</div>424 425 <div class="day muted">03</div>426 <div class="day muted">04</div>427 <div class="day muted">05</div>428 <div class="day muted">06</div>429 <div class="day muted">07</div>430 <div class="day muted">08</div>431 <div class="day muted">09</div>432 </div>433 434 <!-- Side weekly quiz chips -->435 <div class="weekly-quiz-side">436 <div class="label">Weekly<br/>Quiz</div>437 <div class="chip">22</div>438 <div class="chip">23</div>439 <div class="chip">24</div>440 </div>441 442 </div>443 </div>444 445 <!-- Footer -->446 <div class="footer">447 <div class="handsfree">Continue with Hands‑Free</div>448 <div class="footer-actions">449 <div class="play-wrap">450 <svg width="80" height="80" viewBox="0 0 24 24" fill="white">451 <path d="M8 5v14l11-7z"/>452 </svg>453 <div class="check">✓</div>454 </div>455 456 <div class="start-btn">Start</div>457 </div>458 </div>459 460</div>461</body>462</html>