Implementing API - WIP frontend

2026-07-26 11:37:03 +02:00
parent e989594b96
commit 8b1d3288c0
12 changed files with 2222 additions and 519 deletions
@@ -3,7 +3,159 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Document</title>
+		<title>Route Explorer - Outdoor Adventures</title>
+		<style>
+			:root {
+				--box-color: rgba(156, 156, 156, 0.21);
+				--box-header: rgb(201, 219, 1);
+				--box-text: rgb(0, 0, 0);
+			}
+
+			* {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+			}
+
+			body {
+				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+				line-height: 1.6;
+				color: #333;
+				background: linear-gradient(135deg, #72da29 0%, #173606 100%);
+				min-height: 100vh;
+			}
+
+			.container {
+				max-width: 1200px;
+				margin: 0 auto;
+				padding: 2rem;
+			}
+
+			header {
+				text-align: center;
+				padding: 3rem 0;
+				color: var(--box-header);
+			}
+
+			h1 {
+				font-size: 3rem;
+				margin-bottom: 1rem;
+			}
+
+			.tagline {
+				font-size: 1.3rem;
+				opacity: 0.9;
+				margin-bottom: 2rem;
+			}
+
+			.hero-section {
+				background: var(--box-color);
+				border-radius: 20px;
+				padding: 3rem;
+				box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+				margin-bottom: 2rem;
+			}
+
+			.features {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+				gap: 2rem;
+				margin: 3rem 0;
+			}
+
+			.feature-card {
+				background: var(--box-color);
+				color: var(--box-text);
+				padding: 2rem;
+				border-radius: 15px;
+				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+				transition: transform 0.3s ease;
+			}
+
+			.feature-icon {
+				font-size: 2.5rem;
+				margin-bottom: 1rem;
+			}
+
+			.feature-title {
+				font-size: 1.5rem;
+				margin-bottom: 0.5rem;
+				color: var(--box-header);
+			}
+
+			.cta-button {
+				display: inline-block;
+				background: var(--box-header);
+				color: var(--box-text);
+				padding: 1rem 2rem;
+				border-radius: 50px;
+				text-decoration: none;
+				font-weight: bold;
+				font-size: 1.1rem;
+				transition: all 0.3s ease;
+			}
+
+			footer {
+				text-align: center;
+				color: white;
+				padding: 2rem 0;
+				margin-top: 3rem;
+				opacity: 0.8;
+			}
+
+			@media (max-width: 768px) {
+				h1 {
+					font-size: 2rem;
+				}
+
+				.hero-section {
+					padding: 2rem;
+				}
+			}
+		</style>
 	</head>
-	<body></body>
+	<body>
+		<div class="container">
+			<header>
+				<h1>Velout</h1>
+				<p class="tagline">Become an adventurer</p>
+			</header>
+
+			<main class="hero-section">
+				<h2>Dont let plans stop you from going on adventures</h2>
+				<p style="margin: 1rem 0; font-size: 1.1rem">
+					Select a starting point, and an end point and get a route for your adventure
+					whether you're bikepacking, hiking, kayaking, etc. or a combination. Customize
+					daily distance required services along the way and other critical considerations
+					on multiday adventures. Get a detailed overview of destinations, attactions and
+					areas you pass through or near.
+				</p>
+				<a href="/map" class="cta-button">Open map</a>
+			</main>
+
+			<section class="features">
+				<div class="feature-card">
+					<div class="feature-icon">🌍️</div>
+					<h3 class="feature-title">Worldwide</h3>
+					<p>
+						Community driven data collection, contribute what you know and access what
+						others knows.
+					</p>
+				</div>
+				<div class="feature-card">
+					<div class="feature-icon">🥈</div>
+					<h3 class="feature-title">Prepare</h3>
+					<p>
+						You can not plan for everything, but you can prepare. Get alternative places
+						for breaks and overnights in you plan and adjust minimum and maximum
+						distance and elevation for one or multiple days.
+					</p>
+				</div>
+			</section>
+
+			<footer>
+				<p>Built with passion for outdoor adventures</p>
+			</footer>
+		</div>
+	</body>
 </html>