diff --git a/heliosbooth/css/booth.css b/heliosbooth/css/booth.css
index 716ada2b63398cef00c25d12e7113dd6bbe1cf75..e3b0d40744260efc1e141cda576cd63baeb8a41e 100644
--- a/heliosbooth/css/booth.css
+++ b/heliosbooth/css/booth.css
@@ -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;
-}
\ No newline at end of file
+}
diff --git a/heliosbooth/css/forms.css b/heliosbooth/css/forms.css
index ae4cbb7fcbf9e2208ab08c6585b68c7a5144fbe2..2048acd3c9a23e16bbe7bb2eee6288a12c1920d3 100644
--- a/heliosbooth/css/forms.css
+++ b/heliosbooth/css/forms.css
@@ -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;
}
-
diff --git a/heliosbooth/css/style.css b/heliosbooth/css/style.css
index 8834be848202e664c9b8692fd5d383bceee6bd27..166c65f6fd6733a4e9dcdb5d7faea34f4b15d5d5 100644
--- a/heliosbooth/css/style.css
+++ b/heliosbooth/css/style.css
@@ -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;
}
-
diff --git a/heliosbooth/single-ballot-verify.html b/heliosbooth/single-ballot-verify.html
index 113484fc7e0f4d10a6a2e6fa3123ec689d2c6d25..4a1e8b8e56258ea932d91bcbf456d9048ceb1054 100644
--- a/heliosbooth/single-ballot-verify.html
+++ b/heliosbooth/single-ballot-verify.html
@@ -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" />
diff --git a/heliosbooth/templates/footer.html b/heliosbooth/templates/footer.html
index 750fa43285c79eb4ec92e162e07a7cb97fd22d9e..4bad3ab8b9796f44dd2880e783a5bbf8e8c8cc28 100644
--- a/heliosbooth/templates/footer.html
+++ b/heliosbooth/templates/footer.html
@@ -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>
diff --git a/heliosbooth/templates/question.html b/heliosbooth/templates/question.html
index 8945e456ce7703cad8ab925c04c490435b375a7c..e5ddd62668070bbbcc358bf2b3bf6ab2fc229747 100644
--- a/heliosbooth/templates/question.html
+++ b/heliosbooth/templates/question.html
@@ -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>
diff --git a/heliosbooth/templates/seal.html b/heliosbooth/templates/seal.html
index d16ac3b8bb4a058199a6c7c3ef8ea174d2e71c0e..3f412c0fc026cda709a3dbcfbb21581499813af3 100644
--- a/heliosbooth/templates/seal.html
+++ b/heliosbooth/templates/seal.html
@@ -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,16 +18,30 @@ 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}
-<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>
+<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}" />
diff --git a/heliosbooth/vote.html b/heliosbooth/vote.html
index 7ac836be7179fc5c6df63eae7659166219c77881..3f42230fbca5471f9289733cc99b9c8b03327f10 100644
--- a/heliosbooth/vote.html
+++ b/heliosbooth/vote.html
@@ -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>
diff --git a/runtime.txt b/runtime.txt
index 0c89a2d2fcc8afa6b3b701fecccdbc6fb1b63c97..03b22563a2f7abd5acc4f5fe022b856ec27047bf 100644
--- a/runtime.txt
+++ b/runtime.txt
@@ -1 +1 @@
-python-3.6.13
+python-3.6.14