AnythingBot/index.html at master · CodHeK/AnythingBot · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<title>AnythingBot</title>
	  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	  <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
	  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
	   <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
	  <style type="text/css">
	  	.jumbotron {
	  		width: 90%;
	  	}
	  	body {
	  		background-color: black;
	  		font-family: 'Source Sans Pro', sans-serif;
	  		letter-spacing: 1.2px;
	  	}
	  	#results li {

			border-bottom: 1px #ccc dotted;
			list-style: none;
			overflow: auto;
		}
		.list-left {
			float: left;
			width: 100%;

		}
		.list-left img {
			width: 100%;

			border:solid #ccc 1px;
		}
		.list-right {
			float: right;
			width: 100%;

		}
		#owner {
			color: #dd2826;
		}
		.cTitle {
			color:#dd2826;
			font-size: 12px;
		}
		#results p {
			font-size: 15px;
		}
		#results small {
			font-size: 12px;
		}
	  </style>
</head>
<body>
<div class="container">
	<div class="row">
	<div class="col-md-4 col-sm-12 col-xs-12" style="margin-top: 2%;">
	<div class="form-group" style="margin-left: 10%;">
		<form method="POST" id="form" style="position: fixed;">
			<div class="row">
				<div class="col-md-8 col-sm-12 col-xs-12">
					<input type="text"  class="form-control" name="message" placeholder="Type a message..." id="msg">
				</div>
				<div class="col-md-2 col-sm-12 col-xs-12">
					<button class="btn btn-default" id="buttons">Send</button><br>
				</div>
				<div class="col-md-2 col-sm-12 col-xs-12">
					<i class="fa fa-microphone" aria-hidden="true" onclick="startDictation()" id="mic" style="color: white;margin-left: 35%;font-size: 20px;margin-top: 25%;"></i>
				</div>
			</div>
		</form>
		<form method="POST" id="form1" style="position: fixed;">
			<div class="row">
				<div class="col-md-8 col-sm-12 col-xs-12">
					<input type="text"  class="form-control" name="message" placeholder="Type a message..." id="msg1">
				</div>
				<div class="col-md-2 col-sm-12 col-xs-12">
					<button class="btn btn-default" id="buttons1">Send</button><br>
				</div>
				<div class="col-md-2 col-sm-12 col-xs-12">
					<i class="fa fa-microphone" aria-hidden="true" onclick="startDictation1()" id="mic1" style="color: white;margin-left: 35%;font-size: 20px;margin-top: 25%;"></i>
				</div>
			</div>
		</form>
		<div id="listen" style="text-align: center;position: fixed;">
			<img src="puff.svg" style="margin-left: 10%;margin-top: 50%;width: 200px;height: 200px;" id="puff" /><br>
			<h4 style="color: white;margin-left: 15%;">LISTENING ...</h4>
		</div>
		<div id="inst" style="text-align: left;position: fixed;margin-top: 5%;font-size: 17px;margin-right: 10%;text-transform: uppercase;line-height:30px;">
			<ul style="color: white;">
				<li>SAY "hi" or "hey" to begin !</li>
				<p><u>EXAMPLE COMMANDS:</u></p>
				<li>what is 6 (any operator) 7</li>
				<li>how is the weather in mumbai</li>
				<li>todays date</li>
				<li>show me videos of kapil sharma</li>
				<li>search for this song <br>Walking the wire by imagine <br>dragons</li>
				<li>who is the president of India</li>
				<li>Get me the directions from <br>mumbai to pune</li>
				<li>my current location <br>(only if https://)</li>
				<li>play game</li>
			</ul>
		</div>
	</div>
	</div>
	<div class="col-md-8 col-sm-12 col-xs-12">
	<div id="chat" style="overflow: auto;height: 90%;margin-top: 2%;">
		 <ul style="list-style: none;" id="list">
		 	<li>
		 		<div class="jumbotron">
		 			<h3>Wake up your bot by saying, <b>Hey</b>! or just, <b>Hi</b>!</h3>
		 		</div>
		 	</li>
		 </ul>
		 <img src="puff.svg" style="margin-left: 45%;" id="puf" />
	</div>
	</div>
</div>


<script type="text/javascript" src="bot.js"></script>
<script type="text/javascript" src="voice.js"></script>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>