woodwardtw/postmeta.html

## 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>