Touch up study data view page

cburkert · cburkert · commit c7cc527b85a5 · 2021-11-04T00:00:00.000+01:00
diff --git a/app/pages/studydataview.html b/app/pages/studydataview.html
@@ -8,6 +8,12 @@
 
   <body>
     <div class="content">
+      <img id="logo" src="../images/on.svg" alt="">
+      <h1>
+        <span class="pretitle">Transparency & Control</span>
+        GitHub Timestamp Privacy Study
+      </h1>
+      <h2>Collected Study Data</h2>
       <table id="participant-data">
         <caption>General participant data</caption>
         <tbody>
@@ -67,9 +73,16 @@
         </tbody>
       </table>
       <form>
-        <button id="clipcopy">Copy Report to Clipboard</button>
-        <button id="studypurge">Reset Study Data</button>
+        <button id="clipcopy">Copy to Clipboard</button>
       </form>
+      <details id="expert-options">
+        <summary>Expert options</summary>
+        <form class="box box-warn">
+          <span>Warning</span>
+          Resetting will delete your local study data and start a new participation.
+          <button id="studypurge">Reset Study Data</button>
+        </form>
+      </details>
     </div>
     <script src="../scripts/studydataview.js"></script>
   </body>
diff --git a/app/styles/studydataview.css b/app/styles/studydataview.css
@@ -1,5 +1,41 @@
+body {
+  background-color: #28ADCA;
+  color: white;
+  font-size: normal;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.content {
+  max-width: 1024px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: white;
+  color: black;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  flex-direction: column;
+}
+
+h1 {
+  margin-top: 0.1em;
+  text-align: center;
+}
+.pretitle {
+  font-size: 80%;
+  font-weight: normal;
+  display: block;
+  text-align: center;
+}
+h2 {
+}
+
+#logo {
+  align-self: center;
+  width: 64px;
+}
+
 table {
-  font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
   margin-bottom: 20px;
@@ -15,6 +51,22 @@ tr:nth-child(even) {
   background-color: #dddddd;
 }
 
-form {
-  padding: 1em 0;
+#expert-options {
+  margin-top: 20px;
+  align-items: left;
+  justify-content: left;
+}
+.box {
+  color: #555;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px 0;
+}
+.box span {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.box-warn {
+  background-color: #fff8c4;
+  border: 1px solid #f2c779;
 }
