2023-03-25 20:30:32 +00:00
|
|
|
<!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>
|
|
|
|
|
|
2023-03-25 21:45:42 +00:00
|
|
|
<p id="preview">This is a preview of your gradient.</p>
|
|
|
|
|
<input type="text" id="output" style="width: calc(100% - 8px)" value="Adjust the options, the output will appear here :3" readonly autocomplete="off" />
|
|
|
|
|
|
2023-03-25 20:30:32 +00:00
|
|
|
<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>
|
2023-03-25 21:45:42 +00:00
|
|
|
<input id="rotation" type="range" min="0" max="360" value="90" autocomplete="off" oninput="rotation_span.innerText = this.value + '°'; updateUi();">
|
2023-03-25 20:30:32 +00:00
|
|
|
<span id="rotation_span">90°</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="config_radial" style="display: none;">
|
|
|
|
|
<h4>Radial</h4>
|
2023-03-25 21:45:42 +00:00
|
|
|
|
|
|
|
|
<input type="radio" id="radial_circle" value="circle" name="radial_mode" onchange="updateUi()" checked autocomplete="off" />
|
|
|
|
|
<label for="radial_circle">Circle</label><br />
|
|
|
|
|
<input type="radio" id="radial_ellipse" value="ellipse" name="radial_mode" onchange="updateUi()" autocomplete="off" />
|
|
|
|
|
<label for="radial_ellipse">Ellipse</label><br />
|
|
|
|
|
|
|
|
|
|
<p>at</p>
|
|
|
|
|
|
|
|
|
|
<input type="radio" id="radial_center" value="center" name="radial_pos" onchange="updateUi()" checked autocomplete="off" />
|
|
|
|
|
<label for="radial_center">Center</label><br />
|
|
|
|
|
<input type="radio" id="radial_top" value="top" name="radial_pos" onchange="updateUi()" autocomplete="off" />
|
|
|
|
|
<label for="radial_top">Top</label><br />
|
|
|
|
|
<input type="radio" id="radial_bottom" value="bottom" name="radial_pos" onchange="updateUi()" autocomplete="off" />
|
|
|
|
|
<label for="radial_bottom">Bottom</label><br />
|
|
|
|
|
<input type="radio" id="radial_left" value="left" name="radial_pos" onchange="updateUi()" autocomplete="off" />
|
|
|
|
|
<label for="radial_left">Left</label><br />
|
|
|
|
|
<input type="radio" id="radial_right" value="right" name="radial_pos" onchange="updateUi()" autocomplete="off" />
|
|
|
|
|
<label for="radial_right">Right</label><br />
|
2023-03-25 20:30:32 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="config_conic" style="display: none;">
|
|
|
|
|
<h4>Conic</h4>
|
2023-03-25 21:45:42 +00:00
|
|
|
<input id="rotation_conic" type="range" min="0" max="360" value="90" autocomplete="off" oninput="rotation_span_conic.innerText = this.value + '°'; updateUi();">
|
|
|
|
|
<span id="rotation_span_conic">90°</span>
|
|
|
|
|
<br />
|
|
|
|
|
|
|
|
|
|
<input id="conic_custom_position" type="checkbox" oninput="updateUi()"/>
|
|
|
|
|
<label for="conic_custom_position">Custom position</label>
|
|
|
|
|
<br />
|
|
|
|
|
|
|
|
|
|
<div id="custom_pos_inputs" hidden>
|
|
|
|
|
<input id="conic_x" type="range" min="0" max="100" value="50" autocomplete="off" oninput="conic_x_span.innerText = this.value + '%'; updateUi();">
|
|
|
|
|
<span id="conic_x_span">50%</span>
|
|
|
|
|
<br />
|
|
|
|
|
<input id="conic_y" type="range" min="0" max="100" value="50" autocomplete="off" oninput="conic_y_span.innerText = this.value + '%'; updateUi();">
|
|
|
|
|
<span id="conic_y_span">50%</span>
|
|
|
|
|
<br />
|
|
|
|
|
</div>
|
2023-03-25 20:30:32 +00:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
