-
Notifications
You must be signed in to change notification settings - Fork 32
/
index.html
57 lines (46 loc) · 4.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Peekobot
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Page styles - make your own! -->
<link rel="stylesheet" href="main.css">
<!-- Peekobot custom properties (CSS variable) - set these! -->
<style>
:root {
--peekobot-height: 80vh;
--peekobot-avatar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M38.331,47.025c0.777,0,1.408-0.631,1.408-1.408c0-0.777-0.631-1.408-1.408-1.408 c-0.777,0-1.408,0.631-1.408,1.408C36.923,46.394,37.554,47.025,38.331,47.025z M38.331,50.78c-2.852,0-5.162-2.311-5.162-5.162 c0-2.852,2.311-5.162,5.162-5.162s5.162,2.311,5.162,5.162C43.493,48.469,41.182,50.78,38.331,50.78z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M62.735,50.78c-2.852,0-5.162-2.311-5.162-5.162c0-2.852,2.311-5.162,5.162-5.162 c2.852,0,5.162,2.311,5.162,5.162C67.897,48.469,65.586,50.78,62.735,50.78z M62.735,47.025c0.777,0,1.408-0.631,1.408-1.408 c0-0.777-0.631-1.408-1.408-1.408c-0.777,0-1.408,0.631-1.408,1.408C61.327,46.394,61.958,47.025,62.735,47.025z'/%3E%3Cpath d='M51.941,26.095v-4.77c1.922-0.751,3.285-2.617,3.285-4.805c0-2.851-2.311-5.162-5.162-5.162 c-2.852,0-5.162,2.311-5.162,5.162c0,2.188,1.363,4.054,3.285,4.805v4.77c-17.788,0.79-31.913,12.726-31.913,27.338 c0,0.389,0.016,0.776,0.036,1.161l-0.036-0.031v34.079l10.544-14.415c6.058,4.657,14.237,6.588,23.247,6.588 c18.662,0,33.79-12.259,33.79-27.382C83.854,38.821,69.729,26.885,51.941,26.095z M50.063,15.112c0.777,0,1.408,0.631,1.408,1.408 c0,0.777-0.631,1.408-1.408,1.408c-0.777,0-1.408-0.631-1.408-1.408C48.656,15.743,49.286,15.112,50.063,15.112z M50.063,77.061 c-9.703,0-18.339-2.71-23.834-8.343l-6.202,7.696v-22.43l0.019,0.021c-0.006-0.191-0.019-0.381-0.019-0.573 c0-13.028,13.474-23.628,30.036-23.628c16.562,0,30.036,10.599,30.036,23.628S66.625,77.061,50.063,77.061z'/%3E%3Cpath d='M50.7,67.492c-6.836,0-14.916-3.037-15.257-3.166c-0.969-0.368-1.457-1.452-1.089-2.421c0.367-0.969,1.451-1.458,2.42-1.09 c0.077,0.029,7.786,2.922,13.925,2.922c6.418,0,12.451-2.834,12.511-2.862c0.938-0.444,2.057-0.047,2.501,0.89 c0.445,0.936,0.047,2.056-0.889,2.501C64.546,64.397,57.956,67.492,50.7,67.492z'/%3E%3Cpath fill='%23000000' d='M88.08,60.693L88.08,60.693c-1.032,0-1.877-0.845-1.877-1.877v-12.3c0-1.032,0.845-1.877,1.877-1.877l0,0 c1.032,0,1.877,0.845,1.877,1.877v12.3C89.958,59.848,89.113,60.693,88.08,60.693z'/%3E%3Cpath fill='%23000000' d='M12.047,60.693L12.047,60.693c-1.032,0-1.877-0.845-1.877-1.877v-12.3c0-1.032,0.845-1.877,1.877-1.877h0 c1.032,0,1.877,0.845,1.877,1.877v12.3C13.924,59.848,13.079,60.693,12.047,60.693z'/%3E%3Cpath fill='%23000000' d='M92.623,55.252L92.623,55.252c-1.032,0-1.877-0.845-1.877-1.877v-1.418c0-1.032,0.845-1.877,1.877-1.877l0,0 c1.032,0,1.877,0.845,1.877,1.877v1.418C94.5,54.407,93.655,55.252,92.623,55.252z'/%3E%3Cpath fill='%23000000' d='M7.377,55.252L7.377,55.252c-1.032,0-1.877-0.845-1.877-1.877v-1.418c0-1.032,0.845-1.877,1.877-1.877h0 c1.032,0,1.877,0.845,1.877,1.877v1.418C9.254,54.407,8.41,55.252,7.377,55.252z'/%3E%3C/svg%3E");
}
</style>
<!-- Peekobot styles -->
<link rel="stylesheet" href="peekobot.css">
<!-- These provide in-browser transpilation of ES6 JS code to ES5 to support IE11 -->
<script src="https://unpkg.com/@babel/[email protected]/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<header class="text-center">
<h1 class="xl reset-margin large-margin">Peekobot</h1>
<p>
Peekobot is a simple choice-driven chatbot framework in <del>less than</del> just over 100 lines of vanilla JS
</p>
<p>
I'm made by <a href="https://twitter.com/magicroundabout">Ross Wintle</a> and
you can find me on <a href="https://github.com/peekobot/peekobot">GitHub</a>
</p>
<p>Icon credit: "chat bot" by GJR from the Noun Project</p>
</header>
<main id="main">
<div id="peekobot-container">
<div id="peekobot-inner">
<div id="peekobot"></div>
</div>
</div>
</main>
<script src="conversation.js"></script>
<script type="text/babel" data-presets="es2015,es2016,es2017" src="peekobot.js"></script>
</body>
</html>