Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
hyvyys committed Aug 22, 2019
1 parent b5c64f3 commit a2af560
Show file tree
Hide file tree
Showing 10 changed files with 207 additions and 1 deletion.
1 change: 1 addition & 0 deletions assets/check.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/eye-slash.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/eye.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions bundle.js

Large diffs are not rendered by default.

Binary file added fonts/Graduate.ttf
Binary file not shown.
Binary file added fonts/Rywalka-Regular.otf
Binary file not shown.
Binary file added images/GitHub-Mark-32px.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/GitHub-Mark-Light-32px.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
194 changes: 193 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -1 +1,193 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/Bulletproof/favicon.ico><title>Bulletproof Font Tester</title><link href=/Bulletproof/js/about.6c4efdb3.js rel=prefetch><link href=/Bulletproof/css/app.7011ffa9.css rel=preload as=style><link href=/Bulletproof/js/app.46140b11.js rel=preload as=script><link href=/Bulletproof/js/chunk-vendors.3e719986.js rel=preload as=script><link href=/Bulletproof/css/app.7011ffa9.css rel=stylesheet></head><body><noscript><strong>We're sorry but Bulletproof doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/Bulletproof/js/chunk-vendors.3e719986.js></script><script src=/Bulletproof/js/app.46140b11.js></script></body></html>
<!DOCTYPE HTML>
<html>

<head>
<title>Bulletproof Font Tester</title>
<meta charset='UTF-8' />
<meta type='viewport' content='width=device-width, initial-scale=1' />
<link rel='stylesheet' href='styles.css'>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,700&display=swap" rel="stylesheet">
</head>

<body>
<div class='container'>
<div class='toolbar top-left-toolbar'>
<button id='option-panel-toggle' title='Hide tools' class='menu-toggle collapse-toggle hy-button hy-button-low'
data-collapse-target='option-panel clear-inputs'>
<i class='fas fa-angle-double-left'></i>
</button>
<button id='clear-inputs' title='Clear inputs' class='hy-button hy-button-low'>
<i class='fas fa-undo' style='font-size: 0.8em'></i>
</button>
</div>

<section class='option-panel' id='option-panel'>
<h3 class='panel-header collapse-toggle' data-collapse-target='font-panel'>Font</h3>
<div class='panel' id='font-panel'>
<div class='toolbar'>
<select class='hy-select' title='Select font' id='font-list'></select>
</div>
<span class='toolbar'>
<form class='file-form'>
<input class='hy-file' type='file' multiple id='input-file' title='Add font files' data-icon='fa-plus'>
</form>
<button class='hy-button' id='previous-font' title='Previous font'>
<i class='fas fa-step-backward'></i>
</button>
<button class='hy-button' id='next-font' title='Next font'>
<i class='fas fa-step-forward'></i>
</button>
</span>
</div>

<h3 class='panel-header collapse-toggle' data-collapse-target='layout-panel'>Layout</h3>
<div class='panel' id='layout-panel'>
<div class='toolbar'>
<input class='hy-button' id='text-color' title='Font color' type='color' />
<input class='hy-button' id='back-color' title='Background color' type='color' value='#ffffff' />
<select class='hy-toggle-select' id='text-align' title='Text align'>
<option data-icon='fa-align-left'>left</option>
<option data-icon='fa-align-center'>center</option>
<option data-icon='fa-align-right'>right</option>
<option data-icon='fa-align-justify'>justify</option>
</select>
<select class='hy-toggle-select' id='text-transform' title='Case transform'>
<option data-icon-text='AA' data-icon-off='true'>none</option>
<option data-icon-text='AA'>uppercase</option>
<option data-icon-text='Aa'>capitalize</option>
<option data-icon-text='aa'>lowercase</option>
</select>
</div>
<input class='input-range' type='range' id='font-size' title='Font size' min='6' max='200' value='48'
data-unit='pt' data-icon='fa-text-height' />
<input class='input-range' type='range' id='line-height' title='Line height' min='0.7' max='2' value='1'
step='0.025' data-unit='' data-icon='fa-align-justify' />
</div>

<h3 class='panel-header collapse-toggle' data-collapse-target='language-panel'
title='Select languages to limit entries in the Text panel.'>Languages</h3>
<div class='panel' id='language-panel'>
<label class='hy-label' for='script-select'>Script</label>
<select class='hy-select' id='script-select'></select>
<label class='hy-label' for='region-select'>Region</label>
<select class='hy-select' id='region-select'></select>
<label class='hy-label' for='speakers-select'>Speakers</label>
<select class='hy-select' id='speakers-select'></select>
<label class='hy-label' for='language-select'>Languages</label>
<select class='hy-select' id='language-select'></select>
</div>

<h3 class='panel-header collapse-toggle' data-collapse-target='text-panel'>Text</h3>
<div class='panel' id='text-panel'>
<label class='hy-label' for='lettering-select'>Lettering</label>
<select class='hy-select' id='lettering-select'></select>
<input class='hy-checkbox visibility' type='checkbox' id='lettering-on' checked/>

<label class='hy-label' for='pangram-select'>Pangrams</label>
<select class='hy-select' id='pangram-select'></select>
<input class='hy-checkbox visibility' type='checkbox' id='pangram-on'/>

<label class='hy-label' for='paragraph-select'>Paragraphs</label>
<select class='hy-select' id='paragraph-select'></select>
<input class='hy-checkbox visibility' type='checkbox' id='paragraph-on'/>

<label class='hy-label' for='characters-select'>Characters</label>
<select class='hy-select' id='characters-select'></select>
<input class='hy-checkbox visibility' type='checkbox' id='characters-on'/>

<label class='hy-label' for='gotchas-select'>Gotchas</label>
<select class='hy-select' id='gotchas-select'></select>
<input class='hy-checkbox visibility' type='checkbox' id='gotchas-on'/>

<!-- <label class='hy-label' for='kerning-select'>Kerning</label>
<select class='hy-select' id='kerning-select'></select> -->
<!-- <input class='hy-checkbox visibility' type='checkbox' id='kerning-on'/> -->
</div>
<!--
<h3 class='panel-header collapse-toggle' data-collapse-target='kerning-panel'>Kerning</h3>
<div class='panel' id='kerning-panel'>
<select class='hy-select' id='kerning-a'></select>
<select class='hy-select' id='kerning-b'></select>
</div> -->

<h3 class='panel-header collapse-toggle' data-collapse-target='feature-toggles'>Features</h3>
<div class='panel' id='feature-toggles'>
</div>

<h3 class='panel-header collapse-toggle' data-collapse-target='variation-axes'>Variation</h3>
<div class='panel' id='variation-axes'>
</div>

<h3 class='panel-header collapse-toggle' data-collapse-target='animation-panel'>Animation</h3>
<div class='panel panel--expandible' id='animation-panel' style='height: 100px;'>
<label for='animation-code' class='hy-label'>CSS @keyframes</label>
<div contenteditable spellcheck='false' class='code-editor' id='animation-code'>from {
font-variation-settings:
'wght' 100;
}
to {
font-variation-settings:
'wght' 400;
}
</div>
<div class='grid-2-col-narrow-wide'>
<input class='hy-text' id='animation-duration' title='Animation duration' type='number' value='4' step='0.1'
data-unit='s'>
<select class='hy-select' id='timing-function' title='Timing function'>
<option>linear</option>
<option>ease-out</option>
<option>ease-in</option>
<option>ease-in-out</option>
</select>
<select class='hy-select' id='iteration-count' title='Iteration count'>
<option>infinite</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select class='hy-select' id='animation-direction' title='Direction'>
<option>normal</option>
<option>reverse</option>
<option>alternate</option>
<option>alternate-reverse</option>
</select>
</div>
<div class='toolbar'>
<button class='hy-button' id='animation-start' title='Start animation'><i class='fas fa-play'></i></button>
<button class='hy-button' id='animation-stop' title='Stop animation'><i class='fas fa-stop'></i></button>
</div>
</div>
<div class='panel panel--expandible panel--non-scrollable' id='empty-panel' style='height: 6rem;'>
</div>

<footer class='option-panel-footer'>
<h1>
<span class='strong'>Bulletproof</span> Font Tester.
</h1>
<p>
Made with tea and coffee and love by&nbsp;Adam&nbsp;Jagosz.
</p>
<p>
View source or get involved on&nbsp;<a href="https://github.com/hyvyys/Bulletproof">GitHub <img height="12" src='./images/GitHub-Mark-32px.png'>
</a>
</p>
<p>
<a href="https://fonts.google.com/specimen/Graduate">Graduate font</a> by Eduardo Tunni.
</p>
</footer>
</section>
<section class='main-panel'>
<div contenteditable spellcheck='false' id='font-sample-1'>Abcde</div>
</section>
<div class='drop-area drop-area--hidden' id='font-drop-area'>
<span>
Drop the font files anywhere. All will be processed locally.
</span>
</div>
</div>


<script src='bundle.js'></script>
</body>

</html>
Loading

0 comments on commit a2af560

Please sign in to comment.