First stage completed.

Oia20 · Apr 24, 2024 · 368fcdd · 368fcdd
1 parent 4bfc046
commit 368fcdd
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 6 deletions.
diff --git a/CropSQL/Pages/Components/NextModal.razor b/CropSQL/Pages/Components/NextModal.razor
@@ -0,0 +1,17 @@
+
+    <div class="modal-overlay">
+    <div class="modalBack">
+        <div class="modal-header">
+            <h2>Nice Job!</h2>
+        </div>
+        <div class="modal-body">
+            <!-- Modal content goes here -->
+            <p>Dude, you're crushing it!</p>
+        </div>
+            <a href="/Table"><button class="continue-but">Next Step</button></a>
+
+    </div>
+
+</div>
+}
+
diff --git a/CropSQL/Pages/Components/NextModal.razor.css b/CropSQL/Pages/Components/NextModal.razor.css
@@ -0,0 +1,62 @@
+/* MyModalComponent.razor.css */
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(56, 55, 5, 0.5); /* Semi-transparent background */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 500;
+
+}
+
+.modalBack {
+    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 */
+    z-index: 1000;
+    margin: 5px;
+    max-width: 600px; /* Limit width to improve readability */
+}
+
+.modal-header {
+    display: flex;
+    justify-content: center; /* Center align header */
+    align-items: center;
+    margin-bottom: 20px; /* Add spacing below header */
+}
+
+.modal-header h2 {
+    font-size: 24px;
+    color: #f4d35d; /* White text color */
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow */
+}
+
+.modal-body {
+    margin-top: 10px;
+    color: #f4d35d; /* White text color */
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+.continue-but {
+    display: block;
+    margin: auto;
+    padding: 10px 20px;
+    background-color: #f4d35d;
+    color: #5e8d61;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.3s ease; /* Smooth background color transition */
+}
+
+.continue-but:hover {
+    background-color: #d28752; /* Darker color on hover */
+}
diff --git a/CropSQL/Pages/Components/SideBarNav.razor b/CropSQL/Pages/Components/SideBarNav.razor
@@ -1,8 +1,8 @@
 <!-- SidebarNav.razor -->
 <div class="sidebar">
     <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">About</a></li>
+        <li><a href="/">Create Farm</a></li>
+        <li><a href="/Table">About</a></li>
         <li><a href="#">Services</a></li>
         <li><a href="#">Contact</a></li>
     </ul>

diff --git a/CropSQL/Pages/Components/SideBarNav.razor.css b/CropSQL/Pages/Components/SideBarNav.razor.css
@@ -6,7 +6,7 @@
     height:100vh;
     width: 200px;
     background-color: #5e8d61;
-    color: #fff;
+    color: #f4d35d;
     padding-top: 20px;
     border-right: 2px solid;
     border-color: #302910;
@@ -24,10 +24,10 @@
 .sidebar ul li a {
     display: block;
     padding: 10px;
-    color: #fff;
+    color: #f4d35d;
     text-decoration: none;
 }
 
 .sidebar ul li a:hover {
-    background-color: #555;
+    background-color: #e8a073;
 }
diff --git a/CropSQL/Pages/Components/Terminal.razor b/CropSQL/Pages/Components/Terminal.razor
@@ -1,6 +1,8 @@
 @inject IJSRuntime JSRuntime
 
 <div class="terminal">
+    <h2 class="prompt">CropSQL Terminal</h2>
+
 <div class="output" @ref="outputRef">
     @{
         // Determine the starting index for the loop
@@ -13,10 +15,14 @@
 </div>
     <input type="text" @ref="inputRef" placeholder="CropSQL> Add Commands Here" @bind="currentInput" @onkeydown="HandleInput"/> 
 </div>
+    @if (completed) {
+        <NextModal />
+    }
 
 @code {
     private List<string> terminalOutput = new List<string>();
     private string currentInput = "";
+    private bool completed = false;
 
     private ElementReference outputRef;
     private ElementReference inputRef;
@@ -38,7 +44,17 @@
         // Process command here
         // For demonstration purposes, just echo back the command
         terminalOutput.Add("CropSQL> " + command);
-
+        // Split the string at every space
+        string[] words = command.Split(' ');
+        string last = command[command.Length - 1].ToString();
+
+        Console.WriteLine(command);
+        Console.WriteLine(words);
+        if (words[0] == "CREATE" && words[1] == "DATABASE" && words.Length == 3 && last == ";") {
+            Console.WriteLine("CREATED");
+            terminalOutput.Add("Challenge passed, DB created.");
+            completed = true;
+        }
         // Notify Blazor that the component's state has changed
         StateHasChanged();
     }

diff --git a/CropSQL/Pages/Components/Terminal.razor.css b/CropSQL/Pages/Components/Terminal.razor.css
@@ -47,4 +47,9 @@ input[type="text"] {
 .outText {
     margin:2px;
     margin-left: 5px;
+}
+
+.prompt {
+    text-align: center;
+    color: #f4d35d;
 }