@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css");
:root {
--text-color: #000;
--sub-text: rgb(144 158 186);
--subtitle: rgb(103, 116, 142);
--orange: rgb(238 146 12);
--font-primary: Geist, sans-serif;
--page-max-width: 1130px;
--bx-sh-1: rgba(218, 226, 237, 0.6) 0px 4px 8px;
}
body {
background: var(--bk-gradient);
width: 100%;
height: 100%;
min-height: 100vh;
color: var(--text-color);
}
p {
font-weight: 100;
}
p span {
display: inline-block;
}
.good {
color: mediumseagreen;
}
.danger {
color: crimson;
}
.highlight {
color: var(--orange);
}
.sub-text {
color: var(--sub-text);
font-family: var(--font-secondary);
font-weight: 500;
}
.subtitle {
color: var(--subtitle);
}
.bento-grid {
--gap: 24px;
padding-inline: 16px;
max-width: var(--page-max-width);
width: 100%;
margin: 0px auto;
display: grid;
--row: minmax(0,1fr);
grid-template-columns: [page-start] var(--row) [prose-start] var(--row) var(--row) var(--row) var(--row) [prose-end] var(--row) [page-end];
grid-gap: var(--gap);
}
.bento-item {
display: flex;
flex-direction: column;
-webkit-box-align: center;
align-items: flex-start;
overflow: hidden;
border-radius: 48px;
padding: 46px 20px;
position: relative;
background: linear-gradient(rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.50) 100%);
box-shadow: var(--bx-sh-1);
&::before {
content: "";
pointer-events: none;
user-select: none;
position: absolute;
inset: 0px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.37));
-webkit-mask: linear-gradient(white, white) content-box content-box, linear-gradient(white, white);
-webkit-mask-composite: xor;
}
}
.canvas-wrapper {
position: relative;
width: 100%;
height: auto;
min-height: 280px;
margin-top: 16px;
}
.item-1 {
grid-column: auto / span 4;
@media screen and (max-width: 991px) {
grid-area: span 1 / span 6;
align-self: stretch;
}
}
.item-2 {
grid-column: auto / span 2;
padding: 48px;
--order: 1;
@media screen and (max-width: 991px) {
grid-area: span 1 / span 6;
padding-inline: 24px;
}
}
.item-3 {
grid-column: auto / span 2;
padding: 48px;
--order: 2;
@media screen and (max-width: 991px) {
grid-area: span 1 / span 6;
padding-inline: 24px;
align-self: stretch;
}
}
.item-4 {
grid-column: 3 / -1;
padding-inline: 0;
@media screen and (max-width: 991px) {
grid-area: span 1 / span 6;
align-self: stretch;
}
}
.item-min {
grid-column: auto / span 2;
padding: 38px 38px;
@media screen and (max-width: 991px) {
grid-area: span 1 / span 6;
align-self: stretch;
}
}
.stat-box {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-block: 1.75rem;
border-bottom: 0.0625rem solid rgb(216 220 224);
& .stat-items {
display: flex;
flex-direction: column;
}
& .stat-icon {
display: grid;
place-items: center;
background: linear-gradient(310deg, rgb(238 146 12), rgb(253 252 33));
width: 40px;
height: 40px;
border-radius: var(--radius-8);
color: #fff;
font-size: 1.8rem;
}
& .stat-title {
color: rgb(103, 116, 142);
font-weight: var(--weight-bold);
}
}
.trophy-item {
display: flex;
align-items: center;
gap: 12px;
padding-top: 1.2rem;
}
.trophy-badge {
width: 3.5rem;
height: 3.5rem;
border-radius: 64px;
display: grid;
place-items: center;
position: relative;
background: linear-gradient(310deg, rgb(238 146 12), rgb(253 252 33));
box-shadow: rgba(255 210 96 / 24%) 0rem 0.25rem 0.375rem -0.0625rem, rgba(255 197 51 / 38%) 0rem 0.125rem 0.25rem -0.0625rem;
&::before {
content: "";
pointer-events: none;
user-select: none;
position: absolute;
inset: 0px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(rgb(253 252 33 / 50%), rgb(238 146 12 / 37%));
-webkit-mask: linear-gradient(white, white) content-box content-box, linear-gradient(white, white);
-webkit-mask-composite: xor;
}
}
.table-wrapper {
width: 100%;
max-height: 200px;
overflow-y: scroll;
position: relative;
}
table {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0px;
& thead {
& tr {
& th {
position: sticky;
top: 0;
background: rgb(0 0 0 / 90%);
backdrop-filter: blur(30px);
display: table-cell;
text-align: center;
padding: 0.5rem 2rem;
color: #fff;
font-size: 1.3rem;
font-family: var(--font-secondary);
font-weight: 500;
&:not(:first-child){
text-align: left;
}
&:first-child {
width: 10%;
padding-inline: 3.5rem;
}
}
}
}
& tbody {
display: table-row-group;
& tr {
color: inherit;
display: table-row;
vertical-align: middle;
outline: 0px;
&:hover {
background: #ffffff85;
}
& td {
font-size: 1.3rem;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.01071em;
display: table-cell;
vertical-align: inherit;
text-align: center;
color: var(--subtitle);
padding: 1.3rem 2rem;
border-bottom: 0.0625rem solid rgb(216 220 224);
&:not(:first-child){
text-align: left;
}
&:first-child {
width: 10%;
padding-inline: 3.5rem;
}
}
}
}
}
import chartMinJs from "https://esm.sh/chart.min.js";
document.addEventListener('DOMContentLoaded', function() {
const $avg = document.getElementById("avg");
let data = [1, 1, 1.2, 1, 1.7, 1.5];
let average = data.reduce((sum, value) => sum + value, 0) / data.length;
$avg.innerHTML = `${average.toFixed(1)} hrs`;
let chart;
const ctx = document.getElementById('chart').getContext('2d');
const ctx2 = document.getElementById('chart2').getContext('2d');
let colorA = "251 189 8";
let colorB = "238 146 12";
let colorC = "253 252 33";
var gradient = ctx.createLinearGradient(0, 0, 0, 175);
gradient.addColorStop(1, 'rgb(253 252 33 / 0%)');
gradient.addColorStop(0, 'rgb(238 146 12 / 40%)');
Chart.defaults.font.size = 10;
chart = new Chart(ctx, {
type: "line",
data: {
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6"],
datasets: [
{
label: "Your BMI",
data: [28.3, 28, 27, 27.6, 25, 25.6],
backgroundColor : gradient,
borderColor: `rgb(${colorA})`,
borderWidth: 2,
pointBorderWidth: 5,
pointBackgroundColor: `rgb(${colorA})`,
pointHoverBackgroundColor: `rgb(${colorA})`,
pointBorderColor: 'rgb(' + colorA + '/' + '40%)',
pointHoverBorderColor: 'rgb(' + colorC + '/' + '40%)',
pointHoverRadius: 5,
fill: 'origin',
tension: 0.25,
}]
},
options: {
maintainAspectRatio: false,
color: "rgb(144 158 186)",
scales: {
y: {
beginAtZero: true,
stacked: true,
grid: {
display: true,
color: "rgb(216 220 224)",
lineWidth: 1,
},
ticks: {
color: "rgb(144 158 186)",
padding: 8
},
border: {
display: false,
dash: [6, 6],
dashOffset: -4,
}
},
x: {
grid: {
display: false
},
border: {
display: false
},
ticks: {
color: "rgb(144 158 186)",
padding: 10
},
}
},
}
});
chart = new Chart(ctx2, {
type: "bar",
data: {
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6"],
datasets: [
{
label: "Your Movement (hrs)",
data: [1, 1, 1.2, 1, 1.7, 1.5],
backgroundColor : gradient,
borderColor: `rgb(${colorA})`,
borderWidth: 2,
pointBorderWidth: 5,
pointBackgroundColor: `rgb(${colorA})`,
pointHoverBackgroundColor: `rgb(${colorA})`,
pointBorderColor: 'rgb(' + colorA + '/' + '40%)',
pointHoverBorderColor: 'rgb(' + colorC + '/' + '40%)',
pointHoverRadius: 5,
fill: 'origin',
tension: 0.25,
}]
},
options: {
maintainAspectRatio: false,
color: "rgb(144 158 186)",
scales: {
y: {
beginAtZero: true,
stacked: true,
grid: {
display: true,
color: "rgb(216 220 224)",
lineWidth: 1,
},
ticks: {
color: "rgb(144 158 186)",
padding: 8
},
border: {
display: false,
dash: [6, 6],
dashOffset: -4,
}
},
x: {
grid: {
display: false
},
border: {
display: false
},
ticks: {
color: "rgb(144 158 186)",
padding: 10
},
}
},
}
});
});
