PHPIndex

This page lists files in the current directory. You can view content, get download/execute commands for Wget, Curl, or PowerShell, or filter the list using wildcards (e.g., `*.sh`).

index.html 
wget 'https://sme10.lists2.roe3.org/mdrone/snowy-christmas-countdown/index.html'
View Content 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>A Snowy Christmas Countdown</title>
  <link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans&family=Parkinsans:wght@300..800&family=Roboto+Slab:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
<div id="snow"></div>
<div class="container">
<h2 id="days-counter">
		<span></span>
		days
		<span></span>
		hours
		<span></span>
		minutes and 
		<span></span>
		seconds<br>until Christmas.
</h2>
	<img id="snowflake" src="https://i.imgur.com/pTInTLf.png" />
</div>
<script src="./script.js"></script>
</body>
</html>
script.js 
wget 'https://sme10.lists2.roe3.org/mdrone/snowy-christmas-countdown/script.js'
View Content 
let snow = document.getElementById("snow");
let daysCounterDiv = document.getElementById("days-counter");

const numOfFlakes = 120;
let snowPositionX = [];
let snowPositionY = [];
let snowSpeedX = [];
let snowSpeedY = [];
let snowRotate = [];
let snowRotation = [];

function makeSnow() {
	for (i = 0; i < numOfFlakes; i++) {
		let snowflake = document.createElement("img");
		snowflake.classList.add("snowflake");
		snowflake.src = "https://i.imgur.com/pTInTLf.png";
		snow.appendChild(snowflake);
		snowPositionX[i] = randomInt(window.innerWidth);
		snowPositionY[i] = -50 - randomInt(100);
		snowSpeedX[i] = (Math.random() * 2 - 1) / 2;
		snowSpeedY[i] = Math.random();
		snowRotate[i] = Math.random() * 2 - 1;
		snowRotation[i] = randomInt(360);
		let avgSpeed = 0.2 + (Math.abs(snowSpeedX[i]) + snowSpeedY[i]) / 2;
		snowflake.style.filter = `brightness(${avgSpeed})`;
		console.log(avgSpeed);
	}
}
makeSnow();

function renderSnow() {
	for (i = 0; i < numOfFlakes; i++) {
		snowPositionX[i] += snowSpeedX[i];
		snowPositionY[i] += snowSpeedY[i];
		snowRotation[i] += snowRotate[i];
		if (snowPositionX[i] < 0) {
			snowPositionX[i] = window.innerWidth;
		}
		if (snowPositionX[i] > window.innerWidth) {
			snowPositionX[i] = 0;
		}
		if (snowPositionY[i] > window.innerHeight) {
			snowPositionY[i] = 0;
		}
		snow.children[i].style.top = `${snowPositionY[i]}px`;
		snow.children[i].style.left = `${snowPositionX[i]}px`;
		snow.children[i].style.transform = `rotate(${snowRotation[i]}deg)`;
	}
}

setInterval(renderSnow, 10);

update();
setInterval(update, 1000);

function update() {
	for (let i = 0; i < 4; i++) {
		daysCounterDiv.children[i].innerText = timeUntilChristmas()[i];
	}
}

// Function to calculate the time until Christmas
function timeUntilChristmas() {
	const today = new Date();
	const currentYear = today.getFullYear();

	// Christmas date for the current year
	let christmas = new Date(currentYear, 11, 25); // December is month 11 (0-indexed)

	// If today is after Christmas, set Christmas to next year
	if (today > christmas) {
		christmas = new Date(currentYear + 1, 11, 25);
	}

	// Calculate the difference in milliseconds
	const msDifference = christmas - today;

	// Calculate days, hours, minutes, and seconds
	const msPerDay = 24 * 60 * 60 * 1000;
	const daysLeft = Math.floor(msDifference / msPerDay);

	const msLeftAfterDays = msDifference % msPerDay;
	const msPerHour = 60 * 60 * 1000;
	const hoursLeft = Math.floor(msLeftAfterDays / msPerHour);

	const msLeftAfterHours = msLeftAfterDays % msPerHour;
	const msPerMinute = 60 * 1000;
	const minutesLeft = Math.floor(msLeftAfterHours / msPerMinute);

	const msLeftAfterMinutes = msLeftAfterHours % msPerMinute;
	const msPerSecond = 1000;
	const secondsLeft = Math.floor(msLeftAfterMinutes / msPerSecond);

	return [daysLeft, hoursLeft, minutesLeft, secondsLeft];
}

function randomInt(max) {
	return Math.floor(Math.random() * max);
}
style.css 
wget 'https://sme10.lists2.roe3.org/mdrone/snowy-christmas-countdown/style.css'
View Content 
body {
	background-color: #022605;
	font-family: "Roboto Slab", serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
}

#snow {
	position: absolute;
	width: 100%;
	height: 100%;
}

.snowflake {
	position: absolute;
	width: 11px;
	height: 12px;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
}

#snowflake {
	width: 160px;
	height: 180px;
	margin: 10px 40px;
	animation: snowflake-twirl 5s cubic-bezier(0.58, -0.42, 0.35, 1.48) forwards
		infinite;
}

@keyframes snowflake-twirl {
	0% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(60deg);
	}
	40% {
		transform: rotate(120deg);
	}
	60% {
		transform: rotate(180deg);
	}
	80% {
		transform: rotate(240deg);
	}
	100% {
		transform: rotate(300deg);
	}
}

#days-counter {
	color: white;
	text-align: center;
	text-shadow: 6px 8px 3px rgba(0, 0, 0, 0.7);
}

#days-counter > span {
	font-size: 4rem;
	color: #ff0000;
}