Commit 956c1411 authored by Stephane Glondu's avatar Stephane Glondu

Add style to booth

parent 9722f0e8
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{margin:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
\ No newline at end of file
@import url('reset.css');@import url('styled-elements.css');.clear{clear:both;height:1px;}
.inv{display:none;}
.alignleft{float:left;margin:5px 10px 5px 0px;}
body{line-height:1;color:#282828;background:#E5E4E2;font-family:Arial, Helvetica, sans-serif;font-size:100%;}
#wrapper{width:966px;margin:30px auto;background:#363636;min-height:700px;font-size:14px;line-height:1.5em;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
#header{height:200px;position:relative;z-index:10;}
#main{background:#ffffff;position:relative;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
#content{min-height:400px;overflow:hidden;margin-bottom:40px;}
#footer{position:relative;color:#fff;}
#logo{position:absolute;top:40px;left:30px;}
#content a{color:#0099FF;}
#content p{margin-bottom:20px;}
#content .line-divider{clear:both;border-bottom:1px solid #d7d7d7;padding-bottom:20px;margin-bottom:20px;}
#page-title-home{overflow:hidden;height:223px;margin-bottom:30px;background:#f2f1f1 url(../img/twitter-border.png) repeat-x bottom left;}
#page-title-home .title{display:block;font-family:"Minion Pro", serif;font-size:37px;line-height:65px;margin-left:40px;font-variant:small-caps;text-shadow:0 1px rgba(255, 255, 255, 1);}
#page-title-home .subtitle{display:block;font-size:20px;margin-left:45px;line-height:25px;color:#606060;}
#page-title{overflow:hidden;height:70px;margin-bottom:30px;background:#f2f1f1 url(../img/twitter-border.png) repeat-x bottom left;}
#page-title .title{display:block;float:left;font-family:"Minion Pro", serif;font-size:37px;line-height:65px;margin-left:40px;font-variant:small-caps;text-shadow:0 1px rgba(255, 255, 255, 1);}
#page-title .subtitle{display:block;float:left;margin-left:30px;line-height:90px;color:#606060;font-style:italic;}
body.home #header{height:430px;position:relative;z-index:10;}
body.home #header #headline{width:906px;margin:110px auto 40px auto;font-size:26px;line-height:1.5em;font-family:'Ubuntu', arial, serif;color:#ebe7e7;text-align:center;}
body.home #content{padding-top:250px;}
#headline a{text-decoration:none;color:#FFD800;}
h1,h2,h3,h4,h5,h6{line-height:1.4em;font-family:'Ubuntu', arial, serif;font-weight:lighter;}
h1{font-size:30px;}
h2{font-size:28px;}
h3{font-size:26px;}
h4{font-size:24px;}
h5{font-size:22px;}
h6{font-size:20px;}
.one-half,
.one-third,
.two-third,
.three-fourth,
.research-page-column,
.one-third-timetable,
.two-third-timetable,
.one-fourth{float:left;margin-right:30px;position:relative;}
.one-half{width:438px;}
.one-third{width:362px;margin-right:20px;margin-left:20px;text-align:justify;}
.one-third-timetable{width:316px;margin-right:20px;margin-left:20px;text-align:justify;}
.one-fourth{width:204px;}
.two-third{width:524px;margin-right:20px;margin-left:5px;text-align:justify;}
.two-third-timetable{width:570px;margin-right:20px;margin-left:5px;text-align:justify;}
.three-fourth{width:672px;}
.research-page-column{width:672px;margin-right:40px;margin-left:40px;text-align:justify;}
.last{clear:right;margin-right:0 !important;}
#social-holder{overflow:hidden;width:100%;padding-top:40px;}
.social{display:block;float:right;overflow:hidden;margin-right:20px;}
.social li{display:block;width:32px;height:32px;float:left;margin-right:10px;margin-bottom:10px;}
.social a{display:block;width:32px;height:32px;text-indent:-9000px;}
#nav{display:block;position:absolute;top:128px;left:30px;height:48px;width:906px;background:#f2f1f1;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
#nav>li{display:block;float:left;margin-left:10px;margin-top:12px;}
#nav>li:first-child{margin-left:150px;}
#nav>li>a{display:block;font-size:17px;color:#363636;text-decoration:none;padding:7px 10px 6px 10px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-shadow:0 1px rgba(255, 255, 255, 0.5);}
#nav>li>a:hover,
#nav>li.current-menu-item>a{color:#fff;background:#363636;text-shadow:none;}
#nav>li ul{display:block;margin-top:-1px;background:#ffd800;border-radius:0px 0px 10px 10px;-moz-border-radius:0px 0px 10px 10px;-webkit-border-radius:0px 0px 10px 10px;}
#nav>li>ul ul{margin-top:0px;border-radius:0px 10px 10px 10px;-moz-border-radius:0px 10px 10px 10px;-webkit-border-radius:0px 10px 10px 10px;}
#nav>li ul li a{display:block;padding:10px 15px;display:block;font-size:12px;color:#363636;text-decoration:none;}
#nav>li ul li a:hover{background:#363636;color:#fff;}
#nav>li ul li:last-child a:hover{border-radius:0px 0px 10px 10px;-moz-border-radius:0px 0px 10px 10px;-webkit-border-radius:0px 0px 10px 10px;}
#page-content{float:left;width:826px;margin-left:50px;}
#twitter{position:relative;background:#f2f1f1;height:65px;width:100%;background:#f2f1f1 url(../img/twitter-border.png) repeat-x;}
#content .pager li a{display:block;width:100%;height:100%;line-height:33px;text-align:center;text-decoration:none;color:#ffd800;background:#363636;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}
#content .pager li:hover a,
#content .pager li.active a{color:#363636;background:#ffd800;}
#footer #bottom{position:relative;width:100%;font-size:12px;line-height:1.5em;line-height:80px;text-align:center;color:#868686;background:url(../img/bottom-shadow.png) repeat-x;}
#footer #bottom a{color:#ffd800;text-decoration:none;}
#footer #bottom #to-top{position:absolute;right:30px;top:26px;width:33px;height:33px;background:url(../img/to-top.png) no-repeat;cursor:pointer;}
.ui-accordion .ui-accordion-header,
.toggle-trigger{cursor:pointer;margin-top:1px;position:relative;padding-bottom:5px;background:#f1f1f1;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
.ui-accordion .ui-accordion-header:hover,
.toggle-trigger:hover{background:#eceaea;}
#content .ui-accordion .ui-accordion-header>a,
#content .toggle-trigger>a{text-decoration:none;color:#363636;font-size:14px;padding-left:10px;}
.ui-accordion .ui-accordion-content,
.toggle-container{border-top:0 none;margin-bottom:2px;padding:20px 20px;position:relative;top:1px;margin-right:5px;text-align:justify;}
.toggle-trigger-res{<!-- cursor:pointer;-->
margin-top:1px;position:relative;padding-bottom:5px;background:#f1f1f1;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
.toggle-trigger-res:hover{background:#eceaea;}
#content .toggle-trigger-res>a{text-decoration:none;color:#363636;font-size:14px;padding-left:10px;}
.toggle-container-res{border-top:0 none;margin-bottom:2px;padding:20px 20px;position:relative;top:1px;margin-right:5px;}
.left-align{float:left;margin:8px 18px 18px 0;display:block;}
.right-align{float:right;margin:0px 0px 0px 10px;display:block;}
.boxed{background:white;padding:5px;border:1px solid #cccccc;}
.border{border:2px solid white;}
#content a.link-button,
#content a.link-button-light{display:table;background:#363636;color:#f1f1f1;text-decoration:none;padding:3px 10px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
#content a.link-button-light{background:#f1f1f1;color:#363636;}
#content a.link-button:hover{background:#000000;}
#content a.link-button-light:hover{background:#cecece;}
table, td, th{vertical-align:middle;}
table{border-collapse:separate;border-spacing:0;border-top:1px solid white;margin-bottom:28px;width:100%;text-align:left;}
th{border-top:5px solid #555555;color:#ffffff;padding:10px;text-transform:uppercase;background-color:#49494b;}
td{padding:10px;}
td, th{border-bottom:1px solid #1f1f1f;}
.lists-arrow ul,
.lists-star ul,
.lists-arrow ul{list-style-image:url(../img/bullets/arrow.png);line-height:1.5em;}
.lists-star ul{list-style-image:url(../img/bullets/star.png);line-height:1.5em;}
.sf-menu, .sf-menu *{margin:0;padding:0;list-style:none;}
.sf-menu{line-height:1.0;}
.sf-menu ul{position:absolute;top:-999em;width:10em;}
.sf-menu ul li{width:100%;}
.sf-menu li:hover{visibility:inherit;}
.sf-menu li{float:left;position:relative;}
.sf-menu a{display:block;position:relative;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul{left:0;top:2.5em;z-index:99;}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul{top:-999em;}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul{left:10em;top:0;}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul{top:-999em;}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul{left:10em;top:0;}
\ No newline at end of file
......@@ -67,6 +67,10 @@ let version_rule () =
in
rule "BUILD -> belenios_version.ml" ~deps ~prod builder
let copy_static f =
let base = Filename.basename f in
copy_rule base f ("src/static" / base)
let () = dispatch & function
| Before_options ->
......@@ -119,4 +123,13 @@ let () = dispatch & function
copy_rule "tool_js_tkeygen.js" "src/tool/tool_js_tkeygen.js" "src/static/tool_js_tkeygen.js";
copy_rule "tool_js_credgen.js" "src/tool/tool_js_credgen.js" "src/static/tool_js_credgen.js";
List.iter
copy_static
[
"ext/css/reset.css";
"ext/css/styled-elements.css";
"ext/css/style.css";
"ext/css/superfish.css";
]
| _ -> ()
......@@ -174,6 +174,7 @@ let rec createQuestionNode sk params question_div num_questions i prev (q, answe
let () =
(* previous button *)
let btns = document##createElement (Js.string "div") in
btns##setAttribute (Js.string "style", Js.string "text-align: center;");
let () =
match prev with
| [] ->
......@@ -268,6 +269,8 @@ let addQuestions sk params qs =
)
let createStartButton params intro_div qs =
let div = Dom_html.createDiv document in
div##setAttribute (Js.string "style", Js.string "text-align:center;");
let b = document##createElement (Js.string "button") in
let t = document##createTextNode (Js.string "Start") in
b##onclick <- Dom_html.handler (fun _ ->
......@@ -283,7 +286,8 @@ let createStartButton params intro_div qs =
Js._false
);
Dom.appendChild b t;
b
Dom.appendChild div b;
div
let drop_trailing_newline s =
let n = String.length s in
......
......@@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Belenios Booth</title>
<link rel="stylesheet" type="text/css" media="screen" href="booth.css" />
<script src="sjcl.js"></script>
<script src="jsbn.js"></script>
<script src="jsbn2.js"></script>
......@@ -10,68 +11,76 @@
<script src="booth.js"></script>
</head>
<body>
<div id="election_loader" style="display:none;">
<h1>Election loader</h1>
Election parameters:
<div><textarea id="election_params" rows="1" cols="80"></textarea></div>
<div><button id="load_election">Load election</button></div>
</div>
<div id="booth_div" style="display:none;">
<div align="center">
<h1 id="election_name"></h1>
<p id="election_description"></p>
<div>
<div>Election UUID: <span id="election_uuid"></span></div>
<div>Election Fingerprint: <span id="election_fingerprint"></span></div>
</div>
<div id="wrapper">
<div id="election_loader" style="display:none;">
<h1>Election loader</h1>
Election parameters:
<div><textarea id="election_params" rows="1" cols="80"></textarea></div>
<div><button id="load_election">Load election</button></div>
</div>
<div id="intro">
<p>To cast a vote, you will be led through the following steps. If you have not yet logged in, you will be asked to do so at the very end of the process.</p>
<ol>
<li><b>Enter</b> your credential.</li>
<li>
<b>Select</b> your options.
<div>Answer the questions, and review your choices.</div>
</li>
<li>
<b>Encrypt</b> your selection.
<div>Your selection is encrypted safely inside your browser.</div>
<div>A smart ballot tracker is given to let you track your ballot.</div>
</li>
<li>
<b>Submit</b> your encrypted ballot.
<div>Proceed to log in and cast your encrypted ballot for tallying.</div>
</li>
</ol>
</div>
<div id="question_div"></div>
<div id="plaintext_div" style="display:none;">
<h2>Review your ballot</h2>
<div id="pretty_choices"></div>
<div style="display:none;">
Plaintext raw ballot:
<div><textarea id="choices" rows="1" cols="80" readonly="readonly"></textarea></div>
</div>
<div id="encrypting_div">
Please wait while your ballot is being encrypted...
<img src="encrypting.gif"/>
<div id="booth_div" style="display:none;">
<div id="header">
<div align="center">
<h1 id="election_name"></h1>
<p id="election_description"></p>
</div>
</div>
<div id="ballot_div" style="display:none;">
<form id="ballot_form" method="POST">
<div id="main">
<div id="intro">
<p>To cast a vote, you will be led through the following steps. If you have not yet logged in, you will be asked to do so at the very end of the process.</p>
<ol>
<li><b>Enter</b> your credential.</li>
<li>
<b>Select</b> your options.
<div>Answer the questions, and review your choices.</div>
</li>
<li>
<b>Encrypt</b> your selection.
<div>Your selection is encrypted safely inside your browser.</div>
<div>A smart ballot tracker is given to let you track your ballot.</div>
</li>
<li>
<b>Submit</b> your encrypted ballot.
<div>Proceed to log in and cast your encrypted ballot for tallying.</div>
</li>
</ol>
</div>
<div id="question_div"></div>
<div id="plaintext_div" style="display:none;">
<h2>Review your ballot</h2>
<div id="pretty_choices"></div>
<div style="display:none;">
Encrypted ballot:
<div>
<textarea id="ballot" rows="1" cols="80" name="encrypted_vote" readonly="readonly"></textarea>
</div>
Plaintext raw ballot:
<div><textarea id="choices" rows="1" cols="80" readonly="readonly"></textarea></div>
</div>
<p>
Your ballot has been successfully encrypted!
Your smart ballot tracker is <span id="ballot_tracker"></span>.
</p>
<input type="submit" value="Confirm and submit"/>
</form>
<center>
<div id="encrypting_div">
<p>Please wait while your ballot is being encrypted...</p>
<img src="encrypting.gif"/>
</div>
<div id="ballot_div" style="display:none;">
<form id="ballot_form" method="POST">
<div style="display:none;">
Encrypted ballot:
<div>
<textarea id="ballot" rows="1" cols="80" name="encrypted_vote" readonly="readonly"></textarea>
</div>
</div>
<p>Your ballot has been successfully encrypted!</p>
<p>Your smart ballot tracker is <span id="ballot_tracker"></span>.</p>
<input type="submit" value="Confirm and submit"/>
</form>
</div>
<button onclick="location.reload();">Cancel</button>
</center>
</div>
</div>
<div id="footer">
<div id="bottom">
<div>Election UUID: <span id="election_uuid"></span></div>
<div>Election Fingerprint: <span id="election_fingerprint"></span></div>
</div>
</div>
<button onclick="location.reload();">Cancel</button>
</div>
</div>
</body>
......
@import url('style.css');
@import url('superfish.css');
#page-title-home {
height:223px;
}
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
#wrapper {
min-height: 0px;
}
#header {
color: #ffffff;
height: 80px;
}
#main {
border-radius: 0px 0px 0px 0px;
padding: 10px;
}
#footer #bottom {
line-height: 1.5em;
}
......@@ -4,4 +4,9 @@ jsbn2.js
random.js
booth.js
encrypting.gif
reset.css
styled-elements.css
style.css
superfish.css
booth.css
vote.html
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment