front- and back-end code for the RipCord App prototype

RipCord back-end

//declare global variables to be received from client-side
var name;
var number;
var safeWord;
var strategy;

var message = "<?xml version=\"1.0\" encoding=\"UTF-8\"?> \n<Response> \n<Say> \nThis is an automated message intended for [insert name], from the United States Postal Service.  If you are not [insert name], please press one or hang up now.There is a delivery marked \"valuable and fragile\" waiting for you at your residential address.You are receiving this message as there is currently nobody at the specified delivery address.The USPS agent has been instructed to wait for approximately forty-five minutes. If you are not there to receive the package in person, USPS cannot guarantee the safe delivery of your package. Good bye. \n</Say> \n</Response>";

//create Servi Client to handle server-side
var servi = require('servi');
var app = new servi(true);
port(3008);
serveFiles("public");

//create new Twilio Client
var client = require('twilio')('ACfc68f8af1ef20f16fa26ed050a59e011', 'ea5bdf70ea367890e6efd2ba494ad627');

//display the homepage
route('/', function(){
	request.serveFile('index.html');
});

//this route captures the user-input data, which is sent from the client-side
route('/userInput', function (request){
	var dateData = request.fields.userData;
    var details = dateData.split(',');
    name = details[0];
    number = details[1];
    safeWord = details[2];
    strategy = details[3];
    
    console.log("Date's Name: " + name);
    console.log("Date's number: " + number);
    console.log("Your safe word: " + safeWord);
    console.log("Your strategy: " + strategy);
});

//this route creates the custom xml doc for the Twilio voice to read
route('/createMessage', function (response) {
	var customMessage = message.replace("[insert name]", name);
	response.header('text/xml');
	response.respond(customMessage);
});

//this route makes the call to the user's date
route('/callDate', dial);

//function to handle placing the call through Twilio
function dial(){
	client.makeCall({
	to: number, //the number entered by the user on the client-side
	from: '+12012126779', // Twilio number
	url: 'http://104.131.167.46:3001/createMessage' //points to the route that generates the xml

	}, function(err, responseData) {

	  if (err) console.log(err);
	  //executed when the call has been initiated.
	  console.log(responseData.from);
	  console.log(number);
	});
};

start();

RipCord CSS

/*This CSS is optimized for an iPhone4 display */

html{
	background-color: #00CC99;
	color: white;
}

body{
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 100;
	line-height: 20px;
	text-align: center;
}

div .section {
	padding:10px;
}

h1 {
	font-family: 'Pacifico', cursive;
	font-size: 2em;
	text-shadow:0px 3px 0px rgba(0,0,0,0.5);
}

h2 {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 100;
	line-height: 20px;
	text-align: center;
}

select {
	font-family: font-family: 'Pacifico', cursive;
	font-size: 1.2em;
}

#welcome {
	display: inline-block;
	color: white;
	position: absolute;
	left: 20%;
	top: 20%;
	height: 60%;
	width: 60%;
}

#wrapper {
	display: inline-block;
	width:70%;
	padding-top: 5px;
	padding-bottom: 5px;
}

#wrapper #begin{
	position: relative;
	bottom: -15px;
	
}

#listening {
	display: none;
	color: white;
	position: absolute;
	left: 20%;
	top: 20%;
	height: 60%;
	width: 60%;

}

.btn {
	  padding:5px;
	  font-size: 1.5em;
	  height: 40px;
	 /* line-height: 50px; */
	  background-color:white;
	  color:#00CC99;
	  text-decoration: none;
	  text-transform: uppercase;
	  letter-spacing: 1px;
	  background: white;
	  
	  border-radius: 10px;
	  -webkit-border-radius: 5px;
	  text-shadow:0px 1px 0px rgba(0,0,0,0.5);
	  -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
	  box-shadow:0px 2px 2px rgba(0,0,0,0.2);
}

.button input {
	width: 80px;
	background-color:white;

	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius:10px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-right: 1px solid  rgba(0,0,0,0.15);
}

RipCord front-end

// Using chrome speech API and Twillio

$(document).ready(function(){

  $('#wrapper').hide(); //hide the main screen
  $('#listening').hide(); //hide the active listening screen

  //variables to store data input by the user
  var dateName;
  var dateNo;
  var safeWord;
  var exitStrat;

  //variable to act as counter for speech recognition results
  var i = 0;

  //a new speech recognition object
  var recognition = new webkitSpeechRecognition();

  //recogintion is continuous
  recognition.continuous = true;
    
  recognition.onresult = function(event) { 
    console.log(event.results)

    var res = event.results[i][0].transcript;
    console.log(res);

    //if the safeword is present in the body of text captured by the speech recognition object
    //send a request to the server's /callDate route that initiates the Twilio call
    if (res.indexOf(safeWord) !== -1){
      $.post('/callDate');
      console.log("safeword identified.  Making Call");
    };
    i++;
  };

  //when the user clicks on the welcome screen, the welcome screen is hidden and the main
  //page is displayed
  $('html').click(function(){
    $('#welcome').hide(10);
    $('#wrapper').css({'display':'inline-block'});
  });

  //
  $('#begin').click(function(){
      recognition.start(); //start speech recognition
      console.log("listening...");

      var thisInfo = ''; //create an empty string that user input can be added to
      var userData; //variable for storing the user's data for the httpPost

      //assign the values input by the user to the global variables
      dateName = $('#name').val();
      dateNo = $('#telNo').val();
      safeWord = $('#word').val();
      exitStrat = $('#strategy').val();

    //concatenate the data into a string to send to the server
      thisInfo += dateName;
      thisInfo += ',';
      thisInfo += dateNo;
      thisInfo += ',';
      thisInfo += safeWord;
      thisInfo += ',';
      thisInfo += exitStrat;

      //hide the main page when the 'Start' button is pressed
      $('#wrapper').hide(10);

      //display the page that tells the user the app is listening
      $('#listening').css({'display':'block'});

    //send the data input by the user to the server by calling the /userInput route
      $.post('/userInput', {userData: thisInfo}, function(){
        console.log("success sending user input data");
      });

  }); // end of click
     
}); //end of on-ready

RipCord HTML

<!doctype html>
<head>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="/script.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="welcome">
	<p>Welcome to</p>
	<h1>RipCord</h1>
</div>

<div id="instructions">
	<p><h1>RipCord</h1> was designed to take the stress out of escaping those awkward social situations.</p>
	<br>
	<p>Ever been on a first date wishing "something" important would come up, giving you an excuse to leave? Of course you have! Perhaps you've even made a plan with a friend to call you midway through, just in case, but were worried your date might see through this overused charade.  Well, fear not, that's what RipCord's for!</p>
	<br>
	<p> Enter your date's name, their number, and choose a safe word from the list provided, along with your desired extraction plan, and we'll take care of the rest. Just make sure the app is open, and your phone is within earshot of your conversation.</p>

	<p><h1>RipCord</h1> When you reach the point where the situation is no longer bearable, work your safeword into the conversation.  Upon hearing it, we'll place a call to your date's phone and give <i>them</i> a reason to end the date early, leaving you free to move on guilt-free! <p>
</div>


<div id ="wrapper">
<h1 id = "title">RipCord</h>
<h2> "Work your safe-word into the conversation if you feel the need to bail out of an awkward encounter!"</h2>
<form>
	<div class="section">
	Your Date's Name 
	<br>
		<input type="text" id="name" placeholder="eg. John Smith">
	<br>
	</div>

	<div class="section">
	Your Date's number
	<br>
		+1<input type="text" id = "telNo" placeholder="5556667777">
	<br>
	</div>
	
	<div class="section">
	Pick a safe-word
	<br>
	<select id="word">
		<option>elephant</option>
		<option>catfish</option>
		<option>crocodile</option>
	</select>
	<br>
	</div>

	<div class="section">
	Pick an exit strategy
	<br>
	<select id="strategy">
		<option>Recruited by the CIA</option>
		<option>USPS urgent delivery</option>
		<option>IRS refund</option>
	</select>
	<br>
	</div>

	<input type="button" class="btn" id="begin" value="start">

</form>
</div>

<div id = "listening">
	<img src="ear.png">
	<br>
	<p><h1>Ripcord</h1> has your back.<p>
	<p>Just work your safeword into conversation and we'll do the rest!</p>
	</div>

</div>

</body>
</html>