add clear buttons

Author: seaona

index.html

@@ -18,14 +18,21 @@ <h1>MetaMask State Diff</h1>
   </div>  
   <div>
     <h2>State A</h2>
-    <textarea id="input1" placeholder="Paste MetaMask state here..."></textarea>
+    <div class="input-container">
+        <textarea id="input1" placeholder="Paste MetaMask state here..."></textarea>
+        <button onclick="clearInput('input1')" class="clear-button">Clear State</button>
+    </div>
   </div>
   <div>
     <h2>State B</h2>
-    <textarea id="input2" placeholder="Paste MetaMask state here..."></textarea>
+    <div class="input-container">
+        <textarea id="input2" placeholder="Paste MetaMask state here..."></textarea>
+        <button onclick="clearInput('input2')" class="clear-button">Clear State</button>
+    </div>
   </div>
   <div class="btn">
     <button onclick="showDiff()">Show Differences</button>
+    <button onclick="clearAll()" class="clear-all-button">Clear All</button>
   </div>
   <h2>Controllers Differences</h2>
   <div class="diff-container">

script.js

@@ -256,4 +256,15 @@ function showTooltip(event) {
   setTimeout(() => {
     tooltip.remove();
   }, 1000);
+}
+
+function clearInput(inputId) {
+    document.getElementById(inputId).value = '';
+}
+
+function clearAll() {
+    document.getElementById('input1').value = '';
+    document.getElementById('input2').value = '';
+    document.getElementById('diffOutput1').innerHTML = '';
+    document.getElementById('diffOutput2').innerHTML = '';
 }

styles.css

@@ -92,7 +92,8 @@ button {
 }
 
 .updated {
-    background-color: #fff95b;
+    background-color: #FFA500;
+    color: #333333;
 }
 
 .equal {
@@ -101,4 +102,55 @@ button {
 
 .controller-content div {
     margin-left: 20px;
+}
+
+.input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: flex-start;
+}
+
+.clear-button {
+    padding: 5px 10px;
+    background-color: #ff4444;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.clear-button:hover {
+    background-color: #cc0000;
+}
+
+.clear-all-button {
+    margin-left: 10px;
+    padding: 8px 16px;
+    background-color: #ff4444;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.clear-all-button:hover {
+    background-color: #cc0000;
+}
+
+.btn button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+.btn button:first-child {
+    background-color: #FFA500;  /* Yellow-orange color for the Show Differences button */
+    color: white;
+}
+
+.btn button:first-child:hover {
+    background-color: #FF8C00;  /* Darker yellow-orange on hover */
 }