Merge pull request #5 from Sv443-Network/dev

.gitignore

@@ -5,4 +5,5 @@ dev/*
 dsgvo/*
 gamejam/*
 games/*
-phpmyadmin/*
+phpmyadmin/*
+resources/other/fontawesome

css/discord.css

@@ -1,16 +0,0 @@
-html {
-    height: 100%;
-}
-
-body {
-    height: 100%;
-}
-
-main {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-}

css/global.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu&family=Roboto&family=Roboto+Condensed&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
 :root {
     --bg-color-dark: #151515;
@@ -6,7 +6,7 @@
 }
 
 * {
-    font-family: "Roboto", sans-serif;
+    font-family: "Roboto", "Segoe UI", "Calibri", "San Francisco", sans-serif;
 }
 
 html {
@@ -91,37 +91,31 @@ body[data-theme="spooky"] footer {
 }
 
 body[data-theme="light"] #cookie-consent {
-    background-color: #edeef4;
+    background-color: #9d9ea1;
 }
 
 body[data-theme="dark"] #cookie-consent {
-    background-color: #101010;
+    background-color: #080808;
 }
 
 body[data-theme="light"] .cookieButton {
     background-color: #D8D8D8;
+    border-color: #666; /*  :O  */ 
 }
 
 body[data-theme="dark"] .cookieButton {
     background-color: #202020;    
+    border-color: #474747;    
 }
 
-body[data-theme="light"] .cookieButton span {
+body[data-theme="light"] .cookieButton span:not(.fas) {
     color: black;
 }
 
-body[data-theme="light"] .cookieButton:hover span {
-    color: #5aa469;
-}
-
-body[data-theme="dark"] .cookieButton span {
+body[data-theme="dark"] .cookieButton span:not(.fas) {
     color: white;
 }
 
-body[data-theme="dark"] .cookieButton:hover span {
-    color: #5aa469;
-}
-
 body[data-theme="light"] h1 {
     color: black;
 }
@@ -154,9 +148,9 @@ body[data-theme="dark"] h2 {
     color: white;
 }
 
-body[data-theme="dark"] :not(#notifs h3):not(a):not(#themebtn):not(.icon) {
+/* body[data-theme="dark"] :not(#notifs h3):not(a):not(#themebtn):not(.icon) {
     color: white;
-}
+} */
 
 body[data-theme="dark"] h4 {
     color: white;

css/index.css

@@ -17,7 +17,6 @@
 
 .img-link:visited {
     color: initial;
-
 }
 
 p {
@@ -140,7 +139,7 @@ main {
     width: 150px;
     height: 150px;
     border-radius: 10%;
-    background-image: url(../resources/images/Sv443NetworkIcon.webp);
+    background-image: url(../resources/images/Sv443NetworkIcon.png);
     background-size: cover;
     margin-left: auto;
     margin-right: 0;
@@ -222,9 +221,9 @@ img.rounded.square {
 }
 
 footer {
-    position: fixed;
+    position: relative;
     bottom: 0;
-    width: 100vw;
+    width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -298,13 +297,20 @@ footer a:hover {
 }
 
 #cookie-consent {
+    position: fixed;
+    bottom: 0;
+    z-index: 99999;
+
     display: none;
     justify-content: space-around;
     align-items: center;
-    background-color: #edeef4;
-    padding: 5px 300px;
+    padding: 5px 100px;
     flex-basis: 100%;
-    font-size: 14px;
+    font-size: 16px;
+
+    border-top-right-radius: 25px;
+
+    /** bgcolor is in global.css */
 }
 
 #cookie-consent > div.big {
@@ -316,14 +322,20 @@ footer a:hover {
     align-items: center;
     justify-content: center;
     height: 25px;
-    background-color: #D8D8D8;
     border-radius: 30px;
     padding: 10px 15px;
     margin: 10px 5px;
+
+    border-style: none solid solid none;
+    border-width: 3px;
+}
+
+.cookieButton .fa-check {
+    color: #3d813d !important;
 }
 
-.cookieButton:hover span {
-    color: #5aa469;
+.cookieButton .fa-times {
+    color: #a14545 !important;
 }
 
 @media (max-width: 768px) {

css/redirect.css

@@ -0,0 +1,59 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+:root {
+    --bg-color: #151515;
+    --bg-color-dim: #fff;
+}
+
+* {
+    font-family: "Roboto", "Segoe UI", "Calibri", "San Francisco", sans-serif;
+}
+
+html {
+    font-size: 18px;
+    height: 100%;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: white;
+
+    height: 100%;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+h1 {
+    margin: 26px 0;
+}
+
+h2 {
+    margin: 18px 0;
+}
+
+h3 {
+    margin: 10px 0;
+}
+
+a {
+    color: #8c9eff;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #acb8ff;
+    text-decoration: underline;
+}
+
+#note {
+    color: var(--bg-color-dim);
+    margin-top: 50px;
+    font-size: 0.8em;
+}

discord.html

@@ -10,28 +10,27 @@
         <meta name="twitter:card" content="Use this link to join the official Sv443 Network Discord server.">
         <meta property="og:description" content="Use this link to join the official Sv443 Network Discord server.">
 
-        <meta name="HandheldFriendly" content="true">
-        <meta name="copyright" content="Sv443 - Licensed under the MIT license ( https://sv443.net/LICENSE )">
-        <meta name="author" content="Sv443 Network ([email protected] - https://github.com/Sv443-Network)">
-        <meta property="og:url" content="https://sv443.net/">
-        <meta property="og:type" content="profile">
+    <meta name="HandheldFriendly" content="true">
+    <meta name="copyright" content="Sv443 Network">
+    <meta name="author" content="Sv443 Network ([email protected] - https://github.com/Sv443-Network)">
+    <meta property="og:url" content="https://sv443.net/">
+    <meta property="og:type" content="profile">
 
-        <meta property="og:image" content="cdn/other/icons_v3/Sv443NetworkIcon.jpg">
-        <link rel="icon" href="cdn/other/icons_v3/Sv443NetworkIcon.jpg">
+    <meta property="og:image" content="./resources/images/Sv443NetworkIcon.png">
+    <link rel="icon" href="./resources/images/Sv443NetworkIcon.png">
 
-        <meta http-equiv="refresh" content="2; URL=https://discord.gg/aBH4uRG">
-
-        <title>Sv443 - Discord</title>
-        <link rel="stylesheet" href="css/global.css">
-        <link rel="stylesheet" href="css/discord.css">
-        <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
-        <script type="text/javascript" src="js/redirect.js"></script>
-        <script type="text/javascript" src="js/index.js"></script>
-    </head>
-    <body onload="otheronload(); redirect('https://discord.gg/aBH4uRG');">
-        <main>
-            <h2>You are being redirected to Discord.</h2>
-            <h3>If not, please <a href="https://discord.gg/aBH4uRG" target="_self">click here</a></h3>
-        </main>
-    </body>
+    <meta http-equiv="refresh" content="1; URL=https://discord.gg/aBH4uRG">
+    <title>Sv443 - Discord</title>
+    <link rel="stylesheet" href="./css/global.css">
+    <link rel="stylesheet" href="./css/redirect.css">
+    <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
+    <script type="text/javascript" src="./js/redirect.js"></script>
+    <script type="text/javascript" src="./js/index.js"></script>
+</head>
+<body onload="otheronload(); redirect('https://discord.gg/aBH4uRG');">
+    <main>
+        <h2>You are being redirected to Discord.</h2>
+        <h3>If not, please <a href="https://discord.gg/aBH4uRG" target="_self">click here</a></h3>
+    </main>
+</body>
 </html>

discord/index.html

@@ -0,0 +1,37 @@
+<!-- Direct copy of the file at ../discord.html, in case nginx redirects to this index file instead (because the "discord" folder exists now) -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="pagename" content="Sv443 Network Discord Server">
+    <meta name="application-name" content="Sv443 Network Discord Server">
+    <meta property="og:title" content="Sv443 Network Discord Server">
+    <meta name="description" content="Visit this website to join the official Sv443 Network Discord server.">
+    <meta name="twitter:card" content="Visit this website to join the official Sv443 Network Discord server.">
+    <meta property="og:description" content="Visit this website to join the official Sv443 Network Discord server.">
+
+    <meta name="HandheldFriendly" content="true">
+    <meta name="copyright" content="Sv443 Network">
+    <meta name="author" content="Sv443 Network ([email protected] - https://github.com/Sv443-Network)">
+    <meta property="og:url" content="https://sv443.net/">
+    <meta property="og:type" content="profile">
+
+    <meta property="og:image" content="./resources/images/Sv443NetworkIcon.png">
+    <link rel="icon" href="./resources/images/Sv443NetworkIcon.png">
+
+    <meta http-equiv="refresh" content="1; URL=https://discord.gg/aBH4uRG">
+    <title>Sv443 - Discord</title>
+    <link rel="stylesheet" href="./css/global.css">
+    <link rel="stylesheet" href="./css/redirect.css">
+    <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
+    <script type="text/javascript" src="./js/redirect.js"></script>
+    <script type="text/javascript" src="./js/index.js"></script>
+</head>
+<body onload="otheronload(); redirect('https://discord.gg/aBH4uRG');">
+    <main>
+        <h2>You are being redirected to Discord.</h2>
+        <h3>If not, please <a href="https://discord.gg/aBH4uRG" target="_self">click here</a></h3>
+    </main>
+</body>
+</html>

discord/tos_summary.html

@@ -0,0 +1,36 @@
+<!-- This site (not the one redirected to) is licensed under the MIT license: https://sv443.net/LICENSE -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="pagename" content="Summary of the Discord Terms of Service">
+    <meta name="application-name" content="Summary of the Discord Terms of Service">
+    <meta property="og:title" content="Summary of the Discord Terms of Service">
+    <meta name="description" content="Summary of the Discord Terms of Service from ToS;DR">
+    <meta name="twitter:card" content="Summary of the Discord Terms of Service from ToS;DR">
+    <meta property="og:description" content="Summary of the Discord Terms of Service from ToS;DR">
+
+    <meta name="HandheldFriendly" content="true">
+    <meta name="copyright" content="Sv443">
+    <meta property="og:url" content="https://sv443.net/">
+    <meta property="og:type" content="website">
+
+    <meta property="og:image" content="../resources/images/discord.png">
+    <link rel="icon" href="../resources/images/discord.png">
+
+    <meta http-equiv="refresh" content="1; URL=https://tosdr.org/en/service/536">
+    <title>Discord ToS summary</title>
+    <link rel="stylesheet" href="../css/redirect.css">
+    <script type="text/javascript" src="../js/redirect.js"></script>
+</head>
+<body onload="otheronload(); redirect('https://tosdr.org/en/service/536');">
+    <main>
+        <h2>You are being redirected to ToS;DR</h2>
+        <h3>If not, please <a href="https://tosdr.org/en/service/536" target="_self">click here</a></h3>
+
+        <div id="note">The Sv443 Network is not endorsed by or affiliated with Discord and ToS;DR</div>
+    </main>
+</body>
+</html>

index.html

@@ -8,7 +8,7 @@
     <meta name="description" content="Sv443 Network Homepage - This is the main page of Sv443 and the Sv443 Network. Here you will find all my projects and contact information.">
     <meta name="twitter:card" content="Sv443 Network Homepage - This is the main page of Sv443 and the Sv443 Network. Here you will find all my projects and contact information.">
     <meta name="subject" content="Video Games">
-    <meta name="copyright" content="Sv443 - Licensed under the MIT license ( https://sv443.net/LICENSE )">
+    <meta name="copyright" content="Sv443 Network">
     <meta name="author" content="Sv443 ( [email protected] - https://sv443.net/ )">
     <meta name="msvalidate.01" content="E7F67DC0A96E1B4B82A133B38600F151">
     <meta property="og:title" content="Sv443 Network - Homepage">
@@ -24,8 +24,8 @@
     <meta name="application-name" content="Sv443 Network - Homepage">
     <meta name="theme-color" content="#101747">
 
-    <link rel="stylesheet" href="css/global.css">
-    <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="./css/global.css">
+    <link rel="stylesheet" href="./css/index.css">
     <title>Sv443 Network - Homepage</title>
     <script src="https://unpkg.com/phosphor-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
@@ -38,6 +38,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="./resources/favicons/favicon-16x16.png">
     <link rel="mask-icon" href="./resources/favicons/safari-pinned-tab.svg" color="#101747">
     <link rel="shortcut icon" href="./resources/favicons/favicon.ico">
+    <link rel="stylesheet" href="./resources/other/fontawesome/css/all.css">
     <meta name="msapplication-TileColor" content="#000000">
     <meta name="msapplication-config" content="./resources/favicons/browserconfig.xml">
     <meta name="theme-color" content="#101747">
@@ -65,7 +66,7 @@
             <div style="display: flex; flex-direction: column;">
                 <p>A small network offering free to use and open source applications and services</p>
                 <a href="./ko-fi" class="img-link" target="_blank"><div>
-                    <img style="max-width: 100%;" src="./resources/images/ko-fi_button.webp" alt="Ko-fi button">
+                    <img style="max-width: 100%;" src="./resources/images/ko-fi_button.png" alt="Ko-fi button">
                 </div></a>
             </div>
         </div>
@@ -76,7 +77,7 @@
                 </div>
                 <div class="list">
                     <a href="https://sv443.net/jokeapi/v2/" id="jokeapi" rel="noopener" class="img-link" title="Visit the JokeAPI Website" target="_blank"><div class="list-item-container">
-                        <img src="./resources/images/jokeapi.webp" alt="JokeAPI icon" class="square"></img>
+                        <img src="./resources/images/jokeapi.png" alt="JokeAPI icon" class="square"></img>
                         <h4>JokeAPI</h4>
                     </div></a>
                     <a href="https://github.com/Sv443/SvCoreLib" id="svcorelib" rel="noopener" class="img-link" title="Visit the SvCoreLib GitHub Repository" target="_blank"><div class="list-item-container">
@@ -84,11 +85,11 @@
                         <h4>SvCoreLib</h4>
                     </div></a>
                     <a href="https://github.com/Sv443/LangApplier" id="langapplier" rel="noopener" class="img-link" title="Visit the LangApplier GitHub Repository" target="_blank"><div class="list-item-container">
-                        <img src="./resources/images/langapplier.webp" alt="LangApplier icon" class="rounded square"></img>
+                        <img src="./resources/images/langapplier.png" alt="LangApplier icon" class="rounded square"></img>
                         <h4>LangApplier</h4>
                     </div></a>
                     <a href="https://github.com/Sv443/TamperTubePlus" id="ttp" rel="noopener" class="img-link" title="Visit the TamperTubePlus GitHub Repository" target="_blank"><div class="list-item-container">
-                        <img src="./resources/images/ttp.webp" alt="TamperTubePlus icon" class="square"></img>
+                        <img src="./resources/images/ttp.png" alt="TamperTubePlus icon" class="square"></img>
                         <h4>TamperTubePlus</h4>
                     </div></a>
                     <a href="https://github.com/Sv443/skribbl.io-plus" id="skribbl" rel="noopener" class="img-link" title="Visit the Skribbl.io+ GitHub Repository" target="_blank"><div class="list-item-container">
@@ -108,7 +109,7 @@
                         <h4>Townly</h4>
                     </div></a>
                     <a href="https://sv443.net/games/flappy_switch/index.html" id="flappyswitch" rel="noopener" class="img-link" title="Play Flappy Switch" target="_blank"><div class="list-item-container">
-                        <img src="./resources/images/flappy_switch.webp" alt="Flappy Switch icon" class="rounded square"></img>
+                        <img src="./resources/images/flappy_switch.png" alt="Flappy Switch icon" class="rounded square"></img>
                         <h4>Flappy Switch</h4>
                     </div></a>
                     <a href="https://sv443.github.io/TextAdventureGame/TextAdventureGame" id="textisland" rel="noopener" class="img-link" title="Play Text Island" target="_blank"><div class="list-item-container">
@@ -124,52 +125,52 @@
             </div>
             <div class="list">
                 <a href="https://github.com/Sv443" id="github" rel="noopener" class="img-link" title="Sv443 on GitHub" target="_blank"><div class="list-item-container">
-                    <img src="./resources/images/github.webp" alt="GitHub icon" class="circle"></img>
+                    <img src="./resources/images/github.png" alt="GitHub icon" class="circle"></img>
                     <h4>GitHub</h4>
                 </div></a>
                 <a href="https://www.npmjs.com/~sv443" id="npm" rel="noopener" class="img-link" title="Sv443 on npm" target="_blank"><div class="list-item-container">
-                    <img src="./resources/images/npm.webp" alt="npm icon" class="circle"></img>
+                    <img src="./resources/images/npm.png" alt="npm icon" class="circle"></img>
                     <h4>npm</h4>
                 </div></a>
                 <a href="https://sv443.itch.io/" id="itch" rel="noopener" class="img-link" title="Sv443 on Itch.io" target="_blank"><div class="list-item-container">
-                    <img src="./resources/images/itch.webp" alt="Itch.io icon" class="circle"></img>
+                    <img src="./resources/images/itch.png" alt="Itch.io icon" class="circle"></img>
                     <h4>itch.io</h4>
                 </div></a>
                 <a href="https://www.linkedin.com/in/sven-fehler/" rel="noopener" class="img-link" title="My LinkedIn profile" target="_blank"><div class="list-item-container">
-                    <img src="./resources/images/linkedin.webp" alt="LinkedIn icon" class="circle"></img>
+                    <img src="./resources/images/linkedin.png" alt="LinkedIn icon" class="circle"></img>
                     <h4>LinkedIn</h4>
                 </div></a>
                 <a href="https://profile.codersrank.io/user/sv443" rel="noopener" class="img-link" title="My CodersRank profile" target="_blank"><div class="list-item-container">
-                    <img src="./resources/images/codersrank.webp" alt="CodersRank icon" class="circle"></img>
+                    <img src="./resources/images/codersrank.png" alt="CodersRank icon" class="circle"></img>
                     <h4>CodersRank</h4>
                 </div></a>
                 <a href="https://twitter.com/Sv443_dev" id="twitter" rel="noopener" class="img-link" title="Sv443 on Twitter" target="_blank"><div class="list-item-container">
-                    <img src="./resources/images/twitter.webp" alt="Twitter icon" class="circle"></img>
+                    <img src="./resources/images/twitter.png" alt="Twitter icon" class="circle"></img>
                     <h4>Twitter</h4>
                 </div></a>
                 <a onclick="copyemail();" id="email" class="img-link" title="Copies Sv443's E-Mail address to your clipboard"><div class="list-item-container">
-                    <img src="./resources/images/email.webp" alt="Email icon" class="circle"></img>
+                    <img src="./resources/images/email.png" alt="Email icon" class="circle"></img>
                     <h4>Email</h4>
                 </div></a>
                 <a href="/discord" id="discord" class="img-link" title="Join The Sv443 Network Discord Server" target="_blank"><div class="list-item-container">
-                    <img src="./resources/images/discord.webp" alt="Discord icon" class="circle"></img>
+                    <img src="./resources/images/discord.png" alt="Discord icon" class="circle"></img>
                     <h4>Discord</h4>
                 </div></a>
             </div>
         </div>
     </main>
-    <footer>
-        <div id="cookie-consent">
-            <div class="big">
-                <h3>This website uses cookies</h3>
-                <p>
-                    We use cookies to store site settings such as the theme.<br>
-                    Please accept the usage of functional cookies to enable these features.
-                </p>
-            </div>
-            <div id="consent-button" class="img-link cookieButton" onclick="consentGranted();"><span>Accept</span></div>
-            <div id="deny-button" class="img-link cookieButton" onclick="consentDenied();"><span>Deny</span></div>
+    <div id="cookie-consent">
+        <div class="big">
+            <h3>This feature requires cookies</h3>
+            <p>
+                We use cookies to store site settings such as the theme.<br>
+                Please accept the usage of functional cookies to enable these features.
+            </p>
         </div>
+        <div id="consent-button" class="img-link cookieButton" onclick="consentGranted();"><span><i class="fas fa-check"></i>&nbsp;Accept</span></div>
+        <div id="deny-button" class="img-link cookieButton" onclick="consentDenied();"><span><i class="fas fa-times"></i>&nbsp;Deny</span></div>
+    </div>
+    <footer>
         <div></div>
         <div id="legal">
             <h4><a id="privacypolicy" href="./privacypolicy/en" target="_blank">Privacy Policy</a> &bull; <a id="imprint" href="./imprint/en" target="_blank">Legal Information</a> &bull; <a id="license" href="./LICENSE" target="_blank">License</a></h4>

js/redirect.js

@@ -2,7 +2,7 @@ function redirect(redirectURL) {
     try {
         setTimeout(function () {
             window.location.replace(redirectURL);
-        }, 2000);
+        }, 1000);
     }
     catch (err) {
         try {

ko-fi.html

@@ -12,7 +12,7 @@
 </head>
 <body onload="otheronload(); redirect('https://ko-fi.com/Sv443_')">
     <main>
-        <a href="https://ko-fi.com/Sv443_"><img src="resources/images/ko-fi_blue.webp" width="200px" height="200px"></a>
+        <a href="https://ko-fi.com/Sv443_"><img src="resources/images/ko-fi_blue.png" width="200px" height="200px"></a>
         <h1>Thank you for donating!</h1>
         <h3>If you don't get redirected automatically, please click the icon at the top instead.</h3>
     </main>