-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
207 additions
and
1 deletion.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 Adam Jagosz. | ||
</p> | ||
<p> | ||
View source or get involved on <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> |
Oops, something went wrong.