<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://rawgit.com/mishguruorg/angular-timezone-selector/master/dist/angular-timezone-selector.css">
  <link href='style.css' rel='stylesheet' type='text/css'>
</head>

<body ng-app="demoApp">
  
  <h1 class="header">Angular Timezone Selector Demo</h1>
  <h2 class="subheader">
    <a class="github-link" href="https://github.com/mishguruorg/angular-timezone-selector">
      View Module on GitHub <span class="mega-octicon octicon-mark-github"></span>
    </a>
  </h2>
  
  <div ng-controller="AppCtrl" class="demo">
    <h3>Selected timezone: <b>{{timezone}}</b></h3>
    <timezone-selector ng-model="timezone"></timezone-selector>
  </div>
  
  <!-- JS Dependancies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.0/moment-timezone-with-data.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.6/jstz.min.js"></script>
  <script src="https://rawgit.com/mishguruorg/angular-timezone-selector/master/dist/angular-timezone-selector.js"></script>
  
  <!-- Basic example app -->
  <script>
    var app = angular.module('demoApp', ['angular-timezone-selector'])

    app.controller('AppCtrl', ['$scope', function($scope) {
      $scope.timezone = ''
    }])
  </script>
</body>

</html>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://rawgit.com/github/octicons/master/octicons/octicons.css);

body {
  font-family: "Open Sans";
}
    
.header {
  text-align: center;
  margin-bottom: 5px;
}

.demo {
  margin: 10%;
}

.subheader {
  text-align: center;
  font-size: 16pt;
  margin-top: 0px;
}

.github-link {
  text-decoration: none;
}