docs: Revise index.html content and improve playground styling for better user experience

Author: hemanta-gayen

docs/index.html

@@ -20,8 +20,8 @@
   </nav>
   <div class="container">
 
-    <h1><span>Exprify</span> — Math Expression Parser &amp; Evaluator</h1>
-    <p>A powerful math expression parser and evaluator for JavaScript with runtime data-type checking, arbitrary-precision arithmetic, matrices, symbolic algebra, and more.</p>
+    <h1><span>Exprify</span> - Math Expression + Simplify</h1>
+    <p>Exprify is a JavaScript expression parser and evaluator. It is made for math applications, scientific computing, and complex workflows in the browser and Node.js. It supports basic arithmetic, variables, and defined functions. Exprify also covers advanced mathematical areas like unit conversion, matrix operations, complex number arithmetic, and symbolic manipulation.</p>
 
     <h2 id="install">Installation</h2>
     <div class="grid">
@@ -140,7 +140,7 @@ <h3>State Serialization</h3>
 
   </div>
   <div class="footer">
-    Exprify - <a href="https://github.com/code-hemu/exprify">GitHub</a>
+    <a href="https://github.com/code-hemu/exprify">Exprify - GitHub</a>
   </div>
 </body>
 

docs/script/playground.js

@@ -1,4 +1,4 @@
-import Exprify from '../dist/exprify.esm.js';
+import Exprify from '../../dist/exprify.esm.js';
 
 const expr = new Exprify();
 const output = document.getElementById('output');

docs/style/functions.css

@@ -11,7 +11,7 @@
   }
 
   nav {
-    background: #1a1a2e;
+    background: #666666;
     color: #fff;
     padding: 16px 40px;
     display: flex;
@@ -20,7 +20,7 @@
   }
 
   nav a {
-    color: #a0c4ff;
+    color: #ffffff;
     text-decoration: none;
   }
 
@@ -82,7 +82,7 @@
     border-radius: 16px;
     background: #fff;
     cursor: pointer;
-    font-size: 13px;
+    font-size: 15px;
   }
 
   .filter-group button:hover {
@@ -106,7 +106,7 @@
     padding: 10px 12px;
     background: #16213e;
     color: #fff;
-    font-size: 13px;
+    font-size: 15px;
     cursor: pointer;
     user-select: none;
     position: sticky;
@@ -135,14 +135,14 @@
   }
 
   td.cat {
-    font-size: 12px;
+    font-size: 15px;
   }
 
   td.cat .tag {
     display: inline-block;
     padding: 2px 8px;
     border-radius: 10px;
-    font-size: 11px;
+    font-size: 15px;
   }
 
   .tag-trig {
@@ -196,7 +196,7 @@
   }
 
   td.desc {
-    font-size: 14px;
+    font-size: 15px;
   }
 
   td.example {
@@ -208,14 +208,14 @@
 
   .count {
     color: #888;
-    font-size: 14px;
+    font-size: 15px;
     margin-bottom: 12px;
   }
 
   .footer {
     text-align: center;
     color: #888;
-    font-size: 14px;
+    font-size: 15px;
     padding: 40px;
     border-top: 1px solid #ddd;
     margin-top: 40px;

docs/style/index.css

@@ -11,7 +11,7 @@ body {
 }
 
 nav {
-  background: #1a1a2e;
+  background: #666666;
   color: #fff;
   padding: 16px 40px;
   display: flex;
@@ -20,7 +20,7 @@ nav {
 }
 
 nav a {
-  color: #a0c4ff;
+  color: #ffffff;
   text-decoration: none;
 }
 
@@ -75,7 +75,7 @@ code {
 }
 
 pre {
-  background: #1a1a2e;
+  background: #666666;
   color: #e0e0e0;
   padding: 16px;
   border-radius: 6px;

docs/style/playground.css

@@ -5,17 +5,17 @@
 }
 
 body {
-  background: #1a1a2e;
-  color: #e0e0e0;
+  background: #f8f9fa;
+  color: #333;
   font: 14px/1.5 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
   display: flex;
   height: 100vh;
 }
 
 .sidebar {
   width: 280px;
-  background: #16213e;
-  border-right: 1px solid #0f3460;
+  background: #fff;
+  border-right: 1px solid #ddd;
   padding: 16px;
   display: flex;
   flex-direction: column;
@@ -24,14 +24,14 @@ body {
 }
 
 .sidebar h2 {
-  font-size: 13px;
+  font-size: 15px;
   text-transform: uppercase;
   color: #e94560;
   letter-spacing: 1px;
 }
 
 .sidebar h3 {
-  font-size: 12px;
+  font-size: 15px;
   color: #888;
   margin-top: 8px;
 }
@@ -44,8 +44,8 @@ body {
 }
 
 .examples-list button {
-  background: #0f3460;
-  color: #a0c4ff;
+  background: #e8e8ee;
+  color: #333;
   border: none;
   border-radius: 4px;
   padding: 6px 10px;
@@ -55,26 +55,26 @@ body {
 }
 
 .examples-list button:hover {
-  background: #1a4a8a;
-  color: #fff;
+  background: #d0d0d8;
+  color: #000;
 }
 
 .vars-table {
   width: 100%;
-  font-size: 11px;
+  font-size: 15px;
   border-collapse: collapse;
 }
 
 .vars-table th {
   text-align: left;
   color: #e94560;
   padding: 2px 4px;
-  border-bottom: 1px solid #333;
+  border-bottom: 1px solid #ddd;
 }
 
 .vars-table td {
   padding: 2px 4px;
-  color: #ccc;
+  color: #555;
   font-family: monospace;
   word-break: break-all;
 }
@@ -93,7 +93,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  font-size: 13px;
+  font-size: 15px;
 }
 
 .output .entry {
@@ -108,11 +108,11 @@ body {
 }
 
 .output .expr {
-  color: #ffd700;
+  color: #b8860b;
 }
 
 .output .result {
-  color: #7bed9f;
+  color: #2e7d32;
   white-space: pre-wrap;
 }
 
@@ -121,12 +121,12 @@ body {
 }
 
 .output .sep {
-  border-bottom: 1px solid #222;
+  border-bottom: 1px solid #ddd;
   margin: 4px 0;
 }
 
 .input-area {
-  border-top: 1px solid #0f3460;
+  border-top: 1px solid #ddd;
   padding: 12px 16px;
   display: flex;
   gap: 8px;
@@ -141,9 +141,9 @@ body {
 
 .input-area input {
   flex: 1;
-  background: #0f3460;
-  color: #e0e0e0;
-  border: 1px solid #1a4a8a;
+  background: #fff;
+  color: #333;
+  border: 1px solid #ddd;
   border-radius: 4px;
   padding: 8px 12px;
   font: 14px/1.4 monospace;
@@ -155,5 +155,5 @@ body {
 }
 
 .input-area input::placeholder {
-  color: #555;
-}
+  color: #aaa;
+}