Compare commits

...

12 Commits

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

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>

File diff suppressed because it is too large Load Diff

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;
}