Add animated background

Hexagon · Jan 5, 2022 · a5ece86 · a5ece86
1 parent 1725f52
commit a5ece86
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webauthn-skeleton",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Skeleton for a Node.js powered Web Authentication API enabled website",
   "main": "app.js",
   "scripts": {

diff --git a/public/static/css/demo.css b/public/static/css/demo.css
@@ -1,6 +1,17 @@
 #mainContainer {
     display: none;
 }
+#background {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: -1;
+}
+#content {
+    background: rgba(0,0,0,128);
+}
 .left-column {
     width: 60%;
 }

diff --git a/public/static/index.html b/public/static/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="css/demo.css">
 </head>
 <body>
+
     <div id="header">
         <h1>Web Authentication API demo</h1>   
     </div>
@@ -67,11 +68,34 @@ <h4>Your credentials</h4>
         <button id="button-logout">Logout</button>
     </div>
 
+    <!-- Vanta net container -->
+    <div id="background"></div>
+
     <!-- External dependencies -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@hexagon/base64@1/dist/base64.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/qr-creator/dist/qr-creator.min.js"></script>
 
+    <!-- Vanta net background -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanta.net.min.js"></script>
+    <script>
+        VANTA.NET({
+            el: "#background",
+            mouseControls: false,
+            touchControls: false,
+            gyroControls: true,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x17294d,
+            backgroundColor: 0x4050f,
+            maxDistance: 18.00,
+            spacing: 18.00
+        });
+    </script>
+
     <!-- Internals-->
     <script src="js/utils.js"></script>
     <script src="js/view.js"></script>