From e65b6c97c62fa628f7bd369b4ea2ffc4013356ce Mon Sep 17 00:00:00 2001 From: BOTAlex <zhentao2004@gmail.com> Date: Sat, 24 May 2025 05:12:04 +0200 Subject: [PATCH] removed the scroll thing, because i'm too lazy to continue for a while --- src/routes/+layout.svelte | 546 +++++++++++++++++---------------- src/routes/comps/Zooter.svelte | 436 +++++++++++++------------- 2 files changed, 501 insertions(+), 481 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 5667969..336effd 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,291 +1,319 @@ <!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements --> <script lang="ts"> - import "../app.css"; - import { fly } from 'svelte/transition'; - import MediaQuery from 'svelte-media-queries'; - import { Dices } from "@lucide/svelte"; - let hideOnPrint: boolean; + import "../app.css"; + import { fly } from "svelte/transition"; + import MediaQuery from "svelte-media-queries"; + import { Dices } from "@lucide/svelte"; + let hideOnPrint: boolean; - let { children } = $props(); + let { children } = $props(); - import DeprivedLogo from "$lib/images/DeprivedLogo.svelte"; - import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte"; + import DeprivedLogo from "$lib/images/DeprivedLogo.svelte"; + import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte"; - const footerCollapseThreshold : string = '1000px'; - const headerCollapseThreshold : string = '1000px'; - let footerCollapse : boolean; - let isMobile : boolean = $state(false); + const footerCollapseThreshold: string = "1000px"; + const headerCollapseThreshold: string = "1000px"; + let footerCollapse: boolean; + let isMobile: boolean = $state(false); - let navbarHidden : boolean = $state(true); + let navbarHidden: boolean = $state(true); - function resetNavBar() { - navbarHidden = true; + function resetNavBar() { + navbarHidden = true; + } + + import { afterNavigate } from "$app/navigation"; + afterNavigate(() => { + const params = new URLSearchParams(window.location.search); + hideOnPrint = params.get("hideOnPrint") === "1"; + //console.log(hideOnPrint); + }); + + import { onMount } from "svelte"; + import Zooter from "./comps/Zooter.svelte"; + + onMount(async () => { + const lock = document.createElement("meta"); + lock.name = "darkreader-lock"; + document.head.appendChild(lock); + }); + + function nextTheme() { + let theme: string | null = null; + + if (typeof localStorage !== "undefined") { + theme = localStorage.getItem("theme"); } - import { afterNavigate } from '$app/navigation'; - afterNavigate(() => { - const params = new URLSearchParams(window.location.search); - hideOnPrint = params.get('hideOnPrint') === '1'; - //console.log(hideOnPrint); - }); - - import { onMount } from 'svelte'; - import Zooter from "./comps/Zooter.svelte"; - - onMount(async () => { - const lock = document.createElement('meta'); - lock.name = 'darkreader-lock'; - document.head.appendChild(lock); - }); - - function nextTheme(){ - let theme: string | null = null; - - if (typeof localStorage !== 'undefined') { - theme = localStorage.getItem('theme'); - } - - const themesArr = (window as any).AvailableThemes; - let nextTheme = "dark"; - if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){ - - } else { - nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length]; - } - - console.log("Slecting: " + nextTheme); - document.documentElement.setAttribute('data-theme', nextTheme); - localStorage.setItem('theme', nextTheme); + const themesArr = (window as any).AvailableThemes; + let nextTheme = "dark"; + if ( + theme == "null" || + theme == "undefined" || + theme == undefined || + theme == null + ) { + } else { + nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length]; } - + console.log("Slecting: " + nextTheme); + document.documentElement.setAttribute("data-theme", nextTheme); + localStorage.setItem("theme", nextTheme); + } </script> {#snippet SwitchThemeButton()} -<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme"> - <button class="cursor-pointer" onclick={nextTheme}> <Dices/></button> -</div> + <div + class="tooltip tooltip-bottom grid place-content-center" + data-tip="Switch theme" + > + <button class="cursor-pointer" onclick={nextTheme}> <Dices /></button> + </div> {/snippet} <!-- Detect mobile --> -<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} /> -<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} /> +<MediaQuery + query="(max-width: {footerCollapseThreshold})" + bind:matches={footerCollapse} +/> +<MediaQuery + query="(max-width: {headerCollapseThreshold})" + bind:matches={isMobile} +/> <!-- Nav bar --> <div class="bg-base-200 p-0"> - <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300"> - <div class="nav-bar pr-4"> - {#if !isMobile} - <div class="desktop"> - <a href="/" class="nav-head"> - <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/> - <!-- <h3 id="logo-text">The Deprived Devs</h3> --> - </a> - <div class="nav-spacer" /> + <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300"> + <div class="nav-bar pr-4"> + {#if !isMobile} + <div class="desktop"> + <a href="/" class="nav-head"> + <DeprivedLogo + Class="fill-base-content p-2" + Style="width: 3.5rem; height: auto;" + /> + <!-- <h3 id="logo-text">The Deprived Devs</h3> --> + </a> + <div class="nav-spacer" /> - <!-- <a href="/">Home</a> --> - <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> --> + <!-- <a href="/">Home</a> --> + <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> --> - {@render SwitchThemeButton()} - - <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a> - <a href="/tools" style="width: 7.5rem;">Tools</a> - <a href="https://botalex.itch.io/" target="_blank">Games</a> - <!-- <a href="/posts">Blog</a> + {@render SwitchThemeButton()} + + <a + href="/zhen/cv/rev2?hideOnPrint=1" + target="_blank" + style="width: 7.5rem;">Zhen CV</a + > + <a href="/tools" style="width: 7.5rem;">Tools</a> + <a href="https://botalex.itch.io/" target="_blank">Games</a> + <!-- <a href="/posts">Blog</a> <a href="/about">About</a> --> - </div> - {:else} - <div class="collapsed shadow-xl"> - <a onclick={resetNavBar} href="/" class="nav-head"> - <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/> - <!-- <h3 id="logo-text">The Deprived Devs</h3> --> - </a> - <div class="nav-spacer" /> - {@render SwitchThemeButton()} - <div class="px-1"></div> - <button id="toggle-nav" onclick={() => {navbarHidden = !navbarHidden; console.log(navbarHidden);}}> - <HamburgerMenuIcon Class="fill-base-content"/> - </button> - </div> - {#if !navbarHidden} - <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}> - <!-- <a onclick={resetNavBar} href="/">Home</a> --> - <a onclick={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a> - <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a> - <!-- <a onclick={resetNavBar} href="/posts">Blog</a> - <a onclick={resetNavBar} href="/about">About</a> --> - </div> - {/if} - {/if} </div> - </header> - - <!-- Page content --> - {@render children?.()} + {:else} + <div class="collapsed shadow-xl"> + <a onclick={resetNavBar} href="/" class="nav-head"> + <DeprivedLogo + Class="fill-base-content p-2" + Style="width: 3.5rem; height: auto;" + /> + <!-- <h3 id="logo-text">The Deprived Devs</h3> --> + </a> + <div class="nav-spacer" /> + {@render SwitchThemeButton()} + <div class="px-1"></div> + <button + id="toggle-nav" + onclick={() => { + navbarHidden = !navbarHidden; + console.log(navbarHidden); + }} + > + <HamburgerMenuIcon Class="fill-base-content" /> + </button> + </div> + {#if !navbarHidden} + <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}> + <!-- <a onclick={resetNavBar} href="/">Home</a> --> + <a + onclick={resetNavBar} + href="https://botalex.itch.io/" + target="_blank">Games</a + > + <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a> + <!-- <a onclick={resetNavBar} href="/posts">Blog</a> + <a onclick={resetNavBar} href="/about">About</a> --> + </div> + {/if} + {/if} + </div> + </header> - <Zooter bind:hideOnPrint/> + <!-- Page content --> + {@render children?.()} + + <Zooter bind:hideOnPrint /> </div> - -<style lang="scss"> - /* Nav bar. */ - header { - display: flex; - justify-content: center; - } - - header a { - text-decoration: none; - } - - .nav-bar { - width: 100%; - max-width: 1400px; - } - - .desktop { - width: 100%; - display: flex; - gap: 30px; - } - - .collapsed { - width: 100%; - display: flex; - } - - #toggle-nav { - background: transparent; - border: none; - } - - - .nav-list { - display: flex; - flex-direction: column; - gap: 10px; - - align-items: center; - } - - .nav-head { - display: flex; - align-items: center; - gap: 10px; - } - - #logo-link { - width: 64px; - aspect-ratio: 1 / 1; - } - - #logo-text { - font-size: 24px; - color: oklch(var(--bc)); - font-family: var(--title-font); - margin: 0; - - min-width: 200px; - } - - .nav-spacer { - width: 100%; - } - - header a { - display: flex; - align-items: center; - - font-size: 22px; - font-family: var(--title-font); - // Text color - color: oklch(var(--bc)); - } - - /* Footer. */ - footer { - margin-top: 50px; - padding: 25px 0; - background-color: oklch(var(--b3)); - - height: 100%; - - display: flex; - justify-content: center; - } - - .about-container { - width: 80%; - height: 100%; - - color: oklch(var(--bc)); - - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - - & h3 { - font-size: larger; - } - } - - .about-container > div { - align-items: center; - text-align: center; - } - - .credits { - line-height: 2; - } - - .contact { - display: flex; - flex-direction: column; - } - - .social { - display: flex; - align-content: center; - gap: 10px; - } - - .social > img { - width: 24px; - } - - footer h3 { - margin-top: 0px; - color: var(--text2); - } - - footer a { - color: var(--text2); - text-decoration-line: underline; - } - - a:hover { - filter: brightness(130%); - } - - @media print { - .hide-on-print { - display: none; - } -} -</style> - {#if footerCollapse} - <style> - .about-container { - flex-direction: column; - justify-content: center !important; - gap: 25px; - } - </style> + <style> + .about-container { + flex-direction: column; + justify-content: center !important; + gap: 25px; + } + </style> {/if} {#if isMobile} - <style> - - </style> + <style> + </style> {/if} + +<style lang="scss"> + /* Nav bar. */ + header { + display: flex; + justify-content: center; + } + + header a { + text-decoration: none; + } + + .nav-bar { + width: 100%; + max-width: 1400px; + } + + .desktop { + width: 100%; + display: flex; + gap: 30px; + } + + .collapsed { + width: 100%; + display: flex; + } + + #toggle-nav { + background: transparent; + border: none; + } + + .nav-list { + display: flex; + flex-direction: column; + gap: 10px; + + align-items: center; + } + + .nav-head { + display: flex; + align-items: center; + gap: 10px; + } + + #logo-link { + width: 64px; + aspect-ratio: 1 / 1; + } + + #logo-text { + font-size: 24px; + color: oklch(var(--bc)); + font-family: var(--title-font); + margin: 0; + + min-width: 200px; + } + + .nav-spacer { + width: 100%; + } + + header a { + display: flex; + align-items: center; + + font-size: 22px; + font-family: var(--title-font); + // Text color + color: oklch(var(--bc)); + } + + /* Footer. */ + footer { + margin-top: 50px; + padding: 25px 0; + background-color: oklch(var(--b3)); + + height: 100%; + + display: flex; + justify-content: center; + } + + .about-container { + width: 80%; + height: 100%; + + color: oklch(var(--bc)); + + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + + & h3 { + font-size: larger; + } + } + + .about-container > div { + align-items: center; + text-align: center; + } + + .credits { + line-height: 2; + } + + .contact { + display: flex; + flex-direction: column; + } + + .social { + display: flex; + align-content: center; + gap: 10px; + } + + .social > img { + width: 24px; + } + + footer h3 { + margin-top: 0px; + color: var(--text2); + } + + footer a { + color: var(--text2); + text-decoration-line: underline; + } + + a:hover { + filter: brightness(130%); + } + + @media print { + .hide-on-print { + display: none; + } + } +</style> diff --git a/src/routes/comps/Zooter.svelte b/src/routes/comps/Zooter.svelte index a27855c..589bd3c 100644 --- a/src/routes/comps/Zooter.svelte +++ b/src/routes/comps/Zooter.svelte @@ -1,268 +1,260 @@ <script lang="ts"> - import svelteLogo from "$lib/svelteLogos/svelte-logo.png"; - import { browser } from "$app/environment"; - import { onDestroy, onMount } from "svelte"; - import { ArrowBigDown } from "lucide-svelte"; - import { fly } from "svelte/transition"; - const buildTime = __BUILD_TIME__; + import svelteLogo from "$lib/svelteLogos/svelte-logo.png"; + import { browser } from "$app/environment"; + import { onDestroy, onMount } from "svelte"; + import { ArrowBigDown } from "lucide-svelte"; + import { fly } from "svelte/transition"; + const buildTime = __BUILD_TIME__; - let scrollY = 0; - const unscrollSpeed = 100; - let unscrollScrollDiv: HTMLDivElement; - let totalScroll = 0; + let scrollY = 0; + const unscrollSpeed = 100; + let unscrollScrollDiv: HTMLDivElement; + let totalScroll = 0; - let unscrollInterval: number | undefined = undefined; - let lastScrollTime = 0; // Used to have delay before unscrolling - let isBeingTouched = false; // Phone support - const unscrollDelay = 100; + let unscrollInterval: number | undefined = undefined; + let lastScrollTime = 0; // Used to have delay before unscrolling + let isBeingTouched = false; // Phone support + const unscrollDelay = 100; - let isLeavingAnimating = false; + let isLeavingAnimating = false; - // prevent direct scroll - let notFirstScroll = false; + // prevent direct scroll + let notFirstScroll = false; - let tranisitionOverlay: HTMLElement; + let tranisitionOverlay: HTMLElement; - // Function with more scroll control, by chatgpt - function smoothScrollTo(targetY: number, duration: number = 500): void { - const startY: number = window.scrollY; - const diff: number = targetY - startY; + // Function with more scroll control, by chatgpt + function smoothScrollTo(targetY: number, duration: number = 500): void { + const startY: number = window.scrollY; + const diff: number = targetY - startY; - if (duration <= 0) { - window.scrollTo(0, targetY); - return; - } + if (duration <= 0) { + window.scrollTo(0, targetY); + return; + } - let startTime: number | null = null; + let startTime: number | null = null; - function step(timestamp: number): void { - if (startTime === null) startTime = timestamp; - const time = timestamp - startTime; - const percent = Math.min(time / duration, 1); + function step(timestamp: number): void { + if (startTime === null) startTime = timestamp; + const time = timestamp - startTime; + const percent = Math.min(time / duration, 1); - // easeInOutQuad easing - const ease = - percent < 0.5 - ? 2 * percent * percent - : -1 + (4 - 2 * percent) * percent; + // easeInOutQuad easing + const ease = + percent < 0.5 + ? 2 * percent * percent + : -1 + (4 - 2 * percent) * percent; - window.scrollTo(0, startY + diff * ease); - - if (time < duration) { - requestAnimationFrame(step); - } - } + window.scrollTo(0, startY + diff * ease); + if (time < duration) { requestAnimationFrame(step); + } } - // Out animation: - function flyInFromTop( - node: HTMLElement, - { - y = -window.innerHeight, - duration = 400, - opacity = 0, - }: { y?: number; duration?: number; opacity?: number } = {}, - ) { - const { - delay = 0, - duration: d, - easing = (t) => t, - css, - } = fly(node, { y, duration: d, opacity }); + requestAnimationFrame(step); + } - let start: number; - function step(now: number) { - if (!start) start = now; - const elapsed = now - start - delay; - if (elapsed < 0) return requestAnimationFrame(step); - const t = Math.min(elapsed / d, 1); - if (css) node.style.cssText = css(easing(t), 1 - easing(t)); - if (elapsed < d) requestAnimationFrame(step); - } - requestAnimationFrame(step); + // Out animation: + function flyInFromTop( + node: HTMLElement, + { + y = -window.innerHeight, + duration = 400, + opacity = 0, + }: { y?: number; duration?: number; opacity?: number } = {}, + ) { + const { + delay = 0, + duration: d, + easing = (t) => t, + css, + } = fly(node, { y, duration: d, opacity }); + + let start: number; + function step(now: number) { + if (!start) start = now; + const elapsed = now - start - delay; + if (elapsed < 0) return requestAnimationFrame(step); + const t = Math.min(elapsed / d, 1); + if (css) node.style.cssText = css(easing(t), 1 - easing(t)); + if (elapsed < d) requestAnimationFrame(step); } + requestAnimationFrame(step); + } - onMount(() => { - totalScroll = - document.documentElement.scrollHeight - window.innerHeight; + onMount(() => { + return; // Fuck this, I'm too lazy to fix this atm + totalScroll = document.documentElement.scrollHeight - window.innerHeight; - unscrollInterval = setInterval(() => { - // Prevents scroll to bottom on first try - if ( - !notFirstScroll && - scrollY > totalScroll - unscrollScrollDiv.scrollHeight - ) { - smoothScrollTo( - totalScroll - unscrollScrollDiv.scrollHeight * 1.1, - 0, - ); + unscrollInterval = setInterval(() => { + // Prevents scroll to bottom on first try + if ( + !notFirstScroll && + scrollY > totalScroll - unscrollScrollDiv.scrollHeight + ) { + smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight * 1.1, 0); - // Allow further scroll after delay - setTimeout(() => { - notFirstScroll = true; - }, 1000); - } + // Allow further scroll after delay + setTimeout(() => { + notFirstScroll = true; + }, 1000); + } - // console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime); - // console.log(isBeingTouched); - if ( - !notFirstScroll || - isBeingTouched || - Date.now() < lastScrollTime - -unscrollDelay - ) { - // console.log("nah"); - return; - } + // console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime); + // console.log(isBeingTouched); + if ( + !notFirstScroll || + isBeingTouched || + Date.now() < lastScrollTime - -unscrollDelay + ) { + // console.log("nah"); + return; + } - if (totalScroll - unscrollScrollDiv.scrollHeight < scrollY) { - smoothScrollTo( - totalScroll - unscrollScrollDiv.scrollHeight, - 200, - ); - } + if (totalScroll - unscrollScrollDiv.scrollHeight < scrollY) { + smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight, 200); + } - if (totalScroll <= scrollY) { - console.log("Hit!"); - // isLeavingAnimating = true; - flyInFromTop(tranisitionOverlay, { duration: 800 }); - } - }, 10); - }); + if (totalScroll <= scrollY) { + console.log("Hit!"); + // isLeavingAnimating = true; + flyInFromTop(tranisitionOverlay, { duration: 800 }); + } + }, 10); + }); - function onScroll() { - lastScrollTime = Date.now(); - // console.log("scroll"); - } + function onScroll() { + lastScrollTime = Date.now(); + // console.log("scroll"); + } - function onResize() { - totalScroll = - document.documentElement.scrollHeight - window.innerHeight; - } + function onResize() { + totalScroll = document.documentElement.scrollHeight - window.innerHeight; + } - onDestroy(() => { - clearInterval(unscrollInterval); - }); + onDestroy(() => { + clearInterval(unscrollInterval); + }); - export let hideOnPrint: boolean; + export let hideOnPrint: boolean; </script> <svelte:window - bind:scrollY - on:scroll={() => { - onScroll(); - }} - on:touchstart={() => { - isBeingTouched = true; - }} - on:touchend={() => { - isBeingTouched = false; - }} - on:resize={onResize} + bind:scrollY + on:scroll={() => { + onScroll(); + }} + on:touchstart={() => { + isBeingTouched = true; + }} + on:touchend={() => { + isBeingTouched = false; + }} + on:resize={onResize} /> <div class="w-full"> - <!-- Keep scrolling thing --> - <div - class="h-64 w-full flex flex-col justify-center items-center" - > - <div>Keep scrolling to veiw Zhen's portfolio site!</div> - <div class="flex justify-center"> - <ArrowBigDown /> - <ArrowBigDown /> - <ArrowBigDown /> - <ArrowBigDown /> - </div> + <!-- Keep scrolling thing --> + <div class="hidden h-64 w-full flex flex-col justify-center items-center"> + <div>Keep scrolling to veiw Zhen's portfolio site!</div> + <div class="flex justify-center"> + <ArrowBigDown /> + <ArrowBigDown /> + <ArrowBigDown /> + <ArrowBigDown /> </div> + </div> - <div class="h-64 w-full flex flex-col justify-end items-center" - bind:this={unscrollScrollDiv} - > - <img - src="/images/memes/WhatDaDog.png" - class="w-32 h-32 object-contain" - alt="da dog" - /> - </div> + <div + class="hidden h-64 w-full flex flex-col justify-end items-center" + bind:this={unscrollScrollDiv} + > + <img + src="/images/memes/WhatDaDog.png" + class="w-32 h-32 object-contain" + alt="da dog" + /> + </div> - <!-- About footer --> - <div - class="{hideOnPrint - ? 'hide-on-print' - : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8" - > - <div class="flex justify-center"> - <div class="grid gap-8 sm:grid-cols-3 items-center w-full"> - <div class="flex flex-col items-center"> - <span class="font-bold">© 2023-2025</span> - <br /> - <span>Benjamin Dreyer</span> - <br /> - <span>Oliver Schwenger</span> - <br /> - <span>Sylvester Junge</span> - <br /> - <span>Snorre Ettrup Altschul</span> - <br /> - <span>Zhentao Wei</span> - </div> - <div class="flex flex-col items-center"> - <h3><b>About this website</b></h3> - <!-- <a href="/" target="_blank">Recursion</a> --> - <div class="flex justify-center"> - This website was made using <a - class="grid place-content-center" - target="_blank" - href="https://kit.svelte.dev/" - > - <img - class="pl-2" - src={svelteLogo} - style="height: 1.5rem;" - alt="SvelteKit logo" - /></a - > - </div> - <span - >Website <a - href="https://git.spoodythe.one/sveske-juice/deprived-main-website" - target="_blank">source code</a - ></span - > - </div> - <div class="flex flex-col items-center"> - <h3><b>Contact</b></h3> - <a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a> - <div class="mt-2"></div> - <a - href="https://discord.gg/awatEEqc3M" - target="_blank" - class="social" - > - <!-- <span>Discord</span> --> - <img - src="/images/icons/discord.svg" - class="w-8 h-8 object-contain" - alt="Discord" - /> - </a> - </div> - </div> + <!-- About footer --> + <div + class="{hideOnPrint + ? 'hide-on-print' + : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8" + > + <div class="flex justify-center"> + <div class="grid gap-8 sm:grid-cols-3 items-center w-full"> + <div class="flex flex-col items-center"> + <span class="font-bold">© 2023-2025</span> + <br /> + <span>Benjamin Dreyer</span> + <br /> + <span>Oliver Schwenger</span> + <br /> + <span>Sylvester Junge</span> + <br /> + <span>Snorre Ettrup Altschul</span> + <br /> + <span>Zhentao Wei</span> </div> - <div - class="flex w-full justify-center border-t border-base-100 border-dashed" - > - Last build: {buildTime} (+2 UTC) + <div class="flex flex-col items-center"> + <h3><b>About this website</b></h3> + <!-- <a href="/" target="_blank">Recursion</a> --> + <div class="flex justify-center"> + This website was made using <a + class="grid place-content-center" + target="_blank" + href="https://kit.svelte.dev/" + > + <img + class="pl-2" + src={svelteLogo} + style="height: 1.5rem;" + alt="SvelteKit logo" + /></a + > + </div> + <span + >Website <a + href="https://git.spoodythe.one/sveske-juice/deprived-main-website" + target="_blank">source code</a + ></span + > </div> + <div class="flex flex-col items-center"> + <h3><b>Contact</b></h3> + <a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a> + <div class="mt-2"></div> + <a + href="https://discord.gg/awatEEqc3M" + target="_blank" + class="social" + > + <!-- <span>Discord</span> --> + <img + src="/images/icons/discord.svg" + class="w-8 h-8 object-contain" + alt="Discord" + /> + </a> + </div> + </div> </div> + <div + class="flex w-full justify-center border-t border-base-100 border-dashed" + > + Last build: {buildTime} (+2 UTC) + </div> + </div> </div> <div - bind:this={tranisitionOverlay} - class="{isLeavingAnimating - ? '' - : 'hidden'} fixed top-0 left-0 w-screen h-screen bg-base-200" + bind:this={tranisitionOverlay} + class="{isLeavingAnimating + ? '' + : 'hidden'} fixed top-0 left-0 w-screen h-screen bg-base-200" ></div> <!-- {#if isLeavingAnimating} {/if} -->