diff --git a/README.md b/README.md index 9dce9f0..369b30f 100644 --- a/README.md +++ b/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 diff --git a/src/Nyanlabs.Umogen.Server/Pages/Contracts.razor b/src/Nyanlabs.Umogen.Server/Pages/Contracts.razor index 52d9c9d..34c7a76 100644 --- a/src/Nyanlabs.Umogen.Server/Pages/Contracts.razor +++ b/src/Nyanlabs.Umogen.Server/Pages/Contracts.razor @@ -37,15 +37,14 @@ - +
+ + + +
- -
-
OUT: @output
-
- @code { private string _employerId = "", _employeeId = ""; private Person? employee; diff --git a/src/Nyanlabs.Umogen.Server/wwwroot/css/site.css b/src/Nyanlabs.Umogen.Server/wwwroot/css/site.css index 83a7558..d7136e1 100644 --- a/src/Nyanlabs.Umogen.Server/wwwroot/css/site.css +++ b/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); + } +}