main layout

2025-11-27 18:07:17 -06:00
commit eaa3dfdd98
28 changed files with 3130 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "trailingComma": "all",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>penguin.ikea.fishing</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "penguin.ikea.fishing",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "prettier": "prettier ./src --write",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "shaders": "^2.1.14"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "prettier": "^3.7.1",
+    "sass-embedded": "^1.93.3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+ignoredBuiltDependencies:
+  - esbuild
--- a/public/CCFaceFront
+++ b/public/CCFaceFront
--- a/public/ProximaNova-Bold-webfont.woff2
+++ b/public/ProximaNova-Bold-webfont.woff2
--- a/public/ProximaNova-BoldIt-webfont.woff2
+++ b/public/ProximaNova-BoldIt-webfont.woff2
--- a/public/ProximaNova-Reg-webfont.woff2
+++ b/public/ProximaNova-Reg-webfont.woff2
--- a/public/ProximaNova-RegIt-webfont.woff2
+++ b/public/ProximaNova-RegIt-webfont.woff2
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,13 @@
+import Background from './Background'
+import Buttons from './Buttons'
+
+function App() {
+    return (
+        <>
+            <Background />
+            <Buttons />
+        </>
+    )
+}
+
+export default App
--- a/src/Background.tsx
+++ b/src/Background.tsx
@@ -0,0 +1,81 @@
+import {
+    Shader,
+    DiffuseBlur,
+    FilmGrain,
+    Glow,
+    Liquify,
+    Swirl,
+} from 'shaders/react'
+import './background.scss'
+
+function Background() {
+    return (
+        <div id="background">
+            <Shader>
+                <Swirl
+                    colorA="#00529b"
+                    colorB="#087dca"
+                    speed={0.4}
+                    detail={3.6}
+                    blend={50}
+                    coarseX={50}
+                    coarseY={50}
+                    mediumX={50}
+                    mediumY={50}
+                    fineX={50}
+                    fineY={50}
+                    colorSpace="linear"
+                    maskType="alpha"
+                    transform={{
+                        offsetX: 0,
+                        offsetY: 0,
+                        rotation: 0,
+                        scale: 1,
+                        anchorX: 0.5,
+                        anchorY: 0.5,
+                        edges: 'transparent',
+                    }}
+                />
+                <Liquify
+                    intensity={5}
+                    swirl={0.56}
+                    decay={0.3}
+                    radius={2}
+                    edges="stretch"
+                    maskType="alpha"
+                    transform={{
+                        offsetX: 0,
+                        offsetY: 0,
+                        rotation: 0,
+                        scale: 1,
+                        anchorX: 0.5,
+                        anchorY: 0.5,
+                        edges: 'transparent',
+                    }}
+                />
+                <DiffuseBlur intensity={30} />
+                <Glow
+                    size={27.5}
+                    intensity={2.69}
+                    threshold={0.37}
+                    visible={true}
+                />
+                <FilmGrain
+                    strength={0.1}
+                    maskType="alpha"
+                    transform={{
+                        offsetX: 0,
+                        offsetY: 0,
+                        rotation: 0,
+                        scale: 1,
+                        anchorX: 0.5,
+                        anchorY: 0.5,
+                        edges: 'transparent',
+                    }}
+                />
+            </Shader>
+        </div>
+    )
+}
+
+export default Background
--- a/src/ButtonNew.tsx
+++ b/src/ButtonNew.tsx
@@ -0,0 +1,11 @@
+import './buttonNew.scss'
+
+function ButtonNew() {
+    return (
+        <div className="client newclient">
+            <div className="new-button">Start</div>
+        </div>
+    )
+}
+
+export default ButtonNew
--- a/src/ButtonOld.tsx
+++ b/src/ButtonOld.tsx
@@ -0,0 +1,13 @@
+import './buttonOld.scss'
+
+function ButtonOld() {
+    return (
+        <div className="client oldclient">
+            <div className="oldclient-inner">
+                <div className="old-button">STA RT</div>
+            </div>
+        </div>
+    )
+}
+
+export default ButtonOld
--- a/src/Buttons.tsx
+++ b/src/Buttons.tsx
@@ -0,0 +1,20 @@
+import ButtonNew from './ButtonNew'
+import ButtonOld from './ButtonOld'
+import './buttons.scss'
+
+function Buttons() {
+    return (
+        <div className="buttons">
+            {/* <a href="https://old.penguin.ikea.fishing/"> */}
+            <a href="#">
+                <ButtonOld />
+            </a>
+            {/* <a href="https://new.penguin.ikea.fishing/#/login"> */}
+            <a href="#">
+                <ButtonNew />
+            </a>
+        </div>
+    )
+}
+
+export default Buttons
--- a/src/background.scss
+++ b/src/background.scss
@@ -0,0 +1,30 @@
+body {
+    // background: rgb(34, 164, 243);
+    background: #00529b;
+}
+
+#background {
+    position: fixed;
+
+    // top: 25%;
+    // left: 25%;
+    // width: 50%;
+    // height: 50%;
+
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+
+    .shader {
+        aspect-ratio: 16 / 9;
+
+        min-width: 100%;
+        min-height: 100%;
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
--- a/src/buttonNew.scss
+++ b/src/buttonNew.scss
@@ -0,0 +1,46 @@
+@font-face {
+    font-family: 'ProximaNova Bold';
+    src: url('/ProximaNova-Bold-webfont.woff2') format('opentype');
+}
+
+.newclient {
+    background: rgba(9, 150, 236, 1);
+    border-radius: 5px;
+
+    display: flex;
+    justify-content: center;
+}
+
+.new-button {
+    align-self: flex-end;
+
+    display: inline-block;
+    user-select: none;
+
+    color: white;
+    font-family: 'ProximaNova Bold', Helvetica, Arial, sans-serif;
+    text-decoration: none;
+    font-size: 18px;
+    text-align: center;
+
+    width: 226px;
+    height: 58px;
+    line-height: 58px;
+    box-sizing: border-box;
+    margin: 20px;
+
+    border-radius: 8px;
+
+    background: #22a4f3;
+    background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);
+
+    box-shadow:
+        0 3px 0 0 rgba(0, 82, 175, 0.4),
+        inset 0 2px 0 0 rgba(255, 255, 255, 0.4);
+
+    border: 1px solid #003f72;
+
+    &:hover {
+        background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%);
+    }
+}
--- a/src/buttonOld.scss
+++ b/src/buttonOld.scss
@@ -0,0 +1,86 @@
+@font-face {
+    font-family: 'CCFaceFront Italic';
+    src: url('/CCFaceFront Italic.ttf') format('opentype');
+}
+
+.oldclient {
+    border: 10px solid #0062b6;
+    border-radius: 40px;
+
+    background: linear-gradient(0deg, #016ec1 0%, #0280cd 100%);
+
+    padding: 5px;
+
+    box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;
+
+    .oldclient-inner {
+        border-radius: 25px; // border-radius - border - padding
+
+        background: #0173c4;
+        background: radial-gradient(
+            ellipse 300% 100% at 50% 100%,
+            rgb(1, 115, 196) 0%,
+            rgb(1, 119, 199) 49%,
+            rgb(49, 145, 210) 51%,
+            rgb(8, 125, 202) 100%
+        );
+
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+    }
+}
+
+.old-button {
+    align-self: flex-end;
+
+    display: inline-block;
+    user-select: none;
+
+    color: white;
+    font-family: 'CCFaceFront Italic', Helvetica, Arial, sans-serif;
+    letter-spacing: -0.7rem;
+    word-spacing: 0.65rem;
+    text-decoration: none;
+    font-size: 40px;
+    font-style: italic;
+    text-align: center;
+
+    -webkit-text-stroke: 6px black;
+    paint-order: stroke fill;
+
+    width: 250px;
+    height: 100px;
+    line-height: 100px;
+    box-sizing: border-box;
+    margin: 20px;
+
+    border-radius: 22px / 28px;
+
+    background: #0396e5;
+    background: linear-gradient(
+        0deg,
+        rgb(3, 150, 229) 0%,
+        rgb(1, 100, 199) 25%,
+        rgb(0, 83, 175) 50%,
+        rgb(77, 176, 243) 100%
+    );
+
+    box-shadow:
+        #00ccff 3px 1px 0px -1px inset,
+        #003366 0px 2px 0px 4px,
+        #00ccff 2.5px 6px 0px 4px,
+        #00529b -1px -2.5px 0px 5.5px;
+
+    &:hover {
+        background: #0054b0;
+        background: linear-gradient(
+            0deg,
+            rgb(0, 84, 176) 0%,
+            rgb(0, 82, 174) 53%,
+            rgb(0, 90, 180) 54%,
+            rgb(30, 125, 191) 100%
+        );
+    }
+}
--- a/src/buttons.scss
+++ b/src/buttons.scss
@@ -0,0 +1,25 @@
+.buttons {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // background: #00529B;
+
+    .client {
+        width: 500px;
+        height: 800px;
+        box-sizing: border-box;
+
+        margin-left: 50px;
+
+        &:nth-child(0) {
+            margin-left: 0px;
+        }
+    }
+}
--- a/src/main.scss
+++ b/src/main.scss
@@ -0,0 +1,7 @@
+body {
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './main.scss'
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <App />
+    </StrictMode>,
+)
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})