add feature to highlight json failures

public/css/styles.css

@@ -521,9 +521,16 @@
   .static {
     position: static;
   }
+  .block {
+    display: block;
+  }
   .grid {
     display: grid;
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .text-center {
     text-align: center;
   }
@@ -573,6 +580,11 @@
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-outline-style {
   syntax: "*";
   inherits: false;

public/index.html

@@ -18,9 +18,9 @@
   </form>
 
   <div id="resumePreviewSection">
-    <h3>AI-Generated Candidate Profile:</h3>
+    <label for="profileJson">Candidate Profile (Editable JSON):</label>
-    <p>Displayed in JSON format.  Edit as needed.</p>
+    <textarea id="profileJson" style="width: 100%; height: 200px; font-family: monospace;"></textarea>
-    <textarea id="profileJson" rows="10"></textarea>
+    <p id="jsonError" style="color: red; display: none;">Invalid JSON! Please correct it.</p>
     <label for="jobDescription">Paste Job Description:</label>
     <textarea id="jobDescription" rows="5" required></textarea>
     <label for="keyPoints">Key Points for Letter (optional):</label>

public/js/script.js

@@ -1,3 +1,24 @@
+const profileJsonTextarea = document.getElementById("profileJson");
+
+// Function to validate JSON input live
+function validateJsonInput() {
+  const errorText = document.getElementById("jsonError");
+
+  try {
+      // Try parsing JSON
+      // TODO Update these styles to be correct tailwind classes for constancy
+      JSON.parse(profileJsonTextarea.value);
+      profileJsonTextarea.style.border = "2px solid green"; // Green border on valid input
+      errorText.style.display = "none";
+  } catch (e) {
+      profileJsonTextarea.style.border = "2px solid red"; // Red border on error
+      errorText.style.display = "block";
+  }
+}
+
+profileJsonTextarea.addEventListener("input", validateJsonInput);
+
+
 document.getElementById('uploadForm').addEventListener('submit', async function (event) {
   event.preventDefault();
 
@@ -134,3 +155,5 @@ function formatCoverLetter(rawText) {
     .replace(/<\/signature>/g, '') 
     .replace(/<[^>]+>/g, ''); // Remove all XML-like tags
 }
+
+