Styling

dstN · Apr 9, 2020 · e36ad9d · e36ad9d
1 parent f9aa981
commit e36ad9d
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ every player comes in a json-object. with following data within:
 * Emblem of the joined Club
 * League Nationality
 * League Nationality Flag
-* League league
+* League
 * League Link
 * Transfer Fee
 * Transfer Fee Tooltip

diff --git a/index.html b/index.html
@@ -2,23 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <style>
-      body>*{
-        display: none !important;
-        visibility: hidden !important;
-      }
-      .table {
-        display: none !important;
-        visibility: hidden !important;
-      }
-      .copy {
-        display: block !important;
-        visibility: visible !important;
-      }
-      .copy #copy, .copy button {
-        display: none;
-      }
-    </style>
+    <link rel="stylesheet" type="text/css" href="style.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
@@ -38,8 +22,8 @@
       </span>
     </div>
     <div class="copy">
+      <h1 class="loadingScrape">Scraping...</h1>
       <textarea id="copy" rows="12" cols="100"></textarea>
-      <br>
       <button onclick="copyFunction()">
         Copy to clipboard
       </button>

diff --git a/main.js b/main.js
@@ -6,7 +6,7 @@ function ajaxCall(iterate){
     url: getUrl + iterate,
     type: 'GET',
     beforeSend: function() {
-      $(".copy").prepend('<p class="loadingScrape">Scraping...</p>');
+      $(".copy .loadingScrape").addClass("visible");
     },
     complete: function() {
 
@@ -87,17 +87,19 @@ function ajaxCall(iterate){
       $("."+iterate+".after").append("<span>],</span>");
 
       if(iterate++ < endDate) {
+        $(".loadingScrape").removeClass("visible");
         ajaxCall(iterate);
       }
       else {
+        $(".loadingScrape").removeClass("visible");
         $(".before>p").not(":last-of-type").append("<span>,</span");
         $(".after:last-of-type").empty().append("<span>]</span>");
         var completeJSON = $(".table").text();
         var textarea = $("#copy");
         textarea.val(completeJSON);
-        $(".loadingScrape").hide(400);
-        $(".copy").prepend("<p>Scraping done!</p>");
-        $(".copy button").show(400);
+        $(".copy").prepend('<h1 class="doneScrape">Scraping done!</h1>');
+        $(".copy button").addClass("visible");
+        $("#copy").addClass("visible");
       }
     },
     error: function(error) {
@@ -108,9 +110,7 @@ function ajaxCall(iterate){
 ajaxCall(startDate);
 
 function copyFunction() {
-  $(".copy #copy").show(400);
-  var copy = $("#copy");
-  copy.select();
+  $("#copy").select();
   document.execCommand("copy");
   alert("Copied to clipboard!");
 }
diff --git a/style.css b/style.css
@@ -0,0 +1,127 @@
+html {
+  font-family: Verdana, sans-serif;
+  background-color: #252525;
+  color: #fff;
+  font-size: 16px;
+}
+::selection {
+  background: #e03100;
+  color: #fff;
+}
+::-moz-selection {
+  background: #e03100;
+  color: #fff;
+}
+body>*{
+  display: none !important;
+  visibility: hidden !important;
+}
+.table {
+  display: none !important;
+  visibility: hidden !important;
+}
+.copy {
+  display: block !important;
+  visibility: visible !important;
+}
+.loadingScrape {
+  opacity: 0;
+  visibility: hidden;
+  color: #fff;
+  text-align: center;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.7),
+    	         5px 5px 1px rgba(225, 225, 225, 0.7),
+               6px 6px 2px rgba(0,0,0,0.7),
+               10px 10px 1px rgba(180, 180, 180, 0.7),
+               11px 11px 2px rgba(0,0,0,0.7),
+               15px 15px 1px rgba(120, 120, 120, 0.7),
+               16px 16px 2px rgba(0,0,0,0.7);
+  -webkit-animation: text-snake 1s infinite alternate;
+  -moz-animation: text-snake 1s infinite alternate;
+  -ms-animation: text-snake 1s infinite alternate;
+  animation: text-snake 1s infinite alternate;
+}
+.visible {
+  opacity: 1;
+  visibility: visible;
+  transition: all ease-in-out 1.5s;
+}
+.doneScrape {
+  color: #fff;
+  text-align: center;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.7),
+               5px 5px 1px rgba(225, 225, 225, 0.7),
+               6px 6px 2px rgba(0,0,0,0.7),
+               10px 10px 1px rgba(180, 180, 180, 0.7),
+               11px 11px 2px rgba(0,0,0,0.7),
+               15px 15px 1px rgba(120, 120, 120, 0.7),
+               16px 16px 2px rgba(0,0,0,0.7);
+}
+textarea {
+  background-color: #111;
+  display: block;
+  color: #fff;
+  border: 0 none;
+  overflow: hidden;
+  box-shadow: 0 4px 16px -2px rgba(0,0,0,0.8);
+  padding: 0.5rem;
+  width: 75%;
+  height: 50%;
+  margin: auto;
+  font-family: Console, monospace;
+  opacity: 0;
+  visibility: hidden;
+  margin-bottom: 1rem;
+}
+textarea:focus {
+  outline: 0 none;
+}
+button {
+  flex: 1;
+  margin: auto;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  display: block;
+  padding: 1.5rem 3.125rem;
+  border: 0.5rem solid #284cff;
+  font-family: Console, monospace;
+  font-size: 1.5rem;
+  white-space: nowrap;
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+  background: transparent;
+  background-image: url(https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871);
+  background-repeat: repeat-x;
+  background-position: 0 -100%;
+  transition: 1.5s ease;
+  filter: hue-rotate(140deg);
+  opacity: 0;
+  visibility: hidden;
+}
+button:focus {
+  outline: 0 none;
+}
+button:hover {
+  background-position: 500% 100%;
+}
+@keyframes text-snake {
+  from {
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.7),
+       	         5px 5px 1px rgba(225, 225, 225, 0.7),
+       	         6px 6px 2px rgba(0,0,0,0.7),
+       	         10px 10px 1px rgba(180, 180, 180, 0.7),
+       	         11px 11px 2px rgba(0,0,0,0.7),
+       	         15px 15px 1px rgba(120, 120, 120, 0.7),
+       	         16px 16px 2px rgba(0,0,0,0.7);
+  }
+  to {
+    text-shadow: -1px 1px 2px rgba(0,0,0,0.7),
+       	         -5px 5px 1px rgba(225, 225, 225, 0.7),
+       	         -6px 6px 2px rgba(0,0,0,0.7),
+       	         -10px 10px 1px rgba(180, 180, 180, 0.7),
+       	         -11px 11px 2px rgba(0,0,0,0.7),
+       	         -15px 15px 1px rgba(120, 120, 120, 0.7),
+       	         -16px 16px 2px rgba(0,0,0,0.7);
+  }
+}