Pazisme Mod loading screen (#85)

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Co-authored-by: Renovate Bot <renovate-bot@valverde.cloud>
Reviewed-on: #85

packages/webapp/src/@types/i18next.d.ts

@@ -0,0 +1,10 @@
+import type { defaultNS, resources } from "@/i18n"
+
+
+declare module "i18next" {
+    interface CustomTypeOptions {
+        enableSelector: true
+        defaultNS: typeof defaultNS
+        resources: typeof resources["en"]
+    }
+}

packages/webapp/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-base text-sm font-base ring-offset-white transition-all gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "text-main-foreground bg-main border-2 border-border shadow-shadow hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none",
+        noShadow: "text-main-foreground bg-main border-2 border-border",
+        neutral:
+          "bg-secondary-background text-foreground border-2 border-border shadow-shadow hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none",
+        reverse:
+          "text-main-foreground bg-main border-2 border-border hover:translate-x-reverseBoxShadowX hover:translate-y-reverseBoxShadowY hover:shadow-shadow",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
+        icon: "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

packages/webapp/src/components/ui/tooltip.tsx

@@ -0,0 +1,50 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Content
+      data-slot="tooltip-content"
+      sideOffset={sideOffset}
+      className={cn(
+        "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-(--radix-tooltip-content-transform-origin) animate-in overflow-hidden rounded-base border-2 border-border bg-main px-3 py-1.5 font-base text-main-foreground text-sm data-[state=closed]:animate-out",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

packages/webapp/src/i18n/en.ts

@@ -0,0 +1,14 @@
+export const en = {
+    common: {},
+
+    nav: {
+        gitRepos: {
+            title: "Git Repos",
+            tooltip: "All the public repositories on my Git server",
+        },
+        sourceCode: {
+            title: "Source code",
+            tooltip: "Source code for this website",
+        },
+    },
+}

packages/webapp/src/i18n/fr.ts

@@ -0,0 +1,16 @@
+import type { en } from "./en"
+
+
+export const fr = {
+    common: {},
+    nav: {
+        gitRepos: {
+            title: "Dépôts Git",
+            tooltip: "Tous les dépôts publics de mon serveur Git",
+        },
+        sourceCode: {
+            title: "Code source",
+            tooltip: "Code source de ce site",
+        },
+    },
+} satisfies typeof en

packages/webapp/src/i18n/index.ts

@@ -0,0 +1,24 @@
+import i18n from "i18next"
+import LanguageDetector from "i18next-browser-languagedetector"
+import { initReactI18next } from "react-i18next"
+import { en } from "./en"
+import { fr } from "./fr"
+
+
+export const defaultNS = "common"
+export const resources = { en, fr } as const
+
+await i18n
+    .use(initReactI18next)
+    .use(LanguageDetector)
+    .init({
+        fallbackLng: "en",
+        supportedLngs: ["en", "fr"],
+        defaultNS,
+        resources,
+        interpolation: {
+            escapeValue: false
+        },
+    })
+
+export { i18n }

packages/webapp/src/index.css

@@ -3,86 +3,22 @@
 @import "tw-animate-css";
 @import "@fontsource/work-sans";
 
-@custom-variant dark (&:is(.dark *));
-
 :root {
-  --background: oklch(1 0 0);
+  --background: hsl(220 23% 95%);
   --secondary-background: oklch(100% 0 0);
-  --foreground: oklch(0.145 0 0);
+  --foreground: oklch(0% 0 0);
   --main-foreground: oklch(0% 0 0);
-  --main: oklch(72.27% 0.1894 50.19);
-  --border: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --main: hsl(220 23% 95%);
+  --border: oklch(0% 0 0);
+  --ring: oklch(0% 0 0);
   --overlay: oklch(0% 0 0 / 0.8);
   --shadow: 4px 4px 0px 0px var(--border);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --chart-1: #FF7A05;
+  --chart-2: #0099FF;
+  --chart-3: #FFBF00;
+  --chart-4: #00D696;
+  --chart-5: #7A83FF;
   --chart-active-dot: #000;
-  --radius: 0.625rem;
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --input: oklch(0.922 0 0);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --secondary-background: oklch(23.93% 0 0);
-  --foreground: oklch(0.985 0 0);
-  --main-foreground: oklch(0% 0 0);
-  --main: oklch(67.56% 0.1796 49.61);
-  --border: oklch(1 0 0 / 10%);
-  --ring: oklch(0.556 0 0);
-  --shadow: 4px 4px 0px 0px var(--border);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --chart-active-dot: #fff;
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --input: oklch(1 0 0 / 15%);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @theme inline {
@@ -108,53 +44,15 @@
   --shadow-shadow: var(--shadow);
   --font-weight-base: 500;
   --font-weight-heading: 700;
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-input: var(--input);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
 }
 
 @layer base {
   body {
     @apply text-foreground font-base bg-background;
+    font-family: "Work Sans", sans-serif;
   }
 
   h1, h2, h3, h4, h5, h6{
     @apply font-heading;
   }
 }
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-body {
-  font-family: "Work Sans", sans-serif;
-}

packages/webapp/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx"
+import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {

packages/webapp/src/main.tsx

@@ -1,6 +1,7 @@
 import { createRouter, RouterProvider } from "@tanstack/react-router"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
+import "./i18n"
 import "./index.css"
 import { routeTree } from "./routeTree.gen"
 

packages/webapp/src/routeTree.gen.ts

@@ -9,50 +9,118 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as IndexRouteImport } from './routes/index'
+import { Route as MainRouteImport } from './routes/_main'
+import { Route as PazismemodRouteRouteImport } from './routes/pazismemod/route'
+import { Route as PazismemodIndexRouteImport } from './routes/pazismemod/index'
+import { Route as MainIndexRouteImport } from './routes/_main.index'
 
-const IndexRoute = IndexRouteImport.update({
+const MainRoute = MainRouteImport.update({
+  id: '/_main',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PazismemodRouteRoute = PazismemodRouteRouteImport.update({
+  id: '/pazismemod',
+  path: '/pazismemod',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PazismemodIndexRoute = PazismemodIndexRouteImport.update({
   id: '/',
   path: '/',
-  getParentRoute: () => rootRouteImport,
+  getParentRoute: () => PazismemodRouteRoute,
+} as any)
+const MainIndexRoute = MainIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => MainRoute,
 } as any)
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
+  '/pazismemod': typeof PazismemodRouteRouteWithChildren
+  '/': typeof MainIndexRoute
+  '/pazismemod/': typeof PazismemodIndexRoute
 }
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute
+  '/': typeof MainIndexRoute
+  '/pazismemod': typeof PazismemodIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
+  '/pazismemod': typeof PazismemodRouteRouteWithChildren
+  '/_main': typeof MainRouteWithChildren
+  '/_main/': typeof MainIndexRoute
+  '/pazismemod/': typeof PazismemodIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/pazismemod' | '/' | '/pazismemod/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/pazismemod'
+  id: '__root__' | '/pazismemod' | '/_main' | '/_main/' | '/pazismemod/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
+  PazismemodRouteRoute: typeof PazismemodRouteRouteWithChildren
+  MainRoute: typeof MainRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/': {
-      id: '/'
+    '/_main': {
+      id: '/_main'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof MainRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/pazismemod': {
+      id: '/pazismemod'
+      path: '/pazismemod'
+      fullPath: '/pazismemod'
+      preLoaderRoute: typeof PazismemodRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/pazismemod/': {
+      id: '/pazismemod/'
+      path: '/'
+      fullPath: '/pazismemod/'
+      preLoaderRoute: typeof PazismemodIndexRouteImport
+      parentRoute: typeof PazismemodRouteRoute
+    }
+    '/_main/': {
+      id: '/_main/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
+      preLoaderRoute: typeof MainIndexRouteImport
+      parentRoute: typeof MainRoute
     }
   }
 }
 
+interface PazismemodRouteRouteChildren {
+  PazismemodIndexRoute: typeof PazismemodIndexRoute
+}
+
+const PazismemodRouteRouteChildren: PazismemodRouteRouteChildren = {
+  PazismemodIndexRoute: PazismemodIndexRoute,
+}
+
+const PazismemodRouteRouteWithChildren = PazismemodRouteRoute._addFileChildren(
+  PazismemodRouteRouteChildren,
+)
+
+interface MainRouteChildren {
+  MainIndexRoute: typeof MainIndexRoute
+}
+
+const MainRouteChildren: MainRouteChildren = {
+  MainIndexRoute: MainIndexRoute,
+}
+
+const MainRouteWithChildren = MainRoute._addFileChildren(MainRouteChildren)
+
 const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
+  PazismemodRouteRoute: PazismemodRouteRouteWithChildren,
+  MainRoute: MainRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

packages/webapp/src/routes/__root.tsx

@@ -1,6 +1,5 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
-import { Card, CardContent } from "@/components/ui/card"
 
 
 export const Route = createRootRoute({
@@ -9,14 +8,7 @@ export const Route = createRootRoute({
 
 function RootComponent() {
     return <>
-        <div className="mx-auto w-[750px] max-w-full px-5 pt-28 pb-10 text-foreground">
-            <Card>
-                <CardContent>
-                    <Outlet />
-                </CardContent>
-            </Card>
-        </div>
-
+        <Outlet />
         <TanStackRouterDevtools />
     </>
 }

packages/webapp/src/routes/_main.index.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router"
 
 
-export const Route = createFileRoute("/")({
+export const Route = createFileRoute("/_main/")({
     component: RouteComponent,
 })
 

packages/webapp/src/routes/_main.tsx

@@ -0,0 +1,109 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router"
+import { useTranslation } from "react-i18next"
+import { DiGit } from "react-icons/di"
+import { FaCode } from "react-icons/fa"
+import root from "react-shadow"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+
+export const Route = createFileRoute("/_main")({
+    component: WIPLayout,
+})
+
+function WIPLayout() {
+    return (
+        <div className="mx-auto w-[750px] max-w-full px-5 pt-28 pb-10 text-foreground">
+            <Card>
+                <CardContent>
+                    <Outlet />
+                </CardContent>
+            </Card>
+        </div>
+    )
+}
+
+// @ts-ignore
+function SharedLayout() {
+    const { t, i18n } = useTranslation()
+
+    return <>
+        <div className="flex flex-row items-center justify-center gap-2 p-2">
+            <Button
+                variant={i18n.language !== "en" ? "default" : "noShadow"}
+                onClick={() => i18n.changeLanguage("en")}
+            >
+                🇬🇧 English
+            </Button>
+
+            <Button
+                variant={i18n.language !== "fr" ? "default" : "noShadow"}
+                onClick={() => i18n.changeLanguage("fr")}
+            >
+                🇫🇷 Français
+            </Button>
+        </div>
+
+        <div className="container mt-20 mr-auto ml-auto">
+            <div className="mr-auto ml-auto flex w-fit flex-row items-start justify-around gap-10">
+                <root.div>
+                    <link rel="stylesheet" href="/98.css/dist/98.css" />
+
+                    <div className="window" style={{ width: 300 }}>
+                        <div className="title-bar">
+                            <div className="title-bar-text">Julien Valverde</div>
+                        </div>
+                        <div className="window-body">
+                            <p>There's so much room for activities!</p>
+                        </div>
+                    </div>
+                </root.div>
+
+                <div>
+                    <h1>Ingénieur Full Stack &bull; Entrepreneur</h1>
+
+                    <p className="mt-2">
+                        I am passionate about integrating functionality and design in applications to create intuitive, user-friendly experiences.
+                    </p>
+
+                    <div className="mt-4 flex w-fit flex-row items-center justify-center gap-2">
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button asChild>
+                                        <a href="https://git.valverde.cloud"><DiGit /> {t($ => $.gitRepos.title, { ns: "nav" })}</a>
+                                    </Button>
+                                </TooltipTrigger>
+
+                                <TooltipContent><p>{t($ => $.gitRepos.tooltip, { ns: "nav" })}</p></TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button asChild>
+                                        <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t($ => $.sourceCode.title, { ns: "nav" })}</a>
+                                    </Button>
+                                </TooltipTrigger>
+
+                                <TooltipContent><p>{t($ => $.sourceCode.tooltip, { ns: "nav" })}</p></TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+
+                        <Button>Resumé</Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div className="mx-auto w-[750px] max-w-full px-5 pt-28 pb-10 text-foreground">
+            <Card>
+                <CardContent>
+                    <Outlet />
+                </CardContent>
+            </Card>
+        </div>
+    </>
+}

packages/webapp/src/routes/pazismemod/index.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "Coolvetica";
+  src: url("/public/fonts/Coolvetica Rg.otf") format("opentype");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}

packages/webapp/src/routes/pazismemod/index.tsx

@@ -0,0 +1,104 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { useEffect, useRef } from "react"
+import "./index.css"
+import screen1 from "./screen1.png"
+import song from "./We Are Charlie Kirk.mp3"
+
+
+export const Route = createFileRoute("/pazismemod/")({
+    component: RouteComponent,
+})
+
+const SONG_START_TIME = 46
+
+function RouteComponent() {
+    const audioRef = useRef<HTMLAudioElement>(null)
+
+    useEffect(() => {
+        const audio = audioRef.current
+
+        if (!audio) {
+            return
+        }
+
+        const syncStartTime = () => {
+            if (Number.isFinite(audio.duration) && audio.duration > SONG_START_TIME) {
+                audio.currentTime = SONG_START_TIME
+            }
+        }
+
+        const loopFromOffset = async () => {
+            syncStartTime()
+
+            try {
+                await audio.play()
+            }
+            catch {
+                // Ignore autoplay failures. Some embedded browsers require user interaction.
+            }
+        }
+
+        const tryAutoplay = async () => {
+            syncStartTime()
+
+            try {
+                await audio.play()
+            }
+            catch {
+                // Ignore autoplay failures. Some embedded browsers require user interaction.
+            }
+        }
+
+        const gameDetails = (
+            _servername: string,
+            _serverurl: string,
+            _mapname: string,
+            _maxplayers: string,
+            _steamid: string,
+            _gamemode: string,
+            volume: number | string,
+        ) => {
+            const parsedVolume = Number(volume)
+
+            if (Number.isFinite(parsedVolume)) {
+                audio.volume = Math.min(1, Math.max(0, parsedVolume))
+            }
+        }
+
+        audio.addEventListener("loadedmetadata", syncStartTime)
+        audio.addEventListener("ended", loopFromOffset)
+        void tryAutoplay()
+        ;(window as Window & { GameDetails?: typeof gameDetails }).GameDetails = gameDetails
+
+        return () => {
+            audio.removeEventListener("loadedmetadata", syncStartTime)
+            audio.removeEventListener("ended", loopFromOffset)
+
+            if ((window as Window & { GameDetails?: typeof gameDetails }).GameDetails === gameDetails) {
+                delete (window as Window & { GameDetails?: typeof gameDetails }).GameDetails
+            }
+        }
+    }, [])
+
+    return (
+        <div className="relative h-screen w-screen overflow-hidden bg-black">
+            <audio ref={audioRef} src={song} preload="auto" hidden />
+
+            <img
+                src={screen1}
+                alt="Pazismemod screenshot"
+                className="h-full w-full object-contain"
+            />
+
+            <h1
+                className="absolute bottom-12 left-6 leading-none text-white"
+                style={{
+                    fontFamily: "\"Coolvetica\", sans-serif",
+                    fontSize: "92px",
+                }}
+            >
+                pazisme mod
+            </h1>
+        </div>
+    )
+}

packages/webapp/src/routes/pazismemod/route.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router"
+
+
+export const Route = createFileRoute("/pazismemod")({
+    component: PazismemodLayout,
+})
+
+function PazismemodLayout() {
+    return <Outlet />
+}