mirror of
https://github.com/Shchoholiev/shopping-assistant-web-client.git
synced 2025-04-12 01:48:49 +00:00
Merge branch 'feature/SA-109-Development-Task-WebClient' of https://github.com/Shchoholiev/shopping-assistant-web-client into feature/SA-109-Development-Task-WebClient
This commit is contained in:
AsTroLog
commit
8f5abc8f98
@ -1,92 +1,92 @@
|
|||||||
@page "/chat/{chatId}"
|
@page "/chat/{chatId}"
|
||||||
|
|
||||||
@inject IHttpClientFactory ClientFactory
|
@inject IHttpClientFactory ClientFactory
|
||||||
|
|
||||||
<PageTitle>Gift for Jessica</PageTitle>
|
<PageTitle>Gift for Jessica</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>
|
||||||
|
|
||||||
|
|
||||||
<div class="new_chat">
|
<div class="new_chat">
|
||||||
<div class="chat_message">
|
<div class="chat_message">
|
||||||
|
|
||||||
|
|
||||||
<div class="title_one_frame">Gift for Jessica</div>
|
<div class="title_one_frame">Gift for Jessica</div>
|
||||||
|
|
||||||
<ul class="chat_box">
|
<ul class="chat_box">
|
||||||
|
|
||||||
<li class="chat_outgoing">
|
<li class="chat_outgoing">
|
||||||
<p>Give me product recommendation. Ask me questions if you need more directions. I am looking for:
|
<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>
|
hub for my macbook to connect external monitors</p>
|
||||||
</li>
|
</li>
|
||||||
<li class=" chat_incoming">
|
<li class=" chat_incoming">
|
||||||
<p>Sure! I can help you with that. I will ask you some leading questions. This is the first:
|
<p>Sure! I can help you with that. I will ask you some leading questions. This is the first:
|
||||||
<br>
|
<br>
|
||||||
How many external monitors do you want to connect to your MacBook?
|
How many external monitors do you want to connect to your MacBook?
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li class="chat_outgoing">
|
<li class="chat_outgoing">
|
||||||
<p>7</p>
|
<p>7</p>
|
||||||
</li>
|
</li>
|
||||||
<li class=" chat_incoming">
|
<li class=" chat_incoming">
|
||||||
<p>Thank you. Here is the next question:
|
<p>Thank you. Here is the next question:
|
||||||
<br>
|
<br>
|
||||||
What type of external monitors do you have? (e.g., HDMI, DisplayPort, VGA)
|
What type of external monitors do you have? (e.g., HDMI, DisplayPort, VGA)
|
||||||
</p>
|
</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="possible_options">
|
<div class="possible_options">
|
||||||
|
|
||||||
<div class="tite_options">Several possible options</div>
|
<div class="tite_options">Several possible options</div>
|
||||||
|
|
||||||
<div class="options">
|
<div class="options">
|
||||||
|
|
||||||
<div class="topic_options">
|
<div class="topic_options">
|
||||||
HDMI
|
HDMI
|
||||||
</div>
|
</div>
|
||||||
<div class="topic_options">
|
<div class="topic_options">
|
||||||
VGA
|
VGA
|
||||||
</div>
|
</div>
|
||||||
<div class="topic_options">
|
<div class="topic_options">
|
||||||
DisplayPort
|
DisplayPort
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="chat_input">
|
<div class="chat_input">
|
||||||
<input class="input_messages" type="text" id="chatInput"
|
<input class="input_messages" type="text" id="chatInput"
|
||||||
placeholder="Describe what you are looking for....">
|
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>
|
||||||
|
|
||||||
|
|
||||||
document.getElementById('button_open').addEventListener('click', changetyle);
|
document.getElementById('button_open').addEventListener('click', changetyle);
|
||||||
</script>
|
</script>
|
||||||
@code {
|
@code {
|
||||||
|
|
||||||
[Parameter] public string chatId { get; set; }
|
[Parameter] public string chatId { get; set; }
|
||||||
}
|
}
|
||||||
@ -1,187 +1,187 @@
|
|||||||
.right_frame {
|
.right_frame {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 0.09em solid;
|
border: 0.09em solid;
|
||||||
border-color: #0052CC;
|
border-color: #0052CC;
|
||||||
border-radius: 0.6em;
|
border-radius: 0.6em;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button_open_menu {
|
.button_open_menu {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
width: 1.43em;
|
width: 1.43em;
|
||||||
height: 1.23em;
|
height: 1.23em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1.56em;
|
top: 1.56em;
|
||||||
left: 1.56em;
|
left: 1.56em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button_open_menu span {
|
.button_open_menu span {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 1.5px;
|
height: 1.5px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
background-color: #4E4E4E;
|
background-color: #4E4E4E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button_open_menu span:nth-of-type(2) {
|
.button_open_menu span:nth-of-type(2) {
|
||||||
top: calc(50% - 5px);
|
top: calc(50% - 5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button_open_menu span:nth-of-type(3) {
|
.button_open_menu span:nth-of-type(3) {
|
||||||
top: calc(50% + 5px);
|
top: calc(50% + 5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title_one_frame {
|
.title_one_frame {
|
||||||
padding-top: 1.25em;
|
padding-top: 1.25em;
|
||||||
color: #0052CC;
|
color: #0052CC;
|
||||||
font-size: 1.0625em;
|
font-size: 1.0625em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title_two_frame {
|
.title_two_frame {
|
||||||
padding-top: 2.25em;
|
padding-top: 2.25em;
|
||||||
padding-bottom: 1.5em;
|
padding-bottom: 1.5em;
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title_three_frame {
|
.title_three_frame {
|
||||||
padding-top: 3.75em;
|
padding-top: 3.75em;
|
||||||
padding-bottom: 2.5em;
|
padding-bottom: 2.5em;
|
||||||
color: #202124;
|
color: #202124;
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic {
|
.topic {
|
||||||
font-size: 1.125em;
|
font-size: 1.125em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 2.1875em;
|
line-height: 2.1875em;
|
||||||
color: #009FFF;
|
color: #009FFF;
|
||||||
width: 15.625em;
|
width: 15.625em;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic div a {
|
.topic div a {
|
||||||
color: #009FFF;
|
color: #009FFF;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
border-color: #EAEAEA;
|
border-color: #EAEAEA;
|
||||||
border-radius: 0.6em;
|
border-radius: 0.6em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch_product {
|
.switch_product {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: #0052CC;
|
background-color: #0052CC;
|
||||||
border-radius: 0.6em;
|
border-radius: 0.6em;
|
||||||
margin: 0.3125em;
|
margin: 0.3125em;
|
||||||
width: calc(50% - 0.625em);
|
width: calc(50% - 0.625em);
|
||||||
height: calc(100% - 0.625em);
|
height: calc(100% - 0.625em);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.8s;
|
transition: 0.8s;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch_gift {
|
.switch_gift {
|
||||||
right: 0;
|
right: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 0.6em;
|
border-radius: 0.6em;
|
||||||
margin: 0.3125em;
|
margin: 0.3125em;
|
||||||
width: calc(50% - 0.625em);
|
width: calc(50% - 0.625em);
|
||||||
height: calc(100% - 0.625em);
|
height: calc(100% - 0.625em);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.8s;
|
transition: 0.8s;
|
||||||
color: #202124;
|
color: #202124;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat_message {
|
.chat_message {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: calc(100% - 5.5em);
|
height: calc(100% - 5.5em);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat_input {
|
.chat_input {
|
||||||
background-color: #EAEAEA;
|
background-color: #EAEAEA;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
bottom: 2em;
|
bottom: 2em;
|
||||||
margin-left: 25%;
|
margin-left: 25%;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
border-radius: 0.6em;
|
border-radius: 0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input_messages {
|
.input_messages {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
font-size: 1.0625em;
|
font-size: 1.0625em;
|
||||||
background-color: #EAEAEA;
|
background-color: #EAEAEA;
|
||||||
color: #4E4E4E;
|
color: #4E4E4E;
|
||||||
border-radius: 0.6em;
|
border-radius: 0.6em;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0.625em 1.25em;
|
padding: 0.625em 1.25em;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button_sende {
|
.button_sende {
|
||||||
float: right;
|
float: right;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 2.5em;
|
line-height: 2.5em;
|
||||||
margin-right: 0.8em;
|
margin-right: 0.8em;
|
||||||
width: 1.8em;
|
width: 1.8em;
|
||||||
height: 1.7em;
|
height: 1.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.new_chat {
|
.new_chat {
|
||||||
padding-top: 0.5em;
|
padding-top: 0.5em;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.chat_message::-webkit-scrollbar {
|
.chat_message::-webkit-scrollbar {
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
width: 0.2em;
|
width: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat_message::-webkit-scrollbar-thumb {
|
.chat_message::-webkit-scrollbar-thumb {
|
||||||
background-color: #0052CC;
|
background-color: #0052CC;
|
||||||
/* Колір позиції покажчика */
|
/* Колір позиції покажчика */
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
/* Закруглення країв позиції покажчика */
|
/* Закруглення країв позиції покажчика */
|
||||||
width: 0.2em;
|
width: 0.2em;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user