SkyNX/SkyNX-Streamer/index.html
2020-04-22 16:53:59 -06:00

131 lines
No EOL
5.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SkyNX Streamer</title>
<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">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav id="title-bar" class="rainbowBackgroundColor">
<img id="titleIcon" src="./img/iconTransparent.png">
<div id="title">SkyNX Streamer</div>
<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"
title="Plugins"><i class="fas fa-desktop"></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>
<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>
</div>
<div id="main" class="contentArea">
<div class="row">
<div class="col-8">
<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="1" max="80" value="5" />
</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-4 sidePanel">
<label>More Settings coming soon..</label>
</div>
</div>
</div>
<div id="settings" class="contentArea contentAreaScrollable customScroll" style="display: none;">
<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>
</div>
<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>
</div>
</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>
</div>
</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>
<div id="statusbar" class="rainbowBackgroundColor2">
<span id="statusbartext">Ready!</span>
</div>
<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>
</div>
<script src="js/fontawesome-all.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/main.js"></script>
<script src="./js/settings.js"></script>
<script src="./js/console.js"></script>
</body>
</html>