Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sync. idk

This commit is contained in:
BOT Alex 2024-08-21 20:50:54 +02:00
parent d2a418f4c4
commit 76e855cf5f
2 changed files with 84 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/routes/+page.svelte
View File

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

0
src/routes/Footer.svelte Normal file
View File