|
|
|
@ -8,6 +8,8 @@ import {
|
|
|
|
|
JSX,
|
|
|
|
|
useContext,
|
|
|
|
|
splitProps,
|
|
|
|
|
createSignal,
|
|
|
|
|
Show,
|
|
|
|
|
} from "solid-js";
|
|
|
|
|
import LufraiLogo from "~icons/custom/lufrai-logo";
|
|
|
|
|
import AppIcon from "~icons/custom/icon";
|
|
|
|
@ -22,6 +24,8 @@ import PrivacyIcon from "~icons/noto/princess";
|
|
|
|
|
import AgileIcon from "~icons/noto/person-bouncing-ball";
|
|
|
|
|
import ResultIcon from "~icons/noto/chequered-flag";
|
|
|
|
|
import HugIcon from "~icons/noto/hugging-face";
|
|
|
|
|
import VideoIcon from "~icons/carbon/video-filled";
|
|
|
|
|
import CloseIcon from "~icons/carbon/close-outline";
|
|
|
|
|
import Modal, { ModalCloseButton } from "./Modal";
|
|
|
|
|
import { LocalStoreContext } from "~/stores";
|
|
|
|
|
import createAccordion from "./Accordion";
|
|
|
|
@ -63,6 +67,7 @@ const WelcomeModal: Component = (props) => {
|
|
|
|
|
const isOpen = createMemo(() => {
|
|
|
|
|
return localStateMounted() && localState.showWelcome;
|
|
|
|
|
});
|
|
|
|
|
const [showTrailer, setShowTrailer] = createSignal(false);
|
|
|
|
|
|
|
|
|
|
onMount(function () {
|
|
|
|
|
let adjectives = [
|
|
|
|
@ -198,7 +203,37 @@ const WelcomeModal: Component = (props) => {
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mt-24 text-base grid grid-cols-3 lg:grid-cols-4 text-center gap-y-3 md:gap-y-5 gap-x-2 lg:gap-x-8 items-center justify-center">
|
|
|
|
|
<Show when={showTrailer()}>
|
|
|
|
|
{() => (
|
|
|
|
|
<div class="absolute top-0 left-0 h-full w-full flex flex-col justify-center items-center gap-8 bg-black backdrop-blur bg-opacity-90 [@supports(backdrop-filter:blur(0))]:bg-opacity-70 z-10">
|
|
|
|
|
<video
|
|
|
|
|
controls
|
|
|
|
|
autoplay
|
|
|
|
|
onended={() => setShowTrailer(false)}
|
|
|
|
|
>
|
|
|
|
|
<source src="/RaeppliTrailer.mp4" type="video/mp4" />
|
|
|
|
|
</video>
|
|
|
|
|
<button
|
|
|
|
|
class="btn btn-accent btn-xl gap-2"
|
|
|
|
|
onClick={() => setShowTrailer(false)}
|
|
|
|
|
>
|
|
|
|
|
<CloseIcon />
|
|
|
|
|
Schliessen
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</Show>
|
|
|
|
|
|
|
|
|
|
<div class="mt-24 text-base grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 text-center gap-y-3 md:gap-y-5 gap-x-2 lg:gap-x-8 items-center justify-center">
|
|
|
|
|
<button
|
|
|
|
|
class="shadow-md btn btn-secondary hover:ring-2 ring-offset-2 ring-secondary bg-pink-600 hover gap-2 whitespace-normal flex-nowrap"
|
|
|
|
|
onClick={() => setShowTrailer(true)}
|
|
|
|
|
>
|
|
|
|
|
<VideoIcon />
|
|
|
|
|
<span>
|
|
|
|
|
Trailer <span class="hidden xl:inline">anschauen</span>
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<a
|
|
|
|
|
class="link text-secondary-focus hover:text-secondary"
|
|
|
|
|
href="#welcome-quickstart"
|
|
|
|
@ -955,8 +990,12 @@ const WelcomeModal: Component = (props) => {
|
|
|
|
|
Loslegen
|
|
|
|
|
</button>
|
|
|
|
|
<div
|
|
|
|
|
style={{ animation: "bounce 1.5s infinite;" }}
|
|
|
|
|
class="animate-bounce w-full text-sm font-bold lg:hidden bg-red-300 ring-2 ring-offset-2 ring-error text-error-content rounded p-3 shadow-2xl flex items-center justify-center gap-3"
|
|
|
|
|
style={{ animation: !showTrailer() ? "bounce 1.5s infinite;" : "" }}
|
|
|
|
|
classList={{
|
|
|
|
|
"w-full text-sm font-bold lg:hidden bg-red-300 ring-2 ring-offset-2 ring-error text-error-content rounded p-3 shadow-2xl flex items-center justify-center gap-3":
|
|
|
|
|
true,
|
|
|
|
|
"animate-bounce": !showTrailer(),
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<WarningIcon /> Bitte verwende einen Laptop oder Computer mit einer
|
|
|
|
|
Mindestbreite von 1024 Pixel!
|
|
|
|
|