mirror of
https://github.com/Lapikud/Viido.git
synced 2026-03-23 13:14:19 +00:00
8e09db1e92
Made it so that the Linux audio tunnel code will wrap for better site scaling on mobile devices.
212 lines
6.3 KiB
HTML
212 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<style>
|
|
body {
|
|
margin: 40px auto;
|
|
max-width: 650px;
|
|
line-height: 1.6;
|
|
font-size: 18px;
|
|
color: #444;
|
|
padding: 0 10px;
|
|
font-family: Helvetica, Arial, Sans-Serif;
|
|
}
|
|
|
|
h1 {
|
|
text-align:center;
|
|
}
|
|
|
|
.button {
|
|
background-color: #4CAF50; /* Green */
|
|
border: none;
|
|
color: white;
|
|
padding: 16px 0;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 32px;
|
|
margin: 4px -2px;
|
|
-webkit-transition-duration: 0.4s; /* Safari */
|
|
transition-duration: 0.4s;
|
|
cursor: pointer;
|
|
width:100%;
|
|
|
|
}
|
|
.button1 {
|
|
background-color: white;
|
|
color: black;
|
|
border: 2px solid #4CAF50;
|
|
}
|
|
|
|
.button2 {
|
|
background-color: green;
|
|
color: black;
|
|
border: 2px solid #4CAF50;
|
|
width:33%
|
|
}
|
|
|
|
.radio-toolbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
user-select: none;
|
|
-webkit-user-select: none; /* Chrome all / Safari all */
|
|
-moz-user-select: none; /* Firefox all */
|
|
-ms-user-select: none; /* IE 10+ */
|
|
user-select: none; /* Likely future */
|
|
}
|
|
|
|
.radio-toolbar input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.radio-toolbar input[type="button"] {
|
|
display: none;
|
|
}
|
|
|
|
.radio-toolbar label {
|
|
background-color: white; /* RED */
|
|
border: none;
|
|
color: black;
|
|
padding: 12px 0;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 32px;
|
|
margin: 0 4px;
|
|
-webkit-transition-duration: 0.4s; /* Safari */
|
|
transition-duration: 0.4s;
|
|
cursor: pointer;
|
|
flex: 1 0 auto;
|
|
border: 2px solid #4CAF50;
|
|
user-select: none;
|
|
}
|
|
|
|
.rbnt{
|
|
width: 30%;
|
|
transition-duration: 0s;
|
|
}
|
|
|
|
.rbnt:active{
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
.radio-toolbar lable.red {
|
|
border: 2px solid #af4c4c;
|
|
}
|
|
|
|
.radio-toolbar input[type="radio"]:checked+label {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.radio-toolbar input[type="radio"]:checked+label.red {
|
|
background-color: #af4c4c;
|
|
color: white;
|
|
border: 2px solid #af4c4c;
|
|
}
|
|
|
|
.button1:hover {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
margin-top: 2em;
|
|
}
|
|
|
|
#loading
|
|
{
|
|
visibility: hidden;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("loader.gif"), url("bg.png");
|
|
background-position: center center, top;
|
|
background-repeat: no-repeat, repeat;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
|
|
|
<script>
|
|
$(function()
|
|
{
|
|
|
|
$(".radio-toolbar input[type=radio]").change(function()
|
|
{
|
|
$("#loading").css("visibility", "visible");
|
|
|
|
$.post("/projektor/status", {mode: $(this).val()}, function(data)
|
|
{
|
|
$("#loading").css("visibility", "hidden");
|
|
});
|
|
});
|
|
$(".radio-toolbar input[type=button]").click(function()
|
|
{
|
|
$.post("/projektor/status", {mode: $(this).val()}, function(data)
|
|
{
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Viido</h1>
|
|
|
|
<a href="iris" class="button button1">Mopidy music</a><br />
|
|
<a href="vnc" class="button button1">VNC remote desktop</a><br />
|
|
|
|
<h2 class="title">Projektori juhtimine</h2>
|
|
|
|
<div class="radio-toolbar">
|
|
<input type="radio" id="radio1" name="radios" value="off" class="red">
|
|
<label for="radio1" class="red">OFF</label>
|
|
|
|
<input type="radio" id="radio2" name="radios" value="on">
|
|
<label for="radio2">ON</label>
|
|
</div>
|
|
<h2 class="title">Sisendi juhtimine</h2>
|
|
|
|
<div class="radio-toolbar">
|
|
|
|
<input type="radio" id="r2" name="receiver" value="viido">
|
|
<label class="rbnt" for="r2">Viido</label>
|
|
|
|
<input type="radio" id="r3" name="receiver" value="steam">
|
|
<label class="rbnt" for="r3">Steam</label>
|
|
|
|
<input type="button" id="v1" name="receiver" value="volumeup">
|
|
<label class="rbnt" for="v1">Vol +</label>
|
|
|
|
</div>
|
|
<br>
|
|
<div class="radio-toolbar">
|
|
<input type="radio" id="r4" name="receiver" value="hdmi">
|
|
<label class="rbnt" for="r4">HDMI</label>
|
|
|
|
<input type="radio" id="r5" name="receiver" value="aux">
|
|
<label class="rbnt" for="r5">AUX</label>
|
|
|
|
<input type="button" id="v2" name="receiver" value="volumedown">
|
|
<label class="rbnt" for="v2">Vol -</label>
|
|
</div>
|
|
<h2 class="title">Linux audio tunnel</h2>
|
|
<code>
|
|
pacmd load-module module-tunnel-sink-new server=viido
|
|
PULSE_SERVER=viido pavucontrol &
|
|
pavucontrol &
|
|
</code>
|
|
|
|
<div id="loading"></div>
|
|
</body>
|
|
</html>
|