Final UI Cleanup

Charcoal/Charcoal/Charcoal.cpp

@@ -89,7 +89,7 @@ Charcoal::~Charcoal() {
 
 void Charcoal::deleteBooks(const JSObject& thisobject, const JSArgs& args)
 {
-	MessageBoxA(NULL, "Delete Books Hook", "Delete Books Hook", MB_OK);
+	MessageBoxA(NULL, "Deleted a Book", "Deleted a Book", MB_OK);
 	// Get the first argument
 	JSValueRef arg = args[0];
 	JSContextRef ctx = JSGlobalContextCreate(NULL);
@@ -117,22 +117,18 @@ void Charcoal::grayscaleName(const JSObject& thisobject, const JSArgs& args) {
 }
 
 
-JSValue Charcoal::printAllBooks(const JSObject& thisObject, const JSArgs& args) {
+JSValue Charcoal::printAllBooks(const JSObject& thisObject, const JSArgs& args) { //debug function only, do not use as is currently
 
     std::string bookList = ebooks.printall();
 
     MessageBoxA(NULL, bookList.c_str(), "Book List", MB_OK); //this confirms there is an actual booklist.
 
-    //convert the book list string to a JavaScript string, but does not work. 
-
     JSStringRef jsBookList = JSStringCreateWithUTF8CString(bookList.c_str());
 
     JSValue jsValue = JSValue(jsBookList);
 
     JSStringRelease(jsBookList);
 
-    //return the JSValue object, I tried with JSString and the issue persisted. 
-
     return jsValue;
 
 }

Charcoal/x64/Debug/assets/books.html

@@ -98,14 +98,90 @@
 
         ul {
             text-align: center;
-            list-style-type: none; /* Remove bullets */
-            padding: 0; /* Remove padding */
-            margin: 0; /* Remove margins */
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
         }
+
+        .form-control {
+            font-family: system-ui, sans-serif;
+            font-size: 2rem;
+            font-weight: bold;
+            line-height: 1.1;
+            display: grid;
+            grid-template-columns: 1em auto;
+            gap: 0.5em;
+        }
+
         .list ul li:hover {
             left: 10px;
         }
 
+        .form-control {
+            display: grid;
+            grid-template-columns: 1.5em auto;
+            gap: .2em;
+            font-family: system-ui, sans-serif;
+            font-size: 1.2rem;
+            cursor: pointer;
+        }
+
+            .form-control input[type="checkbox"] {
+                appearance: none;
+                width: 1em;
+                height: 1em;
+                border: 2px solid #000000; /* Black border */
+                border-radius: 20%; /* Rounded checkbox */
+                background-color: #fff; /* White background */
+                transition: all 0.2s ease-in-out; /* Transition for hover effect */
+            }
+
+                .form-control input[type="checkbox"]:checked {
+                    background-color: #28282d; /* Checkbox color on check */
+                    border-color: #28282d; /* Border color changes on check */
+                }
+
+                .form-control input[type="checkbox"]:hover {
+                    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2); /* Adds a subtle hover shadow */
+                }
+
+                .form-control input[type="checkbox"]:focus {
+                    outline: none;
+                }
+
+        .strike {
+            position: relative;
+        }
+
+            .strike::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 0;
+                width: 100%;
+                height: 2px;
+                background-color: #5b5b5b;
+                animation: strikethrough 0.5s ease-in-out;
+            }
+
+        @keyframes strikethrough {
+            0% {
+                width: 0;
+            }
+
+            100% {
+                width: 100%;
+            }
+        }
+
+        .list {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+            text-align: center;
+            padding: 0;
+        }
     </style>
 
 </head>
@@ -124,23 +200,32 @@ <h3 id="result">BOOKS: </h3>
             <button class="button-28" onclick="gscalebutton()">Grayscale</button>
             <script>
                 function gscalebutton() {
-                    nameToGrayscale();
+                    var array = []
+                    var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
+                    for (var i = 0; i < checkboxes.length; i++) {
+                        array.push(checkboxes[i].id)
+                        alert(checkboxes[i].id);
+                        var toGray = parseInt(checkboxes[i].id); //sets string ID to int so it can be passed back.
+                        grayscaleName(toGray);
+                    }
+
+                    OnButtonClick();
                 }
             </script>
 
             <div id="bs"></div>
             <button class="button-28" onclick="rmbooksbutton()">Remove Books</button>
             <script>
                 function rmbooksbutton() {
-
                     var array = []
                     var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
-
                     for (var i = 0; i < checkboxes.length; i++) {
-                        array.push(checkboxes[i].value)
-                        alert(checkboxes[i].value);
+                        array.push(checkboxes[i].id)
+                        alert(checkboxes[i].id);
+                        var toDelete = parseInt(checkboxes[i].id); //sets string ID to int so it can be passed back.
+                        deleteBook(toDelete);
                     }
-                    deleteBook();
+
                     OnButtonClick();
                 }
             </script>

Charcoal/x64/Debug/assets/favorites.html

@@ -179,8 +179,7 @@
     <div id="divider"></div>
     <div id="contents">
         <div id="message">
-            TODO: Display library of either favorite books or tools?
-
+            Do you have any favorite books? No you don't!
         </div>
     </div>
 </body>

Charcoal/x64/Debug/assets/help.html

@@ -63,7 +63,7 @@
     <div id="contents">
 
         <div id="message">
-            This is the help page! No help for you :D
+            Welcome to the help page. To add a book, press the ADD BOOK button on the home page. To delete a book, press the DELETE BOOK button on the home page. 
         </div>
     </div>
 </body>