{% extends "base.html" %}
{% block head %}
<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/curves.css')}}"> -->
{% endblock %}

{% block page %}
<div class="block">
	<p><strong class="handle">*1</strong>: systematics, temporalities (group formations)</p>
	<p><strong class="annotation">curves</strong>: What curves are used to engage with <strong class="handle">*1</strong>?</p>
</div>
<hr>
<form action="" method="GET">
	<!-- https://spline.technology/demo/# -->
	<!-- <div class="modal" id="help-modal">
		<div class="modal-content">
			<span class="close" id="help-close">&times;</span>
			<p><b>A new spline</b></p>
			<p>Add a new corner point: click. Add a new smooth point, Alt + click, or click and drag.</p>
			<p>Select multiple points: Shift + click.</p>
			<p>Refine a curve: click on the curve and drag.</p>
			<p>Set an explicit tangent: click and drag on the handles. Set axis-aligned: Shift + click. Unset an explicit tangent: drag away.</p>
			<p>Toggle between smooth and corner points: double-click.</p>
			<p>Delete a point: delete (or backspace) key.
			<p>Nudge points by 1 px: arrow keys. Nudge by 10 px: Shift + arrow keys.
			<p>Copyright 2018 Raph Levien</p>
			<p>Github repo: <a href="https://github.com/raphlinus/spline-research">raphlinus/spline-research</a></p>
		</div>
	</div>
	<div class="modal" id="save-json-modal">
		<div class="modal-content">
			<span class="close" id="save-json-close">&times;</span>
			<pre id="save-json-content"></pre>
		</div>
	</div>
	<div class="modal" id="load-json-modal">
		<div class="modal-content">
			<span class="close" id="load-json-close">&times;</span>
			<p><b>Load from JSON</b></p>
			<textarea id="load-text" placeholder="Paste JSON data here..." rows=20></textarea>
			<p><button id="load-button" type="button">Load</button></p>
		</div>
	</div>
	<svg id="s" class="canvas" width="640" height="480" pointer-events="all">
		<path id="ctrlpoly" d="" stroke="none" fill="none" />
		<path id="spline" d="" stroke="black" fill="none" stroke-width="2" />
		<path id="spline2" d="" stroke="blue" fill="none" stroke-width="2" />
		<g id="handles" />
		<g id="plots" />
	</svg> -->
	<!--  -->
	<!-- <input class="ready" type="button" value="ready" onclick="ready()" /> -->
	<input type="file" name="curve" accept=".svg"><br>
	<!-- <textarea id="curve" name="curve" style="display:none;" required></textarea> -->
	<input class="submit" type="submit" value="submit"/>
	<a id="reset" href="/curves/"><input class="reset" type="button" value="reset"></a>
</form>
<hr>
<div id="shapes">
	<h2><strong class="annotation">shapes</strong> gathered so far include:</h2>
	{% for x in db.keys() %}
		{{ db[x]['shape'] | safe }}
	{% endfor %}
</div>
{% endblock %}
{% block footer %}
<!-- <script type="text/javascript">
	function ready(){
		var svg = document.getElementById("s").outerHTML;
		console.log(svg);
		// var svg = svg.innerHTML();
		var shape = document.getElementById("shape").innerHTML = svg;
	}

</script>
<script type="text/javascript" src="{{ url_for('static', filename='js/bezpath.js')}}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/curves.js')}}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/splineui.js')}}"></script> -->
{% endblock %}