Making Helios Booth responsive
Adding redis Working on responsive booth Using compatible font Cleaning up CSS Adding redis Revert adding redis Adding redis Adding AWS region name Revert email change Adding space on question numbers Adding space on question numbers Update runtime.txt Update requirements.txt
This commit is contained in:
Pau Argelaguet
Ben Adida
parent
7b5a8b8d63
commit
3d1e83948b
|
|
@ -1,65 +1,84 @@
|
|||
|
||||
body {
|
||||
font-family: Arial;
|
||||
font-family: sans-serif;
|
||||
background: white;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
position: absolute;
|
||||
padding: 0px;
|
||||
background: white;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
border: 1px solid #666;
|
||||
top: 20px;
|
||||
margin-left: 100px;
|
||||
margin-top: 0px;
|
||||
width: 1000px;
|
||||
margin: 20px auto;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
#wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px 30px 20px 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#header {
|
||||
padding-top: 0px;
|
||||
padding-top: 0;
|
||||
text-align: center;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
font-size: 28pt;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
#header h2 {
|
||||
font-size: 20pt;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 100%;
|
||||
font-weight: none;
|
||||
}
|
||||
|
||||
#banner {
|
||||
.edge {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
padding: 2px 0px 2px 0px;
|
||||
background: #ccc;
|
||||
font-size: 18pt;
|
||||
border-bottom: 1px solid #666;
|
||||
}
|
||||
|
||||
.box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.box:nth-child(2) {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.box:last-child > span {
|
||||
margin-left: auto;
|
||||
margin-right: 5px;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
#progress_div {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
max-width: 500px;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
#progress_div table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
border: 0px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#progress_div td.unselected {
|
||||
|
|
@ -76,20 +95,14 @@ body {
|
|||
}
|
||||
|
||||
#footer {
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
padding: 2px 0px 2px 0px;
|
||||
background: #ddd;
|
||||
border-top: 1px solid #666;
|
||||
font-size: 12pt;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#page h2 {
|
||||
background: #fc9;
|
||||
border-bottom: 1px solid #f90;
|
||||
padding: 5px 0px 2px 5px;
|
||||
padding: 5px 0 2px 5px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -101,9 +114,9 @@ h3 {
|
|||
}
|
||||
|
||||
#election_hash {
|
||||
font-family: courier;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
#loading_div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
form.prettyform {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
|
@ -35,7 +34,6 @@ input.prettysmall {
|
|||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
table.pretty {
|
||||
margin: 1em 1em 1em 2em;
|
||||
background: whitesmoke;
|
||||
|
|
@ -48,11 +46,10 @@ table.pretty th, td {
|
|||
padding: 0.3em;
|
||||
}
|
||||
|
||||
|
||||
#answers {
|
||||
padding-left: 210px;
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#questions_div {
|
||||
|
|
@ -62,4 +59,3 @@ table.pretty th, td {
|
|||
div.selected {
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,13 +4,16 @@ a:visited {color:#00a;}
|
|||
|
||||
a:active {color:blue;}
|
||||
|
||||
a:hover, a.subfoot:hover, a.linknav:hover, a.sublinknav:hover {color:blue;text-decoration:underline;}
|
||||
a:hover, a.subfoot:hover, a.linknav:hover, a.sublinknav:hover {
|
||||
color:blue;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
body {
|
||||
margin:0px;
|
||||
padding: 0px;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
background:#ddd;
|
||||
font-family: "Trebuchet MS",verdana,sans-serif;
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
color:#333;
|
||||
}
|
||||
|
|
@ -19,16 +22,9 @@ body {
|
|||
margin-top:20px;
|
||||
margin-right:50px;
|
||||
margin-left:50px;
|
||||
background:white;
|
||||
border-top:1px solid #666;
|
||||
border-left:1px solid #666;
|
||||
border-right:1px solid #666;
|
||||
border-bottom:1px solid #666;
|
||||
background-color: white;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #666;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
|
|
@ -43,7 +39,7 @@ body {
|
|||
|
||||
h1, h2, h3, h4, pre {
|
||||
line-height:120%;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -94,7 +90,6 @@ h3 {
|
|||
border-bottom: 1px dotted #888;
|
||||
}
|
||||
|
||||
|
||||
.question_selected {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -114,6 +109,5 @@ h3 {
|
|||
}
|
||||
|
||||
.data {
|
||||
font-family: courier;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>Helios Voting System</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/booth.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/forms.css" />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
<span style="float:right; padding-right:20px;">
|
||||
<a target="_new" href="mailto:{$T.election_metadata.help_email}?subject=help%20with%20election%20{$T.election.name}&body=I%20need%20help%20with%20election%20{$T.election.uuid}">help!</a>
|
||||
</span>
|
||||
{#if $T.election.BOGUS_P}
|
||||
The public key for this election is not yet ready. This election is in preview mode only.
|
||||
{#else}
|
||||
Election Fingerprint: <span id="election_hash" style="font-weight:bold;">{$T.election.hash}</span>
|
||||
{#/if}
|
||||
|
||||
<div class="box"></div>
|
||||
<div class="box">
|
||||
<span>
|
||||
{#if $T.election.BOGUS_P}
|
||||
The public key for this election is not yet ready. This election is in preview mode only.
|
||||
{#else}
|
||||
Election Fingerprint: <span id="election_hash" style="font-weight:bold;">{$T.election.hash}</span>
|
||||
{#/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="box">
|
||||
<span>
|
||||
<a target="_new" href="mailto:{$T.election_metadata.help_email}?subject=help%20with%20election%20{$T.election.name}&body=I%20need%20help%20with%20election%20{$T.election.uuid}">help</a>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@
|
|||
<b>{$T.question.question}</b>
|
||||
<br />
|
||||
<span style="font-size: 0.6em;">#{$T.question_num + 1} of {$T.last_question_num + 1} —
|
||||
vote for
|
||||
vote for
|
||||
{#if $T.question.min && $T.question.min > 0}
|
||||
{#if $T.question.max}
|
||||
{$T.question.min} to {$T.question.max}
|
||||
{$T.question.min} to {$T.question.max}
|
||||
{#else}
|
||||
at least {$T.question.min}
|
||||
at least {$T.question.min}
|
||||
{#/if}
|
||||
{#else}
|
||||
{#if $T.question.max}
|
||||
{#if $T.question.max > 1}up to {#/if}{$T.question.max}
|
||||
{#if $T.question.max > 1} up to{#/if} {$T.question.max}
|
||||
{#else}
|
||||
as many as you approve of
|
||||
as many as you approve of
|
||||
{#/if}
|
||||
{#/if}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,5 @@
|
|||
|
||||
{#if $T.election_metadata.use_advanced_audit_features}
|
||||
<div style="float: right; background: lightyellow; margin-left: 20px; padding: 0px 10px 10px 10px; border: 1px solid #ddd; width:200px;">
|
||||
<h4><a onclick="$('#auditbody').slideToggle(250);" href="#">Audit</a> <span style="font-size: 0.8em; color: #444">[optional]</span></h4>
|
||||
<div id="auditbody" style="display:none;">
|
||||
<p>
|
||||
If you choose, you can audit your ballot and reveal how your choices were encrypted.
|
||||
</p>
|
||||
<p>
|
||||
You will then be guided to re-encrypt your choices for final casting.
|
||||
</p>
|
||||
<input type="button" value="Verify Encryption" onclick="BOOTH.audit_ballot();" class="pretty" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#/if}
|
||||
|
||||
<h3>Review your Ballot</h3>
|
||||
|
||||
|
||||
<div style="padding: 10px; margin-bottom: 10px; background-color: #eee; border: 1px #ddd solid; max-width: 340px;">
|
||||
{#foreach $T.questions as question}
|
||||
|
||||
|
|
@ -36,17 +18,31 @@ You will then be guided to re-encrypt your choices for final casting.
|
|||
{#/for}
|
||||
</div>
|
||||
|
||||
<p>Your ballot tracker is <b><tt style="font-size: 11pt; word-break: break-all;">{$T.encrypted_vote_hash}</tt></b>, and you can <a onclick="BOOTH.show_receipt(); return false;" href="#">print</a> it.</p>
|
||||
|
||||
<p><p>Your ballot tracker is <b><tt style="font-size: 11pt;">{$T.encrypted_vote_hash}</tt></b>, and you can <a onclick="BOOTH.show_receipt(); return false;" href="#">print</a> it.<br /><br /></p>
|
||||
|
||||
{#if $T.election_metadata.use_advanced_audit_features}
|
||||
<div style="background: lightyellow; padding: 10px; border: 1px solid #ddd; max-width: 340px;">
|
||||
<h4><a onclick="$('#auditbody').slideToggle(250);" href="#">Audit</a> <span style="font-size: 0.8em; color: #444">[optional]</span></h4>
|
||||
<div id="auditbody" style="display:none;">
|
||||
<p>
|
||||
Once you click "Submit", the unencrypted version of your ballot will be destroyed, and only the encrypted version will remain. The encrypted version will be submitted to the Helios server.</p>
|
||||
If you choose, you can audit your ballot and reveal how your choices were encrypted.
|
||||
</p>
|
||||
<p>
|
||||
You will then be guided to re-encrypt your choices for final casting.
|
||||
</p>
|
||||
<input type="button" value="Verify Encryption" onclick="BOOTH.audit_ballot();" class="pretty" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#/if}
|
||||
|
||||
<br />
|
||||
|
||||
<p>Once you click "Submit", the unencrypted version of your ballot will be destroyed, and only the encrypted version will remain. The encrypted version will be submitted to the Helios server.</p>
|
||||
|
||||
<button id="proceed_button" onclick="BOOTH.cast_ballot();">Submit this Vote!</button><br />
|
||||
<div id="loading_div"><img src="loading.gif" id="proceed_loading_img" /></div>
|
||||
|
||||
|
||||
|
||||
<form method="POST" action="{$T.cast_url}" id="send_ballot_form" class="prettyform">
|
||||
<input type="hidden" name="election_uuid" value="{$T.election_uuid}" />
|
||||
<input type="hidden" name="election_hash" value="{$T.election_hash}" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta charset="UTF-8">
|
||||
<title>Helios Voting Booth</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/booth.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/forms.css" />
|
||||
|
|
@ -26,10 +27,14 @@
|
|||
|
||||
<script language="javascript" src="js/20160507-helios-booth-compressed.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<span style="float:right; padding: 7px 15px 5px 10px;">[<a href="javascript:BOOTH.exit();">exit</a>]</span>
|
||||
<div id="banner">Helios Voting Booth</div>
|
||||
<div id="banner" class="edge">
|
||||
<div class="box"></div>
|
||||
<div class="box"><span>Helios Voting Booth</span></div>
|
||||
<div class="box"><span><a href="javascript:BOOTH.exit();">exit</a></span></div>
|
||||
</div>
|
||||
<div id="content">
|
||||
|
||||
<div id="header">
|
||||
|
|
@ -592,9 +597,13 @@ BOOTH.do_done = function() {
|
|||
|
||||
</script>
|
||||
<div id="page">
|
||||
<div id="progress_div" style="display:none; width: 500px; margin:auto;">
|
||||
<table width="100%">
|
||||
<tr><td id="progress_1">(1) Select</td><td id="progress_2">(2) Review</td><td id="progress_3">(3) Submit</td></tr>
|
||||
<div id="progress_div" style="display:none">
|
||||
<table>
|
||||
<tr>
|
||||
<td id="progress_1">(1) Select</td>
|
||||
<td id="progress_2">(2) Review</td>
|
||||
<td id="progress_3">(3) Submit</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="election_div" class="panel">
|
||||
|
|
@ -636,7 +645,7 @@ BOOTH.do_done = function() {
|
|||
|
||||
<br clear="both" />
|
||||
</div>
|
||||
<div id="footer"> </div>
|
||||
<div id="footer" class="edge"> </div>
|
||||
</div>
|
||||
<div id="applet_div">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
python-3.6.13
|
||||
python-3.6.14
|
||||
|
|
|
|||
Loading…
Reference in New Issue