client/index.html
<!DOCTYPE html>
<html lang="en" ng-app="rose" ng-controller="SearchController">
<head>
<meta charset="utf-8">
<title>Rose</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles-->
<link rel="stylesheet" href="/client.css">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-22970573-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-22970573-1');
</script>
</head>
<body>
<!-- header-->
<header>
<h1>Rose</h1>
<p>An interactive, technical, and openly editable Rosetta Stone for developers.</p>
</header>
<!-- search form-->
<input type="search" class="search-input" ng-model="query" placeholder="Search for features, technologies, or code snippets" ng-change="resetFeatures()" autofocus>
<!-- results-->
<ol class="search-results" infinite-scroll="fetchFeatures()">
<li class="card" ng-repeat="feature in features">
<h2 class="panel-title" ng-bind-html="feature.name | highlight:query"></h2>
<div class="table-responsive">
<table>
<tr ng-repeat="example in feature.examples">
<td ng-bind-html="example.technology | highlight:query"></td>
<td>
<pre ng-if="query"><code ng-bind-html="example.snippet | highlight:query"></code></pre>
<pre ng-if="!query"><code hljs hljs-source="example.snippet"></code></pre>
</td>
</tr>
</table>
</div>
</li>
</ol>
<h2 ng-if="!features || features.length === 0">No results</h2>
<!-- footer-->
<footer>
© 2014 <a href="http://nickmccurdy.com/">Nick McCurdy</a><br>
<a href="https://github.com/nickmccurdy/rose" target="_blank">GitHub Repository</a>
</footer>
<!-- scripts-->
<script src="/client.js"></script>
</body>
</html>