numerous improvements

This commit is contained in:
Ross
2021-12-12 17:43:40 +00:00
parent 2c68cc164c
commit 07959cb0a8
4 changed files with 817 additions and 542 deletions
+70 -16
View File
@@ -1,18 +1,67 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
@@ -27,7 +76,8 @@ body {
background: white;
}
ol, ul {
ol,
ul {
list-style: none;
}
@@ -36,17 +86,21 @@ table {
border-spacing: 0;
}
caption, th, td {
caption,
th,
td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote, q {
quotes: "" "";
blockquote,
q {
quotes: """";
}
+211 -146
View File
@@ -17,7 +17,6 @@
appearance: none;
font-family: "Noto Sans", sans-serif !important;
font-weight: 400;
font-size: 1.6rem;
text-rendering: optimizeLegibility;
line-height: 1.5;
}
@@ -49,7 +48,12 @@ html {
font-size: 62.5%;
}
html, body, input:not([type=text]), button, select, option {
html,
body,
input:not([type=text]),
button,
select,
option {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
@@ -57,11 +61,18 @@ html, body, input:not([type=text]), button, select, option {
-o-user-select: none;
}
html, body, input, button, select, option, textarea {
vertical-align:top;
html,
body,
input,
button,
select,
option,
textarea {
vertical-align: top;
margin: 0;
padding: 0;
color: black; /*#1d3850;*/
color: black;
/*#1d3850;*/
/*font-family: 'Noto Sans', sans-serif;*/
overflow: hidden;
}
@@ -72,7 +83,11 @@ body {
font-weight: 400;
}
input, button, select, option, textarea {
input,
button,
select,
option,
textarea {
background-color: white;
font-size: 100%;
padding: 0.4rem 0.8rem;
@@ -529,7 +544,7 @@ img {
width: 100vw;
height: 100vh;
overflow: auto;
background-color: rgba(0,0,0,0.4);
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
}
@@ -606,7 +621,7 @@ img {
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.9);
background-color: rgba(0, 0, 0, 0.9);
z-index: 2;
cursor: pointer;
color: lightgray;
@@ -652,7 +667,8 @@ img {
opacity: 1;
}
.close:before, .close:after {
.close:before,
.close:after {
position: absolute;
left: 15px;
content: ' ';
@@ -796,7 +812,7 @@ select option:disabled {
}
.feedback {
padding-top: 0.8rem;
padding-top: 0.8rem;
}
#options-panel {
@@ -816,43 +832,60 @@ select option:disabled {
padding-top: 20px;
}
.packet-button {
display:inline-block;
padding:0.35em 1.2em;
border:0.1em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
.login-button {
display: inline-block;
padding: 0.35em 1.2em;
border: 0.1em solid purple;
margin: 0 0.3em 0.3em 0;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:300;
color:#FFFFFF;
text-align:center;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: rgb(201, 0, 201);
text-align: center;
transition: all 0.2s;
background-color: black;
}
.packet-button {
display: inline-block;
padding: 0.35em 1.2em;
border: 0.1em solid #FFFFFF;
margin: 0 0.3em 0.3em 0;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #FFFFFF;
text-align: center;
transition: all 0.2s;
}
.packet-button.cached:after{
content: "cached";
width: 12px;
height: 12px;
color: gray;
border-radius: 50%;
position:relative;
transform: translate(15px, 5.5px) rotate(270deg);
display: inline-block;
right: 0;
font-size: 8px;
.packet-button.cached:after {
content: "cached";
width: 12px;
height: 12px;
color: gray;
border-radius: 50%;
position: relative;
transform: translate(15px, 5.5px) rotate(270deg);
display: inline-block;
right: 0;
font-size: 8px;
}
.packet-button.out-of-date{
color: darkslategray
.packet-button.out-of-date {
color: darkslategray
}
.save-button {
display:inline-block;
display: inline-block;
margin-left: 10px;
color:#FFFFFF;
border-bottom:2px solid transparent;
color: #FFFFFF;
border-bottom: 2px solid transparent;
}
.save-button a {
@@ -861,27 +894,27 @@ select option:disabled {
.save-button:hover {
color: #311B92;
border-bottom:2px solid #311B92;
border-bottom: 2px solid #311B92;
}
.packet-button:hover{
color:lightblue;
border-color:blue;
.packet-button:hover {
color: lightblue;
border-color: blue;
}
.progress-block {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: smaller;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: smaller;
}
#timer {
/* left: 50%; */
margin: auto;
margin-right: 1em;
opacity: 25%;
/* left: 50%; */
margin: auto;
margin-right: 1em;
opacity: 25%;
}
#timer:hover:before {
@@ -889,69 +922,97 @@ select option:disabled {
}
.sk-cube-grid {
width: 60px;
height: 60px;
width: 60px;
height: 60px;
}
.sk-cube-grid .sk-cube {
width: 33%;
height: 33%;
background-color: #4527A0;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
width: 33%;
height: 33%;
background-color: #4527A0;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube3 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.sk-cube-grid .sk-cube4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube7 {
-webkit-animation-delay: 0s;
animation-delay: 0s; }
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.sk-cube-grid .sk-cube8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube9 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
0%,
70%,
100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
0%,
70%,
100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
.displayblock {
display: block
display: block
}
.review-list-header {
@@ -971,30 +1032,30 @@ display: block
padding-bottom: 0px;
opacity: 50%;
text-align: center;
}
}
#resume-exam-button {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#pause-text {
position: fixed;
/* left: 50%; */
width: 100%;
text-align: center;
top: 20%;
font-size: xxx-large;
transform: translate(0%, 20%);
position: fixed;
/* left: 50%; */
width: 100%;
text-align: center;
top: 20%;
font-size: xxx-large;
transform: translate(0%, 20%);
}
#pause-time-remaining {
width: auto;
font-size: large;
/* position: fixed; */
text-align: center;
width: auto;
font-size: large;
/* position: fixed; */
text-align: center;
}
.packet-database-options {
@@ -1048,36 +1109,40 @@ display: block
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #4527A0;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
position: absolute;
border: 4px solid #4527A0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
#submit-error-overlay {
@@ -1095,25 +1160,25 @@ display: block
.cache-out-of-date {
color: red;
}
}
.user-text {
color: darkslateblue;
}
.inactive::before {
content: "inactive";
content: "inactive";
transform: rotate(45deg);
color: red;
font-size: 1rem;
font-weight: 900;
border: 0.25rem solid red;
display: inline-block;
/* padding: 0.25rem 1rem; */
text-transform: uppercase;
border-radius: 1rem;
font-family: 'Courier';
/* mix-blend-mode: multiply; */
color: red;
font-size: 1rem;
font-weight: 900;
border: 0.25rem solid red;
display: inline-block;
/* padding: 0.25rem 1rem; */
text-transform: uppercase;
border-radius: 1rem;
font-family: 'Courier';
/* mix-blend-mode: multiply; */
opacity: 30%;
margin-left: -2em;
position: absolute;
+40 -26
View File
@@ -63,10 +63,20 @@
</div>
<div id="options-panel" class="fullscreen-overlay">
<h1>RTS</h1>
<input type='button' id='btn-candidate-login' class="login-button" value='Enter candidate details'><span
id="candidate-details"></span>
<!-- <a href="#" id="overlay-close" class="close"></a> -->
<div id="user" class="user-text"></div>
<div id="packets">
<p>Available Packets (click to load):</p>
<p>Click buttons below to load an exam / packet</p>
<span class="exam-wrapper hidden">
<h2>Available Exams:</h2>
<span id="exam-list">
</span>
</span>
<h2>Available Packets:</h2>
<span id="packet-list">
</span>
</div>
@@ -75,28 +85,28 @@
<div id="storage-details">
</div>
<div id="cache-details">
<details>
<summary></summary>
<ul>
</ul>
</details>
<details>
<summary></summary>
<ul>
</ul>
</details>
</div>
<details>
<summary>Options</summary>
<div id="database-buttons">
<input type='button' id='btn-delete-answer-databases' value='Delete local answers'>
<input type='button' id='btn-delete-cached-questions' value='Delete cached questions'>
</div>
<div id="local-fileloader">
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
<summary>Options</summary>
<div id="database-buttons">
<input type='button' id='btn-delete-answer-databases' value='Delete local answers'>
<input type='button' id='btn-delete-cached-questions' value='Delete cached questions'>
</div>
<div id="local-fileloader">
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
<fieldset>
<h2>Load local question set</h2>
<input type='file' id='fileinput'>
<input type='button' id='btn-local-file-load' value='Load'>
</fieldset>
</form>
</div>
<fieldset>
<h2>Load local question set</h2>
<input type='file' id='fileinput'>
<input type='button' id='btn-local-file-load' value='Load'>
</fieldset>
</form>
</div>
</details>
</div>
<div id="review-overlay" class="fullscreen-overlay">
@@ -138,7 +148,7 @@
</div>
<div id="exam-candidate-number" class="dialog-text hidden">
Check your below candidate number is correct.
<input type='number' size=10 id='candidate-number2'></input>
<input type='number' size=10 id='candidate-number2' disabled></input>
</div>
<button class="start-packet-button navigation dialog-yes">Start</button>
</div>
@@ -153,12 +163,13 @@
<button id="dialog-submit-button" class="submit-button navigation dialog-review hidden"><b>submit</b></button>
</div>
<div id="login-dialog" class="dialog modal">
<h3 class="dialog-title">Select exam</h3>
<div id="login-dialog" class="dialog modal noclose">
<h3 class="dialog-title">Enter Details</h3>
<div class="dialog-text">
Candidate number: <input type="text" id="candidate-number" name="candidate" required size="10">
Candidate number: <input type="number" id="candidate-number" name="candidate" required size="10"><br />
Passcode: <input type="text" id="passcode" name="passcode" required size="10"><br />
</div>
<button id="start-exam-button" class="navigation dialog-yes">Start</button>
<button id="login-button" class="navigation dialog-yes">Login</button>
</div>
<div id="loading" class="fullscreen-overlay">
@@ -180,7 +191,10 @@
</div>
<div id="question-loading" class="fullscreen-overlay-transparent">
<div class="progress-block">
<div class="lds-ripple"><div></div><div></div></div>
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
</div>
+481 -339
View File
File diff suppressed because it is too large Load Diff