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

{% extends "base.html" %}

{% block content %}
<style>
	.error-container {
		text-align: center;
		padding: 100px 20px;
		min-height: 60vh;
	}

	.error-emoji {
		font-size: 4rem;
		margin-bottom: 1rem;
	}

	.error-message {
		max-width: 600px;
		margin: 0 auto 2rem;
	}

	.cta-button {
		margin-top: 2rem;
	}

	.alien {
		font-size: 5rem;
		margin: 2rem 0;
		animation: float 3s ease-in-out infinite;
	}

	@keyframes float {
		0% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(-20px);
		}

		100% {
			transform: translateY(0px);
		}
	}
</style>

<script>
	document.addEventListener("DOMContentLoaded", () => {
		const emojis = ["👽", "🚀", "🛸", "🌌", "🌠", "🔭", "🪐", "🌍", "✨", "👾"];
		const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];

		const alienElement = document.querySelector(".alien");
		if (alienElement) {
			alienElement.textContent = randomEmoji;
		}
	});
</script>

<div class="error-container">
	<div class="alien">👽</div>
	<h1>Houston, We Have a Problem!</h1>

	<div class="error-message">
		<p>The site you're looking for doesn't exist... yet!</p>
		<p>But don't worry, this corner of the internet is just waiting for your creativity.</p>
	</div>

	{% if current_user.is_authenticated %}
	{% if domain %}
	<a href="{{ url_for('main.dashboard', _external=True) }}" class="btn cta-button">
		🚀 Create {{ domain.split('.')[0]|default("Site", true) }}
	</a>
	{% else %}
	<div class="auth-buttons">
		{% if is_main_domain %}
		<p>Start your web hosting journey today!</p>
		<a href="{{ url_for('main.register', _external=True) }}" class="btn cta-button">Sign Up</a>
		{% else %}
		<p>The page you requested doesn't exist on this site.</p>
		{% endif %}
	</div>
	{% endif %}
	{% else %}
	<div class="auth-buttons">
		<p>Start your web hosting journey today!</p>
		<a href="{{ url_for('main.login', _external=True) }}" class="btn cta-button">Login</a>
		<a href="{{ url_for('main.register', _external=True) }}" class="btn cta-button">Sign Up</a>
	</div>
	{% endif %}

	<div style="margin-top: 3rem;">
		<small>PS: If you were looking for someone else's site, maybe they forgot to launch it! 🚀</small>
	</div>
</div>
{% endblock %}