insideclaw.github.io/index.html at master · insideClaw/insideclaw.github.io · 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
<!DOCTYPE HTML>

<html lang="en">
<title>Transparent Raffle</title>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-PXN9ETMT5Q"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-PXN9ETMT5Q');
  </script>

</head>

<body><center>

  <div class="panel panel-primary">
    <div class="panel-heading">What is this?</div>
    <div class="panel-body">
        <p>A novel way to draw a random winner for your giveaway. Unlike traditional raffles, this one <b>cannot be rigged!</b></p>
        <p>The raffle algorithm pulls the latest news published by The Guardian newspaper, so <b>even the raffle holder can't know the outcome in advance, yet everyone can verify it for themselves</b>!</p>
        <button data-toggle="collapse" data-target="#usage">To use</button>
        <div id="usage" class="collapse">
        <p>To use, just decide what you want to hold a raffle for, then make your post telling everyone two things:<br>
        1. A <b>keyword</b> of your choice, such as "banana"<br>
        2. The <b>exact time</b> the raffle will be drawn.
        </p>

        <p>That's it! Close to raffle close time, assign every participant a number based on the order in which they've commented - like a lottery ticket.</p>
        <p>When the time is due, <i>anyone</i> can check the results using the two pieces of information! No data is stored at any point.</p>
        <p>Additionally, the code is Open Source and can be inspected for even further transparency.</p>
        </div>
  </div>

  <div class="container-fluid"><strong>
    <div class="alert alert-success">
      (1) Enter raffle ID (seed) to check for: <input type="text" id="input_raffleRef">
    </div>
    <div class="alert alert-success">
      (2) Enter number of participants: <input type="number" id="input_participants">
    </div>

    <div class="alert alert-success">
      <form name="form_customNames" id="form_customNames" onsubmit="return validateForm()">
          <i>(3) Enter custom participant names (optional):</i>
          <input type="button" id="btn_addName" value="Add participant" />
          <br/>
      </form>
    </div>
    </strong>

    <div class="alert alert-info">
      (4) Impartial external seed: <div id=news><i>will be derived automatically from The Guardian</i></div>
    </div>
  </div>


  <div class="container">
    <button type="button" class="btn btn-primary btn-lg" onClick="drawRaffle()">Check who wins!</button><br><br>
    <div class="jumbotron">
      <h1><span class="label label-primary" id="result">#</span></h1><br>
      <span class="label label-success" id="time-fetched">Result fetched at </span><br>
      <span class="label label-info" id="time-news-published">News published at </span>
    </div>
  </div>

  <button data-toggle="collapse" data-target="#extrainfo">Additional information</button>
  <div id="extrainfo" class="collapse">
    <ul class="list-group">
      <li class="list-group-item">Using any predetermined seed and the number of total participants at time of raffle close, fairly pick a raffle winner in a way that's reverse-engineerable, yet the outcome is unknown until the end.</li>
      <li class="list-group-item">The very purpose is that the code is Open Source and transparently <a href="https://github.com/insideClaw/insideclaw.github.io" target="_blank">available for inspection.</a> Anyone can verify the result at the time it happened, with some effort even retroactively.</li>
      <li class="list-group-item">Bear in mind news are sometimes published in rapid succession, so the result for the same seed and participants is only the same for any given time while the latest news last.</li>
      <li class="list-group-item">Designed and created by <a href="https://www.linkedin.com/in/mariostaykov/" target="_blank">Mario Staykov</a></li>
    </ul>
  </div>

<script src="raffle.js"></script>

</body>

</html>