sync. idk
This commit is contained in:
BOT Alex
parent
d2a418f4c4
commit
76e855cf5f
|
|
@ -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"/>
|
||||
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" />
|
||||
<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" />
|
||||
<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>
|
||||
<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 {
|
||||
|
|
@ -161,19 +202,20 @@
|
|||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue