SkyNX/SkyNX-Streamer/index.html

174 lines
6.8 KiB
HTML
Raw Normal View History

2020-04-16 00:15:44 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
2020-04-16 03:58:28 +00:00
<title>SkyNX Streamer</title>
2020-04-16 00:15:44 +00:00
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/fa-svg-with-js.css">
<link rel="stylesheet" href="css/windowStyle.css">
2020-04-16 03:58:28 +00:00
<link rel="stylesheet" href="css/styles.css">
2020-04-16 00:15:44 +00:00
</head>
<body>
<nav id="title-bar" class="rainbowBackgroundColor">
2020-04-16 03:58:28 +00:00
<img id="titleIcon" src="./img/iconTransparent.png">
<div id="title">SkyNX Streamer</div>
2020-04-16 00:15:44 +00:00
<div id="title-bar-btns">
<button id="rld-btn" class="title-bar-tools" style="display: none;"><i class="fas fa-sync-alt"></i></button>
<button id="dev-btn" class="title-bar-tools" style="display: none;"><i class="fab fa-dev"></i></button>
<button id="min-btn" class="title-bar-btns"><i class="fas fa-window-minimize"></i></button>
<button id="max-btn" class="title-bar-btns"><i class="fas fa-window-maximize"></i></button>
<button id="close-btn" class="title-bar-btns"><i class="fas fa-window-close"></i></button>
</div>
</nav>
<div id="content" class="customScroll rainbowScrollColor">
<div id="navBar" class="customScroll rainbowScrollColor">
<button id="main-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
2020-04-23 00:08:03 +00:00
title="Streamer"><i class="fas fa-desktop"></i></button>
2020-04-23 22:03:26 +00:00
<button id="stats-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
title="Stats"><i class="fas fa-chart-pie"></i></button>
<button id="settings-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
title="Settings"><i class="fas fa-cogs"></i></button>
2020-04-22 22:53:59 +00:00
<button id="console-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
title="Console"><i class="fas fa-terminal"></i></button>
2020-04-16 00:15:44 +00:00
</div>
<div id="main" class="contentArea">
2020-04-22 22:11:08 +00:00
<div class="row">
<div class="col-7">
2020-04-22 22:11:08 +00:00
<div class="form-group">
<label for="ipInput">Switch IP Address</label>
<input id="ipInput" type="text" class="form-control" placeholder="Switch IP">
</div>
<form class="form-group">
<label id="qualityLabel" for="qualitySlider">Quality: 5Mbps</label>
<input id="qualitySlider" type="range" class="custom-range" min="4" max="20" value="5" />
2020-04-22 22:11:08 +00:00
</form>
<form class="form-group">
<button id="startBtn" type="button" class="btn btn-dark btn-lg btn-block">Start Streamer</button>
</form>
</div>
<div class="col-5 sidePanel">
<div class="form-group">
<label class="switch">
<input id="disableVideo" type="checkbox">
<span class="slider round"></span>
</label>
<label class="form-check-label" for="rainbowEnabled">
Disable Video
</label>
</div>
2020-04-24 19:14:48 +00:00
<div class="form-group">
<label class="switch">
<input id="disableAudio" type="checkbox">
<span class="slider round"></span>
</label>
<label class="form-check-label" for="rainbowEnabled">
Disable Audio
</label>
</div>
<div class="form-group">
<label class="switch">
<input id="abxySwap" type="checkbox">
<span class="slider round"></span>
</label>
<label class="form-check-label" for="rainbowEnabled">
Swap A-B X-Y
</label>
</div>
2020-04-22 22:11:08 +00:00
</div>
2020-04-16 03:58:28 +00:00
</div>
2020-04-24 19:14:48 +00:00
<div id="stats" class="contentArea contentAreaScrollable customScroll" style="display: none;">
<div class="chartpanel">
<h5 class="chartTitle">FPS</h5>
<div style="width: 100%; height: 150px;">
<canvas id="fpsChart"></canvas>
</div>
2020-04-23 22:03:26 +00:00
</div>
</div>
2020-04-24 19:14:48 +00:00
<div id="settings" class="contentArea contentAreaScrollable customScroll" style="display: none;">
<hr />
<h2>General</h2>
<hr />
<div class="form-group">
<label class="switch">
<input id="autoStart" type="checkbox">
<span class="slider round"></span>
</label>
<label class="form-check-label" for="autoStart">
Start streamer automatically
</label>
</div>
<div class="form-group">
<label class="switch">
<input id="rainbowEnabled" type="checkbox">
<span class="slider round"></span>
</label>
<label class="form-check-label" for="rainbowEnabled">
Enable Rainbow Accents
</label>
2020-04-22 22:11:08 +00:00
</div>
2020-04-24 19:14:48 +00:00
<hr />
<h2>Drivers</h2>
<hr />
<form class="form-group">
<div class="row">
<div class="col">
<button id="installScpVBusBtn" type="button" class="btn btn-dark btn-block">Install Controller</button>
</div>
<div class="col">
<button id="unInstallScpVBusBtn" type="button" class="btn btn-danger btn-block">Un-Install
Controller</button>
</div>
2020-04-22 22:11:08 +00:00
</div>
2020-04-24 19:14:48 +00:00
</form>
<form class="form-group">
<div class="row">
<div class="col">
<button id="installAudioDriverBtn" type="button" class="btn btn-dark btn-block">Install Audio
Driver</button>
</div>
<div class="col">
<button id="unInstallAudioDriverBtn" type="button" class="btn btn-danger btn-block">Un-Install Audio
Driver</button>
</div>
2020-04-22 22:11:08 +00:00
</div>
2020-04-24 19:14:48 +00:00
</form>
</div>
<div id="console" class="contentArea" style="display: none;">
<div id="consoleContainer" class="customScroll"></div>
<input id="consoleInput" type="text" placeholder="Console command"><br>
</div>
</div>
2020-04-24 19:14:48 +00:00
<div id="statusbar" class="rainbowBackgroundColor2">
<span id="statusbartext">Streamer stopped.</span>
2020-04-22 22:53:59 +00:00
</div>
2020-04-24 19:14:48 +00:00
<div id="loadingCover">
<div class="centerVert">
<img src="img/loading.gif" class="loadingGif">
<h1 style="color:rgb(206, 206, 206); font-size: 16px;">
Application loading...
</h1>
</div>
2020-04-16 00:15:44 +00:00
</div>
2020-04-24 19:14:48 +00:00
<script src="js/fontawesome-all.min.js"></script>
<script src="js/Chart.min.js"></script>
<script>
let $ = require('jquery');
require('popper.js');
require('bootstrap');
$(function () {
$('[data-toggle="tooltip"]').tooltip({ boundary: 'window' })
})
</script>
<script src="./js/animations.js"></script>
<script src="./js/window.js"></script>
<script src="./js/settings.js"></script>
<script src="./js/main.js"></script>
<script src="./js/stats.js"></script>
<script src="./js/console.js"></script>
2020-04-16 00:15:44 +00:00
</body>
</html>