diff options
| author | Michael McVady <michaelm@telnyx.com> | 2026-05-11 12:35:54 -0500 |
|---|---|---|
| committer | Michael McVady <michaelm@telnyx.com> | 2026-05-11 12:35:54 -0500 |
| commit | 9c36c275dc445ef224904fa429d0136e3c3fce16 (patch) | |
| tree | c8d2b0fff1f1677183507a23d4c5617a963d7292 | |
| parent | 239928ede767501438d1cae2c55793adb8c3923d (diff) | |
clean up
| -rw-r--r-- | app.py | 52 |
1 files changed, 38 insertions, 14 deletions
@@ -19,26 +19,50 @@ TEMPLATE_STR = """<!DOCTYPE html> <html lang="zxx"> <head> <title>lux</title> +<meta name="viewport" content="width=device-width, initial-scale=1"> <style> - body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } - h1 { font-family: monospace; } - input[type=color] { - width: 200px; height: 200px; border: none; border-radius: 50%; cursor: pointer; padding: 0; - 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%)); + body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; } + h1 { font-family: monospace; font-size: 2rem; } + #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> -<script data-goatcounter="https://test.bunkergate.org/count" async src="https://test.bunkergate.org/count.js"></script> +<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 rect = this.getBoundingClientRect(); + var x = e.clientX - rect.left - rect.width / 2; + var y = e.clientY - rect.top - rect.height / 2; + var radius = rect.width / 2; + + if (x * x + y * y > radius * radius) return; + + var h = ((Math.atan2(y, x) * 180 / Math.PI) + 360) % 360; + var s = Math.min(Math.sqrt(x * x + y * y) / radius, 1); + var c = s, X = c * (1 - Math.abs((h / 60) % 2 - 1)), m = 0.5 - c / 2; + var 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; } + + var input = document.getElementById('c'); + input.name = 'color'; + input.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://stats.bunkergate.org/count" async src="https://stats.bunkergate.org/count.js"></script> </body> </html> """ |