kieran-mcauliffe/healing-soundscapes
2
0
Fork 1
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: kieran-mcauliffe:44e19558c161dcb382883db67453deab80a25b10
Branches Tags
kieran-mcauliffe:main
kieran-mcauliffe:patch-1
kieran-mcauliffe:private-waiting-room-snapshot
kieran-mcauliffe:modenum
kieran-mcauliffe:daemon-service
kieran-mcauliffe:greg-dev
...
compare: kieran-mcauliffe:7a93a87ceef60208f1b1e77ca455bb52e4dad9b2
Branches Tags
kieran-mcauliffe:main
kieran-mcauliffe:patch-1
kieran-mcauliffe:private-waiting-room-snapshot
kieran-mcauliffe:modenum
kieran-mcauliffe:daemon-service
kieran-mcauliffe:greg-dev

12 Commits
44e19558c1 ... 7a93a87cee

Author SHA1 Message Date
Eveline-97
7a93a87cee Merge branch 'main' into ui-design 
Merge ui design with new changes in main branch
 2025-04-10 16:03:24 +02:00
Eveline-97
2c869d925f remove title test 2025-04-10 14:57:58 +02:00
Eveline-97
0a41cfe17f merge conflicts djster webcontrol 2025-04-10 14:47:55 +02:00
Eveline-97
892da17531 add html template that loads css file 2025-04-08 14:30:32 +02:00
Eveline-97
76bef9f32a appearance 2025-04-08 14:18:55 +02:00
Eveline-97
1cf194acce max-width for navigations 2025-04-08 14:08:34 +02:00
Eveline-97
ba3492d78f active and hover interaction + colours system buttons and selector options, recommit 2025-04-08 13:06:10 +02:00
Eveline-97
6caae03759 navigation right width 2025-03-24 16:36:50 +01:00
Eveline-97
b1d1eb802c slider front colour 2025-03-24 16:23:15 +01:00
Eveline-97
729a471294 duplicate styling to css file, comment out in js 2025-03-24 14:29:51 +01:00
Eveline-97
cd22739e4a background 100 vw and vh 2025-03-23 15:53:22 +01:00
Eveline-97
3acb9f442c navigation bars 2025-03-23 15:31:11 +01:00
3 changed files with 1002 additions and 626 deletions
Show Stats Expand all files Collapse all files

62
index.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- our stylesheet -->
<link rel="stylesheet" href="lib/drawsocket-defaults.css">
<!-- HSS -->
<link rel="stylesheet" href="./ui-style.css">
<!-- library dependencies -->
<script src="scripts/d3-selection/dist/d3-selection.min.js"></script>
<script src="scripts/pdfjs-dist/build/pdf.js"></script>
<script src="scripts/tone/build/Tone.js"></script>
<!--
<script src="scripts/startaudiocontext/StartAudioContext.js"></script>
-->
<script src="scripts/timesync/dist/timesync.js"></script>
<script src="scripts/gsap/dist/gsap.min.js"></script>
<script src="scripts/svg-points/dist/svg-points.min.js"></script>
<script src="lib/verovio-toolkit.js" ></script>
</head>
<body>
<!--main html setup -->
<div class="log" id="log"></div>
<div id="touchdiv"></div>
<!--main main main setup -->
<div id="main-div" >
<div id="main-html" ></div>
<svg id="svg"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs id="defs"></defs>
<g id="main-svg"></g>
</svg>
</div>
<div id="forms" ></div>
<div id="loading">
<p>synchronizing...</p>
</div>
<!-- our scripts -->
<script src="lib/drawsocket-client.js"></script>
</body>
</html>

189
javascript/djster_webcontrol.js
View File

@ -97,6 +97,8 @@ var html = {
"val" : body
}]
};
/*
css.push({
"selector": ".menu",
"props": {
@ -164,23 +166,51 @@ css.push({
"background": active
}
});
//css navigation bars
css.push({
"selector": "#nav, #navPlayers",
"props": {
"z-index": "99",
"display": "flex !important",
"flex-flow": "row nowrap",
"position": "relative"
}
});
*/
//add css sheet to html
elements.push({
"new": "link",
"parent": "log",
"rel": "stylesheet",
"href": "ui-style.css" //href is not working for some reason?
});
//currently, the file is added by having changed the drawsocket-page.html with the following:
/*
<!-- HSS -->
<link rel="stylesheet" href="../../../../../Library/healing-soundscapes/ui-style.css">
*/
svg.push({
"new": "rect",
"id": "background",
"x": 0,
"y": 0,
"width" : "400px",//viewport width of iphone 8; iPhone 5: 320px
"height" : "667px",//viewport height of iphone 8; iPhone 5: 568px
"fill" : background,
"width": "100vw",//viewport width of iPad mini: 1133px; iphone 8: 400px; iPhone 5: 320px
"height": "100vh",//viewport height of iPad mini: 744px; iphone 8: 667px; iPhone 5: 568px
"fill": background
});
//elements = [];
addButton("forms", "basic", "Basic Mode", "color:" + active, "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + active + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("forms", "expert", "Expert Mode", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='block';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + active + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("forms", "room", "Room Settings", "width:24vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='block';document.getElementById('spat').style.display='block';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + active + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("forms", "system", "System", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='block';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['bcolor']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + active + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("forms", "manual", "Manual", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='block';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + active + "';");
//nav for buttons
addDiv("forms", "nav", "display: block");
//add buttons to navigation instead of to #forms directly
addButton("nav", "basic", "Basic Mode", "color:" + active, "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + active + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("nav", "expert", "Expert Mode", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='block';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + active + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("nav", "room", "Room Settings", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='block';document.getElementById('spat').style.display='block';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + active + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("nav", "system", "System", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='block';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['bcolor']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + active + "';document.getElementById('manual').style['color']='" + nonactive + "';");
addButton("nav", "manual", "Manual", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='block';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + active + "';");
addDiv("forms", "basicDIV", "display:block");
addDiv("forms", "expertDIV", "display:none");
@ -208,11 +238,14 @@ svg.push({
});
*/
addButton("expertDIV", "p0", "Player 1", "width:24.9vw;color:" + active, "document.getElementById('p0').style['color']='" + active + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='block';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
addButton("expertDIV", "p1", "Player 2", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + active + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='block';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
addButton("expertDIV", "p2", "Player 3", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + active + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='block';document.getElementById('player3').style.display='none';");
addButton("expertDIV", "p3", "Player 4", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + active + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='block';");
//navPlayers nav bar for player selectors
addDiv("expertDIV", "navPlayers", "display:block");
//add buttons to navPlayers instead of to expertDIV directly
addButton()
addButton("navPlayers", "p0", "Player 1", "width:24.9vw;color:" + active, "document.getElementById('p0').style['color']='" + active + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='block';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
addButton("navPlayers", "p1", "Player 2", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + active + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='block';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
addButton("navPlayers", "p2", "Player 3", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + active + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='block';document.getElementById('player3').style.display='none';");
addButton("navPlayers", "p3", "Player 4", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + active + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='block';");
addMenu(-1, "basicDIV", "Piece", "piece", 36, 0, pieces, "wide");
addMenu(-1, "basicDIV", "Playing Mode", "mode", 76, 0, modes, "wide");
@ -266,12 +299,12 @@ svg.push({
"new": "h2",
"parent": "systemDIV",
"id": "updateheader",
"text" : "Updates",
"text": "Updates"/*,
"style": {
"left": "10px",
"font-family": "Arial",
"margin-left": "10px"
}
}*/
});
elements.push(
@ -279,17 +312,65 @@ svg.push({
"new": "p",
"parent": "systemDIV",
"id": "update",
"text" : "Check for a new software version. This requires an active Internet connection. Please refer to manual for further instructions.",
"text": "Check for a new software version. This requires an active Internet connection. Please refer to manual for further instructions."//,
/*"style": {
"left": "10px",
"font-family": "Arial",
"font-size": 12,
"margin-left": "10px"
}*/
});
addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;margin-left:125px;", "none");
elements.push(
{
"new": "h2",
"parent": "systemDIV",
"id": "shutdownheader",
"text": "Shut Down"/*,
"style": {
"left": "10px",
"font-family": "Arial",
"margin-left": "10px"
}*/
});
elements.push(
{
"new": "p",
"parent": "systemDIV",
"id": "shutdown",
"text": "Shutting the system down, will require you to unplug and replug the speakers before they can be operated again."/*,
"style": {
"left": "10px",
"font-family": "Arial",
"font-size": 12,
"margin-left": "10px"
}
}*/
});
addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;background-color:" + nonactive + ";margin-left:125px;", "none");
addButton("systemDIV", "cancelbutton", "Cancel", "margin-left:20vw;", "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['background-color']='" + active + "';document.getElementById('expert').style['background-color']='" + nonactive + "';document.getElementById('room').style['background-color']='" + nonactive + "';document.getElementById('system').style['background-color']='" + nonactive + "';document.getElementById('manual').style['background-color']='" + nonactive + "';");
addButton("systemDIV", "proceedbutton", "Shut Down", "background-color:" + alert + ";margin-left:15vw;", "drawsocket.send({system: {shutdown : true}})");
elements.push(
{
"new": "iframe",
"parent": "manualDIV",
"id": "manualdoc",
"style": {
/*"position": "absolute",
"top": "0px",
"left": "0px",*/
"width": "100vw",
"height": "100vh"
},
"src": "public/manual.html"
});
dict.parse(JSON.stringify(html));
outlet(0, "dictionary", dict.name);
outlet(1, "done");
elements.push(
{
"new" : "h2",
@ -368,8 +449,7 @@ svg.push({
outlet(1, "done");
}
function addDiv(parent, id, style)
{
function addDiv(parent, id, style) {
var obj = {
"parent": parent,
"new": "div",
@ -385,8 +465,7 @@ function addDiv(parent, id, style)
elements.push(obj);
}
function addButton(parent, id, text, style, onclick)
{
function addButton(parent, id, text, style, onclick) {
var obj = {
"parent": parent,
"id": id,
@ -406,8 +485,7 @@ function addButton(parent, id, text, style, onclick)
elements.push(obj);
}
function addSlider(index, parent, name, id, position, range, step, value, _out, _in)
{
function addSlider(index, parent, name, id, position, range, step, value, _out, _in) {
switch (id) {
case "tonic_pitch":
case "pitch_center":
@ -422,13 +500,13 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"id": id + "-label" + "_" + index,
"text": name + ":",
"style": {
"position" : "absolute",
//"position": "absolute",
"top": (offset - 1 + position * 30) + "px",
"left": "10px",
"width": "160px",
"font-family" : "Arial",
/*"font-family": "Arial",
"font-size": 10,
"color" : textcolor
"color": textcolor*/
}
},
{
@ -441,11 +519,11 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"value": value,
"disabled": true,
"style": {
"position" : "absolute",
//"position": "absolute",
"top": (offset + position * 30) + "px",
"left": "320px",
"width": "30px",
"color" : textcolor
//"color": textcolor
}
},
{
@ -460,10 +538,10 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"value": value,
"step": step,
"style": {
"position" : "absolute",
//"position": "absolute",
"top": (offset + 5 + position * 30) + "px",
"left" : "135px",
"width" : "170px"
/*"left": "135px",
"width": "170px"*/
},
"oninput": "[drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": " + _in + "}}), drawsocket.input({ key : 'html', val : { id : '" + id + "_num" + "_" + index + "', value : " + _out + "}})]"
}];
@ -480,8 +558,7 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
body.push(obj2);
}
function addMenu(index, parent, name, id, position, value, array, type)
{
function addMenu(index, parent, name, id, position, value, array, type) {
var width = (type == "wide") ? 180 : 90;
child = [];
for (var i = 0; i < array.length; i++) {
@ -513,13 +590,13 @@ function addMenu(index, parent, name, id, position, value, array, type)
"id": id + "-label" + "_" + index,
"text": name + ":",
"style": {
"position" : "absolute",
//"position": "absolute",
"top": position + "px",
"left": "10px",
"width": "120px",
"font-family" : "Arial",
/*"font-family": "Arial",
"font-size": 10,
"color" : textcolor
"color": textcolor*/
}
}
, {
@ -549,8 +626,7 @@ function addMenu(index, parent, name, id, position, value, array, type)
body.push(obj2);
}
function addCheckbox(index, parent, name, id, position, checked, type)
{
function addCheckbox(index, parent, name, id, position, checked, type) {
var left = (type == "left") ? 10 : 252;
var leftoffset = (type == "left") ? 128 : 85;
checkboxes[index + 1][id].name = name;
@ -563,13 +639,13 @@ function addCheckbox(index, parent, name, id, position, checked, type)
"id": id + "-label" + "_" + index,
"text": name + ":",
"style": {
"position" : "absolute",
//"position": "absolute",
"top": position + "px",
"left": left + "px",
"width": "80px",
"font-family" : "Arial",
/*"font-family": "Arial",
"font-size": 10,
"color" : textcolor
"color": textcolor*/
}
},
{
@ -581,12 +657,12 @@ function addCheckbox(index, parent, name, id, position, checked, type)
"name": id + "_" + index,
"value": checked,
"style": {
"position" : "absolute",
//"position": "absolute",
"top": position - 2 + "px",
"left": left + leftoffset + "px",
"border" : "none",
/*"border": "none",
"width": "20px",
"height" : "20px"
"height": "20px"*/
},
"oninput": "drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.checked}})"
}];
@ -594,8 +670,7 @@ function addCheckbox(index, parent, name, id, position, checked, type)
elements.push(obj[1]);
}
function addText(index, parent, name, id, position, type)
{
function addText(index, parent, name, id, position, type) {
var width = (type == "wide") ? 180 : 90;
var obj = [{
"parent": parent,
@ -604,13 +679,13 @@ function addText(index, parent, name, id, position, type)
"id": id + "-label" + "_" + index,
"text": name + ":",
"style": {
"position" : "absolute",
//"position": "absolute",
"top": position + "px",
"left": "10px",
"width": "120px",
"font-family" : "Arial",
/*"font-family": "Arial",
"font-size": 10,
"color" : textcolor
"color": textcolor*/
}
},
{
@ -623,11 +698,11 @@ function addText(index, parent, name, id, position, type)
"size": 10,
"onkeydown": "if( event.key == 'Enter' ){drawsocket.send( {" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.value}} );}",
"style": {
"position" : "absolute",
//"position": "absolute",
"top": position - 1 + "px",
"left": "139px",
"width": width - 11 + "px",
"color" : textcolor
//"color": textcolor
}
}];
var obj2 = {
@ -640,8 +715,7 @@ function addText(index, parent, name, id, position, type)
body.push(obj2);
}
function createSpatBox()
{
function createSpatBox() {
svg.push({
"parent": "defs",
"new": "path",
@ -654,7 +728,6 @@ function createSpatBox()
"parent": "main-svg",
"new": "g",
"id": "spat",
//"display" : "none",
"display": "none",
"transform": "matrix(1,0,0,1,0,50)",
"child": [
@ -729,7 +802,8 @@ function createSpatBox()
"r": 12.5,
"fill": "tomato"
}
]});
]
});
}
/*
@ -759,8 +833,7 @@ function createSpatBox()
</svg>
*/
function dictionary()
{
function dictionary() {
var d = new Dict;
d.name = p[1];
var obj = {};

241
ui-style.css Normal file
View File

@ -0,0 +1,241 @@
:root {
--background: ivory;
--active: royalblue;
--nonactive: lightsteelblue;
--alert: red;
--textcolor: #737373;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
html {
background-color: var(--background);
}
body {
font-family: "Poppins", sans-serif;
}
p,
label,
input[type=text] {
font-size: 13px;
background-color: var(--background);
}
h1 {
font-size: 15px;
font-weight: 400;
color: var(--active);
position: relative;
width: fit-content;
margin: 0.3em auto;
}
/*navigation*/
#nav,
#navPlayers {
z-index: 99;
display: flex !important;
flex-flow: row nowrap;
justify-content: space-around;
position: relative;
width: 100vw;
max-width: 800px;
margin: 0 auto;
}
#navPlayers>button {
/*width: 24.9vw;*/
color: var(--nonactive);
}
#navPlayers>button:active {
color: var(--active);
}
/*centers navigations*/
/*
#forms, #expertDIV {
width: 100%;
margin: 0 auto;
}
*/
.menu {
background-color: var(--background);
border: 1px solid var(--active);
color: var(--active);
text-align: left;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
height: 20px;
}
.menu option {
background-color: var(--background);
color: var(--active);
}
.but {
background-color: var(--background);
border: 1px solid + var(--active);
color: var(--active);
padding: 4px 4px;
text-align: center;
display: inline-block;
font-size: 11px;
margin: 4px 4px;
width: 20vw;
border: solid 1px var(--textcolor);
border-radius: 25px;
}
.but:hover,
.but:active {
background-color: var(--nonactive);
color: var(--active) !important;
}
.toggle {
background-color: var(--background);
border: 1px solid + var(--active);
color: var(--active);
padding: 4px 7.8px;
margin: 4px 0px;
}
.slider {
appearance: none;
-webkit-appearance: none;
height: 6px;
border-radius: 6px;
background-color: #9b9b9b;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
position: absolute;
left: 135px;
width: 170px;
overflow: hidden;
}
.slider:hover,
.slider:active {
opacity: 1;
}
/*slider knob*/
.slider::-webkit-slider-runnable-track {
-webkit-appearance: none;
color: var(--active);
margin-top: -1px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--active);
box-shadow: -80px 0 0 80px var(--active);
}
.slider::-moz-range-progress {
background-color: var(--active);
}
label {
position: absolute;
color: var(--textcolor);
}
input[type=text] {
position: absolute;
color: var(--active);
border: 1px solid var(--active);
}
input[type=text]:hover:not([disabled]),
input[type=checkbox]:hover,
.menu:hover,
.menu:active,
.option:hover,
.option:active {
background-color: var(--nonactive);
color: var(--active) !important;
}
input[type=checkbox] {
position: absolute;
border: none;
background-color: var(--background);
text-align: center;
display: table-cell;
vertical-align: middle;
width: 20px !important;
height: 20px !important;
appearance: none;
border-radius: 10%;
box-shadow: none;
font-size: 1em;
border: 1px solid var(--active);
}
input[type='checkbox']:checked {
background-color: var(--active);
}
input[type='checkbox']:checked:after {
content: '\2713';
color: var(--background);
}
#oph_-1 {
width: 174px !important;
}
/*System page*/
#proceedbutton {
background-color: var(--background) !important;
color: red !important;
border: 1px solid red;
}
#proceedbutton:hover,
#proceedbutton:active {
background-color: red !important;
color: white !important;
}
#versionbutton,
#cancelbutton {
background-color: var(--background) !important;
}
#updateheader,
#shutdownheader {
left: 10px;
font-family: Arial;
margin-left: 10px;
}
#update,
#shutdown {
left: 10px;
font-family: Arial;
font-size: 12;
margin-left: 10px;
}
iframe #manualdoc {
position: absolute;
top: 0px;
left: 0px;
}