Merge remote-tracking branch 'origin/feature/SA-34-product-search' into develop

ShoppingAssistantWebClient.Web/Pages/Chat.cshtml

@@ -0,0 +1,227 @@
+@page "/chat/1"
+@model ChatModel
+@{
+    ViewData["Title"] = "Gift for Jessica";
+}
+
+
+<div class="container-fluid">
+
+    <div class="left_frame" id="leftFrame">
+
+        
+        <div class="logo">
+            <img src="/images/logo.png" alt="Logo site">
+            <span class="logo_name">CARTAID</span>
+        </div>
+
+        <div class="menu">
+
+            <div class="elements_wishlisht">
+
+            <div class="close_menu">
+                <span >Wishlists</span>
+                <a class="button_close_menu" >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </a>
+            </div>
+
+            <div class="add_chat">
+                <a href="/">
+                    <span >Add chat +</span>
+                </a>  
+            </div>
+
+            <div class="wishlist_names">
+                <section>
+                    <span id ="wishlist_id_1" class="wishlist_name">Gift for Jessica</span>
+                </section>
+
+                <section>
+                    <span id ="wishlist_id_2" class="wishlist_name">Secret Santa</span>
+                </section>
+
+                <section>
+                    <span  id ="wishlist_id_3" class="wishlist_name">Phone charger</span>
+                </section>
+
+                <section>
+                    <span class="wishlist_name">Phone</span>
+                </section>
+
+                <section>
+                    <span class="wishlist_name">Printer</span>
+                <section>
+
+                    <span class="wishlist_name">Books</span>
+                </section>
+            </div>
+
+        </div>
+        <div class="line"></div>  
+            <div class="elements">
+                <div class="info_user">
+                    <img src="/images/avatar.jpg" alt="Avatar user">
+                    <span class="user_name">Username</span>
+                </div>
+
+            </div>
+
+            
+        </div>
+
+
+    </div>
+
+    <div class="right_frame" id="rightFrame">
+
+            <div class="open_menu">
+                <a class="button_open_menu" >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </a>
+            </div>
+
+
+            <div class="chat_frame">              
+
+            <div class="new_chat">              
+
+                <div class="title_one_frame">Gift for Jessica</div>
+              
+                <ul class="chat_box">
+
+                    <li class="chat_outgoing">
+                        <p>Give me product recommendation. Ask me questions if you need more directions. I am looking for: hub for my macbook to connect external monitors</p>
+                    </li>
+                    <li class=" chat_incoming">
+                        <p>Sure! I can help you with that. I will ask you some leading questions. This is the first:
+                        <br>
+                        How many external monitors do you want to connect to your MacBook?</p>
+                    </li>
+                    <li class="chat_outgoing">
+                        <p>7</p>
+                    </li>  
+                    <li class=" chat_incoming">
+                        <p>Thank you. Here is the next question:
+                        <br>
+                        What type of external monitors do you have? (e.g., HDMI, DisplayPort, VGA)</p>
+                    </li>
+
+                </ul>
+
+
+
+
+                <div class="chat_input">
+
+                    <input type="text" id="chatInput" placeholder="Describe what you are looking for....">
+
+                    <a class="button_sende">
+                        <img  src="/images/send.png" alt="Send message">
+                    </a>      
+
+
+                </div>
+
+
+            </div>
+
+    </div>
+</div>
+
+
+<script>
+const leftFrame = document.getElementById("leftFrame");
+const rightFrame = document.getElementById("rightFrame");
+const openMenuButton = document.querySelector(".button_open_menu");
+const closeMenuButton = document.querySelector(".button_close_menu");
+
+
+
+const choose_gift = document.getElementById("choose_gift");
+const choose_product = document.getElementById("choose_product");
+const switchGift = document.querySelector(".switch_gift");
+const switchProduct = document.querySelector(".switch_product");
+
+
+const isLeftFrameOpen = localStorage.getItem('leftFrameOpen');
+
+if (isLeftFrameOpen) {
+     requestAnimationFrame(() => {
+        leftFrame.style.transform = "translateX(0%)";
+        rightFrame.style.transform = "translateX(calc(30% - 40px))";
+        rightFrame.style.width = "calc(80% - 60px)";
+    });
+    openMenuButton.style.visibility = "hidden";
+    closeMenuButton.style.visibility = "visible";
+} else {
+      requestAnimationFrame(() => {
+        leftFrame.style.transform = "translateX(-100%)";
+                rightFrame.style.transform = "translateX(0%)";
+        rightFrame.style.width = "calc(100% - 40px)";
+    });
+    closeMenuButton.style.visibility = "hidden";
+    openMenuButton.style.visibility = "visible";
+}
+
+
+openMenuButton.addEventListener("click", function () {
+    requestAnimationFrame(() => {
+        leftFrame.style.transform = "translateX(0%)";
+        rightFrame.style.transform = "translateX(calc(30% - 40px))";
+        rightFrame.style.width = "calc(80% - 60px)";
+    });
+    openMenuButton.style.visibility = "hidden";
+    closeMenuButton.style.visibility = "visible";
+});
+
+closeMenuButton.addEventListener("click", function () {
+    requestAnimationFrame(() => {
+        leftFrame.style.transform = "translateX(-100%)";
+                rightFrame.style.transform = "translateX(0%)";
+        rightFrame.style.width = "calc(100% - 40px)";
+    });
+    closeMenuButton.style.visibility = "hidden";
+    openMenuButton.style.visibility = "visible";
+});
+
+switchGift.addEventListener("click", function () {
+    requestAnimationFrame(() => {
+        choose_gift.style.backgroundColor = "#0052CC";
+        choose_product.style.backgroundColor = "transparent";
+        switchGift.style.color = "white";
+        switchProduct.style.color = "#202124";
+
+    });
+
+});
+
+switchProduct.addEventListener("click", function () {
+    requestAnimationFrame(() => {
+        choose_product.style.backgroundColor = "#0052CC";
+        choose_gift.style.backgroundColor = "transparent";
+        switchProduct.style.color = "white";
+        switchGift.style.color = "#202124";       
+
+    });
+
+});
+
+
+
+
+const new_chat = document.querySelector(".button_add_chat");
+new_chat.addEventListener("click", function () {
+   alert(3)
+});
+
+
+
+
+
+
+</script>

ShoppingAssistantWebClient.Web/Pages/Chat.cshtml.cs

@@ -0,0 +1,21 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using ShoppingAssistantWebClient.Web.Network;
+
+namespace ShoppingAssistantWebClient.Web.Pages;
+public class ChatModel : PageModel
+{
+    private readonly ILogger<ChatModel> _logger;
+
+    private readonly AuthenticationService _authenticationService;
+
+    public ChatModel(ILogger<ChatModel> logger, AuthenticationService authenticationService)
+    {
+        _authenticationService = authenticationService;
+        _logger = logger;
+    }
+
+    public void OnGet()
+    {
+    }
+}

ShoppingAssistantWebClient.Web/Pages/Index.cshtml

@@ -1,10 +1,234 @@
-@page
+@page 
 @model IndexModel
 @{
-    ViewData["Title"] = "Home page";
+    ViewData["Title"] = "CARTAID";
 }
 
-<div class="text-center">
-    <h1 class="display-4">Welcome</h1>
-    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
+<div class="container-fluid">
+
+    <div class="left_frame" id="leftFrame">
+
+        
+        <div class="logo">
+            <img src="/images/logo.png" alt="Logo site">
+            <span class="logo_name">CARTAID</span>
+        </div>
+
+        <div class="menu">
+
+            <div class="elements_wishlisht">
+
+            <div class="close_menu">
+                <span >Wishlists</span>
+                <a class="button_close_menu" >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </a>
+            </div>
+
+            <div class="add_chat">
+                <a href="/">
+                    <span >Add chat +</span>
+                </a>  
+            </div>
+
+            <div class="wishlist_names">
+                <section method="get" asp-page="ChatOne" >
+                    <span id ="wishlist_id_1" class="wishlist_name">Gift for Jessica</span>
+                </section>
+
+                <section>
+                    <span id ="wishlist_id_2" class="wishlist_name">Secret Santa</span>
+                </section>
+
+                <section>
+                    <span  id ="wishlist_id_3" class="wishlist_name">Phone charger</span>
+                </section>
+
+                <section>
+                    <span class="wishlist_name">Phone</span>
+                </section>
+
+                <section>
+                    <span class="wishlist_name">Printer</span>
+                <section>
+
+                    <span class="wishlist_name">Books</span>
+                </section>
+            </div>
+
+        </div>
+        <div class="line"></div>  
+            <div class="elements">
+                <div class="info_user">
+                    <img src="/images/avatar.jpg" alt="Avatar user">
+                    <span class="user_name">Username</span>
+                </div>
+
+            </div>
+
+            
+        </div>
+
+
+    </div>
+
+    <div class="right_frame" id="rightFrame">
+
+            <div class="open_menu">
+                <a class="button_open_menu" >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </a>
+            </div>
+
+
+            <div class="chat_frame">              
+
+            <div class="new_chat">              
+
+                <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 type="text" id="chatInput" placeholder="Describe what you are looking for....">
+
+                <a class="button_sende">
+                       <img  src="/images/send.png" alt="Send message">
+                </a>      
+
+
+            </div>
+
+
+
+
+            </div>
+
+    </div>
 </div>
+
+
+<script>
+const leftFrame = document.getElementById("leftFrame");
+const rightFrame = document.getElementById("rightFrame");
+const openMenuButton = document.querySelector(".button_open_menu");
+const closeMenuButton = document.querySelector(".button_close_menu");
+
+
+
+const choose_gift = document.getElementById("choose_gift");
+const choose_product = document.getElementById("choose_product");
+const switchGift = document.querySelector(".switch_gift");
+const switchProduct = document.querySelector(".switch_product");
+
+const isLeftFrameOpen = localStorage.getItem('leftFrameOpen');
+
+if (isLeftFrameOpen) {
+     requestAnimationFrame(() => {
+        leftFrame.style.transform = "translateX(0%)";
+        rightFrame.style.transform = "translateX(calc(30% - 40px))";
+        rightFrame.style.width = "calc(80% - 60px)";
+    });
+    openMenuButton.style.visibility = "hidden";
+    closeMenuButton.style.visibility = "visible";
+} else {
+      requestAnimationFrame(() => {
+        leftFrame.style.transform = "translateX(-100%)";
+                rightFrame.style.transform = "translateX(0%)";
+        rightFrame.style.width = "calc(100% - 40px)";
+    });
+    closeMenuButton.style.visibility = "hidden";
+    openMenuButton.style.visibility = "visible";
+}
+
+
+openMenuButton.addEventListener("click", function () {
+    requestAnimationFrame(() => {
+        leftFrame.style.transform = "translateX(0%)";
+        rightFrame.style.transform = "translateX(calc(30% - 40px))";
+        rightFrame.style.width = "calc(80% - 60px)";
+    });
+    openMenuButton.style.visibility = "hidden";
+    closeMenuButton.style.visibility = "visible";
+     localStorage.setItem('leftFrameOpen', 'true');
+});
+
+closeMenuButton.addEventListener("click", function () {
+    requestAnimationFrame(() => {
+        leftFrame.style.transform = "translateX(-100%)";
+                rightFrame.style.transform = "translateX(0%)";
+        rightFrame.style.width = "calc(100% - 40px)";
+    });
+    closeMenuButton.style.visibility = "hidden";
+    openMenuButton.style.visibility = "visible";
+     localStorage.setItem('leftFrameOpen', 'false');
+});
+
+switchGift.addEventListener("click", function () {
+    requestAnimationFrame(() => {
+        choose_gift.style.backgroundColor = "#0052CC";
+        choose_product.style.backgroundColor = "transparent";
+        switchGift.style.color = "white";
+        switchProduct.style.color = "#202124";
+
+    });
+
+});
+
+switchProduct.addEventListener("click", function () {
+    requestAnimationFrame(() => {
+        choose_product.style.backgroundColor = "#0052CC";
+        choose_gift.style.backgroundColor = "transparent";
+        switchProduct.style.color = "white";
+        switchGift.style.color = "#202124";       
+
+    });
+
+});
+
+
+const wishlist_id_1 = document.getElementById("wishlist_id_1");
+
+wishlist_id_1.addEventListener("click", function () {
+   
+        window.location.href = "/chat/" + 1;
+
+});
+
+</script>

ShoppingAssistantWebClient.Web/wwwroot/css/site.css

@@ -1,22 +1,361 @@
 html {
-  font-size: 14px;
+  font-family: 'Nunito';
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
-
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-html {
+.menu {
   position: relative;
-  min-height: 100%;
+  width: 100%;
+  height: 100%;
+  border: 1.5px solid;
+  border-color: #0052CC;
+  border-radius: 10px;
+  padding-top: 16px;
+  padding-bottom: 16px;
 }
 
-body {
-  margin-bottom: 60px;
+.logo {
+  display: flex;
+  align-items: center;
+  padding-bottom: 15PX;
+}
+
+.logo_name {
+  padding-top: 10px;
+  padding-left: 3px;
+  font-size: 17px;
+  justify-content: center;
+  /* Горизонтальное центрирование */
+  align-items: center;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+
+}
+
+.logo img {
+  float: left;
+  width: 52px;
+  height: 52px;
+}
+
+.left_frame {
+  padding-left: 20px;
+  position: absolute;
+  height: calc(100% - 105px);
+  left: 0;
+  width: 20%;
+  transition: 1s;
+}
+
+
+.wishlist_name {
+  font-size: 15px;
+  margin-top: 7px;
+  margin-bottom: 7px;
+  color: black;
+  cursor: pointer;
+}
+
+.elements {
+  padding-left: 12px;
+  padding-right: 12px;
+  
+}
+.elements_wishlisht{
+  overflow-y: scroll;
+  padding-left: 12px;
+  padding-right: 12px;
+  height: 90%;
+ 
+}
+.elements_wishlisht::-webkit-scrollbar {
+  visibility: hidden;
+}
+
+
+.close_menu {
+  position: relative;
+  background-color: #EAEAEA;
+  border-radius: 10px;
+  color: #4E4E4E;
+  font-size: 16px;
+  width: 90%;
+  height: 40px;
+  padding: 7px 9px;
+}
+
+.add_chat {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 15px;
+  margin-bottom: 5px;
+  background-color: #EAEAEA;
+  border-radius: 10px;
+  font-size: 16px;
+  width: 100px;
+  height: 40px;
+
+  cursor: pointer;
+}
+.add_chat a{
+  border-radius: 10px;
+  padding: 7px 9px;
+  text-decoration: none;
+  color: #4E4E4E;
+}
+
+
+.info_user {
+  background-color: white;
+  position:absolute;
+  bottom: 0;
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+
+.user_name {
+  font-size: 16px;
+  padding-left: 7px;
+}
+
+.info_user img {
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+}
+
+.line {
+  position: absolute;
+  bottom: 60px;
+  width: 100%;
+  border-bottom: 1px solid #4b7bc4; 
+}
+.button_close_menu{
+  width: 23px;
+  height: 23px;
+  position: absolute;
+  right: 20px;
+  cursor: pointer;
+
+}
+
+.button_close_menu span {
+	width: 20px;
+	height: 1.5px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: #4E4E4E;
+}
+
+.button_close_menu span:nth-of-type(2) {
+	top: calc(50% - 5px);
+}
+.button_close_menu span:nth-of-type(3) {
+	top: calc(50% + 5px);
+}
+
+.right_frame {
+  position: absolute;
+  border: 1.5px solid;
+  border-color: #0052CC;
+  border-radius: 10px;
+  left: 20px;
+  height: calc(100% - 40px);
+  width: calc(100% - 40px);
+  transition: 1s;
+
+}
+
+.button_open_menu{
+  z-index: 2;
+  width: 23px;
+  height: 23px;
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  cursor: pointer;
+}
+.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: 20px ;
+  color: #0052CC;
+  font-size: 17px;
+  text-align: center;
+}
+.title_two_frame{
+  padding-top: 60px ;
+  padding-bottom: 40px ;
+  color: black;
+  font-size: 40px;
+  text-align: center;
+  font-weight: 600;
+}
+.title_three_frame{
+  padding-top: 60px ;
+  padding-bottom: 40px ;
+  color: #202124;
+  font-size: 20px;
+  text-align: center;
+  font-weight: 400;
+}
+.topic { 
+  font-size: 18px;
+  text-align: center;
+  line-height: 35px;
+  color: #009FFF;
+  width: 250px;
+  margin: 0 auto;
+}
+.topic div{
+  margin-top: 20px;
+  border: 1.5px solid;
+  border-color: #009FFF;
+  border-radius: 10px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.topic div a{
+  color: #009FFF;
+  text-decoration:none;
+}
+.switch{
+  height: 45px;
+  width: 350px;
+  margin: 0 auto;
+  border: 1.5px solid;
+  border-color: #EAEAEA;
+  border-radius: 10px;
+  text-align: center;
+  position: relative;
+  
+}
+
+.switch_product{
+  position: absolute;
+  background-color: #0052CC;
+  border-radius: 10px;
+  margin: 5px;
+  width: calc(50% - 10px);
+  height: calc(100% - 10px);
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+  cursor: pointer;
+  transition: 0.8s;
+  color: white;
+}
+
+.switch_gift{
+  right: 0;
+  position: absolute;
+  border-radius: 10px;
+  margin: 5px;
+  width: calc(50% - 10px);
+  height: calc(100% - 10px);
+  display: flex;
+  align-items: center;
+  justify-content: center; 
+  cursor: pointer;
+  transition: 0.8s;
+  color: #202124;
+}
+
+.chat_input{
+  position: absolute;
+  margin-left: 25%;
+  margin-bottom: 20px;
+  width: 50%;
+  border-radius: 10px;
+  bottom: 0;
+
+}
+.chat_input input{
+  font-size: 17px;
+  width: 100%;
+  position: relative;
+  color: #4E4E4E;
+  background-color: #EAEAEA;
+  border-radius: 10px;
+  border: none;
+  padding: 10px 20px;
+  outline:none;
+}
+.button_sende{
+  margin-top: 14px;
+  margin-right: 20px;
+  cursor: pointer;
+  height: calc(100% - 28px);
+  width: 2.8%;
+  position: absolute;
+  right: 0;
+}
+.button_sende img{
+  height: 100%;
+  width: 100%;
+  position: absolute;
+
+}
+
+.new_chat{
+  position: absolute;
+  overflow-y: scroll;
+  height: 100%;
+  width: 100%;
+}
+.new_chat::-webkit-scrollbar {
+  visibility: hidden;
+}
+
+.chat_box{
+  border-radius: 10px;
+  position: absolute;
+  margin-left: 25%;
+  margin-top: 35px;
+  width: 50%;
+  list-style: none;
+  padding:0;
+  
+}
+.chat_outgoing{
+  display: flex;
+}
+.chat_incoming{
+  display: flex;
+}
+.chat_box .chat_outgoing p {
+  margin-left: auto;
+  background-color: #009FFF;
+  border-radius: 10px;
+  color: white;
+  padding: 10px;
+  max-width: 60%;
+
+}
+.chat_box .chat_incoming p {
+  background-color: #EAEAEA;
+  border-radius: 10px;
+  color: black;
+  padding: 10px;
+  width: 60%;
+  margin-bottom: 20px ;
+  margin-top: 20px ;
 }