bootstrap&blazorstrap

HyperCube.csproj

@@ -7,6 +7,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="BlazorStrap" Version="1.5.1" />
     <PackageReference Include="MailKit" Version="2.15.0" />
     <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="5.0.11" />
     <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="5.0.11" />
@@ -18,7 +19,7 @@
     <PackageReference Include="MySql.EntityFrameworkCore" Version="5.0.8" />
     <PackageReference Include="MySql.Data" Version="8.0.27" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
-    <PackageReference Include="QRCoder" Version="1.4.1" />
+    <PackageReference Include="QRCoder" Version="1.4.2" />
   </ItemGroup>
 
   <ItemGroup>

Pages/Index.razor

@@ -3,11 +3,37 @@
 
 @inject NavigationManager NavigationManager
 
+@*@inject Microsoft.JSInterop.IJSRuntime jsRuntime*@
+
 @*@using Microsoft.AspNetCore.Identity;
-@inject AuthenticationStateProvider AuthenticationStateProvider
-@inject UserManager<IdentityUser> UserManager*@
+    @inject AuthenticationStateProvider AuthenticationStateProvider
+    @inject UserManager<IdentityUser> UserManager*@
+
 
 @code{
+    IList<Item> items = new List<Item> {
+    new Item {
+        Source = "/img/test1.png",
+        Alt ="First Slide",
+        Caption = "Slide 1",
+        Header = "Slide 1 Header"
+    },
+    new Item {
+        Source = "/img/test2.png",
+        Alt ="Second Slide",
+        Caption = "Slide 2",
+        Header = "Slide 2 Header"
+    }
+};
+
+    class Item
+    {
+        public string Source { get; set; }
+        public string Alt { get; set; }
+        public string Caption { get; set; }
+        public string Header { get; set; }
+    }
+    
     void Login()
     {
         NavigationManager.NavigateTo("Identity/Account/Login", true);
@@ -23,11 +49,11 @@
                 </div>
                 <div class="menu__href">
                     @*<a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('marketplace').scrollIntoView({behavior:'smooth'})">MarketPlace знаний</a>
-                    <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('blog').scrollIntoView({behavior:'smooth'})">Блог</a>
-                    <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('community').scrollIntoView({behavior:'smooth'})">Экспертное сообщество</a>
-                    <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('quantinium').scrollIntoView({behavior:'smooth'})">Quantinium</a>
-                    <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('contacts').scrollIntoView({behavior:'smooth'})">Контакты</a>
-                    <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('sign-in').scrollIntoView({behavior:'smooth'})">Авторизоваться</a>*@
+                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('blog').scrollIntoView({behavior:'smooth'})">Блог</a>
+                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('community').scrollIntoView({behavior:'smooth'})">Экспертное сообщество</a>
+                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('quantinium').scrollIntoView({behavior:'smooth'})">Quantinium</a>
+                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('contacts').scrollIntoView({behavior:'smooth'})">Контакты</a>
+                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('sign-in').scrollIntoView({behavior:'smooth'})">Авторизоваться</a>*@
 
                     <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('marketplace')">MarketPlace знаний</a>
                     <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('blog')">Блог</a>
@@ -38,7 +64,7 @@
                         <Authorized>
                             <a class="menu__href__item link" href="desktop">Личный кабинет</a>
                         </Authorized>
-                        <NotAuthorized>            
+                        <NotAuthorized>
                             @*<a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('sign-in')">Контакты</a>*@
                             <a class="menu__href__item link" style="cursor:pointer" @onclick="Login">Авторизоваться</a>
                         </NotAuthorized>
@@ -50,30 +76,21 @@
 </nav>
 
 <header class="main-slider">
-    <div class="main-slider__item">
-        <img src="img/test1.png" alt="">
-    </div>
-    @*<div class="main-slider__item">
-        <img src="img/plug.jpg" alt="">
-    </div>
-    <div class="main-slider__item">
-            <img src="img/plug2.png" alt="">
-    </div>
-    <div class="main-slider__item">
-        <img src="img/plug.jpg" alt="">
-    </div>
-    <div class="main-slider__item">
-        <img src="img/plug2.png" alt="">
-    </div>
-    <div class="main-slider__item">
-        <img src="img/plug.jpg" alt="">
-    </div>
-    <div class="main-slider__item">
-        <img src="img/plug2.png" alt="">
-    </div>*@
+    <BSCarousel NumberOfItems="@items.Count" Interval="1">
+        <div class="carousel-inner">
+            @for (int i = 0; i < items.Count; i++)
+            {
+                <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt" />
+            }
+        </div>
+        <BSCarouselIndicators NumberOfItems="@items.Count" />
+
+        @*<BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count"/>
+        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count"/>*@
+    </BSCarousel>
 </header>
 
-<section class="market-place" id="marketplace">    
+<section class="market-place" id="marketplace">
     <div class="wrapmain">
         <h1 class="block__header">Блокчейн Market Place знаний</h1>
         <p class="block__info">
@@ -101,7 +118,7 @@
                 <li style="margin-left:40px">
                     Старатель - основной (ключевой) участник системы, создающий ценности и их первичную разметку неструктурированных данных;
                 </li>
-            </ul>            
+            </ul>
         </p>
         <p class="block__info">
             Пользователь может иметь одну или несколько ролей в системе.
@@ -182,7 +199,7 @@
             блока и его связей.
         </p>
         <p class="block__info">
-            Открытая часть NFT нарратива может представляться в открытых информационных системах, с целью продвижения, анонсирования 
+            Открытая часть NFT нарратива может представляться в открытых информационных системах, с целью продвижения, анонсирования
             и привлечения внимания. Вся остальная часть NFT предоставляется только на возмездной основе через Блокчейн MarketPlace знаний.
         </p>
         <img class="block__img" src="img/test2.png">
@@ -200,7 +217,7 @@
 
 <div class="bg__img" data-image='libary' id="blog"></div>
 
-<section class="blog">    
+<section class="blog">
     <div class="wrapmain">
         <h1 class="block__header">Блог</h1>
         <p class="block__info">
@@ -318,20 +335,20 @@
         <img src="img/test1.png" alt="">
     </div>
     @*<div class="main-slider__item main-slider__item_quant">
-        <img src="img/plug2.png" alt="">
-    </div>
-    <div class="main-slider__item main-slider__item_quant">
-        <img src="img/plug.jpg" alt="">
-    </div>
-    <div class="main-slider__item main-slider__item_quant">
-        <img src="img/plug2.png" alt="">
-    </div>
-    <div class="main-slider__item main-slider__item_quant">
-        <img src="img/plug.jpg" alt="">
-    </div>
-    <div class="main-slider__item main-slider__item_quant">
-        <img src="img/plug2.png" alt="">
-    </div>*@
+            <img src="img/plug2.png" alt="">
+        </div>
+        <div class="main-slider__item main-slider__item_quant">
+            <img src="img/plug.jpg" alt="">
+        </div>
+        <div class="main-slider__item main-slider__item_quant">
+            <img src="img/plug2.png" alt="">
+        </div>
+        <div class="main-slider__item main-slider__item_quant">
+            <img src="img/plug.jpg" alt="">
+        </div>
+        <div class="main-slider__item main-slider__item_quant">
+            <img src="img/plug2.png" alt="">
+        </div>*@
 </div>
 
 <section class="quantinium">
@@ -397,10 +414,7 @@
                         <button class="capcha__button">Капча</button>
                         <input class="capcha__input" placeholder="Код капчи">
                     </div>
-                    <input name="file" type="file" class="form__file__input" id="form__file">
-                    <label for="form__file" class="form__file__label">
-                        <p class="form__file__label__text">Прикрепить файл-архив с документами для верификации</p>
-                    </label>
+                    <input name="file" type="file" class="form__file__input" id="form__file">                    
                     <p class="form__text">
                         Этого достаточно, что бы система зарегистровала ваш Личный аккаунт.
                         Вам придет письмо на вашу почту. Советуем прочитать данное письмо.
@@ -720,9 +734,9 @@
         line-height: 1.4;
     }
 
-        .block__info a {
-            color: inherit;
-        }
+    .block__info a {
+        color: inherit;
+    }
 
     .block__info_tc {
         text-align: center;

Pages/Test.razor

@@ -0,0 +1,39 @@
+@page "/test"
+
+@code{
+    IList<Item> items = new List<Item> {
+    new Item {
+        Source = "/img/test1.png",
+        Alt ="First Slide",
+        Caption = "Slide 1",
+        Header = "Slide 1 Header"
+    },
+    new Item {
+        Source = "/img/test2.png",
+        Alt ="Second Slide",
+        Caption = "Slide 2",
+        Header = "Slide 2 Header"
+    }
+};
+
+    class Item
+    {
+        public string Source { get; set; }
+        public string Alt { get; set; }
+        public string Caption { get; set; }
+        public string Header { get; set; }
+    }
+}
+
+<BSCarousel NumberOfItems="@items.Count" Interval="1">
+    <div class="carousel-inner">
+        @for (int i = 0; i < items.Count; i++)
+        {
+            <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt" />
+        }
+    </div>
+    <BSCarouselIndicators NumberOfItems="@items.Count" />
+
+    @*<BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count"/>
+        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count"/>*@
+</BSCarousel>

Pages/_Host.cshtml

@@ -16,14 +16,15 @@
     <base href="~/" />
     <link rel="stylesheet" type="text/css" href="node_modules/normalize.css/normalize.css">
     <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css">
 </head>
 <body>
     <component type="typeof(App)" render-mode="Server" />
 
     <script src="_framework/blazor.server.js"></script>
-    <script src="~/js/getfile.js"></script>
+    <script src="_content/BlazorStrap/blazorStrap.js"></script>
     <script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
-    <script src="~/js/slick.min.js" type="text/javascript"></script>
     <script src="~/js/main.js" type="text/javascript"></script>
+    <script src="~/js/getfile.js"></script>
 </body>
 </html>

Startup.cs

@@ -1,3 +1,4 @@
+using BlazorStrap;
 using HyperCube.Areas.Identity;
 using HyperCube.Data;
 using Microsoft.AspNetCore.Builder;
@@ -56,6 +57,7 @@ namespace HyperCube
             services.AddDatabaseDeveloperPageExceptionFilter();
             services.AddMvc(options => options.EnableEndpointRouting = false).SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Version_3_0);
             services.AddScoped<AppData>();
+            services.AddBootstrapCss();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

_Imports.razor

@@ -8,4 +8,5 @@
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.JSInterop
 @using HyperCube
-@using HyperCube.Shared
+@using HyperCube.Shared
+@using BlazorStrap