cartaid/shopping-assistant-web-client
1
0
Fork 0
mirror of https://github.com/Shchoholiev/shopping-assistant-web-client.git synced 2025-04-12 01:48:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
––AsTroLog 2023-10-25 19:52:05 +00:00
parent 21f07c57c0
commit fa3f3b5a4c
2 changed files with 64 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
ShoppingAssistantWebClient.Web/Pages/Index.razor
View File

@ -2,63 +2,65 @@
<PageTitle>New Chat</PageTitle> <PageTitle>New Chat</PageTitle>
<div class="right_frame" id="rightFrame"> <div class="right_frame" id="rightFrame">
<div id="button_open" class="open_menu"> <div id="button_open" class="open_menu">
<a class="button_open_menu" > <a class="button_open_menu">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</a> </a>
</div>
<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>
<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="title_three_frame">What you're looking for, we will help you solve your problem and find it
<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>
<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>
</div>
<script> <script>
@ -68,21 +70,21 @@
var switchProd = document.querySelector(".switch_product"); var switchProd = document.querySelector(".switch_product");
function switchGift() { function switchGift() {
choose_gift.style.backgroundColor = "#0052CC"; choose_gift.style.backgroundColor = "#0052CC";
choose_product.style.backgroundColor = "transparent"; choose_product.style.backgroundColor = "transparent";
switchGi.style.color = "white"; switchGi.style.color = "white";
switchProd.style.color = "#202124"; switchProd.style.color = "#202124";
} }
function switchProduct() { function switchProduct() {
choose_product.style.backgroundColor = "#0052CC"; choose_product.style.backgroundColor = "#0052CC";
choose_gift.style.backgroundColor = "transparent"; choose_gift.style.backgroundColor = "transparent";
switchProd.style.color = "white"; switchProd.style.color = "white";
switchGi.style.color = "#202124"; switchGi.style.color = "#202124";
} }
document.getElementById('choose_gift').addEventListener('click', switchGift); document.getElementById('choose_gift').addEventListener('click', switchGift);
document.getElementById('choose_product').addEventListener('click', switchProduct); document.getElementById('choose_product').addEventListener('click', switchProduct);
document.getElementById('button_open').addEventListener('click', changetyle); document.getElementById('button_open').addEventListener('click', changetyle);
</script> </script>

5
ShoppingAssistantWebClient.Web/Pages/Index.razor.css
View File

@ -46,7 +46,6 @@
.title_two_frame { .title_two_frame {
padding-top: 2.25em; padding-top: 2.25em;
padding-bottom: 1.5em; padding-bottom: 1.5em;
color: black;
font-size: 2.5em; font-size: 2.5em;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
@ -72,7 +71,7 @@
.topic div { .topic div {
margin-top: 1.25em; margin-top: 1.25em;
border:0.09em solid; border: 0.09em solid;
border-color: #009FFF; border-color: #009FFF;
border-radius: 0.6em; border-radius: 0.6em;
justify-content: center; justify-content: center;
@ -86,7 +85,7 @@
} }
.switch { .switch {
height: 2.8125em; height: 2.8125em;
width: 21.875em; width: 21.875em;
margin: 0 auto; margin: 0 auto;
border: 0.09em solid; border: 0.09em solid;