257fb19369
This still needs lots of tests to be written, and checks for missing browser functionality (specifically around Blob URLs)
69 lines
1.5 KiB
HTML
69 lines
1.5 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>
|
|
|
|
<div id="error"></div>
|
|
|
|
<div id="regexp-render">
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
|
|
<style type="text/css">
|
|
text {
|
|
font: 12px Arial;
|
|
dominant-baseline: text-after-edge;
|
|
}
|
|
|
|
path {
|
|
fill: transparent;
|
|
stroke-width: 2px;
|
|
stroke: #000;
|
|
}
|
|
|
|
circle.pin {
|
|
fill: #6b6659;
|
|
stroke-width: 2px;
|
|
stroke: #000;
|
|
}
|
|
|
|
.anchor text {
|
|
fill: #fff;
|
|
}
|
|
|
|
.anchor rect {
|
|
fill: #6b6659;
|
|
}
|
|
|
|
.placeholder text {
|
|
fill: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.placeholder rect {
|
|
fill: #f00;
|
|
}
|
|
|
|
path.bounding-box {
|
|
fill: transparent;
|
|
stroke: #000;
|
|
stroke-dasharray: 5,2;
|
|
}
|
|
</style>
|
|
</svg>
|
|
</div>
|
|
</div>
|