nathanmcrae/ternary-graph-generator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add download button

Browse Source
This commit is contained in:
Nathan McRae
2025-08-27 21:15:20 -07:00
parent 5e795ac9f3
commit 6a4a0f5719
4 changed files with 92 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
index.html
View File

@@ -17,72 +17,78 @@
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 id="main-content">
<div id="controls">
<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>
<a id="download-button">
<button>Download SVG</button>
</a>
</div>
<div id="svg-container" class="my-class"></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>