You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
5.1 KiB
104 lines
5.1 KiB
2 years ago
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>commabody</title>
|
||
|
|
<link rel="stylesheet" href="/static/main.css">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer" /><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js" integrity="sha512-1/RvZTcCDEUjY/CypiMz+iqqtaoQfAITmNSJY17Myp4Ms5mdxPS5UV7iOfdZoxcGhzFbOm6sntTKJppjvuhg4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="main">
|
||
|
|
<p class="jumbo">comma body</p>
|
||
|
|
<audio id="audio" autoplay="true"></audio>
|
||
|
|
<video id="video" playsinline autoplay muted loop poster="/static/poster.png"></video>
|
||
|
|
<div id="icon-panel" class="row">
|
||
|
|
<div class="col-sm-12 col-md-6 details">
|
||
|
|
<div class="icon-sup-panel col-12">
|
||
|
|
<div class="icon-sub-panel">
|
||
|
|
<div class="icon-sub-sub-panel">
|
||
|
|
<i class="bi bi-speaker-fill pre-blob"></i>
|
||
|
|
<i class="bi bi-mic-fill pre-blob"></i>
|
||
|
|
<i class="bi bi-camera-video-fill pre-blob"></i>
|
||
|
|
</div>
|
||
|
|
<p class="small">body</p>
|
||
|
|
</div>
|
||
|
|
<div class="icon-sub-panel">
|
||
|
|
<div class="icon-sub-sub-panel">
|
||
|
|
<i class="bi bi-speaker-fill pre-blob"></i>
|
||
|
|
<i class="bi bi-mic-fill pre-blob"></i>
|
||
|
|
</div>
|
||
|
|
<p class="small">you</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-6 details">
|
||
|
|
<div class="icon-sup-panel col-12">
|
||
|
|
<div class="icon-sub-panel">
|
||
|
|
<div class="icon-sub-sub-panel">
|
||
|
|
<i id="ping-time" class="pre-blob1">-</i>
|
||
|
|
</div>
|
||
|
|
<p class="bi bi-arrow-repeat small"> ping time</p>
|
||
|
|
</div>
|
||
|
|
<div class="icon-sub-panel">
|
||
|
|
<div class="icon-sub-sub-panel">
|
||
|
|
<i id="battery" class="pre-blob1">-</i>
|
||
|
|
</div>
|
||
|
|
<p class="bi bi-battery-half small"> battery</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="icon-sub-panel">
|
||
|
|
<button type="button" id="start" class="btn btn-light btn-lg">Start</button>
|
||
|
|
<button type="button" id="stop" class="btn btn-light btn-lg">Stop</button>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
<div class="row" style="width: 100%; padding: 0px 10px 0px 10px;">
|
||
|
|
<div id="wasd" class="col-md-12 row">
|
||
|
|
<div class="col-md-6 col-sm-12" style="justify-content: center; display: flex; flex-direction: column;">
|
||
|
|
<div class="wasd-row">
|
||
|
|
<div class="keys" id="key-w">W</div>
|
||
|
|
<div id="key-val"><span id="pos-vals">0,0</span><span>x,y</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="wasd-row">
|
||
|
|
<div class="keys" id="key-a">A</div>
|
||
|
|
<div class="keys" id="key-s">S</div>
|
||
|
|
<div class="keys" id="key-d">D</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 col-sm-12 form-group plan-form">
|
||
|
|
<label for="plan-text">Plan (w, a, s, d, t)</label>
|
||
|
|
<label style="font-size: 15px;" for="plan-text">*Extremely Experimental*</label>
|
||
|
|
<textarea class="form-control" id="plan-text" rows="7" placeholder="1,0,0,0,2"></textarea>
|
||
|
|
<button type="button" id="plan-button" class="btn btn-light btn-lg">Execute</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="padding: 0px 10px 0px 10px; width: 100%;">
|
||
|
|
<div class="panel row">
|
||
|
|
<div class="col-sm-3" style="text-align: center;">
|
||
|
|
<p>Play Sounds</p>
|
||
|
|
</div>
|
||
|
|
<div class="btn-group col-sm-8">
|
||
|
|
<button type="button" id="sound-engage" class="btn btn-outline-success btn-lg sound">Engage</button>
|
||
|
|
<button type="button" id="sound-disengage" class="btn btn-outline-warning btn-lg sound">Disengage</button>
|
||
|
|
<button type="button" id="sound-error" class="btn btn-outline-danger btn-lg sound">Error</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="padding: 0px 10px 0px 10px; width: 100%;">
|
||
|
|
<div class="panel row">
|
||
|
|
<div class="col-sm-6"><canvas id="chart-ping"></canvas></div>
|
||
|
|
<div class="col-sm-6"><canvas id="chart-battery"></canvas></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="/static/js/jsmain.js" type="module"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|