add signature fade + twitter-chan

- added the fade-in effect which i use on all of my projects cx
- added twitter-chan in the top left corner of the screen, click for an easter egg ..
- added meta description

3 files changed, 81 insertions, 3 deletions

diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..cdc056f
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,13 @@
+.hideme {
+    opacity: 0;
+}
+
+/* https://stackoverflow.com/questions/14396614/rotate-image-with-onclick */
+.rotated {
+    transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+}
+.rotateme { transition: all 0.5s ease; }
\ No newline at end of file
diff --git a/public/main.js b/public/main.js
new file mode 100644
index 0000000..30608a4
--- /dev/null
+++ b/public/main.js
@@ -0,0 +1,53 @@
+$(document).ready(function () {
+    $(window).scroll(function () {
+        $('.hideme').each(function (i) {
+            var bottom_of_object = $(this).position().top + $(this).outerHeight();
+            var bottom_of_window = $(window).scrollTop() + $(window).height();
+
+            if (bottom_of_window > bottom_of_object) {
+                $(this).animate({
+                    'opacity': '1'
+                }, 500);
+            }
+        });
+    });
+    $('.hideme').each(function (i) {
+        var bottom_of_object = $(this).position().top + $(this).outerHeight();
+        var bottom_of_window = $(window).scrollTop() + $(window).height();
+
+        if (bottom_of_window > bottom_of_object) {
+            $(this).animate({
+                'opacity': '1'
+            }, 500);
+        }
+        if (document.getElementById("heading")) {
+            $(document.getElementById("heading")).animate({
+                'opacity': '1'
+            }, 500);
+        }
+        if (document.getElementById("title-quotes")) {
+            $(document.getElementById("title-quotes")).animate({
+                'opacity': '1'
+            }, 1500);
+        }
+        // document.getElementById("heading").animate({
+        //     'opacity': '1'
+        // }, 500);
+    });
+});
+
+$(document).ready(function () {
+    var degrees = 0;
+    $('.rotateme').click(function rotateMe(e) {
+        degrees += 720;
+        //$('.rotateme').addClass('rotated'); // for one time rotation
+
+        $('.rotateme').css({
+            'transform': 'rotate(' + degrees + 'deg)',
+            '-ms-transform': 'rotate(' + degrees + 'deg)',
+            '-moz-transform': 'rotate(' + degrees + 'deg)',
+            '-webkit-transform': 'rotate(' + degrees + 'deg)',
+            '-o-transform': 'rotate(' + degrees + 'deg)'
+        });
+    });
+});
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index e08d8e5..9662316 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -3,12 +3,17 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <title>Twittlet</title>
-        <meta name="description" content="">
+        <link rel="stylesheet" href="main.css">
+        <meta name="description" content="Twittlet- A simple Twitter media downloader.">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+            rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
         <link rel="shortcut icon" href="https://strelizia.cc/5CuE4yiOCaLWkG1JdZC6Ji8Oi9tEpTBC.png" type="image/png">
+        <script src="https://code.jquery.com/jquery-3.5.0.min.js"
+            integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
+        <script src="main.js"></script>
     </head>
-    <body>
+    <body class="hideme">
         <style>
             @media (prefers-color-scheme: dark) {
                 html, body {
@@ -28,8 +33,15 @@
                 }
             }
         </style>
+
+        <a href="#">
+            <img class="rotateme" src="https://strelizia.cc/5CuE4yiOCaLWkG1JdZC6Ji8Oi9tEpTBC.png"
+                alt="icon but next to heading lol" height="53px" style="position: fixed; left: 5px; top: 5px;">
+        </a>
+
         <div class="container my-5">
             <h1 class="pcsTxt">Twittlet <%= tAddon %></h1>
+
             <%- modeRef %> 
             <p class="pcsTxt"><%= error %></p>
             <form action="<%= modeAction %> " method="post" class="my-4 form-inline">