initial switch commit

2025-07-16 15:34:57 -04:00
parent 9b24e45c65
commit cf6d8fc2c2
4 changed files with 230 additions and 1 deletions
--- a/index.html
+++ b/index.html
@ -11,6 +11,109 @@

 </head>
 <body>
+<!-- Add this anywhere in your HTML -->
+<div id="server-control">
+    <span id="ascii-switch">[||==] OFF</span>
+</div>
+
+<style>
+/* Position the control in top right */
+#server-control {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    font-family: 'Courier New', monospace;
+    font-size: 16px;
+}
+
+#ascii-switch {
+    cursor: pointer;
+    user-select: none;
+}
+
+/* Color states */
+.state-off {
+    color: white;
+}
+
+.state-on {
+    color: #4CAF50;
+}
+
+.state-unavailable {
+    color: #ff6b6b;
+    cursor: not-allowed;
+    text-decoration: none;
+}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const asciiSwitch = document.getElementById('ascii-switch');
+    let currentState = false; // false = off, true = on
+    
+    // Load current state
+    fetch('/php/get_state.php')
+        .then(response => response.text())
+        .then(data => {
+            const state = data.trim();
+            currentState = (state === '1');
+            updateDisplay(currentState);
+        })
+        .catch(() => {
+            // If file doesn't exist or can't be reached, set to unavailable
+            updateDisplay('unavailable');
+        });
+    
+    // Handle clicks
+    asciiSwitch.addEventListener('click', function() {
+        if (currentState === 'unavailable') return; // Don't allow clicking if unavailable
+        
+        const newState = !currentState;
+        const stateValue = newState ? '1' : '0';
+        
+        // Optimistically update display
+        updateDisplay(newState);
+        currentState = newState;
+        
+        // Send state to server
+        fetch('/php/update_state.php', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: 'state=' + stateValue
+        })
+        .then(response => response.text())
+        .then(data => {
+            console.log('State updated:', stateValue);
+        })
+        .catch(error => {
+            console.error('Error updating state:', error);
+            // Revert on error
+            currentState = !newState;
+            updateDisplay(currentState);
+        });
+    });
+    
+    function updateDisplay(state) {
+        asciiSwitch.className = ''; // Clear existing classes
+        
+        if (state === 'unavailable') {
+            asciiSwitch.textContent = '[????] UNAVAILABLE';
+            asciiSwitch.classList.add('state-unavailable');
+        } else if (state === true || state === '1') {
+            asciiSwitch.textContent = '[==||]⠀ ON';
+            asciiSwitch.classList.add('state-on');
+        } else {
+            asciiSwitch.textContent = '[||==] OFF';
+            asciiSwitch.classList.add('state-off');
+        }
+    }
+});
+</script>
+
 <!-- partial:index.partial.html -->
 <div class="bard">
  <div class="strip" style="