add custom scrollbar and boot-up animation styles; implement TV boot sequence in App component
This commit is contained in:
parent
833eac7bb9
commit
144acbd355
59
src/App.tsx
59
src/App.tsx
@ -10,6 +10,35 @@ import PostsContent from './components/PostsContent';
|
||||
|
||||
function App() {
|
||||
const [activeSection, setActiveSection] = React.useState('about');
|
||||
const [isBooting, setIsBooting] = React.useState(true);
|
||||
const [bootPhase, setBootPhase] = React.useState(0);
|
||||
|
||||
// TV Boot-up sequence
|
||||
React.useEffect(() => {
|
||||
if (!isBooting) return;
|
||||
|
||||
// Phase 0: Initial black screen (0ms)
|
||||
// Phase 1: Quick white flash (100ms)
|
||||
// Phase 2: Static noise (600ms)
|
||||
// Phase 3: Horizontal scan line (900ms)
|
||||
// Phase 4: Fade in content (1200ms)
|
||||
// Phase 5: Boot complete (1800ms)
|
||||
|
||||
const timings = [0, 100, 600, 900, 1200, 1800];
|
||||
|
||||
const bootSequence = timings.map((time, index) => {
|
||||
return setTimeout(() => {
|
||||
setBootPhase(index);
|
||||
if (index === timings.length - 1) {
|
||||
setIsBooting(false);
|
||||
}
|
||||
}, time);
|
||||
});
|
||||
|
||||
return () => {
|
||||
bootSequence.forEach(timeout => clearTimeout(timeout));
|
||||
};
|
||||
}, [isBooting]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 flex items-center justify-center overflow-hidden">
|
||||
@ -28,6 +57,36 @@ function App() {
|
||||
{/* Convex Screen Effect */}
|
||||
<div className="absolute inset-0 tv-screen-convex"></div>
|
||||
|
||||
{/* Boot-up Animation Layers */}
|
||||
{isBooting && (
|
||||
<>
|
||||
{/* Black Screen (initial) */}
|
||||
<div className={`absolute inset-0 bg-black z-30 transition-opacity duration-500 ${bootPhase >= 1 ? 'opacity-0' : 'opacity-100'}`}></div>
|
||||
|
||||
{/* Power On Flash */}
|
||||
<div className={`absolute inset-0 bg-white z-30 transition-opacity duration-300 ${bootPhase === 1 ? 'opacity-80' : 'opacity-0'}`}></div>
|
||||
|
||||
{/* Intense Static */}
|
||||
<div className={`absolute inset-0 z-30 transition-opacity duration-300 ${bootPhase === 2 ? 'opacity-100' : 'opacity-0'}`}>
|
||||
<div className="absolute inset-0 bg-black opacity-30"></div>
|
||||
<div className="absolute inset-0" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' 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: 1
|
||||
}}></div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Scan Line */}
|
||||
{bootPhase === 3 && (
|
||||
<div className="absolute inset-0 z-30">
|
||||
<div className="h-8 w-full bg-white opacity-60 animate-scanline"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content Fade Overlay */}
|
||||
<div className={`absolute inset-0 bg-black z-20 pointer-events-none transition-opacity duration-500 ${bootPhase >= 4 ? 'opacity-0' : 'opacity-100'}`}></div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Static noise texture underlay */}
|
||||
<div className="white-noise"></div>
|
||||
|
||||
|
||||
556
src/index.css
556
src/index.css
@ -1,547 +1,9 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: 'VT323';
|
||||
src: url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.typing-effect {
|
||||
border-right: 2px solid #00FF00;
|
||||
animation: cursor-blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
.tv-frame {
|
||||
@apply rounded-[50px] p-8;
|
||||
background: linear-gradient(145deg, #4a4a4a, #2a2a2a);
|
||||
box-shadow:
|
||||
20px 20px 60px #1a1a1a,
|
||||
-20px -20px 60px #3a3a3a,
|
||||
inset 0 2px 20px rgba(255, 255, 255, 0.1);
|
||||
border: 12px solid #1a1a1a;
|
||||
border-radius: 50px;
|
||||
transform: perspective(1200px) rotateX(2deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Wood texture overlay */
|
||||
.tv-frame::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
bottom: -12px;
|
||||
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;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40%;
|
||||
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.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(
|
||||
ellipse at center,
|
||||
transparent 0%,
|
||||
rgba(0, 0, 0, 0) 60%,
|
||||
rgba(0, 0, 0, 0.4) 100%
|
||||
);
|
||||
border-radius: 50% / 10%;
|
||||
pointer-events: none;
|
||||
z-index: 40;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tv-screen-convex::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(
|
||||
circle at 30% 20%,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0.05) 25%,
|
||||
transparent 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* Glass Reflections */
|
||||
.glass-reflection {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
125deg,
|
||||
transparent 0%,
|
||||
transparent 40%,
|
||||
rgba(255, 255, 255, 0.07) 42%,
|
||||
rgba(255, 255, 255, 0.01) 50%,
|
||||
transparent 52%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 41;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.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.3;
|
||||
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);
|
||||
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;
|
||||
color: #7FFF7F;
|
||||
text-shadow: 0 0 12px rgba(74, 255, 74, 0.8);
|
||||
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 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);
|
||||
background: linear-gradient(to bottom,
|
||||
#003800 0%,
|
||||
#002800 40%,
|
||||
#001E00 100%);
|
||||
}
|
||||
|
||||
.terminal-button:active {
|
||||
@apply transform scale-[0.98];
|
||||
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);
|
||||
}
|
||||
|
||||
/* 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(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(74, 255, 74, 0.1) 25%,
|
||||
rgba(74, 255, 74, 0.1) 75%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: glare 3s ease-in-out infinite;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
/* Cyberpunk theme styles */
|
||||
.cyberpunk-theme .terminal-button {
|
||||
border-color: rgba(147, 51, 234, 0.3);
|
||||
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 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);
|
||||
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 {
|
||||
border-right-color: #df6cfc;
|
||||
}
|
||||
|
||||
.cyberpunk-theme input {
|
||||
color: #df6cfc;
|
||||
}
|
||||
|
||||
.cyberpunk-theme .screen-content {
|
||||
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%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
from, to { border-color: transparent }
|
||||
50% { border-color: #00FF00 }
|
||||
}
|
||||
|
||||
@keyframes glare {
|
||||
0% {
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes horizontal-glare {
|
||||
from {
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar with skeuomorphic design */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
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: 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: linear-gradient(to right, #004400, #00CC00, #004400);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar - Enhanced */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
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: 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: linear-gradient(to right, #004400, #00CC00, #004400);
|
||||
}
|
||||
/* Import all CSS modules */
|
||||
@import './styles/base.css';
|
||||
@import './styles/tv-frame.css';
|
||||
@import './styles/screen-effects.css';
|
||||
@import './styles/animations.css';
|
||||
@import './styles/buttons.css';
|
||||
@import './styles/scrollbars.css';
|
||||
@import './styles/skills.css';
|
||||
@import './styles/matrix.css';
|
||||
71
src/styles/animations.css
Normal file
71
src/styles/animations.css
Normal file
@ -0,0 +1,71 @@
|
||||
/* Animation Keyframes */
|
||||
@keyframes cursor-blink {
|
||||
from, to { border-color: transparent }
|
||||
50% { border-color: #00FF00 }
|
||||
}
|
||||
|
||||
@keyframes glare {
|
||||
0% {
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes horizontal-glare {
|
||||
from {
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
|
||||
/* TV Boot Animation Keyframes */
|
||||
@keyframes scanline {
|
||||
0% { transform: translateY(-100%); }
|
||||
100% { transform: translateY(100vh); }
|
||||
}
|
||||
|
||||
/* Boot Animation Styles */
|
||||
.animate-scanline {
|
||||
animation: scanline 1.2s ease-out forwards;
|
||||
box-shadow:
|
||||
0 0 15px rgba(255, 255, 255, 0.5),
|
||||
0 0 35px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Improved Screen Glare */
|
||||
.screen-glare {
|
||||
position: 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.3;
|
||||
z-index: 45;
|
||||
}
|
||||
|
||||
/* Glare Effect */
|
||||
.glare-effect {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(74, 255, 74, 0.1) 25%,
|
||||
rgba(74, 255, 74, 0.1) 75%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: glare 3s ease-in-out infinite;
|
||||
opacity: 0.2;
|
||||
}
|
||||
75
src/styles/base.css
Normal file
75
src/styles/base.css
Normal file
@ -0,0 +1,75 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: 'VT323';
|
||||
src: url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.typing-effect {
|
||||
border-right: 2px solid #00FF00;
|
||||
animation: cursor-blink 1s step-end infinite;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cyberpunk theme styles */
|
||||
.cyberpunk-theme .terminal-button {
|
||||
border-color: rgba(147, 51, 234, 0.3);
|
||||
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 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);
|
||||
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 {
|
||||
border-right-color: #df6cfc;
|
||||
}
|
||||
|
||||
.cyberpunk-theme input {
|
||||
color: #df6cfc;
|
||||
}
|
||||
|
||||
.cyberpunk-theme .screen-content {
|
||||
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%
|
||||
);
|
||||
}
|
||||
96
src/styles/buttons.css
Normal file
96
src/styles/buttons.css
Normal file
@ -0,0 +1,96 @@
|
||||
/* Skeuomorphic Terminal Button */
|
||||
.terminal-button {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-family: 'VT323', 'Courier New', monospace;
|
||||
font-size: 1.125rem;
|
||||
transition-property: all;
|
||||
transition-duration: 150ms;
|
||||
user-select: none;
|
||||
color: #4AFF4A;
|
||||
text-shadow: 0 0 8px rgba(74, 255, 74, 0.5);
|
||||
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);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.terminal-button-selected {
|
||||
font-size: 110%;
|
||||
font-weight: bold;
|
||||
color: #7FFF7F;
|
||||
text-shadow: 0 0 12px rgba(74, 255, 74, 0.8);
|
||||
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: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
opacity: 0.4;
|
||||
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);
|
||||
background: linear-gradient(to bottom,
|
||||
#003800 0%,
|
||||
#002800 40%,
|
||||
#001E00 100%);
|
||||
}
|
||||
|
||||
.terminal-button:active {
|
||||
transform: scale(0.98);
|
||||
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 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;
|
||||
}
|
||||
154
src/styles/screen-effects.css
Normal file
154
src/styles/screen-effects.css
Normal file
@ -0,0 +1,154 @@
|
||||
/* Enhanced Screen Container with Glass Effect */
|
||||
.tv-screen-container {
|
||||
background: #000;
|
||||
box-shadow:
|
||||
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(
|
||||
ellipse at center,
|
||||
transparent 0%,
|
||||
rgba(0, 0, 0, 0) 60%,
|
||||
rgba(0, 0, 0, 0.4) 100%
|
||||
);
|
||||
border-radius: 50% / 10%;
|
||||
pointer-events: none;
|
||||
z-index: 40;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tv-screen-convex::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(
|
||||
circle at 30% 20%,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0.05) 25%,
|
||||
transparent 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* Glass Reflections */
|
||||
.glass-reflection {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
125deg,
|
||||
transparent 0%,
|
||||
transparent 40%,
|
||||
rgba(255, 255, 255, 0.07) 42%,
|
||||
rgba(255, 255, 255, 0.01) 50%,
|
||||
transparent 52%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 41;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
47
src/styles/scrollbars.css
Normal file
47
src/styles/scrollbars.css
Normal file
@ -0,0 +1,47 @@
|
||||
/* Custom scrollbar with skeuomorphic design */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
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: 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: linear-gradient(to right, #004400, #00CC00, #004400);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar - Enhanced */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
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: 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: linear-gradient(to right, #004400, #00CC00, #004400);
|
||||
}
|
||||
133
src/styles/tv-frame.css
Normal file
133
src/styles/tv-frame.css
Normal file
@ -0,0 +1,133 @@
|
||||
/* TV Frame Styles */
|
||||
.tv-frame {
|
||||
border-radius: 50px;
|
||||
padding: 8px;
|
||||
background: linear-gradient(145deg, #4a4a4a, #2a2a2a);
|
||||
box-shadow:
|
||||
20px 20px 60px #1a1a1a,
|
||||
-20px -20px 60px #3a3a3a,
|
||||
inset 0 2px 20px rgba(255, 255, 255, 0.1);
|
||||
border: 12px solid #1a1a1a;
|
||||
border-radius: 50px;
|
||||
transform: perspective(1200px) rotateX(2deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Wood texture overlay */
|
||||
.tv-frame::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
bottom: -12px;
|
||||
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;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40%;
|
||||
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 {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 9999px;
|
||||
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);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user