|
|
| @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
|
| @import url('https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap');
|
| :root {
|
| --terminal-bg: #0d1117;
|
| --terminal-bg-secondary: #161b22;
|
| --terminal-bg-tertiary: #21262d;
|
| --terminal-border: #30363d;
|
| --terminal-green: #00ff00;
|
| --terminal-green-glow: rgba(0, 255, 0, 0.6);
|
| --terminal-text: #00ff00;
|
| --terminal-text-muted: #7d8590;
|
| --terminal-accent: #58a6ff;
|
| --terminal-warning: #f85149;
|
| --terminal-font: 'Rubik Wet Paint', 'VT323', 'JetBrains Mono', 'Consolas', cursive, monospace;
|
| --terminal-font-ui: 'Roboto', -apple-system, system-ui;
|
| }
|
|
|
|
|
| * {
|
| box-sizing: border-box;
|
| }
|
|
|
| body {
|
| font-family: var(--terminal-font);
|
| background: var(--terminal-bg);
|
| color: var(--terminal-text);
|
| font-size: 18px;
|
| min-height: 100vh;
|
| margin: 0;
|
| padding: 0;
|
| position: relative;
|
| overflow-x: hidden;
|
| }
|
|
|
|
|
| .glitch-overlay {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| bottom: 0;
|
| pointer-events: none;
|
| z-index: -1;
|
| background:
|
| radial-gradient(circle at 20% 50%, transparent 20%, rgba(57, 255, 20, 0.03) 21%, rgba(57, 255, 20, 0.03) 34%, transparent 35%),
|
| linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.02) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02) 76%, transparent 77%);
|
| animation: glitch-flicker 3s infinite;
|
| }
|
|
|
| @keyframes glitch-flicker {
|
| 0%, 98%, 100% { opacity: 1; }
|
| 99% { opacity: 0.8; }
|
| }
|
|
|
|
|
| .terminal-nav {
|
| background: var(--terminal-bg-secondary) !important;
|
| border-bottom: 1px solid var(--terminal-border);
|
| backdrop-filter: blur(10px);
|
| padding: 0.75rem 0;
|
| }
|
|
|
| .terminal-brand {
|
| font-family: var(--terminal-font);
|
| font-weight: 500;
|
| font-size: 1.2rem;
|
| text-decoration: none !important;
|
| color: var(--terminal-text) !important;
|
| display: flex;
|
| align-items: center;
|
| }
|
|
|
| .brand-text {
|
| margin-right: 2px;
|
| }
|
|
|
| .brand-cursor {
|
| color: var(--terminal-green);
|
| animation: cursor-blink 1s infinite;
|
| }
|
|
|
| @keyframes cursor-blink {
|
| 0%, 50% { opacity: 1; }
|
| 51%, 100% { opacity: 0; }
|
| }
|
|
|
| .terminal-status {
|
| display: flex;
|
| align-items: center;
|
| font-size: 0.8rem;
|
| color: var(--terminal-text-muted);
|
| }
|
|
|
| .status-indicator {
|
| width: 8px;
|
| height: 8px;
|
| background: var(--terminal-green);
|
| border-radius: 50%;
|
| margin-right: 0.5rem;
|
| animation: pulse-glow 2s infinite;
|
| }
|
|
|
| @keyframes pulse-glow {
|
| 0%, 100% { box-shadow: 0 0 5px var(--terminal-green-glow); }
|
| 50% { box-shadow: 0 0 15px var(--terminal-green-glow); }
|
| }
|
|
|
|
|
| .terminal-main {
|
| min-height: calc(100vh - 140px);
|
| padding: 2rem 0;
|
| }
|
|
|
|
|
| .terminal-card {
|
| background: var(--terminal-bg-secondary);
|
| border: 1px solid var(--terminal-border);
|
| border-radius: 8px;
|
| backdrop-filter: blur(10px);
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .terminal-card::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| height: 1px;
|
| background: linear-gradient(90deg, transparent, var(--terminal-green), transparent);
|
| opacity: 0.5;
|
| }
|
|
|
| .terminal-window {
|
| background: var(--terminal-bg-tertiary);
|
| border: 1px solid var(--terminal-border);
|
| border-radius: 8px;
|
| overflow: hidden;
|
| }
|
|
|
| .terminal-header {
|
| background: var(--terminal-bg-secondary);
|
| padding: 0.75rem 1rem;
|
| border-bottom: 1px solid var(--terminal-border);
|
| display: flex;
|
| align-items: center;
|
| }
|
|
|
| .terminal-dots {
|
| display: flex;
|
| gap: 0.5rem;
|
| margin-right: 1rem;
|
| }
|
|
|
| .terminal-dot {
|
| width: 12px;
|
| height: 12px;
|
| border-radius: 50%;
|
| }
|
|
|
| .terminal-dot.red { background: #ff5f56; }
|
| .terminal-dot.yellow { background: #ffbd2e; }
|
| .terminal-dot.green { background: #27ca3f; }
|
|
|
| .terminal-title {
|
| font-size: 1rem;
|
| color: var(--terminal-green);
|
| margin: 0;
|
| }
|
|
|
|
|
| .btn-terminal {
|
| background: transparent;
|
| border: 1px solid var(--terminal-green);
|
| color: var(--terminal-green);
|
| font-family: var(--terminal-font);
|
| font-size: 0.9rem;
|
| padding: 0.5rem 1.5rem;
|
| border-radius: 4px;
|
| transition: all 0.3s ease;
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .btn-terminal:hover {
|
| background: var(--terminal-green);
|
| color: var(--terminal-bg);
|
| box-shadow: 0 0 20px var(--terminal-green-glow);
|
| transform: translateY(-1px);
|
| }
|
|
|
| .btn-terminal:active {
|
| transform: translateY(0);
|
| }
|
|
|
| .btn-terminal::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: -100%;
|
| width: 100%;
|
| height: 100%;
|
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
| transition: left 0.5s ease;
|
| }
|
|
|
| .btn-terminal:hover::before {
|
| left: 100%;
|
| }
|
|
|
|
|
| .terminal-input {
|
| background: var(--terminal-bg-tertiary);
|
| border: 1px solid var(--terminal-border);
|
| color: var(--terminal-text);
|
| font-family: var(--terminal-font);
|
| border-radius: 4px;
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .terminal-input:focus {
|
| background: var(--terminal-bg-secondary);
|
| border-color: var(--terminal-green);
|
| box-shadow: 0 0 0 0.2rem var(--terminal-green-glow);
|
| color: var(--terminal-text);
|
| }
|
|
|
| .terminal-input::placeholder {
|
| color: var(--terminal-text-muted);
|
| font-style: italic;
|
| }
|
|
|
|
|
| .terminal-text {
|
| font-family: var(--terminal-font);
|
| }
|
|
|
| .text-terminal-green {
|
| color: var(--terminal-green);
|
| }
|
|
|
| .text-terminal-accent {
|
| color: var(--terminal-accent);
|
| }
|
|
|
| .text-glow {
|
| text-shadow: 0 0 10px currentColor;
|
| }
|
|
|
|
|
| .typewriter {
|
| overflow: hidden;
|
| border-right: 2px solid var(--terminal-green);
|
| white-space: nowrap;
|
| margin: 0 auto;
|
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
|
| }
|
|
|
| @keyframes typing {
|
| from { width: 0; }
|
| to { width: 100%; }
|
| }
|
|
|
| @keyframes blink-caret {
|
| from, to { border-color: transparent; }
|
| 50% { border-color: var(--terminal-green); }
|
| }
|
|
|
| .fade-in {
|
| animation: fadeIn 1s ease-in;
|
| }
|
|
|
| @keyframes fadeIn {
|
| from { opacity: 0; transform: translateY(20px); }
|
| to { opacity: 1; transform: translateY(0); }
|
| }
|
|
|
| .slide-up {
|
| animation: slideUp 0.5s ease-out;
|
| }
|
|
|
| @keyframes slideUp {
|
| from { transform: translateY(50px); opacity: 0; }
|
| to { transform: translateY(0); opacity: 1; }
|
| }
|
|
|
|
|
| .chat-container {
|
| height: 70vh;
|
| display: flex;
|
| flex-direction: column;
|
| }
|
|
|
| .chat-messages {
|
| flex: 1;
|
| overflow-y: auto;
|
| padding: 1rem;
|
| background: var(--terminal-bg-tertiary);
|
| }
|
|
|
| .chat-message {
|
| margin-bottom: 1rem;
|
| animation: messageSlide 0.3s ease-out;
|
| }
|
|
|
| @keyframes messageSlide {
|
| from {
|
| opacity: 0;
|
| transform: translateX(-20px);
|
| }
|
| to {
|
| opacity: 1;
|
| transform: translateX(0);
|
| }
|
| }
|
|
|
| .message-header {
|
| display: flex;
|
| align-items: center;
|
| margin-bottom: 0.25rem;
|
| }
|
|
|
| .message-username {
|
| font-weight: 500;
|
| margin-right: 0.5rem;
|
| }
|
|
|
| .message-timestamp {
|
| font-size: 0.8rem;
|
| color: var(--terminal-text-muted);
|
| }
|
|
|
| .message-content {
|
| background: var(--terminal-bg-secondary);
|
| padding: 0.75rem;
|
| border-radius: 4px;
|
| border-left: 3px solid var(--terminal-green);
|
| margin-left: 1rem;
|
| }
|
|
|
| .bot-message .message-content {
|
| border-left-color: var(--terminal-accent);
|
| background: rgba(88, 166, 255, 0.1);
|
| }
|
|
|
| .bot-message .message-username {
|
| color: var(--terminal-accent);
|
| }
|
|
|
| .chat-input-container {
|
| padding: 1rem;
|
| background: var(--terminal-bg-secondary);
|
| border-top: 1px solid var(--terminal-border);
|
| }
|
|
|
| .typing-indicator {
|
| font-style: italic;
|
| color: var(--terminal-text-muted);
|
| padding: 0.5rem 1rem;
|
| animation: pulse 1.5s infinite;
|
| }
|
|
|
| @keyframes pulse {
|
| 0%, 100% { opacity: 0.6; }
|
| 50% { opacity: 1; }
|
| }
|
|
|
|
|
| .terminal-footer {
|
| background: var(--terminal-bg-secondary);
|
| border-top: 1px solid var(--terminal-border);
|
| padding: 1rem 0;
|
| margin-top: auto;
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .terminal-main {
|
| padding: 1rem 0;
|
| }
|
|
|
| .chat-container {
|
| height: 60vh;
|
| }
|
|
|
| .terminal-brand {
|
| font-size: 1rem;
|
| }
|
| }
|
|
|
|
|
| .chat-messages::-webkit-scrollbar {
|
| width: 8px;
|
| }
|
|
|
| .chat-messages::-webkit-scrollbar-track {
|
| background: var(--terminal-bg);
|
| }
|
|
|
| .chat-messages::-webkit-scrollbar-thumb {
|
| background: var(--terminal-border);
|
| border-radius: 4px;
|
| }
|
|
|
| .chat-messages::-webkit-scrollbar-thumb:hover {
|
| background: var(--terminal-text-muted);
|
| }
|
|
|
|
|
| .terminal-spinner {
|
| width: 20px;
|
| height: 20px;
|
| border: 2px solid var(--terminal-border);
|
| border-top: 2px solid var(--terminal-green);
|
| border-radius: 50%;
|
| animation: spin 1s linear infinite;
|
| display: inline-block;
|
| margin-right: 0.5rem;
|
| }
|
|
|
| @keyframes spin {
|
| 0% { transform: rotate(0deg); }
|
| 100% { transform: rotate(360deg); }
|
| } |
