update: Mon 02 Dec 2024 08:14:55 PM CET

cophilot · Dec 2, 2024 · 4fc25f7 · 4fc25f7
1 parent 61600d7
commit 4fc25f7
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 9 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -131,6 +131,12 @@ select {
 	margin-right: 20px;
 }
 
+.glass {
+	backdrop-filter: blur(10px);
+	background-color: rgba(0, 0, 0, 0.7);
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
+}
+
 @media (max-width: 800px) {
 	h1 {
 		font-size: 30px;

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -0,0 +1,50 @@
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<script lang="ts">
+	import logo from '$lib/images/logo.png';
+	import { goto } from '$app/navigation';
+
+</script>
+
+<header class="header glass">
+	<img src={logo} alt="" class="logo" />
+	<nav>
+		<i class="bi bi-house"
+		onclick={() => {
+			goto('/');
+		}}
+		></i>
+		<i class="bi bi-info-circle"
+		onclick={() => {
+			goto('/about');
+		}}
+		></i>
+		<i class="bi bi-layout-split"
+		onclick={() => {
+			goto('/compare');
+		}}
+		></i>
+	</nav>
+</header>
+
+<style lang="scss">
+	.header {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: calc(100% - 40px);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 10px 20px;
+		i {
+			cursor: pointer;
+			font-size: 28px;
+			margin: 10px;
+		}
+		.logo {
+			width: 50px;
+			height: 50px;
+		}
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../app.scss';
 	import logo from '$lib/images/logo.png';
+	import Header from '../components/Header.svelte';
 
 	let { children } = $props();
 </script>
@@ -11,8 +12,9 @@
 	<link rel="icon" type="image/png" href={logo} />
 </svelte:head>
 
+<Header />
+
 <div class="app">
-	<img src={logo} alt="" class="logo mb" />
 	{@render children()}
 	<p class="by info">
 		By
@@ -26,6 +28,7 @@
 		flex-direction: column;
 		align-items: center;
 		width: 100vw;
+		margin-top: 70px;
 	}
 	.by {
 		margin: 50px;

diff --git a/src/routes/ComparisonBox.svelte b/src/routes/ComparisonBox.svelte
@@ -21,14 +21,12 @@
 </script>
 
 <div class="comparison-box">
-	<select bind:value={selectedEngine}
-	onchange={() => onEngineChange(selectedEngine)}
-	>
+	<select bind:value={selectedEngine} onchange={() => onEngineChange(selectedEngine)}>
 		{#each allEngines as engine}
 			<option value={engine.stats.name}>{engine.stats.name}</option>
 		{/each}
 	</select>
-	<h1>
+	<h1 class="engine-name">
 		{engine.stats.name}
 	</h1>
 	<img src={engine.stats.imageUrl} alt="" />
@@ -40,6 +38,9 @@
 		width: 48vw;
 		flex-direction: column;
 		align-items: center;
+		.engine-name{
+			position: sticky;
+		}
 		img {
 			width: auto;
 			height: 300px;

diff --git a/src/routes/engine/[name]/+page.svelte b/src/routes/engine/[name]/+page.svelte
@@ -15,10 +15,13 @@
 </svelte:head>
 
 {#if engine}
-	<h1>
-		{engine.stats.name}
-	</h1>
-	<img src={engine.stats.imageUrl} alt="" class="engine-img mb" />
+	<div class="engine-name glass">
+
+		<h1 class="">
+			{engine.stats.name}
+		</h1>
+	</div>
+	<img src={engine.stats.imageUrl} alt="" class="engine-img mb mt" />
 	<StateView myState={engine.stats.country} name="Origin" />
 	<StateView myState={engine.stats.status} name="Status" />
 	<StateView myState={engine.stats.cycle} name="Cycle" />
@@ -53,6 +56,14 @@
 	.engine-img {
 		max-width: 20vw;
 	}
+	.engine-name{
+		position: sticky;
+		top: 70px;
+		width: 100%;
+		h1{
+			margin: 0;
+		}
+	}
 
 	@media (max-width: 800px) {
 		.engine-img {