Implemented Boostrap 4

vassdeniss · Jan 27, 2021 · 88e9a2e · 88e9a2e
1 parent e4d1d9a
commit 88e9a2e
Show file tree

Hide file tree

Showing 8 changed files with 9,396 additions and 355 deletions.
diff --git a/bootstrap.css b/bootstrap.css
diff --git a/bootstrap.min.css b/bootstrap.min.css
diff --git a/index.html b/index.html
diff --git a/index.unmin.html b/index.unmin.html
diff --git a/main.css b/main.css
@@ -45,18 +45,21 @@ p {
   color: white;
 }
 
+
 table, th, td {
   text-align: center;
   padding: 15px;
   border-radius: 55px;
+  border-collapse: separate;
 }
 
-table {
-  width: 90%;
+button:focus {
+  outline: none;
 }
 
-.border {
+th, td {
   border: 2px solid orange;
+  transition: 0.4s;
 }
 
 #pizza {
@@ -68,7 +71,7 @@ table {
   background: rgba(255, 157, 0, 0.4);
   padding: 5px;
   width: 450px;
-  height: 30px;
+  height: 45px;
   text-align: center;
   transition-duration: 0.4s;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
@@ -79,7 +82,7 @@ table {
   background: rgba(255, 157, 0, 0.4);
   padding: 5px;
   width: 450px;
-  height: 30px;
+  height: 45px;
   text-align: center;
   transition-duration: 0.4s;
   box-shadow: 0 8px 16px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
@@ -153,7 +156,7 @@ table {
 
 body {font-family: Arial, Helvetica, sans-serif;}
 
-.modal {
+.themodal {
   display: none; 
   position: fixed; 
   z-index: 1;
@@ -170,41 +173,41 @@ body {font-family: Arial, Helvetica, sans-serif;}
   animation-duration: 0.4s
 }
 
-.modal-content {
-  position: fixed;
-  bottom: 0;
+.themodal-content {
+  position: sticky;
+  top: 0;
   background-color: #fefefe;
   color: black;
   width: 100%;
   -webkit-animation-name: slideIn;
   -webkit-animation-duration: 0.4s;
   animation-name: slideIn;
-  animation-duration: 0.4s
+  animation-duration: 0.4s;
 }
 
-.modal-header {
-  padding: 2px 16px;
+.themodal-header {
+  padding: 30px 15px 20px 25px;
   background-color: orange;
   color: black;
 }
 
-.modal-body {padding: 2px 16px;}
+.themodal-body {padding: 0px 15px 20px 25px;}
 
-.modal-close {
+.themodal-close {
   -webkit-animation-name: fadeOut;
   -webkit-animation-duration: 0.4s;
   animation-name: fadeOut;
   animation-duration: 0.4s;
 }
 
 @-webkit-keyframes slideIn {
-  from {bottom: -300px; opacity: 0} 
-  to {bottom: 0; opacity: 1}
+  from {top: -300px; opacity: 0} 
+  to {top: 0; opacity: 1}
 }
 
 @keyframes slideIn {
-  from {bottom: -300px; opacity: 0}
-  to {bottom: 0; opacity: 1}
+  from {top: -300px; opacity: 0}
+  to {top: 0; opacity: 1}
 }
 
 @-webkit-keyframes fadeIn {

diff --git a/main.js b/main.js
@@ -65,19 +65,16 @@ window.onload = defaultName;
 window.setInterval(autoSave, 60000);
 
 function openModal() {
-    modal = document.getElementById("poorModal");
-    modal.style.display = "block";
+    document.getElementById("poorModal").style.display = "block";
 }
 
 function openModalSave() {
-    modal2 = document.getElementById("save");
-    modal2.style.display = "block";
+    document.getElementById("save").style.display = "block";
     autoCLose();
 }
 
 function openModalLoad() {
-    modal3 = document.getElementById("load");
-    modal3.style.display = "block";
+    document.getElementById("load").style.display = "block";
     autoCLose();
 }
 
@@ -87,28 +84,23 @@ function autoSave() {
 }
 
 function detectAndrej() {
-    modal4 = document.getElementById("ando");
-    modal4.style.display = "block";
+    document.getElementById("ando").style.display = "block";
 }
 
 function newUpgrade() {
-    modal5 = document.getElementById("newUpgrade");
-    modal5.style.display = "block";
+    document.getElementById("newUpgrade").style.display = "block";
 }
 
 function newBuilding() {
-    modal6 = document.getElementById("newBuilding");
-    modal6.style.display = "block";
+    document.getElementById("newBuilding").style.display = "block";
 }
 
 function cheater() {
-    modal7 = document.getElementById("cheater");
-    modal7.style.display = "block";
+    document.getElementById("cheater").style.display = "block"
 }
 
-function starOneShow() {
-    modal8 = document.getElementById("star"); 
-    modal8.style.display = "block";
+function starOneShow() { 
+    document.getElementById("star").style.display = "block";
 }
 
 window.onclick = function(event) {
@@ -122,69 +114,69 @@ window.onclick = function(event) {
     modal8 = document.getElementById("star"); 
 
     if (event.target == modal) {
-        modal.classList.add("modal-close");
+        modal.classList.add("themodal-close");
         setTimeout(function() {
             modal.style.display = "none";
-            modal.classList.remove("modal-close");
+            modal.classList.remove("themodal-close");
         }, 200);
     } else if (event.target == modal2) {
-        modal2.classList.add("modal-close");
+        modal2.classList.add("themodal-close");
         setTimeout(function() {
             modal2.style.display = "none";
-            modal2.classList.remove("modal-close");
+            modal2.classList.remove("themodal-close");
         }, 200);
     } else if (event.target == modal3) {
-        modal3.classList.add("modal-close");
+        modal3.classList.add("themodal-close");
         setTimeout(function() {
             modal3.style.display = "none";
-            modal3.classList.remove("modal-close");
+            modal3.classList.remove("themodal-close");
         }, 200);
     } else if (event.target == modal4) {
-        modal4.classList.add("modal-close");
+        modal4.classList.add("themodal-close");
         setTimeout(function() {
             modal4.style.display = "none";
-            modal4.classList.remove("modal-close");
+            modal4.classList.remove("themodal-close");
         }, 200);
     } else if (event.target == modal5) {
-        modal5.classList.add("modal-close");
+        modal5.classList.add("themodal-close");
         setTimeout(function() {
             modal5.style.display = "none";
-            modal5.classList.remove("modal-close");
+            modal5.classList.remove("themodal-close");
         }, 200);
     } else if (event.target == modal6) {
-        modal6.classList.add("modal-close");
+        modal6.classList.add("themodal-close");
         setTimeout(function() {
             modal6.style.display = "none";
-            modal6.classList.remove("modal-close");
+            modal6.classList.remove("themodal-close");
         }, 200);
     } else if (event.target == modal7) {
-        modal7.classList.add("modal-close");
+        modal7.classList.add("themodal-close");
         setTimeout(function() {
             modal7.style.display = "none";
-            modal7.classList.remove("modal-close");
+            modal7.classList.remove("themodal-close");
         }, 200);
     } else if (event.target == modal8) {
-        modal8.classList.add("modal-close");
+        modal8.classList.add("themodal-close");
         setTimeout(function() {
             modal8.style.display = "none";
-            modal8.classList.remove("modal-close");
+            modal8.classList.remove("themodal-close");
         }, 200);
     }
 }
 
 function autoCLose() {
     setTimeout(function() {
         if (modal2.style.display == "block") {
-            modal2.classList.add("modal-close");
+            modal2.classList.add("themodal-close");
             setTimeout(function() {
                 modal2.style.display = "none";
-                modal2.classList.remove("modal-close");
+                modal2.classList.remove("themodal-close");
             }, 200);
         } else if (modal3.style.display == "block") {
-            modal3.classList.add("modal-close");
+            modal3.classList.add("themodal-close");
             setTimeout(function() {
                 modal3.style.display = "none";
-                modal3.classList.remove("modal-close");
+                modal3.classList.remove("themodal-close");
             }, 200);
         }
     }, 2000);
@@ -235,7 +227,6 @@ function dark() {
     darkOn = !darkOn;
     var element = document.body; 
     element.classList.toggle("dark");
-    $("th, td").toggleClass("borderWhite");
     $(".fancybutton").toggleClass("fancybuttonWhite");
     $(".fancyBorder").toggleClass("fancyBorderWhite");
     $(".fancyBorderPlain").toggleClass("fancyBorderPlainWhite");
@@ -601,15 +592,15 @@ function orange() {
     $(".fancyBorder").css({"background": "rgba(255, 157, 0, 0.4)"});
     $(".fancybutton").css({"border": "2px solid orange"});
     $(".fancyBorderPlain").css({"border": "2px solid orange"});
-    $(".border").css({"border": "2px solid orange"});
+    $("td, th").css({"border": "2px solid orange"});
 
     $(".fancybutton").hover(function(){
         $(this).css({"border": "2px solid orange", "background-color": "orange"});
         }, function(){
         $(this).css({"border": "2px solid orange", "background-color": "transparent"});
     });
 
-    $(".modal-header").css({"background-color": "orange"});
+    $(".themodal-header").css({"background-color": "orange"});
 }
 
 function red() {
@@ -626,15 +617,15 @@ function red() {
     $(".fancyBorder").css({"background": "rgba(255, 0, 0, 0.4)"});
     $(".fancybutton").css({"border": "2px solid red"});
     $(".fancyBorderPlain").css({"border": "2px solid red"});
-    $(".border").css({"border": "2px solid red"});
+    $("td, th").css({"border": "2px solid red"});
 
     $(".fancybutton").hover(function(){
         $(this).css({"border": "2px solid red", "background-color": "red"});
         }, function(){
         $(this).css({"border": "2px solid red", "background-color": "transparent"});
     });
 
-    $(".modal-header").css({"background-color": "red"});
+    $(".themodal-header").css({"background-color": "red"});
 }
 
 function green() {
@@ -651,15 +642,15 @@ function green() {
     $(".fancyBorder").css({"background": "rgba(30, 255, 0, 0.4)"});
     $(".fancybutton").css({"border": "2px solid green"});
     $(".fancyBorderPlain").css({"border": "2px solid green"});
-    $(".border").css({"border": "2px solid green"});
+    $("td, th").css({"border": "2px solid green"});
 
     $(".fancybutton").hover(function(){
         $(this).css({"border": "2px solid green", "background-color": "green"});
         }, function(){
         $(this).css({"border": "2px solid green", "background-color": "transparent"});
     });
 
-    $(".modal-header").css({"background-color": "green"});
+    $(".themodal-header").css({"background-color": "green"});
 }
 
 function yellow() {
@@ -676,15 +667,15 @@ function yellow() {
     $(".fancyBorder").css({"background": "rgba(217, 255, 0, 0.4)"});
     $(".fancybutton").css({"border": "2px solid yellow"});
     $(".fancyBorderPlain").css({"border": "2px solid yellow"});
-    $(".border").css({"border": "2px solid yellow"});
+    $("td, th").css({"border": "2px solid yellow"});
 
     $(".fancybutton").hover(function(){
         $(this).css({"border": "2px solid yellow", "background-color": "yellow"});
         }, function(){
         $(this).css({"border": "2px solid yellow", "background-color": "transparent"});
     });
 
-    $(".modal-header").css({"background-color": "yellow"});
+    $(".themodal-header").css({"background-color": "yellow"});
 }
 
 function blue() {
@@ -701,15 +692,15 @@ function blue() {
     $(".fancyBorder").css({"background": "rgba(17, 0, 255, 0.4)"});
     $(".fancybutton").css({"border": "2px solid blue"});
     $(".fancyBorderPlain").css({"border": "2px solid blue"});
-    $(".border").css({"border": "2px solid blue"});
+    $("td, th").css({"border": "2px solid blue"});
 
     $(".fancybutton").hover(function(){
         $(this).css({"border": "2px solid blue", "background-color": "blue"});
         }, function(){
         $(this).css({"border": "2px solid blue", "background-color": "transparent"});
     });
 
-    $(".modal-header").css({"background-color": "blue"});
+    $(".themodal-header").css({"background-color": "blue"});
 }
 
 function purple() {
@@ -726,15 +717,15 @@ function purple() {
     $(".fancyBorder").css({"background": "rgba(183, 0, 255, 0.4)"});
     $(".fancybutton").css({"border": "2px solid purple"});
     $(".fancyBorderPlain").css({"border": "2px solid purple"});
-    $(".border").css({"border": "2px solid purple"});
+    $("td, th").css({"border": "2px solid purple"});
 
     $(".fancybutton").hover(function(){
         $(this).css({"border": "2px solid purple", "background-color": "purple"});
         }, function(){
         $(this).css({"border": "2px solid purple", "background-color": "transparent"});
     });
 
-    $(".modal-header").css({"background-color": "purple"});
+    $(".themodal-header").css({"background-color": "purple"});
 }
 
 function colorChecker() {
@@ -777,8 +768,8 @@ function colorChecker() {
                 $(this).css({"color": "white"});
             });
         }
-        $(".modal-content").css({"background-color": "black"});
-        $(".modal-content").css({"color": "white"});
+        $(".themodal-content").css({"background-color": "black"});
+        $(".themodal-content").css({"color": "white"});
     } else if (darkOn == false) {
         $(".icons").css({"color": "black"});
         if (orangeTrue == true) {
@@ -818,8 +809,8 @@ function colorChecker() {
                 $(this).css({"color": "black"});
             });
         }
-        $(".modal-content").css({"background-color": "white"});
-        $(".modal-content").css({"color": "black"});
+        $(".themodal-content").css({"background-color": "white"});
+        $(".themodal-content").css({"color": "black"});
     }   
 }
 

diff --git a/main.min.css b/main.min.css
diff --git a/main.min.js b/main.min.js