mirror of
https://git.suyu.dev/suyu/website.git
synced 2025-12-24 08:14:38 +01:00
Merge branch 'dev' of gitlab.com:/suyu-emu/website into dev
This commit is contained in:
not-nullptr
commit
736f657fc9
11 changed files with 278 additions and 421 deletions
21
package-lock.json
generated
21
package-lock.json
generated
|
|
@ -15,6 +15,7 @@
|
|||
"email-validator": "^2.0.4",
|
||||
"hcaptcha": "^0.1.1",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"radix-svelte": "^0.9.0",
|
||||
"reflect-metadata": "^0.2.1",
|
||||
"sequelize": "^6.37.1",
|
||||
"sqlite3": "^5.1.7",
|
||||
|
|
@ -450,7 +451,6 @@
|
|||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
|
||||
"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.1"
|
||||
}
|
||||
|
|
@ -459,7 +459,6 @@
|
|||
"version": "1.6.3",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
|
||||
"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.0.0",
|
||||
"@floating-ui/utils": "^0.2.0"
|
||||
|
|
@ -468,8 +467,7 @@
|
|||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
|
||||
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==",
|
||||
"dev": true
|
||||
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
|
||||
},
|
||||
"node_modules/@gar/promisify": {
|
||||
"version": "1.1.3",
|
||||
|
|
@ -5293,6 +5291,21 @@
|
|||
"resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
|
||||
"integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
|
||||
},
|
||||
"node_modules/radix-svelte": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/radix-svelte/-/radix-svelte-0.9.0.tgz",
|
||||
"integrity": "sha512-0PJMHiZVTjWGrjK7c2/FY+nq0fBGwPXNy6fFvkLZIs73hTIai/Exw+pi3TCvtd80gSjFb5utdHWI3qiuuN0B/Q==",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.3.1",
|
||||
"@floating-ui/dom": "^1.4.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"svelte": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/range-parser": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@
|
|||
"email-validator": "^2.0.4",
|
||||
"hcaptcha": "^0.1.1",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"radix-svelte": "^0.9.0",
|
||||
"reflect-metadata": "^0.2.1",
|
||||
"sequelize": "^6.37.1",
|
||||
"sqlite3": "^5.1.7",
|
||||
|
|
|
|||
42
pnpm-lock.yaml
generated
42
pnpm-lock.yaml
generated
|
|
@ -20,6 +20,9 @@ dependencies:
|
|||
jsonwebtoken:
|
||||
specifier: ^9.0.2
|
||||
version: 9.0.2
|
||||
radix-svelte:
|
||||
specifier: ^0.9.0
|
||||
version: 0.9.0(svelte@4.2.12)
|
||||
reflect-metadata:
|
||||
specifier: ^0.2.1
|
||||
version: 0.2.1
|
||||
|
|
@ -38,6 +41,9 @@ dependencies:
|
|||
vite-plugin-vsharp:
|
||||
specifier: ^1.7.3
|
||||
version: 1.7.3(vite@5.1.5)
|
||||
ws:
|
||||
specifier: ^8.16.0
|
||||
version: 8.16.0
|
||||
|
||||
devDependencies:
|
||||
'@sveltejs/adapter-auto':
|
||||
|
|
@ -61,6 +67,9 @@ devDependencies:
|
|||
'@types/uuid':
|
||||
specifier: ^9.0.8
|
||||
version: 9.0.8
|
||||
'@types/ws':
|
||||
specifier: ^8.5.10
|
||||
version: 8.5.10
|
||||
autoprefixer:
|
||||
specifier: ^10.4.16
|
||||
version: 10.4.18(postcss@8.4.35)
|
||||
|
|
@ -338,18 +347,15 @@ packages:
|
|||
resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
|
||||
dependencies:
|
||||
'@floating-ui/utils': 0.2.1
|
||||
dev: true
|
||||
|
||||
/@floating-ui/dom@1.6.3:
|
||||
resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==}
|
||||
dependencies:
|
||||
'@floating-ui/core': 1.6.0
|
||||
'@floating-ui/utils': 0.2.1
|
||||
dev: true
|
||||
|
||||
/@floating-ui/utils@0.2.1:
|
||||
resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
|
||||
dev: true
|
||||
|
||||
/@gar/promisify@1.1.3:
|
||||
resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
|
||||
|
|
@ -947,6 +953,12 @@ packages:
|
|||
resolution: {integrity: sha512-FCTsikRozryfayPuiI46QzH3fnrOoctTjvOYZkho9BTFLCOZ2rgZJHMOVgCOfttjPJcgOx52EpkY0CMfy87MIw==}
|
||||
dev: false
|
||||
|
||||
/@types/ws@8.5.10:
|
||||
resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
|
||||
dependencies:
|
||||
'@types/node': 20.11.25
|
||||
dev: true
|
||||
|
||||
/@yr/monotone-cubic-spline@1.0.3:
|
||||
resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
|
||||
dev: true
|
||||
|
|
@ -3138,6 +3150,17 @@ packages:
|
|||
requiresBuild: true
|
||||
dev: false
|
||||
|
||||
/radix-svelte@0.9.0(svelte@4.2.12):
|
||||
resolution: {integrity: sha512-0PJMHiZVTjWGrjK7c2/FY+nq0fBGwPXNy6fFvkLZIs73hTIai/Exw+pi3TCvtd80gSjFb5utdHWI3qiuuN0B/Q==}
|
||||
engines: {node: '>= 16'}
|
||||
peerDependencies:
|
||||
svelte: ^4.1.1
|
||||
dependencies:
|
||||
'@floating-ui/core': 1.6.0
|
||||
'@floating-ui/dom': 1.6.3
|
||||
svelte: 4.2.12
|
||||
dev: false
|
||||
|
||||
/range-parser@1.2.1:
|
||||
resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
|
||||
engines: {node: '>= 0.6'}
|
||||
|
|
@ -4295,6 +4318,19 @@ packages:
|
|||
/wrappy@1.0.2:
|
||||
resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
|
||||
|
||||
/ws@8.16.0:
|
||||
resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
peerDependencies:
|
||||
bufferutil: ^4.0.1
|
||||
utf-8-validate: '>=5.0.2'
|
||||
peerDependenciesMeta:
|
||||
bufferutil:
|
||||
optional: true
|
||||
utf-8-validate:
|
||||
optional: true
|
||||
dev: false
|
||||
|
||||
/y18n@5.0.8:
|
||||
resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
|
|||
24
src/app.pcss
24
src/app.pcss
|
|
@ -40,6 +40,10 @@ h3 {
|
|||
color: #000;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
@apply outline-none ring-2 ring-sky-400;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)),
|
||||
radial-gradient(109.26% 109.26% at 49.83% 13.37%, #ffffff 0%, #babaca 100%);
|
||||
|
|
@ -95,3 +99,23 @@ h3 {
|
|||
.link {
|
||||
@apply text-blue-300 underline transition-all ease-out hover:text-blue-100;
|
||||
}
|
||||
|
||||
@keyframes contentShow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -48%) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes overlayShow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
src/assets/branding/suyu__Embed-Image.png
Normal file
BIN
src/assets/branding/suyu__Embed-Image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/assets/mockups/suyuwindow.png
Normal file
BIN
src/assets/mockups/suyuwindow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
|
|
@ -1,78 +0,0 @@
|
|||
<script lang="ts">
|
||||
export let compatibility: "goated" | "based" | "cringe";
|
||||
export let image: string;
|
||||
export let title: string;
|
||||
export let releaseYear: number;
|
||||
|
||||
function capitalizeFirstLetter(string: typeof compatibility) {
|
||||
if (string === "goated") {
|
||||
return "Good";
|
||||
} else if (string === "based") {
|
||||
return "Okay";
|
||||
} else if (string === "cringe") {
|
||||
return "Bad";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img src={image || ""} alt="Mario Odyssey" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<h3 class="header">{title}</h3>
|
||||
<div class="content">Released: {releaseYear}</div>
|
||||
<div>
|
||||
Compatibility: <span class={compatibility}>{capitalizeFirstLetter(compatibility)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
aspect-ratio: 1.5/2;
|
||||
width: fit-content;
|
||||
height: 450px;
|
||||
background-color: rgb(47, 57, 76);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
box-shadow: 0 0 24px rgb(32, 33, 45);
|
||||
border: solid thin rgb(101, 109, 132);
|
||||
}
|
||||
|
||||
.card-image {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid thin rgb(101, 109, 132);
|
||||
}
|
||||
|
||||
.card-image > img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.goated {
|
||||
color: #78dca0;
|
||||
text-shadow: 0px 0px 8px #78dca0;
|
||||
}
|
||||
|
||||
.based {
|
||||
color: #eab876;
|
||||
text-shadow: 0px 0px 8px #eab876;
|
||||
}
|
||||
|
||||
.cringe {
|
||||
color: #ff3a3a;
|
||||
text-shadow: 0px 0px 8px #ff3a3a;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,283 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount, tick } from "svelte";
|
||||
import Card from "$components/Card.svelte";
|
||||
import type { ICard } from "$lib/util/types";
|
||||
|
||||
export let cards: ICard[];
|
||||
|
||||
let selectedCard = 0;
|
||||
let instantSelectedCard = 0;
|
||||
|
||||
let animating = false;
|
||||
|
||||
async function go(dir: number) {
|
||||
if (dir > 0) {
|
||||
cardScroll({
|
||||
deltaY: 100,
|
||||
shiftKey: true,
|
||||
preventDefault: () => {},
|
||||
} as any);
|
||||
} else {
|
||||
cardScroll({
|
||||
deltaY: -100,
|
||||
shiftKey: true,
|
||||
preventDefault: () => {},
|
||||
} as any);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const key = (e: KeyboardEvent) => {
|
||||
// right arrow, run cardScroll with positive
|
||||
if (e.key === "ArrowRight") {
|
||||
e.preventDefault();
|
||||
go(1);
|
||||
}
|
||||
if (e.key === "ArrowLeft") {
|
||||
e.preventDefault();
|
||||
go(-1);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", key);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", key);
|
||||
};
|
||||
});
|
||||
|
||||
async function cardScroll(e: WheelEvent) {
|
||||
if (!e.shiftKey || window.innerWidth < 560) return;
|
||||
e.preventDefault();
|
||||
const animations: Animation[] = [];
|
||||
const duration = 500;
|
||||
const easing = "cubic-bezier(.29,1.03,.5,1)";
|
||||
if (animating) return;
|
||||
animating = true;
|
||||
if (e.deltaY > 0) {
|
||||
instantSelectedCard = (selectedCard + 1) % cards.length;
|
||||
} else {
|
||||
instantSelectedCard = (selectedCard - 1 + cards.length) % cards.length;
|
||||
}
|
||||
const cardLeft = document.querySelector(".card-3d.left") as HTMLElement;
|
||||
const cardRight = document.querySelector(".card-3d.right") as HTMLElement;
|
||||
const cardCenter = document.querySelector(
|
||||
".card-3d:not(.left):not(.right):not(.transition-left):not(.transition-right)",
|
||||
) as HTMLElement;
|
||||
const cardTransitionLeft = document.querySelector(
|
||||
".card-3d.transition-left",
|
||||
) as HTMLElement;
|
||||
const cardTransitionRight = document.querySelector(
|
||||
".card-3d.transition-right",
|
||||
) as HTMLElement;
|
||||
cardTransitionLeft.style.display = "block";
|
||||
cardTransitionRight.style.display = "block";
|
||||
setTimeout(async () => {
|
||||
selectedCard = instantSelectedCard;
|
||||
await tick();
|
||||
cardTransitionLeft.style.display = "none";
|
||||
cardTransitionRight.style.display = "none";
|
||||
animations.forEach((anim) => anim.cancel());
|
||||
setTimeout(() => {
|
||||
animating = false;
|
||||
}, 10);
|
||||
}, duration);
|
||||
const cardLeftBounds = cardLeft.getBoundingClientRect();
|
||||
const cardRightBounds = cardRight.getBoundingClientRect();
|
||||
const cardCenterBounds = cardCenter.getBoundingClientRect();
|
||||
if (e.deltaY > 0) {
|
||||
animations.push(
|
||||
cardRight.animate(
|
||||
[
|
||||
{
|
||||
transform: `translateX(${cardCenterBounds.left - cardRightBounds.left + 62}px)`,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardCenter.animate(
|
||||
[
|
||||
{
|
||||
transform: `translateX(${cardLeftBounds.left - cardCenterBounds.left - 83}px) perspective(1000px) translateZ(-150px) rotateY(-50deg)`,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardLeft.animate(
|
||||
[
|
||||
{
|
||||
opacity: 0,
|
||||
transform:
|
||||
"perspective(1000px) translateZ(-150px) rotateY(-80deg) translateX(-400px)",
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardTransitionLeft.animate(
|
||||
[
|
||||
{
|
||||
transform:
|
||||
"translateX(1150px) perspective(1000px) translateZ(-400px) rotateY(80deg)",
|
||||
opacity: 0,
|
||||
},
|
||||
{
|
||||
transform:
|
||||
"translateX(1013px) perspective(1000px) translateZ(-150px) rotateY(50deg)",
|
||||
opacity: 1,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
);
|
||||
} else {
|
||||
animations.push(
|
||||
cardLeft.animate(
|
||||
[
|
||||
{
|
||||
transform: `translateX(${cardCenterBounds.left - cardLeftBounds.left + 83}px)`,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardCenter.animate(
|
||||
[
|
||||
{
|
||||
transform: `translateX(${cardRightBounds.left - cardCenterBounds.left - 62}px) perspective(1000px) translateZ(-150px) rotateY(50deg)`,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardRight.animate(
|
||||
[
|
||||
{
|
||||
opacity: 0,
|
||||
transform:
|
||||
"perspective(1000px) translateZ(-150px) rotateY(80deg) translateX(400px)",
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
cardTransitionRight.animate(
|
||||
[
|
||||
{
|
||||
transform:
|
||||
"translateX(-1150px) perspective(1000px) translateZ(-400px) rotateY(-80deg)",
|
||||
opacity: 0,
|
||||
},
|
||||
{
|
||||
transform:
|
||||
"translateX(-1013px) perspective(1000px) translateZ(-150px) rotateY(-50deg)",
|
||||
opacity: 1,
|
||||
},
|
||||
],
|
||||
{
|
||||
duration,
|
||||
fill: "forwards",
|
||||
easing,
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- look, i don't hate the disabled, but this
|
||||
site's concept is pretty inaccessible as it
|
||||
is (and i just so happen to be partially blind
|
||||
in an eye, so), also we do have keyboard events
|
||||
we just register them through onMount() so fuck
|
||||
you a11y -->
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="cards" on:wheel={cardScroll}>
|
||||
<div class="card-3d transition-left">
|
||||
<Card {...cards[(instantSelectedCard + 1) % cards.length]} />
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="card-3d left" on:click={() => go(-1)}>
|
||||
<Card {...cards[selectedCard - 1 < 0 ? cards.length - 1 : selectedCard - 1]} />
|
||||
</div>
|
||||
<div class="card-3d">
|
||||
<Card {...cards[selectedCard]} />
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="card-3d right" on:click={() => go(1)}>
|
||||
<Card {...cards[(selectedCard + 1) % cards.length]} />
|
||||
</div>
|
||||
<div class="card-3d transition-right">
|
||||
<Card {...cards[(instantSelectedCard + 2) % cards.length]} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.cards {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card-3d {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.card-3d.left {
|
||||
transform: perspective(1000px) translateZ(-150px) rotateY(-50deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card-3d.right {
|
||||
transform: perspective(1000px) translateZ(-150px) rotateY(50deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card-3d {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-3d.transition-left,
|
||||
.card-3d.transition-right {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.card-3d {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.cards {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,36 +1,39 @@
|
|||
<script lang="ts">
|
||||
export let size = 512;
|
||||
// Set default svg size
|
||||
export let size = 512;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
width={size * 3.771484375}
|
||||
height={size}
|
||||
viewBox="0 0 1931 512"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="{size * 3.771484375}"
|
||||
height="{size}"
|
||||
viewBox="0 0 1931 512"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Logo of suyu"
|
||||
>
|
||||
<path
|
||||
d="M1761.76 362.559C1828.26 362.559 1865.29 340.974 1877.74 294.87H1878.58C1878.58 316.024 1877.74 343.446 1876.9 358.402H1930.07V153.155H1876.9V237.082C1876.9 289.051 1832 318.973 1779.23 318.973C1720.61 318.973 1701.48 295.702 1701.48 257.882V153.155H1648.34V269.104C1648.34 318.559 1681.97 362.559 1761.76 362.559Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M1402.72 449C1453.41 449 1476.68 426.588 1509.92 362.978L1618.78 153.155H1564.35L1482.08 311.453H1481.25L1388.59 153.155H1326.68L1447.59 358.402H1457.98C1436.37 399.173 1422.66 407.493 1396.07 407.493C1381.52 407.493 1368.23 404.581 1361.58 402.501V443.181C1369.47 445.68 1385.68 449 1402.72 449Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M1126.74 362.559C1193.26 362.559 1230.26 340.974 1242.73 294.87H1243.56C1243.56 316.024 1242.73 343.446 1241.9 358.402H1295.04V153.155H1241.9V237.082C1241.9 289.051 1197 318.973 1144.21 318.973C1085.59 318.973 1066.47 295.702 1066.47 257.882V153.155H1013.33V269.104C1013.33 318.559 1046.95 362.559 1126.74 362.559Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M844.987 362.559C951.791 362.559 975.456 326.453 975.456 294.857C975.456 275.317 966.736 258.688 947.639 249.957C929.784 242.474 902.773 239.98 866.188 238.316C833.76 236.655 807.153 236.655 792.604 232.913C779.299 230.001 775.142 224.182 775.142 215.867C775.142 196.326 798.009 186.765 846.648 186.765C902.773 186.765 912.749 202.147 913.165 222.518H963.416C963.416 183.861 942.657 149 844.987 149C766.424 149 722 176.805 722 218.361C722 235.407 728.643 251.205 744.004 259.52C759.781 268.25 790.94 273.24 833.346 274.485C859.953 275.317 891.132 276.149 905.682 279.059C918.986 281.971 922.312 288.206 922.312 296.521C922.312 312.735 908.178 324.791 844.987 324.791C780.963 324.791 772.651 307.329 772.238 290.286H722C722 321.05 738.606 362.559 844.987 362.559Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M394.634 471.208C407.342 448.401 414.583 422.138 414.583 394.194C414.583 306.657 343.529 235.612 255.992 235.612C190.969 235.612 138.192 182.835 138.192 117.806C138.192 52.7762 190.969 0 255.992 0C397.313 0 512 114.688 512 256C512 346.235 465.227 425.613 394.634 471.208ZM255.992 52.7613C244.032 52.7613 234.316 62.4761 234.316 74.4429C234.316 86.4084 244.032 96.1245 255.992 96.1245C267.969 96.1245 277.673 86.4084 277.673 74.4429C277.673 62.4761 267.969 52.7613 255.992 52.7613ZM299.355 96.1245C287.391 96.1245 277.673 105.839 277.673 117.806C277.673 129.772 287.391 139.488 299.355 139.488C311.332 139.488 321.036 129.772 321.036 117.806C321.036 105.839 311.332 96.1245 299.355 96.1245ZM212.635 96.1245C200.669 96.1245 190.955 105.839 190.955 117.806C190.955 129.772 200.669 139.488 212.635 139.488C224.601 139.488 234.316 129.772 234.316 117.806C234.316 105.839 224.601 96.1245 212.635 96.1245ZM255.992 139.488C244.032 139.488 234.316 149.203 234.316 161.168C234.316 173.135 244.032 182.85 255.992 182.85C267.969 182.85 277.673 173.135 277.673 161.168C277.673 149.203 267.969 139.488 255.992 139.488Z"
|
||||
fill="#FF3554"
|
||||
/>
|
||||
<path
|
||||
d="M117.361 40.7917C104.657 63.5994 97.4173 89.8623 97.4173 117.806C97.4173 205.343 168.461 276.388 255.992 276.388C321.022 276.388 373.805 329.165 373.805 394.194C373.805 459.222 321.022 512 255.992 512C114.687 512 0 397.312 0 256C0 165.766 46.7638 86.3854 117.361 40.7917ZM255.992 329.149C244.032 329.149 234.316 338.865 234.316 350.831C234.316 362.798 244.032 372.512 255.992 372.512C267.969 372.512 277.673 362.798 277.673 350.831C277.673 338.865 267.969 329.149 255.992 329.149ZM299.355 372.512C287.391 372.512 277.673 382.227 277.673 394.194C277.673 406.161 287.391 415.876 299.355 415.876C311.332 415.876 321.036 406.161 321.036 394.194C321.036 382.227 311.332 372.512 299.355 372.512ZM255.992 415.876C244.032 415.876 234.316 425.59 234.316 437.557C234.316 449.523 244.032 459.239 255.992 459.239C267.969 459.239 277.673 449.523 277.673 437.557C277.673 425.59 267.969 415.876 255.992 415.876ZM212.634 372.512C200.669 372.512 190.954 382.227 190.954 394.194C190.954 406.161 200.669 415.876 212.634 415.876C224.601 415.876 234.316 406.161 234.316 394.194C234.316 382.227 224.601 372.512 212.634 372.512Z"
|
||||
fill="#3A99FF"
|
||||
/>
|
||||
<path
|
||||
d="M1761.76 362.559C1828.26 362.559 1865.29 340.974 1877.74 294.87H1878.58C1878.58 316.024 1877.74 343.446 1876.9 358.402H1930.07V153.155H1876.9V237.082C1876.9 289.051 1832 318.973 1779.23 318.973C1720.61 318.973 1701.48 295.702 1701.48 257.882V153.155H1648.34V269.104C1648.34 318.559 1681.97 362.559 1761.76 362.559Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M1402.72 449C1453.41 449 1476.68 426.588 1509.92 362.978L1618.78 153.155H1564.35L1482.08 311.453H1481.25L1388.59 153.155H1326.68L1447.59 358.402H1457.98C1436.37 399.173 1422.66 407.493 1396.07 407.493C1381.52 407.493 1368.23 404.581 1361.58 402.501V443.181C1369.47 445.68 1385.68 449 1402.72 449Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M1126.74 362.559C1193.26 362.559 1230.26 340.974 1242.73 294.87H1243.56C1243.56 316.024 1242.73 343.446 1241.9 358.402H1295.04V153.155H1241.9V237.082C1241.9 289.051 1197 318.973 1144.21 318.973C1085.59 318.973 1066.47 295.702 1066.47 257.882V153.155H1013.33V269.104C1013.33 318.559 1046.95 362.559 1126.74 362.559Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M844.987 362.559C951.791 362.559 975.456 326.453 975.456 294.857C975.456 275.317 966.736 258.688 947.639 249.957C929.784 242.474 902.773 239.98 866.188 238.316C833.76 236.655 807.153 236.655 792.604 232.913C779.299 230.001 775.142 224.182 775.142 215.867C775.142 196.326 798.009 186.765 846.648 186.765C902.773 186.765 912.749 202.147 913.165 222.518H963.416C963.416 183.861 942.657 149 844.987 149C766.424 149 722 176.805 722 218.361C722 235.407 728.643 251.205 744.004 259.52C759.781 268.25 790.94 273.24 833.346 274.485C859.953 275.317 891.132 276.149 905.682 279.059C918.986 281.971 922.312 288.206 922.312 296.521C922.312 312.735 908.178 324.791 844.987 324.791C780.963 324.791 772.651 307.329 772.238 290.286H722C722 321.05 738.606 362.559 844.987 362.559Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M394.634 471.208C407.342 448.401 414.583 422.138 414.583 394.194C414.583 306.657 343.529 235.612 255.992 235.612C190.969 235.612 138.192 182.835 138.192 117.806C138.192 52.7762 190.969 0 255.992 0C397.313 0 512 114.688 512 256C512 346.235 465.227 425.613 394.634 471.208ZM255.992 52.7613C244.032 52.7613 234.316 62.4761 234.316 74.4429C234.316 86.4084 244.032 96.1245 255.992 96.1245C267.969 96.1245 277.673 86.4084 277.673 74.4429C277.673 62.4761 267.969 52.7613 255.992 52.7613ZM299.355 96.1245C287.391 96.1245 277.673 105.839 277.673 117.806C277.673 129.772 287.391 139.488 299.355 139.488C311.332 139.488 321.036 129.772 321.036 117.806C321.036 105.839 311.332 96.1245 299.355 96.1245ZM212.635 96.1245C200.669 96.1245 190.955 105.839 190.955 117.806C190.955 129.772 200.669 139.488 212.635 139.488C224.601 139.488 234.316 129.772 234.316 117.806C234.316 105.839 224.601 96.1245 212.635 96.1245ZM255.992 139.488C244.032 139.488 234.316 149.203 234.316 161.168C234.316 173.135 244.032 182.85 255.992 182.85C267.969 182.85 277.673 173.135 277.673 161.168C277.673 149.203 267.969 139.488 255.992 139.488Z"
|
||||
fill="#FF3554"
|
||||
/>
|
||||
<path
|
||||
d="M117.361 40.7917C104.657 63.5994 97.4173 89.8623 97.4173 117.806C97.4173 205.343 168.461 276.388 255.992 276.388C321.022 276.388 373.805 329.165 373.805 394.194C373.805 459.222 321.022 512 255.992 512C114.687 512 0 397.312 0 256C0 165.766 46.7638 86.3854 117.361 40.7917ZM255.992 329.149C244.032 329.149 234.316 338.865 234.316 350.831C234.316 362.798 244.032 372.512 255.992 372.512C267.969 372.512 277.673 362.798 277.673 350.831C277.673 338.865 267.969 329.149 255.992 329.149ZM299.355 372.512C287.391 372.512 277.673 382.227 277.673 394.194C277.673 406.161 287.391 415.876 299.355 415.876C311.332 415.876 321.036 406.161 321.036 394.194C321.036 382.227 311.332 372.512 299.355 372.512ZM255.992 415.876C244.032 415.876 234.316 425.59 234.316 437.557C234.316 449.523 244.032 459.239 255.992 459.239C267.969 459.239 277.673 449.523 277.673 437.557C277.673 425.59 267.969 415.876 255.992 415.876ZM212.634 372.512C200.669 372.512 190.954 382.227 190.954 394.194C190.954 406.161 200.669 415.876 212.634 415.876C224.601 415.876 234.316 406.161 234.316 394.194C234.316 382.227 224.601 372.512 212.634 372.512Z"
|
||||
fill="#3A99FF"
|
||||
/>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,8 @@
|
|||
<div class="flex w-full flex-row items-center justify-end gap-4 text-[#A6A5A7]">
|
||||
<a
|
||||
class="p-2 transition hover:text-white"
|
||||
href="https://git.suyu.dev/explore/organizations"
|
||||
href="https://gitlab.com/suyu-emu/suyu"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<CodeBranchOutline />
|
||||
|
|
@ -75,6 +76,7 @@
|
|||
<a
|
||||
class="p-2 transition hover:text-white"
|
||||
href="https://discord.gg/suyu"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<DiscordSolid />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,40 @@
|
|||
<script lang="ts">
|
||||
import { XCircleOutline } from "flowbite-svelte-icons";
|
||||
import { Dialog } from "radix-svelte";
|
||||
import type { ResolvedProps } from "radix-svelte/internal/helpers";
|
||||
|
||||
import embedImage from "$assets/branding/suyu__Embed-Image.png";
|
||||
import suyuWindow from "$assets/mockups/suyuwindow.png";
|
||||
|
||||
let rootOpen: boolean;
|
||||
let rootModal: boolean = true;
|
||||
let portalContainer: HTMLElement | string;
|
||||
let contentOpenAutoFocus: boolean = true;
|
||||
let contentCloseAutoFocus: boolean = true;
|
||||
|
||||
let metadata = {
|
||||
url: "https://suyu.dev",
|
||||
title: "suyu - Open-source, non-profit Switch emulator",
|
||||
description:
|
||||
"suyu is a familiar C++ based Nintendo Switch emulator with a focus on compatibility. Completely free and open-source, forever. Download it here.",
|
||||
image: embedImage,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>suyu - Open-source, non-profit Switch emulator</title>
|
||||
<title>{metadata.title}</title>
|
||||
<meta name="description" content={metadata.description} />
|
||||
|
||||
<meta property="og:url" content={metadata.url} />
|
||||
<meta property="og:title" content={metadata.title} />
|
||||
<meta property="og:description" content={metadata.description} />
|
||||
<meta property="og:image" content={metadata.image} />
|
||||
|
||||
<meta name="twitter:url" content={metadata.url} />
|
||||
<meta name="twitter:title" content={metadata.title} />
|
||||
<meta name="twitter:description" content={metadata.description} />
|
||||
<meta name="twitter:image" content={metadata.image} />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
</svelte:head>
|
||||
|
||||
<div
|
||||
|
|
@ -27,27 +62,63 @@
|
|||
suyu is the open-source, non-profit Switch emulator
|
||||
</h1>
|
||||
<p class="max-w-[36rem] text-lg leading-relaxed text-[#A6A5A7]">
|
||||
suyu is a C++ based Switch emulator with a focus on compatibility. Completely free and
|
||||
open-source, forever.
|
||||
suyu is a familiar C++ based Switch emulator with a focus on compatibility. Completely free
|
||||
and open-source, forever.
|
||||
</p>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button class="cta-button">
|
||||
Download <svg
|
||||
class=""
|
||||
style="--icon-color:#000"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="#000"
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
><path
|
||||
d="M5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10.5303 8.53033C10.8207 8.23999 10.8236 7.77014 10.5368 7.47624L6.63419 3.47624C6.34492 3.17976 5.87009 3.17391 5.57361 3.46318C5.27713 3.75244 5.27128 4.22728 5.56054 4.52376L8.94583 7.99351L5.46967 11.4697Z"
|
||||
></path></svg
|
||||
>
|
||||
</button>
|
||||
<div class="button text-[#8A8F98]">
|
||||
<Dialog.Root bind:modal={rootModal} bind:open={rootOpen}>
|
||||
<Dialog.Trigger class="cta-button">
|
||||
Download <svg
|
||||
class=""
|
||||
style="--icon-color:#000"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="#000"
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
><path
|
||||
d="M5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10.5303 8.53033C10.8207 8.23999 10.8236 7.77014 10.5368 7.47624L6.63419 3.47624C6.34492 3.17976 5.87009 3.17391 5.57361 3.46318C5.27713 3.75244 5.27128 4.22728 5.56054 4.52376L8.94583 7.99351L5.46967 11.4697Z"
|
||||
></path></svg
|
||||
>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay
|
||||
class="fixed inset-0 z-[9999] bg-black/80 data-[state=open]:animate-[overlayShow_555ms_cubic-bezier(.16,1,.3,1)]"
|
||||
/>
|
||||
<Dialog.Content
|
||||
class="fixed left-[50%] top-[50%] z-[9999] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%]
|
||||
translate-y-[-50%] rounded-md bg-white p-[25px] shadow-lg
|
||||
focus:outline-none data-[state=open]:animate-[contentShow_555ms_cubic-bezier(.16,1,.3,1)]"
|
||||
openAutoFocus={contentOpenAutoFocus}
|
||||
closeAutoFocus={contentCloseAutoFocus}
|
||||
>
|
||||
<Dialog.Title class="m-0 text-2xl font-medium text-black">
|
||||
suyu isn't available for download yet.</Dialog.Title
|
||||
>
|
||||
<Dialog.Description class="mb-5 mt-[10px] leading-normal text-zinc-600">
|
||||
Official downloads for suyu aren't available yet, but you're welcome to
|
||||
compile it yourself from the source code. If you're not comfortable with
|
||||
that, we recommend you wait for the official release.
|
||||
</Dialog.Description>
|
||||
|
||||
<Dialog.Close
|
||||
class="absolute right-[10px] top-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center
|
||||
justify-center rounded-full text-black focus:outline-none focus:ring-2 focus:ring-black"
|
||||
aria-label="Close"
|
||||
>
|
||||
<XCircleOutline />
|
||||
</Dialog.Close>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
<a
|
||||
href="https://gitlab.com/suyu-emu/"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
class="button text-[#8A8F98]"
|
||||
>
|
||||
Contribute <svg
|
||||
class=""
|
||||
style="--icon-color:#8A8F98"
|
||||
|
|
@ -62,9 +133,10 @@
|
|||
d="M5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L10.5303 8.53033C10.8207 8.23999 10.8236 7.77014 10.5368 7.47624L6.63419 3.47624C6.34492 3.17976 5.87009 3.17391 5.57361 3.46318C5.27713 3.75244 5.27128 4.22728 5.56054 4.52376L8.94583 7.99351L5.46967 11.4697Z"
|
||||
></path></svg
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full flex-col lg:flex-row">
|
||||
<div
|
||||
class="flex w-full flex-shrink-0 flex-col gap-8 rounded-b-[2.25rem] bg-black p-12 lg:w-[35%]"
|
||||
|
|
@ -95,11 +167,78 @@
|
|||
alt=""
|
||||
decoding="async"
|
||||
loading="lazy"
|
||||
src="/img/bettercrophero.png"
|
||||
src={suyuWindow}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative mt-48 flex w-full flex-col gap-6 overflow-hidden rounded-[2.25rem] bg-[#eee] p-8 text-black md:p-12"
|
||||
>
|
||||
<h1 class="text-[24px] leading-[1.41] md:text-[60px] md:leading-[1.1]">
|
||||
Built by and for the community
|
||||
</h1>
|
||||
<p class="max-w-[40rem] text-lg leading-relaxed text-[#4D4D4D]">
|
||||
The future of suyu is shaped by you. New features are always being added, and our community
|
||||
continually shapes the direction of the project.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex w-full flex-col gap-8 lg:flex-row">
|
||||
<a
|
||||
href="https://discord.gg/suyu/"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
class="relative w-full rounded-[2.25rem] bg-[#5451ff] p-12"
|
||||
>
|
||||
<h2 class="text-[24px] leading-[1.41] md:text-[60px] md:leading-[1.1]">Discord</h2>
|
||||
<p class="mt-2 text-lg leading-relaxed">
|
||||
Join our Discord server to chat with 14,000+ suyu users and developers. Get the latest
|
||||
updates and help with any issues you have.
|
||||
</p>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
class="absolute right-12 top-12 h-12 w-12"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="4"
|
||||
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://gitlab.com/suyu-emu/"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
class="relative w-full rounded-[2.25rem] bg-[#f78c40] p-12 text-black"
|
||||
>
|
||||
<h2 class="text-[24px] leading-[1.41] md:text-[60px] md:leading-[1.1]">GitLab</h2>
|
||||
<p class="mt-2 text-lg leading-relaxed">
|
||||
GitLab is where all the magic of suyu happens. We're always looking for new contributors
|
||||
to help us out, so feel free to check out our code.
|
||||
</p>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
class="absolute right-12 top-12 h-12 w-12"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="4"
|
||||
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div data-spacer-element class="min-h-[400px]"></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue