vshank77/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Sample Conference</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="twilio.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="https://static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>

    <script type="text/javascript">

    function retrieveToken(app_id, password) {
      $.ajax({

        url: "https://sender.blockspring.com/api_v2/blocks/82c3cb17747dcc677ab5816969962f91?api_key=abcdefghijkl123456789",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify({
          account_sid: "ACe33c73c7679e962a6f9c27436a7e7e52", auth_token: password, application_sid: app_id
        }),
        crossDomain: true

      }).done(function(response) {
        setupDevice(response.token);

      }).fail(function(jqXHR, textStatus){
        $('#status').text(textStatus);
      });
    }

    function setupDevice(app_token) {
      try {
        $('#status').text('Setup ' + app_token);
        Twilio.Device.setup(String(app_token), {'debug':true});

      } catch (err) {
        $('#status').text('exception: ' + err.message);
      }
    }

    function beginConference() {
      $('#begin').attr('disabled','disabled');
      $('#join').attr('disabled','disabled');
      $('#hang').removeAttr('disabled');

      app_id = "APabe7650f654fc34655fc81ae71caa3ff";
      password = $("#password").val();
      retrieveToken(app_id, password);
    }

    function joinConference() {
      $('#begin').attr('disabled','disabled');
      $('#join').attr('disabled','disabled');
      $('#hang').removeAttr('disabled');

      app_id = "APabe7650f654fc34655fc81ae71caa3ff";
      password = $("#password").val();
      retrieveToken(app_id, password);
    }

    function hangup() {
      $('#hang').attr('disabled','disabled');
      $('#begin').removeAttr('disabled');
      $('#join').removeAttr('disabled');

      Twilio.Device.disconnectAll();
    }

    $(document).ready(function() {
      $('#hang').attr('disabled','disabled');

      Twilio.Device.ready(function (device) {
        $('#status').text('Ready to join conference');
        Twilio.Device.connect();
      });

      Twilio.Device.offline(function (device) {
        $('#status').text('Connection went offline');
      });

      Twilio.Device.error(function (error) {
        $('#status').text("tw-error: " + error);
      });

      Twilio.Device.connect(function (conn) {
        $('#status').text("Successfully joined conference");
      });

      Twilio.Device.disconnect(function (conn) {
        $('#status').text("Disconnected");
      });
    });

    </script>
  </head>

  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-offset-5 col-md-3">
                <div class="form-login">
                  <h4>Sample Conference</h4>
                  <input type="text" id="password" class="form-control input-sm chat-input" placeholder="Enter the auth token" />
                  </br>
                  <div class="wrapper">
                    <span class="group-btn">
                        <button id="begin" onclick="beginConference();" class="btn btn-primary btn-md">Start</button>
                        <button id="join" onclick="joinConference();" class="btn btn-primary btn-md">Join</button>
                        <button id="hang" onclick="hangup();" class="btn btn-primary btn-md">Hangup</button>
                    </span>
                  </div>
                  </br>
                  <div id="status" class="wrapper">Connection Not started</div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

## twilio.css
@import url(http://fonts.googleapis.com/css?family=Roboto:400);
body {
  background-color:#fff;
  -webkit-font-smoothing: antialiased;
  font: normal 14px Roboto,arial,sans-serif;
}

.container {
    padding: 25px;
}

.form-login {
    background-color: #EDEDED;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
    border-color:#d2d2d2;
    border-width: 5px;
    box-shadow:0 1px 0 #cfcfcf;
}

h4 {
 border:0 solid #fff;
 border-bottom-width:1px;
 padding-bottom:10px;
 text-align: center;
}

.form-control {
    border-radius: 10px;
}

.wrapper {
    text-align: center;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sample Conference</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="twilio.css" />

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<script src="https://static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>

	<script type="text/javascript">

	function retrieveToken(app_id, password) {
	$.ajax({

	url: "https://sender.blockspring.com/api_v2/blocks/82c3cb17747dcc677ab5816969962f91?api_key=abcdefghijkl123456789",
	type: "POST",
	contentType: "application/json",
	data: JSON.stringify({
	account_sid: "ACe33c73c7679e962a6f9c27436a7e7e52", auth_token: password, application_sid: app_id
	}),
	crossDomain: true

	}).done(function(response) {
	setupDevice(response.token);

	}).fail(function(jqXHR, textStatus){
	$('#status').text(textStatus);
	});
	}

	function setupDevice(app_token) {
	try {
	$('#status').text('Setup ' + app_token);
	Twilio.Device.setup(String(app_token), {'debug':true});

	} catch (err) {
	$('#status').text('exception: ' + err.message);
	}
	}

	function beginConference() {
	$('#begin').attr('disabled','disabled');
	$('#join').attr('disabled','disabled');
	$('#hang').removeAttr('disabled');

	app_id = "APabe7650f654fc34655fc81ae71caa3ff";
	password = $("#password").val();
	retrieveToken(app_id, password);
	}

	function joinConference() {
	$('#begin').attr('disabled','disabled');
	$('#join').attr('disabled','disabled');
	$('#hang').removeAttr('disabled');

	app_id = "APabe7650f654fc34655fc81ae71caa3ff";
	password = $("#password").val();
	retrieveToken(app_id, password);
	}

	function hangup() {
	$('#hang').attr('disabled','disabled');
	$('#begin').removeAttr('disabled');
	$('#join').removeAttr('disabled');

	Twilio.Device.disconnectAll();
	}

	$(document).ready(function() {
	$('#hang').attr('disabled','disabled');

	Twilio.Device.ready(function (device) {
	$('#status').text('Ready to join conference');
	Twilio.Device.connect();
	});

	Twilio.Device.offline(function (device) {
	$('#status').text('Connection went offline');
	});

	Twilio.Device.error(function (error) {
	$('#status').text("tw-error: " + error);
	});

	Twilio.Device.connect(function (conn) {
	$('#status').text("Successfully joined conference");
	});

	Twilio.Device.disconnect(function (conn) {
	$('#status').text("Disconnected");
	});
	});

	</script>
	</head>

	<body>
	<div class="container">
	<div class="row">
	<div class="col-md-offset-5 col-md-3">
	<div class="form-login">
	<h4>Sample Conference</h4>
	<input type="text" id="password" class="form-control input-sm chat-input" placeholder="Enter the auth token" />
	</br>
	<div class="wrapper">
	<span class="group-btn">
	<button id="begin" onclick="beginConference();" class="btn btn-primary btn-md">Start</button>
	<button id="join" onclick="joinConference();" class="btn btn-primary btn-md">Join</button>
	<button id="hang" onclick="hangup();" class="btn btn-primary btn-md">Hangup</button>
	</span>
	</div>
	</br>
	<div id="status" class="wrapper">Connection Not started</div>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	@import url(http://fonts.googleapis.com/css?family=Roboto:400);
	body {
	background-color:#fff;
	-webkit-font-smoothing: antialiased;
	font: normal 14px Roboto,arial,sans-serif;
	}

	.container {
	padding: 25px;
	}

	.form-login {
	background-color: #EDEDED;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 15px;
	border-color:#d2d2d2;
	border-width: 5px;
	box-shadow:0 1px 0 #cfcfcf;
	}

	h4 {
	border:0 solid #fff;
	border-bottom-width:1px;
	padding-bottom:10px;
	text-align: center;
	}

	.form-control {
	border-radius: 10px;
	}

	.wrapper {
	text-align: center;
	}