InvalidLenni · InvalidLenni · Feb 14, 2022 · Feb 14, 2022 · Feb 16, 2022 · Feb 16, 2022
diff --git a/Components/Footer.js b/Components/Footer.js
@@ -0,0 +1,19 @@
+const element = 
+  <footer class="mastfoot mb-auto">
+    <div class="container-fluid mb-auto">
+        <div class="">
+          <div class="">    
+            <p style="position:static; text-align: center; padding-bottom: 10%; font-size: 19px; margin: 0px; padding: 0px;"><a href="https://invalidlenni.de/"
+                      style="text-decoration: none; color: white;">Made with 💖 by</a>InvalidLenni ©
+                  2021 - <script>document.write((new Date()).getFullYear()) </script>. All<br>
+                  rights reserved. Source code available at <a href="https://github.com/InvalidLenni/invalidlenni.github.io/">Github</a> and the website will be hosted by <a href="https://pages.github.com/">Github (Pages)</a>. Badges hosted by <a href="https://shields.io/">Shields</a> and <a href="https://github.com/">Github</a>. You can support me <a href="https://deinserverhost.de/store/aff.php?aff=4224">here</a> with money. You can you join my discord server or follow my twitter account <strong>without money</strong>.</br></p>
+          </div>
+      </div>
+    </div>
+  </footer>  
+
+ReactDOM.render(
+    element,
+    document.getElementById('react-footer')
+  );
+
diff --git a/Components/cps/cps.html b/Components/cps/cps.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+  <html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Import CSS and Assets -->
+    <link rel="icon" href="../assets/favicon.png">
+    <link rel="stylesheet" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" href="../css/main.css">
+    <!-- Import Icons -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/fontawesome.min.css" integrity="sha512-8Vtie9oRR62i7vkmVUISvuwOeipGv8Jd+Sur/ORKDD5JiLgTGeBSkI3ISOhc730VGvA5VVQPwKIKlmi+zMZ71w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/solid.min.css" integrity="sha512-6/gTF62BJ06BajySRzTm7i8N2ZZ6StspU9uVWDdoBiuuNu5rs1a8VwiJ7skCz2BcvhpipLKfFerXkuzs+npeKA==" crossorigin="anonymous" referrerpolicy="no-referrer" />  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/brands.min.css" integrity="sha512-bSncow0ApIhONbz+pNI52n0trz5fMWbgteHsonaPk42JbunIeM9ee+zTYAUP1eLPky5wP0XZ7MSLAPxKkwnlzw==" crossorigin="anonymous" referrerpolicy="no-referrer" />  <!-- Import manifest.json -->
+    <link rel="manifest" href="../manifest.json">
+    <!-- Make twitter:... embed -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@invalidlenni" />
+    <meta name="twitter:title" content="InvalidLenni" />
+    <meta name="twitter:description" content="On the website can you find my projects, about me and more." />
+    <meta name="twitter:image" content="https://invalidlenni.de/assets/favicon.png" />
+    <!-- Make og:... embed -->
+    <meta content="InvalidLenni.de" property="og:title" />
+    <meta content="On the website can you find my projects, about me and more!" property="og:description" />
+    <meta content="https://invalidlenni.de/" property="og:url" />
+    <meta content="assets/favicon.png" property="og:image" />
+    <meta content="#43B581" data-react-helmet="true" name="theme-color" />  
+    <meta name="robots" content="noindex" />
+    <title>InvalidLenni</title> 
+  </head>
+<style type="text/css">
+  #content {
+    width: 200px;
+    border: 1px dashed #dc0000;
+    font-size: 20px;
+    text-align: center;
+    margin: 0 auto;
+    margin-top: 50px;
+    padding: 20px;
+    user-select: none;
+  }
+
+  #clickarea {
+    width: 500px;
+    height : 300px;
+    border: 2px solid #00ff55;
+    font-size: 20px;
+    text-align: center;
+    margin: 0 auto;
+    margin-top: 50px;
+    padding: 20px;
+    position: relative;
+  }
+
+  #logo {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+    margin-top: 50px;
+    display: block;
+    user-select: none;
+  }
+
+  #start {
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%,-50%);
+    border: 0;
+    line-height: 2.5;
+    padding: 0 20px;
+    font-size: 1rem;
+    text-align: center;
+    color: #fff;
+    text-shadow: 1px 1px 1px #000;
+    border-radius: 10px;
+    background-color: rgba(220, 0, 0, 1);
+    background-image: linear-gradient(to top left,
+                  rgba(0, 0, 0, .2),
+                  rgba(0, 0, 0, .2) 30%,
+                  rgba(0, 0, 0, 0));
+    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
+                inset -2px -2px 3px rgba(0, 0, 0, .6);
+  }
+
+  #start:hover {
+    background-color: rgba(255, 0, 0, 1);
+  }
+
+  #start:active {
+    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
+                inset 2px 2px 3px rgba(0, 0, 0, .6);
+  }
+</style>
+</head>
+<body>
+  <center><h1 style="color: white;"></h1></center>
+  <div id="content">
+    Timer: <span id="timer"></span><br/>
+    Score: <span id="score"></span><br/>
+    Clicks/s: <span id="clicks"></span>
+  </div>
+  <div id="clickarea">
+    <button id="start">I'm ready!</button>
+  </div>
+  <script type="text/javascript">
+    var score; // to store the current score
+    var duration = 10; // 10 seconds
+    var startTime; // start time
+    var ended = true; // boolean indicating if game is ended
+    // we get DOM References for some HTML elements
+    var timerTxt = document.getElementById("timer");
+    var scoreTxt = document.getElementById("score");
+    var clicksTxt = document.getElementById("clicks");
+    var startBtn = document.getElementById("start");
+    var clickArea = document.getElementById("clickarea");
+    // we define two functions for showing or hiding a HTML element
+    var show = function(elem) {
+      elem.style.display = 'inline';
+    };
+    var hide = function(elem) {
+      elem.style.display = 'none';
+    };
+    // Method called when the game starts
+    function startGame() {
+      hide(startBtn);
+      score = -1;
+      ended = false;
+      // we get start time
+      startTime = new Date().getTime();
+      // we create a timer with the setInterval method
+      var timerId = setInterval(function() {
+        var total = (new Date().getTime() - startTime) / 1000;
+        // while total lower than duration, we update timer and the clicks by seconds
+        if (total < duration) {
+          timerTxt.textContent = total.toFixed(3);
+          clicksTxt.textContent = (score / total).toFixed(2);
+        } else {
+          // otherwise, game is ended, we clear interval and we set game as ended
+          ended = true;
+          clearInterval(timerId);
+          // we call the end game method
+          endGame();
+        }
+      }, 1);
+  }
+  // end game method
+  function endGame() {
+    // we write final stats
+    var clicsBySeconds = (score / duration).toFixed(2);
+    timerTxt.textContent = duration.toFixed(3);
+    clicksTxt.textContent = clicsBySeconds;
+    // we show start button to play an other game
+    show(startBtn);
+    // we display result to the user in delayed mode 
+    //to update DOM elements just before the alert
+    setTimeout(function() {
+      alert('You made ' + score + ' clicks in ' + duration + 
+      ' seconds. It is ' + clicsBySeconds + 
+      ' clicks by seconds. Try again!');
+    }, 10);
+  }
+  // we set a click event listener on the start button
+  startBtn.addEventListener("click", function(e) {
+    startGame();
+  });
+  // we add a click event listener on the click area div to update the score when the user will click
+  clickArea.addEventListener("click", function(e) {
+    if (!ended) {
+      score++;
+      scoreTxt.textContent = score;
+    }
+  });
+</script>
+</body>
+<footer class="mastfoot mb-auto">
+  <div class="container-fluid mb-auto">
+      <div class="">
+          <div class="">    
+            <p style="position:static; text-align: center; padding-bottom: 10%; font-size: 19px; margin: 0px; padding: 0px;"><a href="https://invalidlenni.de/"
+                      style="text-decoration: none; color: white;">Made with 💖 by</a></br>InvalidLenni ©
+                  2021 - <script>document.write((new Date()).getFullYear()) </script>. All<br>
+                  rights reserved. Source code available at <a href="https://github.com/InvalidLenni/invalidlenni.github.io/">Github</a> and the website will be hosted by <a href="https://pages.github.com/">Github (Pages)</a>. Badges hosted by <a href="https://shields.io/">Shields</a> and <a href="https://github.com/">Github</a>. You can support me <a href="https://deinserverhost.de/store/aff.php?aff=4224">here</a> with money. You can you join my discord server or follow my twitter account <strong>without money</strong>.</br></p>
+      </div>
+    </div>
+  </div>
+</div>
+</footer>
+</html>
+
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 ![Status](https://img.shields.io/website?down_color=red&down_message=Offline&style=for-the-badge&up_color=green&up_message=Online&url=https%3A%2F%2Finvalidlenni.de%2F)
+![GitHub package.json version](https://img.shields.io/github/package-json/v/InvalidLenni/invalidlenni.github.io?logo=github&style=for-the-badge)
 # InvalidLenni.de
 
 This is the source code of [my website](https://invalidlenni.de/)

diff --git a/assets/multiplex.png b/assets/multiplex.png
diff --git a/assets/nitromc.de.png b/assets/nitromc.de.png
diff --git a/css/icons.css b/css/icons.css
@@ -0,0 +1,167 @@
+.footer-social-icons {
+    width: 350px;
+    display: block;
+    margin: 0 auto;
+    align-items: center;
+}
+.social-icon {
+    color: #fff;
+}
+ul.social-icons {
+    margin-top: 10px;
+}
+.social-icons li {
+    vertical-align: top;
+    display: inline;
+    height: 100px;
+}
+
+
+/* Twitter Icon */
+.fa-twitter {
+    padding:10px 12px;
+    -o-transition:.5s;
+    -ms-transition:.5s;
+    -moz-transition:.5s;
+    -webkit-transition:.5s;
+    transition: .5s;
+    background-color: #322f30;
+}
+.fa-twitter:hover {
+    background-color: #00aced;
+}
+
+/* Instagram Icon */
+.fa-instagram {
+  padding:10px 12px;
+  -o-transition:.5s;
+  -ms-transition:.5s;
+  -moz-transition:.5s;
+  -webkit-transition:.5s;
+  transition: .5s;
+  background-color: #322f30;
+}
+.fa-instagram:hover {
+  background-color: #00aced;
+}
+
+
+/* YouTube Icon */
+
+.fa-youtube {
+  padding:10px 12px;
+  -o-transition:.5s;
+  -ms-transition:.5s;
+  -moz-transition:.5s;
+  -webkit-transition:.5s;
+  transition: .5s;
+  background-color: #322f30;
+}
+.fa-youtube:hover {
+  background-color: #00aced;
+}
+
+
+/* Github Icon */
+
+.fa-github {
+    padding:10px 14px;
+    -o-transition:.5s;
+    -ms-transition:.5s;
+    -moz-transition:.5s;
+    -webkit-transition:.5s;
+    transition: .5s;
+    background-color: #322f30;
+}
+
+
+.fa-github:hover {
+    background-color: #5a32a3;
+}
+
+
+/* Discord Icon */
+
+.fa-discord {
+  padding:10px 12px;
+  -o-transition:.5s;
+  -ms-transition:.5s;
+  -moz-transition:.5s;
+  -webkit-transition:.5s;
+  transition: .5s;
+  background-color: #322f30;
+}
+.fa-discord:hover {
+  background-color: #00aced;
+}
+
+/* Dev.to Icon */
+.fa-dev {
+    padding:10px 12px;
+    -o-transition:.5s;
+    -ms-transition:.5s;
+    -moz-transition:.5s;
+    -webkit-transition:.5s;
+    transition: .5s;
+    background-color: #322f30;
+  }
+.fa-dev:hover {
+    background-color: #00aced;
+}
+
+/* Steam Icon */
+.fa-steam {
+    padding:10px 12px;
+    -o-transition:.5s;
+    -ms-transition:.5s;
+    -moz-transition:.5s;
+    -webkit-transition:.5s;
+    transition: .5s;
+    background-color: #322f30;
+  }
+.fa-steam:hover {
+    background-color: #00aced;
+}
+
+
+
+/* Add to Discord Button (in another way it's a icon lol)*/
+
+.add_to_discord {
+    display: flex;
+    align-items: center;
+    background-color: blueviolet;
+    border-radius: 8px;
+    border: 0;
+    font-weight: 600;
+    font-size: 17px !important;
+    line-height: 21px !important;
+    color: #fff;
+    padding: 27px;
+    height: 58px;
+    outline: none;
+}
+.add_to_discord svg {
+    padding-right: 20px;
+    box-sizing: unset;
+}
+.add_to_discord:hover {
+    background-color: rgb(152, 67, 233);
+    text-decoration: none;
+  }
+
+
+
+
+
+.header-icon {
+    color: #fff;
+}
+ul.header-icons {
+    margin-top: 10px;
+}
+.header-icons li {
+    vertical-align: top;
+    display: inline;
+    height: 100px;
+}
diff --git a/css/labels.css b/css/labels.css
@@ -0,0 +1,10 @@
+.label {
+    color: white;
+    padding: 8px;
+  }
+
+.success {background-color: #04AA6D;} /* Green */
+.info {background-color: #2196F3;} /* Blue */
+.warning {background-color: #ff9800;} /* Orange */
+.danger {background-color: #f44336;} /* Red */
+.other {background-color: #e7e7e7; color: black;} /* Gray */