CLARIFICATION & CSS

README.md

@@ -18,7 +18,7 @@ This project aims to leverage large language models in order to decrease the eff
 
 The core utilizes .NET 8, while the front-end uses ASP.NET Core with Blazor Server. The CLI is written in Rust.
 
-**_No project has been hurt with javascript or [even more with] n-node js._**
+**_(ALMOST) no project has been hurt with javascript or [even more with] n-node js._**
 
 - **Umogen.Core**: C#, .NET 8,
 - **Umogen.Server**: C#, .NET 8, Blazor Server

src/Nyanlabs.Umogen.Server/Pages/Contracts.razor

@@ -37,13 +37,12 @@
             <label for="query" class="form-label">Dane (NLP)</label>
             <input type="text" class="form-control" id="query" @bind-value="_query">
         </div>
-        <button disabled="@disB" type="button" @onclick="Process" class="btn btn-primary">Generuj</button>
-    </form>
+        <div class="container">
+            <button disabled="@disB" type="button" @onclick="Process" class="btn btn-primary">Rozpocznij</button>
+            <span hidden="@(!disB)" class="loader"></span>
+            <span hidden="@(!disB)" class="output-box">@output</span>
         </div>
-
-
-<div class="form-control">
-    <div class="text-center"><b>OUT:</b> @output</div>
+    </form>
 </div>
 
 @code {

src/Nyanlabs.Umogen.Server/wwwroot/css/site.css

@@ -95,3 +95,53 @@ a,
 .blazor-error-boundary::after {
   content: "An error has occurred.";
 }
+
+.output-box {
+  top: 0.5em;
+  position: relative;
+  max-width: 100%;
+  min-width: 40%;
+  height: 2em;
+  display: inline-block;
+  margin-left: 1em;
+  border-radius: 20px;
+  border: 1px solid #9e9e9e;
+  width: max-content;
+  padding: 0.7ch;
+  overflow: scroll;
+}
+
+.loader {
+  top: 0.5em;
+  margin-left: 0.5em;
+  width: 24px;
+  height: 24px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 3px solid;
+  border-color: #8e8e8e transparent;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}