diff options
| author | Michael McVady <michaelm@telnyx.com> | 2026-02-26 11:18:27 -0500 |
|---|---|---|
| committer | Michael McVady <michaelm@telnyx.com> | 2026-02-26 11:18:27 -0500 |
| commit | 1b726c90b8cf0de1f9d259c779eb74c854bcbfa2 (patch) | |
| tree | b00c2f479d4ae0968c5e8a9ab4da9f74dfbf9923 | |
| parent | aac57368b135ca6e124186470b120203cb90dbf1 (diff) | |
use onclick to set/postWIP
| -rw-r--r-- | app.py | 26 |
1 files changed, 18 insertions, 8 deletions
@@ -23,22 +23,32 @@ TEMPLATE_STR = """<!DOCTYPE html> <style> body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; } h1 { font-family: monospace; font-size: 2rem; } - input[type=color] { - width: 60vmin; height: 60vmin; border: none; border-radius: 50%; cursor: pointer; padding: 0; + #wheel { + width: 60vmin; height: 60vmin; border-radius: 50%; cursor: pointer; background: radial-gradient(circle, white 0%, transparent 70%), conic-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%)); } - input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } - input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; opacity: 0; } - input[type=color]::-moz-color-swatch { border: none; border-radius: 50%; opacity: 0; } </style> </head> <body style="background-color: {{ background_color }};"> <h1 style="color: {{ color }};">{{ message }}</h1> -<form method="post"> -<input type="color" name="color" value="{{ current_color }}" onchange="this.form.submit()"> -</form> +<div id="wheel"></div> +<form id="f" method="post"><input type="hidden" name="color" id="c"></form> +<script> +document.getElementById('wheel').onclick = function(e) { + var r = this.getBoundingClientRect(), x = e.clientX - r.left - r.width/2, y = e.clientY - r.top - r.height/2; + if (x*x + y*y > (r.width/2)*(r.width/2)) return; + var h = ((Math.atan2(y, x) * 180 / Math.PI) + 360) % 360, + s = Math.min(Math.sqrt(x*x + y*y) / (r.width/2), 1), + c = (1 - Math.abs(2*0.5 - 1)) * s, X = c * (1 - Math.abs((h/60)%2 - 1)), m = 0.5 - c/2, + R, G, B; + if (h<60){R=c;G=X;B=0}else if(h<120){R=X;G=c;B=0}else if(h<180){R=0;G=c;B=X} + else if(h<240){R=0;G=X;B=c}else if(h<300){R=X;G=0;B=c}else{R=c;G=0;B=X} + document.getElementById('c').value = '#'+[R,G,B].map(function(v){return ('0'+Math.round((v+m)*255).toString(16)).slice(-2)}).join('').toUpperCase(); + document.getElementById('f').submit(); +}; +</script> <script data-goatcounter="https://test.bunkergate.org/count" async src="https://test.bunkergate.org/count.js"></script> </body> </html> |