PCBGG/index.html

114 lines
2.6 KiB
HTML
Raw Normal View History

2023-09-19 13:14:34 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Line Generator V2</title>
<script src="script.js"></script>
<style>
canvas {
image-rendering: pixelated;
image-rendering: crisp-edges;
}
body {
max-width: 700px;
margin-inline: auto;
background-color: black;
color: white;
}
#LNS-joined-input {
display: flex;
gap: 5px;
}
#LNS-joined-input > input[type="range"] {
flex-grow: 1;
}
#LNS-colors-box {
display: flex;
justify-content: space-between;
}
#LNS-colors-box div {
align-items: center;
display: flex;
gap: 6px;
}
</style>
</head>
<body>
<canvas id="viewport" class="border" width="700" height="700"></canvas>
<div id="LNS-colors-box">
<button id="randomize-colors">Randomize Colors</button>
<div>
<label for="starting-color">Starting color</label>
<input
type="color"
name="starting-color"
id="starting-color"
value="#e66465"
/>
</div>
<div>
<label for="ending-color">Ending color</label>
<input
type="color"
name="ending-color"
id="ending-color"
value="#FFFFFF"
/>
</div>
</div>
<label for="band-count">Color Bands</label>
<div id="LNS-joined-input">
<input
type="range"
id="band-count"
name="band-count"
value="10"
max="28"
min="2"
/>
<input
type="number"
id="band-count-number"
name="band-count"
value="10"
min="2"
max="28"
/>
</div>
<label for="angle">Angle</label>
<div id="LNS-joined-input">
<input
type="range"
id="angle"
name="angle"
value="45"
min="-90"
max="90"
/>
<input
type="number"
id="angle-number"
name="angle"
value="45"
min="-90"
max="90"
/>
</div>
<div>
<label for="dynamic-width">Dynamic Width</label>
<input type="checkbox" name="dynamic-width" id="dynamic-width" checked />
</div>
<button class="wide fat" id="download-image">Download Image</button>
<button class="wide fat" id="copy-link">Copy Link</button>
<div id="link-copy-infobox" style="display: none">
Copied url:
<a id="link-copy-indicator"></a>
to the clipboard.
</div>
</body>
</html>