-
Notifications
You must be signed in to change notification settings - Fork 16
/
page.html
105 lines (103 loc) · 2.58 KB
/
page.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
<!DOCTYPE html>
<html>
<head>
<title>Astrobot: browse the web with pure SMS</title>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script>
$(document).ready(function() {
$("#form").submit(function() {
$("<li></li>").text($("#form input[name=query]").val()).addClass("sent").appendTo("#messages");
$.ajax({
url: '/interact',
method: 'POST',
data: $('#form').serialize(),
success: function(result) {
JSON.parse(result).messages.forEach(function(msg) {
console.log(msg)
$("<li></li>").text(msg).appendTo("#messages");
});
}
})
$("#form input[name=query]").val("");
return false;
})
})
</script>
<style>
body {
margin: 20px;
font-family: sans-serif;
max-width: 600px;
width: 90%;
margin: auto;
text-align: center;
padding-bottom: 2em;
}
#messages {
list-style-type: none;
padding: 0px;
}
#messages li {
white-space: pre-wrap;
padding: 15px;
border-radius: 10px;
color: white;
background-color: #1882ff;
margin: 20px;
text-align: left;
}
#messages li.sent {
color: black;
background-color: #dbd9e1;
text-align: right;
}
#form {
display: inline-block;
}
#commands {
padding: 0;
text-align: center;
}
#commands li {
display: inline-block;
padding: 10px;
list-style-type: none;
max-width: 40%
}
#commands li div:before {
content: "“";
font-size: large;
}
#commands li div:after {
content: "”";
font-size: large
}
#commands li span {
font-size: small;
display: block;
font-style: italic;
}
</style>
</head>
<body>
<a href='http://github.com/nate-parrott/astro-bot' alt='Fork me on GitHub'><img style='display: block; position: absolute; top: 0px; right: 0px; width: 149px' src='http://aral.github.io/fork-me-on-github-retina-ribbons/right-turquoise@2x.png'/></a>
<h1>astro-bot</h1>
<p>Browse the web over sms. Text <strong>646-576-7688</strong>.</p>
<h4>Things you can say...</h4>
<ul id='commands'>
<li><div>go to hackerschool.com</div></li>
<li><div>2 more</div> <span>sends 2 more messages of content</span></li>
<li><div>4</div> <span>clicks the link named '4'</span></li>
<li><div>search the web for george harrison</div></li>
<li><div>where am i?</div> <span>shows your current URL</span></li>
<li><div>table of contents</div> <span>allows you to jump to specific headings on a page</span></li>
</ul>
<ol id='messages'>
</ol>
<form id='form'>
<input name='query' placeholder='Ask something...' />
<input type='submit' />
</form>
</body>
</html>