Dark Mode added

RustColeone · Oct 21, 2020 · d8d13ee · d8d13ee
1 parent 6ac4fc4
commit d8d13ee
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 21 deletions.
diff --git a/SmartHunter/Resources/PAGE.html b/SmartHunter/Resources/PAGE.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="HandheldFriendly" content="true">
@@ -26,6 +27,10 @@
                 font-size: 50px;
             }
 
+        a {
+            color: rgb(83, 83, 83);
+        }
+
         /* Style the top navigation bar */
         .topnav {
             overflow: hidden;
@@ -96,7 +101,6 @@
         .collapsible {
             margin-top: 10px;
             background-color: #eee;
-            color: black;
             cursor: pointer;
             padding: 10px;
             width: 100%;
@@ -151,13 +155,14 @@
 
     <div class="header" id="header">
         <h1>Http Smart Hunter</h1>
-        <p>Dynamic web end for monster data display based on <a href="https://github.com/gabrielefilipp/SmartHunter" style="color:black;">SmartHunter</a></p>
+        <p>Dynamic web end for monster data display based on <a href="https://github.com/gabrielefilipp/SmartHunter">SmartHunter</a></p>
     </div>
 
     <div class="topnav">
         <a href="#Monster1">Monster 1</a>
         <a href="#Monster2">Monster 2</a>
         <a href="#Monster3">Monster 3</a>
+        <a onclick="darkMode()">Dark Mode</a>
         <a href="#Player" style="float:right">Player</a>
     </div>
 
@@ -167,7 +172,7 @@ <h1>Http Smart Hunter</h1>
                 <h2 class="MonsterNameData">Monster Name Here</h2>
                 <h5 class="MonsterSizeData">Monster Size Data</h5>
                 <div class="fakeimg" style="height:80px;">
-                    <div style="text-align: center;padding-bottom: 10px;" class = "MonsterHealthLevel">Health Percentage</div>
+                    <div style="text-align: center;padding-bottom: 10px;" class="MonsterHealthLevel">Health Percentage</div>
                     <div class="MonsterHealthBar"><div class="MonsterHealthBarField" style="width:30%"></div></div>
                 </div>
                 <button type="button" class="collapsible">Part and Status Data (Click)</button>
@@ -179,7 +184,7 @@ <h5 class="MonsterSizeData">Monster Size Data</h5>
                 <h2 class="MonsterNameData">Monster Name Here</h2>
                 <h5 class="MonsterSizeData">Monster Size Data</h5>
                 <div class="fakeimg" style="height:80px;">
-                    <div style="text-align: center;padding-bottom: 10px;" class = "MonsterHealthLevel">Health Percentage</div>
+                    <div style="text-align: center;padding-bottom: 10px;" class="MonsterHealthLevel">Health Percentage</div>
                     <div class="MonsterHealthBar"><div class="MonsterHealthBarField" style="width:30%"></div></div>
                 </div>
                 <button type="button" class="collapsible">Part and Status Data (Click)</button>
@@ -191,7 +196,7 @@ <h5 class="MonsterSizeData">Monster Size Data</h5>
                 <h2 class="MonsterNameData">Monster Name Here</h2>
                 <h5 class="MonsterSizeData">Monster Size Data</h5>
                 <div class="fakeimg" style="height:80px;">
-                    <div style="text-align: center;padding-bottom: 10px;" class = "MonsterHealthLevel">Health Percentage</div>
+                    <div style="text-align: center;padding-bottom: 10px;" class="MonsterHealthLevel">Health Percentage</div>
                     <div class="MonsterHealthBar"><div class="MonsterHealthBarField" style="width:30%"></div></div>
                 </div>
                 <button type="button" class="collapsible">Part and Status Data (Click)</button>
@@ -233,24 +238,64 @@ <h3>Info</h3>
     </div>
 
     <div class="footer">
-        <h2><a href="#header" style="color:black;text-decoration: none;">Back to Top</a></h2>
+        <h2><a href="#header" style="text-decoration: none;">Back to Top</a></h2>
     </div>
 
 </body>
 <script>
+    function darkMode(){
+    var textColor = "gray"
+
+    if(document.querySelectorAll('h1')[0].style.color == "gray"){
+    textColor = "black"
+    console.log("turn to white")
+    document.body.style.backgroundColor="white";
+    document.querySelectorAll(".card").forEach(e => e.style.backgroundColor = "white");
+    document.querySelectorAll(".collapsible").forEach(e => e.style.backgroundColor = "#eeeeee");
+    document.querySelectorAll(".fakeimg").forEach(e => e.style.backgroundColor = "#eeeeee");
+    document.querySelectorAll(".content").forEach(e => e.style.backgroundColor = "#f1f1f1");
+    document.querySelectorAll(".header").forEach(e => e.style.backgroundColor = "#dddddd");
+    document.querySelectorAll(".row").forEach(e => e.style.backgroundColor = "#dddddd");
+    document.querySelectorAll(".rightcolumn").forEach(e => e.style.backgroundColor = "#dddddd");
+    document.querySelectorAll(".footer").forEach(e => e.style.backgroundColor = "#dddddd");
+    }
+    else{
+    textColor = "gray"
+    console.log("turn to black")
+    document.body.style.backgroundColor="black";
+    document.querySelectorAll(".card").forEach(e => e.style.backgroundColor = "#303030");
+    document.querySelectorAll(".collapsible").forEach(e => e.style.backgroundColor = "#202020");
+    document.querySelectorAll(".fakeimg").forEach(e => e.style.backgroundColor = "#202020");
+    document.querySelectorAll(".content").forEach(e => e.style.backgroundColor = "#101010");
+    document.querySelectorAll(".header").forEach(e => e.style.backgroundColor = "#202020");
+    document.querySelectorAll(".row").forEach(e => e.style.backgroundColor = "#202020");
+    document.querySelectorAll(".rightcolumn").forEach(e => e.style.backgroundColor = "#202020");
+    document.querySelectorAll(".footer").forEach(e => e.style.backgroundColor = "#202020");
+    }
+    document.querySelectorAll('h1').forEach(e => e.style.color = textColor);
+    document.querySelectorAll('h2').forEach(e => e.style.color = textColor);
+    document.querySelectorAll('h3').forEach(e => e.style.color = textColor);
+    document.querySelectorAll('h4').forEach(e => e.style.color = textColor);
+    document.querySelectorAll('h5').forEach(e => e.style.color = textColor);
+    document.querySelectorAll('div').forEach(e => e.style.color = textColor);
+    document.querySelectorAll('button').forEach(e => e.style.color = textColor);
+    document.querySelectorAll('p').forEach(e => e.style.color = textColor);
+    }
+
+
     var coll = document.getElementsByClassName("collapsible");
     var i;
 
     for (i = 0; i < coll.length; i++) {
-        coll[i].addEventListener("click", function() {
-            this.classList.toggle("active");
-            var content = this.nextElementSibling;
-            if (content.style.display === "block") {
-            content.style.display = "none";
-            } else {
-            content.style.display = "block";
-            }
-        });
+    coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.display === "block") {
+    content.style.display = "none";
+    } else {
+    content.style.display = "block";
+    }
+    });
     }
     var update = setInterval(updateData, 1000);
     var xhttp = new XMLHttpRequest();
@@ -271,23 +316,23 @@ <h2><a href="#header" style="color:black;text-decoration: none;">Back to Top</a>
     var monsterStatusField = document.getElementsByClassName("MonsterStatusData");
 
     for (i = 0; i < monsterNameField.length; i++) {
-        monsterNameField[i].innerHTML = monsterData.monsters[i].monsterName;
+    monsterNameField[i].innerHTML = monsterData.monsters[i].monsterName;
     }
     for (i = 0; i < monsterSizeField.length; i++) {
-        monsterSizeField[i].innerHTML = monsterData.monsters[i].monsterSize;
+    monsterSizeField[i].innerHTML = monsterData.monsters[i].monsterSize;
     }
     for (i = 0; i < monsterHealthField.length; i++) {
-        monsterHealthField[i].innerHTML = monsterData.monsters[i].monsterCurrentHealth + "/" + monsterData.monsters[i].monsterMaxHealth;
+    monsterHealthField[i].innerHTML = monsterData.monsters[i].monsterCurrentHealth + "/" + monsterData.monsters[i].monsterMaxHealth;
     }
     for (i = 0; i < monsterHealthBar.length; i++) {
-        monsterHealthBar[i].style.width = (monsterData.monsters[i].monsterCurrentHealth * 100 / monsterData.monsters[i].monsterMaxHealth) + "%";
+    monsterHealthBar[i].style.width = (monsterData.monsters[i].monsterCurrentHealth * 100 / monsterData.monsters[i].monsterMaxHealth) + "%";
     }
     for (i = 0; i < monsterStatusField.length; i++) {
-        monsterStatusField[i].innerHTML = monsterData.monsters[i].monsterStatus;
+    monsterStatusField[i].innerHTML = monsterData.monsters[i].monsterStatus;
     }
     })
     .catch(error => {});;
-    
+
     }
 </script>
 </html>
diff --git a/SmartHunter/bin/Debug/SmartHunter.exe b/SmartHunter/bin/Debug/SmartHunter.exe