Create login page and layout

assets/svg/AuthBackground.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="390" height="844" viewBox="0 0 390 844">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#cdd6db"/>
+      <stop offset="1" stop-color="#003b70"/>
+    </linearGradient>
+  </defs>
+  <path id="Path_14" class="cls-1" d="M0,10.9H390v844H0Z" transform="translate(0 -10.902)"/>
+</svg>

components/TheSettings.vue

@@ -434,7 +434,7 @@
             />
           </g>
         </svg>
-        Log out
+        <NuxtLink to="login">Log out</NuxtLink>
       </li>
     </ul>
   </section>

layouts/login.vue

+<template>
+  <div id="login-page">
+    <Nuxt/>
+  </div>
+</template>
+
+<style>
+@font-face {
+  font-family: Bungee;
+  src: local("Bungee"), url("~/assets/fonts/Bungee-Regular.ttf") format("TrueType");
+}
+
+html {
+  font-family: 'Bungee',
+  'Source Sans Pro',
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  sans-serif;
+  font-size: 1.25rem;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+
+  scroll-behavior: smooth;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.button {
+  padding: .25em .5em .25em .5em;
+  background-image: linear-gradient(white, #89ceff);
+  border-radius: 1em;
+  color: #05629D;
+}
+
+#login-page {
+  overflow-x: hidden;
+  background-image: linear-gradient(#CDD6DB, #003B70);
+  height: 100%;
+}
+</style>

pages/Login.vue

+<template>
+  <div class="login-container">
+    <svg
+      class="watermark"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="527.999"
+      height="792"
+      viewBox="0 0 527.999 792"
+    >
+      <defs>
+        <filter
+          id="Path_6"
+          x="80.391"
+          y="546"
+          width="81.134"
+          height="81.134"
+          filterUnits="userSpaceOnUse"
+        >
+          <feOffset dy="3" input="SourceAlpha"/>
+          <feGaussianBlur stdDeviation="3" result="blur"/>
+          <feFlood flood-opacity="0.349"/>
+          <feComposite operator="in" in2="blur"/>
+          <feComposite in="SourceGraphic"/>
+        </filter>
+        <filter
+          id="Path_5"
+          x="210.474"
+          y="566.859"
+          width="107.052"
+          height="109.141"
+          filterUnits="userSpaceOnUse"
+        >
+          <feOffset dy="3" input="SourceAlpha"/>
+          <feGaussianBlur stdDeviation="3" result="blur-2"/>
+          <feFlood flood-opacity="0.361"/>
+          <feComposite operator="in" in2="blur-2"/>
+          <feComposite in="SourceGraphic"/>
+        </filter>
+        <filter
+          id="Path_45"
+          x="366.474"
+          y="546"
+          width="81.134"
+          height="81.134"
+          filterUnits="userSpaceOnUse"
+        >
+          <feOffset dy="3" input="SourceAlpha"/>
+          <feGaussianBlur stdDeviation="3" result="blur-3"/>
+          <feFlood flood-opacity="0.349"/>
+          <feComposite operator="in" in2="blur-3"/>
+          <feComposite in="SourceGraphic"/>
+        </filter>
+      </defs>
+      <g id="Group_41" data-name="Group 41" transform="translate(415 -828)">
+        <g id="Path_44" data-name="Path 44" class="cls-1" transform="translate(-415 922)">
+          <path class="cls-4"
+                d="M264-94c-.577.781,264,377.927,264,525.249S409.8,698,264,698,0,578.572,0,431.25,264.577-94.78,264-94Z"
+          />
+          <path class="cls-5"
+                d="M 263.70703125 -22.25128173828125 C 171.9195556640625 116.2078247070312 39.99996948242188 338.6212768554688 39.99996948242188 431.2499084472656 C 39.99996948242188 556.280029296875 140.48583984375 657.9994506835938 263.9995422363281 657.9994506835938 C 387.5132446289062 657.9994506835938 487.9991149902344 556.280029296875 487.9991149902344 431.2499084472656 C 487.9991149902344 359.7812194824219 404.7320556640625 191.885009765625 263.70703125 -22.25128173828125 M 264.00048828125 -94.00042724609375 C 264.0005187988281 -94.00042724609375 264 -93.99969482421875 263.9990234375 -93.9981689453125 C 263.9994506835938 -93.99951171875 264.0004577636719 -94.00042724609375 264.00048828125 -94.00042724609375 Z M 263.9990234375 -93.9981689453125 C 263.6159973144531 -92.94195556640625 527.9990844726562 283.9821472167969 527.9990844726562 431.2499084472656 C 527.9990844726562 578.5715942382812 409.8025512695312 697.9994506835938 263.9995422363281 697.9994506835938 C 118.1966857910156 697.9994506835938 0 578.5715942382812 0 431.2499084472656 C 0 284.2878723144531 263.2866516113281 -92.93243408203125 263.9990234375 -93.9981689453125 Z"
+          />
+        </g>
+        <g id="Droplet" class="cls-2" transform="translate(-325.609 1380)">
+          <g class="cls-8" transform="matrix(1, 0, 0, 1, -89.39, -552)">
+            <path id="Path_6-2" data-name="Path 6" class="cls-3"
+                  d="M31.567,0A31.567,31.567,0,1,1,0,31.567,31.567,31.567,0,0,1,31.567,0Z"
+                  transform="translate(89.39 552)"
+            />
+          </g>
+          <g class="cls-7" transform="matrix(1, 0, 0, 1, -89.39, -552)">
+            <path id="Path_5-2" data-name="Path 5" class="cls-3"
+                  d="M232.416-460.866c9.135-12.482,78.1-9.285,82.994,0s5.039,82.727-41.5,82.934S223.28-448.384,232.416-460.866Z"
+                  transform="translate(-9.01 1041.93)"
+            />
+          </g>
+          <g class="cls-6" transform="matrix(1, 0, 0, 1, -89.39, -552)">
+            <path id="Path_45-2" data-name="Path 45" class="cls-3"
+                  d="M31.567,0A31.567,31.567,0,1,1,0,31.567,31.567,31.567,0,0,1,31.567,0Z"
+                  transform="translate(375.47 552)"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+    <h1><span>log in</span> to access</h1>
+    <h2>your hydrominder</h2>
+    <label for="username">Username</label>
+    <input id="username" type="text">
+    <label for="password">Password</label>
+    <input class="password" id="password" type="password">
+    <button class="button">log in</button>
+  </div>
+</template>
+<script>
+export default {
+  layout: 'login'
+}
+</script>
+<style lang="scss" scoped>
+.login-container {
+  position:relative;
+  margin: 0 auto;
+  min-height: 100vh;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  color: white;
+  font-size: 1.3rem;
+
+  text-shadow: 0 4px 7px #333;
+
+  h1 {
+    margin-top: 2em;
+  }
+
+  h2 {
+    margin-bottom: 2em;
+    z-index: 5;
+  }
+
+  span {
+    color: #004377;
+    text-shadow: none;
+    font-size: 1.6rem;
+    vertical-align: center;
+    text-shadow: -1px 3px 4px #444;
+  }
+
+  input {
+    margin: 0;
+    font-size: 1.2rem;
+    border: 5px solid white;
+    border-radius: 35px;
+    box-shadow: 0 5px 7px rgba(0, 0, 0, .4) inset,
+    0 3px 5px #555;
+    padding: 0 .9em 0 .75em;
+    color: #004377;
+    padding: 0 -1em 0 0.25em;
+    background: #87A1B6;
+    color: #004377;
+    width: 300px;
+    grid-area: 1 / 1;
+
+    z-index: 5;
+  }
+
+  .password {
+    background: #708EA8;
+  }
+
+  label {
+    font-size: 1.1rem;
+    margin-top: 5%;
+    margin-right: 6em;
+  }
+
+  button {
+    background-image: linear-gradient(#94ccef, #ebf7ff);
+    margin-top: 27%;
+    width: 300px;
+    box-shadow: 0 5px 8px rgba(0, 0, 0, .4);
+    z-index: 5;
+  }
+
+  .watermark {
+    position: absolute;
+    top: 3%;
+    right: -250px;
+    height:92vh;
+    width:auto;
+
+
+    .cls-1 {
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .cls-1, .cls-2 {
+      mix-blend-mode: soft-light;
+      isolation: isolate;
+    }
+
+    .cls-3 {
+      fill: #fff;
+    }
+
+    .cls-4, .cls-5 {
+      stroke: none;
+    }
+
+    .cls-5 {
+      fill: #fff;
+    }
+
+    .cls-6 {
+      filter: url(#Path_45);
+    }
+
+    .cls-7 {
+      filter: url(#Path_5);
+    }
+
+    .cls-8 {
+      filter: url(#Path_6);
+    }
+  }
+}
+
+</style>