D2S Editor Pretty much finished, seems to be working 100%

res/app.js

@@ -376,12 +376,25 @@ $(document).ready(function () {
         });
     });
 
+
+    $(".form-check-input").click(function () {
+        var $checkbox = $(this);
+        var currentValue = $checkbox.val();
+
+        // Toggle the value between 1 and 0
+        var newValue = currentValue === '1' ? '0' : '1';
+
+        // Update the value of the checkbox
+        $checkbox.val(newValue);
+    });
+
+
     // Get the value of the input named "filePath"
     function constructURL(cmd, name, value, filePath) {
         return "/saveCharacter.php?cmd=" + cmd + "&name=" + name + "&value=" + value + "&filePath=" + filePath;
     }
 
-    $(".charform input[name='Difficulty'], .charform .skill, #CharacterName, #CharacterClass, #CharacterLevel, #CharacterClass, .stats input").change(function () {
+    $(".charform input[name='Difficulty'], .charform .skill, #CharacterName, #CharacterClass, #CharacterLevel, #CharacterClass, .stats input, .form-check-input").change(function () {
         var name = $(this).attr("name");
         var newValue = $(this).val();
 
@@ -395,22 +408,27 @@ $(document).ready(function () {
         console.log(url);
         console.log(newValue)
 
-
         $.get(url, function (response) {
             if (cmd == 'CharacterName') {
                 location.reload();
             }
             console.log(response);
         });
-
-
-
     });
 
+// colorize the acts
+    var acts = ['Act 1', 'Act 2', 'Act 3', 'Act 4', 'Act 5'];
 
+    for (var i = 0; i < acts.length; i++) {
+        var act = acts[i];
+        var className = 'act' + (i + 1);
 
-
-
+        // Find the checkbox with a label containing the act
+        $('input[type="checkbox"] + label:contains("' + act + '")').each(function () {
+            // Add a class to the parent div
+            $(this).parent().addClass(className);
+        });
+    }
 
 
 });// end document.ready

res/style.css

@@ -332,3 +332,24 @@ hr.style-four {
     border: 0;
     box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
 }
+
+.act1 {
+    border: 1px solid #ddd;
+    background: #d0fffe;
+}
+.act2 {
+    border: 1px solid #ddd;
+    background: #fffddb;
+}
+.act3 {
+    border: 1px solid #ddd;
+    background: #e4ffde;
+}
+.act4 {
+    border: 1px solid #ddd;
+    background: #ffd3fd;
+}
+.act5 {
+    border: 1px solid #ddd;
+    background: #ffe7d3;
+}