114 lines
2.6 KiB
HTML
114 lines
2.6 KiB
HTML
|
<!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>
|