<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>radar</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
</head>
<body>
<div id="canvasContainer">
<button id="showMenuBtn" onclick="toggleMenu(true)" style="display: none;">Show Menu</button>
<div id="settingsHolder">
<div class="settings">
<div>
<input type="checkbox" onclick="togglePerformanceMode()" id="performanceMode" />
<label for="performanceMode">Performance Mode</label>
</div>
<div>
<input type="checkbox" onclick="toggleZoom()" id="zoomCheck" name="zoom" />
<label for="zoomCheck">Zoom</label>
</div>
<div>
<input type="checkbox" onclick="toggleStats()" id="statsCheck" name="stats" />
<label for="statsCheck">Stats</label>
</div>
<div>
<input type="checkbox" onclick="toggleNames()" id="namesCheck" name="names" />
<label for="namesCheck">Player Names</label>
</div>
<div>
<input type="checkbox" onclick="toggleGuns()" id="gunsCheck" name="guns" />
<label for="gunsCheck">Weapons</label>
</div>
<div>
<input type="checkbox" onclick="toggleDisplayMoney()" id="moneyDisplay" name="money-display"
checked />
<label for="moneyDisplay">Display Money</label>
</div>
<div>
<input type="checkbox" onclick="toggleHealth()" id="healthCheck" name="health" checked />
<label for="healthCheck">Display Health</label>
</div>
<div>
<input type="checkbox" onclick="toggleOffscreenIndicators()" id="offscreenCheck" name="offscreen" checked />
<label for="offscreenCheck">Off-screen Indicators</label>
</div>
<div>
<input type="checkbox" onclick="toggleRotate()" id="rotateCheck" name="rotate" checked />
<label for="rotateCheck">Rotate Map</label>
</div>
<div>
<input type="checkbox" onclick="toggleCentered()" id="centerCheck" name="center" checked />
<label for="centerCheck">Player Centered</label>
<div id="zoomLevelContainer" style="margin-top: 5px; margin-left: 20px; display: none;">
<label for="zoomLevelSlider">Zoom Level: </label>
<span id="zoomLevelValue">1.0</span><br>
<input type="range" id="zoomLevelSlider" min="1.0" max="5.0" step="0.1" value="1.0"
style="width: 100%; margin: 5px 0;" oninput="updateZoomLevel(this.value)">
</div>
</div>
<div class="player-focus">
<label for="playerSelect">Focus Player:</label>
<select id="playerSelect" onchange="changePlayerFocus()">
<option value="local">YOU</option>
</select>
</div>
<div id="sizeControlsContainer"
style="margin-top: 10px; padding: 5px; border-top: 1px solid rgba(255, 255, 255, 0.2);">
<div class="size-control" style="margin-bottom: 8px;">
<label for="textSizeSlider">Text Size: </label>
<span id="textSizeValue">1.0</span><br>
<input type="range" id="textSizeSlider" min="0.1" max="2.0" step="0.1" value="1.0"
style="width: 100%; margin: 5px 0;" oninput="updateTextSize(this.value)">
</div>
<div class="size-control">
<label for="entitySizeSlider">Player Size: </label>
<span id="entitySizeValue">1.0</span><br>
<input type="range" id="entitySizeSlider" min="0.5" max="2.0" step="0.1" value="1.0"
style="width: 100%; margin: 5px 0;" oninput="updateEntitySize(this.value)">
</div>
</div>
<button id="showDangerousBtn" onclick="toggleDangerousOptions()">Show Dangerous Options</button>
<div class="dangerous-options" id="dangerousOptions">
<div>
<input type="checkbox" onclick="toggleMoneyReveal()" id="moneyReveal" name="money" />
<label for="moneyReveal">Money Reveal (Write Memory)</label>
</div>
</div>
<button id="hideMenuBtn" onclick="toggleMenu(false)">Hide Menu</button>
</div>
</div>
<canvas id="canvas"></canvas>
</div>
<script src="script.js"></script>
<script src="webstuff.js"></script>
</body>
</html>