#!/usr/bin/bash


mn=4
mx=80
T=$(( RANDOM % 4 + 6 ))

q="abcd"

t="<html><link rel="icon" href="data:,"><style>html{width:99%;height:99%;background:#000}button::after{content:\"Click me!\"}button{position:fixed;border-radius:99%;animation:var(--n)${T}s cubic-bezier(.9,-.9,0,1.9)infinite;width:99px;height:99px;color:#e5f781;background-color:#111}"

for ((i = 0; i < ${#q}; i++)); do
	l=${q:i:1}
	t+="#${l}{--n:${l}}"
done

for ((i = 0; i < ${#q}; i++)); do
	l=${q:i:1}
	t+="@keyframes ${l}{"
	for ((j = 0; j < 9; j++)); do
		if (( j == 0 )); then
			p="0%,100%"
		else
			p="$((j * 11 + RANDOM % 11 - 5))%"
		fi
		left=$(( RANDOM % (mx - mn + 1) + mn ))
		top=$(( RANDOM % (mx - mn + 1) + mn ))
		t+="${p}{left:${left}%;top:${top}%}"
	done
	t+="}"
done
t+="</style><body>"

h=false
for ((i = 0; i < ${#q}; i++)); do
	c=${q:i:1}
	if (( i + 1 < ${#q} )); then
		nx=${q:i+1:1}
	else
		nx="X"
	fi
	if [[ $h == true ]]; then
		t+="<button id=${c} popovertarget=${nx} popover></button>"
	else
		t+="<button id=${c} popovertarget=${nx}></button>"
	fi
	h=true
done

t+='<a id=X popover href=https://subrelevant.cc/whack>Get your prize!</a></body></html>'

if [ -f whack.html ]; then
	echo "made whack"
	printf '%s' "${t}" > whack.html
fi