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