Update teams.html

tripbltz · May 28, 2024 · fa3a266 · fa3a266
1 parent e295ee8
commit fa3a266
Showing 1 changed file with 76 additions and 1 deletion.
diff --git a/teams.html b/teams.html
@@ -8,7 +8,82 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="stylesheet" href="" />
 	</head>
+	<style>
+		body {
+			margin: 0;
+			padding: 0;
+			overflow: hidden;
+			background: #001f3f; /* Dark background for better visibility of snow */
+			height: 100vh;
+		}
+
+		.snow-container {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			pointer-events: none;
+		}
+
+		.snowflake {
+			position: absolute;
+			top: -10px;
+			background: white;
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			opacity: 0.8;
+			animation: fall linear infinite;
+		}
+
+		@keyframes fall {
+			to {
+				transform: translateY(100vh);
+			}
+		}
+	</style>
 	<body>
-		<script src="" async defer></script>
+		<div class="snow-container">
+			<div style="padding: 60px 60px 60px 60px; color: white" ;>
+				<h1>Jingle Bells Chris Hyam Smells</h1>
+				<p>He smells really bad.</p>
+			</div>
+		</div>
+		<script>
+			document.addEventListener("DOMContentLoaded", function () {
+				const snowContainer = document.querySelector(".snow-container");
+				const numberOfSnowflakes = 100;
+
+				function createSnowflake() {
+					const snowflake = document.createElement("div");
+					snowflake.classList.add("snowflake");
+
+					// Random position for each snowflake
+					snowflake.style.left = Math.random() * 100 + "vw";
+
+					// Random animation duration
+					snowflake.style.animationDuration = Math.random() * 3 + 2 + "s";
+
+					// Random size
+					const size = Math.random() * 5 + 5 + "px";
+					snowflake.style.width = size;
+					snowflake.style.height = size;
+
+					// Random delay
+					snowflake.style.animationDelay = Math.random() * 5 + "s";
+
+					snowContainer.appendChild(snowflake);
+
+					// Remove snowflake after animation ends
+					snowflake.addEventListener("animationend", () => {
+						snowflake.remove();
+					});
+				}
+
+				// Create snowflakes at regular intervals
+				setInterval(createSnowflake, 200);
+			});
+		</script>
 	</body>
 </html>