Iosevka/testdrive/index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Iosevka</title>
	<style>

	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
	<link rel="stylesheet" href="specimen.css">
	<link rel="stylesheet" href="http://maxcdn.icons8.com/fonts/icons8_win10/1.0./styles.min.css">

</head>

<body>
	<div id="picker">
		<span class="title pp" v-bind:class="[current.cls]">Iosevka {{current.display}} Specimen<span class="icon icons8-angle-down"></span></span>
		<div class="menu">
			<div class="group" v-for="group in fonts">
				<a href="#" v-for="item in group" v-on:click.prevent="choose(item)" class="pp" v-bind:class="[item.cls, item === current ? 'active' : '']">{{item.display}}</a>
			</div>
		</div>
	</div>
	<div id="display">
		<div id="waiting" v-show="(!!waiting)"></div>
		<div class="show" v-bind:class="[currentFont.cls]">
			<p class="waterfall" v-for="size in waterfall" v-bind:style="{fontSize: (size / 14 + 'rem')}">float Fox.quick(h){!isBrown &amp;&amp; jumpO&#x0336;&#x0338;ver(doges&#x0320;&#x0323;&#x0301;.lazy)}</p>
			<pre class="langs"><code class=patel><span class=keyword>define</span> samples : <span class=keyword>object</span><template v-for="sample in samples">
	{<span class=qualifier>.lang</span> <span class=string>'{{sample.lang}}'</span>{{sample.spaces}}<span class=qualifier>.sample</span> <span class=string lang="{{sample.code}}">'<span v-html="sample.sample"></span>'</span>}<span class=comment>{{sample.comment}}</span></template></code></pre>
		</div>
		<div v-for="block in blocks" class="usheet show" v-bind:class="[block.font.cls]">
			<h3><span>{{block.name}}</span></h3>
			<table class="block">
				<tr class="row" v-for="row in block.rows">
					<td class="indicator"><s>x</s>
						<n>U+{{row.startIndex}}</n>
					</td>
					<td v-for="char in row.chars" v-bind:class="[char.name ? 'present' : 'missing']" v-bind:title="char.name">
						<d v-bind:class="[(char.isMark ? 'mark' : char.isTie ? 'tie' : 'simple')]">{{char.char}}</d>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<script src="specimen.js"></script>
</body>

</html>