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

Compare commits

base: zomo:598e882e0d22b0a3fc2f9d482f487c25e19de2df
Branches Tags
zomo:main
..
compare: zomo:main
Branches Tags
zomo:main

11 Commits
598e882e0d ... main

Author SHA1 Message Date
zomo
1e5b609f2c updated responsive height layout 2025-11-28 12:28:07 -06:00
zomo
238bbcde40 updated responsive width layout 2025-11-28 12:23:32 -06:00
Bergbok
ddf2c7c342 make buttons responsive 2025-11-28 12:09:58 -06:00
zomo
0102d076e8 changed newclient style 2025-11-27 20:00:33 -06:00
zomo
83a90b8f02 tweaked background 2025-11-27 19:39:07 -06:00
zomo
a1bc6c6ff8 added final button links 2025-11-27 19:37:03 -06:00
zomo
2fd5126ae7 added favicon and updated title 2025-11-27 19:36:23 -06:00
zomo
9b631b594b updated image style 2025-11-27 19:30:49 -06:00
zomo
e858b04fff changed hover trigger 2025-11-27 19:29:21 -06:00
zomo
984c099dc6 rearranged css 2025-11-27 19:26:23 -06:00
zomo
a0b2f09c77 updated newclient button 2025-11-27 19:24:59 -06:00
11 changed files with 116 additions and 83 deletions
Expand all files Collapse all files

3
index.html
View File

@@ -2,9 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>penguin.ikea.fishing</title> <title>Club Penguin by Zomo</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/newclient.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

0
public/oldclient-wave.svg → public/oldclient.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

4
src/Background.tsx
View File

@@ -14,7 +14,7 @@ function Background() {
<Shader> <Shader>
<Swirl <Swirl
colorA="#00529b" colorA="#00529b"
colorB="#087dca" colorB="#0996ec"
speed={0.4} speed={0.4}
detail={3.6} detail={3.6}
blend={50} blend={50}
@@ -40,7 +40,7 @@ function Background() {
intensity={5} intensity={5}
swirl={0.56} swirl={0.56}
decay={0.3} decay={0.3}
radius={2} radius={1}
edges="stretch" edges="stretch"
maskType="alpha" maskType="alpha"
transform={{ transform={{

9
src/ButtonNew.tsx
View File

@@ -1,10 +1,15 @@
import './buttonNew.scss' import './buttonNew.scss'
import newclientImage from '/newclient.png'
function ButtonNew() { function ButtonNew() {
return ( return (
<div className="client newclient"> <div className="client newclient">
<div className="content"></div> <img className="image" src={newclientImage} />
<div className="new-button">Start</div> <div className="content">
<div>Join with the</div>
<div>New Client</div>
</div>
<div className="button">Start</div>
</div> </div>
) )
} }

6
src/ButtonOld.tsx
View File

@@ -1,16 +1,16 @@
import './buttonOld.scss' import './buttonOld.scss'
import oldclientWave from '/oldclient-wave.svg' import oldclientImg from '/oldclient.svg'
function ButtonOld() { function ButtonOld() {
return ( return (
<div className="client oldclient"> <div className="client oldclient">
<div className="oldclient-inner"> <div className="oldclient-inner">
<img className="image" src={oldclientImg} />
<div className="content"> <div className="content">
<img src={oldclientWave} />
<div>JOIN WITH THE</div> <div>JOIN WITH THE</div>
<div>OLD CLIENT</div> <div>OLD CLIENT</div>
</div> </div>
<div className="old-button">START</div> <div className="button">START</div>
</div> </div>
</div> </div>
) )

6
src/Buttons.tsx
View File

@@ -5,12 +5,10 @@ import './buttons.scss'
function Buttons() { function Buttons() {
return ( return (
<div className="buttons"> <div className="buttons">
{/* <a href="https://old.penguin.ikea.fishing/"> */} <a href="https://old.penguin.ikea.fishing/">
<a href="#">
<ButtonOld /> <ButtonOld />
</a> </a>
{/* <a href="https://new.penguin.ikea.fishing/#/login"> */} <a href="https://new.penguin.ikea.fishing/#/login">
<a href="#">
<ButtonNew /> <ButtonNew />
</a> </a>
</div> </div>

51
src/buttonNew.scss
View File

@@ -7,43 +7,46 @@
background: rgba(9, 150, 236, 1); background: rgba(9, 150, 236, 1);
border-radius: 5px; border-radius: 5px;
color: white;
font-family: 'ProximaNova Bold', Helvetica, Arial, sans-serif;
text-decoration: none;
font-size: 24px;
text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
.content { .image {
flex-grow: 1; margin-top: 30px;
} }
}
.new-button { .button {
display: inline-block; display: inline-block;
user-select: none; user-select: none;
color: white; font-size: 18px;
font-family: 'ProximaNova Bold', Helvetica, Arial, sans-serif;
text-decoration: none;
font-size: 18px;
text-align: center;
width: 226px; width: 226px;
height: 58px; height: 58px;
line-height: 58px; line-height: 58px;
box-sizing: border-box; box-sizing: border-box;
margin: 20px; margin: 20px;
margin-bottom: 60px;
border-radius: 8px; border-radius: 8px;
background: #22a4f3; background: #22a4f3;
background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%); background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);
box-shadow: box-shadow:
0 3px 0 0 rgba(0, 82, 175, 0.4), 0 3px 0 0 rgba(0, 82, 175, 0.4),
inset 0 2px 0 0 rgba(255, 255, 255, 0.4); inset 0 2px 0 0 rgba(255, 255, 255, 0.4);
border: 1px solid #003f72; border: 1px solid #003f72;
}
&:hover { &:hover .button {
background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%); background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%);
} }
} }

70
src/buttonOld.scss
View File

@@ -14,13 +14,10 @@
font-style: italic; font-style: italic;
text-align: center; text-align: center;
background: linear-gradient(0deg, #016ec1 0%, #0280cd 100%); background: linear-gradient(0deg, #016ec1 0%, #0280cd 100%);
padding: 5px; padding: 5px;
box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;
.oldclient-inner { .oldclient-inner {
border-radius: 25px; // border-radius - border - padding border-radius: 25px; // border-radius - border - padding
@@ -38,54 +35,41 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
.content {
flex-grow: 1;
text-align: center;
padding: 20px;
img {
width: 100%;
height: 70%;
margin-bottom: 30px;
}
}
} }
}
.old-button { .button {
display: inline-block; display: inline-block;
user-select: none; user-select: none;
font-size: 40px; font-size: 40px;
-webkit-text-stroke: 6px black; -webkit-text-stroke: 6px black;
paint-order: stroke fill; paint-order: stroke fill;
width: 250px; width: 250px;
height: 100px; height: 100px;
line-height: 100px; line-height: 100px;
box-sizing: border-box; box-sizing: border-box;
margin: 20px; margin: 20px;
border-radius: 22px / 28px; border-radius: 22px / 28px;
background: #0396e5; background: #0396e5;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgb(3, 150, 229) 0%, rgb(3, 150, 229) 0%,
rgb(1, 100, 199) 25%, rgb(1, 100, 199) 25%,
rgb(0, 83, 175) 50%, rgb(0, 83, 175) 50%,
rgb(77, 176, 243) 100% rgb(77, 176, 243) 100%
); );
box-shadow: box-shadow:
#00ccff 3px 1px 0px -1px inset, #00ccff 3px 1px 0px -1px inset,
#003366 0px 2px 0px 4px, #003366 0px 2px 0px 4px,
#00ccff 2.5px 6px 0px 4px, #00ccff 2.5px 6px 0px 4px,
#00529b -1px -2.5px 0px 5.5px; #00529b -1px -2.5px 0px 5.5px;
}
&:hover { &:hover .button {
background: #0054b0; background: #0054b0;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,

50
src/buttons.scss
View File

@@ -4,20 +4,64 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 50px;
.client { .client {
width: 500px; width: 500px;
height: 800px; height: 800px;
box-sizing: border-box; box-sizing: border-box;
margin-left: 50px; box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;
&:nth-child(0) { .image {
margin-left: 0px; height: 450px;
margin-bottom: 30px;
}
.content {
flex-grow: 1;
text-align: center;
} }
} }
} }
// desktop/tablet less tall
@media (max-height: 830px) and (min-width: 901px) {
.buttons .client {
height: 600px;
.image {
height: 300px;
}
}
}
// desktop/tablet less wide
@media (max-width: 1200px) and (min-width: 901px) {
.buttons .client {
width: 400px;
}
}
// mobile
@media (max-width: 900px) {
.buttons {
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
padding: 20px 0;
}
}
// mobile less wide
@media (max-width: 550px) {
.buttons .client {
width: 400px;
}
}