<html>
<head>
<style>
.meditation-button {
display: flex;
align-items: center;
}
.btn {
background-color: white;
border: 2px solid #007bff;
color: #007bff;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
outline: none;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.btn:hover {
background-color: #007bff;
color: white;
}
.counter {
margin-left: 10px;
font-size: 16px;
font-weight: bold;
color: #333;
}
.checkbox {
margin-left: 10px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
cursor: pointer;
}
.checkbox:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
margin-right: 10px;
background-color: white;
transition: background-color 0.2s ease-in-out;
}
.checkbox:checked:before {
background-color: #28a745;
}
</style>
</head>
<body>
<div class="meditation-button">
<button class="btn">Meditate</button>
<div class="counter">0 out of 1</div>
<input type="checkbox" class="checkbox" id="checkbox">
</div>
<script>
const button = document.querySelector('.btn');
const counter = document.querySelector('.counter');
const checkbox = document.querySelector('.checkbox');
checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
counter.textContent = '1 out of 1';
} else {
counter.textContent = '0 out of 1';
}
});
</script>
</body>
</html>