-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
143 lines (126 loc) · 4.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Feminist Empowerment Chatbot!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/apple-touch-icon.png">
<link rel="stylesheet" media="all" href="component/styles/setup.css" type="text/css">
<link rel="stylesheet" media="all" href="component/styles/says.css" type="text/css">
<link rel="stylesheet" media="all" href="component/styles/reply.css" type="text/css">
<link rel="stylesheet" media="all" href="component/styles/typing.css" type="text/css">
<link rel="stylesheet" media="all" href="component/styles/input.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<!-- css stylesheet for the background of the web page (no need to worry about this) -->
<style>
body {
background: #E6E6E6;
}
.bubble-container {
height: 100vh;
}
.bubble-container .input-wrap textarea {
margin: 0;
}
</style>
</head>
<body>
<!-- header for the chatbot -->
<div id="chat">
<div class="header">
<img src="img/apple-touch-icon.png" width="40px;">
<div>
<h1>Feminist Empowerment Chatbot</h1>
<p>Bulding up some self esteem</p>
</div>
</div>
</div>
<!-- This is to power the chatbot, you do not need to worry about this area -->
<script src="component/js/Bubbles.js"></script>
<script>
var chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow", {
inputCallbackFn: function(o) {
// this is for the bot - don't worry
var match = function(key) {
setTimeout(function() {
chatWindow.talk(convo, key) // restart current convo from point found in the answer
}, 600)
}
// sanitize text for search function - for the bot
var strip = function(text) {
return text.toLowerCase().replace(/[\s.,\/#!$%\^&\*;:{}=\-_'"`~()]/g, "")
}
// search function - for the bot
var found = false
o.convo[o.standingAnswer].reply.forEach(function(e, i) {
strip(e.human_response).includes(strip(o.input)) && o.input.length > 0
? (found = e.bot_answer)
: found ? null : (found = false)
})
found ? match(found) : miss()
}
})
// This is where your conversation is going to happen! Only focus here!
var convo = {
// first section
intro: {
bot_says: ["Hey, Feminist Empowerment Chatbot here! FEC is here to give you the daily boost of empowerment that you seek.",
"<img src=https://media.giphy.com/media/3o7abBphHJngINCHio/giphy.gif />"],
human_reply: [
{
human_response: "Cool, but why Feminist Empowerment?",
bot_answer: "smart",
},
]
},
//second section
"smart": {
bot_says: ["Good question, you're smart! Feminism can be a tool for exploring all kinds of inequalities, including the ways that women or other gender minorities might be discriminated against.",
"Being in it together and empower one another can help you see that you're not alone.",
"Lifting each other higher through sharing experiences (good ones or bad ones) can be empowering.",
"Ever heard of 'mansplaining'?"],
human_reply: [
{
human_response: "Yes, I have heard of that.",
bot_answer: "explore"
},
{
human_response: "Nope, tell me more!",
bot_answer: "mansplaining"
},
]
},
//third section (option explore)
"explore": {
bot_says: ["<img src=https://media.giphy.com/media/l0IyooXaONzJ6Uczm/giphy.gif />",
"Alright then you probably also know that xx% of women of persons who identify as female have experienced this phenomena? ",
"Especially when we look at field that are proclaimed to be 'male' per definitionem."],
human_reply: [
{
human_response: "Yeah, I can imagine that. I've already experienced it myself.",
bot_answer: "myself"
},
{
human_response: "Luckily, I haven't had such an experience.",
bot_answer: "luck"
},
]
},
//third section (option mansplaining)
"mansplaining": {
bot_says: ["So, mensplaining is the explanation of something by a man, typically to a woman, in a manner regarded as condescending or patronizing.",
"<img src=https://media.giphy.com/media/l0IyooXaONzJ6Uczm/giphy.gif />"],
human_reply: [
{
human_response: "Meeh, that's aweful. But what can you do about it?",
bot_answer: "strengths"
},
]
},
//make sure you always keep this as this closes line 76!!!!!!
}
//make sure you always keep this as this closes line 76!!!!!!
//Do not worry about this!
chatWindow.talk(convo)
</script>
</body>