Your commit message here
This commit is contained in:
Anton Kupriianov
parent
f15d452782
commit
7eec9b4821
6 changed files with 178 additions and 49 deletions
BIN
public/images/battlesnake-neon-logo.GIF
Normal file
BIN
public/images/battlesnake-neon-logo.GIF
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 MiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
|
@ -13,20 +13,6 @@ function Hero() {
|
|||
cursor.style.top = `${e.clientY}px`;
|
||||
}
|
||||
};
|
||||
async function fetchUser() {
|
||||
const res = await fetch("http://localhost:3000/api/current_user", {
|
||||
credentials: "include", // very important
|
||||
});
|
||||
if (res.ok) {
|
||||
const user = await res.json();
|
||||
console.log("User display name:", user.displayName);
|
||||
|
||||
setUser(user);
|
||||
} else {
|
||||
setUser(null);
|
||||
}
|
||||
}
|
||||
fetchUser();
|
||||
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
|
||||
|
|
@ -141,7 +127,7 @@ function Hero() {
|
|||
<div className="hero-content">
|
||||
<div className="hero-logo-container">
|
||||
<img
|
||||
src="/images/battlesnake-neon-logo.jpg"
|
||||
src="/images/battlesnake-neon-logo.GIF"
|
||||
alt="BattleSnake Neon Logo"
|
||||
className="hero-logo"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
|
|||
const Navbar = () => {
|
||||
const [glitchEffect, setGlitchEffect] = useState(false);
|
||||
const [activeLink, setActiveLink] = useState("/");
|
||||
const [user, setUser] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Set active link based on current path
|
||||
|
|
@ -16,6 +17,22 @@ const Navbar = () => {
|
|||
setGlitchEffect(true);
|
||||
setTimeout(() => setGlitchEffect(false), 200);
|
||||
}, 3000);
|
||||
async function fetchUser() {
|
||||
const res = await fetch("http://localhost:8080/auth/current_user", {
|
||||
credentials: "include", // very important
|
||||
});
|
||||
if (res.ok) {
|
||||
console.log("User response:", res);
|
||||
const user = await res.json();
|
||||
console.log("User:", user);
|
||||
console.log("User display name:", user.displayName);
|
||||
|
||||
setUser(user);
|
||||
} else {
|
||||
setUser(null);
|
||||
}
|
||||
}
|
||||
fetchUser();
|
||||
|
||||
return () => clearInterval(glitchInterval);
|
||||
}, []);
|
||||
|
|
@ -29,6 +46,13 @@ const Navbar = () => {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
{user && (
|
||||
<div className="navbar__greeting">
|
||||
<span className="navbar__greeting-text">WELCOME</span>
|
||||
<span className="navbar__greeting-name">{user.displayName}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ul className="navbar__links">
|
||||
<li>
|
||||
<Link
|
||||
|
|
@ -42,7 +66,8 @@ const Navbar = () => {
|
|||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
{/* will be decided later of we shall keep NOTEBOOK or not */}
|
||||
{/* <li>
|
||||
<Link
|
||||
to="/notebook"
|
||||
className={`navbar__link ${
|
||||
|
|
@ -50,10 +75,11 @@ const Navbar = () => {
|
|||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">📓</span>
|
||||
<span className="navbar__link-text">NOTEBOOK</span>
|
||||
<span className="navbar__link-text"></span>
|
||||
NOTEBOOK
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
</li> */}
|
||||
<li>
|
||||
<Link
|
||||
to="/assignment"
|
||||
|
|
@ -96,3 +122,4 @@ const Navbar = () => {
|
|||
};
|
||||
|
||||
export default Navbar;
|
||||
//{user ? user.displayName : "NOTEBOOK"}
|
||||
|
|
|
|||
|
|
@ -7,12 +7,6 @@ const PageHome = () => {
|
|||
}, []);
|
||||
const [user, setUser] = useState(null);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (user) {
|
||||
// console.log(`Welcome, ${user.displayName || "Guest"}!`);
|
||||
// }
|
||||
// }, [user]);
|
||||
|
||||
return (
|
||||
<div className="homepage-container">
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -18,34 +18,113 @@ $cyber-black: #1a1a1a;
|
|||
@keyframes glitch {
|
||||
0% {
|
||||
text-shadow: 0.05em 0 0 $neon-blue, -0.05em -0.025em 0 $neon-pink;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 75%, 0 75%, 0 100%, 100% 100%);
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
100% 0,
|
||||
100% 25%,
|
||||
0 25%,
|
||||
0 30%,
|
||||
100% 30%,
|
||||
100% 50%,
|
||||
0 50%,
|
||||
0 60%,
|
||||
100% 60%,
|
||||
100% 75%,
|
||||
0 75%,
|
||||
0 100%,
|
||||
100% 100%
|
||||
);
|
||||
}
|
||||
25% {
|
||||
text-shadow: -0.05em -0.025em 0 $neon-blue, 0.025em 0.025em 0 $neon-pink;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 85%, 0 85%, 0 100%, 100% 100%);
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
100% 0,
|
||||
100% 35%,
|
||||
0 35%,
|
||||
0 65%,
|
||||
100% 65%,
|
||||
100% 85%,
|
||||
0 85%,
|
||||
0 100%,
|
||||
100% 100%
|
||||
);
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0.025em 0.05em 0 $neon-blue, -0.05em -0.05em 0 $neon-pink;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%, 0 40%, 100% 40%, 100% 55%, 0 55%, 0 70%, 100% 70%, 100% 100%, 0 100%);
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
100% 0,
|
||||
100% 15%,
|
||||
0 15%,
|
||||
0 40%,
|
||||
100% 40%,
|
||||
100% 55%,
|
||||
0 55%,
|
||||
0 70%,
|
||||
100% 70%,
|
||||
100% 100%,
|
||||
0 100%
|
||||
);
|
||||
}
|
||||
75% {
|
||||
text-shadow: -0.05em -0.025em 0 $neon-blue, 0.025em 0.025em 0 $neon-pink;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%, 0 50%, 100% 50%, 100% 70%, 0 70%, 0 80%, 100% 80%, 100% 100%, 0 100%);
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
100% 0,
|
||||
100% 45%,
|
||||
0 45%,
|
||||
0 50%,
|
||||
100% 50%,
|
||||
100% 70%,
|
||||
0 70%,
|
||||
0 80%,
|
||||
100% 80%,
|
||||
100% 100%,
|
||||
0 100%
|
||||
);
|
||||
}
|
||||
100% {
|
||||
text-shadow: 0.05em 0 0 $neon-blue, -0.05em -0.025em 0 $neon-pink;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 75%, 0 75%, 0 100%, 100% 100%);
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
100% 0,
|
||||
100% 25%,
|
||||
0 25%,
|
||||
0 30%,
|
||||
100% 30%,
|
||||
100% 50%,
|
||||
0 50%,
|
||||
0 60%,
|
||||
100% 60%,
|
||||
100% 75%,
|
||||
0 75%,
|
||||
0 100%,
|
||||
100% 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon-flicker {
|
||||
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
|
||||
0%,
|
||||
19.999%,
|
||||
22%,
|
||||
62.999%,
|
||||
64%,
|
||||
64.999%,
|
||||
70%,
|
||||
100% {
|
||||
opacity: 0.99;
|
||||
filter: drop-shadow(0 0 1px rgba($neon-pink, 0.95))
|
||||
drop-shadow(0 0 4px rgba($neon-pink, 0.6))
|
||||
drop-shadow(0 0 8px rgba($neon-pink, 0.4));
|
||||
drop-shadow(0 0 4px rgba($neon-pink, 0.6))
|
||||
drop-shadow(0 0 8px rgba($neon-pink, 0.4));
|
||||
}
|
||||
20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
|
||||
20%,
|
||||
21.999%,
|
||||
63%,
|
||||
63.999%,
|
||||
65%,
|
||||
69.999% {
|
||||
opacity: 0.4;
|
||||
filter: none;
|
||||
}
|
||||
|
|
@ -53,10 +132,12 @@ $cyber-black: #1a1a1a;
|
|||
|
||||
@keyframes hover-glow {
|
||||
0% {
|
||||
box-shadow: 0 0 5px $neon-blue, 0 0 10px $neon-blue, 0 0 15px $neon-blue, 0 0 20px $neon-blue;
|
||||
box-shadow: 0 0 5px $neon-blue, 0 0 10px $neon-blue, 0 0 15px $neon-blue,
|
||||
0 0 20px $neon-blue;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue, 0 0 30px $neon-blue, 0 0 40px $neon-blue;
|
||||
box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue, 0 0 30px $neon-blue,
|
||||
0 0 40px $neon-blue;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +164,7 @@ $cyber-black: #1a1a1a;
|
|||
|
||||
&__logo {
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -113,6 +194,47 @@ $cyber-black: #1a1a1a;
|
|||
}
|
||||
}
|
||||
|
||||
&__greeting {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid $neon-blue;
|
||||
border-radius: 4px;
|
||||
background-color: rgba($dark-bg, 0.7);
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
|
||||
&-text {
|
||||
color: $neon-blue;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 5px rgba($neon-blue, 0.7);
|
||||
}
|
||||
|
||||
&-name {
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
animation: neon-flicker 5s infinite alternate;
|
||||
text-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: linear-gradient(90deg, transparent, $neon-blue, transparent);
|
||||
animation: scanline 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&__links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue