Development- Up to Login and plants

Api/AutoMapperConfig.cs

@@ -21,6 +21,10 @@ namespace Api
             CreateMap<Plant, SavePlantViewModel>();
             CreateMap<SavePlantViewModel, Plant>();
 
+            CreateMap<MiscellaneousImage, MiscellaneousImageViewModel>();
+            CreateMap<MiscellaneousImageViewModel, SaveMiscellaneousImageViewModel>();
+            CreateMap<SaveMiscellaneousImageViewModel, MiscellaneousImage>();
+
 
 
         }

Api/Controllers/MiscellaneousImagesController.cs

@@ -0,0 +1,61 @@
+using Domain.BaseData;
+using Infrastructure;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.DependencyInjection;
+using Models.BaseData;
+using Services.BaseData;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Api.Controllers
+{
+    [Authorize(Roles = Consts.Developer)]
+    public class MiscellaneousImagesController : BaseController
+    {
+        private readonly IMiscellaneousImageService miscellaneousImageService;
+
+        public MiscellaneousImagesController(IServiceProvider serviceProvider) : base(serviceProvider)
+        {
+            miscellaneousImageService = serviceProvider.GetService<IMiscellaneousImageService>();
+        }
+
+        [HttpGet]
+        public IActionResult List()
+        {
+            var dbList = miscellaneousImageService.GetQueryable().ToList();
+            return Ok(Mapper.Map<List<MiscellaneousImageViewModel>>(dbList));
+        }
+
+        [HttpPost]
+        public IActionResult Add(SaveMiscellaneousImageViewModel model)
+        {
+            var dbModel = Mapper.Map<MiscellaneousImage>(model);
+            var imageName = SaveImageFromBase64(model.Base64Image);
+            dbModel.ImageFileName = imageName;
+            miscellaneousImageService.Add(dbModel);
+            return Ok();
+        }
+
+        [HttpPut]
+        public IActionResult Update(MiscellaneousImageViewModel model)
+        {
+            var dbModel = miscellaneousImageService.GetById(model.Id.Value);
+            Mapper.Map(model, dbModel);
+            miscellaneousImageService.Update(dbModel);
+            return Ok();
+        }
+
+        [HttpDelete("{id}")]
+        public IActionResult Delete(Guid id)
+        {
+            if (!miscellaneousImageService.CanBeDeleted(id))
+            {
+                return BadRequest("This image is used in other records and can not be deleted.");
+            }
+            miscellaneousImageService.Delete(id);
+            return Ok();
+        }
+    }
+}

Api/Controllers/PlantsController.cs

@@ -27,6 +27,12 @@ namespace Api.Controllers
             var dbList = plantsService.GetQueryable().ToList();
             return Ok(Mapper.Map<List<PlantViewModel>>(dbList));
         }
+        [HttpGet("{id}")]
+        public IActionResult Get(Guid id)
+        {
+            var pl = plantsService.GetById(id);
+            return Ok(Mapper.Map<SavePlantViewModel>(pl));
+        }
         [HttpPost]
         public IActionResult Add(SavePlantViewModel model)
         {

BlazorPages/ApiUtils/UserUtils.cs

@@ -14,10 +14,7 @@ public class UserUtils : IUserUtils
         _client = client;
     }
 
-    public async Task<HttpResponseMessage> SendVerificationRequest(object otpModel)
-    {
-        return await _client.HttpPost("/api/AUTH/Login",otpModel);
-    }
+  
 
     public async Task<HttpResponseMessage> SendSignUpRequest(object accountModel)
     {
@@ -26,37 +23,25 @@ public class UserUtils : IUserUtils
     }
     public async Task<HttpResponseMessage> LoginWithPasswordRequest(object loginModel)
     {
-        return await _client.HttpPost("/api/AUTH/LoginWithPassword",loginModel);
+        return await _client.HttpPost("/api/AUTH/Login",loginModel);
     }
     public async Task<HttpResponseMessage> CheckLogin(bool goToLogin = true)
     {
-        return await _client.HttpGet("/api/AUTH/CheckLogin",true,goToLogin);
+        return await _client.HttpGet("/api/AUTH/Check",true,goToLogin);
     }
 
-    public async Task<HttpResponseMessage> RefreshToken(object refreshTokenModel)
-    {
-        return await _client.HttpPost("/api/Auth/refresh", refreshTokenModel);
-    }
 
-    public async Task<CheckLoginResponse> SaveEmailAndName(NameAndEmailModel model)
-    {
-        var res=await _client.HttpPost("/api/auth/SetNameAndEmail", model);
-        if (!res.IsSuccessStatusCode)
-            return null;
-        return JsonConvert.DeserializeObject<CheckLoginResponse>(await res.Content.ReadAsStringAsync());
-    }
+
+
 }
 
 
 public interface IUserUtils
 {
-    Task<HttpResponseMessage> SendVerificationRequest(object otpModel);
     Task<HttpResponseMessage> LoginWithPasswordRequest(object loginModel);
     Task<HttpResponseMessage> SendSignUpRequest(object accountModel);
     Task<HttpResponseMessage> CheckLogin(bool goToLogin = true);
-    Task<HttpResponseMessage> RefreshToken(object refreshTokenModel);
 
-    Task<CheckLoginResponse> SaveEmailAndName(NameAndEmailModel model);
 
 
 }

BlazorPages/BlazorPages.csproj

@@ -8,11 +8,11 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <Content Remove="wwwroot\assets\react.svg" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <None Include="wwwroot\assets\react.svg" />
+    <None Include="wwwroot\assets\.DS_Store" />
+    <None Include="wwwroot\assets\img\.DS_Store" />
+    <None Include="wwwroot\assets\scss\.DS_Store" />
+    <None Include="wwwroot\assets\scss\vendors\.DS_Store" />
+    <None Include="wwwroot\assets\scss\vendors\fontawesome\.DS_Store" />
   </ItemGroup>
 
 	<ItemGroup>
@@ -31,6 +31,10 @@
     <ProjectReference Include="..\Models\Models.csproj" />
   </ItemGroup>
 
+  <Target Name="PostBuild" AfterTargets="PostBuildEvent">
+    <Exec Command=":: xcopy &quot;$(SolutionDir)BlazorPages\wwwroot\&quot; &quot;$(SolutionDir)WebApp\wwwroot\&quot; /Y /I /E" />
+  </Target>
+
 
 
 </Project>

BlazorPages/Pages/Index.razor

@@ -6,26 +6,20 @@
 @page "/"
 @layout LayoutWithoutMenu
 
-<img src="/assets/images/logo.png" class="@BT.CenterBlock m-2" style="max-width:30%;" />
-@if (DataGotten)
-{
-    <button class="@BT.CenterBlock @BT.Button(ColorType.primary,outline:true) @BT.Background(ColorType.light) w-50 h-1"
-            style="margin-top:calc(50vh - 10em);"
-            @onclick="@(()=>NavManager.NavigateTo("/login"))">
-        ورود و ثبت نام
-    </button>
-}
-<div class="@BT.Row @BT.TextColor(ColorType.white) @BT.TextAlign(TextAlignment.center)" style="position:sticky;height:200px; top:calc(100vh - 200px);">
-    <hr class="@BT.TextColor(ColorType.white)" />
-    <p>
-        © تمامی حقوق برای حقتو محفوظ میباشد
-    </p>
-    <br />
-    <p>
-        ورژن 1.0
-    </p>
-</div>
+ <div class="login login-01 text-center p-5">
+            
+            <div class="logo">
+                <img src="assets/img/logo.svg" alt="">
+            </div>
+            <h2 class="heading">
+                Welcome to next generation of farming
+            </h2>
+            <div class="action d-flex flex-column">
+                <a href="/login" class="btn btn-primary btn-lg mb-3">Login</a>
+                <a href="/signup" class="btn btn-light btn-lg">Sign up</a>
+            </div>
 
+        </div>
 @code {
     public bool DataGotten { set; get; }
 
@@ -43,14 +37,10 @@
             {
                 await LoadingSpinner.HideLoading();
                 Statics.CurrentLoginInfo = result;
-                if (!result.HasName)
-                    NavManager.NavigateTo("/NameAndEmail");
-                else
-                    NavManager.NavigateTo("/dashboard");
+                NavManager.NavigateTo("/dashboard");
             }
         }
         DataGotten = true;
         StateHasChanged();
     }
-
 }

BlazorPages/Pages/Login/Login.razor

@@ -3,126 +3,56 @@
 @using Components
 @using Models.Identity
 @layout LayoutWithoutMenu
-
-
-<img src="/assets/images/logo.png" class="@BT.CenterBlock m-2" style="max-width:30%;" />
-
 <style>
-    div.login-fields-container {
-        margin-top: 5vh;
-        border-radius: 2em;
-        border-top: solid 0.2em orange;
-        height: 90vh;
-        padding: 1em;
+    form {
+        min-height: 300px;
     }
 </style>
-<div class="@BT.Background(ColorType.white) login-fields-container">
-    <EditForm Model="@OtpLoginModel" OnValidSubmit="Submit">
-        <DataAnotationsValidator />
-
-
-        <p class="@BT.CenterBlock @BT.TextAlign(TextAlignment.center) h4" style="margin-top:2vh">
-            ورود / ثبت نام
-        </p>
-        <p class="@(BT.TextAlign(TextAlignment.center)) @BT.TextColor(ColorType.secondary) @BT.MarginTop(5) h6">
-            @if (!WaitForOtp)
-            {
-                <span>
-                    لط�ا شماره همراه خود را وارد کنید.
-                </span>
-            }
-            else
-            {
-                <span>
-                    لط�ا کد تائید پیامک شده را وارد کنید.
-                </span>
-            }
-        </p>
-        @if (!WaitForOtp)
-        {
-            <span>
-                <input placeholder="تل�ن همراه" @bind="OtpLoginModel.Username" class="@BT.Input @BT.MarginTop(5)" type="tel">
-
-            </span>
-        }
-        else
-        {
-            <span>
-                <input placeholder="کد تائید" @bind="LoginModel.Password" class="@BT.Input @BT.MarginTop(5)" type="number">
-            </span>
-        }
 
-        <p class="h6  @BT.TextAlign(TextAlignment.center)" style="font-size:2vh;margin-top:5vh;">
-            ورود شما به معنای پذیرش
-            <a href="/login">
-                شرایط حق‌تو و قوانین حریم خصوصی
-            </a>
-            است
-        </p>
-        <button type="submit" class="@BT.Button(ColorType.primary)  @BT.CenterBlock" style="margin-top:5vh">
-            ورود
-        </button>
-
-        <div class="@BT.Row  @BT.TextAlign(TextAlignment.center)" style="margin-top:12vh">
-            <hr class="@BT.TextColor(ColorType.warning)" />
-            <p>
-                © تمامی حقوق برای حقتو مح�وظ میباشد
-            </p>
-            <br />
-            <p>
-                ورژن 1.1
-            </p>
+<div class="login text-center p-5">
+    <div class="logo">
+        <img src="assets/img/logo.svg" alt="">
+    </div>
+    <EditForm Model="@LoginModel" OnValidSubmit="Submit">
+        <DataAnnotationsValidator />
+        <div class="d-flex flex-column">
+            <input type="email" @bind="LoginModel.Username" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Email">
+            <input type="password" @bind="LoginModel.Password" class="form-control mt-2" id="exampleInputPassword1" placeholder="Password">
+            <a href="" class="btn text-right">Forgot Password?</a>
+            <button class="btn btn-primary mt-2">
+                @(Loading ? "Wait..." : "Login")
+            </button>
+            <ValidationSummary></ValidationSummary>
         </div>
     </EditForm>
-</div>
-
-
+    <div class="d-flex flex-column">
+        <div class="title_line">Or Login with</div>
+        <div class="d-flex social_login">
+            <a href="" class="btn"><img src="assets/img/google_ic.svg"></a>
+        </div>
+    </div>
 
+    <div>
+        Don’t have an account? <a href="/Signup" class="bold text-secondary">Register Now</a>
+    </div>
 
-<style>
-    .form {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        align-content: center;
-    }
+</div>
 
-    .form-control {
-        margin: 5px 5px;
-    }
-</style>
 @code {
-    private bool WaitForOtpMode { get; set; } = true;
-    protected OTPLoginModel OtpLoginModel { get; set; } = new();
-    protected bool WaitForOtp { set; get; } = false;
-    public async void Submit()
-    {
-        if (WaitForOtp)
-            await RequestLogin();
-        else
-            await RequestVerificationCode();
-    }
-    protected async Task RequestVerificationCode()
-    {
-        var response = await _userUtils.SendVerificationRequest(OtpLoginModel);
-        if (response.IsSuccessStatusCode)
-            WaitForOtp = true;
-        StateHasChanged();
-    }
-    protected LoginModel LoginModel { get; set; } = new();
-
 
-    protected async Task RequestLogin()
+    protected LoginModel LoginModel { get; set; } = new();
+    protected bool Loading { set; get; }
+    protected async Task Submit()
     {
-        LoginModel.Username = OtpLoginModel.Username;
+        Loading = true;
+        StateHasChanged();
         var response = await _userUtils.LoginWithPasswordRequest(LoginModel);
+        Loading = false;
         if (response.IsSuccessStatusCode)
         {
             var result = await response.Content.ReadFromJsonAsync<Models.Identity.PlainToken>();
             await LocalStorage.SetItemAsync(Statics.LoginTokenKey, result.AccessToken);
             NavManager.NavigateTo("/dashboard");
-
         }
     }
-
-}
+}

BlazorPages/Shared/LayoutWithoutMenu.razor

@@ -5,9 +5,9 @@
 @inject ILoadingSpinner _LoadingSpinner
 
 
-<RoundContainerContainer Padding="0" BackroundImage="true">
+
     @Body
-</RoundContainerContainer>
+
 @code
 {
 

BlazorPages/Shared/MainLayout.razor

@@ -75,8 +75,8 @@
 </RoundContainerContainer>
 <style>
     div.menu a {
-        line-height: 1.5em;        
-        padding:10px;
+        line-height: 1.5em;
+        padding: 10px;
         border-bottom: 1px white solid;
         width: 100%;
         text-decoration: none;
@@ -155,24 +155,8 @@
             var res = await _userUtils.CheckLogin();
 
             if (res.StatusCode == System.Net.HttpStatusCode.Unauthorized)
-            {
-                var refreshRes = await _userUtils.RefreshToken(new RefreshTokenModel
-                    {
-                        Token = token
-                    });
-                if (refreshRes.IsSuccessStatusCode)
-                {
-                    var newToken = JsonConvert.DeserializeObject<PlainToken>(await refreshRes.Content.ReadAsStringAsync());
-                    Statics.LoginTokenKey = newToken.AccessToken;
-                    Statics.RefreshTokenKey = newToken.RefreshToken;
-                    await LocalStorage.SetItemAsync(Statics.LoginTokenKey, Statics.LoginTokenKey);
-                    await LocalStorage.SetItemAsync(Statics.RefreshTokenKey, Statics.RefreshTokenKey);
-                }
-            }
-            if (!res.IsSuccessStatusCode)
             {
                 await _LoadingSpinner.HideLoading();
-                await _sweetAlertService.ShowSwal(title: "", message: "نشست منقضی شد،لطفا مجددا وارد شوید", SweetAlertIcon.Error);
                 NavManager.NavigateTo("/login");
             }
             else

BlazorPages/Shared/MainLayout.razor.css

@@ -1,81 +0,0 @@
-.page {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-
-main {
-    flex: 1;
-}
-
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-@media (max-width: 640.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
-    }
-}

BlazorPages/Tools/ILoadingSpiner.cs

@@ -15,13 +15,13 @@ namespace AbrBlazorTools
         }
         public async Task HideLoading()
         {
-            await Task.Delay(1000);
-            await _jSRuntime.InvokeVoidAsync("methods.HideLoading", null);
+            //await Task.Delay(1000);
+            //await _jSRuntime.InvokeVoidAsync("methods.HideLoading", null);
         }
 
         public async Task ShowLoading()
         {
-            await _jSRuntime.InvokeVoidAsync("methods.ShowLoading", null);
+            //await _jSRuntime.InvokeVoidAsync("methods.ShowLoading", null);
         }
     }
     public interface ILoadingSpinner

BlazorPages/wwwroot/assets/css/app.css

@@ -1,47 +0,0 @@
-
-
-.valid.modified:not([type=checkbox]) {
-    outline: 1px solid #26b050;
-}
-
-.invalid {
-    outline: 1px solid red;
-}
-
-.validation-message {
-    color: red;
-}
-
-#blazor-error-ui {
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
-    width: 100%;
-    z-index: 1000;
-}
-
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
-
-.blazor-error-boundary {
-    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
-    padding: 1rem 1rem 1rem 3.7rem;
-    color: white;
-}
-
-    .blazor-error-boundary::after {
-        content: "An error has occurred."
-    }
-
-.text-justify {
-    text-align: justify;
-    line-height: 1.8em;
-}

BlazorPages/wwwroot/assets/css/base.css

@@ -1,99 +0,0 @@
-@font-face {
-    font-family: Vazir;
-    src: url('h/assets/fonts/Vazirmatn-Regular');
-    src: url('/assets/fonts/Vazirmatn-Regular.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/Vazirmatn-Regular.woff2') format('woff2'), url('/assets/fonts/Vazirmatn-Regular.woff') format('woff'), url('/assets/fonts/Vazirmatn-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: Vazir;
-    src: url('/assets/fonts/Vazirmatn-Bold.eot');
-    src: url('/assets/fonts/Vazirmatn-Bold.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/Vazirmatn-Bold.woff2') format('woff2'), url('/assets/fonts/Vazirmatn-Bold.woff') format('woff'), url('/assets/fonts/Vazirmatn-Bold.ttf') format('truetype');
-    font-weight: bold;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: Vazir;
-    src: url('/assets/fonts/Vazirmatn-Thin.eot');
-    src: url('/assets/fonts/Vazirmatn-Thin.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/Vazirmatn-Thin.woff2') format('woff2'), url('/assets/fonts/Vazirmatn-Thin.woff') format('woff'), url('/assets/fonts/Vazirmatn-Thin.ttf') format('truetype');
-    font-weight: 100;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: Vazir;
-    src: url('/assets/fonts/Vazirmatn-Light.eot');
-    src: url('/assets/fonts/Vazirmatn-Light.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/Vazirmatn-Light.woff2') format('woff2'), url('/assets/fonts/Vazirmatn-Light.woff') format('woff'), url('/assets/fonts/Vazirmatn-Light.ttf') format('truetype');
-    font-weight: 300;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: Vazir;
-    src: url('/assets/fonts/Vazirmatn-Medium.eot');
-    src: url('/assets/fonts/Vazirmatn-Medium.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/Vazirmatn-Medium.woff2') format('woff2'), url('/assets/fonts/Vazirmatn-Medium.woff') format('woff'), url('/assets/fonts/Vazirmatn-Medium.ttf') format('truetype');
-    font-weight: 500;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: Vazir;
-    src: url('/assets/fonts/Vazirmatn-Black.eot');
-    src: url('/assets/fonts/Vazirmatn-Black.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/Vazirmatn-Black.woff2') format('woff2'), url('/assets/fonts/Vazirmatn-Black.woff') format('woff'), url('/assets/fonts/Vazirmatn-Black.ttf') format('truetype');
-    font-weight: 900;
-    font-display: swap;
-}
-* {
-    font-family: Vazir !important;
-    *font-size: 2vh;
-}
-
-    *::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    *::-webkit-scrollbar-track {
-        border-radius: 8px;
-        background-color: #cacaca;
-        border: 1px solid #cacaca;
-    }
-
-::-webkit-scrollbar-thumb {
-    border-radius: 6px;
-    border: 3px solid transparent;
-    background-clip: content-box;
-    background-color: #e7e7e7;
-}
-
-
-.hamburger {
-    width: 200px;
-    height: 120px;
-    position: relative;
-    margin: 0 20px;
-}
-.hamburger {
-    &::before, &::after
-
-{
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 20px;
-    color: #333;
-    background-color: currentColor;
-    transition: all .45s ease-in-out;
-    &::before
-
-{
-    top: 0;
-    transform: rotate(0);
-}
-
-&::after {
-    bottom: 0;
-    box-shadow: 0 -50px currentColor;
-}
-}

BlazorPages/wwwroot/assets/css/blazor.css

@@ -0,0 +1,10 @@
+ul.validation-errors {
+    padding: 30px;
+    position: fixed;
+    bottom: 10px;
+    background-color: wheat;
+    color: red;
+    text-align:left;
+}
+
+

BlazorPages/wwwroot/assets/icon/dashicon.svg

@@ -0,0 +1,3 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 20.7634C5 13.8325 10.6182 8.21436 17.5491 8.21436C24.48 8.21436 30.0982 13.8325 30.0982 20.7634V24.1099C30.0982 25.496 28.9745 26.6197 27.5883 26.6197H7.50982C6.12363 26.6197 5 25.496 5 24.1099V20.7634ZM9.28983 13.6872C7.82859 15.3912 6.88552 17.5524 6.70495 19.9268H14.308C14.6107 18.7509 15.5366 17.825 16.7125 17.5223V14.9072C16.7125 14.4452 17.0871 14.0706 17.5491 14.0706C18.0111 14.0706 18.3857 14.4452 18.3857 14.9072V17.5223C19.5617 17.825 20.4875 18.7509 20.7902 19.9268H28.3933C28.2127 17.5524 27.2697 15.3912 25.8084 13.6872L24.8336 14.6622C24.5068 14.9888 23.9772 14.9888 23.6504 14.6622C23.3238 14.3354 23.3238 13.8058 23.6504 13.479L24.6254 12.5042C22.9214 11.0429 20.7602 10.0999 18.3858 9.91931V11.5608C18.3858 12.0228 18.0112 12.3974 17.5492 12.3974C17.0872 12.3974 16.7126 12.0228 16.7126 11.5608V9.91931C14.3381 10.0999 12.177 11.0429 10.4729 12.5042L11.4479 13.479C11.7745 13.8058 11.7745 14.3354 11.4479 14.6622C11.1211 14.9888 10.5915 14.9888 10.2647 14.6622L9.28983 13.6872ZM28.4251 21.6H20.7905C20.4189 23.0434 19.1087 24.1099 17.5494 24.1099C15.9901 24.1099 14.68 23.0434 14.3083 21.6H6.67369V24.1099C6.67369 24.5719 7.04829 24.9465 7.51029 24.9465H27.5888C28.0508 24.9465 28.4254 24.5719 28.4254 24.1099L28.4251 21.6ZM15.8761 20.7634C15.8761 19.8393 16.6251 19.0902 17.5493 19.0902C18.4735 19.0902 19.2225 19.8393 19.2225 20.7634C19.2225 21.6876 18.4735 22.4366 17.5493 22.4366C16.6251 22.4366 15.8761 21.6876 15.8761 20.7634Z" fill="#A1A1A1"/>
+</svg>

BlazorPages/wwwroot/assets/icon/farmicon.svg

@@ -0,0 +1,12 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2217_7173)">
+<path d="M4.80023 11.7173H6.10219C6.1799 12.1198 6.33811 12.494 6.56036 12.8217L5.63925 13.7428C5.41783 13.9642 5.41783 14.3232 5.63925 14.5446C5.74999 14.6552 5.89513 14.7106 6.0402 14.7106C6.18526 14.7106 6.3304 14.6553 6.44115 14.5446L7.36226 13.6234C7.68996 13.8456 8.06408 14.0038 8.46661 14.0815V15.3836C8.46661 15.6967 8.72038 15.9505 9.03357 15.9505C9.34675 15.9505 9.60052 15.6967 9.60052 15.3836V14.0816C10.0031 14.0039 10.3772 13.8457 10.7049 13.6235L11.626 14.5446C11.7367 14.6553 11.8819 14.7107 12.0269 14.7107C12.172 14.7107 12.3171 14.6554 12.4279 14.5446C12.6493 14.3232 12.6493 13.9642 12.4279 13.7429L11.5068 12.8218C11.7289 12.4941 11.8872 12.1199 11.965 11.7173H13.2668C13.5799 11.7173 13.8337 11.4635 13.8337 11.1504C13.8337 10.8373 13.5799 10.5834 13.2668 10.5834H11.9648C11.8871 10.1809 11.7289 9.80671 11.5066 9.47901L12.4277 8.55789C12.6492 8.33648 12.6492 7.97748 12.4277 7.75615C12.2062 7.53473 11.8473 7.53473 11.6259 7.75615L10.7048 8.67726C10.3771 8.45509 10.003 8.29687 9.60045 8.21916V6.91705C9.60045 6.60394 9.34668 6.3501 9.03349 6.3501C8.72031 6.3501 8.46654 6.60394 8.46654 6.91705V8.21901C8.064 8.29672 7.68989 8.45494 7.36219 8.67711L6.44107 7.75599C6.21958 7.53458 5.86066 7.53458 5.63925 7.75599C5.41783 7.97741 5.41783 8.3364 5.63925 8.55774L6.56036 9.47886C6.33819 9.80656 6.1799 10.1807 6.10219 10.5833H4.80023C4.48705 10.5833 4.23328 10.8371 4.23328 11.1502C4.23328 11.4633 4.48705 11.7173 4.80023 11.7173ZM9.03349 9.29826C10.0548 9.29826 10.8855 10.1291 10.8855 11.1503C10.8855 12.1715 10.0548 13.0024 9.03349 13.0024C8.01222 13.0024 7.18144 12.1715 7.18144 11.1503C7.18144 10.1291 8.01222 9.29826 9.03349 9.29826Z" fill="#A1A1A1"/>
+<path d="M22.9428 15.9504H25.3618C25.675 15.9504 25.9288 15.6965 25.9288 15.3834V12.9644C25.9288 12.6513 25.675 12.3975 25.3618 12.3975H22.9428C22.6296 12.3975 22.3759 12.6513 22.3759 12.9644V15.3834C22.3759 15.6965 22.6296 15.9504 22.9428 15.9504ZM23.5098 13.5314H24.7949V14.8165H23.5098V13.5314Z" fill="#A1A1A1"/>
+<path d="M34.433 27.5163H15.5272C15.6049 27.3169 15.6479 27.1003 15.6479 26.8737C15.6479 26.0924 15.1407 25.4278 14.4384 25.1905V23.9723C18.5334 22.6275 21.6371 21.9979 24.1523 21.9979C30.1129 21.9979 34.0425 24.8708 34.0933 24.9086C34.1952 24.9849 34.3144 25.0217 34.4326 25.0217C34.6049 25.0217 34.7752 24.9434 34.8866 24.795C35.0745 24.5445 35.0237 24.1891 34.7732 24.0012C34.6731 23.9262 33.2275 22.8613 30.7667 21.9928V16.0066L30.917 16.2696C31.0217 16.4527 31.213 16.5554 31.4098 16.5554C31.5052 16.5554 31.6018 16.5313 31.6906 16.4805C31.9625 16.3252 32.057 15.9789 31.9016 15.707L29.4825 11.4737C29.4271 11.3765 29.344 11.298 29.2439 11.2479L24.4059 8.82891C24.2463 8.74909 24.0583 8.74909 23.8987 8.82891L19.0607 11.2479C18.9606 11.298 18.8775 11.3765 18.8221 11.4737L16.4031 15.707C16.2476 15.9789 16.3421 16.3252 16.614 16.4805C16.8859 16.636 17.2322 16.5415 17.3875 16.2696L17.5378 16.0065V18.2968C14.5512 17.517 11.402 17.7738 8.37702 19.0497H6.61447C6.30129 19.0497 6.04752 19.3036 6.04752 19.6167V20.4802C4.33705 19.6228 2.58289 19.164 0.599309 19.0507C0.286879 19.0324 0.0188229 19.2717 0.000982721 19.5843C-0.0168575 19.8969 0.222019 20.1648 0.534676 20.1827C3.11409 20.3302 4.887 21.1142 6.04759 21.7605V25.8484C3.697 26.7432 1.5493 27.5163 0.566955 27.5163C0.253769 27.5163 0 27.7701 0 28.0832C0 28.3963 0.253769 28.6502 0.566955 28.6502H34.433C34.7462 28.6502 35 28.3963 35 28.0832C35 27.7701 34.7462 27.5163 34.433 27.5163ZM13.8715 27.5163C13.5172 27.5163 13.2289 27.228 13.2289 26.8737C13.2289 26.5194 13.5172 26.2312 13.8715 26.2312C14.2258 26.2312 14.514 26.5194 14.514 26.8737C14.514 27.228 14.2258 27.5163 13.8715 27.5163ZM8.49079 20.1837C8.49094 20.1837 8.49117 20.1837 8.49132 20.1837C8.49154 20.1837 8.49185 20.1837 8.49207 20.1837H10.2808V22.6767L7.18143 22.1602V20.1837H8.49079ZM13.3045 24.3303V25.1906C13.0056 25.2916 12.742 25.47 12.5379 25.7021H10.7412C10.4862 24.662 9.54638 23.8878 8.42873 23.8878C7.97169 23.8878 7.54443 24.0176 7.18143 24.2417V23.3098L13.3045 24.3303ZM7.18143 26.269C7.18143 25.5812 7.74097 25.0217 8.42873 25.0217C9.11648 25.0217 9.67603 25.5812 9.67603 26.269C9.67603 26.9567 9.11648 27.5163 8.42873 27.5163C7.74097 27.5163 7.18143 26.9567 7.18143 26.269ZM10.7412 26.8359H12.096C12.0957 26.8485 12.095 26.861 12.095 26.8737C12.095 27.1003 12.1381 27.3169 12.2158 27.5163H10.456C10.5844 27.3085 10.6814 27.0795 10.7412 26.8359ZM26.6091 18.3694V21.0154C26.0062 20.9409 25.3758 20.8907 24.7192 20.8722V18.3694H26.6091ZM23.5853 20.8739C22.9865 20.8941 22.3577 20.9462 21.6955 21.0307V18.3694H23.5853V20.8739ZM19.7213 12.1853L24.1523 9.96978L28.5832 12.1853L29.6328 14.0221V21.6305C29.0459 21.4626 28.4149 21.3114 27.743 21.1886V17.8024C27.743 17.4893 27.4892 17.2355 27.176 17.2355H21.1285C20.8153 17.2355 20.5616 17.4893 20.5616 17.8024V21.2015C19.9592 21.3053 19.3306 21.4331 18.6717 21.5865V14.0221L19.7213 12.1853ZM17.5378 19.472V21.8675C16.2284 22.2106 14.8071 22.6442 13.2554 23.1726L13.2289 23.1681V21.6658L13.6677 21.2272C13.8891 21.0057 13.8891 20.6467 13.6677 20.4254C13.4462 20.204 13.0873 20.204 12.8659 20.4254L12.2611 21.0302C12.1548 21.1364 12.0951 21.2807 12.0951 21.431V22.9792L11.4148 22.8658V20.1837H11.4526C11.7657 20.1837 12.0195 19.9298 12.0195 19.6167C12.0195 19.4443 11.9423 19.2902 11.8209 19.1863C13.7434 18.8354 15.656 18.9303 17.5378 19.472ZM6.16809 27.0155C6.22667 27.1924 6.30514 27.3603 6.40145 27.5163H4.82569C5.25386 27.3602 5.70228 27.1922 6.16809 27.0155Z" fill="#A1A1A1"/>
+</g>
+<defs>
+<clipPath id="clip0_2217_7173">
+<rect width="35" height="35" fill="white"/>
+</clipPath>
+</defs>
+</svg>

BlazorPages/wwwroot/assets/images/Hamburger_icon.svg

@@ -1 +0,0 @@
-<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

BlazorPages/wwwroot/assets/img/apple_ic.svg

@@ -0,0 +1,10 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2213_7145)">
+<path d="M7.66835 25.5133C7.15573 25.1722 6.70141 24.7508 6.32285 24.2653C5.90643 23.7641 5.52061 23.2383 5.16747 22.6906C4.33879 21.4766 3.68891 20.1498 3.23779 18.7508C2.69585 17.1258 2.43341 15.5683 2.43341 14.0448C2.43341 12.3435 2.80147 10.8582 3.52135 9.61021C4.05498 8.63475 4.83956 7.8196 5.79391 7.24908C6.71879 6.67462 7.78148 6.36025 8.87003 6.33908C9.2511 6.33908 9.66141 6.39433 10.0969 6.49996C10.4097 6.58852 10.7908 6.72827 11.2563 6.90215C11.8487 7.13046 12.1745 7.27021 12.285 7.30433C12.6319 7.43108 12.9236 7.48633 13.1527 7.48633C13.3266 7.48633 13.572 7.43108 13.8507 7.34658C14.0075 7.29133 14.3032 7.19383 14.7265 7.01265C15.1458 6.8599 15.4757 6.72908 15.7381 6.63158C16.1403 6.51296 16.5295 6.40327 16.8764 6.34802C17.2877 6.28318 17.7051 6.266 18.1203 6.29683C18.8399 6.34386 19.5487 6.49635 20.2239 6.7494C21.3281 7.19383 22.221 7.88771 22.8857 8.87408C22.6047 9.04722 22.3411 9.24693 22.0983 9.47046C21.5699 9.93893 21.1198 10.4889 20.765 11.0995C20.3013 11.934 20.0609 12.8741 20.0671 13.8287C20.0842 15.0011 20.3848 16.0338 20.9771 16.9268C21.4126 17.5886 21.9785 18.1545 22.6403 18.59C22.9791 18.8183 23.2708 18.9751 23.5503 19.0807C23.4195 19.487 23.2797 19.8802 23.1148 20.2702C22.7407 21.1448 22.2873 21.9833 21.7603 22.7751C21.2907 23.4568 20.9227 23.9646 20.6432 24.3026C20.2077 24.8186 19.7884 25.2126 19.3651 25.4873C18.8995 25.796 18.3495 25.961 17.7905 25.961C17.4119 25.9755 17.0334 25.9297 16.6692 25.8253C16.3564 25.7196 16.0468 25.6051 15.7422 25.4743C15.4254 25.3288 15.0988 25.2058 14.7647 25.1062C13.939 24.8941 13.0732 24.8927 12.2468 25.1021C11.908 25.1996 11.5822 25.3134 11.2604 25.4531C10.8078 25.6433 10.5072 25.7708 10.3333 25.8253C9.98641 25.9268 9.62647 25.9902 9.26247 26.0113C8.69941 26.0113 8.17453 25.8505 7.65453 25.5246L7.66835 25.5133ZM15.0946 5.51358C14.3585 5.88165 13.6557 6.03846 12.9577 5.98727C12.848 5.28446 12.9577 4.5654 13.2494 3.77808C13.4977 3.11107 13.8647 2.49448 14.3325 1.95808C14.8265 1.39341 15.4259 0.930576 16.0972 0.59552C16.8122 0.227458 17.4939 0.0283955 18.1455 -0.000854492C18.23 0.735271 18.1455 1.45921 17.875 2.24165C17.6246 2.93331 17.2583 3.57734 16.7919 4.14615C16.3158 4.71159 15.7316 5.17622 15.0735 5.51277L15.0946 5.51358Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_2213_7145">
+<rect width="26" height="26" fill="white"/>
+</clipPath>
+</defs>
+</svg>

BlazorPages/wwwroot/assets/img/facebook_ic.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7956 25V14.0703H18.3496L18.8779 9.79094H14.7956V7.06518C14.7956 5.83032 15.1272 4.98485 16.8355 4.98485H19V1.16959C17.9468 1.05249 16.8882 0.995949 15.829 1.00023C12.6877 1.00023 10.5308 2.98987 10.5308 6.64245V9.78294H7V14.0623H10.5386V25H14.7956Z" fill="#4092FF"/>
+</svg>

BlazorPages/wwwroot/assets/img/google_ic.svg

@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.42014 15.4656L5.59739 18.537L2.59026 18.6006C1.69158 16.9338 1.18182 15.0266 1.18182 13C1.18182 11.0403 1.65843 9.1922 2.50324 7.56494H2.50389L5.18108 8.05576L6.35385 10.7169C6.10839 11.4325 5.9746 12.2007 5.9746 13C5.9747 13.8675 6.13184 14.6987 6.42014 15.4656Z" fill="#FBBB00"/>
+<path d="M24.6117 10.7921C24.7474 11.507 24.8182 12.2453 24.8182 12.9999C24.8182 13.846 24.7292 14.6713 24.5598 15.4675C23.9845 18.1765 22.4812 20.5421 20.3987 22.2161L20.3981 22.2155L17.026 22.0434L16.5488 19.0642C17.9306 18.2538 19.0105 16.9856 19.5793 15.4675H13.2598V10.7921H19.6715H24.6117Z" fill="#518EF8"/>
+<path d="M20.3981 22.2156L20.3987 22.2162C18.3734 23.8441 15.8006 24.8181 13 24.8181C8.49936 24.8181 4.58639 22.3026 2.59027 18.6006L6.42015 15.4656C7.41818 18.1292 9.98767 20.0253 13 20.0253C14.2948 20.0253 15.5078 19.6753 16.5487 19.0643L20.3981 22.2156Z" fill="#28B446"/>
+<path d="M20.5436 3.90253L16.715 7.03693C15.6377 6.36357 14.3643 5.97459 13.0001 5.97459C9.91953 5.97459 7.30199 7.95769 6.35395 10.7168L2.50394 7.56487H2.5033C4.47019 3.77267 8.43252 1.18176 13.0001 1.18176C15.8676 1.18176 18.4968 2.2032 20.5436 3.90253Z" fill="#F14336"/>
+</svg>

BlazorPages/wwwroot/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

BlazorPages/wwwroot/assets/scss/abstracts/_mixins.scss

@@ -0,0 +1,51 @@
+@mixin transform($transforms) {
+    -moz-transform: $transforms;
+    -o-transform: $transforms;
+    -ms-transform: $transforms;
+    -webkit-transform: $transforms;
+    transform: $transforms; 
+}
+
+@mixin border-radius($top-left:10px, $top-right:null, $bottom-right:null, $bottom-left:null) {
+    -webkit-border-radius: $top-left $top-right $bottom-right $bottom-left;
+    -moz-border-radius: $top-left $top-right $bottom-right $bottom-left;
+    -ms-border-radius: $top-left $top-right $bottom-right $bottom-left;
+    border-radius: $top-left $top-right $bottom-right $bottom-left;
+}
+
+@mixin transition($property: all, $duration: .3s, $ease: linear) {
+    -webkit-transition: $property $duration $ease;
+    -moz-transition: $property $duration $ease;
+    -o-transition: $property $duration $ease;
+    transition: $property $duration $ease;
+}
+
+@mixin box-shadow($left, $top, $radius, $color) {
+    box-shadow: $left $top $radius $color;
+    -webkit-box-shadow: $left $top $radius $color;
+    -moz-box-shadow: $left $top $radius $color;
+}
+
+@mixin text-shadow($left, $top, $radius, $color) {
+    text-shadow: $left $top $radius $color;
+    -webkit-text-shadow: $left $top $radius $color;
+    -moz-text-shadow: $left $top $radius $color;
+}
+
+@mixin gradient($color1, $color2) {
+    background-color: $color1;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$color1}, endColorstr=#{$color2});
+    background-image: -moz-linear-gradient(center top, $color1, $color2);
+    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2));
+}
+
+// Responsive alignment
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .text#{$infix}-left   { text-align: left !important; }
+    .text#{$infix}-right  { text-align: right !important; }
+    .text#{$infix}-center { text-align: center !important; }
+  }
+}

BlazorPages/wwwroot/assets/scss/abstracts/_typography.scss

@@ -0,0 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
+
+html, body{
+    font-family: "Jost", serif;
+}
+.heading{
+    font-weight: bold;
+}

BlazorPages/wwwroot/assets/scss/abstracts/_variables.scss

@@ -0,0 +1,5 @@
+//Brand colors
+$primary:         #002d42!default;
+$secondary:       #54bc78!default;
+
+$gray:#888888;

BlazorPages/wwwroot/assets/scss/components/_common.scss

@@ -0,0 +1,204 @@
+html{scroll-behavior: smooth;}
+iframe{border: 0;}
+
+body{
+  height: 100vh;
+  width: 100%;
+  background-color: #F2F2F2;
+  @include media-breakpoint-up(md) {
+    background-color: #222222;
+    height: calc(100vh - 2rem);
+    padding: 1rem 0;
+  }
+}
+#app{
+  height: 100vh;
+
+  @include media-breakpoint-up(md) {
+    overflow-x: scroll;
+    height: calc(100vh - 2rem);
+    max-width: 480px;
+    margin: 0 auto;
+    background-color: #F2F2F2;
+    @include border-radius(8px);
+    position: relative;
+  }
+}
+
+.bold{
+  font-weight: bold;
+}
+
+.btn-secondary{
+  color: #fff !important;
+}
+
+.shadow-b-01{
+  @include text-shadow(2px, 2px, 4px, #00000063)
+}
+
+.logo{
+  display: flex;
+  &-md{
+    img{
+      width: 150px;
+    }
+  }
+  &-sm{
+    img{
+      width: 100px;
+    }
+  }
+  &.center{
+    justify-content: center;
+  }
+}
+
+.title_line{
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
+  margin-bottom: 1rem;
+  color: #6A707C;
+  &:after, &::before{
+    content: " ";
+    height: 1px;
+    background-color: #d6d7d7;
+    flex: 2;
+  }
+}
+
+.w-box{
+  background-color: #fff;
+  @include border-radius(0.6rem);
+  display: flex;
+  width: 100%;
+  @include box-shadow(1px, 3px, 10px, rgba(0,0,0,0.10));
+  text-decoration: none;
+}
+
+.text-gray{ color: $gray;}
+.text-green{ color: #28B446;}
+
+
+.bl-green{
+  border-left: 3px solid $secondary;
+}
+.bl-blue{
+  border-left: 3px solid #4092FF;
+}
+.bl-danger{
+  border-left: 3px solid $danger;
+}
+
+
+
+.item{
+  &__holder{
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 1rem;
+    row-gap: 1rem;
+  }
+  &__select{
+      background-color: #fff;
+      @include border-radius(0.6rem);
+      padding: 1rem;
+      border: 1px solid #ddd;
+      @include transition(all, 0.2s, ease-in);
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      z-index: 1;
+
+      &.w-100{
+        width: 100%;
+      }
+      &.w-50{
+        width: calc(50% - 0.5rem) !important;
+      }
+
+      .title{
+         font-size: 0.9rem;
+         display: flex;
+         gap: 0.5rem;
+         border-bottom: 1px solid #ddd;
+         margin-bottom: 0.8rem;
+         padding-bottom: 0.8rem;
+      }
+      .name{
+          font-weight: 600;
+          text-align: center;
+      }
+      .desc{
+          font-weight: 300;
+          text-align: center;
+          color: #8d8d8d;
+      }
+      .checkbox{
+          display: flex;
+          justify-content: center;
+          span{
+              width: 22px;
+              height: 22px;
+              border: 1px solid #ddd;
+              display: flex;
+              @include border-radius(20px);
+              padding: 2px;
+          }
+      }
+      .checked{
+          display: none;
+      }
+      &:hover, &:has(input[type="radio"]:checked){
+          border:1px solid $secondary;
+      }
+      input[type="radio"] {
+          display: none;
+      }
+      &:has(input[type="radio"]:checked){
+          border-color: $secondary;
+          .desc{
+            color: $black;
+          }
+          .checkbox{
+              span{
+                  border: 1px solid $secondary;
+                  &:after{
+                      content: "";
+                      width: 16px;
+                      height: 16px;
+                      background-color: $secondary;
+                      @include border-radius(20px);
+                  }
+              }
+          }
+          .checked{
+              position: absolute;
+              width: 30px;
+              height: 30px;
+              left: 0;
+              top: 0;
+              display: flex;
+              justify-content: flex-start;
+              padding: 5px;
+              font-size: 1rem;
+              color: #fff;
+
+              &::after{
+                content: '';
+                z-index: -1;
+                position: absolute;
+                top: -29px;
+                left: -29px;
+                width: 56px;
+                height: 56px;
+                transform: rotate(45deg);
+                background-color: $secondary;
+              }
+          }
+      }
+  }
+}

BlazorPages/wwwroot/assets/scss/components/_dashboard.scss

@@ -0,0 +1,61 @@
+.dashboard{
+    min-height: 100%;
+}
+
+.cta-link{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+.nav{
+    position: sticky;
+    background-color: rgba(255,255,255,0.92);
+    bottom: 1rem;
+    left: 1rem;
+    z-index: 10;
+    width: calc(100% - 2rem);
+    @include border-radius(0.6rem);
+    display: flex;
+    justify-content: space-around;
+    @include box-shadow(1px, 2px, 14px, rgba(0,0,0,0.10));
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+
+    a{
+        display: flex;
+        width: 90px;
+        align-items: center;
+        flex-direction: column;
+        padding: 0.6rem 0;
+        text-decoration: none;
+        position: relative;
+        span{
+            color: #A1A1A1;
+            font-size: 0.9rem;
+        }
+        &::after{
+            content: "";
+            height: 3px;
+            background-color: transparent;
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            @include border-radius(3px);
+        }
+
+        &.active{
+            img{
+                filter: invert(69%) sepia(23%) saturate(866%) hue-rotate(88deg) brightness(89%) contrast(92%);
+            }
+            span{
+                color: $black;
+            }
+            &::after{
+                background-color: $secondary;
+            }
+        }
+    }
+}

BlazorPages/wwwroot/assets/scss/components/_login.scss

@@ -0,0 +1,32 @@
+.login{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-size: cover;
+    background-position: center center;
+    justify-content: space-between;
+
+    .logo{
+        img{
+            width: 150px;
+        }
+    }
+
+    &.login-01{
+        background-image: url(../img/welcome_bg.jpg);
+    }
+}
+
+.social_login{
+    column-gap: 0.5rem;
+    a{
+        flex:2;
+        border: 1px solid #cbcbcb;
+        padding-top: 0.6rem;
+        padding-bottom: 0.6rem;
+        &:hover{
+            border: 1px solid $secondary;
+        }
+    }
+}

BlazorPages/wwwroot/assets/scss/components/_splash.scss

@@ -0,0 +1,19 @@
+.splash{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-size: cover;
+    background-position: center center;
+    justify-content: space-between;
+
+    &.splash-01{
+        background-image: url(../img/splash-01.jpg);
+    }
+    &.splash-02{
+        background-image: url(../img/splash-02.jpg);
+    }
+    &.splash-03{
+        background-image: url(../img/splash-03.jpg);
+    }
+}

BlazorPages/wwwroot/assets/scss/styles.scss

@@ -0,0 +1,18 @@
+@import 'abstracts/variables';
+@import 'vendors/bootstrap/bootstrap';
+
+@import 'abstracts/mixins';
+@import 'abstracts/typography';
+
+// fontawesome
+@import 'vendors/fontawesome/scss/fontawesome';
+@import 'vendors/fontawesome/scss/brands';
+@import 'vendors/fontawesome/scss/regular';
+@import 'vendors/fontawesome/scss/solid';
+
+// Components
+@import 'components/common';
+@import 'components/splash';
+@import 'components/login';
+@import 'components/dashboard';
+

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_accordion.scss

@@ -0,0 +1,158 @@
+//
+// Base styles
+//
+
+.accordion {
+  // scss-docs-start accordion-css-vars
+  --#{$prefix}accordion-color: #{$accordion-color};
+  --#{$prefix}accordion-bg: #{$accordion-bg};
+  --#{$prefix}accordion-transition: #{$accordion-transition};
+  --#{$prefix}accordion-border-color: #{$accordion-border-color};
+  --#{$prefix}accordion-border-width: #{$accordion-border-width};
+  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
+  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
+  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
+  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
+  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
+  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+  // scss-docs-end accordion-css-vars
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
+  @include font-size($font-size-base);
+  color: var(--#{$prefix}accordion-btn-color);
+  text-align: left; // Reset button style
+  background-color: var(--#{$prefix}accordion-btn-bg);
+  border: 0;
+  @include border-radius(0);
+  overflow-anchor: none;
+  @include transition(var(--#{$prefix}accordion-transition));
+
+  &:not(.collapsed) {
+    color: var(--#{$prefix}accordion-active-color);
+    background-color: var(--#{$prefix}accordion-active-bg);
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+
+    &::after {
+      background-image: var(--#{$prefix}accordion-btn-active-icon);
+      transform: var(--#{$prefix}accordion-btn-icon-transform);
+    }
+  }
+
+  // Accordion icon
+  &::after {
+    flex-shrink: 0;
+    width: var(--#{$prefix}accordion-btn-icon-width);
+    height: var(--#{$prefix}accordion-btn-icon-width);
+    margin-left: auto;
+    content: "";
+    background-image: var(--#{$prefix}accordion-btn-icon);
+    background-repeat: no-repeat;
+    background-size: var(--#{$prefix}accordion-btn-icon-width);
+    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: 0;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+  }
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  color: var(--#{$prefix}accordion-color);
+  background-color: var(--#{$prefix}accordion-bg);
+  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+
+  &:first-of-type {
+    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+
+    > .accordion-header .accordion-button {
+      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  // Only set a border-radius on the last item if the accordion is collapsed
+  &:last-of-type {
+    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+    > .accordion-header .accordion-button {
+      &.collapsed {
+        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+      }
+    }
+
+    > .accordion-collapse {
+      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+    }
+  }
+}
+
+.accordion-body {
+  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
+}
+
+
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+  > .accordion-item {
+    border-right: 0;
+    border-left: 0;
+    @include border-radius(0);
+
+    &:first-child { border-top: 0; }
+    &:last-child { border-bottom: 0; }
+
+    // stylelint-disable selector-max-class
+    > .accordion-header .accordion-button {
+      &,
+      &.collapsed {
+        @include border-radius(0);
+      }
+    }
+    // stylelint-enable selector-max-class
+
+    > .accordion-collapse {
+      @include border-radius(0);
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .accordion-button::after {
+      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+    }
+  }
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_alert.scss

@@ -0,0 +1,68 @@
+//
+// Base styles
+//
+
+.alert {
+  // scss-docs-start alert-css-vars
+  --#{$prefix}alert-bg: transparent;
+  --#{$prefix}alert-padding-x: #{$alert-padding-x};
+  --#{$prefix}alert-padding-y: #{$alert-padding-y};
+  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+  --#{$prefix}alert-color: inherit;
+  --#{$prefix}alert-border-color: transparent;
+  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
+  --#{$prefix}alert-border-radius: #{$alert-border-radius};
+  --#{$prefix}alert-link-color: inherit;
+  // scss-docs-end alert-css-vars
+
+  position: relative;
+  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+  margin-bottom: var(--#{$prefix}alert-margin-bottom);
+  color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-bg);
+  border: var(--#{$prefix}alert-border);
+  @include border-radius(var(--#{$prefix}alert-border-radius));
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  padding-right: $alert-dismissible-padding-r;
+
+  // Adjust close link position
+  .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: $stretched-link-z-index + 1;
+    padding: $alert-padding-y * 1.25 $alert-padding-x;
+  }
+}
+
+
+// scss-docs-start alert-modifiers
+// Generate contextual modifier classes for colorizing the alert
+@each $state in map-keys($theme-colors) {
+  .alert-#{$state} {
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
+  }
+}
+// scss-docs-end alert-modifiers

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_badge.scss

@@ -0,0 +1,38 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  // scss-docs-start badge-css-vars
+  --#{$prefix}badge-padding-x: #{$badge-padding-x};
+  --#{$prefix}badge-padding-y: #{$badge-padding-y};
+  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
+  --#{$prefix}badge-font-weight: #{$badge-font-weight};
+  --#{$prefix}badge-color: #{$badge-color};
+  --#{$prefix}badge-border-radius: #{$badge-border-radius};
+  // scss-docs-end badge-css-vars
+
+  display: inline-block;
+  padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+  @include font-size(var(--#{$prefix}badge-font-size));
+  font-weight: var(--#{$prefix}badge-font-weight);
+  line-height: 1;
+  color: var(--#{$prefix}badge-color);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius(var(--#{$prefix}badge-border-radius));
+  @include gradient-bg();
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_breadcrumb.scss

@@ -0,0 +1,40 @@
+.breadcrumb {
+  // scss-docs-start breadcrumb-css-vars
+  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
+  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
+  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
+  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
+  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
+  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
+  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
+  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
+  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
+  // scss-docs-end breadcrumb-css-vars
+
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
+  margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
+  @include font-size(var(--#{$prefix}breadcrumb-font-size));
+  list-style: none;
+  background-color: var(--#{$prefix}breadcrumb-bg);
+  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+
+    &::before {
+      float: left; // Suppress inline spacings and underlining of the separator
+      padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+      color: var(--#{$prefix}breadcrumb-divider-color);
+      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+    }
+  }
+
+  &.active {
+    color: var(--#{$prefix}breadcrumb-item-active-color);
+  }
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_button-group.scss

@@ -0,0 +1,142 @@
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle; // match .btn alignment given font-size hack above
+
+  > .btn {
+    position: relative;
+    flex: 1 1 auto;
+  }
+
+  // Bring the hover, focused, and "active" buttons to the front to overlay
+  // the borders properly
+  > .btn-check:checked + .btn,
+  > .btn-check:focus + .btn,
+  > .btn:hover,
+  > .btn:focus,
+  > .btn:active,
+  > .btn.active {
+    z-index: 1;
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+.btn-group {
+  @include border-radius($btn-border-radius);
+
+  // Prevent double borders when buttons are next to each other
+  > :not(.btn-check:first-child) + .btn,
+  > .btn-group:not(:first-child) {
+    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn.dropdown-toggle-split:first-child,
+  > .btn-group:not(:last-child) > .btn {
+    @include border-end-radius(0);
+  }
+
+  // The left radius should be 0 if the button is:
+  // - the "third or more" child
+  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+  // - part of a btn-group which isn't the first child
+  > .btn:nth-child(n + 3),
+  > :not(.btn-check) + .btn,
+  > .btn-group:not(:first-child) > .btn {
+    @include border-start-radius(0);
+  }
+}
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-sm > .btn { @extend .btn-sm; }
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+
+//
+// Split button dropdowns
+//
+
+.dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
+
+  &::after,
+  .dropup &::after,
+  .dropend &::after {
+    margin-left: 0;
+  }
+
+  .dropstart &::before {
+    margin-right: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
+}
+
+
+// The clickable button for toggling the menu
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    @include box-shadow(none);
+  }
+}
+
+
+//
+// Vertical button groups
+//
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  > .btn,
+  > .btn-group {
+    width: 100%;
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn ~ .btn,
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_buttons.scss

@@ -0,0 +1,216 @@
+//
+// Base styles
+//
+
+.btn {
+  // scss-docs-start btn-css-vars
+  --#{$prefix}btn-padding-x: #{$btn-padding-x};
+  --#{$prefix}btn-padding-y: #{$btn-padding-y};
+  --#{$prefix}btn-font-family: #{$btn-font-family};
+  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-font-weight: #{$btn-font-weight};
+  --#{$prefix}btn-line-height: #{$btn-line-height};
+  --#{$prefix}btn-color: #{$btn-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-width: #{$btn-border-width};
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
+  // scss-docs-end btn-css-vars
+
+  display: inline-block;
+  padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
+  font-family: var(--#{$prefix}btn-font-family);
+  @include font-size(var(--#{$prefix}btn-font-size));
+  font-weight: var(--#{$prefix}btn-font-weight);
+  line-height: var(--#{$prefix}btn-line-height);
+  color: var(--#{$prefix}btn-color);
+  text-align: center;
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: $btn-white-space;
+  vertical-align: middle;
+  cursor: if($enable-button-pointers, pointer, null);
+  user-select: none;
+  border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
+  @include border-radius(var(--#{$prefix}btn-border-radius));
+  @include gradient-bg(var(--#{$prefix}btn-bg));
+  @include box-shadow(var(--#{$prefix}btn-box-shadow));
+  @include transition($btn-transition);
+
+  &:hover {
+    color: var(--#{$prefix}btn-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
+    background-color: var(--#{$prefix}btn-hover-bg);
+    border-color: var(--#{$prefix}btn-hover-border-color);
+  }
+
+  .btn-check + &:hover {
+    // override for the checkbox/radio buttons
+    color: var(--#{$prefix}btn-color);
+    background-color: var(--#{$prefix}btn-bg);
+    border-color: var(--#{$prefix}btn-border-color);
+  }
+
+  &:focus-visible {
+    color: var(--#{$prefix}btn-hover-color);
+    @include gradient-bg(var(--#{$prefix}btn-hover-bg));
+    border-color: var(--#{$prefix}btn-hover-border-color);
+    outline: 0;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+
+  .btn-check:focus-visible + & {
+    border-color: var(--#{$prefix}btn-hover-border-color);
+    outline: 0;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+
+  .btn-check:checked + &,
+  :not(.btn-check) + &:active,
+  &:first-child:active,
+  &.active,
+  &.show {
+    color: var(--#{$prefix}btn-active-color);
+    background-color: var(--#{$prefix}btn-active-bg);
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$prefix}btn-active-border-color);
+    @include box-shadow(var(--#{$prefix}btn-active-shadow));
+
+    &:focus-visible {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+      } @else {
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+      }
+    }
+  }
+
+  .btn-check:checked:focus-visible + & {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+
+  &:disabled,
+  &.disabled,
+  fieldset:disabled & {
+    color: var(--#{$prefix}btn-disabled-color);
+    pointer-events: none;
+    background-color: var(--#{$prefix}btn-disabled-bg);
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$prefix}btn-disabled-border-color);
+    opacity: var(--#{$prefix}btn-disabled-opacity);
+    @include box-shadow(none);
+  }
+}
+
+
+//
+// Alternate buttons
+//
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @if $color == "light" {
+      @include button-variant(
+        $value,
+        $value,
+        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+        $active-background: shade-color($value, $btn-active-bg-shade-amount),
+        $active-border: shade-color($value, $btn-active-border-shade-amount)
+      );
+    } @else if $color == "dark" {
+      @include button-variant(
+        $value,
+        $value,
+        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+        $active-background: tint-color($value, $btn-active-bg-tint-amount),
+        $active-border: tint-color($value, $btn-active-border-tint-amount)
+      );
+    } @else {
+      @include button-variant($value, $value);
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+// scss-docs-end btn-variant-loops
+
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+  --#{$prefix}btn-font-weight: #{$font-weight-normal};
+  --#{$prefix}btn-color: #{$btn-link-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-active-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
+  --#{$prefix}btn-disabled-border-color: transparent;
+  --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
+  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
+
+  text-decoration: $link-decoration;
+  @if $enable-gradients {
+    background-image: none;
+  }
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:focus-visible {
+    color: var(--#{$prefix}btn-color);
+  }
+
+  &:hover {
+    color: var(--#{$prefix}btn-hover-color);
+  }
+
+  // No need for an active state here
+}
+
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
+}
+
+.btn-sm {
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_card.scss

@@ -0,0 +1,239 @@
+//
+// Base styles
+//
+
+.card {
+  // scss-docs-start card-css-vars
+  --#{$prefix}card-spacer-y: #{$card-spacer-y};
+  --#{$prefix}card-spacer-x: #{$card-spacer-x};
+  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
+  --#{$prefix}card-title-color: #{$card-title-color};
+  --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
+  --#{$prefix}card-border-width: #{$card-border-width};
+  --#{$prefix}card-border-color: #{$card-border-color};
+  --#{$prefix}card-border-radius: #{$card-border-radius};
+  --#{$prefix}card-box-shadow: #{$card-box-shadow};
+  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
+  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
+  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
+  --#{$prefix}card-cap-bg: #{$card-cap-bg};
+  --#{$prefix}card-cap-color: #{$card-cap-color};
+  --#{$prefix}card-height: #{$card-height};
+  --#{$prefix}card-color: #{$card-color};
+  --#{$prefix}card-bg: #{$card-bg};
+  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
+  --#{$prefix}card-group-margin: #{$card-group-margin};
+  // scss-docs-end card-css-vars
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+  height: var(--#{$prefix}card-height);
+  color: var(--#{$prefix}body-color);
+  word-wrap: break-word;
+  background-color: var(--#{$prefix}card-bg);
+  background-clip: border-box;
+  border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+  @include border-radius(var(--#{$prefix}card-border-radius));
+  @include box-shadow(var(--#{$prefix}card-box-shadow));
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .list-group {
+    border-top: inherit;
+    border-bottom: inherit;
+
+    &:first-child {
+      border-top-width: 0;
+      @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+    }
+
+    &:last-child  {
+      border-bottom-width: 0;
+      @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+    }
+  }
+
+  // Due to specificity of the above selector (`.card > .list-group`), we must
+  // use a child selector here to prevent double borders.
+  > .card-header + .list-group,
+  > .list-group + .card-footer {
+    border-top: 0;
+  }
+}
+
+.card-body {
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
+  padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
+  color: var(--#{$prefix}card-color);
+}
+
+.card-title {
+  margin-bottom: var(--#{$prefix}card-title-spacer-y);
+  color: var(--#{$prefix}card-title-color);
+}
+
+.card-subtitle {
+  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
+  margin-bottom: 0;
+  color: var(--#{$prefix}card-subtitle-color);
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link {
+  &:hover {
+    text-decoration: if($link-hover-decoration == underline, none, null);
+  }
+
+  + .card-link {
+    margin-left: var(--#{$prefix}card-spacer-x);
+  }
+}
+
+//
+// Optional textual caps
+//
+
+.card-header {
+  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
+  color: var(--#{$prefix}card-cap-color);
+  background-color: var(--#{$prefix}card-cap-bg);
+  border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+
+  &:first-child {
+    @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
+  }
+}
+
+.card-footer {
+  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+  color: var(--#{$prefix}card-cap-color);
+  background-color: var(--#{$prefix}card-cap-bg);
+  border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+
+  &:last-child {
+    @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
+  }
+}
+
+
+//
+// Header navs
+//
+
+.card-header-tabs {
+  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  border-bottom: 0;
+
+  .nav-link.active {
+    background-color: var(--#{$prefix}card-bg);
+    border-bottom-color: var(--#{$prefix}card-bg);
+  }
+}
+
+.card-header-pills {
+  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+}
+
+// Card image
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: var(--#{$prefix}card-img-overlay-padding);
+  @include border-radius(var(--#{$prefix}card-inner-border-radius));
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+}
+
+.card-img,
+.card-img-top {
+  @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+}
+
+.card-img,
+.card-img-bottom {
+  @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+}
+
+
+//
+// Card groups
+//
+
+.card-group {
+  // The child selector allows nested `.card` within `.card-group`
+  // to display properly.
+  > .card {
+    margin-bottom: var(--#{$prefix}card-group-margin);
+  }
+
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+    // The child selector allows nested `.card` within `.card-group`
+    // to display properly.
+    > .card {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      flex: 1 0 0%;
+      margin-bottom: 0;
+
+      + .card {
+        margin-left: 0;
+        border-left: 0;
+      }
+
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:not(:last-child) {
+          @include border-end-radius(0);
+
+          .card-img-top,
+          .card-header {
+            // stylelint-disable-next-line property-disallowed-list
+            border-top-right-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            // stylelint-disable-next-line property-disallowed-list
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          @include border-start-radius(0);
+
+          .card-img-top,
+          .card-header {
+            // stylelint-disable-next-line property-disallowed-list
+            border-top-left-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            // stylelint-disable-next-line property-disallowed-list
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_carousel.scss

@@ -0,0 +1,236 @@
+// Notes on the classes:
+//
+// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
+//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
+//    we're preventing all actions instead
+// 2. The .carousel-item-start and .carousel-item-end is used to indicate where
+//    the active slide is heading.
+// 3. .active.carousel-item is the current slide.
+// 4. .active.carousel-item-start and .active.carousel-item-end is the current
+//    slide in its in-transition state. Only one of these occurs at a time.
+// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
+//    is the upcoming slide in transition.
+
+.carousel {
+  position: relative;
+}
+
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  @include clearfix();
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  backface-visibility: hidden;
+  @include transition($carousel-transition);
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-start),
+.active.carousel-item-end {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-end),
+.active.carousel-item-start {
+  transform: translateX(-100%);
+}
+
+
+//
+// Alternate transitions
+//
+
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-property: opacity;
+    transform: none;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-start,
+  .carousel-item-prev.carousel-item-end {
+    z-index: 1;
+    opacity: 1;
+  }
+
+  .active.carousel-item-start,
+  .active.carousel-item-end {
+    z-index: 0;
+    opacity: 0;
+    @include transition(opacity 0s $carousel-transition-duration);
+  }
+}
+
+
+//
+// Left/right controls for nav
+//
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
+  width: $carousel-control-width;
+  padding: 0;
+  color: $carousel-control-color;
+  text-align: center;
+  background: none;
+  border: 0;
+  opacity: $carousel-control-opacity;
+  @include transition($carousel-control-transition);
+
+  // Hover/focus state
+  &:hover,
+  &:focus {
+    color: $carousel-control-color;
+    text-decoration: none;
+    outline: 0;
+    opacity: $carousel-control-hover-opacity;
+  }
+}
+.carousel-control-prev {
+  left: 0;
+  background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
+}
+.carousel-control-next {
+  right: 0;
+  background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
+}
+
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 100% 100%;
+}
+
+.carousel-control-prev-icon {
+  background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
+}
+.carousel-control-next-icon {
+  background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
+}
+
+// Optional indicator pips/controls
+//
+// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
+// like a button) with data-bs-target for each slide your carousel holds.
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  // Use the .carousel-control's width as margin so we don't overlay those
+  margin-right: $carousel-control-width;
+  margin-bottom: 1rem;
+  margin-left: $carousel-control-width;
+
+  [data-bs-target] {
+    box-sizing: content-box;
+    flex: 0 1 auto;
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    padding: 0;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: $carousel-indicator-active-bg;
+    background-clip: padding-box;
+    border: 0;
+    // Use transparent borders to increase the hit area by 10px on top and bottom.
+    border-top: $carousel-indicator-hit-area-height solid transparent;
+    border-bottom: $carousel-indicator-hit-area-height solid transparent;
+    opacity: $carousel-indicator-opacity;
+    @include transition($carousel-indicator-transition);
+  }
+
+  .active {
+    opacity: $carousel-indicator-active-opacity;
+  }
+}
+
+
+// Optional captions
+//
+//
+
+.carousel-caption {
+  position: absolute;
+  right: (100% - $carousel-caption-width) * .5;
+  bottom: $carousel-caption-spacer;
+  left: (100% - $carousel-caption-width) * .5;
+  padding-top: $carousel-caption-padding-y;
+  padding-bottom: $carousel-caption-padding-y;
+  color: $carousel-caption-color;
+  text-align: center;
+}
+
+// Dark mode carousel
+
+@mixin carousel-dark() {
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    filter: $carousel-dark-control-icon-filter;
+  }
+
+  .carousel-indicators [data-bs-target] {
+    background-color: $carousel-dark-indicator-active-bg;
+  }
+
+  .carousel-caption {
+    color: $carousel-dark-caption-color;
+  }
+}
+
+.carousel-dark {
+  @include carousel-dark();
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @if $color-mode-type == "media-query" {
+      .carousel {
+        @include carousel-dark();
+      }
+    } @else {
+      .carousel,
+      &.carousel {
+        @include carousel-dark();
+      }
+    }
+  }
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_close.scss

@@ -0,0 +1,63 @@
+// Transparent background and border properties included for button version.
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+.btn-close {
+  // scss-docs-start close-css-vars
+  --#{$prefix}btn-close-color: #{$btn-close-color};
+  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+  --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+  --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+  --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+  --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
+  // scss-docs-end close-css-vars
+
+  box-sizing: content-box;
+  width: $btn-close-width;
+  height: $btn-close-height;
+  padding: $btn-close-padding-y $btn-close-padding-x;
+  color: var(--#{$prefix}btn-close-color);
+  background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  border: 0; // for button elements
+  @include border-radius();
+  opacity: var(--#{$prefix}btn-close-opacity);
+
+  // Override <a>'s hover style
+  &:hover {
+    color: var(--#{$prefix}btn-close-color);
+    text-decoration: none;
+    opacity: var(--#{$prefix}btn-close-hover-opacity);
+  }
+
+  &:focus {
+    outline: 0;
+    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    opacity: var(--#{$prefix}btn-close-focus-opacity);
+  }
+
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    user-select: none;
+    opacity: var(--#{$prefix}btn-close-disabled-opacity);
+  }
+}
+
+@mixin btn-close-white() {
+  filter: var(--#{$prefix}btn-close-white-filter);
+}
+
+.btn-close-white {
+  @include btn-close-white();
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .btn-close {
+      @include btn-close-white();
+    }
+  }
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_containers.scss

@@ -0,0 +1,41 @@
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+@if $enable-container-classes {
+  // Single container class with breakpoint max-widths
+  .container,
+  // 100% wide container at all breakpoints
+  .container-fluid {
+    @include make-container();
+  }
+
+  // Responsive containers that are 100% wide until a breakpoint
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    .container-#{$breakpoint} {
+      @extend .container-fluid;
+    }
+
+    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+      %responsive-container-#{$breakpoint} {
+        max-width: $container-max-width;
+      }
+
+      // Extend each breakpoint which is smaller or equal to the current breakpoint
+      $extend-breakpoint: true;
+
+      @each $name, $width in $grid-breakpoints {
+        @if ($extend-breakpoint) {
+          .container#{breakpoint-infix($name, $grid-breakpoints)} {
+            @extend %responsive-container-#{$breakpoint};
+          }
+
+          // Once the current breakpoint is reached, stop extending
+          @if ($breakpoint == $name) {
+            $extend-breakpoint: false;
+          }
+        }
+      }
+    }
+  }
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_dropdown.scss

@@ -0,0 +1,250 @@
+// The dropdown wrapper (`<div>`)
+.dropup,
+.dropend,
+.dropdown,
+.dropstart,
+.dropup-center,
+.dropdown-center {
+  position: relative;
+}
+
+.dropdown-toggle {
+  white-space: nowrap;
+
+  // Generate the caret automatically
+  @include caret();
+}
+
+// The dropdown menu
+.dropdown-menu {
+  // scss-docs-start dropdown-css-vars
+  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
+  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
+  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
+  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
+  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
+  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
+  --#{$prefix}dropdown-color: #{$dropdown-color};
+  --#{$prefix}dropdown-bg: #{$dropdown-bg};
+  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
+  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
+  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
+  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
+  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
+  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
+  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
+  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
+  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
+  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
+  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
+  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
+  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
+  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
+  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
+  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
+  // scss-docs-end dropdown-css-vars
+
+  position: absolute;
+  z-index: var(--#{$prefix}dropdown-zindex);
+  display: none; // none by default, but block on "open" of the menu
+  min-width: var(--#{$prefix}dropdown-min-width);
+  padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
+  margin: 0; // Override default margin of ul
+  @include font-size(var(--#{$prefix}dropdown-font-size));
+  color: var(--#{$prefix}dropdown-color);
+  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  list-style: none;
+  background-color: var(--#{$prefix}dropdown-bg);
+  background-clip: padding-box;
+  border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
+  @include border-radius(var(--#{$prefix}dropdown-border-radius));
+  @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
+
+  &[data-bs-popper] {
+    top: 100%;
+    left: 0;
+    margin-top: var(--#{$prefix}dropdown-spacer);
+  }
+
+  @if $dropdown-padding-y == 0 {
+    > .dropdown-item:first-child,
+    > li:first-child .dropdown-item {
+      @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
+    }
+    > .dropdown-item:last-child,
+    > li:last-child .dropdown-item {
+      @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
+    }
+
+  }
+}
+
+// scss-docs-start responsive-breakpoints
+// We deliberately hardcode the `bs-` prefix because we check
+// this custom property in JS to determine Popper's positioning
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .dropdown-menu#{$infix}-start {
+      --bs-position: start;
+
+      &[data-bs-popper] {
+        right: auto;
+        left: 0;
+      }
+    }
+
+    .dropdown-menu#{$infix}-end {
+      --bs-position: end;
+
+      &[data-bs-popper] {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+}
+// scss-docs-end responsive-breakpoints
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
+.dropup {
+  .dropdown-menu[data-bs-popper] {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: var(--#{$prefix}dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(up);
+  }
+}
+
+.dropend {
+  .dropdown-menu[data-bs-popper] {
+    top: 0;
+    right: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-left: var(--#{$prefix}dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(end);
+    &::after {
+      vertical-align: 0;
+    }
+  }
+}
+
+.dropstart {
+  .dropdown-menu[data-bs-popper] {
+    top: 0;
+    right: 100%;
+    left: auto;
+    margin-top: 0;
+    margin-right: var(--#{$prefix}dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(start);
+    &::before {
+      vertical-align: 0;
+    }
+  }
+}
+
+
+// Dividers (basically an `<hr>`) within the dropdown
+.dropdown-divider {
+  height: 0;
+  margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
+  overflow: hidden;
+  border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
+  opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
+}
+
+// Links, buttons, and more within the dropdown menu
+//
+// `<button>`-specific styles are denoted with `// For <button>s`
+.dropdown-item {
+  display: block;
+  width: 100%; // For `<button>`s
+  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+  clear: both;
+  font-weight: $font-weight-normal;
+  color: var(--#{$prefix}dropdown-link-color);
+  text-align: inherit; // For `<button>`s
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: nowrap; // prevent links from randomly breaking onto new lines
+  background-color: transparent; // For `<button>`s
+  border: 0; // For `<button>`s
+  @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
+
+  &:hover,
+  &:focus {
+    color: var(--#{$prefix}dropdown-link-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
+    @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
+  }
+
+  &.active,
+  &:active {
+    color: var(--#{$prefix}dropdown-link-active-color);
+    text-decoration: none;
+    @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
+  }
+
+  &.disabled,
+  &:disabled {
+    color: var(--#{$prefix}dropdown-link-disabled-color);
+    pointer-events: none;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+  }
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+// Dropdown section headers
+.dropdown-header {
+  display: block;
+  padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
+  margin-bottom: 0; // for use with heading elements
+  @include font-size($font-size-sm);
+  color: var(--#{$prefix}dropdown-header-color);
+  white-space: nowrap; // as with > li > a
+}
+
+// Dropdown text
+.dropdown-item-text {
+  display: block;
+  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+  color: var(--#{$prefix}dropdown-link-color);
+}
+
+// Dark dropdowns
+.dropdown-menu-dark {
+  // scss-docs-start dropdown-dark-css-vars
+  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
+  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
+  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
+  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
+  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
+  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
+  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
+  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
+  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
+  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
+  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
+  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
+  // scss-docs-end dropdown-dark-css-vars
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_forms.scss

@@ -0,0 +1,9 @@
+@import "forms/labels";
+@import "forms/form-text";
+@import "forms/form-control";
+@import "forms/form-select";
+@import "forms/form-check";
+@import "forms/form-range";
+@import "forms/floating-labels";
+@import "forms/input-group";
+@import "forms/validation";

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_functions.scss

@@ -0,0 +1,302 @@
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
+      // Do nothing
+    } @else if not comparable($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+  @if length($map) > 0 {
+    $values: map-values($map);
+    $first-value: nth($values, 1);
+    @if $first-value != 0 {
+      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+    }
+  }
+}
+
+// Colors
+@function to-rgb($value) {
+  @return red($value), green($value), blue($value);
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+@function rgba-css-var($identifier, $target) {
+  @if $identifier == "body" and $target == "bg" {
+    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+  } @if $identifier == "body" and $target == "text" {
+    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+  } @else {
+    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+  }
+}
+
+@function map-loop($map, $func, $args...) {
+  $_map: ();
+
+  @each $key, $value in $map {
+    // allow to pass the $key and $value of the map as an function argument
+    $_args: ();
+    @each $arg in $args {
+      $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+    }
+
+    $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
+  }
+
+  @return $_map;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+@function varify($list) {
+  $result: null;
+  @each $entry in $list {
+    $result: append($result, var(--#{$prefix}#{$entry}), space);
+  }
+  @return $result;
+}
+
+// Internal Bootstrap function to turn maps into its negative variant.
+// It prefixes the keys with `n` and makes the value negative.
+@function negativify-map($map) {
+  $result: ();
+  @each $key, $value in $map {
+    @if $key != 0 {
+      $result: map-merge($result, ("n" + $key: (-$value)));
+    }
+  }
+  @return $result;
+}
+
+// Get multiple keys from a sass map
+@function map-get-multiple($map, $values) {
+  $result: ();
+  @each $key, $value in $map {
+    @if (index($values, $key) != null) {
+      $result: map-merge($result, ($key: $value));
+    }
+  }
+  @return $result;
+}
+
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+  $merged-maps: ();
+
+  @each $map in $maps {
+    $merged-maps: map-merge($merged-maps, $map);
+  }
+  @return $merged-maps;
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Kitty Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if str-index($string, "url(") == 1 {
+        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+
+// Color contrast
+// See https://github.com/twbs/bootstrap/pull/30168
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+
+@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
+  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+  $max-ratio: 0;
+  $max-ratio-color: null;
+
+  @each $color in $foregrounds {
+    $contrast-ratio: contrast-ratio($background, $color);
+    @if $contrast-ratio > $min-contrast-ratio {
+      @return $color;
+    } @else if $contrast-ratio > $max-ratio {
+      $max-ratio: $contrast-ratio;
+      $max-ratio-color: $color;
+    }
+  }
+
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+  @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground: $color-contrast-light) {
+  $l1: luminance($background);
+  $l2: luminance(opaque($background, $foreground));
+
+  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+}
+
+// Return WCAG2.1 relative luminance
+// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+@function luminance($color) {
+  $rgb: (
+    "r": red($color),
+    "g": green($color),
+    "b": blue($color)
+  );
+
+  @each $name, $value in $rgb {
+    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+    $rgb: map-merge($rgb, ($name: $value));
+  }
+
+  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}
+
+// scss-docs-start color-functions
+// Tint a color: mix a color with white
+@function tint-color($color, $weight) {
+  @return mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black
+@function shade-color($color, $weight) {
+  @return mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it
+@function shift-color($color, $weight) {
+  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+// scss-docs-end color-functions
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+  @if $value1 == null {
+    @return $value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+    @return $value1 + $value2;
+  }
+
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+  @if $value1 == null and $value2 == null {
+    @return null;
+  }
+
+  @if $value1 == null {
+    @return -$value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+    @return $value1 - $value2;
+  }
+
+  @if type-of($value2) != number {
+    $value2: unquote("(") + $value2 + unquote(")");
+  }
+
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * .1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: unit($dividend);
+  $divisor-unit: unit($divisor);
+  $unit-map: (
+    "px": 1px,
+    "rem": 1rem,
+    "em": 1em,
+    "%": 1%
+  );
+  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+    $result: $result * map-get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_grid.scss

@@ -0,0 +1,39 @@
+// Row
+//
+// Rows contain your columns.
+
+:root {
+  @each $name, $value in $grid-breakpoints {
+    --#{$prefix}breakpoint-#{$name}: #{$value};
+  }
+}
+
+@if $enable-grid-classes {
+  .row {
+    @include make-row();
+
+    > * {
+      @include make-col-ready();
+    }
+  }
+}
+
+@if $enable-cssgrid {
+  .grid {
+    display: grid;
+    grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
+    grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
+    gap: var(--#{$prefix}gap, #{$grid-gutter-width});
+
+    @include make-cssgrid();
+  }
+}
+
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@if $enable-grid-classes {
+  @include make-grid-columns();
+}

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_helpers.scss

@@ -0,0 +1,12 @@
+@import "helpers/clearfix";
+@import "helpers/color-bg";
+@import "helpers/colored-links";
+@import "helpers/focus-ring";
+@import "helpers/icon-link";
+@import "helpers/ratio";
+@import "helpers/position";
+@import "helpers/stacks";
+@import "helpers/visually-hidden";
+@import "helpers/stretched-link";
+@import "helpers/text-truncation";
+@import "helpers/vr";

BlazorPages/wwwroot/assets/scss/vendors/bootstrap/_images.scss

@@ -0,0 +1,42 @@
+// Responsive images (ensure images don't scale beyond their parents)
+//
+// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+// We previously tried the "images are responsive by default" approach in Bootstrap v2,
+// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+// which weren't expecting the images within themselves to be involuntarily resized.
+// See also https://github.com/twbs/bootstrap/issues/18178
+.img-fluid {
+  @include img-fluid();
+}
+
+
+// Image thumbnails
+.img-thumbnail {
+  padding: $thumbnail-padding;
+  background-color: $thumbnail-bg;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
+  @include border-radius($thumbnail-border-radius);
+  @include box-shadow($thumbnail-box-shadow);
+
+  // Keep them at most 100% wide
+  @include img-fluid();
+}
+
+//
+// Figures
+//
+
+.figure {
+  // Ensures the caption's text aligns with the image.
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: $spacer * .5;
+  line-height: 1;
+}
+
+.figure-caption {
+  @include font-size($figure-caption-font-size);
+  color: $figure-caption-color;
+}