|
|
|
|
|
:root { |
|
|
--primary: #8e44ad; |
|
|
--secondary: #9b59b6; |
|
|
--dark: #2c3e50; |
|
|
--light: #ecf0f1; |
|
|
--success: #2ecc71; |
|
|
--danger: #e74c3c; |
|
|
--warning: #f39c12; |
|
|
--info: #3498db; |
|
|
} |
|
|
|
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
overflow-x: hidden; |
|
|
color: var(--light); |
|
|
} |
|
|
|
|
|
|
|
|
#video-background { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
z-index: -1; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
#funk-video { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
min-width: 100%; |
|
|
min-height: 100%; |
|
|
width: auto; |
|
|
height: auto; |
|
|
transform: translate(-50%, -50%); |
|
|
opacity: 0.15; |
|
|
filter: blur(4px); |
|
|
} |
|
|
|
|
|
#video-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: radial-gradient(circle, rgba(22, 33, 62, 0.85) 0%, rgba(10, 15, 30, 0.95) 100%); |
|
|
} |
|
|
|
|
|
|
|
|
.panel { |
|
|
max-width: 1200px; |
|
|
margin: 2rem auto; |
|
|
padding: 2rem; |
|
|
background: rgba(25, 35, 65, 0.8); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.terminal { |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
border-radius: 8px; |
|
|
padding: 1.5rem; |
|
|
margin-top: 1.5rem; |
|
|
border: 2px solid var(--primary); |
|
|
} |
|
|
|
|
|
#output { |
|
|
height: 50vh; |
|
|
overflow-y: auto; |
|
|
background: #111; |
|
|
color: #0f0; |
|
|
font-family: 'Courier New', monospace; |
|
|
padding: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
white-space: pre-wrap; |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.input-group { |
|
|
display: flex; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
#command-input { |
|
|
flex: 1; |
|
|
padding: 0.75rem; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: 1px solid var(--primary); |
|
|
border-radius: 5px; |
|
|
color: white; |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
#send-command { |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 5px; |
|
|
padding: 0 1.5rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
#send-command:hover { |
|
|
background: var(--secondary); |
|
|
} |
|
|
|
|
|
|
|
|
#connection-status { |
|
|
position: fixed; |
|
|
bottom: 10px; |
|
|
right: 10px; |
|
|
padding: 0.5rem 1rem; |
|
|
background: #333; |
|
|
color: white; |
|
|
border-radius: 5px; |
|
|
font-size: 0.9rem; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
|
|
|
.message { |
|
|
padding: 0.75rem; |
|
|
border-radius: 5px; |
|
|
margin-top: 1rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.success { |
|
|
background: rgba(46, 204, 113, 0.2); |
|
|
color: #2ecc71; |
|
|
} |
|
|
|
|
|
.error { |
|
|
background: rgba(231, 76, 60, 0.2); |
|
|
color: #e74c3c; |
|
|
} |
|
|
|
|
|
.warning { |
|
|
background: rgba(243, 156, 18, 0.2); |
|
|
color: #f39c12; |
|
|
} |
|
|
|
|
|
.info { |
|
|
background: rgba(52, 152, 219, 0.2); |
|
|
color: #3498db; |
|
|
} |
