-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathvotingballot.html
More file actions
129 lines (119 loc) · 5.74 KB
/
votingballot.html
File metadata and controls
129 lines (119 loc) · 5.74 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Voting Page</title>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
</head>
<body style="background-color:#8A87FF;">
<div class="w3-container">
<div id="c1" class="w3-card-4 w3-dark-grey" style="margin-top: 20px;margin-left:20px;width:20%;display:inline-block;">
<div class="w3-container w3-center">
<h3>Candidate 1</h3>
<img src="bo.jpg" alt="Avatar" style="width:80%;height:268.84px;">
<h5>Barack Obama</h5>
<div class="w3-section">
<button id="b1" class="w3-button w3-green">Vote</button>
</div>
</div>
</div>
<!--</div>
<div class="w3-container">-->
<div id="c2" class="w3-card-4 w3-dark-grey" style="margin-top: 20px;margin-left:20px;width:20%;display:inline-block;">
<div class="w3-container w3-center">
<h3>Candidate 2</h3>
<img src="hc.jpg" alt="Avatar" style="width:80%">
<h5>Hillary Clinton</h5>
<div class="w3-section">
<button id="b2" class="w3-button w3-green">Vote</button>
</div>
</div>
</div>
<!--</div>
<div class="w3-container">-->
<div id="c3" class="w3-card-4 w3-dark-grey" style="margin-top: 20px;margin-left:20px;width:20%;display:inline-block;">
<div class="w3-container w3-center">
<h3>Candidate 3</h3>
<img src="dt.jpg" alt="Avatar" style="width:80%;height:268.84px;">
<h5>Donald Trump</h5>
<div class="w3-section">
<button id="b3" class="w3-button w3-green">Vote</button>
</div>
</div>
</div>
<p id="confirm" style="display:none;position:relative;left:570px;font-size:30px;">Confirm your vote?</p>
<br>
<button id="cancel" style="display:none;position:relative;left:850px;" onclick="myFunc()" class="w3-button w3-red">Cancel</button>
<form action="/voting/votingballot.php">
<button id="conbut1" style="display:none;position:relative;left:1050px;" class="w3-button w3-blue">Yes, Confirm</button>
<button id="conbut2" style="display:none;position:relative;left:1050px;" class="w3-button w3-blue">Yes, Confirm</button>
<button id="conbut3" style="display:none;position:relative;left:1050px;" class="w3-button w3-blue">Yes, Confirm</button>
</form>
</div>
<p id="demo" style="text-align:right;margin-top:170px;margin-right: 20px;font-size:36px;"></p>
<script>
b1.addEventListener("click",function(){
document.getElementById("c2").style.display = "none";
document.getElementById("c3").style.display = "none";
document.getElementById("b1").style.display = "none";
document.getElementById("c1").style.transform = "scale(1.5) translate(100px,100px)";
document.getElementById("confirm").style.display = "inline-block";
document.getElementById("cancel").style.display = "inline-block";
document.getElementById("conbut1").style.display = "inline-block";
document.getElementById("conbut2").style.display = "none";
document.getElementById("conbut3").style.display = "none";
/*document.getElementById("c1").style.transform = "translateY(20px)";*/
});
b2.addEventListener("click",function(){
document.getElementById("c1").style.display = "none";
document.getElementById("c3").style.display = "none";
document.getElementById("b2").style.display = "none";
document.getElementById("c2").style.transform = "scale(1.5) translate(100px,100px)";
document.getElementById("confirm").style.display = "inline-block";
document.getElementById("cancel").style.display = "inline-block";
document.getElementById("conbut2").style.display = "inline-block";
document.getElementById("conbut1").style.display = "none";
document.getElementById("conbut3").style.display = "none";
});
b3.addEventListener("click",function(){
document.getElementById("c2").style.display = "none";
document.getElementById("c1").style.display = "none";
document.getElementById("b3").style.display = "none";
document.getElementById("c3").style.transform = "scale(1.5) translate(100px,100px)";
document.getElementById("confirm").style.display = "inline-block";
document.getElementById("cancel").style.display = "inline-block";
document.getElementById("conbut3").style.display = "inline-block";
document.getElementById("conbut2").style.display = "none";
document.getElementById("conbut1").style.display = "none";
});
function myFunc(){
location.reload();
}
// Set the date we're counting down to
var countDownDate = new Date("Sep 22, 2018 01:52:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
window.location="charts.html";
}
}, 1000);
</script>
</body>
</html>