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
+
+
+
+
+
+
+
+
+
+
+
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 @@
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 @@
- @foreach(var item in wishlist){
-
- @item.Name
-
-
-
+ @foreach (var item in wishlist)
+ {
+
+ @item.Name
+
+
+
}
@@ -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 @@
+