first commit

public/css/auth.css

@@ -0,0 +1,72 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: sans-serif;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    display: none;
+}
+
+.box {
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 10px;
+    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.8);
+    margin: auto auto;
+    padding: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.box h2 {
+    margin: 0 0 30px 0;
+    padding: 0;
+    color: #fff;
+    text-align: center;
+}
+
+.box .inputBox label {
+    color: #fff;
+}
+
+.box .inputBox input {
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid #fff;
+    color: #fff;
+    font-size: 18px;
+    letter-spacing: 2px;
+    margin-bottom: 30px;
+    outline: none;
+    padding: 10px 0;
+    width: 100%;
+}
+
+.box input[type="submit"], .box button[type="submit"], a.button {
+    font-family: sans-serif;
+    background: #03a9f4;
+    font-size: 11px;
+    border: none;
+    border-radius: 5px;
+    color: #fff;
+    cursor: pointer;
+    font-weight: 600;
+    padding: 10px 20px;
+    letter-spacing: 2px;
+    outline: none;
+    text-transform: uppercase;
+    text-decoration: none;
+    margin: 2px 10px 2px 0;
+    display: inline-block;
+}
+
+.box input[type="submit"]:hover, .box button[type="submit"]:hover, a.button:hover {
+    opacity: 0.8;
+}

public/css/particles.css

@@ -0,0 +1,9 @@
+#tsparticles {
+    position: fixed;
+    margin: 0;
+    padding: 0;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}

public/js/particles.js

@@ -0,0 +1 @@
+tsParticles.loadJSON("tsparticles", "json/particles.json");

public/json/particles.json

@@ -0,0 +1,104 @@
+{
+    "fpsLimit": 60,
+    "particles": {
+      "number": {
+        "value": 50
+      },
+      "shape": {
+        "type": "circle"
+      },
+      "opacity": {
+        "value": 0.5
+      },
+      "size": {
+        "value": 400,
+        "random": {
+          "enable": true,
+          "minimumValue": 200
+        }
+      },
+      "move": {
+        "enable": true,
+        "speed": 10,
+        "direction": "top",
+        "outMode": "destroy"
+      }
+    },
+    "interactivity": {
+      "detectsOn": "canvas",
+      "events": {
+        "resize": true
+      }
+    },
+    "detectRetina": true,
+    "background": {
+      "image": "",
+      "position": "50% 50%",
+      "repeat": "no-repeat",
+      "size": "cover"
+    },
+    "themes": [
+      {
+        "name": "light",
+        "default": {
+          "value": true,
+          "mode": "light"
+        },
+        "options": {
+          "background": {
+            "color": "#fff"
+          },
+          "particles": {
+            "color": {
+              "value": [
+                "#5bc0eb",
+                "#fde74c",
+                "#9bc53d",
+                "#e55934",
+                "#fa7921"
+              ]
+            }
+          }
+        }
+      },
+      {
+        "name": "dark",
+        "default": {
+          "value": true,
+          "mode": "dark"
+        },
+        "options": {
+          "background": {
+            "color": "#000"
+          },
+          "particles": {
+            "color": {
+              "value": [
+                "#004f74",
+                "#5f5800",
+                "#245100",
+                "#7d0000",
+                "#810c00"
+              ]
+            }
+          }
+        }
+      }
+    ],
+    "emitters": {
+      "direction": "top",
+      "position": {
+        "x": 50,
+        "y": 120
+      },
+      "rate": {
+        "delay": 0.2,
+        "quantity": 2
+      },
+      "size": {
+        "width": 100,
+        "height": 0
+      }
+    }
+  }
+