44 lines
1.7 KiB
HTML
44 lines
1.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Funny gradient thingy</title>
|
||
|
|
<link rel="stylesheet" href="./index.css">
|
||
|
|
<script src="./index.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<noscript>
|
||
|
|
<div style="width: 100vw; height: 100vh; position: fixed; background-color: var(--bg);">
|
||
|
|
<center><h1>This site requires JavaScript!</h1></center>
|
||
|
|
</div>
|
||
|
|
</noscript>
|
||
|
|
|
||
|
|
<h1>Revolt role gradient generator</h1>
|
||
|
|
|
||
|
|
<h3>Gradient type</h3>
|
||
|
|
<input type="radio" id="gradient_linear" value="gradient_linear" name="gradient_type" onchange="updateUi()" autocomplete="off" />
|
||
|
|
<label for="gradient_linear">Linear Gradient</label><br />
|
||
|
|
<input type="radio" id="gradient_radial" value="gradient_radial" name="gradient_type" onchange="updateUi()" autocomplete="off" />
|
||
|
|
<label for="gradient_radial">Radial Gradient</label><br />
|
||
|
|
<input type="radio" id="gradient_conic" value="gradient_conic" name="gradient_type" onchange="updateUi()" autocomplete="off" />
|
||
|
|
<label for="gradient_conic">Conic Gradient</label><br />
|
||
|
|
|
||
|
|
<div id="color-list">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<button onclick="appendColor()">Add Color</button>
|
||
|
|
|
||
|
|
<div id="config_linear" style="display: none;">
|
||
|
|
<h4>Linear</h4>
|
||
|
|
<input type="range" min="0" max="360" value="90" autocomplete="off" oninput="rotation_span.innerText = this.value + '°'">
|
||
|
|
<span id="rotation_span">90°</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="config_radial" style="display: none;">
|
||
|
|
<h4>Radial</h4>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="config_conic" style="display: none;">
|
||
|
|
<h4>Conic</h4>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|