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

Initial styling

Browse Source 
Change from default increment/decrement buttons to custom ones since
that's easier to style.
This commit is contained in:
Nathan McRae
2025-08-24 13:32:12 -07:00
parent 6541d65f3a
commit da1e6f32a5
4 changed files with 268 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
index.html
View File

@@ -1,59 +1,87 @@
<!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>
Axis 1
<div>
Title
<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>
Start Value:
<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>
Axis 2
<div>
Title
<div class="group">
<h3>Axis 2</h3>
<div class="input">
<p>Title:</p>
<input id="axis-2-title" value="axis 2"/>
</div>
<div>
Start Value:
<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>
Axis 3
<div>
Title
<div class="group">
<h3>Axis 3</h3>
<div class="input">
<p>Title:</p>
<input id="axis-3-title" value="axis 3"/>
</div>
<div>
Start Value:
<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>
axis title text size (px):
<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>
tick label text size (px):
<input type="number" id="tick-label-size" value="2"/>
<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>
<div>
<div>
ticks:
<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>
tick size (px):
<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>