regexper-static/src/index.html
2014-12-15 18:06:16 -05:00

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>