mirror of
https://github.com/penpot/penpot.git
synced 2025-01-26 00:19:07 -05:00
226 lines
8.9 KiB
HTML
226 lines
8.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playwrite+ES:wght@100..400&family=Playwrite+NZ:wght@100..400&family=Playwrite+US+Trad:wght@100..400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Penpot - Text Editor Playground</title>
|
|
<style>
|
|
#output {
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form>
|
|
<fieldset>
|
|
<legend>Styles</legend>
|
|
<!-- Font -->
|
|
<div class="form-group">
|
|
<label for="font-family">Font family</label>
|
|
<select id="font-family">
|
|
<option value="Open+Sans">Open Sans</option>
|
|
<option value="sourcesanspro">Source Sans Pro</option>
|
|
<option value="whatever">Whatever</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="font-size">Font size</label>
|
|
<input id="font-size" type="number" value="14" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="font-weight">Font weight</label>
|
|
<select id="font-weight">
|
|
<option value="100">100</option>
|
|
<option value="200">200</option>
|
|
<option value="300">300</option>
|
|
<option value="400">400 (normal)</option>
|
|
<option value="500">500</option>
|
|
<option value="600">600</option>
|
|
<option value="700">700 (bold)</option>
|
|
<option value="800">800</option>
|
|
<option value="900">900</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="font-style">Font style</label>
|
|
<select id="font-style">
|
|
<option value="normal">normal</option>
|
|
<option value="italic">italic</option>
|
|
<option value="oblique">oblique</option>
|
|
</select>
|
|
</div>
|
|
<!-- Text attributes -->
|
|
<div class="form-group">
|
|
<label for="line-height">Line height</label>
|
|
<input id="line-height" type="number" value="1.0" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="letter-spacing">Letter spacing</label>
|
|
<input id="letter-spacing" type="number" value="0.0" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="direction-ltr">LTR</label>
|
|
<input id="direction-ltr" type="radio" name="direction" value="ltr" checked />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="direction-rtl">RTL</label>
|
|
<input id="direction-rtl" type="radio" name="direction" value="rtl" />
|
|
</div>
|
|
<!-- Text Align -->
|
|
<div class="form-group">
|
|
<label for="text-align-left">Align left</label>
|
|
<input id="text-align-left" type="radio" name="text-align" value="left" checked />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="text-align-center">Align center</label>
|
|
<input id="text-align-center" type="radio" name="text-align" value="center" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="text-align-right">Align right</label>
|
|
<input id="text-align-right" type="radio" name="text-align" value="right" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="text-align-justify">Align justify</label>
|
|
<input id="text-align-justify" type="radio" name="text-align" value="justify" />
|
|
</div>
|
|
<!-- Text Transform -->
|
|
<div class="form-group">
|
|
<label for="text-transform-none">None</label>
|
|
<input id="text-transform-none" type="radio" name="text-transform" value="none" checked />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="text-transform-uppercase">Uppercase</label>
|
|
<input id="text-transform-uppercase" type="radio" name="text-transform" value="uppercase" checked />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="text-transform-capitalize">Capitalize</label>
|
|
<input id="text-transform-capitalize" type="radio" name="text-transform" value="capitalize" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="text-transform-lowercase">Lowercase</label>
|
|
<input id="text-transform-lowercase" type="radio" name="text-transform" value="lowercase" />
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Debug</legend>
|
|
<div class="form-group">
|
|
<label for="direction">Direction</label>
|
|
<input id="direction" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="focus-node">Focus Node</label>
|
|
<input id="focus-node" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="focus-offset">Focus offset</label>
|
|
<input id="focus-offset" readonly type="number">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="focus-inline">Focus Inline</label>
|
|
<input id="focus-inline" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="focus-paragraph">Focus Paragraph</label>
|
|
<input id="focus-paragraph" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="anchor-node">Anchor Node</label>
|
|
<input id="anchor-node" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="anchor-offset">Anchor offset</label>
|
|
<input id="anchor-offset" readonly type="number">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="anchor-inline">Anchor Inline</label>
|
|
<input id="anchor-inline" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="anchor-paragraph">Anchor Paragraph</label>
|
|
<input id="anchor-paragraph" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="start-container">Start container</label>
|
|
<input id="start-container" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="start-offset">Start offset</label>
|
|
<input id="start-offset" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="end-container">End container</label>
|
|
<input id="end-container" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="end-offset">End offset</label>
|
|
<input id="end-offset" readonly type="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="multi">Multi?</label>
|
|
<input id="multi" readonly type="checkbox" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="multi-inline">Multi inline?</label>
|
|
<input id="multi-inline" readonly type="checkbox" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="multi-paragraph">Multi paragraph?</label>
|
|
<input id="multi-paragraph" readonly type="checkbox" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="is-text-focus">Is text focus?</label>
|
|
<input id="is-text-focus" readonly type="checkbox" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="is-text-anchor">Is text anchor?</label>
|
|
<input id="is-text-anchor" readonly type="checkbox" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="is-paragraph-start">Is paragraph start?</label>
|
|
<input id="is-paragraph-start" readonly type="checkbox" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="is-paragraph-end">Is paragraph end?</label>
|
|
<input id="is-paragraph-end" readonly type="checkbox" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="is-inline-start">Is inline start?</label>
|
|
<input id="is-inline-start" readonly type="checkbox" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="is-inline-end">Is inline end?</label>
|
|
<input id="is-inline-end" readonly type="checkbox">
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
<!--
|
|
|
|
Editor
|
|
|
|
-->
|
|
<div class="text-editor-container align-top">
|
|
<div
|
|
id="text-editor-selection-imposter"
|
|
class="text-editor-selection-imposter"></div>
|
|
<div
|
|
class="text-editor-content"
|
|
contenteditable="true"
|
|
role="textbox"
|
|
aria-multiline="true"
|
|
aria-autocomplete="none"
|
|
spellcheck="false"
|
|
autocapitalize="false"></div>
|
|
</div>
|
|
<!--
|
|
|
|
Text output
|
|
|
|
-->
|
|
<div id="output"></div>
|
|
<script type="module" src="/main.js"></script>
|
|
</body>
|
|
</html>
|