-
Notifications
You must be signed in to change notification settings - Fork 0
/
base.html
157 lines (148 loc) · 8.85 KB
/
base.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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">
<head>
<title>convForm - example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/jquery.convform.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="container">
<div class="chatbox__cont">
<div class="chatbox__support">
<div class="chatbox__header">
<div class="chatbox__image--header">
<img src="images/logo (3).ico" alt="image">
</div>
<div class="chatbox__content--header">
<h4 class="chatbox__heading--header">AIT IEEE</h4>
<p class="chatbox__description--header">Hi, I'm Bot. How can I help you?</p>
</div>
</div>
<div class="chatbox__messages">
<section>
<!--div class="vertical-align"-->
<!div class="container">
<!div class="row">
<!div class="col-sm-4 col-sm-offset-0 col-xs-offset-0">
<!div class="card no-border">
<div id="chat" class="conv-form-wrapper">
<form action="" method="GET" class="hidden">
<select data-conv-question="Hello! I'm a bot created from a HTML form. Can I show you some features? (this question comes from a select)" name="first-question">
<option value="yes">Yes</option>
<option value="sure">Sure!</option>
</select>
<input type="text" name="name" data-conv-question="Alright! First, tell me your full name, please.|Okay! Please, tell me your name first.">
<input type="text" data-conv-question="Howdy, {name}:0! It's a pleasure to meet you. (note that this question doesn't expect any answer)" data-no-answer="true">
<input type="text" data-conv-question="This plugin supports multi-select too. Let's see an example." data-no-answer="true">
<select name="multi[]" data-conv-question="What kind of music do you like?" multiple>
<option value="Rock">Rock</option>
<option value="Pop">Pop</option>
<option value="Country">Country</option>
<option value="Classic">Classic</option>
</select>
<select name="programmer" data-callback="storeState" data-conv-question="So, are you a programmer? (this question will fork the conversation based on your answer)">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div data-conv-fork="programmer">
<div data-conv-case="yes">
<input type="text" data-conv-question="A fellow programmer! Cool." data-no-answer="true">
</div>
<div data-conv-case="no">
<select name="thought" data-conv-question="Have you ever thought about learning? Programming is fun!">
<option value="yes">Yes</option>
<option value="no">No..</option>
</select>
</div>
</div>
<input type="text" data-conv-question="convForm also supports regex patterns. Look:" data-no-answer="true">
<input data-conv-question="Type in your e-mail" data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" id="email" type="email" name="email" required placeholder="What's your e-mail?">
<input data-conv-question="Now tell me a secret (like a password)" type="password" data-minlength="6" id="senha" name="password" required placeholder="password">
<select data-conv-question="Selects also support callback functions. For example, try one of these:">
<option value="google" data-callback="google">Google</option>
<option value="bing" data-callback="bing">Bing</option>
</select>
<select name="callbackTest" data-conv-question="You can do some cool things with callback functions. Want to rollback to the 'programmer' question before?">
<option value="yes" data-callback="rollback">Yes</option>
<option value="no" data-callback="restore">No</option>
</select>
<select data-conv-question="This is it! If you like me, consider donating! If you need support, contact me. When the form gets to the end, the plugin submits it normally, like you had filled it." id="">
<option value="">Awesome!</option>
</select>
</form>
</div>
</!div>
</!div>
</!div>
</!div>
</!--div>
</section>
<div></div>
</div>
<!--div class="chatbox__footer">
<div id="userInput">
<input id="textInput" class="input-box" type="text" placeholder="Write a message...">
</div>
<button class="chatbox__send--footer send__button">Send</button>
</!--div-->
</div>
<div class="chatbox__button">
<button><img src="./images/chatbox-icon.svg" /></button>
</div>
</div>
</div>
<script src="./app.js"></script>
<script src="responses.js"></script>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="dist/autosize.min.js"></script>
<script type="text/javascript" src="dist/jquery.convform.js"></script>
<script>
function google(stateWrapper, ready) {
window.open("https://google.com");
ready();
}
function bing(stateWrapper, ready) {
window.open("https://bing.com");
ready();
}
var rollbackTo = false;
var originalState = false;
function storeState(stateWrapper, ready) {
rollbackTo = stateWrapper.current;
console.log("storeState called: ",rollbackTo);
ready();
}
function rollback(stateWrapper, ready) {
console.log("rollback called: ", rollbackTo, originalState);
console.log("answers at the time of user input: ", stateWrapper.answers);
if(rollbackTo!=false) {
if(originalState==false) {
originalState = stateWrapper.current.next;
console.log('stored original state');
}
stateWrapper.current.next = rollbackTo;
console.log('changed current.next to rollbackTo');
}
ready();
}
function restore(stateWrapper, ready) {
if(originalState != false) {
stateWrapper.current.next = originalState;
console.log('changed current.next to originalState');
}
ready();
}
</script>
<script>
jQuery(function($){
convForm = $('#chat').convform({selectInputStyle: 'disable'});
console.log(convForm);
});
</script>
</body>
</html>