mirror of
https://github.com/Shchoholiev/shopping-assistant-web-client.git
synced 2025-04-04 16:49:36 +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}"
|
||||
|
||||
@inject IHttpClientFactory ClientFactory
|
||||
|
||||
<PageTitle>Gift for Jessica</PageTitle>
|
||||
|
||||
<div class="right_frame" id="rightFrame">
|
||||
|
||||
<div id="button_open" class="open_menu">
|
||||
<a class="button_open_menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="new_chat">
|
||||
<div class="chat_message">
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<div class="possible_options">
|
||||
|
||||
<div class="tite_options">Several possible options</div>
|
||||
|
||||
<div class="options">
|
||||
|
||||
<div class="topic_options">
|
||||
HDMI
|
||||
</div>
|
||||
<div class="topic_options">
|
||||
VGA
|
||||
</div>
|
||||
<div class="topic_options">
|
||||
DisplayPort
|
||||
</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>
|
||||
@code {
|
||||
|
||||
[Parameter] public string chatId { get; set; }
|
||||
@page "/chat/{chatId}"
|
||||
|
||||
@inject IHttpClientFactory ClientFactory
|
||||
|
||||
<PageTitle>Gift for Jessica</PageTitle>
|
||||
|
||||
<div class="right_frame" id="rightFrame">
|
||||
|
||||
<div id="button_open" class="open_menu">
|
||||
<a class="button_open_menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="new_chat">
|
||||
<div class="chat_message">
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<div class="possible_options">
|
||||
|
||||
<div class="tite_options">Several possible options</div>
|
||||
|
||||
<div class="options">
|
||||
|
||||
<div class="topic_options">
|
||||
HDMI
|
||||
</div>
|
||||
<div class="topic_options">
|
||||
VGA
|
||||
</div>
|
||||
<div class="topic_options">
|
||||
DisplayPort
|
||||
</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>
|
||||
@code {
|
||||
|
||||
[Parameter] public string chatId { get; set; }
|
||||
}
|
||||
@ -1,187 +1,187 @@
|
||||
.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: 2.25em;
|
||||
padding-bottom: 1.5em;
|
||||
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;
|
||||
.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: 2.25em;
|
||||
padding-bottom: 1.5em;
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user