enhance TerminalButton with sound effects and dynamic visual feedback; improve App layout with enhanced TV frame and controls
This commit is contained in:
88
src/App.tsx
88
src/App.tsx
@@ -13,23 +13,32 @@ function App() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 flex items-center justify-center overflow-hidden">
|
||||
{/* TV Container */}
|
||||
{/* TV Container with fixed proportions */}
|
||||
<div className="w-[95%] max-w-[1400px] relative h-[90vh]">
|
||||
{/* TV Frame */}
|
||||
<div className="absolute inset-0 tv-frame">
|
||||
{/* Screen Container with Convex Effect */}
|
||||
{/* TV frame texture overlay */}
|
||||
<div className="tv-frame-texture"></div>
|
||||
|
||||
{/* Edge shadow for added depth */}
|
||||
<div className="tv-frame-edge"></div>
|
||||
|
||||
{/* Screen Container with fixed height and Convex Effect */}
|
||||
<div className="relative w-full h-full rounded-[20px] overflow-hidden tv-screen-container">
|
||||
{/* Convex Screen Effect */}
|
||||
<div className="absolute inset-0 tv-screen-convex"></div>
|
||||
|
||||
{/* Static noise texture underlay */}
|
||||
<div className="white-noise"></div>
|
||||
|
||||
{/* Screen Content */}
|
||||
<div className="relative h-full w-full bg-[#003300] p-6 font-mono text-[#00FF00] overflow-hidden z-10 screen-content">
|
||||
{/* Screen Content with fixed height */}
|
||||
<div className="relative h-full w-full p-6 font-mono text-[#00FF00] overflow-hidden z-10 screen-content">
|
||||
<div className="animate-pulse mb-4">
|
||||
<Terminal className="inline-block mr-2" />
|
||||
<span className="text-sm">echo "Hey there!"</span>
|
||||
</div>
|
||||
|
||||
{/* Split Screen Container */}
|
||||
{/* Split Screen Container with fixed height */}
|
||||
<div className="flex gap-8 h-[calc(100%-3rem)]">
|
||||
{/* Left Column - Navigation */}
|
||||
<div className="w-64 space-y-3 overflow-y-auto custom-scrollbar">
|
||||
@@ -71,10 +80,10 @@ function App() {
|
||||
</TerminalButton>
|
||||
</div>
|
||||
|
||||
{/* Vertical Separator */}
|
||||
<div className="w-px h-full bg-[#00FF00] opacity-30"></div>
|
||||
{/* Vertical Separator with embossed effect */}
|
||||
<div className="vertical-separator"></div>
|
||||
|
||||
{/* Right Column - Content */}
|
||||
{/* Right Column - Content with scrolling */}
|
||||
<div className="flex-1 overflow-y-auto pr-4 custom-scrollbar">
|
||||
{activeSection === 'about' && <ProfileContent />}
|
||||
{activeSection === 'projects' && (
|
||||
@@ -88,30 +97,67 @@ function App() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scan Line Effect */}
|
||||
<div className="absolute inset-0 pointer-events-none z-20" style={{
|
||||
background: 'linear-gradient(rgba(0, 17, 0, 0.1) 50%, rgba(0, 17, 0, 0.2) 50%)',
|
||||
backgroundSize: '100% 4px'
|
||||
}}></div>
|
||||
{/* Enhanced Scan Lines Effect */}
|
||||
<div className="scan-lines"></div>
|
||||
|
||||
{/* Screen Glare */}
|
||||
{/* Chromatic Aberration Effect */}
|
||||
<div className="chromatic-aberration"></div>
|
||||
|
||||
{/* Multiple Glass Reflection Layers */}
|
||||
<div className="glass-reflection"></div>
|
||||
<div className="glass-reflection-2"></div>
|
||||
<div className="corner-shine"></div>
|
||||
|
||||
{/* Screen Glare - Moving reflection */}
|
||||
<div className="screen-glare"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TV Controls */}
|
||||
<div className="absolute -bottom-10 right-20 flex space-x-6">
|
||||
<div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
|
||||
<div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
|
||||
<div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
|
||||
{/* TV Controls - Skeuomorphic Knobs */}
|
||||
<div className="absolute -bottom-12 right-20 flex space-x-8">
|
||||
<div className="tv-knob" style={{transform: 'rotate(-30deg)'}}></div>
|
||||
<div className="tv-knob" style={{transform: 'rotate(15deg)'}}></div>
|
||||
<div className="tv-knob" style={{transform: 'rotate(-10deg)'}}></div>
|
||||
</div>
|
||||
|
||||
{/* TV Speaker Grills */}
|
||||
{/* TV Speaker Grills - Enhanced */}
|
||||
<div className="absolute -bottom-6 left-20 flex space-x-1.5">
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<div key={i} className="w-1.5 h-6 bg-gray-700 rounded-full opacity-50"></div>
|
||||
<div
|
||||
key={i}
|
||||
className="w-1.5 h-6 bg-gradient-to-b from-gray-600 to-gray-800 rounded-full"
|
||||
style={{
|
||||
boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -1px 1px rgba(0,0,0,0.3)'
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* TV Brand Label */}
|
||||
<div
|
||||
className="absolute -bottom-10 left-1/2 transform -translate-x-1/2 bg-gradient-to-b from-gray-700 to-gray-900 px-4 py-1 rounded"
|
||||
style={{
|
||||
boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.5)',
|
||||
border: '1px solid rgba(0,0,0,0.3)'
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="text-xs text-gray-300 font-bold"
|
||||
style={{
|
||||
textShadow: '0 -1px 0 rgba(0,0,0,0.5)'
|
||||
}}
|
||||
>
|
||||
RETRO·VISION
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Power indicator light */}
|
||||
<div className="absolute -bottom-8 right-[12%] w-3 h-3 rounded-full bg-gradient-to-b from-green-500 to-green-700"
|
||||
style={{
|
||||
boxShadow: '0 0 5px #4AFF4A, inset 0 1px 2px rgba(255,255,255,0.4), inset 0 -1px 2px rgba(0,0,0,0.4)'
|
||||
}}>
|
||||
<div className="absolute inset-0 rounded-full bg-green-400 opacity-50 animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
|
||||
interface TerminalButtonProps {
|
||||
@@ -8,25 +8,122 @@ interface TerminalButtonProps {
|
||||
}
|
||||
|
||||
const TerminalButton: React.FC<TerminalButtonProps> = ({ children, onClick, isSelected }) => {
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const shineRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Play sound effect on button click
|
||||
const playKeyPress = () => {
|
||||
const audio = new Audio('data:audio/wav;base64,UklGRnQGAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YU8GAACBhYqFbF1fdH2Dg4R/gIKFi4SAgX98eoCFhQAAhIWKhWxdX3R9g4OEf4CChYuEgIF/fHqAhYUAAP//');
|
||||
audio.volume = 0.2;
|
||||
audio.play().catch(() => {});
|
||||
};
|
||||
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
playKeyPress();
|
||||
onClick?.(e);
|
||||
|
||||
// Create ripple effect
|
||||
if (buttonRef.current) {
|
||||
const button = buttonRef.current;
|
||||
const rect = button.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const ripple = document.createElement('div');
|
||||
ripple.className = 'absolute rounded-full bg-green-400/10';
|
||||
ripple.style.left = `${x}px`;
|
||||
ripple.style.top = `${y}px`;
|
||||
ripple.style.width = '0';
|
||||
ripple.style.height = '0';
|
||||
ripple.style.transform = 'translate(-50%, -50%)';
|
||||
button.appendChild(ripple);
|
||||
|
||||
setTimeout(() => {
|
||||
ripple.style.width = '300px';
|
||||
ripple.style.height = '300px';
|
||||
ripple.style.opacity = '0';
|
||||
ripple.style.transition = 'all 0.8s ease-out';
|
||||
}, 0);
|
||||
|
||||
setTimeout(() => {
|
||||
button.removeChild(ripple);
|
||||
}, 800);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Track mouse movement for shine effect
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (buttonRef.current && shineRef.current) {
|
||||
const button = buttonRef.current;
|
||||
const shine = shineRef.current;
|
||||
const rect = button.getBoundingClientRect();
|
||||
|
||||
const x = (e.clientX - rect.left) / rect.width;
|
||||
const y = (e.clientY - rect.top) / rect.height;
|
||||
|
||||
// Move shine based on cursor position
|
||||
shine.style.opacity = '0.2';
|
||||
shine.style.transform = `translate(-50%, -50%) scale(2) translate(${x * 100}%, ${y * 100}%)`;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
if (shineRef.current) {
|
||||
shineRef.current.style.opacity = '0';
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`terminal-button group ${isSelected ? 'terminal-button-selected' : ''}`}
|
||||
ref={buttonRef}
|
||||
className={`terminal-button group ${isSelected ? 'terminal-button-selected' : ''} relative overflow-hidden transition-all duration-200`}
|
||||
onClick={handleClick}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{/* Static subtle glare effect */}
|
||||
<div className="glare-effect"></div>
|
||||
<ChevronRight className="inline-block mr-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
{children}
|
||||
|
||||
{/* Dynamic shine effect that follows cursor */}
|
||||
<div
|
||||
ref={shineRef}
|
||||
className="absolute w-40 h-40 rounded-full bg-gradient-to-r from-transparent via-green-400/10 to-transparent pointer-events-none opacity-0 transition-opacity duration-300"
|
||||
style={{
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%) scale(2)'
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* Button content with icons */}
|
||||
<div className="relative z-10 flex items-center">
|
||||
<ChevronRight
|
||||
className={`inline-block mr-2 w-4 h-4 transition-all duration-200
|
||||
${isSelected ? 'text-green-400' : 'text-green-500/80'}
|
||||
group-hover:translate-x-1 group-hover:text-green-400`}
|
||||
/>
|
||||
<span className="transition-all duration-200">{children}</span>
|
||||
</div>
|
||||
|
||||
{/* Scan line effect over button */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-10 z-20"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.4))',
|
||||
backgroundSize: '100% 4px'
|
||||
}}
|
||||
></div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
460
src/index.css
460
src/index.css
@@ -22,9 +22,11 @@
|
||||
inset 0 2px 20px rgba(255, 255, 255, 0.1);
|
||||
border: 12px solid #1a1a1a;
|
||||
border-radius: 50px;
|
||||
transform: perspective(1000px) rotateX(2deg);
|
||||
transform: perspective(1200px) rotateX(2deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Wood texture overlay */
|
||||
.tv-frame::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -32,11 +34,16 @@
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
bottom: -12px;
|
||||
background: linear-gradient(145deg, #3a3a3a, #1a1a1a);
|
||||
background:
|
||||
linear-gradient(145deg, #3a3a3a, #1a1a1a),
|
||||
url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23232323' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
|
||||
border-radius: 60px;
|
||||
z-index: -1;
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* TV frame highlights */
|
||||
.tv-frame::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -44,34 +51,110 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40%;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.15) 0%,
|
||||
rgba(255, 255, 255, 0.05) 40%,
|
||||
transparent 100%
|
||||
);
|
||||
border-radius: 40px 40px 0 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Small scratches and noise texture */
|
||||
.tv-frame-texture {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
opacity: 0.05;
|
||||
mix-blend-mode: overlay;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* TV body edge shadow */
|
||||
.tv-frame-edge {
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 51px;
|
||||
background: linear-gradient(145deg, #1a1a1a, #000000);
|
||||
z-index: -2;
|
||||
box-shadow:
|
||||
0 10px 30px rgba(0, 0, 0, 0.8),
|
||||
0 30px 60px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/* TV frame knobs */
|
||||
.tv-knob {
|
||||
@apply absolute w-10 h-10 rounded-full;
|
||||
background: linear-gradient(135deg, #4a4a4a, #1a1a1a);
|
||||
box-shadow:
|
||||
inset 2px 2px 5px rgba(255, 255, 255, 0.15),
|
||||
inset -2px -2px 5px rgba(0, 0, 0, 0.7),
|
||||
0 3px 6px rgba(0, 0, 0, 0.6),
|
||||
0 1px 2px rgba(0, 0, 0, 0.9);
|
||||
border: 1px solid #0a0a0a;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(2px);
|
||||
}
|
||||
|
||||
.tv-knob::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
border-radius: 50%;
|
||||
background: repeating-conic-gradient(
|
||||
from 0deg,
|
||||
#2a2a2a 0deg 30deg,
|
||||
#3a3a3a 30deg 60deg
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.tv-knob::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 40%;
|
||||
height: 3px;
|
||||
background: #111;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Enhanced Screen Container with Glass Effect */
|
||||
.tv-screen-container {
|
||||
background: #000;
|
||||
box-shadow:
|
||||
inset 0 0 50px rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 100px rgba(0, 0, 0, 0.3);
|
||||
inset 0 0 50px rgba(0, 0, 0, 0.6),
|
||||
inset 0 0 100px rgba(0, 0, 0, 0.4);
|
||||
transform: perspective(1000px) rotateX(1deg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(0, 80, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Enhanced Convex Screen Effect */
|
||||
.tv-screen-convex {
|
||||
content: '';
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
ellipse at center,
|
||||
transparent 0%,
|
||||
rgba(0, 0, 0, 0) 50%,
|
||||
rgba(0, 0, 0, 0.3) 100%
|
||||
rgba(0, 0, 0, 0) 60%,
|
||||
rgba(0, 0, 0, 0.4) 100%
|
||||
);
|
||||
border-radius: 50% / 5%;
|
||||
border-radius: 50% / 10%;
|
||||
pointer-events: none;
|
||||
z-index: 40;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tv-screen-convex::before {
|
||||
@@ -82,7 +165,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(
|
||||
circle at 50% 0%,
|
||||
circle at 30% 20%,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0.05) 25%,
|
||||
transparent 50%
|
||||
@@ -90,79 +173,234 @@
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.terminal-button {
|
||||
@apply relative w-full px-6 py-3 font-mono text-lg
|
||||
transition-all duration-150 overflow-hidden
|
||||
border border-[#00FF00]/30 select-none;
|
||||
font-family: 'VT323', 'Courier New', monospace;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0, 25, 0, 0.9) 0%,
|
||||
rgba(0, 20, 0, 0.95) 100%
|
||||
/* Glass Reflections */
|
||||
.glass-reflection {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
transparent 0%,
|
||||
transparent 40%,
|
||||
rgba(255, 255, 255, 0.07) 42%,
|
||||
rgba(255, 255, 255, 0.03) 50%,
|
||||
transparent 52%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 41;
|
||||
pointer-events: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.glass-reflection-2 {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
transparent 0%,
|
||||
transparent 65%,
|
||||
rgba(255, 255, 255, 0.05) 67.5%,
|
||||
rgba(255, 255, 255, 0.02) 70%,
|
||||
transparent 72.5%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 42;
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Corner light shine effect */
|
||||
.corner-shine {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
rgba(255, 255, 255, 0.15) 0%,
|
||||
rgba(255, 255, 255, 0.05) 40%,
|
||||
transparent 70%
|
||||
);
|
||||
border-radius: 50%;
|
||||
z-index: 42;
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Chromatic aberration effect */
|
||||
.chromatic-aberration {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 43;
|
||||
pointer-events: none;
|
||||
box-shadow:
|
||||
inset 1px 0 0 rgba(255, 0, 0, 0.05),
|
||||
inset -1px 0 0 rgba(0, 255, 255, 0.05);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
/* Scan Lines Effect - Enhanced */
|
||||
.scan-lines {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 44;
|
||||
pointer-events: none;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0px,
|
||||
rgba(0, 0, 0, 0) 1px,
|
||||
rgba(0, 0, 0, 0.1) 1px,
|
||||
rgba(0, 0, 0, 0.1) 2px
|
||||
);
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
/* White Noise Overlay */
|
||||
.white-noise {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.02;
|
||||
z-index: 39;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' fill='%23ffffff'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
/* Improved Screen Glare */
|
||||
.screen-glare {
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.02) 40%,
|
||||
rgba(255, 255, 255, 0.05) 50%,
|
||||
rgba(255, 255, 255, 0.02) 60%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: horizontal-glare 8s linear infinite;
|
||||
opacity: 0.4;
|
||||
z-index: 45;
|
||||
}
|
||||
|
||||
/* Skeuomorphic Terminal Button */
|
||||
.terminal-button {
|
||||
@apply relative w-full py-3 px-6 font-mono text-lg
|
||||
transition-all duration-150 select-none;
|
||||
font-family: 'VT323', 'Courier New', monospace;
|
||||
color: #4AFF4A;
|
||||
text-shadow: 0 0 8px rgba(74, 255, 74, 0.5);
|
||||
box-shadow:
|
||||
inset 0 0 15px rgba(0, 255, 0, 0.1),
|
||||
0 0 2px rgba(0, 255, 0, 0.5),
|
||||
0 0 5px rgba(0, 255, 0, 0.2);
|
||||
background: linear-gradient(to bottom,
|
||||
#003300 0%,
|
||||
#002200 40%,
|
||||
#001800 100%);
|
||||
border-radius: 6px;
|
||||
border-top: 1px solid #005500;
|
||||
border-left: 1px solid #004400;
|
||||
border-right: 1px solid #001100;
|
||||
border-bottom: 1px solid #001100;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
inset 0 0 8px rgba(0, 255, 0, 0.1),
|
||||
0 1px 0 rgba(255, 255, 255, 0.05),
|
||||
0 -1px 0 rgba(0, 0, 0, 0.5),
|
||||
0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.terminal-button-selected {
|
||||
@apply text-[110%] font-bold;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0, 35, 0, 0.95) 0%,
|
||||
rgba(0, 30, 0, 1) 100%
|
||||
);
|
||||
color: #7FFF7F;
|
||||
text-shadow: 0 0 12px rgba(74, 255, 74, 0.8);
|
||||
box-shadow:
|
||||
inset 0 0 25px rgba(0, 255, 0, 0.2),
|
||||
0 0 4px rgba(0, 255, 0, 0.6),
|
||||
0 0 8px rgba(0, 255, 0, 0.3);
|
||||
background: linear-gradient(to bottom,
|
||||
#004000 0%,
|
||||
#003300 40%,
|
||||
#002200 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 10px rgba(0, 0, 0, 0.6),
|
||||
inset 0 0 8px rgba(0, 255, 0, 0.25),
|
||||
0 1px 0 rgba(0, 255, 0, 0.05),
|
||||
0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.terminal-button::before {
|
||||
content: '';
|
||||
@apply absolute inset-0 opacity-0 transition-opacity duration-150;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0, 255, 0, 0.1) 0%,
|
||||
rgba(0, 255, 0, 0.05) 100%
|
||||
@apply absolute top-0 left-0 right-0 h-[1px] opacity-40;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(0, 255, 0, 0.8) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.terminal-button:hover {
|
||||
color: #7FFF7F;
|
||||
text-shadow: 0 0 8px rgba(74, 255, 74, 0.8);
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0, 255, 0, 0.2),
|
||||
0 0 4px rgba(0, 255, 0, 0.6),
|
||||
0 0 8px rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.terminal-button:hover::before {
|
||||
@apply opacity-100;
|
||||
background: linear-gradient(to bottom,
|
||||
#003800 0%,
|
||||
#002800 40%,
|
||||
#001E00 100%);
|
||||
}
|
||||
|
||||
.terminal-button:active {
|
||||
@apply transform scale-[0.98];
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0, 35, 0, 0.95) 0%,
|
||||
rgba(0, 30, 0, 1) 100%
|
||||
);
|
||||
background: linear-gradient(to bottom,
|
||||
#001E00 0%,
|
||||
#002800 60%,
|
||||
#003000 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 10px rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 8px rgba(0, 80, 0, 0.2);
|
||||
}
|
||||
|
||||
.terminal-button::after {
|
||||
content: '';
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 255, 0, 0.03),
|
||||
rgba(0, 255, 0, 0.03) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
/* Skeuomorphic screen effect */
|
||||
.screen-content {
|
||||
background-color: rgba(0, 17, 0, 0.95);
|
||||
background-image:
|
||||
linear-gradient(0deg,
|
||||
rgba(0, 20, 0, 1) 0%,
|
||||
rgba(0, 27, 0, 1) 100%),
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
rgba(0, 40, 0, 1) 0%,
|
||||
rgba(0, 20, 0, 1) 100%
|
||||
);
|
||||
background-blend-mode: screen;
|
||||
box-shadow:
|
||||
inset 0 0 30px rgba(0, 0, 0, 0.8),
|
||||
inset 0 0 80px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Vertical separator with emboss effect */
|
||||
.vertical-separator {
|
||||
width: 2px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 0.3),
|
||||
rgba(0, 255, 0, 0.15),
|
||||
rgba(0, 0, 0, 0.3)
|
||||
);
|
||||
position: relative;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Terminal text input with skeuomorphic effect */
|
||||
.terminal-input {
|
||||
background: rgba(0, 10, 0, 0.7);
|
||||
border: 1px solid rgba(0, 50, 0, 0.3);
|
||||
border-bottom: 1px solid rgba(0, 100, 0, 0.2);
|
||||
border-right: 1px solid rgba(0, 70, 0, 0.2);
|
||||
box-shadow:
|
||||
inset 0 1px 5px rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 10px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(0, 30, 0, 0.1);
|
||||
color: #4AFF4A;
|
||||
text-shadow: 0 0 5px rgba(74, 255, 74, 0.5);
|
||||
caret-color: #4AFF4A;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Rest of existing styles remain unchanged */
|
||||
.glare-effect {
|
||||
@apply absolute inset-0 pointer-events-none;
|
||||
background: linear-gradient(
|
||||
@@ -176,41 +414,43 @@
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.screen-glare {
|
||||
@apply absolute inset-0 pointer-events-none z-30;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.03) 45%,
|
||||
rgba(255, 255, 255, 0.07) 50%,
|
||||
rgba(255, 255, 255, 0.03) 55%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: horizontal-glare 4s linear infinite;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Cyberpunk theme styles */
|
||||
.cyberpunk-theme .terminal-button {
|
||||
border-color: rgba(147, 51, 234, 0.3);
|
||||
background: linear-gradient(180deg,
|
||||
rgba(25, 0, 25, 0.9) 0%,
|
||||
rgba(20, 0, 20, 0.95) 100%
|
||||
);
|
||||
background: linear-gradient(to bottom,
|
||||
#25002A 0%,
|
||||
#1A001F 40%,
|
||||
#120016 100%);
|
||||
color: #df6cfc;
|
||||
text-shadow: 0 0 8px rgba(147, 51, 234, 0.5);
|
||||
box-shadow:
|
||||
inset 0 0 15px rgba(147, 51, 234, 0.1),
|
||||
0 0 2px rgba(147, 51, 234, 0.5),
|
||||
0 0 5px rgba(147, 51, 234, 0.2);
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
inset 0 0 8px rgba(147, 51, 234, 0.1),
|
||||
0 1px 0 rgba(255, 255, 255, 0.05),
|
||||
0 -1px 0 rgba(0, 0, 0, 0.5),
|
||||
0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.cyberpunk-theme .terminal-button-selected {
|
||||
color: #FF00FF;
|
||||
text-shadow: 0 0 12px rgba(147, 51, 234, 0.8);
|
||||
box-shadow:
|
||||
inset 0 0 25px rgba(147, 51, 234, 0.2),
|
||||
0 0 4px rgba(147, 51, 234, 0.6),
|
||||
0 0 8px rgba(147, 51, 234, 0.3);
|
||||
background: linear-gradient(to bottom,
|
||||
#3A0040 0%,
|
||||
#2A0030 40%,
|
||||
#1F0024 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 10px rgba(0, 0, 0, 0.6),
|
||||
inset 0 0 8px rgba(147, 51, 234, 0.25),
|
||||
0 1px 0 rgba(147, 51, 234, 0.05),
|
||||
0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.cyberpunk-theme .terminal-button::before {
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(147, 51, 234, 0.8) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.cyberpunk-theme .typing-effect {
|
||||
@@ -222,8 +462,16 @@
|
||||
}
|
||||
|
||||
.cyberpunk-theme .screen-content {
|
||||
background-color: #1a001a;
|
||||
color: #df6cfc;
|
||||
background-color: rgba(17, 0, 17, 0.95);
|
||||
background-image:
|
||||
linear-gradient(0deg,
|
||||
rgba(20, 0, 20, 1) 0%,
|
||||
rgba(27, 0, 27, 1) 100%),
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
rgba(40, 0, 40, 1) 0%,
|
||||
rgba(20, 0, 20, 1) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -250,40 +498,50 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar for the terminal */
|
||||
/* Custom scrollbar with skeuomorphic design */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #001100;
|
||||
background: linear-gradient(to right, #001100, #002200, #001100);
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #00FF00;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(to right, #003300, #00AA00, #003300);
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #00CC00;
|
||||
background: linear-gradient(to right, #004400, #00CC00, #004400);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
/* Custom Scrollbar - Enhanced */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: rgba(0, 51, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(to right, rgba(0, 20, 0, 0.3), rgba(0, 51, 0, 0.3), rgba(0, 20, 0, 0.3));
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #00FF00;
|
||||
border-radius: 4px;
|
||||
opacity: 0.7;
|
||||
background: linear-gradient(to right, #003300, #00AA00, #003300);
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #00CC00;
|
||||
background: linear-gradient(to right, #004400, #00CC00, #004400);
|
||||
}
|
||||
Reference in New Issue
Block a user