-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
145 lines (120 loc) · 8.06 KB
/
index.html
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-136102323-1', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>KawalPemilu Visualized</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="author" content="Haries Ramdhani">
<meta name="description" content="An interactive data visualization of the result of Indonesia's recent election built using D3.js and KawalPemilu API">
<link rel="shortcut icon" type="image/png" href="src/assets/img/favicon.png" />
<meta property="og:image" content="https://raw.githubusercontent.com/hariesramdhani/kawalpemilu-visualized/master/src/assets/img/twitter_card.png">
<meta property="og:description" content="An interactive data visualization of the result of Indonesia's recent election built using D3.js and KawalPemilu API">
<meta property="og:title" content="KawalPemilu Visualized">
<!--Twitter-->
<meta name="twitter:title" content="KawalPemilu Visualized">
<meta name="twitter:description" content="An interactive data visualization of the result of Indonesia's recent election built using D3.js and KawalPemilu API">
<meta name="twitter:image" content="https://raw.githubusercontent.com/hariesramdhani/kawalpemilu-visualized/master/src/assets/img/twitter_card.png">
<meta name="twitter:card" content="summary_large_image">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="src/css/main.css">
<!-- Scripts -->
<script type="text/javascript" src="src/assets/scripts/d3.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
</head>
<body>
<div class="container" style="margin-bottom: 30px;">
<div class="ballot-container">
<img src="src/assets/img/valid.png" style="width: 100px;">
<div class="validity-description">
<h1 style="font-size: 45px;" id="valid-votes-percentage">0%</h1>
<h3 style="font-weight: normal;" id="valid-votes">0</h3>
</div>
</div>
<div class="ballot-container">
<img src="src/assets/img/ballot_box.png" style="width: 200px; padding: 0 40px 20px 40px;">
<div class="ballot-description">
<h1 style="font-size: 75px;" id="total-votes">Memuat...</h1>
<p style="font-size: 25px; font-weight: bold;">SUARA</p>
<p style="font-size: 15px;">Dari <span style="font-weight: bold;" id="received-TPS">0</span> TPS dengan <span id="unprocessed-TPS" style="font-weight: bold;">0</span> belum diproses dan <span id="error-TPS" style="font-weight: bold;">0</span> <a style="font-weight: 100; color: #D34E24" href="https://kawalpemilu.org/">bermasalah</a></p>
<p>Update terakhir pada <span id="last-update"></span></p>
<div id="share-buttons" style="display: flex; justify-content: center; align-items: center;">
<p style="font-weight: bold;">BAGIKAN KE</p>
<a href="https://www.facebook.com/sharer.php?u=https://hariesramdhani.github.io/kawalpemilu-visualized" target="_blank"><img src="src/assets/img/share/facebook.png" alt="Facebook" /></a>
<a href="https://twitter.com/share?url=https://hariesramdhani.github.io/kawalpemilu-visualized&text=KawalPemilu Visualized by @harieesss" target="_blank"><img src="src/assets/img/share/twitter.png" alt="Twitter" /></a>
</div>
</div>
</div>
<div class="ballot-container">
<img src="src/assets/img/invalid.png" style="width: 100px;">
<div class="validity-description">
<h1 style="font-size: 45px;" id="invalid-votes-percentage">0%</h1>
<h3 style="font-weight: normal;" id="invalid-votes">0</h3>
</div>
</div>
</div>
<div class="container" style="margin-bottom: 30px;">
<div class="button president-color" style="background-color: #99AE8C; color: black;" id="presidential-election-dom"><b>DOMESTIK</b></br><span style="font-size: 14px;">PRESIDEN</span></div>
<div class="button president-color" style="margin-right: 75px;" id="presidential-election-overseas"><b>LUAR NEGERI</b></br><span style="font-size: 14px;">PRESIDEN</span></div>
<div class="button legislative-color" id="legislative-election-dom"><b>DOMESTIK</b></br><span style="font-size: 14px;">LEGISLATIF</span></div>
<div class="button legislative-color" id="legislative-election-overseas"><b>LUAR NEGERI</b></br><span style="font-size: 14px;">LEGISLATIF</span></div>
<!-- <div class="button" id="foreign-election">LUAR NEGERI</div>
<div class="button" id="legislative-election">LEGISLATIF</div> -->
</div>
<div class="container" id="president">
<div class="vote-container">
<img src="src/assets/img/jokowi_maruf.png" style="width: 200px;">
<div class="vote-description">
<h3>JOKOWI-MA'RUF</h3>
<h1 id="jokomaruf-vote-percentage">0%</h1>
<h3 style="font-weight: normal;">(<span id="jokomaruf-vote">0</span>)</h3>
<p>Menang di <span id="jokomaruf-wins">0</span></p>
</div>
</div>
<div class="vote-container">
<div class="vote-description">
<h3>PRABOWO-SANDI</h3>
<h1 id="prabowosandi-vote-percentage">0%</h1>
<h3 style="font-weight: normal;">(<span id="prabowosandi-vote">0</span>)</h3>
<p>Menang di <span id="prabowosandi-wins">0</span></p>
</div>
<img src="src/assets/img/prabowo_sandi.png" style="width: 200px;">
</div>
</div>
<div class="container" id="legislative">
</div>
<div id="indonesia-choropleth" style="text-align: center;">
</div>
<div id="world-choropleth" style="text-align: center;">
</div>
<div class="container" id="color-by" style="margin-bottom: 40px;">
<h3 style="margin-bottom: 10px;">UBAH WARNA PETA MENURUT</h3>
<div style="display: flex; justify-content: center; align-items: center;">
<div class="color-by-button" id="jumlah-TPS" style="background-color: #929795">Jumlah TPS</div>
<div class="color-by-button" id="jumlah-TPS-diterima" style="background-color: #9097C0">Jumlah TPS Diterima</div>
<div class="color-by-button" id="jumlah-suara-sah" style="background-color: #7AC890">Jumlah Suara Sah</div>
<div class="color-by-button" id="jumlah-suara-tidak-sah" style="background-color: #F6735A">Jumlah Suara Tidak Sah</div>
</div>
</div>
<div class="container">
<p text-align: center;">Built using D3.js and <a href="http://kawalpemilu.org">KawalPemilu</a> API by <a href="http://twitter.com/harieesss">Haries Ramdhani</a>.<br/>Download the source code on <a href="https://github.com/hariesramdhani/kawalpemilu-visualized">GitHub</a>.<br/>Send feedback and inquiries to <u><b>hydrolizedmaltose@gmail.com</b></u></p>
</div>
<div id="window-panel">
</div>
<!--IT'S SUPPOSED TO BE THE ERROR MESSAGE-->
<!-- <div id="error-message" style="font-size: 30px; position: fixed; top: 25%; left: 25%; width: 50%; height: 50%; color: white; font-weight: bold; background-color: rgba(0, 0, 0, 0.6); display: flex; border-radius: 10px; align-items: center; justify-content: center;">
<p style="padding: 20px;">Maaf API KawalPemilu sedang down/sedang ada perubahan, harap coba lagi nanti. Laporkan bug/error di <a href="https://github.com/hariesramdhani/kawalpemilu-visualized">sini</a> atau mention @harieesss</p>
</div> -->
<script type="module" src="src/js/main.js"></script>
</body>
</html>