zaenemist/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Love Notes</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>6th of August 2025</h1>
        <p>Happy 3rd Monthsary Baobao!!</p>
    </header>
    <div class="container">
        <ul></ul>
        <div class="controls">
            <button onclick="adjustDay(-1)">▲</button>
            <button onclick="adjustDay(1)">▼</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

## monthsary.markdown

      
    Raw
  

              monthsary.markdown
            
          
    monthsary

A Pen by zaenemist on CodePen.
License.

  
## script.js
const febHolidays = [
    "Dear Maria, Happy 3rd Monthsary",
    "First of all I wanna say",
    "Thank you for being there for me",
    "Thank you for choosing to stay, even on the hard days ",
    "My stress reliever kahit na inaaway mo ko.",
    "No matter how far",
    "No matter what the distance is.",
    "I will be with you",
    "I know I've made mistakes",
    "I know I've hurt you, even if I never meant to",
    "And I'm truly sorry for that",
    "But I want you to know that I'm learning from it",
    "Because you deserve a love that shows up, grows, that stays",
    "I'll always do my best to keep you happy and feel loved.",
    "Kahit na minsan inaaway kita.",
    "MAHAL NA MAHAL KITA Ma. Bernadette Martija",
    "And trust me I dont want anyone else.",
    "Wala akong kabet",
    "IKAW NGA LANG GUSTO KO ANO BA",
    "3 months in, And I still get excited just thinkin about you",
    "I still smile at random moments because of you.(sanaol baliw)",
    "Mahal na mahal kita Ma. Bernadette Martija",
    "Mamahalin kita.. Ngayon, Bukas, at Magpakailanman",
    "Out of everyone you could've loved, you chose me",
    "You're not perfect, and neither am I but we're trying.",
    "And that's something beautiful",
    "My Wife",
    "I'll keep on loving you.",
    "I'll keep choosing you.",
    "So here's to us: to growing, to healing, and to love better each time",
    "I Love You More than words can say."
];

const ulEl = document.querySelector("ul");
const d = new Date();
let daynumber = d.getMonth() === 1 ? d.getDate() - 1 : 0; // Assumes February; adjust if needed
let activeIndex = daynumber;
const rotate = -360 / febHolidays.length;

function init() {
    febHolidays.forEach((holiday, idx) => {
        const liEl = document.createElement("li");
        liEl.style.setProperty("--day_idx", idx);
        liEl.innerHTML = `<time datetime="2022-02-${idx + 1}">${idx + 1}</time><span>${holiday}</span>`;
        ulEl.appendChild(liEl);
    });
    ulEl.style.setProperty("--rotateDegrees", rotate);
    adjustDay(0);
}

function adjustDay(nr) {
    daynumber += nr;
    ulEl.style.setProperty("--currentDay", daynumber);
    const activeEl = document.querySelector("li.active");
    if (activeEl) activeEl.classList.remove("active");

    activeIndex = (activeIndex + nr + febHolidays.length) % febHolidays.length;
    const newActiveEl = document.querySelector(`li:nth-child(${activeIndex + 1})`);

    if (newActiveEl) {
        document.body.style.backgroundColor = window.getComputedStyle(newActiveEl).backgroundColor;
        newActiveEl.classList.add("active");
    } else {
        console.error('No element found for the calculated index:', activeIndex);
    }
}

// Ensure DOM is fully loaded before executing script
document.addEventListener('DOMContentLoaded', function () {
    init();

    window.addEventListener("keydown", (e) => {
        switch (e.key) {
            case "ArrowUp":
                adjustDay(-1);
                break;
            case "ArrowDown":
                adjustDay(1);
                break;
            default:
                return;
        }
    });
});

## style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: sans-serif;
    background-color: rgb(1, 1, 1);
    background-image: linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5));
    color: white;
    transition: background-color 500ms ease;
}
/* header */
header {
    position: absolute;
    z-index: 999;
    text-align: center;
    top: 0rem;
    padding: 1rem;
    background: inherit;
}
.container {
    position: relative;
    width: min(400px, 100%);
}
/* holidays */
ul {
    list-style: none;
    width: 100%;
    height: 50%;
    position: relative;
    perspective: 900px;
    transform-style: preserve-3d;
}
ul > li {
    position: absolute;
    left: 50%;
    top: calc(50% - 1.2rem);
    --rotateX: calc(
      1deg * var(--rotateDegrees) * calc(var(--day_idx) - var(--currentDay))
    );
    transform: rotateX(var(--rotateX)) translateZ(190px) translateX(-50%)
      scale(var(--scale, 1));
    --hue: calc(var(--rotateDegrees) * var(--day_idx));
    background-color: hsl(var(--hue), 50%, var(--lightness, 50%));
    width: 70%;
    color: white;
    display: grid;
    grid-template-columns: 2.5rem auto;
    height: 2.4rem;
    transition: transform 500ms ease, background-color 500ms ease;
}
ul > li.active {
    --lightness: 30%;
    --scale: 1.1;
}
ul > li > * {
    display: grid;
    align-items: center;
}
li > time {
    text-align: center;
}
li > span {
    padding-inline-start: 0.5rem;
    color: white;
}
/* controls */
.controls {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.controls button {
    width: 1.5rem;
    aspect-ratio: 1;
    font-size: 0.9rem;
    color: white;
    border: none;
    background: #39657e;
    display: flex;
    place-items: center;
}
.controls button:hover,
.controls button:focus {
    background: rgb(6, 60, 131);
}
.controls button:active {
    transform: scale(0.9);
}
.border {
    width: 96%;
    height: 3em;
    border: 1px solid white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Love Notes</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<header>
	<h1>6th of August 2025</h1>
	<p>Happy 3rd Monthsary Baobao!!</p>
	</header>
	<div class="container">
	<ul></ul>
	<div class="controls">
	<button onclick="adjustDay(-1)">▲</button>
	<button onclick="adjustDay(1)">▼</button>
	</div>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	const febHolidays = [
	"Dear Maria, Happy 3rd Monthsary",
	"First of all I wanna say",
	"Thank you for being there for me",
	"Thank you for choosing to stay, even on the hard days ",
	"My stress reliever kahit na inaaway mo ko.",
	"No matter how far",
	"No matter what the distance is.",
	"I will be with you",
	"I know I've made mistakes",
	"I know I've hurt you, even if I never meant to",
	"And I'm truly sorry for that",
	"But I want you to know that I'm learning from it",
	"Because you deserve a love that shows up, grows, that stays",
	"I'll always do my best to keep you happy and feel loved.",
	"Kahit na minsan inaaway kita.",
	"MAHAL NA MAHAL KITA Ma. Bernadette Martija",
	"And trust me I dont want anyone else.",
	"Wala akong kabet",
	"IKAW NGA LANG GUSTO KO ANO BA",
	"3 months in, And I still get excited just thinkin about you",
	"I still smile at random moments because of you.(sanaol baliw)",
	"Mahal na mahal kita Ma. Bernadette Martija",
	"Mamahalin kita.. Ngayon, Bukas, at Magpakailanman",
	"Out of everyone you could've loved, you chose me",
	"You're not perfect, and neither am I but we're trying.",
	"And that's something beautiful",
	"My Wife",
	"I'll keep on loving you.",
	"I'll keep choosing you.",
	"So here's to us: to growing, to healing, and to love better each time",
	"I Love You More than words can say."
	];

	const ulEl = document.querySelector("ul");
	const d = new Date();
	let daynumber = d.getMonth() === 1 ? d.getDate() - 1 : 0; // Assumes February; adjust if needed
	let activeIndex = daynumber;
	const rotate = -360 / febHolidays.length;

	function init() {
	febHolidays.forEach((holiday, idx) => {
	const liEl = document.createElement("li");
	liEl.style.setProperty("--day_idx", idx);
	liEl.innerHTML = `<time datetime="2022-02-${idx + 1}">${idx + 1}</time><span>${holiday}</span>`;
	ulEl.appendChild(liEl);
	});
	ulEl.style.setProperty("--rotateDegrees", rotate);
	adjustDay(0);
	}

	function adjustDay(nr) {
	daynumber += nr;
	ulEl.style.setProperty("--currentDay", daynumber);
	const activeEl = document.querySelector("li.active");
	if (activeEl) activeEl.classList.remove("active");

	activeIndex = (activeIndex + nr + febHolidays.length) % febHolidays.length;
	const newActiveEl = document.querySelector(`li:nth-child(${activeIndex + 1})`);

	if (newActiveEl) {
	document.body.style.backgroundColor = window.getComputedStyle(newActiveEl).backgroundColor;
	newActiveEl.classList.add("active");
	} else {
	console.error('No element found for the calculated index:', activeIndex);
	}
	}

	// Ensure DOM is fully loaded before executing script
	document.addEventListener('DOMContentLoaded', function () {
	init();

	window.addEventListener("keydown", (e) => {
	switch (e.key) {
	case "ArrowUp":
	adjustDay(-1);
	break;
	case "ArrowDown":
	adjustDay(1);
	break;
	default:
	return;
	}
	});
	});
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	overflow: hidden;
	font-family: sans-serif;
	background-color: rgb(1, 1, 1);
	background-image: linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5));
	color: white;
	transition: background-color 500ms ease;
	}
	/* header */
	header {
	position: absolute;
	z-index: 999;
	text-align: center;
	top: 0rem;
	padding: 1rem;
	background: inherit;
	}
	.container {
	position: relative;
	width: min(400px, 100%);
	}
	/* holidays */
	ul {
	list-style: none;
	width: 100%;
	height: 50%;
	position: relative;
	perspective: 900px;
	transform-style: preserve-3d;
	}
	ul > li {
	position: absolute;
	left: 50%;
	top: calc(50% - 1.2rem);
	--rotateX: calc(
	1deg * var(--rotateDegrees) * calc(var(--day_idx) - var(--currentDay))
	);
	transform: rotateX(var(--rotateX)) translateZ(190px) translateX(-50%)
	scale(var(--scale, 1));
	--hue: calc(var(--rotateDegrees) * var(--day_idx));
	background-color: hsl(var(--hue), 50%, var(--lightness, 50%));
	width: 70%;
	color: white;
	display: grid;
	grid-template-columns: 2.5rem auto;
	height: 2.4rem;
	transition: transform 500ms ease, background-color 500ms ease;
	}
	ul > li.active {
	--lightness: 30%;
	--scale: 1.1;
	}
	ul > li > * {
	display: grid;
	align-items: center;
	}
	li > time {
	text-align: center;
	}
	li > span {
	padding-inline-start: 0.5rem;
	color: white;
	}
	/* controls */
	.controls {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	}
	.controls button {
	width: 1.5rem;
	aspect-ratio: 1;
	font-size: 0.9rem;
	color: white;
	border: none;
	background: #39657e;
	display: flex;
	place-items: center;
	}
	.controls button:hover,
	.controls button:focus {
	background: rgb(6, 60, 131);
	}
	.controls button:active {
	transform: scale(0.9);
	}
	.border {
	width: 96%;
	height: 3em;
	border: 1px solid white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}