CipherStreamWeb converted to use Vite

src/routes/__root.tsx

@@ -0,0 +1,16 @@
+import NavBar from "@/components/nav/NavBar";
+import ErrorBoundary from "@/providers/components/ErrorBoundary";
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+
+
+export const Route = createRootRoute({
+	component: () => (
+		<>
+			<NavBar/>
+			<Outlet/>
+			<TanStackRouterDevtools/>
+		</>
+	),
+	errorComponent: ErrorBoundary
+});

src/routes/combination/adfgvx/index.tsx

@@ -0,0 +1,25 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import ADFGVXInputs from '@/components/ciphers/combination/adfgvx/ADFGVXInputs';
+import { useGetADFGVXInfo } from '@/hooks/combination/ADFGVXHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+export const Route = createFileRoute('/combination/adfgvx/')({
+	component: ADFGVXPage
+});
+
+
+function ADFGVXPage(){
+	const adfgvxInfoQuery = useGetADFGVXInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={adfgvxInfoQuery}>
+				<ADFGVXInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/combination/adfgx/index.tsx

@@ -0,0 +1,25 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import ADFGXInputs from '@/components/ciphers/combination/adfgx/ADFGXInputs';
+import { useGetADFGXInfo } from '@/hooks/combination/ADFGXHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+export const Route = createFileRoute('/combination/adfgx/')({
+	component: ADFGXPage
+});
+
+
+function ADFGXPage(){
+	const adfgxInfoQuery = useGetADFGXInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={adfgxInfoQuery}>
+				<ADFGXInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/combination/index.tsx

@@ -0,0 +1,51 @@
+import { combinationLinks } from '@/util/LinksUtil';
+import { createFileRoute, Link } from '@tanstack/react-router';
+
+
+export const Route = createFileRoute('/combination/')({
+	component: CombinationPage
+});
+
+
+function CombinationPage(){
+	return (
+		<main
+			className="flex flex-col items-center"
+		>
+			<h1
+				className="font-bold text-4xl my-8"
+			>
+				Combination Ciphers
+			</h1>
+			<p
+				className="text-center"
+			>
+				Combination ciphers encrypt text by combining two or more ciphers.
+				These ciphers are the most secure offered on the site because multiple layers of encryption must be broken in order to decrypt the text through brute force methods.
+			</p>
+			<div
+				className="mt-8"
+			>
+				<ul
+					className="grid grid-cols-2 gap-8"
+				>
+					{
+						combinationLinks.map(cipher => (
+							<li
+								key={cipher.label}
+								className="text-center"
+							>
+								<Link
+									className="cursor-pointer text-lg"
+									to={cipher.to}
+								>
+									{cipher.label}
+								</Link>
+							</li>
+						))
+					}
+				</ul>
+			</div>
+		</main>
+	);
+}

src/routes/index.tsx

@@ -0,0 +1,56 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+
+export const Route = createFileRoute("/")({
+	component: HomePage,
+	//TODO: Figure out how to get this metadata appearing in the app correctly
+	/*
+	head: () => ({
+		meta: [
+			{
+				title: "Cipher Stream",
+				name: "Cipher Stream Web Interface",
+				content: "Cipher Stream"
+			}
+		]
+	})
+	*/
+	/*
+	keywords: [
+		"ciphers",
+		"cipherstream",
+		"cipher stream",
+		"ciphers",
+		"encryption",
+		"decryption",
+		"Mattrixwv"
+	],
+	robots: "all"
+	*/
+});
+
+
+function HomePage(){
+	return (
+		<main>
+			<h1
+				className="text-4xl font-bold text-center"
+			>
+				Cipher Stream
+			</h1>
+			<p
+				className="text-center text-xl"
+			>
+				Dive into the fascinating realm of cryptography!
+			</p>
+			<div
+				className="text-center mt-4"
+			>
+				<p>
+					Encrypt your messages with classic and historical ciphers. Perfect for learning and entertainment. Our platform provides a way to delve into the historical origins of encryption.
+					While these ciphers do not provide security in a digital world, they do offer valuable insights into the history and evolution of cryptography.
+				</p>
+			</div>
+		</main>
+	);
+}

src/routes/monosubstitution/affine/index.tsx

@@ -0,0 +1,33 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import AffineInputs from '@/components/ciphers/monosubstitution/affine/AffineInputs';
+import { useGetAffineInfo } from '@/hooks/monosubstitution/AffineHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+title: "Affine",
+description: "",
+keywords: [
+	"Affine"
+]
+*/
+
+export const Route = createFileRoute('/monosubstitution/affine/')({
+	component: AffinePage
+});
+
+
+function AffinePage(){
+	const affineInfoQuery = useGetAffineInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={affineInfoQuery}>
+				<AffineInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/monosubstitution/atbash/index.tsx

@@ -0,0 +1,33 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import AtbashInputs from '@/components/ciphers/monosubstitution/atbash/AtbashInputs';
+import { useGetAtbashInfo } from '@/hooks/monosubstitution/AtbashHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+title: "Atbash",
+description: "",
+keywords: [
+	"Atbash"
+]
+*/
+
+export const Route = createFileRoute('/monosubstitution/atbash/')({
+	component: AtbashPage
+});
+
+
+function AtbashPage(){
+	const atbashInfoQuery = useGetAtbashInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={atbashInfoQuery}>
+				<AtbashInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/monosubstitution/autokey/index.tsx

@@ -0,0 +1,35 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import AutokeyInputs from '@/components/ciphers/monosubstitution/autokey/AutokeyInputs';
+import { useGetAutokeyInfo } from '@/hooks/monosubstitution/AutokeyHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Autokey",
+	description: "",
+	keywords: [
+		"Autokey"
+	]
+}
+*/
+
+export const Route = createFileRoute('/monosubstitution/autokey/')({
+	component: AutokeyPage
+});
+
+
+function AutokeyPage(){
+	const autokeyInfoQuery = useGetAutokeyInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={autokeyInfoQuery}>
+				<AutokeyInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/monosubstitution/baconian/index.tsx

@@ -0,0 +1,34 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import BaconianInputs from '@/components/ciphers/monosubstitution/baconian/BaconianInputs';
+import { useGetBaconianInfo } from '@/hooks/monosubstitution/BaconianHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Baconian",
+	description: "",
+	keywords: [
+		"Baconian"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/monosubstitution/baconian/')({
+	component: BaconianPage
+});
+
+
+function BaconianPage(){
+	const baconianInfoQuery = useGetBaconianInfo();
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={baconianInfoQuery}>
+				<BaconianInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/monosubstitution/basex/index.tsx

@@ -0,0 +1,40 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import BaseXInputs from '@/components/ciphers/monosubstitution/basex/BaseXInputs';
+import { useGetBaseXInfo } from '@/hooks/monosubstitution/BaseXHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Base X",
+	description: "",
+	keywords: [
+		"Base X", "base x", "BaseX", "basex",
+		"base 2", "base2", "binary",
+		"base 8", "base8", "octal",
+		"base 12", "base12",
+		"base 16", "base16", "hexadecimal"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/monosubstitution/basex/')({
+	component: BaseXPage
+});
+
+
+function BaseXPage(){
+	const baseXInfoQuery = useGetBaseXInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={baseXInfoQuery}>
+				<BaseXInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/monosubstitution/beaufort/index.tsx

@@ -0,0 +1,36 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import BeaufortInputs from '@/components/ciphers/monosubstitution/beaufort/BeaufortInputs';
+import { useGetBeaufortInfo } from '@/hooks/monosubstitution/BeaufortHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Beaufort",
+	description: "",
+	keywords: [
+		"Beaufort"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/monosubstitution/beaufort/')({
+	component: BeaufortPage
+});
+
+
+function BeaufortPage(){
+	const beaufortInfoQuery = useGetBeaufortInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={beaufortInfoQuery}>
+				<BeaufortInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/monosubstitution/caesar/index.tsx

@@ -0,0 +1,36 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import CaesarInputs from '@/components/ciphers/monosubstitution/caesar/CaesarInputs';
+import { useGetCaesarInfo } from '@/hooks/monosubstitution/CaesarHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Caesar",
+	description: "",
+	keywords: [
+		"Caesar"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/monosubstitution/caesar/')({
+	component: CaesarPage
+});
+
+
+function CaesarPage(){
+	const caesarInfoQuery = useGetCaesarInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={caesarInfoQuery}>
+				<CaesarInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/monosubstitution/index.tsx

@@ -0,0 +1,74 @@
+import { monosubstitutionLinks } from "@/util/LinksUtil";
+import { createFileRoute, Link } from "@tanstack/react-router";
+
+
+/*
+title: "Mono-Substitution",
+description: "",
+keywords: [
+	"Mono-Substitution",
+	"Affine",
+	"Atbash",
+	"Autokey",
+	"Baconian",
+	"Base X", "BaseX", "basex",
+	"Base 2", "base2", "binary",
+	"Base 8", "base8", "octal",
+	"Base 16", "base16", "hexadecimal",
+	"Beaufort",
+	"Caesar",
+	"One-Time Pad", "onetime pad", "onetimepad",
+	"Port",
+	"Substitution",
+	"Vigenere"
+]
+*/
+
+
+export const Route = createFileRoute("/monosubstitution/")({
+	component: MonoPage
+});
+
+
+function MonoPage(){
+	return (
+		<main
+			className="flex flex-col items-center"
+		>
+			<h1
+				className="font-bold text-4xl my-8"
+			>
+				Mono-Substitution Ciphers
+			</h1>
+			<p
+				className="text-center"
+			>
+				Mono-Substitution ciphers encrypt text one character at a time.
+				These are generally the least secure ciphers because they are easy to break using brute force methods.
+			</p>
+			<div
+				className="mt-8"
+			>
+				<ul
+					className="grid grid-cols-4 gap-8"
+				>
+					{
+						monosubstitutionLinks.map(cipher => (
+							<li
+								key={cipher.label}
+								className="text-center"
+							>
+								<Link
+									className="cursor-pointer text-lg"
+									to={cipher.to}
+								>
+									{cipher.label}
+								</Link>
+							</li>
+						))
+					}
+				</ul>
+			</div>
+		</main>
+	);
+}

src/routes/monosubstitution/onetimepad/index.tsx

@@ -0,0 +1,39 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import OneTimePadInputs from '@/components/ciphers/monosubstitution/onetimepad/OneTimePadInputs';
+import { useGetOneTimePadInfo } from '@/hooks/monosubstitution/OneTimePadHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "One-Time Pad",
+	description: "",
+	keywords: [
+		"One-Time Pad",
+		"one time pad",
+		"onetime pad",
+		"onetimepad"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/monosubstitution/onetimepad/')({
+	component: OneTimePadPage
+});
+
+
+function OneTimePadPage(){
+	const oneTimePadInfoQuery = useGetOneTimePadInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={oneTimePadInfoQuery}>
+				<OneTimePadInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/monosubstitution/porta/index.tsx

@@ -0,0 +1,36 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import PortaInputs from '@/components/ciphers/monosubstitution/porta/PortaInputs';
+import { useGetPortaInfo } from '@/hooks/monosubstitution/PortaHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Porta",
+	description: "",
+	keywords: [
+		"Porta"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/monosubstitution/porta/')({
+	component: PortaPage
+});
+
+
+function PortaPage(){
+	const portaInfoQuery = useGetPortaInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={portaInfoQuery}>
+				<PortaInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/monosubstitution/substitution/index.tsx

@@ -0,0 +1,36 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import SubstitutionInputs from '@/components/ciphers/monosubstitution/substitution/SubstitutionInputs';
+import { useGetSubstitutionInfo } from '@/hooks/monosubstitution/SubstitutionHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Substitution",
+	description: "",
+	keywords: [
+		"Substitution"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/monosubstitution/substitution/')({
+	component: SubstitutionPage
+});
+
+
+function SubstitutionPage(){
+	const substitutionInfoQuery = useGetSubstitutionInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={substitutionInfoQuery}>
+				<SubstitutionInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/monosubstitution/vigenere/index.tsx

@@ -0,0 +1,36 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import VigenereInputs from '@/components/ciphers/monosubstitution/vigenere/VigenereInputs';
+import { useGetVigenereInfo } from '@/hooks/monosubstitution/VigenereHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Vigenere",
+	description: "",
+	keywords: [
+		"Vigenere"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/monosubstitution/vigenere/')({
+	component: VigenerePage
+});
+
+
+function VigenerePage(){
+	const vigenereInfoQuery = useGetVigenereInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={vigenereInfoQuery}>
+				<VigenereInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/polysubstitution/bifid/index.tsx

@@ -0,0 +1,36 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import BifidInputs from '@/components/ciphers/polysubstitution/bifid/BifidInputs';
+import { useGetBifidInfo } from '@/hooks/polysubstitution/BifidHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Bifid",
+	description: "",
+	keywords: [
+		"Bifid"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/polysubstitution/bifid/')({
+	component: BifidPage
+});
+
+
+function BifidPage(){
+	const bifidInfoQuery = useGetBifidInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={bifidInfoQuery}>
+				<BifidInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/polysubstitution/columnar/index.tsx

@@ -0,0 +1,36 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import ColumnarInputs from '@/components/ciphers/polysubstitution/columnar/ColumnarInputs';
+import { useGetColumnarInfo } from '@/hooks/polysubstitution/ColumnarHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Columnar",
+	description: "",
+	keywords: [
+		"Columnar"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/polysubstitution/columnar/')({
+	component: ColumnarPage
+});
+
+
+function ColumnarPage(){
+	const columnarInfoQuery = useGetColumnarInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={columnarInfoQuery}>
+				<ColumnarInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/polysubstitution/hill/index.tsx

@@ -0,0 +1,36 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import HillInputs from '@/components/ciphers/polysubstitution/hill/HillInputs';
+import { useGetHillInfo } from '@/hooks/polysubstitution/HillHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Hill",
+	description: "",
+	keywords: [
+		"Hill"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/polysubstitution/hill/')({
+	component: HillPage
+});
+
+
+function HillPage(){
+	const hillInfoQuery = useGetHillInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={hillInfoQuery}>
+				<HillInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/polysubstitution/index.tsx

@@ -0,0 +1,51 @@
+import { polysubstitutionLinks } from '@/util/LinksUtil';
+import { createFileRoute, Link } from '@tanstack/react-router';
+
+
+export const Route = createFileRoute('/polysubstitution/')({
+	component: PolyPage
+});
+
+
+function PolyPage(){
+	return (
+		<main
+			className="flex flex-col items-center"
+		>
+			<h1
+				className="font-bold text-4xl my-8"
+			>
+				Poly-Substitution Ciphers
+			</h1>
+			<p
+				className="text-center"
+			>
+				Poly-Substitution ciphers encrypt text multiple characters at a time.
+				These are more secure than mono-substitution ciphers because attempts to crack the ciphers through brute force must guess two characters at a time instead of one.
+			</p>
+			<div
+				className="mt-8"
+			>
+				<ul
+					className="grid grid-cols-3 gap-8"
+				>
+					{
+						polysubstitutionLinks.map(cipher => (
+							<li
+								key={cipher.label}
+								className="text-center"
+							>
+								<Link
+									className="cursor-pointer text-lg"
+									to={cipher.to}
+								>
+									{cipher.label}
+								</Link>
+							</li>
+						))
+					}
+				</ul>
+			</div>
+		</main>
+	);
+}

src/routes/polysubstitution/morse/index.tsx

@@ -0,0 +1,37 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import MorseInputs from '@/components/ciphers/polysubstitution/morse/MorseInputs';
+import { useGetMorseInfo } from '@/hooks/polysubstitution/MorseHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Morse Code",
+	description: "",
+	keywords: [
+		"Morse",
+		"Morse Code"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/polysubstitution/morse/')({
+	component: MorsePage
+});
+
+
+function MorsePage(){
+	const morseInfoQuery = useGetMorseInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={morseInfoQuery}>
+				<MorseInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/polysubstitution/playfair/index.tsx

@@ -0,0 +1,36 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import PlayfairInputs from '@/components/ciphers/polysubstitution/playfair/PlayfairInputs';
+import { useGetPlayfairInfo } from '@/hooks/polysubstitution/PlayfairHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Playfair",
+	description: "",
+	keywords: [
+		"Playfair"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/polysubstitution/playfair/')({
+	component: PlayfairPage
+});
+
+
+function PlayfairPage(){
+	const playfairInfoQuery = useGetPlayfairInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={playfairInfoQuery}>
+				<PlayfairInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/polysubstitution/polybius/index.tsx

@@ -0,0 +1,37 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import PolybiusInputs from '@/components/ciphers/polysubstitution/polybius/PolybiusInputs';
+import { useGetPolybiusInfo } from '@/hooks/polysubstitution/PolybiusHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Polybius Square",
+	description: "",
+	keywords: [
+		"Polybius",
+		"Polybius Square"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/polysubstitution/polybius/')({
+	component: PolybiusPage
+});
+
+
+function PolybiusPage(){
+	const polybiusInfoQuery = useGetPolybiusInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={polybiusInfoQuery}>
+				<PolybiusInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/polysubstitution/railfence/index.tsx

@@ -0,0 +1,38 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import RaidFenceInputs from '@/components/ciphers/polysubstitution/railfence/RailFenceInputs';
+import { useGetRailFenceInfo } from '@/hooks/polysubstitution/RailFenceHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Rail Fence",
+	description: "",
+	keywords: [
+		"Rail Fence",
+		"Rail-Fence",
+		"railfence"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/polysubstitution/railfence/')({
+	component: RailFencePage
+});
+
+
+function RailFencePage(){
+	const railFenceInfoQuery = useGetRailFenceInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={railFenceInfoQuery}>
+				<RaidFenceInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/polysubstitution/trifid/index.tsx

@@ -0,0 +1,36 @@
+import CipherLoader from '@/components/ciphers/CipherLoader';
+import TrifidInputs from '@/components/ciphers/polysubstitution/trifid/TrifidInputs';
+import { useGetTrifidInfo } from '@/hooks/polysubstitution/TrifidHooks';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+/*
+{
+	title: "Trifid",
+	description: "",
+	keywords: [
+		"Trifid"
+	]
+}
+*/
+
+
+export const Route = createFileRoute('/polysubstitution/trifid/')({
+	component: TrifidPage
+});
+
+
+function TrifidPage(){
+	const trifidInfoQuery = useGetTrifidInfo();
+
+
+	return (
+		<main
+			className="flex flex-col items-center justify-center"
+		>
+			<CipherLoader infoQuery={trifidInfoQuery}>
+				<TrifidInputs/>
+			</CipherLoader>
+		</main>
+	);
+}

src/routes/tutorial/index.tsx

@@ -0,0 +1,50 @@
+import EncodingTutorial from '@/components/tutorials/EncodingTutorial';
+import InputTutorial from '@/components/tutorials/InputTutorial';
+import KeywordTutorial from '@/components/tutorials/KeywordTutorial';
+import NumberSelectorTutorial from '@/components/tutorials/NumberSelectorTutorial';
+import OutputTutorial from '@/components/tutorials/OutputTutorial';
+import SwitchTutorial from '@/components/tutorials/SwitchTutorial';
+import { createFileRoute } from '@tanstack/react-router';
+
+
+export const Route = createFileRoute('/tutorial/')({
+	component: TutorialPage
+});
+
+
+function TutorialPage(){
+	return (
+		<main
+			className="flex flex-col items-center justify-center gap-y-32 mb-16"
+		>
+			<div className="text-center">
+				<h2 className="text-3xl font-bold">How to use Cipher Stream</h2>
+				<div>
+					<p>These are some of the elements you will find on the cipher pages.</p>
+					<br/>
+					<p>All elements that appear on a page are necessary for encryption</p>
+					<br/>
+					<p>Once every field on the page is filled the encryption/decryption will take place automatically</p>
+				</div>
+			</div>
+			<div>
+				<SwitchTutorial/>
+			</div>
+			<div>
+				<EncodingTutorial/>
+			</div>
+			<div>
+				<NumberSelectorTutorial/>
+			</div>
+			<div>
+				<KeywordTutorial/>
+			</div>
+			<div>
+				<InputTutorial/>
+			</div>
+			<div>
+				<OutputTutorial/>
+			</div>
+		</main>
+	);
+}