<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Streak Calendar</title>
<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@400;700&display=swap" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: #fff;
color: #3a3a3a;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: 420px;
margin: 0 auto;
padding: 24px 20px 100px;
}
.greeting-box {
background-color: #9ef49e;
border-radius: 32px;
padding: 20px 24px;
margin-bottom: 24px;
}
.greeting-box h1 {
font-weight: 700;
font-size: 20px;
line-height: 1.2;
margin: 0 0 8px 0;
color: #2f2f2f;
}
.greeting-box p {
font-weight: 400;
font-size: 16px;
line-height: 1.3;
margin: 0;
color: #3a3a3a;
}
.streak-text {
font-weight: 700;
font-size: 16px;
margin-bottom: 12px;
color: #3a3a3a;
}
.streak-text .highlight {
font-weight: 700;
}
.calendar {
background: #fff7f0;
border-radius: 8px;
padding: 12px 16px 20px 16px;
font-size: 12px;
color: #3a3a3a;
user-select: none;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 14px;
margin-bottom: 12px;
}
.calendar-header button {
background: none;
border: none;
font-size: 18px;
color: #3a3a3a;
cursor: pointer;
padding: 0 6px;
line-height: 1;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-weight: 500;
margin-bottom: 8px;
color: #3a3a3a;
}
.calendar-weekdays div {
padding-bottom: 6px;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.day {
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 16px;
font-weight: 500;
cursor: default;
user-select: none;
}
.day.empty {
color: #c4c4c4;
border: 1.5px solid #e6e6e6;
background: #fff;
}
.day.light-green {
background: #d9f0d9;
color: #3a3a3a;
}
.day.green {
background: #3a8a3a;
color: #fff;
}
.day.green.left-rounded {
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.day.green.right-rounded {
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
.day.green.middle {
border-radius: 0;
}
/* Bottom nav */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #f0ecf8;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
box-shadow: 0 -1px 6px rgb(0 0 0 / 0.1);
display: flex;
justify-content: space-around;
padding: 12px 0 24px 0;
font-size: 12px;
color: #3a3a3a;
font-weight: 500;
font-family: 'Inter', sans-serif;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
cursor: pointer;
color: #3a3a3a;
}
.nav-item.active {
color: #3a3a3a;
}
.nav-item.active .icon-bg {
background: #d9d9f7;
border-radius: 16px;
padding: 8px 12px;
margin-bottom: 4px;
}
.nav-item .icon-bg {
display: inline-block;
margin-bottom: 4px;
}
.nav-item svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* Fire emoji spacing */
.streak-text .fire {
margin-left: 6px;
}
@media (max-width: 420px) {
.container {
padding: 20px 16px 100px;
}
.day {
width: 28px;
height: 28px;
line-height: 28px;
font-size: 11px;
}
}
</style>
</head>
<body>
<div class="container" role="main">
<section class="greeting-box" aria-label="Greeting and Bible verse">
<h1>Good Morning, John Doe</h1>
<p>Yohanes 1:1: Pada mulanya adalah Firman; Firman itu bersama-sama dengan
Allah dan Firman itu adalah Allah.</p>
</section>
<section aria-label="Streak information">
<p class="streak-text" aria-live="polite">
Kamu punya <span class="highlight">3</span> hari streak
<span class="fire" aria-hidden="true">🔥</span><span class="fire" aria-
hidden="true">🔥</span>
</p>
<div class="calendar" aria-label="Calendar for August 2022">
<div class="calendar-header">
<button aria-label="Previous month" tabindex="-1" disabled><</button>
<div>August 2022</div>
<button aria-label="Next month" tabindex="-1" disabled>></button>
</div>
<div class="calendar-weekdays" aria-hidden="true">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-days" role="grid" aria-readonly="true">
<div class="day empty" role="gridcell" aria-disabled="true" aria-
label="31 July">31</div>
<div class="day light-green" role="gridcell" aria-label="1
August">1</div>
<div class="day light-green" role="gridcell" aria-label="2
August">2</div>
<div class="day light-green" role="gridcell" aria-label="3
August">3</div>
<div class="day light-green" role="gridcell" aria-label="4
August">4</div>
<div class="day green left-rounded" role="gridcell" aria-label="5
August">5</div>
<div class="day green right-rounded" role="gridcell" aria-label="6
August">6</div>
<div class="day green left-rounded" role="gridcell" aria-label="7
August">7</div>
<div class="day light-green" role="gridcell" aria-label="8
August">8</div>
<div class="day green left-rounded" role="gridcell" aria-label="9
August">9</div>
<div class="day green middle" role="gridcell" aria-label="10
August">10</div>
<div class="day green right-rounded" role="gridcell" aria-label="11
August">11</div>
<div class="day light-green" role="gridcell" aria-label="12
August">12</div>
<div class="day green right-rounded" role="gridcell" aria-label="13
August">13</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-
label="14 August">14</div>
<div class="day light-green" role="gridcell" aria-label="15
August">15</div>
<div class="day light-green" role="gridcell" aria-label="16
August">16</div>
<div class="day light-green" role="gridcell" aria-label="17
August">17</div>
<div class="day light-green" role="gridcell" aria-label="18
August">18</div>
<div class="day light-green" role="gridcell" aria-label="19
August">19</div>
<div class="day green right-rounded" role="gridcell" aria-label="20
August">20</div>
<div class="day green left-rounded" role="gridcell" aria-label="21
August">21</div>
<div class="day light-green" role="gridcell" aria-label="22
August">22</div>
<div class="day green left-rounded" role="gridcell" aria-label="23
August">23</div>
<div class="day green right-rounded" role="gridcell" aria-label="24
August">24</div>
<div class="day light-green" role="gridcell" aria-label="25
August">25</div>
<div class="day light-green" role="gridcell" aria-label="26
August">26</div>
<div class="day light-green" role="gridcell" aria-label="27
August">27</div>
<div class="day light-green" role="gridcell" aria-label="28
August">28</div>
<div class="day light-green" role="gridcell" aria-label="29
August">29</div>
<div class="day light-green" role="gridcell" aria-label="30
August">30</div>
<div class="day light-green" role="gridcell" aria-label="31
August">31</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-label="1
September">1</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-label="2
September">2</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-label="3
September">3</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-label="4
September">4</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-label="5
September">5</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-label="6
September">6</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-label="7
September">7</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-label="8
September">8</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-label="9
September">9</div>
<div class="day empty" role="gridcell" aria-disabled="true" aria-
label="10 September">10</div>
</div>
</div>
</section>
</div>
<nav class="bottom-nav" role="navigation" aria-label="Primary">
<div class="nav-item active" tabindex="0" aria-current="page">
<span class="icon-bg" aria-hidden="true">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10
20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
</span>
Home
</div>
<div class="nav-item" tabindex="0">
<span class="icon-bg" aria-hidden="true">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12
3v10.55A4 4 0 1 0 14 17V7h4V3h-6z"/></svg>
</span>
Music
</div>
<div class="nav-item" tabindex="0">
<span class="icon-bg" aria-hidden="true">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12
3C7.03 3 3 7.03 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-4.97-4.03-9-9-9zm0 16a7 7 0 0
1-7-7c0-1.1.3-2.13.82-3.02L15 15.18V19a7 7 0 0 1-3 0zm3.18-4.82L8.82 7.82A7 7 0 0 1
15.18 14.18z"/></svg>
</span>
Podcasts
</div>
</nav>
</body>
</html>
