Skip to content

feat: Add modern homepage and guest mode authentication #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rivka14 merged 3 commits into from
Jan 12, 2026
Merged

feat: Add modern homepage and guest mode authentication #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
771781e
feat: add guest mode for playing without OAuth authentication
rivka14 Jan 12, 2026
ab207a1
feat: add modern home page with dark/light theme and animations
rivka14 Jan 12, 2026
04a00a5
Merge remote-tracking branch 'origin/my-feature' into feat/homepage-a…
rivka14 Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet" />
<title>netropolis</title>
<title>Netropolise</title>
</head>
<body>
<div id="root"></div>
Expand Down
60 changes: 60 additions & 0 deletions client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,15 @@
"@react-three/drei": "^10.7.7",
"@react-three/fiber": "^9.5.0",
"@react-three/postprocessing": "^3.0.4",
"@shadergradient/react": "^2.4.20",
"animejs": "^3.2.2",
"axios": "^1.13.2",
"postprocessing": "^6.38.2",
"prop-types": "^15.8.1",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-router": "^7.9.6",
"react-router-dom": "^6.30.3",
"three": "^0.182.0"
},
"devDependencies": {
Expand Down
119 changes: 100 additions & 19 deletions client/src/components/common/SideNavigation/SideNavigation.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,20 @@
background: color-mix(in srgb, white 46%, transparent);
backdrop-filter: blur(16px) saturate(1.25);
-webkit-backdrop-filter: blur(16px) saturate(1.25);
border: 1px solid color-mix(in srgb, white 34%, transparent);
border: 2px solid transparent;
border-image: linear-gradient(
180deg,
rgba(0, 242, 255, 0.4),
rgba(112, 0, 255, 0.3),
rgba(255, 0, 85, 0.3),
rgba(255, 237, 78, 0.4)
);
border-image-slice: 1;
box-shadow:
0 18px 44px color-mix(in srgb, var(--neo-text) 18%, transparent),
0 0 0 1px color-mix(in srgb, var(--candy-sky) 16%, transparent) inset,
0 0 26px color-mix(in srgb, var(--candy-sky) 14%, transparent);
0 0 30px rgba(0, 242, 255, 0.15),
0 0 30px rgba(112, 0, 255, 0.12),
0 0 30px rgba(255, 237, 78, 0.1);
display: flex;
flex-direction: column;
animation: panelIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
Expand Down Expand Up @@ -103,6 +112,10 @@
.header .title {
font-size: 14px;
letter-spacing: 0.06em;
background: linear-gradient(90deg, rgba(0, 242, 255, 0.9), rgba(112, 0, 255, 0.9));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.title {
Expand Down Expand Up @@ -186,24 +199,39 @@
padding: 6px 10px;
border-radius: 999px;
background: color-mix(in srgb, white 24%, transparent);
border: 1px solid color-mix(in srgb, var(--candy-sky) 32%, transparent);
border: 1.5px solid transparent;
background-clip: padding-box;
position: relative;
color: color-mix(in srgb, var(--neo-text) 92%, transparent);
font-size: 13px;
font-weight: 700;
box-shadow:
0 0 0 1px color-mix(in srgb, white 30%, transparent) inset,
0 14px 28px color-mix(in srgb, var(--neo-text) 12%, transparent),
0 0 18px color-mix(in srgb, var(--candy-sky) 10%, transparent);
0 0 18px rgba(0, 242, 255, 0.15);
cursor: pointer;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.kpi::before {
content: '';
position: absolute;
inset: -1.5px;
border-radius: 999px;
padding: 1.5px;
background: linear-gradient(135deg, rgba(0, 242, 255, 0.5), rgba(112, 0, 255, 0.4));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}

.kpi:hover {
transform: translateY(-1px) scale(1.03);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--candy-sky) 40%, transparent) inset,
0 0 0 1px rgba(0, 242, 255, 0.3) inset,
0 18px 36px color-mix(in srgb, var(--neo-text) 18%, transparent),
0 0 22px color-mix(in srgb, var(--candy-sky) 22%, transparent);
0 0 25px rgba(0, 242, 255, 0.35),
0 0 25px rgba(112, 0, 255, 0.25);
}

.kpi:focus-visible {
Expand All @@ -229,20 +257,35 @@
border-radius: 22px;
padding: 9px;
background: color-mix(in srgb, white 22%, transparent);
border: 1px solid color-mix(in srgb, var(--candy-sky) 18%, transparent);
border: 1.5px solid transparent;
background-clip: padding-box;
position: relative;
box-shadow:
0 14px 26px color-mix(in srgb, var(--neo-text) 12%, transparent),
0 0 18px color-mix(in srgb, var(--candy-sky) 10%, transparent);
0 0 18px rgba(0, 242, 255, 0.12),
0 0 18px rgba(255, 237, 78, 0.1);
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.gestureCard::before {
content: '';
position: absolute;
inset: -1.5px;
border-radius: 22px;
padding: 1.5px;
background: linear-gradient(135deg, rgba(0, 242, 255, 0.4), rgba(255, 237, 78, 0.4));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}

.gestureCard:hover {
transform: translateY(-1px) scale(1.02);
border-color: color-mix(in srgb, var(--candy-sky) 34%, transparent);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--candy-sky) 26%, transparent) inset,
0 0 0 1px rgba(0, 242, 255, 0.2) inset,
0 18px 34px color-mix(in srgb, var(--neo-text) 16%, transparent),
0 0 22px color-mix(in srgb, var(--candy-sky) 18%, transparent);
0 0 25px rgba(0, 242, 255, 0.25),
0 0 25px rgba(255, 237, 78, 0.2);
}

.gestureName {
Expand All @@ -266,10 +309,14 @@
}

.active {
border-color: color-mix(in srgb, var(--candy-sky) 55%, transparent);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--candy-sky) 28%, transparent) inset,
0 0 18px color-mix(in srgb, var(--candy-sky) 26%, transparent);
0 0 0 1px rgba(0, 242, 255, 0.4) inset,
0 0 30px rgba(0, 242, 255, 0.4),
0 0 30px rgba(112, 0, 255, 0.3);
}

.active::before {
background: linear-gradient(135deg, rgba(0, 242, 255, 0.7), rgba(112, 0, 255, 0.6));
}

.iconWrap {
Expand All @@ -279,10 +326,25 @@
display: grid;
place-items: center;
background: color-mix(in srgb, white 18%, transparent);
border: 1px solid color-mix(in srgb, var(--candy-lemon) 24%, transparent);
border: 1.5px solid transparent;
background-clip: padding-box;
position: relative;
box-shadow:
0 10px 18px color-mix(in srgb, var(--neo-text) 10%, transparent),
0 0 14px color-mix(in srgb, var(--candy-lemon) 10%, transparent);
0 0 15px rgba(255, 237, 78, 0.2),
0 0 15px rgba(255, 0, 85, 0.15);
}

.iconWrap::before {
content: '';
position: absolute;
inset: -1.5px;
border-radius: 18px;
padding: 1.5px;
background: linear-gradient(135deg, rgba(255, 237, 78, 0.6), rgba(255, 0, 85, 0.4));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}

.footer {
Expand Down Expand Up @@ -359,8 +421,27 @@
height: 10px;
transform: translateY(-50%);
border-radius: 999px;
background: color-mix(in srgb, var(--candy-sky) 55%, white);
box-shadow: 0 0 0 3px color-mix(in srgb, white 75%, transparent);
background: linear-gradient(135deg, rgba(0, 242, 255, 0.9), rgba(112, 0, 255, 0.8));
box-shadow:
0 0 0 3px color-mix(in srgb, white 75%, transparent),
0 0 10px rgba(0, 242, 255, 0.5),
0 0 10px rgba(112, 0, 255, 0.4);
animation: mapPinPulse 2s ease-in-out infinite;
}

@keyframes mapPinPulse {
0%, 100% {
box-shadow:
0 0 0 3px color-mix(in srgb, white 75%, transparent),
0 0 10px rgba(0, 242, 255, 0.5),
0 0 10px rgba(112, 0, 255, 0.4);
}
50% {
box-shadow:
0 0 0 3px color-mix(in srgb, white 75%, transparent),
0 0 15px rgba(0, 242, 255, 0.7),
0 0 15px rgba(112, 0, 255, 0.6);
}
}

.mapPin::after {
Expand Down
Loading
Loading