emuplace/folium.emuplace.app
1
0
Fork 0
mirror of https://github.com/emuplace/folium.emuplace.app.git synced 2024-10-18 10:42:38 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added initial website

Browse Source
This commit is contained in:
Jarrod Norwell 2024-08-28 15:58:46 +08:00
parent ffbd248749
commit aabc6e0dc8
57 changed files with 10222 additions and 4271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
.firebase/hosting.ZGlzdA.cache Normal file
View File

@ -0,0 +1,27 @@
index.html,1724150865950,36bf694283661da8a383fc293740c6eacb230ad30982d4acbca572ca093d07b0
favicon.svg,1724150865785,adc7e10f9bbcf8f9f82633c10dff6adf766bb3b521a127257964852e54d40a7f
Icon_Favicon.png,1724150865785,bbe01a02150c6613c61a46825cc56efd7f9b8bdfde2cfa9045a067d9f30df4f8
rewrite/index.html,1724150865959,8e8c8eda6d3076ae3c8d3fb133de0234e37e68a9eebfb9f077961f1bfe1401a3
privacypolicy/index.html,1724150865950,af79c7b82f7bd2467ad474777bcdeddb3f98d3746a0e159a3ab03f8f1b066c37
assets/privacypolicy-DmHm4XD7.js,1724150865950,afb69f2e27557fd4d578d2760e1e957484a770d2efe9da9ac0cacd13c51403d6
assets/rewrite-DQvOf9hT.js,1724150865950,7fd513e1e92b61fd631ab850c28f105470660ee87b2272491d5d9bd936c093ff
assets/privacypolicy-CgDeaZox.css,1724150865950,365af215932a3b9f4d0ab994bb764044534be07e1a625db529637c5add2b5f2f
assets/Space-Bt6J9gIj.js,1724150865950,e6156cd91b77a65c38ec9e0770feb3487324743e07e8c065c9e1a2cd536b2f23
assets/index-D2CsErMz.js,1724150865950,3de642ba136ee18144d9ef0567870c2cece3ffcd3cc76f610c4cb4071de044c6
assets/Button-CqNtQ4v5.js,1724150865950,4af81a4eca8c1d5ad292711b9c45613820d9619f72bdde3be6d30d1096dc1c7a
assets/theme-Dl6AsU4L.css,1724150865950,b9c0cc5e686d3ded86588178e77631a80e95ba8e331f55ae2d2cd3916c3896f6
rewrite/authentication.png,1724150865803,28bc8b2ae33cfdc9e9e51300e578f090961606c4b5759d3bc64d8f47094a97fd
rewrite/archive.png,1724150865803,2fde90526c20baad0e6cf84796af2137052863cf8f3566ebd6ee97c50cdd08d4
assets/theme-BZwQ3l9Y.js,1724150865950,41f4f54294aa6bd890d35dc451367df99434593ff4f4353149745b8f58f7cbed
rewrite/cytrus_settings.png,1724150865803,f76460e380d7ed7022c779f1330db708c3234a79e73811f96aaa12239b93eaa9
rewrite/search.png,1724150865803,6c3b0836ea38572fb821565171c3cf5d798e40595224dc0002d1b77448fb8fb5
rewrite/grape.png,1724150865803,c4f1d78e2d3656b25b58eaabf6fe3dfb4cc5a3677d89fbf08c1d4a063551d64f
three.png,1724150865813,47ca5746a6e5e2ba1017a9f121e8d0b04a35c647352496a35e43a0c2cd3bdce4
rewrite/cytrus.png,1724150865803,0671f60315bf26e5fb8711e878869e1c2ae5a79df79148c5a57fbe87125fc821
rewrite/library.png,1724150865803,af9ea574d29d2a906e29634af7bb6fc9ac1b78207c5413633fe45518493d73c6
one.png,1724150865803,12faad801d3c8c2ef1303b051c9f12b360ad1a76c57873de15518b84d07b6c5c
four.png,1724150865785,7d346f574b0d4ce8756ecfbff6bbf36a6bd867d232146887d2b185e9e08e52cd
two.png,1724150865840,ff90e4f097bc234cd65f778995947f04fb46ca8decf2fbd46de1ab90e976ea47
rewrite/settings.png,1724150865813,0834ef2d654bd26ea1d8e1617a1f801ce16f0e1d953795ecd02456c74d3cd185
Icon.png,1724150865785,70699363f0a9ead886690eef35b2d1883d8927e9c7c2560914bd1d7cf606abe5
ipas/Folium-v1.6-Sideload.ipa.zip,1724150865794,d16ebbf593ae76f284091104d713af5f8d808817a124a3a8b5e33546fc9fd320

5
.firebaserc Normal file
View File

@ -0,0 +1,5 @@
{
"projects": {
"default": "folium-45df2"
}
}

20
.github/workflows/firebase-hosting-merge.yml vendored Normal file
View File

@ -0,0 +1,20 @@
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on merge
on:
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_FOLIUM_45DF2 }}
channelId: live
projectId: folium-45df2

21
.github/workflows/firebase-hosting-pull-request.yml vendored Normal file
View File

@ -0,0 +1,21 @@
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on PR
on: pull_request
permissions:
checks: write
contents: read
pull-requests: write
jobs:
build_and_preview:
if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_FOLIUM_45DF2 }}
projectId: folium-45df2

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"editor.detectIndentation": false
}

16
firebase.json Normal file
View File

@ -0,0 +1,16 @@
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

24
index.html
View File

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
/>
<title>Mantine Vite template</title>
</head>
<body>
<link rel="icon" type="image/svg+xml" href="/Icon_Favicon.png" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" />
<title>Folium</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
<script type="module" src="src/NewHome/newhome_main.tsx"></script>
</body>
</html>

5970
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

75
package.json
View File

@ -1,37 +1,42 @@
{
"name": "vite-min-template",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@mantine/core": "7.10.0",
"@mantine/hooks": "7.10.0",
"@mantine/vanilla-extract": "7.10.0",
"@vanilla-extract/css": "^1.14.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.65",
"@types/react-dom": "^18.2.21",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vanilla-extract/vite-plugin": "^4.0.6",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.35",
"postcss-preset-mantine": "1.15.0",
"postcss-simple-vars": "^7.0.1",
"typescript": "^5.4.2",
"vite": "^5.1.6"
},
"packageManager": "yarn@4.2.2"
"name": "vite-min-template",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@mantine/carousel": "^7.12.1",
"@mantine/core": "^7.10.0",
"@mantine/hooks": "7.10.0",
"@mantine/vanilla-extract": "7.10.0",
"@tabler/icons-react": "^3.12.0",
"@vanilla-extract/css": "^1.14.1",
"embla-carousel-react": "^7.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-markdown": "^9.0.1",
"react-tweet-embed": "^2.0.0"
},
"devDependencies": {
"@types/react": "^18.2.65",
"@types/react-dom": "^18.2.21",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vanilla-extract/vite-plugin": "^4.0.6",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.35",
"postcss-preset-mantine": "1.15.0",
"postcss-simple-vars": "^7.0.1",
"typescript": "^5.4.2",
"vite": "^5.1.6"
},
"packageManager": "yarn@4.2.2"
}

16
privacypolicy/index.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" />
<title>Privacy Policy</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="../src/PrivacyPolicy/privacypolicy_main.tsx"></script>
</body>
</html>

BIN
public/Icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

BIN
public/Icon_Favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
public/four.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
public/ipas/Folium-v1.6-Sideload.ipa.zip Normal file
View File

Binary file not shown.

BIN
public/one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
public/rewrite/archive.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

BIN
public/rewrite/authentication.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
public/rewrite/cytrus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
public/rewrite/cytrus_settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
public/rewrite/grape.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 905 KiB

BIN
public/rewrite/library.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
public/rewrite/mango.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 454 KiB

BIN
public/rewrite/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 730 KiB

BIN
public/rewrite/settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 MiB

BIN
public/three.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
public/two.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

16
rewrite/index.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" />
<title>Rewrite (v1.7)</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="../src/Rewrite/rewrite_main.tsx"></script>
</body>
</html>

14
src/App.tsx
View File

@ -1,14 +0,0 @@
import "@mantine/core/styles.css";
import { MantineProvider } from "@mantine/core";
import { theme } from "./theme";
import { Welcome } from "./Welcome/Welcome";
import { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle";
export default function App() {
return (
<MantineProvider theme={theme}>
<Welcome />
<ColorSchemeToggle />
</MantineProvider>
);
}

13
src/ColorSchemeToggle/ColorSchemeToggle.tsx
View File

@ -1,13 +0,0 @@
import { Button, Group, useMantineColorScheme } from '@mantine/core';
export function ColorSchemeToggle() {
const { setColorScheme } = useMantineColorScheme();
return (
<Group justify="center" mt="xl">
<Button onClick={() => setColorScheme('light')}>Light</Button>
<Button onClick={() => setColorScheme('dark')}>Dark</Button>
<Button onClick={() => setColorScheme('auto')}>Auto</Button>
</Group>
);
}

40
src/Home/Home.tsx Normal file
View File

@ -0,0 +1,40 @@
import '@mantine/carousel/styles.css';
import "@mantine/core/styles.css";
import { Container, MantineProvider, Space } from "@mantine/core";
import { theme } from "../theme";
// import { CardsCarousel } from './CardsCarousel/CardsCarousel';
// import { DoubleHeader } from "./DoubleHeader/DoubleHeader";
// import { FAQSimple } from "./FAQSimple/FAQSimple";
// import { FooterSimple } from "./FooterSimple/FooterSimple";
// import { NintendoFeaturesTitle } from "./FeaturesTitles/NintendoFeaturesTitle";
// import { PlayStationFeaturesTitle } from "./FeaturesTitles/PlayStationFeaturesTitle";
// import { SEGAFeaturesTitle } from './FeaturesTitles/SEGAFeaturesTitle';
// // import { HeroText } from "./HeroText/HeroText";
// import { Welcome } from "./Welcome/Welcome";
//
// import { HomeGameplayCarousel } from './HomeGameplayCarousel/HomeGameplayCarousel';
// import { DeveloperFooter } from './DeveloperFooter/DeveloperFooter';
import { HomeHero } from './HomeHero/HomeHero';
import { HomeCores } from './HomeCores/HomeCores';
import { HomeScreenshots } from './HomeScreenshots/HomeScreenshots';
import { HomeFAQ } from './HomeFAQ/HomeFAQ';
import { HomeFooter } from './HomeFooter/HomeFooter';
export default function Home() {
return (
<MantineProvider theme={theme}>
<Container pt={100}>
<HomeHero />
<Space h={'xl'} />
<HomeCores />
<Space h={'xl'} />
<HomeScreenshots />
<Space h={'xl'} />
<HomeFAQ />
<Space h={'xl'} />
<HomeFooter />
</Container>
</MantineProvider>
);
}

104
src/Home/HomeCores/HomeCoreCard.tsx Normal file
View File

@ -0,0 +1,104 @@
import {
Badge, SimpleGrid,
Space, Text, ThemeIcon,
Title, useMantineTheme
} from '@mantine/core';
import { Icon, IconProps } from '@tabler/icons-react';
import { ForwardRefExoticComponent, RefAttributes } from 'react';
interface HomeCoreFeatures {
icon: ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;
title: string;
subtitle: string;
}
export enum Availability {
AVAILABLE = 0,
COMING_SOON = 1
}
interface HomeCoreCardProps {
availability: Availability;
features: Array<HomeCoreFeatures>;
subtitle: string;
title: string;
}
export function HomeCoreCard({ title, subtitle, availability, features }: HomeCoreCardProps) {
const theme = useMantineTheme();
const map = features.map((feature) => (
<div key={feature.title}>
<ThemeIcon radius='md' size={'lg'}>
<feature.icon style={{ height: '66%', width: '66%' }} />
</ThemeIcon>
<Space h={'md'} />
<Title order={3}>
{feature.title}
</Title>
<Text c={'dimmed'}>
{feature.subtitle}
</Text>
</div>
));
return (
<>
<Title order={2}>
{title}
</Title>
<Text c={'dimmed'}>
{subtitle}
</Text>
<Space h={'md'} />
<Badge color={availability == Availability.AVAILABLE ? theme.primaryColor : 'orange'}>
{availability == Availability.AVAILABLE ? 'Available Now' : 'Coming Soon'}
</Badge>
<Space h={'lg'} />
<SimpleGrid cols={{ base: 1, sm: 2 }}>
{map}
</SimpleGrid>
</>
);
/*
const items = features.map((feature) => (
<div key={feature.title}>
<ThemeIcon
size={'xl'}
radius="md"
color={'black'}
>
<feature.icon style={{ width: rem(26), height: rem(26) }} stroke={2} />
</ThemeIcon>
<Text fz="lg" mt="sm" fw={500}>
{feature.title}
</Text>
<Text c="dimmed" fz="sm">
{feature.subtitle}
</Text>
</div>
));
return (
<Grid gutter={80}>
<Grid.Col span={{ base: 12, md: 5 }}>
<Title className={classes.title} order={2}>
{title}
</Title>
<Text c="dimmed">
{subtitle}
</Text>
<Text c={availability == 'Available Now' ? 'green' : 'orange'}>
{availability}
</Text>
</Grid.Col>
<Grid.Col span={{ base: 12, md: 7 }}>
<SimpleGrid cols={{ base: 1, md: 2 }} spacing={30}>
{items}
</SimpleGrid>
</Grid.Col>
</Grid>
);*/
}

23
src/Home/HomeCores/HomeCores.module.css Normal file
View File

@ -0,0 +1,23 @@
.wrapper {
position: relative;
margin-bottom: rem(120px);
box-sizing: border-box;
}
.title {
font-family:
Greycliff CF,
var(--mantine-font-family);
font-size: rem(36px);
font-weight: 900;
line-height: 1.1;
margin-bottom: var(--mantine-spacing-md);
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
}
.control {
&[data-inactive] {
opacity: 0;
cursor: default;
}
}

155
src/Home/HomeCores/HomeCores.tsx Normal file
View File

@ -0,0 +1,155 @@
/*
import { Carousel } from '@mantine/carousel';
import { Container, rem } from '@mantine/core';
import {
IconDeviceGamepad, IconDeviceGamepad2, IconBrandGithub,
IconMicrophone, IconVolume, IconCircleArrowLeft,
IconCircleArrowRight
} from '@tabler/icons-react';
import { HomeCoreCard } from './HomeCoreCard';
import classes from './HomeCores.module.css';
*/
import { Tabs, Space, Title } from "@mantine/core";
import {
IconDeviceGamepad, IconDeviceGamepad2, IconBrandGithub,
IconMicrophone, IconVolume
} from '@tabler/icons-react';
import { Availability, HomeCoreCard } from './HomeCoreCard';
const data = [
{
availability: Availability.AVAILABLE,
features: [
{
icon: IconDeviceGamepad,
title: 'Full Controller Support',
subtitle: 'Supports Backbone One, PlayStation DualShock 4, PlayStation 5 DualSense, Xbox Series S and Xbox Series X controllers'
},
{
icon: IconBrandGithub,
title: 'Fully Open Source',
subtitle: 'Licensed under GPLv3 to maintain full transparency and to give people the opportunity to build Folium for themselves'
},
{
icon: IconMicrophone,
title: 'Audio Input',
subtitle: 'Making use of OpenAL, Folium provides supported cores with crystal clear audio input'
},
{
icon: IconVolume,
title: 'Native Audio Output',
subtitle: 'Making use of Apple\'s CoreAudio API, Folium provides a seamless audio listening experience'
}
],
title: 'Nintendo',
subtitle: 'Emulate the Game Boy Advance, Nintendo 3DS and Nintendo DS'
},
{
availability: Availability.COMING_SOON,
features: [
{
icon: IconDeviceGamepad2,
title: 'Full Controller Support',
subtitle: 'Supports Backbone One, PlayStation DualShock 4, PlayStation 5 DualSense, Xbox Series S and Xbox Series X controllers'
},
{
icon: IconBrandGithub,
title: 'Fully Open Source',
subtitle: 'Licensed under GPLv3 to maintain full transparency and to give people the oppurtunity to build Folium for themselves'
}
],
title: 'PlayStation',
subtitle: 'Emulate the PlayStation 1 and PlayStation 2'
},
{
availability: Availability.COMING_SOON,
features: [
{
icon: IconDeviceGamepad,
title: 'Full Controller Support',
subtitle: 'Supports Backbone One, PlayStation DualShock 4, PlayStation 5 DualSense, Xbox Series S and Xbox Series X controllers'
},
{
icon: IconBrandGithub,
title: 'Fully Open Source',
subtitle: 'Licensed under GPLv3 to maintain full transparency and to give people the oppurtunity to build Folium for themselves'
}
],
title: 'SEGA',
subtitle: 'Emulate the SEGA Genesis'
}
];
export function HomeCores() {
const tabValues = [
{
disabled: false,
id: 'nintendo',
title: 'Nintendo'
},
{
disabled: true,
id: 'playstation',
title: 'PlayStation'
},
{
disabled: true,
id: 'sega',
title: 'SEGA'
}
];
const tabs = tabValues.map((tab) => (
<Tabs.Tab disabled={tab.disabled} value={tab.id}>{tab.title}</Tabs.Tab>
));
const panels = tabValues.map((tab, index) => (
<Tabs.Panel value={tab.id}>
<HomeCoreCard {...data[index]} />
</Tabs.Panel>
));
return (
<>
<Title order={1}>
Cores
</Title>
<Space h={'md'} />
<Tabs defaultValue={tabValues[0].id} radius={'xl'} variant="pills">
<Tabs.List>
{tabs}
</Tabs.List>
<Space h={'md'} />
{...panels}
</Tabs>
</>
);
/*
const slides = data.map((item) => (
<Carousel.Slide key={item.title}>
<HomeCoreCard {...item} />
</Carousel.Slide>
));
return (
<Container className={classes.wrapper}>
<Carousel
align={'start'}
classNames={classes}
slideSize={'100%'}
slideGap={{ base: rem(2), sm: 'xl' }}
nextControlIcon={
<IconCircleArrowRight size={'lg'} />
}
previousControlIcon={
<IconCircleArrowLeft size={'lg'} />
}
>
{slides}
</Carousel>
</Container>
);
*/
}

86
src/Home/HomeFAQ/HomeFAQ.tsx Normal file
View File

@ -0,0 +1,86 @@
import { Space, Title, Accordion } from '@mantine/core';
import { IconMoneybag, IconFileImport, IconPaint } from '@tabler/icons-react';
/*
const questions = [
{
value: 'purchase-price-and-type',
answer: 'Folium will cost a one-time payment of $4.99 USD',
question: 'What will Folium cost on the App Store?'
},
{
value: 'games-and-system-files',
answer: 'Games and system files must be dumped from a console or handheld you own',
question: 'How do we get games and system files?'
},
{
value: 'supported-and-upcoming-cores',
answer: 'Currently the Game Boy Advance, Nintendo 3DS and Nintendo DS are supported with plans for a handful of other retro consoles and handhelds to be added',
question: 'What consoles and handhelds are and will be supported?'
},
{
value: 'is-jit-supported',
answer: 'No. Apple does not allow JIT for apps on both the App Store and TestFlight',
question: 'Does Folium on the App Store or TestFlight support JIT?'
},
{
value: 'game-compatibility',
answer: 'Folium has a high compatibility for most games in most of the cores however, some games work better than others and the device it is being played on plays a significant role in compatibility',
question: 'Do all games work on all cores within Folium?'
},
{
value: 'missing-features-and-functionality',
answer: 'Folium is still very much a work-in-progress, a lot of features and functionality do exist within the app but there is still a lot more that need to be added',
question: 'Does Folium contain all features and functionality?'
},
{
value: 'cheats-mods-and-saves',
answer: 'The Cytrus core supports all 3 however, some need to be done manually through Files. Grape supports saves but neither cheats nor mods at this time',
question: 'Does Folium support cheats, mods and saves?'
},
];
*/
const questions = [
{
icon: IconMoneybag,
id: 'pricing',
question: 'How much does Folium cost on the App Store?',
answer: 'Folium costs a one-time payment of $4.99 USD'
},
{
icon: IconFileImport,
id: 'file-types',
question: 'What file extensions does Folium support?',
answer: 'Folium currently supports .3ds, .app, .cia, .cci and .cxi for Cytrus and .gba, .ds and .nds for Grape'
},
{
icon: IconPaint,
id: 'skins',
question: 'How does someone make a skin for Folium?',
answer: 'Skins can be made by following the guide here: https://official-antique.gitbook.io/folium'
}
];
export function HomeFAQ() {
const map = questions.map((question) => (
<Accordion.Item value={question.id}>
<Accordion.Control icon={<question.icon size={20} />}>
{question.question}
</Accordion.Control>
<Accordion.Panel>{question.answer}</Accordion.Panel>
</Accordion.Item>
));
return (
<>
<Title order={1}>
Frequently Asked Questions
</Title>
<Space h={'md'} />
<Accordion radius={'md'} variant="contained">
{map}
</Accordion>
</>
);
}

21
src/Home/HomeFooter/HomeFooter.module.css Normal file
View File

@ -0,0 +1,21 @@
.footer {
border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
}
.inner {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--mantine-spacing-xl);
padding-bottom: var(--mantine-spacing-xl);
@media (max-width: $mantine-breakpoint-xs) {
flex-direction: column;
}
}
.links {
@media (max-width: $mantine-breakpoint-xs) {
margin-top: var(--mantine-spacing-md);
}
}

50
src/Home/HomeFooter/HomeFooter.tsx Normal file
View File

@ -0,0 +1,50 @@
import { Container, Group, ActionIcon, Title } from '@mantine/core';
import {
IconBrandReddit, IconBrandTwitch,
IconBrandTwitter, IconBrandYoutube
} from '@tabler/icons-react';
import classes from './HomeFooter.module.css';
export function HomeFooter() {
return (
<div className={classes.footer}>
<Container className={classes.inner}>
<Title order={2}>
Folium
</Title>
<Group className={classes.links} justify="flex-end" wrap="nowrap">
{/*<ActionIcon onClick={(event) => {
window.open('https://youtube.com/watch?v=dQw4w9WgXcQ', '_blank');
event.preventDefault();
}} color='blue' size="lg" variant="transparent">
<IconBrandOnlyfans style={{ width: '70%', height: '70%' }} stroke={2} />
</ActionIcon>*/}
<ActionIcon onClick={(event) => {
window.open('https://reddit.com/u/antique_codes', '_blank');
event.preventDefault();
}} color='orange' size="lg" variant="transparent">
<IconBrandReddit style={{ width: '70%', height: '70%' }} stroke={2} />
</ActionIcon>
<ActionIcon onClick={(event) => {
window.open('https://twitch.tv/antique_codes', '_blank');
event.preventDefault();
}} color='violet' size="lg" variant="transparent">
<IconBrandTwitch style={{ width: '70%', height: '70%' }} stroke={2} />
</ActionIcon>
<ActionIcon onClick={(event) => {
window.open('https://twitter.com/antique_codes', '_blank');
event.preventDefault();
}} color='blue' size="lg" variant="transparent">
<IconBrandTwitter style={{ width: '70%', height: '70%' }} stroke={2} />
</ActionIcon>
<ActionIcon onClick={(event) => {
window.open('https://www.youtube.com/@antique_plays', '_blank');
event.preventDefault();
}} color='red' size="lg" variant="transparent">
<IconBrandYoutube style={{ width: '70%', height: '70%' }} stroke={2} />
</ActionIcon>
</Group>
</Container>
</div>
);
}

22
src/Home/HomeHero/HomeHero.css.ts Normal file
View File

@ -0,0 +1,22 @@
import { style } from "@vanilla-extract/css";
import { vars } from "../../theme";
import { rem } from "@mantine/core";
export const title = style({
color: vars.colors.black,
fontSize: rem(100),
fontWeight: 900,
letterSpacing: rem(-2),
selectors: {
[vars.darkSelector]: {
color: vars.colors.white,
},
},
"@media": {
[vars.smallerThan("md")]: {
fontSize: rem(50),
},
},
});

63
src/Home/HomeHero/HomeHero.module.css Normal file
View File

@ -0,0 +1,63 @@
.wrapper {
position: relative;
margin-bottom: rem(120px);
box-sizing: border-box;
}
.inner {
position: relative;
padding-top: rem(200px);
padding-bottom: rem(120px);
@media (max-width: $mantine-breakpoint-sm) {
padding-bottom: rem(80px);
padding-top: rem(80px);
}
}
.title {
font-family:
Greycliff CF,
var(--mantine-font-family);
font-size: rem(62px);
font-weight: 900;
line-height: 1.1;
margin: 0;
padding: 0;
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
@media (max-width: $mantine-breakpoint-sm) {
font-size: rem(42px);
line-height: 1.2;
}
}
.description {
margin-top: var(--mantine-spacing-xl);
font-size: rem(24px);
@media (max-width: $mantine-breakpoint-sm) {
font-size: rem(18px);
}
}
.controls {
margin-top: calc(var(--mantine-spacing-xl) * 2);
@media (max-width: $mantine-breakpoint-sm) {
margin-top: var(--mantine-spacing-xl);
}
}
.control {
height: rem(54px);
padding-left: rem(38px);
padding-right: rem(38px);
@media (max-width: $mantine-breakpoint-sm) {
height: rem(54px);
padding-left: rem(18px);
padding-right: rem(18px);
flex: 1;
}
}

158
src/Home/HomeHero/HomeHero.tsx Normal file
View File

@ -0,0 +1,158 @@
import {
Blockquote, Button, Group, SimpleGrid, Space, Stack, Text, Title,
useMantineTheme
} from '@mantine/core';
import {
IconBrandDiscord, IconBrandGithub,
IconExclamationCircle
} from '@tabler/icons-react';
export function HomeHero() {
const theme = useMantineTheme();
// const map = changes.map((change) => (
// <Accordion.Item value={change.id}>
// <Accordion.Control icon={<IconTimelineEventText size={20} />}>
// {change.title}
// </Accordion.Control>
// <Accordion.Panel>
// <List>
// {change.changes.map((change) => (<List.Item>{change}</List.Item>))}
// </List>
// </Accordion.Panel>
// </Accordion.Item>
// ));
return (
<>
<Title c={theme.primaryColor} order={1}>
Folium
</Title>
<Text c={'dimmed'}>
Beautifully designed, high performing multi-system emulation in the palm of your hands
</Text>
<Space h={'md'} />
<Group>
<Stack gap={'sm'}>
<Button onClick={(event) => {
window.open('ipas/Folium-v1.6-Sideload.ipa.zip', '_blank');
event.preventDefault();
}} radius={'xl'} variant='default'>
Download
</Button>
<Text c={'dimmed'} ta={'center'}>v1.6</Text>
</Stack>
<Stack gap={'sm'}>
<Button onClick={(event) => {
window.open('https://apps.apple.com/us/app/folium/id6498623389', '_blank');
event.preventDefault();
}} radius={'xl'}>
$4.99 USD
</Button>
<Text c={'dimmed'} ta={'center'}>v1.6</Text>
</Stack>
</Group>
<Space h={'xl'} />
<Blockquote color='red' icon={<IconExclamationCircle size={30} />} iconSize={30} px={'md'} py={'md'} radius={'md'}>
Please read the rules before interacting with the Discord server
</Blockquote>
<Space h={'xl'} />
<SimpleGrid cols={{ base: 1, sm: 2 }}>
<div key={'discord'}>
<Title c={'violet'} order={1}>
<IconBrandDiscord /> Discord
</Title>
<Text c={'dimmed'}>
Join the Discord server and get or give help, post gameplay videos and know when the latest releases are available!
</Text>
<Space h={'md'} />
<Button color='violet' onClick={(event) => {
window.open('https://discord.gg/TqsjtpaAtk', '_blank');
event.preventDefault();
}} radius={'xl'}>
Accept Invitation
</Button>
</div>
<div key={'discord'}>
<Title order={1}>
<IconBrandGithub /> GitHub
</Title>
<Text c={'dimmed'}>
Browse the Folium codebase along with the codebase's of all cores used within the application
</Text>
<Space h={'md'} />
<Button onClick={(event) => {
window.open('https://github.com/folium-app', '_blank');
event.preventDefault();
}} radius={'xl'} variant='default'>
Open in GitHub
</Button>
</div>
</SimpleGrid>
{
/*
<Space h={'xl'} />
<Title order={1}>
Upcoming (v1.4)
</Title>
<Text c={'dimmed'}>
Below is a non-exhaustive list of all upcoming additions, changes and fixes coming to Folium
</Text>
<Space h={'md'} />
<Accordion radius={'md'} variant="contained">
{map}
</Accordion>
*/
}
</>
);
/*
return (
<Container className={classes2.wrapper}>
<Title className={classes.title} ta="center" mt={100}>
Welcome to{" "}
<Text
inherit
component="span"
c={'green'}>
Folium
</Text>
</Title>
<Text c="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
Beautifully designed, high performing multi-system emulation in the palm of your hands
</Text>
<Space h={'xl'} />
<Center>
<Stack align='center'>
<Group>
<Stack align='center'>
<Button color={'black'} radius="xl" size="lg" variant="default" onClick={(event) => {
window.open('/ipas/Folium-v1.0.9-Sideload.ipa.zip', '_blank');
event.preventDefault();
}}>
Download
</Button>
<Text c={'dimmed'} size='md'>
v1.0.9 Sideload
</Text>
</Stack>
<Stack align='center'>
<Button color={'blue'} radius="xl" size="lg" variant="filled">
$4.99
</Button>
<Text c={'dimmed'} size='md'>
v1.0.9 AppStore
</Text>
</Stack>
</Group>
<Space h={'xl'} />
<Text c="dimmed" ta="center" size="lg" maw={580} mx="auto">
Developed by <Anchor href='https://jarrodnorwell.com' target='_blank'>Jarrod Norwell</Anchor>
</Text>
</Stack>
</Center>
</Container>
);
*/
}

16
src/Home/HomeScreenshots/HomeScreenshotCard.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Card, Image } from "@mantine/core";
interface HomeScreenshotCardProps {
url: string;
}
export function HomeScreenshotCard({ url }: HomeScreenshotCardProps) {
return (
<>
<Card padding={'lg'} radius={'md'} withBorder>
<Card.Section>
<Image src={url} />
</Card.Section>
</Card></>
);
}

30
src/Home/HomeScreenshots/HomeScreenshots.module.css Normal file
View File

@ -0,0 +1,30 @@
.wrapper {
position: relative;
margin-bottom: rem(120px);
box-sizing: border-box;
}
.title {
font-family:
Greycliff CF,
sans-serif;
font-weight: 900;
color: var(--mantine-color-white);
line-height: 1.2;
font-size: rem(32px);
margin-top: var(--mantine-spacing-xs);
}
.category {
color: var(--mantine-color-white);
opacity: 0.7;
font-weight: 700;
text-transform: uppercase;
}
.control {
&[data-inactive] {
opacity: 0;
cursor: default;
}
}

42
src/Home/HomeScreenshots/HomeScreenshots.tsx Normal file
View File

@ -0,0 +1,42 @@
import { Carousel } from '@mantine/carousel';
import { Space, Title } from '@mantine/core';
import { IconCircleArrowLeftFilled, IconCircleArrowRightFilled } from '@tabler/icons-react';
import { HomeScreenshotCard } from './HomeScreenshotCard';
import classes from './HomeScreenshots.module.css';
const data = [
{ url: '/one.png' },
{ url: '/two.png' },
{ url: '/three.png' },
{ url: '/four.png' }
];
export function HomeScreenshots() {
const slides = data.map((item) => (
<Carousel.Slide key={item.url}>
<HomeScreenshotCard {...item} />
</Carousel.Slide>
));
return (
<>
<Title order={1}>
Screenshots
</Title>
<Space h={'md'} />
<Carousel
align={'start'}
classNames={classes}
slideGap={'md'}
slideSize={{ base: '100%', sm: '33.333333%' }}
nextControlIcon={
<IconCircleArrowRightFilled size={'lg'} />
}
previousControlIcon={
<IconCircleArrowLeftFilled size={'lg'} />
}
>
{slides}
</Carousel></>
);
}

8
src/main.tsx → src/Home/home_main.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import Home from "./Home.tsx";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
<React.StrictMode>
<Home />
</React.StrictMode>
);

35
src/NewHome/NewHome.tsx Normal file
View File

@ -0,0 +1,35 @@
import '@mantine/carousel/styles.css';
import '@mantine/core/styles.css';
import {
Anchor, Button, Flex,
MantineProvider,
Stack, Text, Title
} from '@mantine/core';
import { theme } from '../theme';
export default function NewHome() {
return (
<MantineProvider theme={theme}>
<Flex align={'center'} justify={'center'} h={'100vh'} px={'md'} w={'100vw'}>
<Stack>
<Anchor href='https://twitter.com/antique_codes' ta={'center'} target='_blank'>
@antique_codes
</Anchor>
<Title order={1} ta={'center'}>
Folium
</Title>
<Text c={'dimmed'} ta={'center'}>
Beautifully designed, high performing multi-system emulation in the palm of your hands
</Text>
<Flex align={'center'} gap={'md'} justify={'center'} direction={'row'} wrap={'wrap'}>
<Button component='a' href='https://apps.apple.com/au/app/folium/id6498623389' color='blue' radius={'xl'} variant='filled'>Open App Store</Button>
<Button component='a' href='https://discord.gg/jv3wmCUTw7' color='violet' radius={'xl'}>Join Discord</Button>
<Button component='a' href='https://github.com/folium-app' color='gray' radius={'xl'} variant='filled'>Open GitHub</Button>
<Button component='a' href='/rewrite' radius={'xl'} variant='filled'>Browse Rewrite</Button>
<Button component='a' href='/ipas/Folium-v1.6-Sideload.ipa.zip' color='cyan' radius={'xl'} variant='filled'>Sideload</Button>
</Flex>
</Stack>
</Flex>
</MantineProvider>
);
}

9
src/NewHome/newhome_main.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import NewHome from './NewHome.tsx';
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<NewHome />
</React.StrictMode>
);

14
src/PrivacyPolicy/PrivacyPolicy.tsx Normal file
View File

@ -0,0 +1,14 @@
import '@mantine/carousel/styles.css';
import '@mantine/core/styles.css';
import { MantineProvider } from '@mantine/core';
import { theme } from '../theme';
import { PrivacyPolicyMarkdown } from './PrivacyPolicyMarkdown/PrivacyPolicyMarkdown';
export default function PrivacyPolicy() {
return (
<MantineProvider theme={theme} forceColorScheme='dark'>
<PrivacyPolicyMarkdown />
</MantineProvider>
);
}

6
src/PrivacyPolicy/PrivacyPolicyMarkdown/PrivacyPolicyMarkdown.module.css Normal file
View File

@ -0,0 +1,6 @@
.wrapper {
position: relative;
margin-bottom: rem(120px);
margin-top: rem(120px);
box-sizing: border-box;
}

24
src/PrivacyPolicy/PrivacyPolicyMarkdown/PrivacyPolicyMarkdown.tsx Normal file
View File

@ -0,0 +1,24 @@
import { Container, Space, Text, Title } from "@mantine/core";
import classes from './PrivacyPolicyMarkdown.module.css';
export function PrivacyPolicyMarkdown() {
return (
<Container className={classes.wrapper}>
<Title order={1}>
Privacy Policy
</Title>
<Space h={'xl'} />
<Text>
Folium and its developer take your privacy very seriously. Beyond the information Apple provides to developers that you can decide to provide, it uses no third-party analytics or advertising frameworks.
</Text>
<Space h={'md'} />
<Text>
Folium does have cores that save logs on-device and these can optionally be provided for better assistance in Discord, Reddit, etc. Information within these logs can be but is not limited to device specifications.
</Text>
<Space h={'xl'} />
<Text c={'dimmed'}>
© 2024 Jarrod Norwell. All Right Reserved.
</Text>
</Container>
)
}

9
src/PrivacyPolicy/privacypolicy_main.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import PrivacyPolicy from './PrivacyPolicy';
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<PrivacyPolicy />
</React.StrictMode>
);

27
src/Rewrite/Rewrite.module.css Normal file
View File

@ -0,0 +1,27 @@
.root {
border-radius: var(--mantine-radius-sm);
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
}
.item {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
border: 1px solid transparent;
position: relative;
z-index: 0;
transition: transform 150ms ease;
&[data-active] {
transform: scale(1.03);
z-index: 1;
background-color: var(--mantine-color-body);
border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
box-shadow: var(--mantine-shadow-md);
border-radius: var(--mantine-radius-md);
}
}
.chevron {
&[data-rotate] {
transform: rotate(-90deg);
}
}

500
src/Rewrite/Rewrite.tsx Normal file
View File

@ -0,0 +1,500 @@
import '@mantine/carousel/styles.css';
import '@mantine/core/styles.css';
import {
Accordion, Badge, Container, MantineProvider,
Space, Timeline, Text,
Title, Grid, SimpleGrid,
Image, Paper, ThemeIcon, Button, rem, useMantineColorScheme
} from '@mantine/core';
import {
IconCheck, IconX, IconQuestionMark,
IconCamera
} from '@tabler/icons-react';
import TweetEmbed from 'react-tweet-embed';
import { theme } from '../theme';
import classes from './Rewrite.module.css';
export function Header() {
return (
<>
<Badge color='green' size='lg'>
Rewrite
</Badge>
<Space h={'md'} />
<Title order={1}>
v1.7
</Title>
{/*
<Space h={'md'} />
<Title order={2}>
System Wide
</Title>
<Space h={'md'} />
<Grid>
<Grid.Col span={{ base: 12, md: 4 }}>
<SimpleGrid cols={{ base: 3, md: 2 }}>
<Paper key={'one'} radius={'lg'} withBorder style={{ overflow: 'hidden' }}>
<Image src={'https://placehold.co/1290x2796?text=N/A'} />
</Paper>
</SimpleGrid>
</Grid.Col>
<Grid.Col span={{ base: 12, md: 8 }}>
<Timeline bulletSize={26} lineWidth={2.2}>
<Timeline.Item bullet={
<ThemeIcon c='orange' color='clear' radius={'xl'}>
<IconQuestionMark size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Widgets
</Title>
} lineVariant='dotted'>
<Text c={'red'} mb={4} size='sm'>
App Store only
</Text>
<Text c={'dimmed'}>
TBD
</Text>
<Text size="sm" mt={4}>
In Progress
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='orange' color='clear' radius={'xl'}>
<IconQuestionMark size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Game Center
</Title>
} lineVariant='dotted'>
<Text c={'red'} mb={4} size='sm'>
App Store only
</Text>
<Text c={'dimmed'}>
TBD
</Text>
<Text size="sm" mt={4}>
In Progress
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='orange' color='clear' radius={'xl'}>
<IconQuestionMark size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Dynamic Island
</Title>
} lineVariant='dotted'>
<Text c={'red'} mb={4} size='sm'>
App Store only
</Text>
<Text c={'dimmed'}>
TBD
</Text>
<Text size="sm" mt={4}>
In Progress
</Text>
</Timeline.Item>
</Timeline>
</Grid.Col>
</Grid>
*/}
<Space h={'md'} />
<Title order={2}>
Library
</Title>
<Space h={'md'} />
<Grid>
<Grid.Col span={{ base: 12, md: 4 }}>
<SimpleGrid cols={{ base: 3, md: 2 }}>
<Paper key={'one'} radius={'lg'} withBorder style={{ overflow: 'hidden' }}>
<Image src={'/rewrite/library.png'} />
</Paper>
<Paper key={'two'} radius={'lg'} withBorder style={{ overflow: 'hidden' }}>
<Image src={'/rewrite/settings.png'} />
</Paper>
<Paper key={'three'} radius={'lg'} withBorder style={{ overflow: 'hidden' }}>
<Image src={'/rewrite/cytrus_settings.png'} />
</Paper>
<Paper key={'four'} radius={'lg'} withBorder style={{ overflow: 'hidden' }}>
<Image src={'/rewrite/search.png'} />
</Paper>
</SimpleGrid>
</Grid.Col>
<Grid.Col span={{ base: 12, md: 8 }}>
<Timeline bulletSize={26} lineWidth={2.2}>
<Timeline.Item bullet={
<ThemeIcon c='green' color='clear' radius={'xl'}>
<IconCheck size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Library
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Library is new and improved not only in design but also performance, with the new gradient blur on games with icons and random colours on games without your library never looked better, add onto that the much faster load times you'll be able to start scrolling in no time
</Text>
<Space h={'md'} />
<Title order={4}>
Artwork
</Title>
<Text c={'red'} mb={4} size='sm'>
App Store only
</Text>
<Text c={'dimmed'}>
Games got no icons? Or maybe they do but you want to change them... well now you can! Tap and hold on any game and set a custom artwork which will persist until it's removed
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='green' color='clear' radius={'xl'}>
<IconCheck size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Search
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Search is now faster than ever before as it now uses regex over "contains". Search also closes near-instantly with the use of a cached library completely separate from the search library
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='orange' color='clear' radius={'xl'}>
<IconQuestionMark size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Settings
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Settings are now split up into their respective cores to avoid confusion and allow for multiple changes at a time as opposed to changing one at a time
</Text>
</Timeline.Item>
</Timeline>
</Grid.Col>
</Grid>
<Space h={'md'} />
<Title order={2}>
Cores
</Title>
<Space h={'md'} />
<Grid>
<Grid.Col span={{ base: 12, md: 4 }}>
<SimpleGrid cols={{ base: 3, md: 2 }}>
<Paper key={'one'} radius={'lg'} withBorder style={{ overflow: 'hidden' }}>
<Image src={'/rewrite/cytrus.png'} />
</Paper>
<Paper key={'two'} radius={'lg'} withBorder style={{ overflow: 'hidden' }}>
<Image src={'/rewrite/grape.png'} />
</Paper>
<Paper key={'three'} radius={'lg'} withBorder style={{ overflow: 'hidden' }}>
<Image src={'/rewrite/mango.png'} />
</Paper>
</SimpleGrid>
</Grid.Col>
<Grid.Col span={{ base: 12, md: 8 }}>
<Timeline bulletSize={26} lineWidth={2.2}>
<Timeline.Item bullet={
<ThemeIcon c='orange' color='clear' radius={'xl'}>
<IconQuestionMark size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Nintendo 3DS
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Cytrus is the name of the Nintendo 3DS core within Folium, it is built on top of the latest Mandarine3DS source code on GitHub and supports all 3DS file formats, downloadable content, updates, game controllers, microphone input, speaker output and more
</Text>
<Space h={'md'} />
<Text c={'red'} size='sm'>
Camera, Home Menu, DLC and Updates are currently not supported by Cytrus
</Text>
<Space h={'md'} />
<Accordion variant='contained' classNames={classes}>
<Accordion.Item key={'camera'} value='Camera'>
<Accordion.Control icon={<IconCamera color='orange' style={{ width: rem(20), height: rem(20) }} />}>
Camera
</Accordion.Control>
<Accordion.Panel>
<Text>
Cytrus now has very early camera support, the image is garbled
</Text>
<Space h={'md'} />
<Button component='a' href='https://github.com/folium-app/Cytrus/commit/dbbfc7b6b0f049d63f1255226e90e5c3306e366c' radius={'xl'} variant='default'>
GitHub Commit
</Button>
<Space h={'md'} />
<TweetEmbed
tweetId={'1828498093035397193'}
options={{ theme: useMantineColorScheme().colorScheme }}
/>
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<Space h={'md'} />
<Button color='gray' component='a' href='https://github.com/folium-app/cytrus' radius={'xl'} variant='filled'>
Source Code
</Button>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='orange' color='clear' radius={'xl'}>
<IconQuestionMark size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Nintendo DS
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Grape is the name of the Nintendo DS core within Folium, it is built on top of the latest NooDS source code on GitHub and supports all DS file formats, game controllers, microphone input, speaker output and more
</Text>
<Space h={'md'} />
<Text c={'red'} size='sm'>
Grape will transition to melonDS at a later date, at this point in time the emulation freezes
</Text>
<Space h={'md'} />
<Button color='gray' component='a' href='https://github.com/folium-app/grape' radius={'xl'} variant='filled'>
Source Code
</Button>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='red' color='clear' radius={'xl'}>
<IconX size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Game Boy
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Work in Progress
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='red' color='clear' radius={'xl'}>
<IconX size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Game Boy Advance
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Work in Progress
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='red' color='clear' radius={'xl'}>
<IconX size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Game Boy Color
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Work in Progress
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='red' color='clear' radius={'xl'}>
<IconX size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Nintendo 64
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Work in Progress
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='red' color='clear' radius={'xl'}>
<IconX size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
PlayStation 1
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Work in Progress
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='orange' color='clear' radius={'xl'}>
<IconQuestionMark size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Super Nintendo Entertainment System
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Mango is the name of the Super Nintendo Entertainment System core within Folium, it is built on top of the latest LakeSNES source code on GitHub and supports the two most common SNES file formats, game controllers, speaker output and more
</Text>
<Space h={'md'} />
<Button color='gray' component='a' href='https://github.com/folium-app/mango' radius={'xl'} variant='filled'>
Source Code
</Button>
</Timeline.Item>
{/*<Timeline.Item bullet={
<ThemeIcon c='red' color='clear' radius={'xl'}>
<IconX size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
PlayStation 1
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Lychee is a new Swift Package wrapping PCSX-ReARMed using C++ to Swift interoperability
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='orange' color='clear' radius={'xl'}>
<IconQuestionMark size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Nintendo 3DS
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Cytrus is a new Xcode project wrapping Citra-Enhanced using C++ to Objective-C++ to Swift interoperability. Cytrus supports load and save data and states
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='orange' color='clear' radius={'xl'}>
<IconQuestionMark size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Nintendo 64
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Guava is a new Swift Package wrapping Rokuyon using C++ to Swift interoperability
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='orange' color='clear' radius={'xl'}>
<IconQuestionMark size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Nintendo DS
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Grape is a new Xcode project wrapping melonDS using C++ to Objective-C++ to Swift interoperability. Grape supports load and save data and states
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='green' color='clear' radius={'xl'}>
<IconCheck size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Game Boy Color
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Kiwi is a new Swift Package wrapping Gambatte using C++ to Swift interoperability. Kiwi supports custom colour palettes, load and save data and states and Game Genie and Game Shark codes
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='red' color='clear' radius={'xl'}>
<IconX size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Game Boy Advance
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
TBD
</Text>
</Timeline.Item>
<Timeline.Item bullet={
<ThemeIcon c='green' color='clear' radius={'xl'}>
<IconCheck size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Game Boy
</Title>
} lineVariant='dotted'>
<Text c={'dimmed'}>
Kiwi is a new Swift Package wrapping Gambatte using C++ to Swift interoperability. Kiwi supports custom colour palettes, load and save data and states and Game Genie and Game Shark codes
</Text>
</Timeline.Item>*/}
</Timeline>
</Grid.Col>
</Grid>
<Space h={'md'} />
<Title order={2}>
Authentication
</Title>
<Space h={'md'} />
<Grid>
<Grid.Col span={{ base: 12, md: 4 }}>
<SimpleGrid cols={{ base: 3, md: 2 }}>
<div key={'one'}>
<Paper key={'one'} radius={'lg'} withBorder style={{ overflow: 'hidden' }}>
<Image src={'/rewrite/authentication.png'} />
</Paper>
<Text size='sm'>Outdated Screenshot</Text>
</div>
</SimpleGrid>
</Grid.Col>
<Grid.Col span={{ base: 12, md: 8 }}>
<Timeline bulletSize={26} lineWidth={2.2}>
<Timeline.Item bullet={
<ThemeIcon c='green' color='clear' radius={'xl'}>
<IconCheck size={'1rem'} stroke={2.5} />
</ThemeIcon>
} title={
<Title order={3}>
Sign in with Apple
</Title>
} lineVariant='dotted'>
<Text c={'red'} mb={4} size='sm'>
App Store only
</Text>
<Text c={'dimmed'}>
Sign in with Apple is an optional addition to Folium allowing users to securely sign in with their Apple Account to not only keep track of data such as times played or total time played but also communicate with other Folium users playing the same game in realtime
</Text>
</Timeline.Item>
</Timeline>
</Grid.Col>
</Grid>
</>
);
}
export default function Rewrite() {
return (
<MantineProvider theme={theme}>
<Container my={'xl'}>
<Header />
</Container>
</MantineProvider>
);
}

9
src/Rewrite/rewrite_main.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import Rewrite from './Rewrite';
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<Rewrite />
</React.StrictMode>
);

22
src/Welcome/Welcome.css.ts
View File

@ -1,22 +0,0 @@
import { style } from "@vanilla-extract/css";
import { vars } from "../theme";
import { rem } from "@mantine/core";
export const title = style({
color: vars.colors.black,
fontSize: rem(100),
fontWeight: 900,
letterSpacing: rem(-2),
selectors: {
[vars.darkSelector]: {
color: vars.colors.white,
},
},
"@media": {
[vars.smallerThan("md")]: {
fontSize: rem(50),
},
},
});

28
src/Welcome/Welcome.tsx
View File

@ -1,28 +0,0 @@
import { Title, Text, Anchor } from "@mantine/core";
import * as classes from "./Welcome.css";
export function Welcome() {
return (
<>
<Title className={classes.title} ta="center" mt={100}>
Welcome to{" "}
<Text
inherit
variant="gradient"
component="span"
gradient={{ from: "pink", to: "yellow" }}
>
Mantine
</Text>
</Title>
<Text color="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
This starter Vite project includes a minimal setup, if you want to learn
more on Mantine + Vite integration follow{" "}
<Anchor href="https://mantine.dev/guides/vite/" size="lg">
this guide
</Anchor>
. To get started edit pages/Home.page.tsx file.
</Text>
</>
);
}

4
src/theme.ts
View File

@ -1,5 +1,7 @@
import { createTheme } from "@mantine/core";
import { themeToVars } from "@mantine/vanilla-extract";
export const theme = createTheme({});
export const theme = createTheme({
primaryColor: 'green'
});
export const vars = themeToVars(theme);

16
vite.config.ts
View File

@ -1,8 +1,22 @@
import { defineConfig } from "vite";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import react from "@vitejs/plugin-react";
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), vanillaExtractPlugin()],
plugins: [
react(),
vanillaExtractPlugin()
],
mode: 'production',
build: {
rollupOptions: {
input: {
index: resolve(__dirname, 'index.html'),
privacypolicy: resolve(__dirname, 'privacypolicy/index.html'),
rewrite: resolve(__dirname, 'rewrite/index.html')
}
}
}
});

6752
yarn.lock
View File

File diff suppressed because it is too large Load Diff