toggle scan container

Author: ujjwal-kr

client/index.css

@@ -29,6 +29,10 @@ body {
     font-size: 1.2em;
 }
 
+.scan-container {
+    text-align: center;
+}
+
 .hash {
     background: rgb(104, 104, 104);
     width: auto;
@@ -37,6 +41,14 @@ body {
     padding: 10px;
 }
 
+button {
+    font-size: 1em;
+    padding: .2em;
+    padding-left: .5em;
+    padding-right: .5em;
+    cursor: pointer;
+}
+
 p {
     word-break: break-all;
 }

client/index.html

@@ -61,19 +61,24 @@ <h1>EPIC_Tracker</h1>
         </code>
 
         <br><br><br>
-        <h3>Opt In for a scan?</h3>
-        <code>
-            Open this website with any other devices from the same network, i.e connected to same wifi, and press the
-            "OPT IN FOR SCAN" button. Then press the "SCAN" button from this device. You should see the information of
-            all the devices which has opted in for scan in last 30 minutes.
-            <br><br>
-            This demo shows that all the devices from your network can be identified on the basis of IPs and the
-            metadata can be collected.
-        </code>
 
-        <button class="optIn">OPT</button>
         <br>
-        <button class="scanButton">SCAN</button>
+        <div class="scan-container">
+            <h2>Opt In for a scan?</h2>
+            <code>
+                Open this website with any other devices from the same network, i.e connected to same wifi, and press the
+                "OPT IN FOR SCAN" button. Then press the "SCAN" button from this device. You should see the information of
+                all the devices in the network which has opted in for scan in last 30 minutes.
+                <br><br>
+                <button class="optIn">Opt In For Scan</button>
+                <br><br>
+                This demo shows that all the devices from your network can be identified on the basis of IPs and the
+                metadata can be collected.
+            </code>
+            <br> 
+            <br>
+            <button class="scanButton">Scan</button>
+        </div>
 
         <div class="copy">
             <p>

client/index.js

@@ -28,6 +28,7 @@ document.querySelector('.lang').textContent = languagePhrase;
 document.querySelector('.depth').textContent = colorDepthPhrase;
 document.querySelector('.dimentions').textContent = dimentionPhrase;
 document.querySelector('.touch').textContent = touchPhrase
+document.querySelector('.scan-container').style.display = "none";
 
 // Try to get the graphichal processing unit info
 const canv = document.getElementById("canv");
@@ -158,6 +159,7 @@ nowFetch().then(response => {
         const visits = shaRESPONSE.visits
         document.querySelector('.visits').textContent = `According to the unique hash, you have visited the site ${visits} time(s).`
         console.log(visits)
+        document.querySelector('.scan-container').style.display = "block";
     }).catch(e => {
         console.log(e)
     })