added better home page

app/templates/home.html

@@ -1,7 +1,115 @@
 {% extends "base.html" %}
 
 {% block content %}
+<div class="floating-balls"></div>
 
+<style>
+	:root {
+		--ball-color: #c89effc2;
+	}
+
+	[data-theme="dark"] {
+		--ball-color: #8a2be2;
+	}
+
+	body {
+		font-family: 'Arial', sans-serif;
+		line-height: 1.6;
+		background-color: var(--bg-color);
+		color: var(--text-color);
+		padding: 20px;
+		transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
+		animation: fadeIn var(--fade-duration) ease-out;
+	}
+
+	/* Container for the floating balls */
+	.floating-balls {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		z-index: -1;
+		overflow: hidden;
+	}
+
+	/* Floating ball style and animation */
+	.floating-ball {
+		position: absolute;
+		border-radius: 50%;
+		background-color: var(--ball-color);
+		opacity: 0.6;
+		bottom: -60px;
+		animation: floatUp linear infinite;
+	}
+
+	.pop {
+		animation: pop 0.5s forwards;
+	}
+
+	/* Keyframe animations */
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes bounce {
+
+		0%,
+		20%,
+		50%,
+		80%,
+		100% {
+			transform: translateY(0);
+		}
+
+		40% {
+			transform: translateY(-10px);
+		}
+
+		60% {
+			transform: translateY(-5px);
+		}
+	}
+
+	@keyframes floatUp {
+		0% {
+			transform: translateY(0) scale(0.8);
+			opacity: 0;
+		}
+
+		30% {
+			opacity: 0.6;
+		}
+
+		100% {
+			transform: translateY(-110vh) scale(1.2);
+			opacity: 0;
+		}
+	}
+
+	@keyframes pop {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+
+		100% {
+			transform: scale(1.5);
+			opacity: 0;
+		}
+	}
+</style>
+
+<!-- Existing content -->
 <style>
 	header {
 		text-align: center;
@@ -108,7 +216,47 @@
 </div>
 
 <footer>
-	<p>&copy; 2024 ION Static Hosting. All rights reserved.</p>
+	<p>&copy; 2025 ION606. All rights reserved.</p>
 </footer>
 
+<!-- JavaScript to create balls and add "pop" effects -->
+<script>
+	const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+	document.addEventListener("DOMContentLoaded", async () => {
+		const container = document.querySelector('.floating-balls');
+
+		// Generate a random number of balls between 10 and 30
+		const ballCount = Math.floor(Math.random() * 21) + 10;
+		for (let i = 0; i < ballCount; i++) {
+			const ball = document.createElement("div");
+			ball.classList.add("floating-ball");
+
+			await wait(Math.random() * 2000)
+
+			// Randomize properties
+			const size = 30 + Math.random() * 40;
+			ball.style.width = size + "px";
+			ball.style.height = size + "px";
+			ball.style.left = Math.random() * 100 + "%";
+			ball.style.animationDuration = (10 + Math.random() * 10) + "s";
+			ball.style.animationDelay = Math.random() * 5 + "s";
+
+			container.appendChild(ball);
+		}
+
+		// random pop every 2 seconds
+		setInterval(() => {
+			const balls = document.querySelectorAll('.floating-ball');
+			if (balls.length) {
+				const randomBall = balls[Math.floor(Math.random() * balls.length)];
+				randomBall.classList.add('pop');
+				setTimeout(() => {
+					randomBall.classList.remove('pop');
+				}, 500);
+			}
+		}, 2000);
+	});
+</script>
+
 {% endblock %}