Added colour to represent not in the database

content.js

 var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited_true';
 var MOUSE_VISITED_CLASSNAME_FALSE = 'crx_mouse_visited_false';
+var MOUSE_VISITED_CLASSNAME_NOT_IN_DB = 'crx_mouse_visited_not_in_db';
 var srcName;
 var dietNum = 999;
 
@@ -41,6 +42,8 @@ document.addEventListener('mousemove', function (e) {
               srcElement.classList.add(MOUSE_VISITED_CLASSNAME);
             } else if (responseText == "0") {
               srcElement.classList.add(MOUSE_VISITED_CLASSNAME_FALSE);
+            } else if (responseText == "2") {
+              srcElement.classList.add(MOUSE_VISITED_CLASSNAME_NOT_IN_DB)
             }
           },
           function(failureStatus) {

database.php

@@ -15,7 +15,7 @@ $stmt->execute();
 $stmt->bind_result($containsgluten, $containsdairy, $containscorn, $containsmeat);
 $result = $stmt->fetch();
 if ($result == false) {
-  echo "8";
+  echo "2";
 } else {
   if (!(($containsdairy & boolval(1 & $dietNum)) | ($containsmeat & boolval(2 & $dietNum)) | ($containscorn & boolval(4 & $dietNum)) | ($containsgluten & boolval(8 & $dietNum)))) {
     echo "1";

style.css

@@ -44,7 +44,7 @@ body {
 .h-text {
     color: white;
     text-align: center;
-    
+
     font-size: 18px;
     padding: 1px;
     vertical-align: middle;
@@ -52,7 +52,7 @@ body {
 
 /* ----- topbar ----- */
 .topbar {
-    height: 30px;   
+    height: 30px;
     overflow: hidden;
 }
 
@@ -119,7 +119,7 @@ body {
     user-select: none;
     color: #494949;
 }
-  
+
 .container input {
     position: absolute;
     opacity: 0;
@@ -127,7 +127,7 @@ body {
     height: 0;
     width: 0;
 }
-  
+
 .checkmark {
     position: absolute;
     top: 0;
@@ -139,26 +139,26 @@ body {
     border-radius: 50%;
     box-shadow: 0 0 1px #adadad;
 }
-  
+
 .container:hover input ~ .checkmark {
     background-color: #d4d4d4;
     transition: ease 0.3s;
 }
-  
+
 .container input:checked ~ .checkmark {
     background-color: #df1b1b;
 }
-  
+
 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }
-  
+
 .container input:checked ~ .checkmark:after {
     display: block;
 }
-  
+
 .container .checkmark:after {
       vertical-align: center;
 }
@@ -190,10 +190,16 @@ body {
 
 .crx_mouse_visited_true {
     background-clip: #bcd5eb!important;
-    outline: 2px solid #47bb47!important;
+    outline: 3px solid #51c2a9!important;
 }
 
 .crx_mouse_visited_false {
     background-clip: #bcd5eb!important;
-    outline: 2px solid #fa1100!important;
+    outline: 3px solid #df1b1b!important;
+}
+
+.crx_mouse_visited_not_in_db {
+  background-clip: #bcd5eb!important;
+  outline: 3px solid #FFA500!important;
+
 }