da1e6f32a5
Change from default increment/decrement buttons to custom ones since that's easier to style.
88 lines
3.1 KiB
HTML
88 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Ternary Graph Generator</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="style.css"/>
|
|
<link rel="stylesheet" href="ternary-graph.css"/>
|
|
</head>
|
|
<body>
|
|
<div id="breadcrumb">
|
|
<a id="site-title" href="https://nathanmcrae.name">
|
|
<img class="avatar" src="avatar.png"/>
|
|
NathanMcRae.name
|
|
</a>
|
|
/
|
|
Ternary Graph Generator
|
|
</div>
|
|
<hr/>
|
|
<div class="group">
|
|
<h3>Axis 1</h3>
|
|
<div class="input">
|
|
<p>Title:</p>
|
|
<input id="axis-1-title" value="axis 1"/>
|
|
</div>
|
|
<div class="input">
|
|
<p>Start value:</p>
|
|
E<input type="number" id="axis-1-start" value="0"/>
|
|
<button id="axis-1-start-down">▼</button>
|
|
<button id="axis-1-start-up">▲</button>
|
|
</div>
|
|
</div>
|
|
<div class="group">
|
|
<h3>Axis 2</h3>
|
|
<div class="input">
|
|
<p>Title:</p>
|
|
<input id="axis-2-title" value="axis 2"/>
|
|
</div>
|
|
<div class="input">
|
|
<p>Start value:</p>
|
|
E<input type="number" id="axis-2-start" value="0"/>
|
|
<button id="axis-2-start-down">▼</button>
|
|
<button id="axis-2-start-up">▲</button>
|
|
</div>
|
|
</div>
|
|
<div class="group">
|
|
<h3>Axis 3</h3>
|
|
<div class="input">
|
|
<p>Title:</p>
|
|
<input id="axis-3-title" value="axis 3"/>
|
|
</div>
|
|
<div class="input">
|
|
<p>Start value:</p>
|
|
E<input type="number" id="axis-3-start" value="0"/>
|
|
<button id="axis-3-start-down">▼</button>
|
|
<button id="axis-3-start-up">▲</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input">
|
|
<p>Axis title text size (px):</p>
|
|
<input type="number" id="axis-title-size" value="16"/>
|
|
<button id="axis-title-size-down">▼</button>
|
|
<button id="axis-title-size-up">▲</button>
|
|
</div>
|
|
<div class="input">
|
|
<p>Tick label text size (px):</p>
|
|
<input type="number" id="tick-label-size" value="12"/>
|
|
<button id="tick-label-size-down">▼</button>
|
|
<button id="tick-label-size-up">▲</button>
|
|
</div>
|
|
<div class="input">
|
|
<p>Ticks:</p>
|
|
<input type="number" id="ticks" value="10"/>
|
|
<button id="ticks-down">▼</button>
|
|
<button id="ticks-up">▲</button>
|
|
</div>
|
|
<div class="input">
|
|
<p>Tick size (px):</p>
|
|
<input type="number" id="tick-size" value="5"/>
|
|
<button id="tick-size-down">▼</button>
|
|
<button id="tick-size-up">▲</button>
|
|
</div>
|
|
<button onclick="downloadSVG">Download SVG</button>
|
|
<div id="svg-container" class="my-class"></div>
|
|
</body>
|
|
<script src="index.js"></script>
|
|
</html> |