woodwardtw · October 19, 2015 15:59
diff --git a/postmeta.html b/postmeta.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8" />
 	<title>Embed All the Things</title>
 	<!-- CSS bar graph from http://geoffgraham.me/css-bar-chart-using-html5-progress/ -->
 	<meta name="generator" content="BBEdit 11.1" />
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.2.0-rc.3/angular-sanitize.js"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
    a {
    color:#ffffff;
    }
    
    .row {
    	margin:auto;
    }
    
    .bar {
    	background-color:lightblue;
    }
    
   body {
  font-family: "Helvetica Neue", arial, sans-serif;
  padding: 2em;
 }

 h1 {
  font-size: 2em;
  font-weight: 800;
 }

 h3 {
  font-size: 2em;
 }

 progress, progress[role] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-size: auto;
  height: 80px;
  width: 100%;
 }

 .skill-list {
  list-style: none;
  margin: 0;
  padding: 1em;
 }

 .skill {
  margin-bottom: 1em;
  position: relative;
 }
 .skill h3 {
  color: #fff;
  left: 1em;
  line-height: 1;
  position: absolute;
  top: 1em;
 }
 .skill ::-webkit-progress-value {
  -webkit-animation: bar-fill 2s;
  width: 0px;
 }

 .skill-1::-webkit-progress-value {
  background: #ff9e2c;
 }

 .skill-1::-moz-progress-bar {
  background: #ff9e2c;
 }

 .skill-2::-webkit-progress-value {
  background: #4ecdc4;
 }

 .skill-2::-moz-progress-bar {
  background: #4ecdc4;
 }

 .skill-3::-webkit-progress-value {
  background: #ff6b6b;
 }

 .skill-3::-moz-progress-bar {
  background: #ff6b6b;
 }

 @-webkit-keyframes bar-fill {
  0% {
    width: 0;
  }
 }
 @keyframes bar-fill {
  0% {
    width: 0;
  }
 }

    
    </style>

 </head>
 <body ng-app="myApp" ng-controller="SuperCtrl">

 <div class="container-fluid">
 <h3>Meta Post Lens</h3>
 	<div class="row">
 		<div class="col-md-4">
 			<form class="form-inline">
 			<input ng-model='search' name="sort" id="sort" type="text" placeholder="Filter by" autofocus>
 		</div>
  </form>
 	
 	</div>

 <div class="row">
 <ul class="skill-list">

 <div ng-repeat="entry in entries | filter: search | orderBy:'date' : 'reverse'"  class="col-md-10 col-md-offset-2">
      <div ng-bind-html="entry">
    	  <li class="skill">
   			 <h3><a href="{{ entry.link }}"><span ng-bind-html="entry.title.rendered">{{ entry.title.rendered }}</span></a> - {{ entry.URL_count[0] }} URLs & {{ entry.word_count[0] }} words</h3>
    			<progress class="skill-1" max="100" value="{{ entry.URL_count[0] }}">
    		 		 <strong> URLs: {{ entry.URL_count[0] }}%</strong>
    			</progress>
  </li>

      </div>
  </div>
 </ul>  
 </div>  

 </div> 


 <script>
 var app = angular.module('myApp', ['ngSanitize']);
 $gURL = "http://bionicteaching.com/wp-json/wp/v2/posts/?filter[posts_per_page]=30";
 app.controller('SuperCtrl', function($scope, $http) {
    $http.get($gURL)
    .success(function(response) {$scope.entries = response;});
 });
 </script>



 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Embed All the Things</title>
	<!-- CSS bar graph from http://geoffgraham.me/css-bar-chart-using-html5-progress/ -->
	<meta name="generator" content="BBEdit 11.1" />
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script type="text/javascript" src="https://code.angularjs.org/1.2.0-rc.3/angular-sanitize.js"></script>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<style>
	a {
	color:#ffffff;
	}

	.row {
	margin:auto;
	}

	.bar {
	background-color:lightblue;
	}

	body {
	font-family: "Helvetica Neue", arial, sans-serif;
	padding: 2em;
	}

	h1 {
	font-size: 2em;
	font-weight: 800;
	}

	h3 {
	font-size: 2em;
	}

	progress, progress[role] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background-size: auto;
	height: 80px;
	width: 100%;
	}

	.skill-list {
	list-style: none;
	margin: 0;
	padding: 1em;
	}

	.skill {
	margin-bottom: 1em;
	position: relative;
	}
	.skill h3 {
	color: #fff;
	left: 1em;
	line-height: 1;
	position: absolute;
	top: 1em;
	}
	.skill ::-webkit-progress-value {
	-webkit-animation: bar-fill 2s;
	width: 0px;
	}

	.skill-1::-webkit-progress-value {
	background: #ff9e2c;
	}

	.skill-1::-moz-progress-bar {
	background: #ff9e2c;
	}

	.skill-2::-webkit-progress-value {
	background: #4ecdc4;
	}

	.skill-2::-moz-progress-bar {
	background: #4ecdc4;
	}

	.skill-3::-webkit-progress-value {
	background: #ff6b6b;
	}

	.skill-3::-moz-progress-bar {
	background: #ff6b6b;
	}

	@-webkit-keyframes bar-fill {
	0% {
	width: 0;
	}
	}
	@keyframes bar-fill {
	0% {
	width: 0;
	}
	}


	</style>

	</head>
	<body ng-app="myApp" ng-controller="SuperCtrl">

	<div class="container-fluid">
	<h3>Meta Post Lens</h3>
	<div class="row">
	<div class="col-md-4">
	<form class="form-inline">
	<input ng-model='search' name="sort" id="sort" type="text" placeholder="Filter by" autofocus>
	</div>
	</form>

	</div>

	<div class="row">
	<ul class="skill-list">

	<div ng-repeat="entry in entries \| filter: search \| orderBy:'date' : 'reverse'" class="col-md-10 col-md-offset-2">
	<div ng-bind-html="entry">
	<li class="skill">
	<h3><a href="{{ entry.link }}"><span ng-bind-html="entry.title.rendered">{{ entry.title.rendered }}</span></a> - {{ entry.URL_count[0] }} URLs & {{ entry.word_count[0] }} words</h3>
	<progress class="skill-1" max="100" value="{{ entry.URL_count[0] }}">
	<strong> URLs: {{ entry.URL_count[0] }}%</strong>
	</progress>
	</li>

	</div>
	</div>
	</ul>
	</div>

	</div>


	<script>
	var app = angular.module('myApp', ['ngSanitize']);
	$gURL = "http://bionicteaching.com/wp-json/wp/v2/posts/?filter[posts_per_page]=30";
	app.controller('SuperCtrl', function($scope, $http) {
	$http.get($gURL)
	.success(function(response) {$scope.entries = response;});
	});
	</script>



	</body>
	</html>