index.html
<!DOCTYPE html>
<html ng-app="jeevesApp">
<head>
<title>Jeeves</title>
<!--Meta data for mobile devices. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Implement Bootstrap and AngularJS. -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//rawgithub.com/mgcrea/bootstrap-additions/master/dist/bootstrap-additions.min.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Add AngularJS modules -->
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-touch.min.js"></script>
<!-- base64 decoding algorithm -->
<script src="js/base64.js"></script>
<!-- Gmail Script -->
<script src="https://apis.google.com/js/client.js"></script>
<!-- model-vision controller -->
<script src="js/mvc.js"></script>
<!-- Phonegap integration -->
<script type="text/javascript" src="cordova.js"></script>
</head>
<body id="body-controller-element" ng-controller="jeevesCtrl">
<!-- Splash Screen -->
<div class="splash-screen" id="splashScreen">
<img class="splash" src="splash.png" alt="logo" height="200" width="200">
<div> <!-- Have to manually add <br> -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<h1 class="text-center" id='splash-loading'><font color="white">Loading ... </font></h1>
</div>
<!-- The main container of the app -->
<div class="container">
<!-- The header -->
<div class="page-header">
<h1 class="text-center">Jeeves <small><span id="version">v0.2.3</span></small></h1>
</div>
<!-- The top two buttons -->
<div id="top-buttons" class="view" >
<button ng-click="changeView('favorites')" class="btn btn-primary pull-left" style="width: 150px;" disabled>
<span class="glyphicon glyphicon-star"></span>
</button>
<button ng-click="changeView('menu')" class="btn btn-primary pull-right" style="width: 150px;">
<span class="glyphicon glyphicon-home"></span>
</button>
<br>
</div>
<!-- The menu modal -->
<div id="menu" ng-controller="jeevesCtrl" class = "view" ng-hide="jeeves.view != 'menu'" ng-cloak>
<script type="text/ng-template" id="menuContent.html">
<div ng-controller="jeevesCtrl">
<h2 class="text-center" ><span id="menu-title" ng-click="changeView('back')">Menu</h2>
<button ng-click="changeView('weather')" class="btn btn-primary btn-block">Weather</button>
<button ng-click="changeView('news')" class="btn btn-primary btn-block">News </button>
<button ng-click="changeView('email')" class="btn btn-primary btn-block">Email</button>
<hr>
<button ng-click="changeView('settings')" class="btn btn-default btn-block">Settings</button>
<button ng-click="changeView('favorites')" class="btn btn-default btn-block" disabled>Favorites - Work in progess!</button>
<button ng-click="changeView('contact')" class="btn btn-default btn-block">Contact</button>
<button ng-click="changeView('about')" class="btn btn-default btn-block">About</button>
</div>
</script>
</div>
<!-- The news page -->
<div id="rssNews" class="view" ng-hide="jeeves.view != 'news'" ng-cloak>
<div>
<h2 class="text-center">News</h2>
<img src="images/guardian.png" alt="Powered by The Guardian">
</div>
<div align = "center">
<button id="pause" class="btn btn-info btn-block" ng-click="pauseAndPlay()"><span id="news1stitle">Pause/Play</span></button>
<div style="height:300px; overflow: scroll;">
<accordion close-others="true">
<accordion-group heading="News" is-open="status.isNewsOpen">
<div ng-repeat="entry in jeeves.displayNews.news">
<button class="btn btn-warning btn-block" ng-click="collapsed = !collapsed; setInnerHTML(entry)">
<span>{{entry.webTitle}}</span>
</button>
<div collapse="!collapsed" display="inherit">
<div class="well well-lg" id="{{entry.webTitle}}"></div>
</div>
</div>
<div class="btn-group btn-block">
<button id="newsBack" tyep="button" style="width:50%" class="btn btn-success" ng-click="differentFive('news',false)">Go Back</button>
<button type="button" style="width:50%" class="btn btn-success" ng-click="differentFive('news',true)">More </button>
</div>
</accordion-group>
<accordion-group heading="World" is-open="status.isWorldOpen">
<div ng-repeat="entry in jeeves.displayNews.world">
<button class="btn btn-warning btn-block" ng-click="collapsed = !collapsed; setInnerHTML(entry)">
<span>{{entry.webTitle}}</span>
</button>
<div collapse="!collapsed">
<div class="well well-lg" id="{{entry.webTitle}}"></div>
</div>
</div>
<div class="btn-group btn-block">
<button id="worldBack" tyep="button" style="width:50%" class="btn btn-success" ng-click="differentFive('world',false)">Go Back</button>
<button type="button" style="width:50%" class="btn btn-success" ng-click="differentFive('world',true)">More </button>
</div>
</accordion-group>
<accordion-group heading="Sports" is-open="status.isSportsOpen">
<div ng-repeat="entry in jeeves.displayNews.sports" >
<button class="btn btn-warning btn-block" ng-click="collapsed = !collapsed; setInnerHTML(entry)">
<span>{{entry.webTitle}}</span>
</button>
<div collapse="!collapsed">
<div class="well well-lg" id="{{entry.webTitle}}"></div>
</div>
</div>
<div class="btn-group btn-block">
<button id="sportsBack" tyep="button" style="width:50%" class="btn btn-success" ng-click="differentFive('sports',false)">Go Back</button>
<button type="button" style="width:50%" class="btn btn-success" ng-click="differentFive('sports',true)">More </button>
</div>
</accordion-group>
<accordion-group heading="Business" is-open="status.isBusinessOpen">
<div ng-repeat="entry in jeeves.displayNews.business">
<button class="btn btn-warning btn-block" ng-click="collapsed = !collapsed; setInnerHTML(entry)">
<span>{{entry.webTitle}}</span>
</button>
<div collapse="!collapsed">
<div class="well well-lg" id="{{entry.webTitle}}"></div>
</div>
</div>
<div class="btn-group btn-block">
<button id="businessBack" tyep="button" style="width:50%" class="btn btn-success" ng-click="differentFive('business',false)">Go Back</button>
<button type="button" style="width:50%" class="btn btn-success" ng-click="differentFive('business',true)">More </button>
</div>
</accordion-group>
<accordion-group heading="Technology" is-open="status.isTechOpen">
<div ng-repeat="entry in jeeves.displayNews.tech">
<button class="btn btn-warning btn-block" ng-click="collapsed = !collapsed; setInnerHTML(entry)">
<span>{{entry.webTitle}}</span>
</button>
<div collapse="!collapsed">
<div class="well well-lg" id="{{entry.webTitle}}"></div>
</div>
</div>
<div class="btn-group btn-block">
<button id="techBack" tyep="button" style="width:50%" class="btn btn-success" ng-click="differentFive('tech',false)">Go Back</button>
<button type="button" style="width:50%" class="btn btn-success" ng-click="differentFive('tech',true)">More </button>
</div>
</accordion-group>
<accordion-group heading="Science" is-open="status.isScienceOpen">
<div ng-repeat="entry in jeeves.displayNews.science">
<button class="btn btn-warning btn-block" ng-click="collapsed = !collapsed; setInnerHTML(entry)">
<span>{{entry.webTitle}}</span>
</button>
<div collapse="!collapsed">
<div class="well well-lg" id="{{entry.webTitle}}"></div>
</div>
</div>
<div class="btn-group btn-block">
<button id="scienceBack" tyep="button" style="width:50%" class="btn btn-success" ng-click="differentFive('science',false)">Go Back</button>
<button type="button" style="width:50%" class="btn btn-success" ng-click="differentFive('science',true)">More </button>
</div>
</accordion-group>
</accordion>
</div>
</div>
<!-- Help for news section -->
<script type="text/ng-template" id="news-help.html">
<div ng-controller="jeevesCtrl">
<div class="text-center"><h3>News Commands</h3></div>
<hr>
<div>
<b id="help-text" >You can say:</b>
<ul>
<li>Read</li>
<li>Resume (or continue)</li>
<li>Read **section name**</li>
<li>Next (for next article title)</li>
<li>Previous</li>
<li>More articles</li>
<li>Previous articles</li>
</ul>
<i>Caution! Saying 'go back' to get previous articles will send you to the previous page instead.</i>
</div>
</div>
</script>
</div>
<!-- Email page -->
<div id="email" class="view" ng-hide="jeeves.view != 'email'" ng-cloak>
<div>
<h2 class="text-center">Email</h2>
<div>
<div id="email-announcement"><i>Hello! I am ready to read your email.</i></div>
</div>
<div style="height:340px; overflow: auto;">
<span style="padding-left:10px" class="btn-group">
<button id='refresh-button' ng-click="checkEmail()" class="btn btn-info btn-sm">Load Emails</button>
</span>
<div style="padding-top: 10px">
<div id="message-list" style="margin-left: 10px"></div>
<accordion close-others="true">
<accordion-group ng-repeat="email in jeeves.emailList" heading="{{email.subject}}">
<div class="well well-lg" id="{{email.subject}}">
<b>From: {{email.from}}</b><br><br>
{{email.content}}
</div>
</accordion-group>
</accordion>
</div>
</div>
</div>
<!-- Help for email view -->
<script type="text/ng-template" id="email-help.html">
<div ng-controller="jeevesCtrl">
<div class="text-center"><h3>Email Commands</h3></div>
<hr>
<div>
<b id="help-text" >You can say:</b>
<ul>
<li>Read me emails</li>
<li>Refresh</li>
</ul>
</div>
</div>
</script>
</div>
<!-- The weather view -->
<div id="weather" class="view" ng-hide="jeeves.view != 'weather'" ng-cloak>
<div style="height:440px;">
<br>
<h2 class="text-center">Weather in {{jeeves.city}}</h2>
<div align="center">
<span>
<div><img ng-src="{{ imgurl() }}"></div>
</span>
<span>
<h3>Current: {{ jeeves.weather.temp.current | number: 0}}° <span class="degree-letter">F</span></h3>
</span>
</div>
<br>
<div align="center">
<div class="input-group" style="width: 210px">
<input type="text" class="form-control" placeholder="City, State" id="weather_city" onkeydown="if (event.keyCode == 13) document.getElementById('changeCity').click()">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="changeWeather(false)" id="changeCity">Change</button>
</span>
</div>
<font size="1">Powered by OpenWeatherMap.org</font>
</div>
</div>
<!-- Help for weather page -->
<script type="text/ng-template" id="weather-help.html">
<div ng-controller="jeevesCtrl">
<div class="text-center"><h3>Weather Commands</h3></div>
<hr>
<div>
<b id="help-text" >You can say:</b>
<ul>
<li>Change city to **city name**</li>
<li>Change weather to **city name**</li>
<li>How’s the weather?</li>
</ul>
</div>
</div>
</script>
</div>
<!-- The about view -->
<div id="about" class="view" ng-hide="jeeves.view != 'about'" ng-cloak>
<h2 class="text-center">About</h2>
<div style="height:340px; overflow: auto;">
<div style="height:378px; overflow: auto;">
<p><font size = "3">Who has time to sit and read the morning paper anymore? Should you make coffee, or turn on the news? Brush your teeth, or catch up on your Facebook feed? Never worry about making these choices again. We present a new, hands-free voice-based application that will read the news, stock market updates, your Facebook or Twitter feed, the weather, and much more to you while you go about your morning schedule. We call it <b>Jeeves</b>. Getting dressed in the morning? Tell Jeeves to read you the latest headlines. Brushing your teeth? Have Jeeves read you traffic updates. Best of all, this app is simple, user-friendly, and <i>free</i>.</font><hr></p>
</div>
<!-- License information-->
<div id="mit-license">
Unless otherwise noted, all third-party API's are licensed under the MIT License as noted below:<br>
<br>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:<br>
<br>
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.<br>
<br>
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br><hr>
</div>
<!-- License information for weather -->
<div id="weather-license">
The <a href="http://www.openweathermap.org/api">OpenWeatherMap API</a> by <a href="http://www.openweathermap.org/about">Extreme Electronics Ltd.</a> is licensed under <a href="http://www.creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>
</div>
</div>
</div>
<!-- Setting view -->
<div id="settings" class="view" ng-hide="jeeves.view != 'settings' " ng-cloak>
<div>
<h2 class="text-center">Settings</h2>
<div style="height:337px; overflow: auto;">
<h3>Weather</h3>
<h4><i>Change Location</i></h4>
<div class="input-group" style="width: 210px">
<input type="text" class="form-control" placeholder="City, State" id="weather_city_setting" onkeydown="if (event.keyCode == 13) document.getElementById('changeCitySetting').click()">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="changeWeather(true)" id="changeCitySetting">Change</button>
</span>
</div>
<p><font size="1">Powered by OpenWeatherMap.org</font></p>
<hr>
<h3>Gmail Authorize</h3>
<div>
<button id="settings-email-login" class="btn btn-primary" ng-click="oauthlogin()"><i>Log In To Gmail</i></button>
</div>
</div>
<hr>
</div>
</div>
<!-- Contact View -->
<div id="contact" class="view" ng-hide="jeeves.view != 'contact'" ng-cloak>
<div>
<h2 class="text-center">Contact Us</h2>
<div style="height:378px; overflow: auto;">
<p><font size="4"> Co-Founders: </font></p>
<p><img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10314024_4131147334668_1448501559062959054_n.jpg?oh=a3e89dcd1c71d0daac430ec2b2cf9a54&oe=5453FA50&__gda__=1415069884_c2b2d9c31111b5341d5bf53abd5aaf7d" alt="Ari Kalfus" width="60" height="80"><b><font size = "4"> Ari Kalfus</font></b>: akalfus@brandeis.edu</p>
<p><img src="https://scontent-a.xx.fbcdn.net/hphotos-xaf1/t1.0-9/1604413_10202736434833868_462765446_n.jpg" alt="Burak Sezer" width="60" height="80"><b><font size = "4"> Burak Sezer</font></b>: bsezer@brandeis.edu</p>
<p><img src="https://scontent-b.xx.fbcdn.net/hphotos-xpf1/t1.0-9/1607065_10151908263002308_212651559_n.jpg" alt="Sam Raphael" width="60" height="60"><b><font size = "4"> Sam Raphael</font></b>: sraph@brandeis.edu</p>
<p><img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xfp1/t1.0-9/10489684_670812976326270_6814612110053956320_n.jpg" alt="Wesley Wei Qian" width="60" height="60"><b><font size = "4"> Wesely Chin</font></b>: weschin@brandeis.edu</p>
</div>
</div>
</div>
<!-- Favorite view, but still in progress -->
<div id="favorites" class="view" ng-hide="jeeves.view != 'favorites'" ng-cloak>
<div>
<h2>Favorites</h2>
Favorites will go here<br>
</div>
</div>
<!-- Help View -->
<div id="help" class = "view" ng-hide="jeeves.view != 'help'" ng-cloak>
<div>
<h2 class="text-center">Help</h2>
<div style="height:378px; overflow: auto;">
<accordion close-others="true">
<accordion-group heading="Global" is-open="status.isGlobalHelpOpen">
<h4><b>General Commands: (you can say these on any page)</b></h4>
<dl>
<dt>How is (how's) the weather</dt>
<dt>What's the weather</dt>
<dt>What's the weather like (today)</dt>
<dt>Go to or open</dt>
<dd> News</dd>
<dd> Weather</dd>
<dd> Email</dd>
<dd> About</dd>
<dd> Contact</dd>
<dd> Help</dd>
<dd> Settings</dd>
<dt>Read</dt>
<dd> Email</dd>
<dd> News</dd>
</dl>
</accordion-group>
<accordion-group heading="News">
<dl>
<dt>
Read
<dd>
Article
</dd>
<dd>
(section)
</dd>
</dt>
</dl>
</accordion-group>
<accordion-group heading="Weather">
<dl>
<dt>command</dt>
<dd>detail</dd>
</dl>
</accordion-group>
<accordion-group heading="Email">
<dl>
<dt>Read</dt>
<dd> Reads your emails</dd>
<dt>Refresh</dt>
<dd> refreshes inbox</dd>
</dl>
</accordion-group>
<accordion-group heading="Settings">
<dl>
<dt>This section currently has no voice commands</dt>
<dd></dd>
</dl>
</accordion-group>
<!-- <accordion-group heading=""></accordion-group> -->
</accordion>
</div>
</div>
</div>
<!-- The bottom two buttons -->
<div id="bottom-buttons" class="view" >
<br>
<button ng-click="redirect()" class="btn btn-primary pull-left" style="width: 150px;">Speech </button>
<!-- Help button change to "GO back button for now to debug" -->
<button ng-click="changeView('help')" class="btn btn-primary pull-right" style="width: 150px;">Help </button>
<br>
<br>
</div>
</div>
<!-- HTML starting function -->
<script type="text/javascript" src="js/startFunction.js"></script>
</body>
</html>