Improved the UI a bit

tusharad · tusharad · commit 5e87d53575ea · 2024-11-14T17:59:06.000+05:30
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SQL to Mermaid ER Diagram</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
     <style>
         body {
             font-family: 'Inter', sans-serif;
@@ -14,16 +15,17 @@
             display: flex;
             flex-direction: column;
             height: 100vh;
-            background-color: #f4f4f8;
+            background-color: #f0f0f5;
         }
 
         header {
-            background-color: #4CAF50;
+            background-color: #3c40c6;
             color: white;
-            padding: 10px 20px;
+            padding: 15px;
             text-align: center;
-            font-size: 1.5rem;
+            font-size: 1.8rem;
             font-weight: 600;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
 
         main {
@@ -34,57 +36,78 @@
         .left-panel {
             width: 40%;
             padding: 20px;
-            background: #fff;
-            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+            background: #ffffff;
+            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .left-panel h2 {
+            color: #333;
+            font-size: 1.5rem;
+            margin-bottom: 10px;
         }
 
         .left-panel textarea {
             width: 100%;
-            height: 80%;
-            padding: 10px;
+            height: 75%;
+            padding: 12px;
             font-size: 1rem;
-            border: 1px solid #ccc;
-            border-radius: 5px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
             resize: none;
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
         }
 
         .left-panel button {
-            margin-top: 10px;
-            padding: 10px 20px;
-            background-color: #4CAF50;
+            margin-top: 12px;
+            padding: 10px 25px;
+            background-color: #3c40c6;
             color: white;
             border: none;
-            border-radius: 5px;
+            border-radius: 8px;
             cursor: pointer;
             font-size: 1rem;
+            transition: background-color 0.3s ease;
         }
 
         .left-panel button:hover {
-            background-color: #45a049;
+            background-color: #575fcf;
         }
 
         .right-panel {
             flex: 1;
             padding: 20px;
+            background: #f8f9fa;
+            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .right-panel h2 {
+            color: #333;
+            font-size: 1.5rem;
+            margin-bottom: 10px;
         }
 
         .right-panel pre {
-            background: #2d2d2d;
-            color: #f4f4f8;
+            background: #1e272e;
+            color: #d2dae2;
             padding: 20px;
-            border-radius: 5px;
+            border-radius: 8px;
             font-size: 1rem;
             overflow: auto;
-            height: 100%;
+            height: calc(100% - 40px);
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
         }
+
+      
+
+        
     </style>
 </head>
 
 <body>
     <header>SQL to Mermaid ER Diagram</header>
     <main>
         <div class="left-panel">
-            <h2>SQL Query</h2>
+            <h2>PostgreSQL Query</h2>
             <textarea id="sqlInput" placeholder="Type your SQL query here..."></textarea>
             <button id="runBtn">Run</button>
         </div>
@@ -103,13 +126,15 @@ <h2>Mermaid Diagram</h2>
         string deliveryAddress
     }
     customer ||--o{ order : places
-    </pre>
+            </pre>
         </div>
     </main>
 
+
+    <a class="github-fork-ribbon" href="https://github.com/tusharad/sql2er" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
+
     <script type="module">
         import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-
         mermaid.initialize({ startOnLoad: true });
 
         document.getElementById('runBtn').addEventListener('click', () => {
@@ -121,12 +146,8 @@ <h2>Mermaid Diagram</h2>
             mermaid.run();
         });
 
-        // Mock function to simulate SQL to Mermaid ER Diagram conversion
         function generate(sqlQuery) {
-            // Replace this with the actual logic for SQL parsing and Mermaid ER generation
-            const res = echo(sqlQuery);
-            console.log("got res:", res);
-            return res;
+            return `Mocked Diagram: ${sqlQuery}`;
         }
 
         import { WASI } from 'https://cdn.jsdelivr.net/npm/@bjorn3/browser_wasi_shim@0.3.0/+esm'
