110 lines
5.8 KiB
HTML
110 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Drone HUD Overlay</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body style="display: none">
|
|
<div class="hud-container">
|
|
<!-- Top Left - Flight Data -->
|
|
<div class="data-panel absolute top-left" component-flightdata>
|
|
<div class="panel-row">
|
|
<div>
|
|
<div class="data-label">ALTITUDE</div>
|
|
<div class="data-value"><span value-height>0</span><span class="unit">m</span></div>
|
|
</div>
|
|
<div>
|
|
<div class="data-label">DISTANCE</div>
|
|
<div class="data-value"><span value-distance>0</span><span class="unit">m</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-row">
|
|
<div>
|
|
<div class="data-label">HORIZONTAL</div>
|
|
<div class="data-value"><span value-hspeed>0</span><span class="unit speed-unit">km/h</span></div>
|
|
</div>
|
|
<div>
|
|
<div class="data-label">VERTICAL</div>
|
|
<div class="data-value"><span value-vspeed>0</span><span class="unit speed-unit">km/h</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Center - Compass -->
|
|
<div class="compass-wrapper absolute bottom-right" component-compass>
|
|
<div class="compass">
|
|
<div class="compass-arrow" style="transform: translate(calc(-50% + 15px), -50%) rotate(0deg)"></div>
|
|
|
|
<div class="compass-label" style="top: 15px; left: 50%">N</div>
|
|
<div class="compass-label" style="top: 50%; left: calc(100% - 15px)">E</div>
|
|
<div class="compass-label" style="top: calc(100% - 15px); left: 50%">S</div>
|
|
<div class="compass-label" style="top: 50%; left: 15px">W</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Right - Status -->
|
|
<div class="data-panel absolute top-right" component-status>
|
|
<div class="panel-row">
|
|
<div>
|
|
<div class="data-label">BATTERY</div>
|
|
<div class="data-value battery-high" id="battery"><span value-battery>100</span><span class="unit">%</span></div>
|
|
</div>
|
|
<div>
|
|
<div class="data-label">SIGNAL</div>
|
|
<div class="data-value signal-high"><span value-range>100</span><span class="unit">%</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="data-label">COORDINATES</div>
|
|
<div class="data-value" value-coords>0, 0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Center - Controls -->
|
|
<div class="button-row absolute bottom-center">
|
|
<button tabindex="-1" class="btn btn-secondary" id="instructions-btn" component-instructions><i class="fas fa-info-circle mr"></i> Instructions</button>
|
|
<button tabindex="-1" class="btn btn-primary" id="button-screenshot" component-screenshot><i class="fas fa-camera mr"></i> Take photo</button>
|
|
<button tabindex="-1" class="btn btn-secondary" id="button-effect" component-nightvision><i class="fas fa-moon mr"></i> Nightvision</button>
|
|
<button tabindex="-1" class="btn btn-danger" id="button-power"><i class="fas fa-power-off mr"></i> Turn Off</button>
|
|
</div>
|
|
|
|
<!-- Instructions Overlay -->
|
|
<div class="instructions-overlay" id="instructions-overlay">
|
|
<div class="instructions-content">
|
|
<div class="close-btn" id="close-instructions">
|
|
<i class="fas fa-times close-icon"></i>
|
|
</div>
|
|
<h2 class="title">Drone Controls</h2>
|
|
|
|
<div class="instructions-grid">
|
|
<div>
|
|
<h3 class="section-heading">Controls</h3>
|
|
<ul class="instruction-list">
|
|
<li><span class="key">W</span> Move Forward</li>
|
|
<li><span class="key">S</span> Move Backward</li>
|
|
<li><span class="key">A</span> Move Left</li>
|
|
<li><span class="key">D</span> Move Right</li>
|
|
<li><span class="key">Q</span> Rotate Left</li>
|
|
<li><span class="key">E</span> Rotate Right</li>
|
|
<li><span class="key">Shift</span> Ascend</li>
|
|
<li><span class="key">Ctrl</span> Descend</li>
|
|
<li><span class="key">Space</span> Camera Zoom</li>
|
|
<li><span class="key">↑</span> Camera Up</li>
|
|
<li><span class="key">↓</span> Camera Down</li>
|
|
<li><span class="key">H</span> Toggle HUD</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|