forked from Simnation/Main
122 lines
4.2 KiB
HTML
122 lines
4.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Tracker Dart</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background: transparent;
|
||
|
|
font-family: 'Orbitron', sans-serif;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-container {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 20px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background: linear-gradient(135deg, #111, #333);
|
||
|
|
border: 2px solid #333;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 15px 30px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
color: white;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.3s;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target-status {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
transition: color 0.3s, text-shadow 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target-status.active {
|
||
|
|
color: #00ff00;
|
||
|
|
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
|
||
|
|
}
|
||
|
|
|
||
|
|
.target-status.inactive {
|
||
|
|
color: #ff0000;
|
||
|
|
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.darts-left {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="hud-container">
|
||
|
|
<div id="targetStatus" class="target-status inactive">TARGET</div>
|
||
|
|
<div id="dartsLeft" class="darts-left">Darts Left: 5</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.addEventListener('message', (event) => {
|
||
|
|
const action = event.data.action;
|
||
|
|
switch (action) {
|
||
|
|
case 'setOverlayStatus':
|
||
|
|
toggleOverlay(event.data.active, event.data.options);
|
||
|
|
break;
|
||
|
|
case 'setTargetStatus':
|
||
|
|
updateTargetStatus(event.data.active);
|
||
|
|
break;
|
||
|
|
case 'setDartsLeft':
|
||
|
|
updateDartsLeft(event.data.count);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
console.log(`Unknown action: ${action}`);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const toggleOverlay = (open, options = {}) => {
|
||
|
|
const overlay = document.querySelector('.hud-container');
|
||
|
|
if (open) {
|
||
|
|
overlay.style.opacity = 1;
|
||
|
|
overlay.style.pointerEvents = 'auto';
|
||
|
|
|
||
|
|
overlay.style.bottom = options?.vertical ?? '20px';
|
||
|
|
overlay.style.left = options?.horizontal ?? '50%';
|
||
|
|
} else {
|
||
|
|
overlay.style.opacity = 0;
|
||
|
|
overlay.style.pointerEvents = 'none';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
let dartsLeft = 0;
|
||
|
|
let hasTarget = false;
|
||
|
|
|
||
|
|
const targetStatusElement = document.getElementById('targetStatus');
|
||
|
|
const dartsLeftElement = document.getElementById('dartsLeft');
|
||
|
|
|
||
|
|
const updateTargetStatus = (active) => {
|
||
|
|
hasTarget = active;
|
||
|
|
if (hasTarget) {
|
||
|
|
targetStatusElement.textContent = 'TARGET';
|
||
|
|
targetStatusElement.className = 'target-status active';
|
||
|
|
} else {
|
||
|
|
targetStatusElement.textContent = 'TARGET';
|
||
|
|
targetStatusElement.className = 'target-status inactive';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const updateDartsLeft = (count) => {
|
||
|
|
dartsLeft = count;
|
||
|
|
dartsLeftElement.textContent = `Darts Left: ${dartsLeft}`;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|