shift to subdomains

templates/404.html

@@ -0,0 +1,83 @@
+{% 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 %}
+	<a href="{{ url_for('dashboard') }}" class="btn cta-button">
+		🚀 Create {{ domain }}
+	</a>
+	{% else %}
+	<div class="auth-buttons">
+		<p>Start your web hosting journey today!</p>
+		<a href="{{ url_for('register') }}" class="btn">Sign Up</a>
+		<a href="{{ url_for('login') }}" class="btn">Login</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 %}

templates/dashboard.html

@@ -12,11 +12,14 @@
 		<input type="text" name="name" required>
 	</div>
 
-	<!-- Add slug input -->
 	<div class="form-group">
-		<label>Custom URL Slug:</label>
-		<input type="text" name="slug" required pattern="[a-zA-Z0-9\-_]+"
-			title="Letters, numbers, hyphens, and underscores only">
+		<label>Site URL:</label>
+		<div style="display: flex; align-items: center;">
+			<input type="text" name="subdomain" required pattern="[a-zA-Z0-9\-_]+"
+				title="Letters, numbers, hyphens, and underscores only" value="{{ subdomain }}"
+				style="flex: 1;">
+			<span style="margin-left: 5px;">.{{ hostname }}</span>
+		</div>
 	</div>
 
 	<div class="form-group" onclick="document.querySelector('#file-input').click()">
@@ -27,7 +30,6 @@
 		</label>
 	</div>
 
-	<!-- File Preview Section -->
 	<div id="file-preview" class="file-preview">
 		<h5>Selected Files:</h5>
 		<div id="file-grid" class="file-grid"></div>
@@ -69,7 +71,9 @@
 		<!-- Site Actions -->
 		<div class="site-actions">
 			<a href="{{ url_for('edit_site', site_id=site.id) }}" class="btn">Edit</a>
-			<a href="{{ url_for('serve_site_content', slug=site.slug) }}" class="btn" target="_blank">View Site</a>
+			<a href="{{ url_for('serve_site_content', filename='index.html', _external=True, subdomain=site.subdomain) }}">Visit
+				{{ site.name }}
+			</a>
 			<form method="POST" action="{{ url_for('delete_site', site_id=site.id) }}" style="display: inline;">
 				<button type="submit" class="btn btn-danger">Delete Site</button>
 			</form>

templates/edit.html

@@ -4,7 +4,7 @@
 
 {% block content %}
 <h2>Edit {{ site.name }}</h2>
-<a href="{{ url_for('serve_site_content', slug=site.slug) }}" class="btn" target="_blank">View Site</a>
+<a href="{{ url_for('serve_site_content', subdomain=site.subdomain) }}" class="btn" target="_blank">View Site</a>
 
 <div style="margin-bottom: 30px;"></div>