Merge branch 'main into homepage-2nd-sprint
This commit is contained in:
Jae Young Ahn
commit
450d141ad9
9 changed files with 740 additions and 196 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 |
|
|
@ -3,13 +3,31 @@ import Editor from '@monaco-editor/react';
|
|||
|
||||
export default function EditorPanel({ code, onChange }) {
|
||||
return (
|
||||
<div className="editor-panel">
|
||||
<div style={{
|
||||
border: '1px solid #444',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: '#1e1e1e',
|
||||
height: '400px',
|
||||
boxShadow: '0 0 10px rgba(255, 0, 255, 0.2)',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<Editor
|
||||
height="100%"
|
||||
defaultLanguage="python"
|
||||
value={code}
|
||||
onChange={v => onChange(v || '')}
|
||||
theme="vs-dark"
|
||||
options={{
|
||||
fontSize: 16,
|
||||
padding: { top: 10, bottom: 10 },
|
||||
minimap: { enabled: false },
|
||||
scrollbar: {
|
||||
verticalScrollbarSize: 8,
|
||||
horizontalScrollbarSize: 8,
|
||||
},
|
||||
lineNumbers: 'on',
|
||||
scrollBeyondLastLine: false,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useRef } from "react";
|
||||
import "../scss/components/Hero.scss";
|
||||
import "../scss/components/_hero.scss";
|
||||
|
||||
function Hero() {
|
||||
const canvasRef = useRef(null);
|
||||
|
|
@ -32,7 +32,7 @@ function Hero() {
|
|||
|
||||
// Japanese katakana characters + some latin characters and numbers
|
||||
const katakana =
|
||||
"アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
"アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
|
||||
const latin = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
const nums = "0123456789";
|
||||
const alphabet = katakana + latin + nums;
|
||||
|
|
@ -125,21 +125,30 @@ function Hero() {
|
|||
<div className="hero-glitch-lines"></div>
|
||||
|
||||
<div className="hero-content">
|
||||
<div className="hero-text-container">
|
||||
<h1 className="hero-title">
|
||||
BATTLE<span className="hero-title-highlight">SNAKE</span>
|
||||
</h1>
|
||||
<p className="hero-subtitle">
|
||||
Enter the digital arena and code your way to victory
|
||||
</p>
|
||||
|
||||
<div className="hero-cta-container">
|
||||
<button className="hero-cta">
|
||||
<span className="hero-cta-text">START BATTLE</span>
|
||||
<span className="hero-cta-glitch"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
/>
|
||||
<div className="hero-logo-glow"></div>
|
||||
</div>
|
||||
|
||||
<div className="hero-cta-container">
|
||||
<button className="hero-cta">
|
||||
<span className="hero-cta-text">START BATTLE</span>
|
||||
<span className="hero-cta-glitch"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="cyberpunk-cursor"></div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,32 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import "../scss/styles.scss";
|
||||
import "../scss/components/_navbar.scss";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
const Navbar = () => {
|
||||
const [glitchEffect, setGlitchEffect] = useState(false);
|
||||
const [activeLink, setActiveLink] = useState("/");
|
||||
const [user, setUser] = useState(null);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const menuRef = useRef(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogout = () => {
|
||||
// Implement client-side logout without calling the backend
|
||||
// This clears the user state in the frontend
|
||||
setUser(null);
|
||||
|
||||
// Clear any authentication cookies if they exist
|
||||
document.cookie.split(";").forEach((cookie) => {
|
||||
const [name] = cookie.trim().split("=");
|
||||
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
|
||||
});
|
||||
|
||||
// Redirect to home page
|
||||
navigate("/");
|
||||
|
||||
console.log("Logged out successfully");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Set active link based on current path
|
||||
|
|
@ -17,11 +38,52 @@ const Navbar = () => {
|
|||
setTimeout(() => setGlitchEffect(false), 200);
|
||||
}, 3000);
|
||||
|
||||
return () => clearInterval(glitchInterval);
|
||||
// Close menu when clicking outside
|
||||
const handleClickOutside = (event) => {
|
||||
if (
|
||||
menuRef.current &&
|
||||
!menuRef.current.contains(event.target) &&
|
||||
menuOpen
|
||||
) {
|
||||
setMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
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();
|
||||
//checking user response
|
||||
// console.log("User:", user);
|
||||
// console.log("User display name:", user.displayName);
|
||||
|
||||
setUser(user);
|
||||
} else {
|
||||
setUser(null);
|
||||
}
|
||||
}
|
||||
fetchUser();
|
||||
|
||||
return () => {
|
||||
clearInterval(glitchInterval);
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen(!menuOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className={`navbar ${glitchEffect ? "navbar--glitch" : ""}`}>
|
||||
<nav
|
||||
className={`navbar ${glitchEffect ? "navbar--glitch" : ""} ${
|
||||
menuOpen ? "navbar--menu-open" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="navbar__logo">
|
||||
<div className="navbar__logo-scanner"></div>
|
||||
<span className="navbar__logo-text">
|
||||
|
|
@ -29,7 +91,29 @@ const Navbar = () => {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="navbar__links">
|
||||
<div className="navbar__hamburger" onClick={toggleMenu}>
|
||||
<div
|
||||
className={`navbar__hamburger-line ${menuOpen ? "active" : ""}`}
|
||||
></div>
|
||||
<div
|
||||
className={`navbar__hamburger-line ${menuOpen ? "active" : ""}`}
|
||||
></div>
|
||||
<div
|
||||
className={`navbar__hamburger-line ${menuOpen ? "active" : ""}`}
|
||||
></div>
|
||||
</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 ${menuOpen ? "navbar__links--open" : ""}`}
|
||||
ref={menuRef}
|
||||
>
|
||||
<li>
|
||||
<Link
|
||||
to="/"
|
||||
|
|
@ -42,7 +126,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 +135,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"
|
||||
|
|
@ -79,16 +165,31 @@ const Navbar = () => {
|
|||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/login"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/login" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">🔒</span>
|
||||
<span className="navbar__link-text">LOGIN</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
{user ? (
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleLogout();
|
||||
}}
|
||||
className={`navbar__link`}
|
||||
>
|
||||
<span className="navbar__link-icon">🔓</span>
|
||||
<span className="navbar__link-text">LOGOUT</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/login" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">🔒</span>
|
||||
<span className="navbar__link-text">LOGIN</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -96,3 +197,21 @@ const Navbar = () => {
|
|||
};
|
||||
|
||||
export default Navbar;
|
||||
//{user ? user.displayName : "NOTEBOOK"}
|
||||
|
||||
//server side logout (was not working properly, so implemented client side logout)
|
||||
// const handleLogout = async () => {
|
||||
// try {
|
||||
// const res = await fetch("http://localhost:8080/auth/logout", {
|
||||
// method: "GET",
|
||||
// credentials: "include",
|
||||
// });
|
||||
|
||||
// if (res.ok) {
|
||||
// setUser(null);
|
||||
// } else {
|
||||
// console.error("Logout failed");
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("Error during logout:", error);
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,131 +1,203 @@
|
|||
// Page - Code Editor
|
||||
import { useEffect, useState } from "react";
|
||||
import CodeMirror from "@uiw/react-codemirror";
|
||||
import { javascript } from "@codemirror/lang-javascript";
|
||||
import { html } from "@codemirror/lang-html";
|
||||
import { css } from "@codemirror/lang-css";
|
||||
import { vscodeDark } from "@uiw/codemirror-theme-vscode";
|
||||
import EditorPanel from "../components/EditorPanel";
|
||||
import PreviewPanel from "../components/PreviewPanel";
|
||||
|
||||
const PageCodeEditor = () => {
|
||||
|
||||
const [code, setCode] = useState(`# Write your Battlesnake code here\ndef move(board):\n return { 'move': 'up' }`);
|
||||
|
||||
// State for storing code in different tabs
|
||||
const [htmlCode, setHtmlCode] = useState(
|
||||
"<div>\n <h1>Hello World</h1>\n <p>Start editing to see some magic happen!</p>\n</div>"
|
||||
);
|
||||
const [cssCode, setCssCode] = useState(
|
||||
"h1 {\n color: #0070f3;\n}\n\np {\n color: #444;\n}"
|
||||
);
|
||||
const [jsCode, setJsCode] = useState(
|
||||
'// JavaScript goes here\nconsole.log("Hello from the editor!");'
|
||||
);
|
||||
|
||||
// State for active tab
|
||||
const [activeTab, setActiveTab] = useState("html");
|
||||
|
||||
// Combined code for preview
|
||||
const combinedCode = `
|
||||
<html>
|
||||
<head>
|
||||
<style>${cssCode}</style>
|
||||
</head>
|
||||
<body>
|
||||
${htmlCode}
|
||||
<script>${jsCode}</script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
useEffect(() => {
|
||||
document.title = "Code Editor";
|
||||
document.title = "Snake Brain Editor";
|
||||
}, []);
|
||||
|
||||
// Function to handle which editor to show based on active tab
|
||||
const renderEditor = () => {
|
||||
switch (activeTab) {
|
||||
case "html":
|
||||
return (
|
||||
<CodeMirror
|
||||
value={htmlCode}
|
||||
height="100%"
|
||||
theme={vscodeDark}
|
||||
extensions={[html()]}
|
||||
onChange={(value) => setHtmlCode(value)}
|
||||
/>
|
||||
);
|
||||
case "css":
|
||||
return (
|
||||
<CodeMirror
|
||||
value={cssCode}
|
||||
height="100%"
|
||||
theme={vscodeDark}
|
||||
extensions={[css()]}
|
||||
onChange={(value) => setCssCode(value)}
|
||||
/>
|
||||
);
|
||||
case "js":
|
||||
return (
|
||||
<CodeMirror
|
||||
value={jsCode}
|
||||
height="100%"
|
||||
theme={vscodeDark}
|
||||
extensions={[javascript()]}
|
||||
onChange={(value) => setJsCode(value)}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="code-editor-page">
|
||||
|
||||
<div className="editor-section">
|
||||
<EditorPanel code={code} onChange={setCode} />
|
||||
</div>
|
||||
<div className="preview-section">
|
||||
<PreviewPanel code={code} />
|
||||
</div>
|
||||
|
||||
<div className="editor-container">
|
||||
<div className="editor-tabs">
|
||||
<button
|
||||
className={`tab ${activeTab === "html" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("html")}
|
||||
>
|
||||
HTML
|
||||
</button>
|
||||
<button
|
||||
className={`tab ${activeTab === "css" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("css")}
|
||||
>
|
||||
CSS
|
||||
</button>
|
||||
<button
|
||||
className={`tab ${activeTab === "js" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("js")}
|
||||
>
|
||||
JavaScript
|
||||
</button>
|
||||
</div>
|
||||
<div className="editor-content">{renderEditor()}</div>
|
||||
</div>
|
||||
<div className="preview-container">
|
||||
<div className="preview-header">
|
||||
<h3>Preview</h3>
|
||||
</div>
|
||||
<div className="preview-content">
|
||||
<iframe
|
||||
title="code-preview"
|
||||
srcDoc={combinedCode}
|
||||
sandbox="allow-scripts"
|
||||
width="100%"
|
||||
height="100%"
|
||||
<main className="code-editor-page" style={{ paddingTop: '70px' }}>
|
||||
<div
|
||||
className="editor-page-layout"
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '2rem',
|
||||
padding: '2rem',
|
||||
fontFamily: "'Fira Code', 'Courier New', monospace",
|
||||
}}
|
||||
>
|
||||
{/* python editor */}
|
||||
<div
|
||||
className="box-panel"
|
||||
style={{
|
||||
flex: 2,
|
||||
background: 'linear-gradient(145deg, #0d0221, #1a1a1a)',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 0 15px #05d9e8, 0 0 30px #ff2a6d',
|
||||
border: '1px solid #ff2a6d',
|
||||
padding: '1rem',
|
||||
color: '#eee',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ff2a6d',
|
||||
height: '6px',
|
||||
borderRadius: '3px 3px 0 0',
|
||||
marginBottom: '0.5rem',
|
||||
}}
|
||||
/>
|
||||
<h3
|
||||
className="panel-heading"
|
||||
style={{
|
||||
fontSize: '1.2rem',
|
||||
color: '#05d9e8',
|
||||
textShadow: '0 0 5px #05d9e8',
|
||||
marginBottom: '1rem',
|
||||
}}
|
||||
>
|
||||
🐍 Snake Brain (Python)
|
||||
</h3>
|
||||
<EditorPanel code={code} onChange={setCode} />
|
||||
</div>
|
||||
|
||||
{/* live arena */}
|
||||
<div
|
||||
className="box-panel"
|
||||
style={{
|
||||
flex: 1,
|
||||
background: '#1a1a1a',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 0 15px #d300c5, 0 0 25px #ff2a6d',
|
||||
border: '1px solid #d300c5',
|
||||
padding: '1rem',
|
||||
color: '#eee',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#d300c5',
|
||||
height: '6px',
|
||||
borderRadius: '3px 3px 0 0',
|
||||
marginBottom: '0.5rem',
|
||||
}}
|
||||
/>
|
||||
<h3
|
||||
style={{
|
||||
fontSize: '1.2rem',
|
||||
color: '#d300c5',
|
||||
textShadow: '0 0 5px #d300c5',
|
||||
marginBottom: '1rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
🎯 Live Arena Output
|
||||
</h3>
|
||||
|
||||
<h4 style={{ color: '#fff', textAlign: 'center', marginBottom: '1rem' }}>
|
||||
Battlesnake Preview
|
||||
</h4>
|
||||
|
||||
{/* game url*/}
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
border: '1px solid #ff2a6d',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
marginBottom: '1rem',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Game URL"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: '#fff',
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
fontFamily: "'Fira Code', monospace",
|
||||
outline: 'none',
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: '#ff2a6d',
|
||||
color: '#fff',
|
||||
padding: '0.5rem 1rem',
|
||||
border: 'none',
|
||||
borderRadius: '20px',
|
||||
marginTop: '0.5rem',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
FETCH BOARD
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* snake api */}
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
border: '1px solid #ff2a6d',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
marginBottom: '1rem',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your Snake API URL"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: '#fff',
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
fontFamily: "'Fira Code', monospace",
|
||||
outline: 'none',
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: '#ff2a6d',
|
||||
color: '#fff',
|
||||
padding: '0.5rem 1rem',
|
||||
border: 'none',
|
||||
borderRadius: '20px',
|
||||
marginTop: '0.5rem',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
CONNECT SNAKE API
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* test move button */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginTop: '2rem',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: '#ff2a6d',
|
||||
color: '#fff',
|
||||
padding: '0.5rem 2rem',
|
||||
border: 'none',
|
||||
borderRadius: '20px',
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer',
|
||||
boxShadow: '0 0 10px #ff2a6d',
|
||||
}}
|
||||
>
|
||||
TEST MOVE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,27 @@
|
|||
// Page - Home
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect } from "react";
|
||||
|
||||
const PageHome = () => {
|
||||
useEffect(() => {
|
||||
document.title = "Home";
|
||||
}, []);
|
||||
const [user, setUser] = useState(null);
|
||||
|
||||
useEffect(()=>{
|
||||
document.title = 'Home';
|
||||
},[]);
|
||||
|
||||
return (
|
||||
<div className="homepage-container">
|
||||
<main>
|
||||
<section>
|
||||
<h2>Home Page</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit porro, dolorem, quod facere enim voluptate provident quo labore vero repellat nemo animi ad exercitationem rem quos, possimus libero deleniti laudantium?</p>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="homepage-container">
|
||||
<main>
|
||||
<section>
|
||||
<h2>Home Page</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit
|
||||
porro, dolorem, quod facere enim voluptate provident quo labore vero
|
||||
repellat nemo animi ad exercitationem rem quos, possimus libero
|
||||
deleniti laudantium?
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageHome;
|
||||
|
|
@ -145,28 +145,89 @@ $cyber-black: #1a1a1a;
|
|||
&-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 2rem;
|
||||
// Add a subtle backdrop filter to make content more readable against the matrix rain
|
||||
backdrop-filter: blur(2px);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column-reverse;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Text container styling
|
||||
&-text-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-right: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Title styling
|
||||
&-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: 4px;
|
||||
text-shadow: 0 0 10px rgba($neon-blue, 0.7);
|
||||
animation: flicker 3s infinite alternate;
|
||||
|
||||
&-highlight {
|
||||
color: $neon-pink;
|
||||
text-shadow: 0 0 10px rgba($neon-pink, 0.7);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Subtitle styling
|
||||
&-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: rgba(white, 0.8);
|
||||
margin-bottom: 2rem;
|
||||
max-width: 500px;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Logo styling
|
||||
&-logo-container {
|
||||
position: relative;
|
||||
margin-bottom: 3rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 50%;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
max-width: 80%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
max-width: 80%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
filter: drop-shadow(0 0 10px rgba($neon-blue, 0.7))
|
||||
|
|
@ -191,8 +252,8 @@ $cyber-black: #1a1a1a;
|
|||
|
||||
// CTA button styling
|
||||
&-cta-container {
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
&-cta {
|
||||
|
|
@ -6,6 +6,9 @@ $neon-yellow: #f7f500;
|
|||
$dark-bg: #0d0221;
|
||||
$cyber-black: #1a1a1a;
|
||||
|
||||
// Breakpoints
|
||||
$mobile-breakpoint: 768px;
|
||||
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
|
|
@ -18,34 +21,136 @@ $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 hamburger-pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 8px $neon-pink, 0 0 15px $neon-pink, 0 0 20px $neon-pink;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-reveal {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@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 +158,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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,6 +182,7 @@ $cyber-black: #1a1a1a;
|
|||
width: 100%;
|
||||
border-bottom: 1px solid $neon-pink;
|
||||
backdrop-filter: blur(5px);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// Glitch effect for the navbar
|
||||
&--glitch {
|
||||
|
|
@ -83,7 +191,7 @@ $cyber-black: #1a1a1a;
|
|||
|
||||
&__logo {
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -113,20 +221,148 @@ $cyber-black: #1a1a1a;
|
|||
}
|
||||
}
|
||||
|
||||
&__hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-line {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
|
||||
|
||||
&.active {
|
||||
&:nth-child(1) {
|
||||
transform: translateY(9.5px) rotate(45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: translateY(-9.5px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.navbar__hamburger-line {
|
||||
animation: hamburger-pulse 1.5s infinite;
|
||||
box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-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;
|
||||
gap: 1.5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
background-color: rgba($cyber-black, 0.95);
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
gap: 1.5rem;
|
||||
padding: 5rem 2rem 2rem;
|
||||
z-index: 1000;
|
||||
box-shadow: -5px 0 15px rgba($neon-purple, 0.5);
|
||||
border-left: 1px solid $neon-pink;
|
||||
backdrop-filter: blur(10px);
|
||||
overflow-y: auto;
|
||||
transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||
}
|
||||
|
||||
&--open {
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
right: 0;
|
||||
|
||||
li {
|
||||
animation: menu-reveal 0.5s ease forwards;
|
||||
opacity: 0;
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&:nth-child(#{$i}) {
|
||||
animation-delay: 0.1s * $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -143,6 +379,13 @@ $cyber-black: #1a1a1a;
|
|||
transition: all 0.3s ease;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
width: 100%;
|
||||
padding: 0.8rem 1rem;
|
||||
border: 1px solid rgba($neon-blue, 0.3);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
|
|
@ -192,4 +435,22 @@ $cyber-black: #1a1a1a;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile menu open state
|
||||
&--menu-open {
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
&::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
backdrop-filter: blur(3px);
|
||||
animation: menu-reveal 0.3s ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue