From 6a962d08a2dade752260feb50af946d98948e93a Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 07:22:22 -0400
Subject: [PATCH 01/12] added preview title and scrolling for both input and
 preview boxes

---
 src/app.css             | 33 ++++++++-------------------------
 src/routes/+page.svelte |  2 +-
 2 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/src/app.css b/src/app.css
index 9186464..f94a3b0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -73,10 +73,10 @@ h1 {
     background: #f7f7f7;
     color: #067800;
     transition: border 0.2s;
-    height: 160px;
     min-height: 160px;
-    max-height: 160px;
-    resize: none;
+    max-height: 350px;
+    resize: vertical;
+    overflow-y: auto;
 }
 
 .query-section textarea:focus {
@@ -292,9 +292,11 @@ tr:nth-child(even) td {
     padding: 1rem;
     border-radius: 6px;
     overflow-x: auto;
+    overflow-y: auto;
     font-family: "Fira Mono", monospace;
     font-size: 0.9rem;
     margin: 1rem 0;
+    max-height: 350px;
 }
 
 .preview-note {
@@ -383,28 +385,9 @@ p {
     outline: none;
 }
 
-.preview-section {
-    margin-top: 1.5rem;
-    background: var(--card-bg);
-    border-radius: 8px;
-    padding: 1.5rem;
-    color: #222;
-}
-
-.json-preview {
-    background: #f5f5f5;
-    padding: 1rem;
-    border-radius: 6px;
-    overflow-x: auto;
-    font-family: "Fira Mono", monospace;
-    font-size: 0.9rem;
-    margin: 1rem 0;
-}
-
-.preview-note {
-    color: #666;
-    font-size: 0.9rem;
-    margin: 0;
+.preview-section h3 {
+    color: #067800;
+    margin-bottom: 1rem;
 }
 
 .table-container {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fbe9e2c..d50125a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -198,7 +198,7 @@
 
         {#if previewData}
             <div class="preview-section">
-                <h3>Data Preview</h3>
+                <h3>Preview</h3>
                 <pre class="json-preview">{previewData}</pre>
                 <p class="preview-note">
                     Showing first 3 records of {data.length} total records

From 13ebf899d66cd45243247abf4e1d369dee20b74f Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 07:27:05 -0400
Subject: [PATCH 02/12] fixed the preview box to show all records in JSON input

---
 src/routes/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d50125a..d843162 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -34,7 +34,7 @@
         try {
             data = JSON.parse(input);
             jsonError = null;
-            previewData = JSON.stringify(data.slice(0, 3), null, 2);
+            previewData = JSON.stringify(data, null, 2);
         } catch (err) {
             jsonError = "Invalid JSON input.";
             data = [];
@@ -201,7 +201,7 @@
                 <h3>Preview</h3>
                 <pre class="json-preview">{previewData}</pre>
                 <p class="preview-note">
-                    Showing first 3 records of {data.length} total records
+                    Showing {data.length} total record{data.length === 1 ? '' : 's'}
                 </p>
             </div>
         {/if}

From 8995b299ecf389db90552d1a33b51ad1678739b6 Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 07:36:22 -0400
Subject: [PATCH 03/12] fix spacing and added sample sql and json inputs

---
 src/app.css             | 76 +++++++++++++++++++++++++++++++++++++++++
 src/routes/+page.svelte | 48 ++++++++++++++++++++++++++
 2 files changed, 124 insertions(+)

diff --git a/src/app.css b/src/app.css
index f94a3b0..6fb6ad3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -77,6 +77,26 @@ h1 {
     max-height: 350px;
     resize: vertical;
     overflow-y: auto;
+    scrollbar-width: thin;
+    /* For Firefox */
+    scrollbar-color: #009624 #e0e0e0;
+    /* For Firefox */
+    border: 1.5px solid #bdbdbd;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+/* Webkit scrollbar styles */
+.query-section textarea::-webkit-scrollbar,
+.json-preview::-webkit-scrollbar {
+    width: 10px;
+    background: #e0e0e0;
+    border-radius: 6px;
+}
+
+.query-section textarea::-webkit-scrollbar-thumb,
+.json-preview::-webkit-scrollbar-thumb {
+    background: #009624;
+    border-radius: 6px;
 }
 
 .query-section textarea:focus {
@@ -297,6 +317,29 @@ tr:nth-child(even) td {
     font-size: 0.9rem;
     margin: 1rem 0;
     max-height: 350px;
+    scrollbar-width: thin;
+    /* For Firefox */
+    scrollbar-color: #009624 #e0e0e0;
+    /* For Firefox */
+    border: 1.5px solid #bdbdbd;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+/* Webkit scrollbar styles */
+.json-preview::-webkit-scrollbar {
+    width: 10px;
+    background: #e0e0e0;
+    border-radius: 6px;
+}
+
+.json-preview::-webkit-scrollbar-thumb {
+    background: #009624;
+    border-radius: 6px;
+}
+
+.json-preview:focus {
+    border-color: #009624;
+    outline: none;
 }
 
 .preview-note {
@@ -410,4 +453,37 @@ h3 {
 p {
     margin: 0.5rem 0;
     color: var(--text-light);
+}
+
+.sample-suggestions {
+    margin: 1.2rem 0 1rem 0;
+    display: flex;
+    align-items: center;
+    gap: 0.7rem;
+    flex-wrap: wrap;
+    padding-left: 0.5rem;
+}
+
+.sample-suggestions span {
+    font-weight: 500;
+    color: #222;
+    font-size: 1.08rem;
+}
+
+.sample-suggestions button {
+    background: #e0e0e0;
+    color: #067800;
+    border: 1.5px solid #009624;
+    border-radius: 6px;
+    padding: 0.45rem 1.2rem;
+    font-size: 1.05rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s, box-shadow 0.2s;
+    box-shadow: 0 1px 4px rgba(0, 200, 83, 0.07);
+}
+
+.sample-suggestions button:hover {
+    background: #b9f6ca;
+    box-shadow: 0 2px 8px rgba(0, 200, 83, 0.13);
 }
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d843162..f0d8e29 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,6 +17,35 @@
     let previewData: string = "";
     let inputMode: "file" | "raw" = "file";
 
+    // Sample data for suggestions
+    const sampleJsons = [
+      {
+        label: "US States Population",
+        value: `[
+  { "state": "California", "region": "West", "pop": 39538223, "pop_male": 19453769, "pop_female": 20084454 },
+  { "state": "Texas", "region": "South", "pop": 29145505, "pop_male": 14358470, "pop_female": 14787035 },
+  { "state": "Florida", "region": "South", "pop": 21538187, "pop_male": 10470577, "pop_female": 11067610 }
+]`
+      }
+      // Add more samples if you want
+    ];
+
+    const sampleSqls = [
+      {
+        label: "All States",
+        value: "SELECT * FROM table;"
+      },
+      {
+        label: "States with pop > 20M",
+        value: "SELECT state, pop FROM table WHERE pop > 20000000;"
+      },
+      {
+        label: "States in the South",
+        value: "SELECT state FROM table WHERE region = 'South';"
+      }
+      // Add more samples if you want
+    ];
+
     function saveHistory() {
         sessionStorage.setItem("queryHistory", JSON.stringify(history));
         sessionStorage.setItem("queryHistoryNextId", String(nextId));
@@ -148,6 +177,16 @@
             </button>
         </div>
 
+        <!-- Sample JSON suggestions -->
+        <div class="sample-suggestions">
+          <span>Try sample JSON:</span>
+          {#each sampleJsons as sample}
+            <button type="button" on:click={() => { jsonInput = sample.value; processJsonInput(sample.value); }}>
+              {sample.label}
+            </button>
+          {/each}
+        </div>
+
         {#if inputMode === "file"}
             <div
                 class="upload-zone"
@@ -208,6 +247,15 @@
     </div>
 
     <div class="query-section">
+        <!-- Sample SQL suggestions -->
+        <div class="sample-suggestions">
+          <span>Try sample SQL:</span>
+          {#each sampleSqls as sample}
+            <button type="button" on:click={() => query = sample.value}>
+              {sample.label}
+            </button>
+          {/each}
+        </div>
         <h2>SQL Query</h2>
         <textarea
             bind:value={query}

From 79be51c5983a6605e9537a2b8cc257be32b6f1d6 Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 07:38:39 -0400
Subject: [PATCH 04/12] fixed the colour of titles

---
 src/app.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 6fb6ad3..f890a8d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -466,7 +466,7 @@ p {
 
 .sample-suggestions span {
     font-weight: 500;
-    color: #222;
+    color: #fff;
     font-size: 1.08rem;
 }
 
@@ -486,4 +486,12 @@ p {
 .sample-suggestions button:hover {
     background: #b9f6ca;
     box-shadow: 0 2px 8px rgba(0, 200, 83, 0.13);
+}
+
+.json-input-section .sample-suggestions span {
+    color: #fff;
+}
+
+.sample-suggestions span {
+    color: #222;
 }
\ No newline at end of file

From baf740898ece56f7b4a6b1b7ea81fa198c399f9d Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 07:40:09 -0400
Subject: [PATCH 05/12] fixed the ui

---
 src/app.css | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/app.css b/src/app.css
index f890a8d..e890727 100644
--- a/src/app.css
+++ b/src/app.css
@@ -456,36 +456,43 @@ p {
 }
 
 .sample-suggestions {
-    margin: 1.2rem 0 1rem 0;
+    margin: 1.2rem 0 2rem 0;
     display: flex;
     align-items: center;
     gap: 0.7rem;
     flex-wrap: wrap;
-    padding-left: 0.5rem;
+    padding: 1rem 1.5rem;
+    background: rgba(0, 150, 36, 0.07);
+    border: 1.5px solid #b9f6ca;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 200, 83, 0.06);
+    justify-content: flex-start;
 }
 
 .sample-suggestions span {
-    font-weight: 500;
-    color: #fff;
+    font-weight: 600;
     font-size: 1.08rem;
+    margin-right: 0.5rem;
 }
 
 .sample-suggestions button {
     background: #e0e0e0;
     color: #067800;
-    border: 1.5px solid #009624;
-    border-radius: 6px;
-    padding: 0.45rem 1.2rem;
-    font-size: 1.05rem;
-    font-weight: 600;
+    border: 2px solid #009624;
+    border-radius: 20px;
+    padding: 0.5rem 1.4rem;
+    font-size: 1.08rem;
+    font-weight: 700;
     cursor: pointer;
-    transition: background 0.2s, box-shadow 0.2s;
-    box-shadow: 0 1px 4px rgba(0, 200, 83, 0.07);
+    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
+    box-shadow: 0 1px 4px rgba(0, 200, 83, 0.09);
+    outline: none;
 }
 
 .sample-suggestions button:hover {
     background: #b9f6ca;
-    box-shadow: 0 2px 8px rgba(0, 200, 83, 0.13);
+    border-color: #00c853;
+    box-shadow: 0 2px 8px rgba(0, 200, 83, 0.18);
 }
 
 .json-input-section .sample-suggestions span {

From 27e23c696c759476a78ce1e5bf4e95bcfa92404b Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 07:55:30 -0400
Subject: [PATCH 06/12] fixed ui

---
 src/app.css             | 59 +++++++++++++-------------------
 src/routes/+page.svelte | 76 +++++++++++++++++++++++------------------
 2 files changed, 66 insertions(+), 69 deletions(-)

diff --git a/src/app.css b/src/app.css
index e890727..85ce10d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -66,8 +66,6 @@ h1 {
 .query-section textarea {
     margin-bottom: 1.5rem;
     margin-top: -1.5rem;
-    border: 1px solid #00411a;
-    border-radius: 8px;
     font-size: 1.15rem;
     padding: 1.1rem;
     background: #f7f7f7;
@@ -77,15 +75,20 @@ h1 {
     max-height: 350px;
     resize: vertical;
     overflow-y: auto;
-    scrollbar-width: thin;
-    /* For Firefox */
-    scrollbar-color: #009624 #e0e0e0;
-    /* For Firefox */
     border: 1.5px solid #bdbdbd;
+    border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
-/* Webkit scrollbar styles */
+/* --- Unified custom scrollbar styles for textarea and JSON preview --- */
+.query-section textarea,
+.json-preview {
+    scrollbar-width: thin;
+    /* Firefox */
+    scrollbar-color: #009624 #e0e0e0;
+    /* Firefox */
+}
+
 .query-section textarea::-webkit-scrollbar,
 .json-preview::-webkit-scrollbar {
     width: 10px;
@@ -99,8 +102,9 @@ h1 {
     border-radius: 6px;
 }
 
-.query-section textarea:focus {
-    border: 1.5px solid var(--primary-green);
+.query-section textarea:focus,
+.json-preview:focus {
+    border-color: #009624;
     outline: none;
 }
 
@@ -308,38 +312,18 @@ tr:nth-child(even) td {
 }
 
 .json-preview {
-    background: #f5f5f5;
-    padding: 1rem;
-    border-radius: 6px;
-    overflow-x: auto;
-    overflow-y: auto;
     font-family: "Fira Mono", monospace;
     font-size: 0.9rem;
     margin: 1rem 0;
     max-height: 350px;
-    scrollbar-width: thin;
-    /* For Firefox */
-    scrollbar-color: #009624 #e0e0e0;
-    /* For Firefox */
+    padding: 1.1rem;
+    background: #f7f7f7;
+    color: #067800;
     border: 1.5px solid #bdbdbd;
+    border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-
-/* Webkit scrollbar styles */
-.json-preview::-webkit-scrollbar {
-    width: 10px;
-    background: #e0e0e0;
-    border-radius: 6px;
-}
-
-.json-preview::-webkit-scrollbar-thumb {
-    background: #009624;
-    border-radius: 6px;
-}
-
-.json-preview:focus {
-    border-color: #009624;
-    outline: none;
+    overflow-x: auto;
+    overflow-y: auto;
 }
 
 .preview-note {
@@ -501,4 +485,9 @@ p {
 
 .sample-suggestions span {
     color: #222;
+}
+
+.raw-json-section h2 {
+    margin-top: -2px;
+    color: #067800;
 }
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f0d8e29..63b1afe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,31 +19,31 @@
 
     // Sample data for suggestions
     const sampleJsons = [
-      {
-        label: "US States Population",
-        value: `[
+        {
+            label: "US States Population",
+            value: `[
   { "state": "California", "region": "West", "pop": 39538223, "pop_male": 19453769, "pop_female": 20084454 },
   { "state": "Texas", "region": "South", "pop": 29145505, "pop_male": 14358470, "pop_female": 14787035 },
   { "state": "Florida", "region": "South", "pop": 21538187, "pop_male": 10470577, "pop_female": 11067610 }
-]`
-      }
-      // Add more samples if you want
+]`,
+        },
+        // Add more samples if you want
     ];
 
     const sampleSqls = [
-      {
-        label: "All States",
-        value: "SELECT * FROM table;"
-      },
-      {
-        label: "States with pop > 20M",
-        value: "SELECT state, pop FROM table WHERE pop > 20000000;"
-      },
-      {
-        label: "States in the South",
-        value: "SELECT state FROM table WHERE region = 'South';"
-      }
-      // Add more samples if you want
+        {
+            label: "All States",
+            value: "SELECT * FROM table;",
+        },
+        {
+            label: "States with pop > 20M",
+            value: "SELECT state, pop FROM table WHERE pop > 20000000;",
+        },
+        {
+            label: "States in the South",
+            value: "SELECT state FROM table WHERE region = 'South';",
+        },
+        // Add more samples if you want
     ];
 
     function saveHistory() {
@@ -179,12 +179,18 @@
 
         <!-- Sample JSON suggestions -->
         <div class="sample-suggestions">
-          <span>Try sample JSON:</span>
-          {#each sampleJsons as sample}
-            <button type="button" on:click={() => { jsonInput = sample.value; processJsonInput(sample.value); }}>
-              {sample.label}
-            </button>
-          {/each}
+            <span>Try sample JSON:</span>
+            {#each sampleJsons as sample}
+                <button
+                    type="button"
+                    on:click={() => {
+                        jsonInput = sample.value;
+                        processJsonInput(sample.value);
+                    }}
+                >
+                    {sample.label}
+                </button>
+            {/each}
         </div>
 
         {#if inputMode === "file"}
@@ -222,6 +228,7 @@
             </div>
         {:else}
             <div class="raw-json-section">
+                <h2>JSON Input</h2>
                 <textarea
                     bind:value={jsonInput}
                     placeholder="Paste your JSON data here..."
@@ -237,10 +244,12 @@
 
         {#if previewData}
             <div class="preview-section">
-                <h3>Preview</h3>
+                <h2>Preview</h2>
                 <pre class="json-preview">{previewData}</pre>
                 <p class="preview-note">
-                    Showing {data.length} total record{data.length === 1 ? '' : 's'}
+                    Showing {data.length} total record{data.length === 1
+                        ? ""
+                        : "s"}
                 </p>
             </div>
         {/if}
@@ -249,12 +258,12 @@
     <div class="query-section">
         <!-- Sample SQL suggestions -->
         <div class="sample-suggestions">
-          <span>Try sample SQL:</span>
-          {#each sampleSqls as sample}
-            <button type="button" on:click={() => query = sample.value}>
-              {sample.label}
-            </button>
-          {/each}
+            <span>Try sample SQL:</span>
+            {#each sampleSqls as sample}
+                <button type="button" on:click={() => (query = sample.value)}>
+                    {sample.label}
+                </button>
+            {/each}
         </div>
         <h2>SQL Query</h2>
         <textarea
@@ -348,4 +357,3 @@
         </div>
     {/if}
 </main>
-

From 6990d43f4b547bd11a9721b0d636f31d79ce6058 Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 08:00:03 -0400
Subject: [PATCH 07/12] fixed css and ui

---
 src/app.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 85ce10d..c343849 100644
--- a/src/app.css
+++ b/src/app.css
@@ -412,9 +412,11 @@ p {
     outline: none;
 }
 
-.preview-section h3 {
+/* Ensure Preview title is green */
+.preview-section h2 {
     color: #067800;
     margin-bottom: 1rem;
+    margin-top: -2px;
 }
 
 .table-container {

From 65a83d7ec5b668248bfacf4eca82a7d20e0aca1f Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 08:01:01 -0400
Subject: [PATCH 08/12] added query count for history

---
 src/routes/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 63b1afe..12ae105 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -338,7 +338,7 @@
 
     {#if history.length > 0}
         <div class="history-section">
-            <h2>Query History</h2>
+            <h2>Query History ({history.length})</h2>
             {#each history as item}
                 <div class="history-item">
                     <div class="query">{item.query}</div>

From 80f1830afcb3584d2af04d618afced6af4bafcb4 Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 08:01:59 -0400
Subject: [PATCH 09/12] fix horizontal scrolling

---
 src/app.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index c343849..ea44e32 100644
--- a/src/app.css
+++ b/src/app.css
@@ -78,6 +78,8 @@ h1 {
     border: 1.5px solid #bdbdbd;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    overflow-x: hidden;
+    white-space: pre-wrap;
 }
 
 /* --- Unified custom scrollbar styles for textarea and JSON preview --- */
@@ -87,6 +89,8 @@ h1 {
     /* Firefox */
     scrollbar-color: #009624 #e0e0e0;
     /* Firefox */
+    overflow-x: hidden;
+    white-space: pre-wrap;
 }
 
 .query-section textarea::-webkit-scrollbar,
@@ -322,8 +326,8 @@ tr:nth-child(even) td {
     border: 1.5px solid #bdbdbd;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-    overflow-x: auto;
-    overflow-y: auto;
+    overflow-x: hidden;
+    white-space: pre-wrap;
 }
 
 .preview-note {

From 17a27aee2b53fda479f95d63ac187246a0035dfb Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 08:05:42 -0400
Subject: [PATCH 10/12] added summary of app for new users

---
 src/app.css             | 30 ++++++++++++++++++++++++++++++
 src/routes/+page.svelte | 21 +++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/src/app.css b/src/app.css
index ea44e32..79fb807 100644
--- a/src/app.css
+++ b/src/app.css
@@ -496,4 +496,34 @@ p {
 .raw-json-section h2 {
     margin-top: -2px;
     color: #067800;
+}
+
+.app-summary-card {
+    background: #f7f7f7;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    padding: 1.2rem 2rem 1.2rem 2rem;
+    margin-bottom: 2.2rem;
+    border: 1.5px solid #b9f6ca;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.app-summary {
+    color: #067800;
+    font-size: 1.13rem;
+    margin-bottom: 0.7rem;
+    text-align: center;
+}
+
+.app-guide {
+    color: #222;
+    font-size: 1.05rem;
+    margin: 0;
+    padding-left: 1.2rem;
+    text-align: left;
+}
+
+.app-guide li {
+    margin-bottom: 0.3rem;
 }
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 12ae105..22d7675 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -158,6 +158,27 @@
 
 <main class="container">
     <h1>SQL Query Parser</h1>
+    <div class="app-summary-card">
+        <p class="app-summary">
+            <strong>Welcome!</strong> This tool lets you quickly explore and analyze
+            your own JSON data using familiar SQL queries—right in your browser,
+            with no setup or database required.
+        </p>
+        <ol class="app-guide">
+            <li>
+                <strong>Paste</strong> or <strong>upload</strong> your JSON data
+                below.
+            </li>
+            <li><strong>Preview</strong> your data instantly.</li>
+            <li>
+                <strong>Write</strong> an SQL query and click
+                <em>Execute Query</em>.
+            </li>
+            <li>
+                See results, errors, and your query history—all in one place!
+            </li>
+        </ol>
+    </div>
 
     <div class="json-input-section">
         <div class="input-mode-toggle">

From cf48b9adbe7297275b7f146253f3b6b3c447cd96 Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 08:06:12 -0400
Subject: [PATCH 11/12] fix words

---
 src/routes/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 22d7675..ea51fb7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -161,7 +161,7 @@
     <div class="app-summary-card">
         <p class="app-summary">
             <strong>Welcome!</strong> This tool lets you quickly explore and analyze
-            your own JSON data using familiar SQL queries—right in your browser,
+            your own JSON data using familiar SQL queries right in your browser,
             with no setup or database required.
         </p>
         <ol class="app-guide">

From ebde574903ca1fcfc9c878acafc3aa4a9b0059d9 Mon Sep 17 00:00:00 2001
From: nicholaschen09 <nicholas.chen243@gmail.com>
Date: Sun, 18 May 2025 08:09:49 -0400
Subject: [PATCH 12/12] fixed the app so its good for mobile view

---
 src/app.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/src/app.css b/src/app.css
index 79fb807..5680de5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -526,4 +526,53 @@ p {
 
 .app-guide li {
     margin-bottom: 0.3rem;
+}
+
+@media (max-width: 600px) {
+    .container {
+        padding: 0.7rem;
+    }
+
+    .app-summary-card {
+        padding: 0.7rem 0.7rem 0.7rem 0.7rem;
+        font-size: 0.98rem;
+    }
+
+    .app-summary {
+        font-size: 1rem;
+    }
+
+    .app-guide {
+        font-size: 0.97rem;
+        padding-left: 0.7rem;
+    }
+
+    .sample-suggestions {
+        padding: 0.7rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .sample-suggestions button {
+        width: 100%;
+        min-width: 0;
+        text-align: left;
+        font-size: 1rem;
+        padding: 0.5rem 0.7rem;
+    }
+
+    .query-actions {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.7rem;
+    }
+
+    .query-actions button,
+    .query-actions .clear-btn {
+        width: 100%;
+        min-width: 0;
+        box-sizing: border-box;
+        margin: 0;
+    }
 }
\ No newline at end of file