469 lines
4.4 KiB
HTML
469 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width,initial-scale=1,viewport-fit=cover"
|
|
/>
|
|
|
|
<title>
|
|
font prev
|
|
</title>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="./style.css"
|
|
/>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<main class="app">
|
|
|
|
<section class="preview-pane">
|
|
|
|
<div class="grid">
|
|
|
|
<div class="row">
|
|
<!-- -->
|
|
<div class="label">
|
|
Hero
|
|
</div>
|
|
|
|
<div
|
|
class="editable hero"
|
|
contenteditable="true"
|
|
spellcheck="false"
|
|
>
|
|
Satoshi
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="label">
|
|
Display
|
|
</div>
|
|
|
|
<div
|
|
class="editable xl"
|
|
contenteditable="true"
|
|
spellcheck="false"
|
|
>
|
|
Modern display typography.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="label">
|
|
Headline
|
|
</div>
|
|
|
|
<div
|
|
class="editable lg"
|
|
contenteditable="true"
|
|
spellcheck="false"
|
|
>
|
|
Refined geometric details with clean spacing.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="label">
|
|
Body
|
|
</div>
|
|
|
|
<div
|
|
class="editable md"
|
|
contenteditable="true"
|
|
spellcheck="false"
|
|
>
|
|
Satoshi is a modernist sans serif.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="label">
|
|
Caption
|
|
</div>
|
|
|
|
<div
|
|
class="editable sm"
|
|
contenteditable="true"
|
|
spellcheck="false"
|
|
>
|
|
Edit text inline and cycle fonts.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section class="controls-pane">
|
|
|
|
<div class="top">
|
|
|
|
<div
|
|
class="pill"
|
|
id="fontName"
|
|
>
|
|
Initializing...
|
|
</div>
|
|
|
|
<div class="top-actions">
|
|
|
|
<label class="font-upload">
|
|
|
|
<span>
|
|
Upload Font
|
|
</span>
|
|
|
|
<input
|
|
id="fontUpload"
|
|
type="file"
|
|
accept=".ttf,.otf,.woff,.woff2"
|
|
/>
|
|
|
|
</label>
|
|
|
|
<button id="cycleButton">
|
|
Change Font
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<button
|
|
class="controls-toggle"
|
|
id="controlsToggle"
|
|
type="button"
|
|
aria-label="Toggle controls"
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="controls">
|
|
|
|
<div class="control">
|
|
|
|
<div class="control-head">
|
|
|
|
<label for="fontSize">
|
|
Size
|
|
</label>
|
|
|
|
<div
|
|
class="live-value"
|
|
id="fontSizeValue"
|
|
>
|
|
96px
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="slider-wrap">
|
|
|
|
<div
|
|
class="smart-guide"
|
|
id="sizeGuide"
|
|
></div>
|
|
|
|
<input
|
|
id="fontSize"
|
|
type="range"
|
|
min="8"
|
|
max="320"
|
|
step="1"
|
|
value="96"
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="control">
|
|
|
|
<div class="control-head">
|
|
|
|
<label for="fontWeight">
|
|
Weight
|
|
</label>
|
|
|
|
<div
|
|
class="live-value"
|
|
id="fontWeightValue"
|
|
>
|
|
700
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="slider-wrap">
|
|
|
|
<div
|
|
class="smart-guide"
|
|
id="weightGuide"
|
|
></div>
|
|
|
|
<input
|
|
id="fontWeight"
|
|
type="range"
|
|
min="100"
|
|
max="900"
|
|
step="1"
|
|
value="700"
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="control">
|
|
|
|
<div class="control-head">
|
|
|
|
<label for="letterSpacing">
|
|
Spacing
|
|
</label>
|
|
|
|
<div
|
|
class="live-value"
|
|
id="letterSpacingValue"
|
|
>
|
|
0px
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="slider-wrap">
|
|
|
|
<div
|
|
class="smart-guide"
|
|
id="spacingGuide"
|
|
></div>
|
|
|
|
<input
|
|
id="letterSpacing"
|
|
type="range"
|
|
min="-12"
|
|
max="40"
|
|
step="0.25"
|
|
value="0"
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="control transform-control">
|
|
|
|
<div class="control-head">
|
|
|
|
<label>
|
|
Transform
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div class="radio-group">
|
|
|
|
<label class="radio">
|
|
|
|
<input
|
|
type="radio"
|
|
name="transform"
|
|
value="none"
|
|
checked
|
|
/>
|
|
|
|
<span>
|
|
None
|
|
</span>
|
|
|
|
</label>
|
|
|
|
<label class="radio">
|
|
|
|
<input
|
|
type="radio"
|
|
name="transform"
|
|
value="lowercase"
|
|
/>
|
|
|
|
<span>
|
|
Lowercase
|
|
</span>
|
|
|
|
</label>
|
|
|
|
<label class="radio">
|
|
|
|
<input
|
|
type="radio"
|
|
name="transform"
|
|
value="uppercase"
|
|
/>
|
|
|
|
<span>
|
|
Uppercase
|
|
</span>
|
|
|
|
</label>
|
|
|
|
<label class="radio">
|
|
|
|
<input
|
|
type="radio"
|
|
name="transform"
|
|
value="capitalize"
|
|
/>
|
|
|
|
<span>
|
|
Capitalize
|
|
</span>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<div
|
|
class="debug-banner"
|
|
id="debugBanner"
|
|
>
|
|
|
|
<div class="debug-track">
|
|
|
|
<span class="debug-item">
|
|
|
|
<span class="debug-key">
|
|
Family
|
|
</span>
|
|
|
|
<span
|
|
class="debug-value"
|
|
id="debugFamily"
|
|
>
|
|
Satoshi
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<span class="debug-divider"></span>
|
|
|
|
<span class="debug-item">
|
|
|
|
<span class="debug-key">
|
|
Category
|
|
</span>
|
|
|
|
<span
|
|
class="debug-value"
|
|
id="debugCategory"
|
|
>
|
|
Sans
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<span class="debug-divider"></span>
|
|
|
|
<span class="debug-item">
|
|
|
|
<span class="debug-key">
|
|
Font Size
|
|
</span>
|
|
|
|
<span
|
|
class="debug-value"
|
|
id="debugFontSize"
|
|
>
|
|
96px
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<span class="debug-divider"></span>
|
|
|
|
<span class="debug-item">
|
|
|
|
<span class="debug-key">
|
|
Weight
|
|
</span>
|
|
|
|
<span
|
|
class="debug-value"
|
|
id="debugWeight"
|
|
>
|
|
700
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<span class="debug-divider"></span>
|
|
|
|
<span class="debug-item">
|
|
|
|
<span class="debug-key">
|
|
Spacing
|
|
</span>
|
|
|
|
<span
|
|
class="debug-value"
|
|
id="debugLetterSpacing"
|
|
>
|
|
0px
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<span class="debug-divider"></span>
|
|
|
|
<span class="debug-item">
|
|
|
|
<span class="debug-key">
|
|
Guide
|
|
</span>
|
|
|
|
<span
|
|
class="debug-value"
|
|
id="debugGuide"
|
|
>
|
|
Balanced
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="./smart-guides.js"></script>
|
|
|
|
<script src="./app.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
|