From 144acbd3559d87f68425afb1fa73308d022d206b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Henrique?= Date: Fri, 14 Mar 2025 19:56:19 -0300 Subject: [PATCH] add custom scrollbar and boot-up animation styles; implement TV boot sequence in App component --- src/App.tsx | 59 ++++ src/index.css | 556 +--------------------------------- src/styles/animations.css | 71 +++++ src/styles/base.css | 75 +++++ src/styles/buttons.css | 96 ++++++ src/styles/screen-effects.css | 154 ++++++++++ src/styles/scrollbars.css | 47 +++ src/styles/tv-frame.css | 133 ++++++++ 8 files changed, 644 insertions(+), 547 deletions(-) create mode 100644 src/styles/animations.css create mode 100644 src/styles/base.css create mode 100644 src/styles/buttons.css create mode 100644 src/styles/screen-effects.css create mode 100644 src/styles/scrollbars.css create mode 100644 src/styles/tv-frame.css diff --git a/src/App.tsx b/src/App.tsx index f19bb1b..4605fa9 100755 --- a/src/App.tsx +++ b/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 (
@@ -28,6 +57,36 @@ function App() { {/* Convex Screen Effect */}
+ {/* Boot-up Animation Layers */} + {isBooting && ( + <> + {/* Black Screen (initial) */} +
= 1 ? 'opacity-0' : 'opacity-100'}`}>
+ + {/* Power On Flash */} +
+ + {/* Intense Static */} +
+
+
+
+ + {/* Horizontal Scan Line */} + {bootPhase === 3 && ( +
+
+
+ )} + + {/* Content Fade Overlay */} +
= 4 ? 'opacity-0' : 'opacity-100'}`}>
+ + )} + {/* Static noise texture underlay */}
diff --git a/src/index.css b/src/index.css index b6af9d7..f8952e7 100755 --- a/src/index.css +++ b/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); -} \ No newline at end of file +/* 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'; \ No newline at end of file diff --git a/src/styles/animations.css b/src/styles/animations.css new file mode 100644 index 0000000..e2754ba --- /dev/null +++ b/src/styles/animations.css @@ -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; +} \ No newline at end of file diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 0000000..d7831c6 --- /dev/null +++ b/src/styles/base.css @@ -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% + ); +} \ No newline at end of file diff --git a/src/styles/buttons.css b/src/styles/buttons.css new file mode 100644 index 0000000..60f6ee9 --- /dev/null +++ b/src/styles/buttons.css @@ -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; +} \ No newline at end of file diff --git a/src/styles/screen-effects.css b/src/styles/screen-effects.css new file mode 100644 index 0000000..6c6a966 --- /dev/null +++ b/src/styles/screen-effects.css @@ -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); +} \ No newline at end of file diff --git a/src/styles/scrollbars.css b/src/styles/scrollbars.css new file mode 100644 index 0000000..7d5b799 --- /dev/null +++ b/src/styles/scrollbars.css @@ -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); +} \ No newline at end of file diff --git a/src/styles/tv-frame.css b/src/styles/tv-frame.css new file mode 100644 index 0000000..58e827a --- /dev/null +++ b/src/styles/tv-frame.css @@ -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; +} \ No newline at end of file