Terminal is now functioning (The styling and submitting) working on c…

…ommands working soon.

CropSQL/Pages/Components/Home.razor

@@ -5,6 +5,10 @@
 <WelcomeModal />
 <Header />
 <div class="container123">
-<SideBarNav />
-<Prompt />
+    <SideBarNav />
+    <div class="container1234">
+        <Prompt />
+        <Terminal />
+    </div>
 </div>
+

CropSQL/Pages/Components/Home.razor.css

@@ -2,4 +2,10 @@
     display: flex;
     flex-direction: row;
     width: 100%
+}
+
+.container1234 {
+    display: flex;
+    flex-direction: column;
+    width: 100%
 }

CropSQL/Pages/Components/Prompt.razor.css

@@ -10,4 +10,6 @@
     margin:auto;
     margin-top: 5px;
     margin-bottom:5px;
+    color: #f4d35d;
+    font-size: 1.2em;
 }

CropSQL/Pages/Components/Terminal.razor

@@ -0,0 +1,42 @@
+@inject IJSRuntime JSRuntime
+
+<div class="terminal">
+    <div class="output" @ref="outputRef">
+        @foreach (var line in terminalOutput)
+        {
+            <div class="outText">@line</div>
+        }
+    </div>
+    <input type="text" @ref="inputRef" placeholder="CropSQL> Add Commands Here" @bind="currentInput" @onkeydown="HandleInput"/> 
+</div>
+
+@code {
+    private List<string> terminalOutput = new List<string>();
+    private string currentInput = "";
+
+    private ElementReference outputRef;
+    private ElementReference inputRef;
+
+    private async Task HandleInput(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter")
+        {
+            // Get the value of the input field using JavaScript interop
+            currentInput = await JSRuntime.InvokeAsync<string>("getInputValue", inputRef);
+
+            ExecuteCommand(currentInput);
+            currentInput = ""; // Clear the input field
+        }
+    }
+
+    private void ExecuteCommand(string command)
+    {
+        // Process command here
+        // For demonstration purposes, just echo back the command
+        terminalOutput.Add("CropSQL> " + command);
+        terminalOutput.Add("Result: " + command);
+
+        // Notify Blazor that the component's state has changed
+        StateHasChanged();
+    }
+}

CropSQL/Pages/Components/Terminal.razor.css

@@ -0,0 +1,48 @@
+/* Terminal.razor.css */
+.terminal {
+    font-family: monospace;
+    border: 1px solid #ccc;
+    padding: 10px;
+    width: 400px;
+    display: flex;
+    flex-direction: column;
+
+    background-image: linear-gradient(140deg, #a2b780, #5e8d61);
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Increased shadow */
+    border: 2px solid #5e8d61; /* Solid border */
+    margin: 5px;
+    width:80%;
+    height:fit-content;
+    margin:auto;
+    margin-top: 5px;
+    margin-bottom:5px;
+    height:70%
+}
+
+.output {
+    min-height: 60%;
+    max-height: 70%;
+    overflow-y: auto;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 10px;
+    background-color: rgba(46, 121, 56, 0.226);
+    border: 2px solid #e8a073; /* Solid border */
+    color: #f4d35d;
+
+}
+
+input[type="text"] {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 5px;
+    background-color: rgba(46, 121, 56, 0.226);
+    border: 2px solid #e8a073; /* Solid border */
+    color: #f4d35d;
+}
+
+.outText {
+    margin:2px;
+    margin-left: 5px;
+}

CropSQL/wwwroot/index.html

@@ -26,6 +26,12 @@
         <a class="dismiss">🗙</a>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script>
+        window.getInputValue = function(inputRef) {
+            return inputRef.value;
+        }
+    </script>
+
 </body>
 
 </html>