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

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

View File

@ -2,10 +2,10 @@
<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>
@ -19,7 +19,7 @@
<div class="title_two_frame">What you're looking for</div> <div class="title_two_frame">What you're looking for</div>
<div class="switch"> <div class="switch">
<div class="switch_product" id="choose_product" > <div class="switch_product" id="choose_product">
Product Product
</div> </div>
<div class="switch_gift" id="choose_gift"> <div class="switch_gift" id="choose_gift">
@ -28,22 +28,23 @@
</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="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">
<div class="topic_one"> <div class="topic_one">
<a class="button_topic_one" > <a class="button_topic_one">
Date Date
</a> </a>
</div> </div>
<div class="topic_two"> <div class="topic_two">
<a class="button_topic_two" > <a class="button_topic_two">
🎃 Halloween gift 🎃 Halloween gift
</a> </a>
</div> </div>
<div class="topic_three"> <div class="topic_three">
<a class="button_topic_three" > <a class="button_topic_three">
🎁 Birthday gift 🎁 Birthday gift
</a> </a>
</div> </div>
@ -51,13 +52,14 @@
</div> </div>
<div class="chat_input"> <div class="chat_input">
<input class="input_messages" type="text" id="chatInput" placeholder="Describe what you are looking for...."> <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"> <img class="button_sende" src="/images/send.svg" alt="Send message">
</div> </div>
</div> </div>
</div> </div>
<script> <script>

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;