mepwatch/index.html at production · TechToThePeople/mepwatch · GitHub

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      content="initial-scale=1, shrink-to-fit=no, width=device-width"
      name="viewport"
    />
  <title>MEPWatch — Making European Parliament Votes Transparent</title>
  <meta name="description" content="MEPWatch makes European Parliament voting records easy to explore, compare and use so citizens, journalists and civil society can hold decision-makers accountable." />

    <!-- CSS -->
    <link href="dist/css/main.css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <div class="collapse bg-primary-light" id="navbarHeader">
        <div class="container">
          <div class="row">
            <div class="col-sm-8 col-md-7 py-4">
              <h4 class=""><a href="proposal.html">About</a></h4>
              <p class=""></p>
            </div>
            <div class="col-sm-4 offset-md-1 py-4">
              <h4 class="">Contact</h4>
              <ul class="list-unstyled">
                <li>
                  <a href="https://twitter.com/eucampaign" class=""
                    >Follow on Twitter</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="navbar navbar-dark bg-primary box-shadow">
        <div class="container d-flex justify-content-between">
          <a href="#" class="navbar-brand d-flex align-items-center">
  <div id="svglogo">
    <object type="image/svg+xml" data="./10/img/logo.svg" height="200"></object>
  </div>
  <script>
    function loadSVG(url, containerId) {
      fetch(url)
        .then((response) => response.text())
        .then((data) => {
          // Inject the SVG content into the container
          const container = document.getElementById(containerId);
          container.innerHTML = data;
        });
    }

    // Load the SVG
    loadSVG("./10/img/logo.svg", "svglogo");
  </script>

MEP Watch
          </a>

          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarHeader"
            aria-controls="navbarHeader"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <svg class="icon"><use href="#menu" /></svg>
          </button>
        </div>
      </div>
    </header>

<body>

    <main role="main" class="d-flex flex-column">
        <div class="container">
      <header class="jumbotron text-center my-4" id="top">
          <h1 class="jumbotron-heading">
  <h1 class=jumbotron-heading">MEPWatch — Making European Parliament Votes Transparent</h1>
  <p><strong>Track how Members of the European Parliament really vote.</strong></p>
  <p>
    MEPWatch makes European Parliament voting records easy to explore, compare and use —
    so citizens, journalists and civil society can hold decision-makers accountable.
  </p>

  <nav>
    <a href="/10">🔎 Browse votes since 2024</a> |
    <a href="/9">🔎 2019-2024</a> |
    <!--a href="#how-it-works">👤 Search an MEP</a> |
    <a href="#how-it-works">📊 Compare parties</a-->
  </nav>
</header>


  <section id="how-it-works">
    <h2>How to use MEPWatch</h2>

              <ol>
      <li>Find a vote or topic</li>
      <p>
        Browse recent votes or explore past legislative terms. Open any vote to see how each MEP and political group voted.
      </p>
      <li>Look up an MEP or party</li>
      <p>
        Search by name, country or political group to see voting patterns. Find which MEP "rebelled" (voted differently than their party/group)
      </p>
      <li>Compare positions</li>
      <p>
        See how different groups, parties or countries voted on the same issue — and where they diverge.
      </p>
      <li>Use the data</li>
      <p>
        Use the information for advocacy, research, media work, campaigns or citizen accountability.
      </p>
              </ol>

    <p><em>All vote data comes from official European Parliament roll-call votes.</em></p>
  </section>

  <section id="why">
    <h2>Why transparency matters</h2>

    <ul>
      <li>
        <strong>🗳 Accountability</strong><br />
        Citizens can verify whether elected representatives act in line with their public promises.
      </li>

      <li>
        <strong>🔍 Clarity</strong><br />
        Voting records reveal real political differences beyond party branding and campaign slogans.
      </li>

      <li>
        <strong>📰 Public debate</strong><br />
        Journalists and civil society can base analysis and campaigns on verifiable data.
      </li>

      <li>
        <strong>🛡 Democratic trust</strong><br />
        Open data helps counter misinformation, disengagement and populist narratives.
      </li>
    </ul>
  </section>

  <section id="explore">
    <h2>What you can explore</h2>

    <ul>
      <li>✔ Roll-call votes from the current legislative term</li>
      <li>✔ Votes from 2019–2024 and 2014–2019</li>
      <li>✔ Individual MEP voting records</li>
      <li>✔ Political group voting behaviour</li>
      <li>✔ Issue-level comparisons</li>
    </ul>

    <p>
      <small>
        Note: Only roll-call votes record individual positions. Some votes in Parliament are still not recorded publicly.
      </small>
    </p>
  </section>

  <section id="transparency">
    <h2>Help improve transparency</h2>

    <p>
      Not all European Parliament votes are fully transparent yet.
    </p>

    <ul>
      <li>
        <strong>Some votes are taken by show of hands</strong>, meaning individual votes are not recorded.
        Citizens and organisations can encourage political groups to request roll-call votes on important issues.
      </li>
      <li>
        <strong>Some votes are hidden</strong>, meaning individual votes are recorded, but not published. This is a new tactic by right to far right groups to request it.
      </li>

      <li>
        <strong>Committee votes are not consistently published in reusable formats yet.</strong>
        Advocacy can help push for better access to legislative data.
      </li>
    </ul>

    <p>
      If your organisation wants to collaborate on transparency or data use, get in touch.
    </p>

    <p>
      <a href="mailto:info@mepwatch.eu">✉️ Contact us</a>
    </p>
  </section>

  <section id="cta">
    <h2>Democracy works best when voting is visible.</h2>
    <p>
      Explore how your representatives act — not just what they say.
    </p>

    <p>
      <a href="/10">Browse votes</a> |
      <a href="#how-it-works">Search an MEP</a>
    </p>
  </section>

</main>

    <!-- Optional JavaScript -->
    <script src="dist/js/main.js"></script>
    <script src="dist/js/dcbundle.js"></script>
    <svg class="d-none">
      <symbol id="menu" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
      </symbol>
      <symbol id="logo" viewBox="0 0 24 24">
        <path
          d="M6 13c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-3 .5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM6 5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm15 5.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM14 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-3.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zm-11 10c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm0-17c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM10 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 5.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm8 .5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm3 8.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM14 17c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-4-12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0 8.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm4-4.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-4c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"
        />
      </symbol>
    </svg>
  <style>
    #svglogo {position:relative; height:40px; margin-right: 10px;}
    #svglogo svg {width:auto;}
    #svglogo path, #svglogo line {fill:purple}
    circle {
      stroke-width: 2px;
    }
    circle:hover {
      animation: radiusAnimation 1s ease-in 2 alternate;
      transition: all 1s;
      stroke-width: 6px;
    }

    ol li {font-size: 1.2em}

    /* Define the CSS animation */
    @keyframes radiusAnimation {
      0% {
        stroke-width: 1px;
      }
      100% {
        stroke-width: 5px;
      }
    }
  </style>
  </body>
</html>