Add index.html
This commit is contained in:
admin
468
index.html
Normal file
468
index.html
Normal file
@@ -0,0 +1,468 @@
|
|||||||
|
<!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 preview
|
||||||
|
</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>
|
||||||
|
|
||||||
Reference in New Issue
Block a user