105 lines
2.3 KiB
HTML
105 lines
2.3 KiB
HTML
<div class="container">
|
|
<form id="regexp-form">
|
|
<textarea id="regexp-input" autofocus="autofocus" placeholder="Enter JavaScript-style regular expression to display"></textarea>
|
|
<button type="submit">Display</button>
|
|
|
|
<ul class="inline-list">
|
|
<li><a href="#" class="oi with-text" data-glyph="data-transfer-download" download="image.svg" type="image/svg+xml">Download</a></li>
|
|
<li><a href="#" class="oi with-text" data-glyph="link-intact">Permalink</a></li>
|
|
</ul>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="results">
|
|
<div id="loading">
|
|
<div class="spinner">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
|
|
<div id="progress">
|
|
<div style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="error"></div>
|
|
|
|
<!-- NOTE: Do not put anything in #regexp-render other than the <svg> element -->
|
|
<div id="regexp-render">
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
|
<style type="text/css">
|
|
text, tspan {
|
|
font: 12px Arial;
|
|
}
|
|
|
|
path {
|
|
fill-opacity: 0;
|
|
stroke-width: 2px;
|
|
stroke: #000;
|
|
}
|
|
|
|
circle.pin {
|
|
fill: #6b6659;
|
|
stroke-width: 2px;
|
|
stroke: #000;
|
|
}
|
|
|
|
.anchor text, .any-character text {
|
|
fill: #fff;
|
|
}
|
|
|
|
.anchor rect, .any-character rect {
|
|
fill: #6b6659;
|
|
}
|
|
|
|
.escape text, .charset-escape text, .literal text {
|
|
fill: #000;
|
|
}
|
|
|
|
.escape rect, .charset-escape rect {
|
|
fill: #bada55;
|
|
}
|
|
|
|
.literal rect {
|
|
fill: #dae9e5;
|
|
}
|
|
|
|
.charset .charset-box {
|
|
fill: #cbcbba;
|
|
}
|
|
|
|
.subexp .subexp-label,
|
|
.charset .charset-label,
|
|
.match-fragment .repeat-label {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.subexp .subexp-label,
|
|
.charset .charset-label {
|
|
dominant-baseline: text-after-edge;
|
|
}
|
|
|
|
.subexp .subexp-box {
|
|
stroke: #a0a0a0;
|
|
stroke-dasharray: 6,2;
|
|
stroke-width: 2px;
|
|
fill-opacity: 0;
|
|
}
|
|
|
|
.quote {
|
|
fill: #a0a0a0;
|
|
}
|
|
|
|
.placeholder text {
|
|
fill: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.placeholder rect {
|
|
fill: #f00;
|
|
}
|
|
</style>
|
|
</svg>
|
|
</div>
|
|
</div>
|