From 76e855cf5f376d1557b472845fa3bd1ee77c57ce Mon Sep 17 00:00:00 2001
From: BOT Alex <44818698+MagicBOTAlex@users.noreply.github.com>
Date: Wed, 21 Aug 2024 20:50:54 +0200
Subject: [PATCH] sync. idk

---
 src/routes/+page.svelte  | 126 ++++++++++++++++++++++++++-------------
 src/routes/Footer.svelte |   0
 2 files changed, 84 insertions(+), 42 deletions(-)
 create mode 100644 src/routes/Footer.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b962cde..23e3014 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import Counter from './Counter.svelte';
-	import welcome from '$lib/images/svelte-welcome.webp';
-	import welcome_fallback from '$lib/images/svelte-welcome.png';
-	import differencialBackgroundVideo from '$lib/videos/DifferentialEquation.gif';
+	import Counter from "./Counter.svelte";
+	import welcome from "$lib/images/svelte-welcome.webp";
+	import welcome_fallback from "$lib/images/svelte-welcome.png";
+	import differencialBackgroundVideo from "$lib/videos/DifferentialEquation.gif";
 	import "tailwindcss/tailwind.css";
-	import ConsoleText from './console/ConsoleText.svelte';
+	import ConsoleText from "./console/ConsoleText.svelte";
 	import { OpenBirch } from "$lib/OpenBirchService";
 
 	const sleep = (ms: number) => {
@@ -13,14 +13,17 @@
 
 	let isAutoTyping = true;
 	let textField: HTMLInputElement;
-	async function startTyping(){
+	async function startTyping() {
 		for (var example of exampleInputs) {
-			for (let charecter of example){
+			for (let charecter of example) {
 				if (!isAutoTyping) break;
 				textField.value += charecter;
 				await sleep(200);
 			}
-			try {OpenBirch.sendCommand(textField.value);} catch (_) {}
+			await sleep(500);
+			try {
+				OpenBirch.sendCommand(textField.value);
+			} catch (_) {}
 			resetFeild();
 		}
 	}
@@ -42,7 +45,7 @@
 		"d/dx x",
 		"d/dx x^2",
 		"d/dx 69*x^2",
-		"d/dx sin(x)*x^2"
+		"d/dx sin(x)*x^2",
 	];
 
 	async function resetFeild() {
@@ -54,12 +57,12 @@
 		window.location.href = "/console";
 	}
 
-	import { onMount } from 'svelte';
-    import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
+	import { onMount } from "svelte";
+	import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
 	onMount(() => {
 		resetFeild();
 		startTyping();
-	})
+	});
 </script>
 
 <svelte:head>
@@ -67,36 +70,55 @@
 	<meta name="description" content="Svelte demo app" />
 </svelte:head>
 
-<section>
-	<Parallax sections={1.5} config={{stiffness: 0.2, damping: 0.3}}>
-		<ParallaxLayer rate={0} span={0.6}>
-			<div class="relative fill">
-				<img class="backgroundVideoContainer" src="{differencialBackgroundVideo}" alt="Background"/>
-				<div class="top-0 left-0 w-full py-16 absolute">
+<div>
+	<Parallax sections={1.5} config={{ stiffness: 0.2, damping: 0.3 }}>
+		<ParallaxLayer offset={0} rate={0} span={0.6}>
+			<div class="relative h-full fill">
+				<img
+					class="backgroundVideoContainer"
+					src={differencialBackgroundVideo}
+					alt="Background"
+				/>
+				<div class="top-0 left-0 w-full h-full absolute fill place-content-center">
 					<div class="centerAndLimit double_centered_boxes">
 						<div>
 							<h1 class="text-neutral-content">
-								Welcome to<br/>
+								Welcome to<br />
 								<b class="text-primary">OpenBirch</b>
 							</h1>
 						</div>
 						<div></div>
 						<div class="join join-vertical pt-10">
 							<div class="join-item bg-primary-content">
-								<div class="h-40 overflow-auto flex flex-col-reverse p-4">
-									<ConsoleText/>
+								<div
+									class="h-40 overflow-auto flex flex-col-reverse p-4"
+								>
+									<ConsoleText />
 								</div>
 							</div>
-							<div class="input join-item input-bordered flex items-center grow gap-2" style="cursor: text;">
+							<div
+								class="input join-item input-bordered flex items-center grow gap-2"
+								style="cursor: text;"
+							>
 								<div class="w-full">
 									<div class="flex">
 										<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 24 24"
-										class="h-8 w-8 opacity-70 block m-auto fill-primary">
-										<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 24 24"
+											class="h-8 w-8 opacity-70 block m-auto fill-primary"
+										>
+											<path
+												d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+											/>
 										</svg>
-										<input autofocus type="text" class="text-primary grow" placeholder="" bind:this={textField} on:click={onInputClicked}/>
+										<input
+											autofocus
+											type="text"
+											class="text-primary grow"
+											placeholder=""
+											bind:this={textField}
+											on:click={onInputClicked}
+										/>
 									</div>
 								</div>
 							</div>
@@ -110,26 +132,45 @@
 				<div class="card lg:card-side bg-base-100 sylvesterTest">
 					<div class="card-body shadow-xl">
 						<h1 class="text-primary">What is it?</h1>
-						<p class="text-neutral-content">I love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love   </p>
+						<p class="text-neutral-content">
+							I love the colour of yellow and I also love the
+							colour of yellow and I also love the colour of
+							yellow and I also love the colour of yellow and I
+							also love the colour of yellow and I also love the
+							colour of yellow and I also love the colour of
+							yellow and I also love the colour of yellow and I
+							also love the colour of yellow and I also love
+						</p>
 					</div>
 					<figure>
-						<img src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp" alt="Album" />
-					</figure>				  
+						<img
+							src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp"
+							alt="Album"
+						/>
+					</figure>
 				</div>
 
 				<div class="card lg:card-side bg-base-100 sylvesterTest">
 					<figure>
-						<img src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp" alt="Album" />
-					</figure>	
+						<img
+							src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp"
+							alt="Album"
+						/>
+					</figure>
 					<div class="card-body shadow-xl">
 						<h1 class="text-primary">What is our mission?</h1>
-						<p class="text-neutral-content">I love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love  </p>
-					</div>		  
+						<p class="text-neutral-content">
+							I love the colour of yellow and I also love the
+							colour of yellow and I also love the colour of
+							yellow and I also love the colour of yellow and I
+							also love
+						</p>
+					</div>
 				</div>
 			</div>
 		</ParallaxLayer>
 	</Parallax>
-</section>
+</div>
 
 <style lang="scss">
 	.double_centered_boxes {
@@ -141,13 +182,13 @@
 		max-width: 64rem;
 		min-width: 32rem;
 		width: 50%;
-  		margin: 0 auto;
+		margin: 0 auto;
 		// border: red 1mm solid;
 	}
 
 	.flex-container {
-	display: flex;
-	flex-direction: column;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.sylvesterTest {
@@ -155,25 +196,26 @@
 		min-width: 32rem;
 		width: 100%;
 		padding: 50px;
-  		margin: 0 auto;
+		margin: 0 auto;
 
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 	}
 
-	.backgroundVideoContainer{
+	.backgroundVideoContainer {
 		filter: blur(10px);
+		overflow: hidden;
 	}
 
 	.fill {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		overflow: hidden
+		overflow: hidden;
 	}
 	.fill img {
 		flex-shrink: 0;
 		min-width: 100%;
-		min-height: 100%
+		min-height: 100%;
 	}
 </style>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
new file mode 100644
index 0000000..e69de29