108 lines
4.1 KiB
HTML
108 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
position: relative;
|
||
|
|
font-family: "Helvetica Neue", sans-serif;
|
||
|
|
width: 960px;
|
||
|
|
margin: auto;
|
||
|
|
margin-bottom: 1em;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
#presets a { border-left: solid #666 1px; padding: 0 10px; }
|
||
|
|
#presets a.first { border-left: none; }
|
||
|
|
#keyword { width: 300px; }
|
||
|
|
#fetcher { width: 500px; }
|
||
|
|
#keyword, #go { font-size: 1.5em; }
|
||
|
|
#text { width: 100%; height: 100px; display: none }
|
||
|
|
/* #text { width: 100%; height: 100px;} */
|
||
|
|
p.copy { font-size: small; }
|
||
|
|
#form { font-size: small; position: relative; }
|
||
|
|
hr { border: none; border-bottom: solid #ccc 1px; }
|
||
|
|
a.active { text-decoration: none; color: #000; font-weight: bold; cursor: text; }
|
||
|
|
#angles line, #angles path, #angles circle { stroke: #666; }
|
||
|
|
#angles text { fill: #333; }
|
||
|
|
#angles path.drag { fill: #666; cursor: move; }
|
||
|
|
#angles { text-align: center; margin: 0 auto; width: 350px; }
|
||
|
|
#angles input, #max { width: 42px; }
|
||
|
|
.loader {
|
||
|
|
border: 16px solid #f3f3f3; /* Light grey */
|
||
|
|
border-top: 16px solid #3498db; /* Blue */
|
||
|
|
border-radius: 50%;
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
animation: spin 2s linear infinite;
|
||
|
|
/* width: 50%; */
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
0% { transform: rotate(0deg); }
|
||
|
|
100% { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div id="vis" style="display: none"></div>
|
||
|
|
<div class="loader" id="loader"></div>
|
||
|
|
|
||
|
|
<form id="form" style="display: none;">
|
||
|
|
|
||
|
|
<p style="position: absolute; right: 0; top: 0; display: none" id="status"></p>
|
||
|
|
|
||
|
|
<div style="text-align: center">
|
||
|
|
<div id="presets"></div>
|
||
|
|
<div id="custom-area">
|
||
|
|
<p><label for="text"></label>
|
||
|
|
<p><textarea id="text">
|
||
|
|
|
||
|
|
{{ text }}
|
||
|
|
</textarea>
|
||
|
|
<!-- <button id="go" type="submit">Go!</button> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<div style="float: right; text-align: right;display: none">
|
||
|
|
<p style="display: none"><label for="max">Number of words:</label> <input type="number" value="250" min="1" id="max">
|
||
|
|
<p style="display: none"><label for="per-line"><input type="checkbox" id="per-line"> One word per line</label>
|
||
|
|
<!--<p><label for="colours">Colours:</label> <a href="#" id="random-palette">get random palette</a>-->
|
||
|
|
<!-- <p><label>Download:</label> -->
|
||
|
|
<!-- <button id="download-svg">SVG</button><\!-- | -->
|
||
|
|
<a id="download-png" href="#">PNG</a>-->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="float: left">
|
||
|
|
<p style="display: none"><label>Spiral:</label>
|
||
|
|
<label for="archimedean"><input type="radio" name="spiral" id="archimedean" value="archimedean"> Archimedean</label>
|
||
|
|
<label for="rectangular"><input type="radio" name="spiral" id="rectangular" value="rectangular" checked="checked"> Rectangular</label>
|
||
|
|
<p style="display: none"><label for="scale">Scale:</label>
|
||
|
|
<label for="scale-log"><input type="radio" name="scale" id="scale-log" value="log" checked="checked"> log n</label>
|
||
|
|
<label for="scale-sqrt"><input type="radio" name="scale" id="scale-sqrt" value="sqrt"> √n</label>
|
||
|
|
<label for="scale-linear"><input type="radio" name="scale" id="scale-linear" value="linear"> n</label>
|
||
|
|
<p style="display: none"><label for="font">Font:</label> <input type="text" id="font" value="Impact">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="angles" style="display: none">
|
||
|
|
<p><input type="number" id="angle-count" value="5" min="1"> <label for="angle-count">orientations</label>
|
||
|
|
<label for="angle-from">from</label> <input type="number" id="angle-from" value="-30" min="-90" max="90"> °
|
||
|
|
<label for="angle-to">to</label> <input type="number" id="angle-to" value="3" min="-90" max="90"> °
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr style="clear: both">
|
||
|
|
</form>
|
||
|
|
|
||
|
|
|
||
|
|
<script src="/static/js/wordcloud-d3.min.js"></script>
|
||
|
|
<script src="/static/js/cloud.min.js"></script>
|
||
|
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
||
|
|
<script>
|
||
|
|
jQuery('#vis').bind('DOMSubtreeModified',function(event) {
|
||
|
|
console.log("wordcloud ready");
|
||
|
|
document.getElementById("loader").style.display = "none";
|
||
|
|
document.getElementById("vis").style.display = "block";
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|