numerous improvements

css/base.css

@@ -1,18 +1,67 @@
-html, body, div, span, applet, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-a, abbr, acronym, address, big, cite, code,
+div,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
+span,
-small, strike, strong, sub, sup, tt, var,
+applet,
-dl, dt, dd, ol, ul, li,
+object,
-fieldset, form, label, legend,
+iframe,
-table, caption, tbody, tfoot, thead, tr, th, td {
+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,
+blockquote:before,
-q:before, q:after {
+blockquote:after,
+q:before,
+q:after {
     content: "";
 }
 
-blockquote, q {
+blockquote,
-    quotes: "" "";
+q {
+    quotes: """";
 }
-

css/main.css

@@ -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 {
+html,
-    vertical-align:top;
+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: ' ';
@@ -816,43 +832,60 @@ select option:disabled {
     padding-top: 20px;
 }
 
-.packet-button {
+
-    display:inline-block;
+.login-button {
-    padding:0.35em 1.2em;
+    display: inline-block;
-    border:0.1em solid #FFFFFF;
+    padding: 0.35em 1.2em;
-    margin:0 0.3em 0.3em 0;
+    border: 0.1em solid purple;
-    border-radius:0.12em;
+    margin: 0 0.3em 0.3em 0;
+    border-radius: 0.12em;
     box-sizing: border-box;
-    text-decoration:none;
+    text-decoration: none;
-    font-family:'Roboto',sans-serif;
+    font-family: 'Roboto', sans-serif;
-    font-weight:300;
+    font-weight: 300;
-    color:#FFFFFF;
+    color: rgb(201, 0, 201);
-    text-align:center;
+    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{
+.packet-button.cached:after {
     content: "cached";
     width: 12px;
     height: 12px;
     color: gray;
     border-radius: 50%;
-  position:relative;
+    position: relative;
     transform: translate(15px, 5.5px) rotate(270deg);
     display: inline-block;
     right: 0;
     font-size: 8px;
 }
 
-.packet-button.out-of-date{
+.packet-button.out-of-date {
     color: darkslategray
 }
 
 .save-button {
-    display:inline-block;
+    display: inline-block;
     margin-left: 10px;
-    color:#FFFFFF;
+    color: #FFFFFF;
-    border-bottom:2px solid transparent;
+    border-bottom: 2px solid transparent;
 }
 
 .save-button a {
@@ -861,12 +894,12 @@ select option:disabled {
 
 .save-button:hover {
     color: #311B92;
-    border-bottom:2px solid #311B92;
+    border-bottom: 2px solid #311B92;
 }
 
-.packet-button:hover{
+.packet-button:hover {
-    color:lightblue;
+    color: lightblue;
-    border-color:blue;
+    border-color: blue;
 }
 
 .progress-block {
@@ -901,49 +934,77 @@ select option:disabled {
     -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; }
+    animation-delay: 0.2s;
+}
+
 .sk-cube-grid .sk-cube2 {
     -webkit-animation-delay: 0.3s;
-          animation-delay: 0.3s; }
+    animation-delay: 0.3s;
+}
+
 .sk-cube-grid .sk-cube3 {
     -webkit-animation-delay: 0.4s;
-          animation-delay: 0.4s; }
+    animation-delay: 0.4s;
+}
+
 .sk-cube-grid .sk-cube4 {
     -webkit-animation-delay: 0.1s;
-          animation-delay: 0.1s; }
+    animation-delay: 0.1s;
+}
+
 .sk-cube-grid .sk-cube5 {
     -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s; }
+    animation-delay: 0.2s;
+}
+
 .sk-cube-grid .sk-cube6 {
     -webkit-animation-delay: 0.3s;
-          animation-delay: 0.3s; }
+    animation-delay: 0.3s;
+}
+
 .sk-cube-grid .sk-cube7 {
     -webkit-animation-delay: 0s;
-          animation-delay: 0s; }
+    animation-delay: 0s;
+}
+
 .sk-cube-grid .sk-cube8 {
     -webkit-animation-delay: 0.1s;
-          animation-delay: 0.1s; }
+    animation-delay: 0.1s;
+}
+
 .sk-cube-grid .sk-cube9 {
     -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s; }
+    animation-delay: 0.2s;
+}
 
 @-webkit-keyframes sk-cubeGridScaleDelay {
-  0%, 70%, 100% {
+
+    0%,
+    70%,
+    100% {
         -webkit-transform: scale3D(1, 1, 1);
         transform: scale3D(1, 1, 1);
-  } 35% {
+    }
+
+    35% {
         -webkit-transform: scale3D(0, 0, 1);
         transform: scale3D(0, 0, 1);
     }
 }
 
 @keyframes sk-cubeGridScaleDelay {
-  0%, 70%, 100% {
+
+    0%,
+    70%,
+    100% {
         -webkit-transform: scale3D(1, 1, 1);
         transform: scale3D(1, 1, 1);
-  } 35% {
+    }
+
+    35% {
         -webkit-transform: scale3D(0, 0, 1);
         transform: scale3D(0, 0, 1);
     }
@@ -951,7 +1012,7 @@ select option:disabled {
 
 
 .displayblock {
-display: block
+    display: block
 }
 
 .review-list-header {
@@ -971,7 +1032,7 @@ display: block
     padding-bottom: 0px;
     opacity: 50%;
     text-align: center;
-    }
+}
 
 #resume-exam-button {
     position: fixed;
@@ -1053,6 +1114,7 @@ display: block
     width: 80px;
     height: 80px;
 }
+
 .lds-ripple div {
     position: absolute;
     border: 4px solid #4527A0;
@@ -1060,9 +1122,11 @@ display: block
     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;
@@ -1071,6 +1135,7 @@ display: block
         height: 0;
         opacity: 1;
     }
+
     100% {
         top: 0px;
         left: 0px;
@@ -1095,7 +1160,7 @@ display: block
 
 .cache-out-of-date {
     color: red;
-    }
+}
 
 .user-text {
     color: darkslateblue;

index.html

@@ -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>
@@ -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">
+    <div id="login-dialog" class="dialog modal noclose">
-        <h3 class="dialog-title">Select exam</h3>
+        <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>