lapikud
/
Viido
mirror of https://github.com/Lapikud/Viido.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Cleanup, fix code, modernize, reformat, dark mode

Browse Source
pull/6/head
Pearu Vaalma 3 years ago
parent ffae9ffe4c
commit f571d3543b
Signed by: pvx
GPG Key ID: 259BA0611AE97CEF
1 changed files with 155 additions and 190 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 345
      www/index.html

345
www/index.html
Unescape View File

@ -1,202 +1,167 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
<html lang="et">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Viido</title>
<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;
}
button {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.6;
}
h1 {
text-align: center;
}
a:any-link {
color: black;
}
.button-grid {
display: grid;
grid-auto-columns: 1fr;
gap: 8px;
user-select: none;
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
}
.button-grid :nth-child(2) {
grid-column: 2;
}
.button-grid :nth-child(3) {
grid-column: 3;
}
.button-grid * {
background-color: transparent;
padding: 12px 0;
text-align: center;
text-decoration: none;
font-size: 32px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
border: 2px solid #4CAF50;
user-select: none;
}
.button-grid *:hover {
background-color: #4CAF50;
color: white;
}
.button-grid *.red {
border: 2px solid #af4c4c;
}
.button-grid *.red:hover {
background-color: #af4c4c;
}
.title {
text-align: center;
margin-top: 2em;
}
#loading {
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
background-image: url("loader.gif");
background-color: rgba(102, 102, 102, 0.75);
background-position: center center, top;
background-repeat: no-repeat, repeat;
top: 0;
left: 0;
}
@media screen and (prefers-color-scheme: dark) {
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="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;
}
.button1:hover {
background-color: #4CAF50;
color: white;
background-color: #111;
color: #BBB;
}
.title {
text-align: center;
margin-top: 2em;
button {
color: #BBB;
}
#loading
{
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
background-image: url("loader.gif");
background-color: rgba(102, 102, 102, 0.75);
background-position: center center, top;
background-repeat: no-repeat, repeat;
top: 0;
left: 0;
a:any-link {
color: #BBB;
}
</style>
}
</style>
<script>
function show_loading(visible)
{
document.getElementById('loading').style.visibility = visible ? 'visible' : 'hidden';
}
<script>
function show_loading(visible) {
document.getElementById('loading').style.visibility = visible ? 'visible' : 'hidden';
}
function send_mode(value)
{
show_loading(true);
var http = new XMLHttpRequest();
http.open('POST', '/projektor/status', true);
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
show_loading(false);
}
function send_mode(value) {
show_loading(true);
const http = new XMLHttpRequest();
http.open('POST', '/projektor/status', true);
http.onreadystatechange = function () {
if (http.readyState === 4 && http.status === 200) {
show_loading(false);
}
http.send('mode=' + value);
}
</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="button" id="power1" name="power" value="off">
<label for="power1" class="red">OFF</label>
<input type="button" id="power2" name="power" value="on">
<label for="power2">ON</label>
</div>
<h2 class="title">Sisendi juhtimine</h2>
<div class="radio-toolbar">
<input type="button" id="r2" name="receiver" value="viido">
<label class="rbnt" for="r2">Viido</label>
<input type="button" 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="button" id="r4" name="receiver" value="hdmi">
<label class="rbnt" for="r4">HDMI</label>
<input type="button" 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>
<script type="text/javascript">
var modebuttons = document.querySelectorAll('.radio-toolbar input');
for (var i = 0; i < modebuttons.length; i++)
{
modebuttons[i].addEventListener('click', function(event) {
send_mode(event.target.value);
});
}
</script>
</body>
http.send('mode=' + value);
}
</script>
</head>
<body>
<h1>Viido</h1>
<div class="button-grid">
<a class="button" href="vnc">VNC remote desktop</a>
</div>
<h2 class="title">Projektori juhtimine</h2>
<div class="button-grid">
<button class="red" name="projektor" value="off">OFF</button>
<button name="projektor" value="on">ON</button>
</div>
<h2 class="title">Sisendi juhtimine</h2>
<div class="button-grid">
<button name="projektor" value="viido">Viido</button>
<button name="projektor" value="steam">Steam</button>
<button name="projektor" value="volumeup">Vol +</button>
<button name="projektor" value="hdmi">HDMI</button>
<button name="projektor" value="aux">AUX</button>
<button name="projektor" value="volumedown">Vol -</button>
</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>
<script type="text/javascript">
const modeButtons = document.querySelectorAll('button[name="projektor"]');
for (let i = 0; i < modeButtons.length; i++) {
modeButtons[i].addEventListener('click', function (event) {
send_mode(event.target.value);
});
}
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save