Skip to content

Commit b47051b

Browse files
HenraLHenraL
committed
[ADD] dialog to the chatbot as well as a feedback form
1 parent 005f51b commit b47051b

File tree

5 files changed

+216
-13
lines changed

5 files changed

+216
-13
lines changed

‎bonus/bootstrap/asperboard.bsdesign‎

1.04 KB
Binary file not shown.

‎html/assets/css/chatbot.css‎

Lines changed: 112 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
** File description:
44
** chatbot.css */
55

6-
.chatBotAbstraction {
7-
position: fixed;
8-
bottom: 20px;
9-
right: 20px;
10-
width: 300px;
11-
height: 300px;
6+
:root {
7+
--bot-background-color: #44c2eb;
8+
--bot-color: black;
9+
--bot-link-clicked: purple;
10+
--user-background-color: lightgreen;
11+
--user-color: black;
1212
}
1313

1414
.chatbotButton {
@@ -29,17 +29,119 @@
2929
-moz-border-radius: 50%;
3030
}
3131

32-
.chatbotBuble {
32+
.chatbotBubble {
3333
padding: 10px;
3434
margin-bottom: 10px;
35-
width: 78%;
36-
height: 62%;
35+
width: 82%;
36+
height: 64%;
3737
background-color: var(--bs-body-bg);
3838
border: 1px solid var(--bs-primary);
3939
}
4040

41-
.chatbotBuble.btm-right-in, .chatbotBuble.tri-right:after {
41+
.chatbotBubble.btm-right-in, .chatbotBubble.tri-right:after {
4242
background-color: var(--bs-body-bg);
4343
border: 1px solid var(--bs-primary);
4444
}
4545

46+
.chatbot_chat_container {
47+
max-height: inherit;
48+
height: 90%;
49+
width: 100%;
50+
}
51+
52+
.chatbot_chat_history {
53+
display: flex;
54+
flex-direction: column;
55+
height: 90%;
56+
max-height: 90%;
57+
width: 100%;
58+
overflow: hidden;
59+
overflow-y: auto;
60+
overflow-wrap: break-word;
61+
border: 1px solid var(--bs-primary);
62+
}
63+
64+
.inner_bubble_override {
65+
display: inline-block;
66+
max-width: 80%;
67+
width: 100%;
68+
}
69+
70+
.bubble_position_left {
71+
justify-content: flex-start;
72+
margin: 6px;
73+
margin-bottom: 22px;
74+
margin-left: 4px;
75+
background-color: var(--bot-background-color);
76+
color: var(--bot-color);
77+
}
78+
79+
.bubble_position_left.tri-right.btm-left-in:after {
80+
border-color: var(--bot-background-color) transparent transparent var(--bot-background-color);
81+
}
82+
83+
.bubble_position_right {
84+
display: flex;
85+
justify-content: flex-end;
86+
width: 100%;
87+
margin: 6px;
88+
margin-bottom: 22px;
89+
margin-right: 4px;
90+
background-color: var(--user-background-color);
91+
color: var(--user-color);
92+
}
93+
94+
.bubble_position_right.tri-right.btm-right-in:after {
95+
border-color: var(--user-background-color) var(--user-background-color) transparent transparent;
96+
}
97+
98+
.bubble_position_left .talktext p a:visited {
99+
color: var(--bot-link-clicked);
100+
}
101+
102+
.bubble_position_left .talktext p a, .bubble_position_left .talktext p a:hover, .bubble_position_left .talktext p a:active {
103+
color: var(--bot-color);
104+
}
105+
106+
.bubble_position_left .talktext p a:hover, .bubble_position_left .talktext p a:active {
107+
font-style: italic;
108+
}
109+
110+
.bubble_position_left .talktext p a:active {
111+
text-decoration: none;
112+
}
113+
114+
@media (max-width: 699px) {
115+
.chatBotAbstraction {
116+
position: fixed;
117+
bottom: 20px;
118+
right: 20px;
119+
width: 94%;
120+
height: 100%;
121+
}
122+
}
123+
124+
@media (max-width: 699px) {
125+
.chatbotBubble {
126+
top: 0px;
127+
left: -22px;
128+
}
129+
}
130+
131+
@media (min-width: 700px) {
132+
.chatBotAbstraction {
133+
position: fixed;
134+
bottom: 20px;
135+
right: 20px;
136+
width: 364px;
137+
height: 464px;
138+
}
139+
}
140+
141+
@media (min-width: 700px) {
142+
.chatbotBubble {
143+
top: 74px;
144+
left: -12px;
145+
}
146+
}
147+

‎html/assets/js/chatbot/chatbot.js‎

Lines changed: 30 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎html/feedback/index.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html data-bs-theme="light" lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
7+
<title>Asperboard</title>
8+
<meta name="theme-color" content="#86c8ed">
9+
<link rel="canonical" href="https://asperboard.pingpal.news/feedback/">
10+
<meta property="og:url" content="https://asperboard.pingpal.news/feedback/">
11+
<meta name="twitter:description" content="This is the mockup of the project Asperboard. So far it contains the connection page, a mockup for the asperboard, discuss, follow up, logout. This mockup is front-end only, any data is only stored locally.">
12+
<meta name="twitter:card" content="summary_large_image">
13+
<meta property="og:type" content="website">
14+
<meta name="publisher" content="Henry Letellier">
15+
<meta name="copyright" content="© Henry Letellier">
16+
<meta name="robots" content="index, follow, max-image-preview:standard">
17+
<meta name="author" content="Henry LETELLIER, Flavien Maillard">
18+
<meta name="twitter:title" content="Asperboard">
19+
<meta name="description" content="This is the mockup of the project Asperboard. So far it contains the connection page, a mockup for the asperboard, discuss, follow up, logout. This mockup is front-end only, any data is only stored locally.">
20+
<meta property="og:image" content="https://asperboard.pingpal.news/assets/img/AB-logo.png">
21+
<link rel="icon" type="image/png" sizes="1270x1221" href="../assets/img/AB-logo.png">
22+
<link rel="icon" type="image/png" sizes="1270x1221" href="../assets/img/AB-logo.png" media="(prefers-color-scheme: dark)">
23+
<link rel="icon" type="image/png" sizes="1270x1221" href="../assets/img/AB-logo.png">
24+
<link rel="icon" type="image/png" sizes="1270x1221" href="../assets/img/AB-logo.png" media="(prefers-color-scheme: dark)">
25+
<link rel="icon" type="image/png" sizes="1270x1221" href="../assets/img/AB-logo.png">
26+
<link rel="icon" type="image/png" sizes="1270x1221" href="../assets/img/AB-logo.png">
27+
<link rel="icon" type="image/png" sizes="1270x1221" href="../assets/img/AB-logo.png">
28+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
29+
<link rel="manifest" href="../manifest.json" crossorigin="use-credentials">
30+
<link rel="stylesheet" href="../assets/css/OpenDyslexic.css">
31+
<link rel="stylesheet" href="../assets/css/OpenDyslexic%203.css">
32+
<link rel="stylesheet" href="../assets/css/OpenDyslexic3.css">
33+
<link rel="stylesheet" href="../assets/css/OpenDyslexicAlta.css">
34+
<link rel="stylesheet" href="../assets/css/OpenDyslexicMono.css">
35+
<link rel="stylesheet" href="../assets/css/bubbles.css">
36+
<link rel="stylesheet" href="../assets/css/banner.css">
37+
<link rel="stylesheet" href="../assets/css/chatbot.css">
38+
<link rel="stylesheet" href="../assets/css/dashboard.css">
39+
<link rel="stylesheet" href="../assets/css/dropdown.css">
40+
<link rel="stylesheet" href="../assets/css/header_button.css">
41+
<link rel="stylesheet" href="../assets/css/Login-Form-Basic-icons.css">
42+
<link rel="stylesheet" href="../assets/css/Toggle-Switches.css">
43+
<link rel="stylesheet" href="../assets/css/xToggle.css">
44+
</head>
45+
46+
<body style="overflow:hidden;">
47+
<!-- Start: feedback form -->
48+
<section class="forumFrame"><iframe width="2000px" height="2000px" src="https://forms.office.com/Pages/ResponsePage.aspx?id=yrQckGK4KUCTBuXND22fhk594gvxFIhOoWU4HCjOCnFUNDBWNldGSE0zOTdERUlESTJWTDZGWE42Uy4u&embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>
49+
</section><!-- End: feedback form -->
50+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
51+
<script src="../assets/js/modules/cookie_manager.mjs" type="module"></script>
52+
<script src="../assets/js/modules/indexeddb_manager.mjs" type="module"></script>
53+
<script src="../assets/js/modules/local_storage_manager.mjs" type="module"></script>
54+
<script src="../assets/js/font-selector.js"></script>
55+
<script src="../assets/js/modules/manage_server.mjs" type="module"></script>
56+
<script src="../assets/js/modules/querier.mjs" type="module"></script>
57+
<script src="../assets/js/sleep.js"></script>
58+
<script src="../assets/js/modules/widget_manager.mjs" type="module"></script>
59+
<script src="../assets/js/spacer.js"></script>
60+
<script src="../assets/js/clearer.js"></script>
61+
<script src="../assets/js/modules/constants.mjs" type="module"></script>
62+
<script src="../assets/js/theme_toggler.js"></script>
63+
<script src="../assets/js/banners/cookies.js"></script>
64+
<script src="../assets/js/change_toggle_option.js"></script>
65+
<script src="../assets/js/chatbot/chatbot.js"></script>
66+
<script src="../assets/js/github_normalizer.js"></script>
67+
<script src="../assets/js/image_checker.js"></script>
68+
<script src="../assets/js/xToggle-Toggle.js"></script>
69+
</body>
70+
71+
</html>

‎html/sitemap.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<url>
77
<loc>https://asperboard.pingpal.news/callback/</loc>
88
</url>
9+
<url>
10+
<loc>https://asperboard.pingpal.news/feedback/</loc>
11+
</url>
912
<url>
1013
<loc>https://asperboard.pingpal.news/games/</loc>
1114
</url>

0 commit comments

Comments
 (0)