zomo/penguin.ikea.fishing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main layout

Browse Source
This commit is contained in:
zomo
2025-11-27 18:07:17 -06:00
commit eaa3dfdd98
28 changed files with 3130 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@@ -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?

6
.prettierrc Normal file
View File

@@ -0,0 +1,6 @@
{
"trailingComma": "all",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}

73
README.md Normal file
View File

@@ -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...
},
},
])
```

23
eslint.config.js Normal file
View File

@@ -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,
},
},
])

13
index.html Normal file
View File

@@ -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>

34
package.json Normal file
View File

@@ -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"
}
}

2545
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
pnpm-workspace.yaml Normal file
View File

@@ -0,0 +1,2 @@
ignoredBuiltDependencies:
- esbuild

BIN
public/CCFaceFront Italic.ttf Normal file
View File

Binary file not shown.

BIN
public/ProximaNova-Bold-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
public/ProximaNova-BoldIt-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
public/ProximaNova-Reg-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
public/ProximaNova-RegIt-webfont.woff2 Normal file
View File

Binary file not shown.

13
src/App.tsx Normal file
View File

@@ -0,0 +1,13 @@
import Background from './Background'
import Buttons from './Buttons'
function App() {
return (
<>
<Background />
<Buttons />
</>
)
}
export default App

81
src/Background.tsx Normal file
View File

@@ -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

11
src/ButtonNew.tsx Normal file
View File

@@ -0,0 +1,11 @@
import './buttonNew.scss'
function ButtonNew() {
return (
<div className="client newclient">
<div className="new-button">Start</div>
</div>
)
}
export default ButtonNew

13
src/ButtonOld.tsx Normal file
View File

@@ -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

20
src/Buttons.tsx Normal file
View File

@@ -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

30
src/background.scss Normal file
View File

@@ -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%);
}
}

46
src/buttonNew.scss Normal file
View File

@@ -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%);
}
}

86
src/buttonOld.scss Normal file
View File

@@ -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%
);
}
}

25
src/buttons.scss Normal file
View File

@@ -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;
}
}
}

7
src/main.scss Normal file
View File

@@ -0,0 +1,7 @@
body {
margin: 0;
}
a {
text-decoration: none;
}

10
src/main.tsx Normal file
View File

@@ -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>,
)

28
tsconfig.app.json Normal file
View File

@@ -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"]
}

7
tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

26
tsconfig.node.json Normal file
View File

@@ -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"]
}

7
vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})