static-site-hosting/app/templates/home.html

{% 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;
		padding: 60px 20px;
		background: var(--card-bg);
		color: var(--text-color);
	}

	header h1 {
		font-size: 2.5rem;
		margin-bottom: 10px;
	}

	header p {
		font-size: 1.2rem;
		color: var(--text-color);
	}

	.main-container {
		max-width: 900px;
		margin: 40px auto;
		padding: 20px;
		text-align: center;
	}

	.feature-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 20px;
	}

	.feature {
		background: var(--card-bg);
		border-radius: 8px;
		padding: 20px;
		margin: 10px;
		width: 260px;
		text-align: center;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
	}

	.feature h3 {
		color: var(--text-color);
		margin-bottom: 10px;
	}

	.cta-section {
		margin-top: 40px;
		text-align: center;
	}

	footer {
		margin-top: 40px;
		padding: 20px;
		background: var(--nav-bg);
		text-align: center;
		color: var(--nav-text);
	}

	@media (max-width: 768px) {
		header {
			padding: 40px 10px;
		}

		.main-container {
			margin: 20px auto;
			padding: 10px;
		}

		.feature-list {
			flex-direction: column;
			align-items: center;
		}

		.feature {
			width: 90%;
			max-width: 300px;
			margin: 10px auto;
		}

		footer {
			padding: 15px;
			font-size: 0.9rem;
		}
	}
</style>

<header>
	<h1>🚀 ION Static Site Hosting</h1>
	<p>Host and share your static sites effortlessly.</p>
</header>

<div class="main-container">
	<h2>Why Choose Us?</h2>
	<p>Whether you’re a developer, designer, or just need to showcase your work, we make it easy to host and share
		static sites.</p>

	<div class="feature-list">
		<div class="feature">
			<h3>⚡ Instant Hosting</h3>
			<p>Upload your static files and get a live site in seconds.</p>
		</div>
		<div class="feature">
			<h3>🌙 Dark Mode</h3>
			<p>A sleek, modern interface that's easy on the eyes.</p>
		</div>
		<div class="feature">
			<h3>✏️ Edit in Browser</h3>
			<p>Make changes directly to your site with our built-in editor.</p>
		</div>
		<div class="feature">
			<h3>🔒 Secure & Private</h3>
			<p>Your data stays yours, no hidden tracking or ads.</p>
		</div>
		<div class="feature">
			<h3>📂 Simple File Management</h3>
			<p>Easily organize and update your projects.</p>
		</div>
		<div class="feature">
			<h3>🚀 Blazing Fast</h3>
			<p>Minimal setup, maximum performance.</p>
		</div>
	</div>

	<div class="cta-section">
		<a href="{{ url_for('main.register') }}" class="btn">Get Started Now</a>
		<p>No signup required. Upload your first site and go live instantly!</p>
	</div>
</div>

<footer>
	<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 %}