mirror of https://github.com/Lapikud/Viido.git
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.
211 lines
6.3 KiB
211 lines
6.3 KiB
<!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>
|
|
|