🎉🚀 May the concensus be with us!

This commit is contained in:
Brian Wiborg 2024-05-13 00:47:24 +02:00
commit 48328e7db2
No known key found for this signature in database
GPG key ID: BE53FA9286B719D6
33 changed files with 4051 additions and 0 deletions

14
tmpl/head.html Normal file
View file

@ -0,0 +1,14 @@
{{ define "head" }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/tailwind.css">
<script src="/static/htmx.min.js"></script>
<title>{{ or .Title "govote"}}</title>
</head>
<body>
<main>
{{ end }}

5
tmpl/tail.html Normal file
View file

@ -0,0 +1,5 @@
{{ define "tail" }}
</main>
</body>
</html>
{{ end }}

27
tmpl/thanks.html Normal file
View file

@ -0,0 +1,27 @@
{{ define "thanks" }}
{{ template "head" . }}
<div class="flex flex-col justify-center align-center items-center h-screen bg-slate-900 p-2">
<div class="w-full md:w-3/4 lg:w-1/2 xl:w-1/3 border rounded-lg p-2 sm:p-6 md:p-8 bg-slate-800 border-purple-900 text-white">
<div class="relative sm:rounded-lg">
<h1 class="text-center text-4xl text-white pb-2">
Thank you!
</h1>
<p class="p-4 text-gray-400 text-center">
You have made a small voting script very happy! *nom*
</p>
<p class="text-gray-400 text-center">
Your vote has been placed under the ID:<br>
</p>
<p class="text-white text-center text-2xl bold">
{{ .Id }}
</p>
<hr class="m-4">
<form action="/v/{{ .Vid }}" method="GET">
<button type="submit" class="w-full hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-purple-600 hover:bg-purple-700 focus:ring-blue-800 text-white hover:text-yellow-200 text-xl">Go back</button>
</form>
</div>
</div>
</div>
{{ template "tail" . }}
{{ end }}

121
tmpl/voting.html Normal file
View file

@ -0,0 +1,121 @@
{{ define "voting" }}
{{ template "head" . }}
<div class="flex flex-col justify-center align-center items-center h-screen bg-slate-900 p-2">
<div class="w-full md:w-3/4 lg:w-1/2 xl:w-1/3 border rounded-lg p-2 sm:p-6 md:p-8 bg-slate-800 border-purple-900 text-white">
<div class="relative sm:rounded-lg">
<h1 class="text-center text-4xl text-white pb-2">
{{ .Voting.Referendum }}
</h1>
<p class="text-gray-400 text-center text-xs">
{{ .Voting.Deadline }}
</p>
{{ if .Voting.IsOpen }}
{{ template "vote_form" . }}
{{ else }}
{{ template "voting_result" . }}
{{ end }}
</div>
</div>
</div>
{{ template "tail" . }}
{{ end }}
{{ define "vote_form" }}
<div class="relative overflow-x-auto py-4">
<table class="w-full text-sm text-left rtl:text-right text-gray-400 text-center">
<thead class="text-xs uppercase text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
Quorum
</th>
<th scope="col" class="px-6 py-3">
Threshold
</th>
<th scope="col" class="px-6 py-3">
Anonymous
</th>
</tr>
</thead>
<tbody>
<tr class="border-b bg-gray-800 border-gray-700">
<td scope="row" class="px-6 py-2 font-medium whitespace-nowrap text-white">
SIMPLE
</td>
<td scope="row" class="px-6 py-2 font-medium whitespace-nowrap text-white">
SIMPLE
</td>
<td scope="row" class="px-6 py-2 font-medium whitespace-nowrap text-white">
YES
</td>
</tr>
</tbody>
</table>
</div>
<form action="/v/{{ .Voting.ID }}" method="POST">
<ul class="grid w-full gap-6 md:grid-cols-3 pb-8">
<li>
<input type="radio" id="vote-yes" name="vote" value="YIP" class="hidden peer" required />
<label for="vote-yes" class="inline-flex items-center justify-between w-full p-5 border rounded-lg cursor-pointer border-green-700 hover:border-gray-400 peer-checked:text-white peer-checked:bg-green-700 hover:text-white text-green-700">
<div class="block mx-auto">
<div class="w-full text-lg font-semibold">YIP</div>
</div>
</label>
</li>
<li>
<input type="radio" id="vote-no" name="vote" value="NOPE" class="hidden peer" required />
<label for="vote-no" class="inline-flex items-center justify-between w-full p-5 border rounded-lg cursor-pointer border-red-800 hover:border-gray-400 peer-checked:text-white peer-checked:bg-red-800 hover:text-white text-red-800">
<div class="block mx-auto">
<div class="w-full text-lg font-semibold">NOPE</div>
</div>
</label>
</li>
<li>
<input type="radio" id="vote-abstain" name="vote" value="DUNNO" class="hidden peer" required />
<label for="vote-abstain" class="inline-flex items-center justify-between w-full p-5 border rounded-lg cursor-pointer border-yellow-600 hover:border-gray-400 peer-checked:text-white peer-checked:bg-yellow-600 hover:text-white text-yellow-600">
<div class="block mx-auto">
<div class="w-full text-lg font-semibold">DUNNO</div>
</div>
</label>
</li>
</ul>
<button type="submit" class="w-full hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-purple-600 hover:bg-purple-700 focus:ring-blue-800 text-white hover:text-yellow-200 text-xl">Vote</button>
</form>
{{ end }}
{{ define "voting_result" }}
<table class="w-full text-sm text-left rtl:text-right text-gray-400 text-center mt-4">
<tbody>
<tr class="border-b border-t bg-gray-800 border-gray-700">
<td class="px-6 py-4 text-4xl bold text-green-700">
{{ .Voting.Result.Yes }}
</td>
<td class="px-6 py-4 text-4xl bold text-red-800">
{{ .Voting.Result.No }}
</td>
<td class="px-6 py-4 text-4xl bold text-yellow-700">
{{ .Voting.Result.Abstain }}
</td>
</tr>
</tbody>
</table>
{{ if and .Voting.Result.Quorum .Voting.Result.Threshold }}
<p class="text-4xl bold text-center p-4 text-green-700 tracking-widest">
ACCEPTED
</p>
{{ else }}
<p class="text-4xl bold text-center p-4 text-red-800 tracking-widest">
REJECTED
</p>
{{ end }}
{{ if .Voting.Result.Quorum }}
<p class="text-center text-green-700">
Quorum: REACHED
</p>
{{ else }}
<p class="text-center text-red-800">
Quorum: FAILED
</p>
{{ end }}
{{ end }}

84
tmpl/voting_form.html Normal file
View file

@ -0,0 +1,84 @@
{{ define "voting_form" }}
{{ template "head" . }}
<div class="flex flex-col justify-center align-center items-center h-screen bg-slate-900 p-2">
<div class="w-full md:w-3/4 lg:w-1/2 xl:w-1/3 border rounded-lg p-2 sm:p-6 md:p-8 bg-slate-800 border-purple-900">
<form class="space-y-6" action="/v" method="POST">
<h5 class="text-xl font-medium text-white">New Voting</h5>
<div>
<label for="referendum" class="block mb-2 text-sm font-medium text-white">Referendum</label>
<input type="text" name="referendum" id="referendum" class="border text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 bg-gray-600 border-gray-500 placeholder-gray-400 text-white" placeholder="Concise question or subject..." required autofocus />
</div>
<div class="flex flex-row justify-between">
<div class="w-full px-2">
<label for="deadline" class="block mb-2 text-sm font-medium text-white">Deadline</label>
<input type="text" name="deadline" id="deadline" class="border text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 bg-gray-600 border-gray-500 placeholder-gray-400 text-white text-center" placeholder="Deadline, e.g.: 3m, 1h, 7d, etc" value="1m" required />
</div>
<div class="w-full px-2">
<label for="quorum" class="block mb-2 text-sm font-medium text-white">Quorum</label>
<select id="quorum" name="quorum" class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500">
<option selected>SIMPLE</option>
<option value="1/5">1/5</option>
<option value="1/4">1/4</option>
<option value="1/3">1/3</option>
<option value="1/2">1/2</option>
<option value="2/5">2/5</option>
<option value="2/3">2/3</option>
<option value="3/5">3/5</option>
<option value="3/4">3/4</option>
<option value="4/5">4/5</option>
</select>
</div>
<div class="w-full px-2">
<label for="threshold" class="block mb-2 text-sm font-medium text-white">Threshold</label>
<select id="threshold" name="threshold" class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500">
<option selected>SIMPLE</option>
<option value="1/5">1/5</option>
<option value="1/4">1/4</option>
<option value="1/3">1/3</option>
<option value="1/2">1/2</option>
<option value="2/5">2/5</option>
<option value="2/3">2/3</option>
<option value="3/5">3/5</option>
<option value="3/4">3/4</option>
<option value="4/5">4/5</option>
</select>
</div>
</div>
<div>
<label for="electors" class="block mb-2 text-sm font-medium text-white">Who can vote? <small>(empty if anyone can vote)</small></label>
<div class="flex">
<span class="inline-flex items-center px-3 text-sm border rounded-e-0 border-e-0 rounded-s-md bg-gray-600 text-gray-400 border-gray-600">
<svg class="w-4 h-4 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
</svg>
</span>
<input type="text" id="electores" name="electors" class="rounded-none rounded-e-lg border block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" placeholder="Names separated by spaces...">
</div>
</div>
<div>
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" value="anonymous" class="sr-only peer">
<div class="relative w-11 h-6 peer-focus:ring-purple-800 rounded-full peer bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
<span class="ms-3 text-sm font-medium text-gray-400">Anonymous vote</span>
</label>
</div>
<button type="submit" class="w-full hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-purple-600 hover:bg-purple-700 focus:ring-blue-800 text-white hover:text-yellow-200 text-xl">Create</button>
<p class="text-gray-400 italic">
Quotum:
The minumum number of eligible votes required for the referendum to pass.
(SIMPLE means that at least one vote is required.)
</p>
<p class="text-gray-400 italic">
Threshold:
The minumum number of YES votes required for the referendum to pass.
(SIMPLE means that there must be more YES than NO votes.)
</p>
<p class="text-gray-400 italic">
Anonymous:
Individual votes by the electors are not made public.
</p>
</form>
</div>
</div>
{{ template "tail" . }}
{{ end }}