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 >
2023-03-25 23:29:03 +00:00
< input type = "text" id = "output" style = "width: calc(100% - 8px - 104px)" value = "Adjust the options, the output will appear here :3" readonly autocomplete = "off" / >
< button style = "width: 96px;" onclick = "let css = generateCss(); if (!css) return; window.open(`./client.html?colour=${encodeURIComponent(css)}`, 'client', 'popup')" > Apply to role< / button >
2023-03-25 22:05:43 +00:00
< p id = "output_error" > < / p >
2023-03-25 21:45:42 +00:00
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 / >
2023-03-25 22:05:43 +00:00
< div id = "color-list" > < / div >
2023-03-25 20:30:32 +00:00
< button onclick = "appendColor()" > Add Color< / button >
2023-03-25 22:05:43 +00:00
< br / >
< input id = "no_transition" type = "checkbox" autocomplete = "off" onchange = "updateUi()" >
< label for = "no_transition" > No transitions< / label >
2023-03-25 20:30:32 +00:00
< 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 23:29:03 +00:00
< p > The following options are < i > disallowed< / i > by Revolt, and have been disabled. (Shame because they're quite fun to play around with)< / p >
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 >
