improved design

Author: jeevasusej

docs/index.html

@@ -4,6 +4,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>ValueMapper</title>
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
+
   <style>
   body {
     font-family: 'Segoe UI', Roboto, sans-serif;
@@ -30,20 +32,24 @@
   }
 
   pre {
-    background: #2d2d2d;
-    color: #f8f8f2;
-    padding: 1rem;
-    border-radius: 6px;
-    overflow-x: auto;
-  }
+  background-color: #1e1e1e;
+  color: #dcdcdc;
+  font-family: 'Fira Code', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  white-space: pre;
+  margin-bottom: 1.5rem;
+  border: 1px solid #444;
+}
+
+code {
+  background: none;
+  color: inherit;
+}
 
-  code {
-    font-family: 'Fira Code', monospace;
-    font-size: 0.95em;
-    background: #f0f0f0;
-    padding: 0.2em 0.4em;
-    border-radius: 4px;
-  }
 
   table {
     width: 100%;
@@ -101,6 +107,30 @@
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.05);
   }
+  button, .button-link {
+  background-color: #2d3748;
+  color: #ffffff;
+  padding: 0.6rem 1.2rem;
+  font-size: 15px;
+  font-weight: 600;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+  transition: background-color 0.25s ease, transform 0.1s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+button:hover, .button-link:hover {
+  background-color: #4a5568;
+  transform: translateY(-1px);
+}
+
+button:active, .button-link:active {
+  transform: translateY(0);
+}
+
 </style>
 
 </head>