diff --git a/index.html b/index.html new file mode 100644 index 0000000..f1bd149 --- /dev/null +++ b/index.html @@ -0,0 +1,88 @@ + + + + + + + LCARS Terminal + + + + + + + +
+ +
+
+
+ LCARS TERMINAL 24-03 +
+
+
+ + +
+
+
SYSTEM
+
LIBRARY
+ +
SENSORS
+ +
+
ANALYSIS
+ +
MODE
+ + +
+
+ +
+
+

Hintergasse

+ +
+
+

SYSTEM INITIALIZED: STARDATE 47988.2

+

NO CRITICAL ALERTS DETECTED.

+

MAIN DEFLECTOR DISH: ONLINE

+

WARP CORE: STABLE

+
+
+ +
+
+
+
+
+ +

PLEASE SELECT A COMMAND SEQUENCE FROM THE LIBRARY COMPUTER ACCESS AND RETRIEVAL SYSTEM.

+ +
+
+
+
+
+
+
+
+
+ + +
+
+
+ ONLINE +
+
+
+ + + + + + \ No newline at end of file diff --git a/mode.html b/mode.html new file mode 100644 index 0000000..157f87f --- /dev/null +++ b/mode.html @@ -0,0 +1,159 @@ + + + + + + + LCARS Terminal - Mode Select + + + + + + + +
+ +
+
+
+ LCARS TERMINAL 24-03 +
+
+
+ + +
+
+ +
SYSTEM
+ +
LIBRARY
+ +
SENSORS
+ +
+
ANALYSIS
+
MODE
+ +
+
+ +
+
+

COMMAND SEQUENCES

+ +
+ +
+ WEIHNACHTSBAUM + -- W +
+
+ TERRASSENTÜR + -- W +
+
+ FENSTER + -- W +
+
+ LADER + -- W +
+
+ TV + -- W +
+
+ + +
+ + +
+
+ FENSTER + -- +
+ +
+
+ DOWN
+
+ STOP
+
+ UP
+
+
+ + +
+
+ TERRASSENTÜR + -- +
+ +
+
+ DOWN
+
+ STOP
+
+ UP
+
+
+ + +
+
+ MARKISE + -- +
+ +
+
+ EINFAHREN
+
+ STOP
+
+ AUSFAHREN
+
+
+ +
+
+
+
+ + +
+
+
+ ONLINE +
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..52cd83f --- /dev/null +++ b/script.js @@ -0,0 +1,468 @@ +console.log("LCARS SYSTEM ONLINE"); + +// Helper for screen logging (Debug mode disabled) +function logToScreen(msg) { + // console.log(msg); +} + +console.log("System Initialized"); + +// Check if Socket.IO library is loaded +if (typeof io === 'undefined') { + console.error("ERROR: Socket.IO library NOT loaded (io is undefined)."); +} else { + initSocket(); +} + +function initSocket() { + // Connect to ioBroker + const socket = io('http://10.0.1.122:8084'); + window.lcarsSocket = socket; // Expose for click handlers + + // Variables to monitor + const sensors = [ + 'alias.0.Hintergasse.Energie.ELECTRIC_POWER', + 'alias.0.Hintergasse.Energie.CONSUMPTION', + 'javascript.0.Variablen.Tagesverbrauch_Gas', + 'javascript.0.Variablen.Tagesverbrauch_H2O', + 'javascript.0.Wetterstation.Aussentemperatur', + 'javascript.0.Wetterstation.Aussenfeuchtigkeit', + 'javascript.0.Wetterstation.Innentemperatur', + 'javascript.0.Wetterstation.Innenfeuchtigkeit', + 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.SET', + 'alias.0.Wohnzimmer.Terrassentür.SET', + 'alias.0.Wohnzimmer.Fenster.SET', + 'alias.0.Wohnzimmer.Lader.SET', + 'alias.0.Wohnzimmer.TV.SET', + 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.ELECTRIC_POWER', + 'alias.0.Wohnzimmer.Terrassentür.ELECTRIC_POWER', + 'alias.0.Wohnzimmer.Fenster.ELECTRIC_POWER', + 'alias.0.Wohnzimmer.Lader.ELECTRIC_POWER', + 'alias.0.Wohnzimmer.TV.Power', + 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET', + 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET', + 'alias.0.Wohnzimmer.Markise.SET' + ]; + + socket.on('connect', () => { + console.log('Connected to 10.0.1.122'); + const statusEl = document.querySelector('.lcars-status'); + if (statusEl) { + statusEl.innerText = "LINK ESTABLISHED"; + statusEl.style.color = "var(--lcars-orange)"; + } + + // Subscription Loop + sensors.forEach(varName => { + socket.emit('subscribe', varName); + socket.emit('subscribeStates', varName); + + // Initial Fetch + socket.emit('getStates', varName, (err, states) => { + if (err) { + console.error(`GetStates Error for ${varName}: ${err}`); + } else { + if (states && states[varName]) { + updateSensor(varName, states[varName]); + } + } + }); + }); + }); + + socket.on('disconnect', () => { + console.log('Disconnected'); + const statusEl = document.querySelector('.lcars-status'); + if (statusEl) { + statusEl.innerText = "LINK OFFLINE"; + statusEl.style.color = "var(--lcars-red)"; + } + }); + + socket.on('stateChange', (id, state) => { + updateSensor(id, state); + }); +} + +// Generic update function +function updateSensor(id, state) { + if (!state) return; + const value = state.val; + + // Power (Watt) + if (id === 'alias.0.Hintergasse.Energie.ELECTRIC_POWER') { + const el = document.getElementById('val-power'); + const block = document.getElementById('sensor-power'); + + if (el) { + el.innerText = value + " W"; + } + if (block) { + block.style.backgroundColor = 'var(--lcars-red)'; + block.style.color = 'black'; + } + } + + // Consumption (kWh) + if (id === 'alias.0.Hintergasse.Energie.CONSUMPTION') { + const el = document.getElementById('val-consumption'); + const block = document.getElementById('sensor-consumption'); + + if (el) { + // Convert to kWh (divide by 1000) and round to 1 decimal + const formattedValue = (value / 1000).toFixed(1); + el.innerText = formattedValue + " kWh"; + } + if (block) { + const kwh = value / 1000; + if (kwh < 5) { + block.style.backgroundColor = 'var(--lcars-green)'; + } else { + block.style.backgroundColor = 'var(--lcars-red)'; + } + block.style.color = 'black'; + } + } + + // Gas Monitoring + if (id === 'javascript.0.Variablen.Tagesverbrauch_Gas') { + const el = document.getElementById('val-gas'); + const block = document.getElementById('sensor-gas'); + + if (el) { + // Assuming m³ for gas + el.innerText = value + " m³"; + } + if (block) { + block.style.backgroundColor = 'var(--lcars-yellow)'; + block.style.color = 'black'; + } + } + + // Water Monitoring + if (id === 'javascript.0.Variablen.Tagesverbrauch_H2O') { + const el = document.getElementById('val-water'); + const block = document.getElementById('sensor-water'); + + if (el) { + // Assuming m³ for water + el.innerText = value + " m³"; + } + if (block) { + block.style.backgroundColor = 'var(--lcars-blue)'; + block.style.color = 'black'; + } + } + + // Temperature (Outer) + if (id === 'javascript.0.Wetterstation.Aussentemperatur') { + const el = document.getElementById('val-temp'); + if (el) el.innerText = value + " °C"; + } + + // Humidity (Outer) + if (id === 'javascript.0.Wetterstation.Aussenfeuchtigkeit') { + const el = document.getElementById('val-humidity'); + if (el) el.innerText = value + " %"; + } + + // Temperature (Inner) + if (id === 'javascript.0.Wetterstation.Innentemperatur') { + const el = document.getElementById('val-inner-temp'); + if (el) el.innerText = value + " °C"; + } + + // Humidity (Inner) + if (id === 'javascript.0.Wetterstation.Innenfeuchtigkeit') { + const el = document.getElementById('val-inner-humidity'); + if (el) el.innerText = value + " %"; + } + + // Update global state for toggle buttons + if (id === 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.SET') { + window.treeState = value; + // Visual feedback on button + const btn = document.getElementById('btn-tree'); + if (btn) { + if (value) { + btn.classList.remove('lcars-orange', 'lcars-red'); + btn.classList.add('lcars-green'); // Active + btn.style.backgroundColor = 'var(--lcars-green)'; + } else { + btn.classList.remove('lcars-green', 'lcars-orange'); + btn.classList.add('lcars-red'); // Inactive + btn.style.backgroundColor = 'var(--lcars-red)'; + } + } + } + + // Terrace Door Toggle State + if (id === 'alias.0.Wohnzimmer.Terrassentür.SET') { + window.terraceState = value; + const btn = document.getElementById('btn-terrace'); + if (btn) { + if (value) { + btn.classList.remove('lcars-blue', 'lcars-red'); + btn.classList.add('lcars-green'); + btn.style.backgroundColor = 'var(--lcars-green)'; + } else { + btn.classList.remove('lcars-green', 'lcars-blue'); + btn.classList.add('lcars-red'); + btn.style.backgroundColor = 'var(--lcars-red)'; + } + } + } + + // Window Toggle State + if (id === 'alias.0.Wohnzimmer.Fenster.SET') { + window.windowState = value; + const btn = document.getElementById('btn-window'); + if (btn) { + if (value) { + btn.classList.remove('lcars-red', 'lcars-blue', 'lcars-orange'); + btn.classList.add('lcars-green'); + btn.style.backgroundColor = 'var(--lcars-green)'; + } else { + btn.classList.remove('lcars-green', 'lcars-blue', 'lcars-orange'); + btn.classList.add('lcars-red'); + btn.style.backgroundColor = 'var(--lcars-red)'; + } + } + } + + // Charger Toggle State + if (id === 'alias.0.Wohnzimmer.Lader.SET') { + window.chargerState = value; + const btn = document.getElementById('btn-charger'); + if (btn) { + if (value) { + btn.classList.remove('lcars-pale-orange', 'lcars-red', 'lcars-green'); // Clean up initial classes + btn.classList.add('lcars-green'); + btn.style.backgroundColor = 'var(--lcars-green)'; + } else { + btn.classList.remove('lcars-green', 'lcars-pale-orange'); + btn.classList.add('lcars-red'); + btn.style.backgroundColor = 'var(--lcars-red)'; + } + } + } + + // TV Toggle State + if (id === 'alias.0.Wohnzimmer.TV.SET') { + window.tvState = value; + const btn = document.getElementById('btn-tv'); + if (btn) { + if (value) { + btn.classList.remove('lcars-purple', 'lcars-red', 'lcars-green'); + btn.classList.add('lcars-green'); + btn.style.backgroundColor = 'var(--lcars-green)'; + } else { + btn.classList.remove('lcars-green', 'lcars-purple'); + btn.classList.add('lcars-red'); + btn.style.backgroundColor = 'var(--lcars-red)'; + } + } + } + + // Power Updates for Mode Buttons + if (id === 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.ELECTRIC_POWER') { + const el = document.getElementById('val-tree-power'); + if (el) el.innerText = value + " W"; + } + if (id === 'alias.0.Wohnzimmer.Terrassentür.ELECTRIC_POWER') { + const el = document.getElementById('val-terrace-power'); + if (el) el.innerText = value + " W"; + } + if (id === 'alias.0.Wohnzimmer.Fenster.ELECTRIC_POWER') { + const el = document.getElementById('val-window-power'); + if (el) el.innerText = value + " W"; + } + if (id === 'alias.0.Wohnzimmer.Lader.ELECTRIC_POWER') { + const el = document.getElementById('val-charger-power'); + if (el) el.innerText = value + " W"; + } + if (id === 'alias.0.Wohnzimmer.TV.Power') { + const el = document.getElementById('val-tv-power'); + if (el) el.innerText = value + " W"; + } + + // Rollo Update + if (id === 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET') { + const slider = document.getElementById('range-rollo'); + const display = document.getElementById('val-rollo'); + if (slider) { + // Apply only if not currently being dragged (simple check: document.activeElement) + if (document.activeElement !== slider) { + slider.value = value; + } + } + if (display) { + display.innerText = value + "%"; + } + } + + // Rollo Terrassentuer Update + if (id === 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET') { + const slider = document.getElementById('range-rollo-2'); + const display = document.getElementById('val-rollo-2'); + if (slider) { + if (document.activeElement !== slider) { + slider.value = value; + } + } + if (display) { + display.innerText = value + "%"; + } + } + + // Markise Update + if (id === 'alias.0.Wohnzimmer.Markise.SET') { + const slider = document.getElementById('range-rollo-3'); + const display = document.getElementById('val-rollo-3'); + if (slider) { + if (document.activeElement !== slider) { + slider.value = value; + } + } + if (display) { + display.innerText = value + "%"; + } + } +} + +// Button interactions +document.addEventListener('click', (e) => { + // Tree Toggle + if (e.target.id === 'btn-tree') { + // Toggle state + const newState = window.treeState ? 0 : 1; + + if (window.lcarsSocket) { + window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Stk_Weihnachtsbaum.SET', { val: newState, ack: false }); + } + } + + // Terrace Door Toggle + if (e.target.id === 'btn-terrace') { + // Toggle state + const newState = window.terraceState ? 0 : 1; + console.log(`Toggling Terrace to: ${newState}`); + + if (window.lcarsSocket) { + window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Terrassentür.SET', { val: newState, ack: false }); + } + } + + // Window Toggle + if (e.target.id === 'btn-window') { + // Toggle state + const newState = window.windowState ? 0 : 1; + console.log(`Toggling Window to: ${newState}`); + + if (window.lcarsSocket) { + window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Fenster.SET', { val: newState, ack: false }); + } + } + + // Charger Toggle + if (e.target.id === 'btn-charger') { + // Toggle state + const newState = window.chargerState ? 0 : 1; + console.log(`Toggling Charger to: ${newState}`); + + if (window.lcarsSocket) { + window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Lader.SET', { val: newState, ack: false }); + } + } + + // TV Toggle + if (e.target.id === 'btn-tv') { + // Toggle state + const newState = window.tvState ? 0 : 1; + console.log(`Toggling TV to: ${newState}`); + + if (window.lcarsSocket) { + window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.TV.SET', { val: newState, ack: false }); + } + } + + // --- Rollo 1 (Fenster) Control --- + if (e.target.id === 'btn-rollo-down') { + if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET', { val: 0, ack: false }); + } + if (e.target.id === 'btn-rollo-up') { + if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET', { val: 100, ack: false }); + } + if (e.target.id === 'btn-rollo-stop') { + console.log("Stopping Rollo Wohnzimmer"); + if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.STOP', { val: true, ack: false }); + } + + // --- Rollo 2 (Terrassentür) Control --- + if (e.target.id === 'btn-rollo-2-down') { + if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET', { val: 0, ack: false }); + } + if (e.target.id === 'btn-rollo-2-up') { + if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET', { val: 100, ack: false }); + } + if (e.target.id === 'btn-rollo-2-stop') { + console.log("Stopping Rollo Terrassentuer"); + if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.STOP', { val: true, ack: false }); + } + + // --- Rollo 3 (Markise) Control --- + if (e.target.id === 'btn-rollo-3-down') { + if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.SET', { val: 0, ack: false }); + } + if (e.target.id === 'btn-rollo-3-up') { + if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.SET', { val: 100, ack: false }); + } + if (e.target.id === 'btn-rollo-3-stop') { + console.log("Stopping Markise"); + if (window.lcarsSocket) window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.STOP', { val: true, ack: false }); + } + +}); + +// Slider Interaction (outside click listener to support dragging) +document.addEventListener('input', (e) => { + if (e.target.id === 'range-rollo') { + const val = e.target.value; + const display = document.getElementById('val-rollo'); + if (display) display.innerText = val + "%"; + } + if (e.target.id === 'range-rollo-2') { + const val = e.target.value; + const display = document.getElementById('val-rollo-2'); + if (display) display.innerText = val + "%"; + } + if (e.target.id === 'range-rollo-3') { + const val = e.target.value; + const display = document.getElementById('val-rollo-3'); + if (display) display.innerText = val + "%"; + } +}); + +document.addEventListener('change', (e) => { + if (e.target.id === 'range-rollo') { + const val = parseInt(e.target.value); + console.log(`Setting Rollo to: ${val}`); + if (window.lcarsSocket) { + window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Wohnzimmer.SET', { val: val, ack: false }); + } + } + if (e.target.id === 'range-rollo-2') { + const val = parseInt(e.target.value); + console.log(`Setting Rollo Terrassentuer to: ${val}`); + if (window.lcarsSocket) { + window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Rollo_Terrassentuer.SET', { val: val, ack: false }); + } + } + if (e.target.id === 'range-rollo-3') { + const val = parseInt(e.target.value); + console.log(`Setting Markise to: ${val}`); + if (window.lcarsSocket) { + window.lcarsSocket.emit('setState', 'alias.0.Wohnzimmer.Markise.SET', { val: val, ack: false }); + } + } +}); diff --git a/sensors.html b/sensors.html new file mode 100644 index 0000000..ce871f9 --- /dev/null +++ b/sensors.html @@ -0,0 +1,130 @@ + + + + + + + LCARS Terminal - Sensors + + + + + + + +
+ +
+
+
+ LCARS TERMINAL 24-03 +
+
+
+ + +
+
+ +
SYSTEM
+ +
LIBRARY
+
SENSORS
+
+
ANALYSIS
+ +
MODE
+ + +
+
+ +
+
+

SENSOR ARRAY

+ +
+ +
+ LEISTUNGSBEZUG + -- +
+ + +
+ TAGESBEZUG + -- +
+ + +
+ GAS + -- +
+ + +
+ WASSER + -- +
+ +
+ + +
+ +
+ AUSSENTEMPERATUR + -- +
+ + +
+ LUFTFEUCHTIGKEIT + -- +
+ +
+
+ + +
+ +
+ INNENTEMPERATUR + -- +
+ + +
+ LUFTFEUCHTIGKEIT + -- +
+ +
+
+
+
+ + +
+
+
+ ONLINE +
+
+
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c90ccaa --- /dev/null +++ b/style.css @@ -0,0 +1,415 @@ +:root { + /* LCARS Palette */ + --lcars-orange: #FF9900; + --lcars-pale-orange: #FFCC99; + --lcars-pink: #CC99CC; + --lcars-purple: #995599; + /* Adjusted for better contrast/authenticity */ + --lcars-blue: #9999CC; + --lcars-light-blue: #99CCFF; + --lcars-red: #CC6666; + --lcars-green: #99CC99; + --lcars-yellow: #FFCC00; + --lcars-bg: #000000; + --lcars-text: #000000; + /* Text on buttons is typically black */ + + /* Dimensions */ + --elbow-width: 150px; + --bar-height: 30px; + --button-height: 50px; + --gap: 5px; + --curve-radius: 30px; + /* Radius for the rounded corners */ +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + background-color: var(--lcars-bg); + color: var(--lcars-orange); + font-family: 'Antonio', 'Arial Narrow', sans-serif; + height: 100vh; + overflow: hidden; + /* Typical for a fixed terminal interface */ + text-transform: uppercase; +} + +/* Layout Grid */ +.lcars-container { + display: grid; + grid-template-rows: auto 1fr auto; + height: 100%; + padding: 20px; + max-width: 1920px; + margin: 0 auto; +} + +/* Header Section */ +.lcars-header { + display: flex; + align-items: flex-end; + height: 80px; + margin-bottom: var(--gap); +} + +.lcars-elbow-top-left { + width: var(--elbow-width); + height: 100%; + background-color: var(--lcars-orange); + border-top-left-radius: var(--curve-radius); + margin-right: var(--gap); + position: relative; +} + +/* Creates the inner curve of the elbow */ +.lcars-elbow-top-left::after { + content: ''; + position: absolute; + bottom: 0; + right: 0; + width: calc(var(--elbow-width) - var(--curve-radius)); + /* Adjust based on design */ + height: calc(100% - var(--bar-height)); + background-color: var(--lcars-bg); + border-top-left-radius: var(--curve-radius); +} + +.lcars-bar-horizontal { + flex-grow: 1; + height: var(--bar-height); + background-color: var(--lcars-orange); + display: flex; + align-items: center; + padding-left: 10px; + border-top-right-radius: 15px; + /* Slight round on the far end */ + border-bottom-right-radius: 15px; +} + +.lcars-title { + color: var(--lcars-bg); + font-size: 24px; + font-weight: 700; + letter-spacing: 2px; + margin-left: auto; + /* Push to right */ + margin-right: 20px; +} + +/* Middle Section */ +.lcars-middle { + display: flex; + height: 100%; + overflow: hidden; +} + +.lcars-sidebar { + width: var(--elbow-width); + display: flex; + flex-direction: column; + margin-right: var(--gap); + /* Continue the visual column from the header elbow */ +} + +.lcars-button { + height: var(--button-height); + margin-bottom: var(--gap); + display: flex; + justify-content: flex-end; + /* Text aligned right typical for LCARS sidebar */ + align-items: center; + padding-right: 10px; + font-size: 18px; + font-weight: 600; + color: var(--lcars-bg); + cursor: pointer; + border-top-left-radius: 15px; + /* Rounded ends left */ + border-bottom-left-radius: 15px; + transition: filter 0.2s; +} + +.lcars-button:hover { + filter: brightness(1.2); +} + +.lcars-spacer { + flex-grow: 1; + background-color: transparent; + /* Empty space */ +} + +.lcars-column-fill { + flex-grow: 1; + background-color: var(--lcars-pale-orange); + min-height: 50px; + margin-bottom: var(--gap); + border-bottom-left-radius: var(--curve-radius); + /* Prepare for bottom elbow */ +} + + +/* Main Content */ +.lcars-main-content { + flex-grow: 1; + padding: 20px; + border: 2px solid var(--lcars-blue); + border-radius: 20px; + background: rgba(0, 0, 0, 0.5); + color: var(--lcars-light-blue); + overflow-y: auto; +} + +.lcars-main-content h1 { + font-size: 4rem; + color: var(--lcars-orange); + margin: 0 0 20px 0; +} + +.lcars-main-content p { + font-size: 1.5rem; + line-height: 1.5; + margin-bottom: 20px; + max-width: 800px; +} + +/* Footer Section */ +.lcars-footer { + display: flex; + height: 60px; + margin-top: var(--gap); +} + +.lcars-elbow-bottom-left { + width: var(--elbow-width); + height: 100%; + background-color: var(--lcars-pale-orange); + border-bottom-left-radius: var(--curve-radius); + margin-right: var(--gap); + position: relative; + top: -5px; + /* Close the gap visually if needed, but grid handles it */ +} + +/* Inner curve for bottom elbow */ +.lcars-elbow-bottom-left::before { + content: ''; + position: absolute; + top: 0; + width: calc(var(--elbow-width) - var(--curve-radius)); + height: calc(100% - var(--bar-height)); + background-color: var(--lcars-bg); + border-bottom-left-radius: var(--curve-radius); + right: 0; +} + + +.lcars-bar-horizontal-bottom { + flex-grow: 1; + height: var(--bar-height); + background-color: var(--lcars-pale-orange); + align-self: flex-end; + /* Align to bottom */ + display: flex; + align-items: center; + border-top-right-radius: 15px; + border-bottom-right-radius: 15px; +} + +.lcars-status { + color: var(--lcars-bg); + font-weight: bold; + margin-left: 20px; +} + +/* Colors Classes */ +.lcars-orange { + background-color: var(--lcars-orange); +} + +.lcars-pale-orange { + background-color: var(--lcars-pale-orange); +} + +.lcars-pink { + background-color: var(--lcars-pink); +} + +.lcars-purple { + background-color: var(--lcars-purple); +} + +.lcars-blue { + background-color: var(--lcars-blue); +} + +.lcars-light-blue { + background-color: var(--lcars-light-blue); +} + +.lcars-red { + background-color: var(--lcars-red); +} + +.lcars-orange-bg { + background-color: var(--lcars-orange); +} + +.lcars-purple-bg { + background-color: var(--lcars-purple); +} + +.lcars-blue-bg { + background-color: var(--lcars-blue); +} + +/* Animations */ +@keyframes slideDown { + from { + transform: translateY(-100%); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes slideRight { + from { + transform: translateX(-100%); + opacity: 0; + } + + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.lcars-header { + animation: slideDown 0.8s ease-out; +} + +.lcars-sidebar { + animation: slideRight 1s ease-out; +} + +.lcars-footer { + animation: slideRight 1.2s ease-out; +} + +.lcars-main-content { + animation: fadeIn 2s ease-in; +} + +/* Content Layouts */ +.content-split { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; + flex-wrap: wrap; +} + +.text-block { + flex: 1; + min-width: 300px; +} + +.graphic-block { + flex: 0 0 250px; + display: flex; + justify-content: center; +} + +/* Blinking Animation */ +.blink { + animation: blinker 1.5s linear infinite; +} + +@keyframes blinker { + 50% { + opacity: 0.5; + } +} + +/* Dummy Data Grid */ +.data-grid { + display: flex; + gap: 10px; + margin-top: 50px; + flex-wrap: wrap; +} + +.data-block { + width: 60px; + height: 10px; +} + +/* Range Slider styling to look like LCARS bar */ +.lcars-slider { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 30px; + background: var(--lcars-bg); + /* Background of track */ + border: 2px solid var(--lcars-orange); + /* Frame */ + border-radius: 15px; + outline: none; + opacity: 0.9; + transition: opacity .2s; +} + +.lcars-slider:hover { + opacity: 1; +} + +.lcars-slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 40px; + height: 26px; + /* slightly smaller than track height to fit inside */ + background: var(--lcars-orange); + cursor: pointer; + border-radius: 10px; + margin-top: 0px; +} + +.lcars-slider::-moz-range-thumb { + width: 40px; + height: 26px; + background: var(--lcars-orange); + cursor: pointer; + border-radius: 10px; + border: none; +} + +.lcars-green-bg { + background-color: var(--lcars-green); + color: black; +} + +.lcars-red-bg { + background-color: var(--lcars-red); + color: black; +} \ No newline at end of file