Add cookie popup (for when its needed)

index.html

@@ -86,6 +86,19 @@
             </div>
         </div>
     </main>
+    <div id="popup" style="display: none;">
+        <div id="popup-background"></div>
+        <div id="agree-popup">
+            <p class="title">Cookie preferences</p>
+            <p>
+                To use this feature, please allow this webpage to collect cookies. This allows the website to save
+                preferences. We do not share information to any company.<br><br>Do you want to enable cookies on this
+                page?<br>
+                <button onclick="document.getElementById('popup').innerHTML = '';">Yes</button>
+                <button onclick="window.location.href = 'https://google.com/'">No, take me back</button>
+            </p>
+        </div>
+    </div>
     <footer>
         <div>
             <a href="?">Legal</a>
@@ -99,4 +112,5 @@
     <script src="scripts/index.js"></script>
     <script src="scripts/motd_randomiser.js"></script>
 </body>
+
 </html>

styles.css

@@ -236,7 +236,7 @@ main img {
         margin-right: 0px;
         margin-bottom: 5px;
     }
-    
+
     .flexbox .container:last-child {
         margin-left: 0px;
         margin-top: 5px;
@@ -264,4 +264,49 @@ main img {
 
 .heading {
     color: #30ff30;
+}
+
+#popup-background {
+    background-image: linear-gradient(#000000a0 0%, #000000a0 100%), url(assets/textures/water.png);
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+    background-size: 64px;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    backdrop-filter: blur(4px);
+}
+
+#agree-popup {
+    background-image: url(assets/textures/stone.png);
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+    background-size: 64px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 500px;
+    box-shadow: inset 0 0 10px #000000;
+    margin-top: 10px;
+}
+
+#agree-popup .title {
+    background-image: url(assets/textures/window_title.png);
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+    background-size: 64px;
+    padding: 4px;
+    box-shadow: inset 0 0 10px #000000;
+    font-size: 18px;
+}
+
+#agree-popup p {
+    margin: 0px;
+    padding: 20px;
 }