SA-109 Added a new chat frame, added animation to the left and right frames

ShoppingAssistantWebClient.Web/Pages/Index.razor

@@ -1,9 +1,64 @@
 @page "/"
 
-<PageTitle>CartaId</PageTitle>
+<PageTitle>New Chat</PageTitle>
 
-<h1>Hello, world!</h1>
+    <div class="right_frame" id="rightFrame">
 
-Welcome to your new app.
+            <div id="button_open" class="open_menu">
+                <a class="button_open_menu" >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </a>
+            </div>
 
-<SurveyPrompt Title="How is Blazor working for you?" />
+       
+            <div class="new_chat">              
+                <div class="chat_message">  
+                    <div class="title_one_frame">New chat</div>
+                    <div class="title_two_frame">What you're looking for</div>
+
+                    <div class="switch">
+                        <div class="switch_product" id="choose_product" >
+                                Product
+                        </div>
+                        <div class="switch_gift" id="choose_gift">
+                                Gift 
+                        </div>                    
+                    </div>
+
+
+                    <div class="title_three_frame">What you're looking for, we will help you solve your problem and find it</div>
+
+                    <div class="topic" >
+                        <div class="topic_one">
+                            <a class="button_topic_one" >
+                                Date
+                            </a>
+                        </div>
+
+                        <div class="topic_two">
+                            <a class="button_topic_two" >
+                                🎃 Halloween  gift
+                            </a>                        
+                        </div>
+                        <div class="topic_three">
+                            <a class="button_topic_three" >
+                                🎁 Birthday gift
+                            </a>                          
+                        </div>
+                    </div>
+
+                </div>  
+                    <div class="chat_input">
+                        <input class="input_messages" type="text" id="chatInput" placeholder="Describe what you are looking for....">
+                        <img class="button_sende" src="/images/send.svg" alt="Send message"> 
+                    </div>
+                
+            </div>
+
+    </div>
+
+<script>
+    document.getElementById('button_open').addEventListener('click', changetyle);
+</script>

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;
+}

ShoppingAssistantWebClient.Web/Shared/MainLayout.razor

@@ -4,12 +4,9 @@
 
 <div class="page">
     <div class="sidebar-menu">
-        <NavMenu />
+        <NavMenu/>
+    </div>
+    <div class="right-frame">
+        @Body
     </div>
-<!--
-    <main>
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>-->
 </div>

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 {
+.right-frame {
-    background-color: #f7f7f7;
+    position: absolute;
-    border-bottom: 1px solid #d6d5d5;
+    right: 1.25em;
-    justify-content: flex-end;
+    left: 23.25em; 
-    height: 3.5rem;
+    top: 1.25em;
-    display: flex;
+    bottom: 1.25em;
-    align-items: center;
+    transition: 1s;
-}
+}
-
-    .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;
-    }
-}

ShoppingAssistantWebClient.Web/Shared/NavMenu.razor

@@ -19,18 +19,19 @@
             <div class="add_chat">
                 <a href="/">
                     <span>Search</span>
-                    <span class="plus" >+</span>
+                    <span class="plus">+</span>
                 </a>
             </div>
 
             <div class="wishlist_names">
 
-                @foreach(var item in wishlist){
+                @foreach (var item in wishlist)
-                <section class="cont_wishlist">
+                {
-                    <div id="wishlist_id_@item.Id" class="wishlist_name">@item.Name</div>
+                    <section class="cont_wishlist">
-                    <img class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
+                        <div id="wishlist_id_@item.Id" class="wishlist_name">@item.Name</div>
-                    <img class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
+                        <img class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
-                </section>
+                        <img class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
+                    </section>
                 }
             </div>
 
@@ -54,38 +55,49 @@
 
 <script>
 
-        function changetyle() {
+    function changetyle() {
-            var element = document.getElementById('leftframe');
+        var left_frame = document.querySelector('.sidebar-menu');
-            var computedStyles = getComputedStyle(element);
+        var right_frame = document.querySelector('.right-frame');
-            var transformValue = computedStyles.transform;
+        var computedStyles = getComputedStyle(left_frame);
+        var transformValue = computedStyles.transform;
+        var button_open = document.querySelector('.button_open_menu');
 
-            if (transformValue === 'matrix(1, 0, 0, 1, 0, 0)') {
+        if (transformValue === 'matrix(1, 0, 0, 1, 0, 0)') {
-                element.style.transform = 'translateX(-110%)';
+            left_frame.style.transform = 'translateX(-110%)';
-            } else {
+            button_open.style.visibility = 'visible';
-                element.style.transform = 'translateX(0%)';
+            right_frame.style.left = '1.25em';
-            }
+
+        } else {
+            left_frame.style.transform = 'translateX(0)';
+            button_open.style.visibility = 'hidden';
+            right_frame.style.left = '23.25em';
         }
+    }
+
+
+
 
     document.getElementById('button_close').addEventListener('click', changetyle);
+
 </script>
 
 @code {
-   
-private List<Models.Wishlist> wishlist;
 
-        protected override async Task OnInitializedAsync()
+    private List<Models.Wishlist> wishlist;
-        {
 
-            wishlist =  new List<Models.Wishlist>
+    protected override async Task OnInitializedAsync()
+    {
+
+        wishlist = new List<Models.Wishlist>
             {
-                new Models.Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"},
+            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 = "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 = "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 = "3", Name = "Garden tools", Type="product", CreateById="2"},
-                new Models.Wishlist  {Id = "4", Name = "Phone charger ", 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 = "5", Name = "Garden tools", Type="product", CreateById="2"}
             };
 
-        }
+    }
 
 }

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;

ShoppingAssistantWebClient.Web/Shared/SurveyPrompt.razor

@@ -1,16 +0,0 @@
-<div class="alert alert-secondary mt-4">
-    <span class="oi oi-pencil me-2" aria-hidden="true"></span>
-    <strong>@Title</strong>
-
-    <span class="text-nowrap">
-        Please take our
-        <a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2186158">brief survey</a>
-    </span>
-    and tell us what you think.
-</div>
-
-@code {
-    // Demonstrates how a parent component can supply parameters
-    [Parameter]
-    public string? Title { get; set; }
-}

ShoppingAssistantWebClient.Web/wwwroot/images/send.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11.0192V0L14 5.50962L0 11.0192ZM1.47368 8.95313L10.2053 5.50962L1.47368 2.06611V4.47656L5.89474 5.50962L1.47368 6.54267V8.95313Z" fill="#4E4E4E" fill-opacity="0.4"/>
+</svg>