Enhance Hero and Navbar components with cyberpunk effects and animations. Implement matrix rain background in Hero, add glitch effect to Navbar, and update styles. Remove unused assignment page styles.
This commit is contained in:
Anton Kupriianov
parent
17f33651a6
commit
526b7bec18
12 changed files with 952 additions and 187 deletions
BIN
public/images/battlesnake-neon-logo.jpg
Normal file
BIN
public/images/battlesnake-neon-logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
BIN
public/images/grid-background-2.png
Normal file
BIN
public/images/grid-background-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
public/images/grid-background-3.png
Normal file
BIN
public/images/grid-background-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
|
|
@ -1,34 +1,148 @@
|
|||
import React from "react";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import "../scss/components/Hero.scss";
|
||||
import Services from "./Services";
|
||||
|
||||
function Hero() {
|
||||
const canvasRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Create a cyberpunk cursor effect
|
||||
const handleMouseMove = (e) => {
|
||||
const cursor = document.querySelector(".cyberpunk-cursor");
|
||||
if (cursor) {
|
||||
cursor.style.left = `${e.clientX}px`;
|
||||
cursor.style.top = `${e.clientY}px`;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Matrix digital rain effect
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
// Japanese katakana characters + some latin characters and numbers
|
||||
const katakana =
|
||||
"アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
const latin = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
const nums = "0123456789";
|
||||
const alphabet = katakana + latin + nums;
|
||||
|
||||
const fontSize = 16;
|
||||
const columns = canvas.width / fontSize;
|
||||
|
||||
// Array to store the y position of each column
|
||||
const drops = [];
|
||||
for (let i = 0; i < columns; i++) {
|
||||
drops[i] = Math.random() * -100;
|
||||
}
|
||||
|
||||
// Function to get a random character from the alphabet
|
||||
const getRandomChar = () => {
|
||||
return alphabet[Math.floor(Math.random() * alphabet.length)];
|
||||
};
|
||||
|
||||
// Drawing the characters
|
||||
const draw = () => {
|
||||
// Black with opacity to create the fade effect
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.fillStyle = "#0F0"; // Green text
|
||||
ctx.font = `${fontSize}px monospace`;
|
||||
|
||||
// Loop over each column
|
||||
for (let i = 0; i < drops.length; i++) {
|
||||
// Get a random character
|
||||
const text = getRandomChar();
|
||||
|
||||
// Calculate x position (column * fontSize)
|
||||
const x = i * fontSize;
|
||||
|
||||
// Calculate y position (current drop position)
|
||||
const y = drops[i] * fontSize;
|
||||
|
||||
// Draw the character
|
||||
ctx.fillText(text, x, y);
|
||||
|
||||
// Randomly change the character's color to create a glowing effect
|
||||
if (Math.random() > 0.975) {
|
||||
ctx.fillStyle = "#FFF"; // White for glow effect
|
||||
ctx.fillText(text, x, y);
|
||||
ctx.fillStyle = "#0F0"; // Back to green
|
||||
}
|
||||
|
||||
// Reset the drop when it reaches the bottom or randomly
|
||||
if (y > canvas.height && Math.random() > 0.975) {
|
||||
drops[i] = 0;
|
||||
}
|
||||
|
||||
// Increment y coordinate for the drop
|
||||
drops[i]++;
|
||||
}
|
||||
|
||||
// Call the draw function again on the next frame
|
||||
requestAnimationFrame(draw);
|
||||
};
|
||||
|
||||
// Handle window resize
|
||||
const handleResize = () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
// Recalculate columns
|
||||
const newColumns = canvas.width / fontSize;
|
||||
// Adjust drops array
|
||||
if (newColumns > drops.length) {
|
||||
for (let i = drops.length; i < newColumns; i++) {
|
||||
drops[i] = Math.random() * -100;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
// Start the animation
|
||||
draw();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="hero">
|
||||
<div className="hero-text">
|
||||
<p className="intro">Welcome to Bytecamp!!!</p>
|
||||
<h1>Play for Fun!</h1>
|
||||
<p className="desc">
|
||||
A competitive game where your code is the controller.<br /> All you need is
|
||||
a web server that responds to the Battlesnake API.
|
||||
</p>
|
||||
<button className="cta">Start Battle</button>
|
||||
</div>
|
||||
<div className="hero-image">
|
||||
<div className="hex-bg">
|
||||
<canvas ref={canvasRef} className="matrix-rain"></canvas>
|
||||
<div className="hero-cyberpunk-grid"></div>
|
||||
<div className="hero-glitch-lines"></div>
|
||||
|
||||
<div className="hero-content">
|
||||
<div className="hero-logo-container">
|
||||
<img
|
||||
src="https://static.battlesnake.com/play/releases/2.1.4/ui/img/game.gif"
|
||||
alt="battle snake game"
|
||||
src="/images/battlesnake-neon-logo.jpg"
|
||||
alt="BattleSnake Neon Logo"
|
||||
className="hero-logo"
|
||||
/>
|
||||
<div className="hero-logo-glow"></div>
|
||||
</div>
|
||||
{/* <div className="tag name-tag">Battle</div>
|
||||
<div className="icon top-left">📈</div>
|
||||
<div className="icon bottom-right">👁️</div>
|
||||
<div className="freelance-tag">Available for Freelance</div> */}
|
||||
{/* <div>
|
||||
<Services />
|
||||
</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>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,93 @@
|
|||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../scss/styles.scss";
|
||||
import "../scss/components/_navbar.scss";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Navbar = () => {
|
||||
const [glitchEffect, setGlitchEffect] = useState(false);
|
||||
const [activeLink, setActiveLink] = useState("/");
|
||||
|
||||
useEffect(() => {
|
||||
// Set active link based on current path
|
||||
setActiveLink(window.location.pathname);
|
||||
|
||||
// Random glitch effect
|
||||
const glitchInterval = setInterval(() => {
|
||||
setGlitchEffect(true);
|
||||
setTimeout(() => setGlitchEffect(false), 200);
|
||||
}, 3000);
|
||||
|
||||
return () => clearInterval(glitchInterval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav className="navbar">
|
||||
<div className="navbar__logo">MyApp</div>
|
||||
<nav className={`navbar ${glitchEffect ? "navbar--glitch" : ""}`}>
|
||||
<div className="navbar__logo">
|
||||
<div className="navbar__logo-scanner"></div>
|
||||
<span className="navbar__logo-text">
|
||||
BATTLE<span className="navbar__logo-text">SNAKE</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="navbar__links">
|
||||
<li>
|
||||
<Link to="/" className="navbar__link">
|
||||
Home
|
||||
<Link
|
||||
to="/"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">⚡</span>
|
||||
<span className="navbar__link-text">HOME</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/notebook" className="navbar__link">
|
||||
NoteBook
|
||||
<Link
|
||||
to="/notebook"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/notebook" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">📓</span>
|
||||
<span className="navbar__link-text">NOTEBOOK</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/assignment" className="navbar__link">
|
||||
Assignment
|
||||
<Link
|
||||
to="/assignment"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/assignment" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">🎯</span>
|
||||
<span className="navbar__link-text">ASSIGNMENT</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/editor" className="navbar__link">
|
||||
Editor
|
||||
<Link
|
||||
to="/editor"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/editor" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">💻</span>
|
||||
<span className="navbar__link-text">EDITOR</span>
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/login" className="navbar__link">
|
||||
Login
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,14 @@ const PageHome = () => {
|
|||
},[]);
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,103 +1,307 @@
|
|||
// Cyberpunk color variables
|
||||
$neon-pink: #ff2a6d;
|
||||
$neon-blue: #05d9e8;
|
||||
$neon-purple: #d300c5;
|
||||
$neon-yellow: #f7f500;
|
||||
$dark-bg: #0d0221;
|
||||
$cyber-black: #1a1a1a;
|
||||
|
||||
// Animations
|
||||
@keyframes flicker {
|
||||
0%,
|
||||
19.999%,
|
||||
22%,
|
||||
62.999%,
|
||||
64%,
|
||||
64.999%,
|
||||
70%,
|
||||
100% {
|
||||
opacity: 0.99;
|
||||
}
|
||||
20%,
|
||||
21.999%,
|
||||
63%,
|
||||
63.999%,
|
||||
65%,
|
||||
69.999% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glitch {
|
||||
0% {
|
||||
transform: translate(0);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-2px, 2px);
|
||||
}
|
||||
40% {
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
60% {
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes grid-movement {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4rem 3rem;
|
||||
background-color: #f9f5f2;
|
||||
padding-top: 40rem;
|
||||
|
||||
|
||||
.hero-text {
|
||||
max-width: 50%;
|
||||
margin-left: 3rem;
|
||||
// font-family: "Limelight", sans-serif;
|
||||
|
||||
.intro {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta {
|
||||
background-color: #ffcc3a;
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
box-shadow: 3px 3px 0 #000;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
//min-height: 100vh;
|
||||
width: 100%;
|
||||
padding-top: 900px;
|
||||
margin-top: 0;
|
||||
background-color: $dark-bg;
|
||||
overflow: hidden;
|
||||
|
||||
// .hex-bg {
|
||||
// width: 500px;
|
||||
// height: auto;
|
||||
// background-color: #2900F5;
|
||||
// padding: 3rem;
|
||||
// clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
|
||||
// box-shadow: 6px 6px 0 #000;
|
||||
|
||||
img {
|
||||
width: 70%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
// Matrix digital rain canvas
|
||||
.matrix-rain {
|
||||
position: absolute;
|
||||
top: -2rem;
|
||||
right: 0;
|
||||
background: #b1b9f9;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
|
||||
&.top-left {
|
||||
top: -2rem;
|
||||
left: -2rem;
|
||||
background: #00c2a8;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&.bottom-right {
|
||||
bottom: -2rem;
|
||||
right: -2rem;
|
||||
background: #ffdf4f;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.freelance-tag {
|
||||
position: absolute;
|
||||
bottom: -1.5rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #00d18c;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
opacity: 0.8; // Adjust opacity to control the intensity of the effect
|
||||
}
|
||||
|
||||
// Cyberpunk grid background
|
||||
&-cyberpunk-grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(
|
||||
rgba($neon-blue, 0.1) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
linear-gradient(90deg, rgba($neon-blue, 0.1) 1px, transparent 1px);
|
||||
background-size: 25px 25px;
|
||||
z-index: 1;
|
||||
animation: grid-movement 5s linear infinite;
|
||||
opacity: 0.3; // Reduced opacity to blend with matrix rain
|
||||
}
|
||||
|
||||
// Glitch lines effect
|
||||
&-glitch-lines {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15),
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Main content container
|
||||
&-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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);
|
||||
}
|
||||
|
||||
// Logo styling
|
||||
&-logo-container {
|
||||
position: relative;
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
max-width: 80%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
filter: drop-shadow(0 0 10px rgba($neon-blue, 0.7))
|
||||
drop-shadow(0 0 20px rgba($neon-purple, 0.5));
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&-logo-glow {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba($neon-purple, 0.3) 0%,
|
||||
rgba($neon-blue, 0.1) 40%,
|
||||
transparent 70%
|
||||
);
|
||||
filter: blur(20px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// CTA button styling
|
||||
&-cta-container {
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-cta {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
color: $neon-pink;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
padding: 1rem 3rem;
|
||||
border: 2px solid $neon-pink;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 0 10px rgba($neon-pink, 0.7),
|
||||
inset 0 0 10px rgba($neon-pink, 0.4);
|
||||
text-shadow: 0 0 5px $neon-pink;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba($neon-pink, 0.4),
|
||||
transparent
|
||||
);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($neon-pink, 0.1);
|
||||
color: white;
|
||||
box-shadow: 0 0 20px rgba($neon-pink, 0.9),
|
||||
inset 0 0 20px rgba($neon-pink, 0.5);
|
||||
|
||||
&::before {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
&-cta-text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&-cta-glitch {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($neon-pink, 0.2);
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
|
||||
.hero-cta:hover & {
|
||||
opacity: 1;
|
||||
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cyberpunk cursor
|
||||
.cyberpunk-cursor {
|
||||
position: fixed;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid $neon-pink;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9999;
|
||||
mix-blend-mode: difference;
|
||||
transition: width 0.2s, height 0.2s, border-color 0.2s;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: $neon-blue;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 5px $neon-blue, 0 0 10px $neon-blue;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba($neon-blue, 0.5);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,21 @@
|
|||
.services {
|
||||
padding: 5rem 3rem;
|
||||
background-color: #fdfaf6;
|
||||
// background-image: url("../../../public/images/grid-background-3.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
|
|
@ -15,4 +24,3 @@
|
|||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,44 +1,195 @@
|
|||
// Cyberpunk color variables
|
||||
$neon-pink: #ff2a6d;
|
||||
$neon-blue: #05d9e8;
|
||||
$neon-purple: #d300c5;
|
||||
$neon-yellow: #f7f500;
|
||||
$dark-bg: #0d0221;
|
||||
$cyber-black: #1a1a1a;
|
||||
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@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%);
|
||||
}
|
||||
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%);
|
||||
}
|
||||
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%);
|
||||
}
|
||||
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%);
|
||||
}
|
||||
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%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon-flicker {
|
||||
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));
|
||||
}
|
||||
20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
|
||||
opacity: 0.4;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue, 0 0 30px $neon-blue, 0 0 40px $neon-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f9f5f2;
|
||||
padding: 1rem 2rem;
|
||||
background-color: rgba($cyber-black, 0.85);
|
||||
padding: 0.8rem 2rem;
|
||||
color: white;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 10px $neon-purple, 0 0 20px rgba($neon-purple, 0.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $neon-pink;
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
// Glitch effect for the navbar
|
||||
&--glitch {
|
||||
animation: glitch 0.2s linear;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #91a8ed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid $neon-pink;
|
||||
border-radius: 4px;
|
||||
background-color: rgba($dark-bg, 0.7);
|
||||
|
||||
&-text {
|
||||
color: white;
|
||||
letter-spacing: 2px;
|
||||
animation: neon-flicker 5s infinite alternate;
|
||||
}
|
||||
|
||||
&-highlight {
|
||||
color: $neon-pink;
|
||||
text-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
|
||||
}
|
||||
|
||||
&-scanner {
|
||||
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: 2rem;
|
||||
gap: 1.5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #91a8ed;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&-icon {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
&-text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&-hover {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: $neon-blue;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #6888E9;
|
||||
}
|
||||
color: $neon-blue;
|
||||
text-shadow: 0 0 5px rgba($neon-blue, 0.7);
|
||||
|
||||
.navbar__link-hover {
|
||||
transform: scaleX(1);
|
||||
box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue;
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: $neon-pink;
|
||||
text-shadow: 0 0 5px rgba($neon-pink, 0.7);
|
||||
border: 1px solid $neon-pink;
|
||||
background-color: rgba($neon-pink, 0.1);
|
||||
|
||||
&:hover {
|
||||
color: $neon-pink;
|
||||
}
|
||||
|
||||
.navbar__link-hover {
|
||||
background-color: $neon-pink;
|
||||
transform: scaleX(1);
|
||||
box-shadow: 0 0 10px $neon-pink, 0 0 20px $neon-pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
// Homepage styling
|
||||
|
||||
.homepage-container {
|
||||
// background-image: url("../../../public/images/grid-background.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
|
||||
main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
198
src/scss/page/assignment123.scss
Normal file
198
src/scss/page/assignment123.scss
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
// Assignment Page Styling
|
||||
|
||||
.assignment-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
|
||||
section {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.assignment-header {
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.due-date {
|
||||
color: #c6c6c6;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.assignment-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem;
|
||||
|
||||
.assignment-info {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h3 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.files-count {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.submission-note {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.file-upload-section {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.upload-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.file-upload-btn,
|
||||
.record-audio-btn,
|
||||
.record-video-btn {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem 1rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s ease;
|
||||
color: #333;
|
||||
|
||||
&:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-list {
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex-grow: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
color: #777;
|
||||
margin: 0 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.remove-file-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #ff5252;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 0.8rem;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #4a90e2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submission-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
.submit-btn,
|
||||
.cancel-btn {
|
||||
padding: 0.7rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background-color: #4a90e2;
|
||||
color: white;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a7bc8;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #a0c3e8;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: transparent;
|
||||
border: 1px solid #ddd;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue