diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor b/ShoppingAssistantWebClient.Web/Pages/Index.razor index e95f25b..a669e6d 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Index.razor +++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor @@ -1,9 +1,64 @@ @page "/" -CartaId +New Chat -

Hello, world!

+
-Welcome to your new app. +
+ + + + + +
- + +
+
+
New chat
+
What you're looking for
+ +
+
+ Product +
+
+ Gift +
+
+ + +
What you're looking for, we will help you solve your problem and find it
+ + + +
+
+ + Send message +
+ +
+ +
+ + diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css new file mode 100644 index 0000000..680a755 --- /dev/null +++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css @@ -0,0 +1,190 @@ +.right_frame { + position: relative; + border: 0.09em solid; + border-color: #0052CC; + border-radius: 0.6em; + height: 100%; + width: 100%; +} + +.button_open_menu { + z-index: 2; + width: 1.43em; + height: 1.23em; + position: absolute; + top: 1.56em; + left: 1.56em; + cursor: pointer; + visibility: hidden; +} + +.button_open_menu span { + width: 20px; + height: 1.5px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #4E4E4E; +} + +.button_open_menu span:nth-of-type(2) { + top: calc(50% - 5px); +} + +.button_open_menu span:nth-of-type(3) { + top: calc(50% + 5px); +} + +.title_one_frame { + padding-top: 1.25em; + color: #0052CC; + font-size: 1.0625em; + text-align: center; +} + +.title_two_frame { + padding-top: 3.75em; + padding-bottom: 2.5em; + color: black; + font-size: 2.5em; + text-align: center; + font-weight: 600; +} + +.title_three_frame { + padding-top: 3.75em; + padding-bottom: 2.5em; + color: #202124; + font-size: 1.25em; + text-align: center; + font-weight: 400; +} + +.topic { + font-size: 1.125em; + text-align: center; + line-height: 2.1875em; + color: #009FFF; + width: 15.625em; + margin: 0 auto; +} + +.topic div { + margin-top: 1.25em; + border:0.09em solid; + border-color: #009FFF; + border-radius: 0.6em; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.topic div a { + color: #009FFF; + text-decoration: none; +} + +.switch { + height: 2.8125em; + width: 21.875em; + margin: 0 auto; + border: 0.09em solid; + border-color: #EAEAEA; + border-radius: 0.6em; + text-align: center; + position: relative; +} + +.switch_product { + position: absolute; + background-color: #0052CC; + border-radius: 0.6em; + margin: 0.3125em; + width: calc(50% - 0.625em); + height: calc(100% - 0.625em); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: 0.8s; + color: white; +} + +.switch_gift { + right: 0; + position: absolute; + border-radius: 0.6em; + margin: 0.3125em; + width: calc(50% - 0.625em); + height: calc(100% - 0.625em); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: 0.8s; + color: #202124; +} + +.chat_message { + position: relative; + overflow-y: auto; + height: calc(100% - 5.5em); + width: 100%; +} + +.chat_input { + background-color: #EAEAEA; + position: absolute; + display: flex; + align-items: center; + bottom: 2em; + margin-left: 25%; + width: 50%; + border-radius: 0.6em; +} + +.input_messages { + width: 100%; + height: 2.5em; + font-size: 1.0625em; + background-color: #EAEAEA; + color: #4E4E4E; + border-radius: 0.6em; + border: none; + padding: 0.625em 1.25em; + outline: none; +} + +.button_sende { + float: right; + cursor: pointer; + line-height: 2.5em; + margin-right: 0.8em; + width: 1.8em; + height: 1.7em; + + +} + + +.new_chat { + padding-top: 0.5em; + position: relative; + height: 100%; + width: 100%; +} + + +.chat_message::-webkit-scrollbar { + border-radius: 20px; + width: 0.2em; +} + +.chat_message::-webkit-scrollbar-thumb { + background-color: #0052CC; + /* Колір позиції покажчика */ + border-radius: 10px; + /* Закруглення країв позиції покажчика */ + width: 0.2em; +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor index 0a22716..bba097d 100644 --- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor +++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor @@ -4,12 +4,9 @@
+
+ @Body
-
diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css index 950f666..0f1cc15 100644 --- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css +++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css @@ -1,73 +1,24 @@ - .page { + position: relative; width: 100%; height: 100vh; - border: 1.5% solid; - border-color: #edf106; padding: 1.25em; } + .sidebar-menu { - position: relative; + position: absolute; width: 20em; - height: 100%; + top: 1.25em; + bottom: 1.25em; + margin-right: 1.5em; transition: 1s; - border: 1.5% solid; - border-color: #f10606; } -.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 .btn-link { - white-space: nowrap; - margin-left: 1.5rem; - } - - .top-row 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 a, .top-row .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, article { - padding-left: 2rem !important; - padding-right: 1.5rem !important; - } -} +.right-frame { + position: absolute; + right: 1.25em; + left: 23.25em; + top: 1.25em; + bottom: 1.25em; + transition: 1s; +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor index 3b82f08..07a7b32 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor @@ -19,18 +19,19 @@
Search - + + +
- @foreach(var item in wishlist){ -
-
@item.Name
- Delete wishlist - Card open -
+ @foreach (var item in wishlist) + { +
+
@item.Name
+ Delete wishlist + Card open +
}
@@ -54,38 +55,49 @@ @code { - -private List wishlist; - protected override async Task OnInitializedAsync() - { + private List wishlist; - wishlist = new List + protected override async Task OnInitializedAsync() + { + + wishlist = new List { - new Models.Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"}, - new Models.Wishlist {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"}, - new Models.Wishlist {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"}, - new Models.Wishlist {Id = "3", Name = "Garden tools", Type="product", CreateById="2"}, - new Models.Wishlist {Id = "4", Name = "Phone charger ", Type="product", CreateById="2"}, - new Models.Wishlist {Id = "5", Name = "Garden tools", Type="product", CreateById="2"} + new Models.Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"}, + new Models.Wishlist {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"}, + new Models.Wishlist {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"}, + new Models.Wishlist {Id = "3", Name = "Garden tools", Type="product", CreateById="2"}, + new Models.Wishlist {Id = "4", Name = "Phone charger ", Type="product", CreateById="2"}, + new Models.Wishlist {Id = "5", Name = "Garden tools", Type="product", CreateById="2"} }; - } + } } diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css index 7d7ef76..89c9752 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css @@ -4,7 +4,6 @@ height: 100%; width: 100%; transition: 1s; - transform: translateX(0%); } .logo { height: 5em; @@ -39,7 +38,7 @@ align-items: center; border-radius: 0 0 0.6em 0.6em; background-color: rgb(255, 255, 255); - height: 4em; + height: 3.6em; left: 0; bottom: 0; width: 100%; @@ -109,10 +108,16 @@ width: 1.3em; } .elements_wishlisht::-webkit-scrollbar { - background-color: #009FFF; border-radius: 20px; width: 0.2em; } + +.elements_wishlisht::-webkit-scrollbar-thumb { + background-color: #0052CC; /* Колір позиції покажчика */ + border-radius: 10px; /* Закруглення країв позиції покажчика */ + width: 0.2em; +} + .add_chat { margin-bottom: 0.3125em; background-color: #0165FF; diff --git a/ShoppingAssistantWebClient.Web/Shared/SurveyPrompt.razor b/ShoppingAssistantWebClient.Web/Shared/SurveyPrompt.razor deleted file mode 100644 index b31a4a6..0000000 --- a/ShoppingAssistantWebClient.Web/Shared/SurveyPrompt.razor +++ /dev/null @@ -1,16 +0,0 @@ -
- - @Title - - - Please take our - brief survey - - and tell us what you think. -
- -@code { - // Demonstrates how a parent component can supply parameters - [Parameter] - public string? Title { get; set; } -} diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/send.png b/ShoppingAssistantWebClient.Web/wwwroot/images/send.png deleted file mode 100644 index 2793f03..0000000 Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/send.png and /dev/null differ diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/send.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/send.svg new file mode 100644 index 0000000..34fabba --- /dev/null +++ b/ShoppingAssistantWebClient.Web/wwwroot/images/send.svg @@ -0,0 +1,3 @@ + + +