359 lines
8.4 KiB
HTML
359 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html lang="en" >
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>dangrubb.net</title>
|
||
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
|
||
<link rel="stylesheet" href="./style.css">
|
||
|
||
</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="
|
||
--glitch-x-1: -2em;
|
||
--glitch-hue-1: -16deg;
|
||
--glitch-x-2: 2em;
|
||
--glitch-hue-2: 13deg;
|
||
|
||
background-position: 0 -0em;
|
||
height: 5em;
|
||
animation-name: glitch-9;
|
||
animation-duration: 9000ms;
|
||
animation-delay: 2s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: -1em;
|
||
--glitch-hue-1: -42deg;
|
||
--glitch-x-2: -6em;
|
||
--glitch-hue-2: -23deg;
|
||
|
||
background-position: 0 -5em;
|
||
height: 3em;
|
||
animation-name: glitch-5;
|
||
animation-duration: 5000ms;
|
||
animation-delay: 1s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: -10em;
|
||
--glitch-hue-1: -42deg;
|
||
--glitch-x-2: -9em;
|
||
--glitch-hue-2: 45deg;
|
||
|
||
background-position: 0 -8em;
|
||
height: 3em;
|
||
animation-name: glitch-7;
|
||
animation-duration: 7000ms;
|
||
animation-delay: 0s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: -6em;
|
||
--glitch-hue-1: -11deg;
|
||
--glitch-x-2: 2em;
|
||
--glitch-hue-2: 29deg;
|
||
|
||
background-position: 0 -11em;
|
||
height: 5em;
|
||
animation-name: glitch-8;
|
||
animation-duration: 8000ms;
|
||
animation-delay: 1s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: 0em;
|
||
--glitch-hue-1: 42deg;
|
||
--glitch-x-2: 2em;
|
||
--glitch-hue-2: -28deg;
|
||
|
||
background-position: 0 -16em;
|
||
height: 5em;
|
||
animation-name: glitch-6;
|
||
animation-duration: 6000ms;
|
||
animation-delay: 0s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: -3em;
|
||
--glitch-hue-1: -45deg;
|
||
--glitch-x-2: -5em;
|
||
--glitch-hue-2: -15deg;
|
||
|
||
background-position: 0 -21em;
|
||
height: 2em;
|
||
animation-name: glitch-7;
|
||
animation-duration: 7000ms;
|
||
animation-delay: 0s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: -5em;
|
||
--glitch-hue-1: 35deg;
|
||
--glitch-x-2: 9em;
|
||
--glitch-hue-2: 35deg;
|
||
|
||
background-position: 0 -23em;
|
||
height: 2em;
|
||
animation-name: glitch-6;
|
||
animation-duration: 6000ms;
|
||
animation-delay: 0s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: 10em;
|
||
--glitch-hue-1: 39deg;
|
||
--glitch-x-2: -8em;
|
||
--glitch-hue-2: 24deg;
|
||
|
||
background-position: 0 -25em;
|
||
height: 6em;
|
||
animation-name: glitch-7;
|
||
animation-duration: 7000ms;
|
||
animation-delay: 1s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: -6em;
|
||
--glitch-hue-1: -46deg;
|
||
--glitch-x-2: -3em;
|
||
--glitch-hue-2: 18deg;
|
||
|
||
background-position: 0 -31em;
|
||
height: 6em;
|
||
animation-name: glitch-10;
|
||
animation-duration: 10000ms;
|
||
animation-delay: 1s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: -8em;
|
||
--glitch-hue-1: -37deg;
|
||
--glitch-x-2: -6em;
|
||
--glitch-hue-2: 15deg;
|
||
|
||
background-position: 0 -37em;
|
||
height: 1em;
|
||
animation-name: glitch-9;
|
||
animation-duration: 9000ms;
|
||
animation-delay: 1s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: -1em;
|
||
--glitch-hue-1: 16deg;
|
||
--glitch-x-2: 2em;
|
||
--glitch-hue-2: 25deg;
|
||
|
||
background-position: 0 -38em;
|
||
height: 2em;
|
||
animation-name: glitch-5;
|
||
animation-duration: 5000ms;
|
||
animation-delay: 1s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: 5em;
|
||
--glitch-hue-1: 32deg;
|
||
--glitch-x-2: 10em;
|
||
--glitch-hue-2: -3deg;
|
||
|
||
background-position: 0 -40em;
|
||
height: 2em;
|
||
animation-name: glitch-9;
|
||
animation-duration: 9000ms;
|
||
animation-delay: 1s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: 10em;
|
||
--glitch-hue-1: -26deg;
|
||
--glitch-x-2: 6em;
|
||
--glitch-hue-2: -45deg;
|
||
|
||
background-position: 0 -42em;
|
||
height: 4em;
|
||
animation-name: glitch-6;
|
||
animation-duration: 6000ms;
|
||
animation-delay: 1s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: -7em;
|
||
--glitch-hue-1: -45deg;
|
||
--glitch-x-2: -8em;
|
||
--glitch-hue-2: 45deg;
|
||
|
||
background-position: 0 -46em;
|
||
height: 3em;
|
||
animation-name: glitch-5;
|
||
animation-duration: 5000ms;
|
||
animation-delay: 2s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: 4em;
|
||
--glitch-hue-1: 40deg;
|
||
--glitch-x-2: -8em;
|
||
--glitch-hue-2: 29deg;
|
||
|
||
background-position: 0 -49em;
|
||
height: 3em;
|
||
animation-name: glitch-6;
|
||
animation-duration: 6000ms;
|
||
animation-delay: 1s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: -4em;
|
||
--glitch-hue-1: 26deg;
|
||
--glitch-x-2: -6em;
|
||
--glitch-hue-2: -3deg;
|
||
|
||
background-position: 0 -52em;
|
||
height: 6em;
|
||
animation-name: glitch-10;
|
||
animation-duration: 10000ms;
|
||
animation-delay: 0s;
|
||
"></div>
|
||
|
||
<div class="strip" style="
|
||
--glitch-x-1: 6em;
|
||
--glitch-hue-1: 43deg;
|
||
--glitch-x-2: -1em;
|
||
--glitch-hue-2: -1deg;
|
||
|
||
background-position: 0 -58em;
|
||
height: 4em;
|
||
animation-name: glitch-8;
|
||
animation-duration: 8000ms;
|
||
animation-delay: 0s;
|
||
"></div>
|
||
</div>
|
||
|
||
<p>
|
||
dangrubb.net
|
||
</p>
|
||
<p>
|
||
<a target="_parent" href="https://ai.dangrubb.net">ai</a>
|
||
<a target="_parent" href="https://ghost.dangrubb.net">blog</a>
|
||
<a target="_parent" href="https://pi.dangrubb.net/jellyfin">media</a>
|
||
<a target="_parent" href="https://pi.dangrubb.net/nextcloud">storage</a>
|
||
<a target="_parent" href="https://dangrubb.net/cv">cv</a>
|
||
<a target="_parent" href="https://pi.dangrubb.net/dangit">git</a></p>
|
||
<div class="debug">
|
||
<div class="code"></div>
|
||
</div>
|
||
<!-- partial -->
|
||
<script src="./script.js"></script>
|
||
|
||
</body>
|
||
</html>
|