-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
182 lines (157 loc) · 6.57 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spark: Summer Solstice Party 2020</title>
<link href="/spark/styles.css" rel="stylesheet">
<link rel='manifest' href='/spark/manifest.webmanifest'>
</head>
<body>
<header class="page-header"> </header>
<main class="page-main">
<p>Here is an <strong>idea</strong> presented to the participants of Bonfire in Geneva:</p>
<section class="idea-description">
<h1 class="idea-description-title">Gather for a brunch and discussion about crypto­currency</h1>
<p class="idea-description-text">Let us get together for a fine brunch on Sunday morning. We are eager to share learnings on the usage of crypto. Here are photos from a recent event:</p>
<img class="idea-description-picture" src="/spark/crypto-brunch-1.jpg">
<img class="idea-description-picture" src="/spark/crypto-brunch-2.jpg">
<img class="idea-description-picture" src="/spark/crypto-brunch-3.jpg">
<p class="idea-description-text">The event takes place on a weekend in October in the Geneva area.</p>
</section>
<form action="/spark/commit">
<div id="commit" style="display: block;">
<p class="question"><strong>How passionate are you about this idea?</strong></p>
<canvas id="flame"></canvas>
<div class="commit-range">
<input type="range" min="0" max="100" id="range" />
<p class="range-description">
<button type="button" id="range-none" class="range-description-button">Not at passionate</button>
<button type="button" id="range-full" class="range-description-button">Very passionate</button>
</p>
</div>
<input type="hidden" name="amount" id="amount" value="50" />
<script>
const canvas = document.getElementById('flame');
const range = document.getElementById('range');
const rangeNone = document.getElementById('range-none');
const rangeFull = document.getElementById('range-full');
const amount = document.getElementById('amount');
let stage;
let width;
let height = 300;
let particles = [];
let max = 60;
let posX = 0;
let posY = 0;
let speed = 2;
let size = 10;
let isFirstInteraction = true;
let request;
function Particle(x, y, xs, ys) {
this.x = x;
this.y = y;
this.xs = xs;
this.ys = ys;
this.life = 0;
}
function resizeCanvas() {
setTimeout(function () {
width = window.innerWidth > 500 ? 500 : window.innerWidth;
canvas.width = width;
canvas.height = height;
canvas.style.width = width - 15 + "px";
canvas.style.height = height + "px";
posX = canvas.width / 2;
posY = canvas.height * 0.9;
stage.globalCompositeOperation = "lighter"
}, 0);
}
// Code adapted from: https://codepen.io/davepvm/pen/Hhstl
function update() {
request = requestAnimationFrame(update)
for (let i = 0; i < 10; i++) {
let p = new Particle(posX, posY, (Math.random() * 2 * speed - speed) / 2, 0 - Math.random() * 2 * speed);
particles.push(p);
}
stage.clearRect(0, 0, width, height);
for (i = 0; i < particles.length; i++) {
stage.fillStyle = "rgba(" + (260 - (particles[i].life * 2)) + "," + ((particles[i].life * 2) + 50) + "," + (particles[i].life * 2) + "," + (((max - particles[i].life) / max) * 0.4) + ")";
stage.beginPath();
stage.arc(particles[i].x, particles[i].y, (max - particles[i].life) / max * (size / 2) + (size / 2), 0, 2 * Math.PI);
stage.fill();
particles[i].x += particles[i].xs;
particles[i].y += particles[i].ys;
particles[i].life++;
if (particles[i].life >= max) {
particles.splice(i, 1);
i--;
}
}
}
function onRangeInput() {
size = range.value / 100 * 20;
speed = range.value > 50 ? 2 : 1;
// Only start the flame animation upon interaction
if (isFirstInteraction) {
requestAnimationFrame(update);
let submitElement = document.getElementById('submit');
if (submitElement !== null) {
submitElement.disabled = false;
}
isFirstInteraction = false;
}
}
range.addEventListener('change', function () {
amount.value = range.value;
});
range.addEventListener('input', onRangeInput);
rangeFull.addEventListener('click', function () {
range.value = 100;
onRangeInput();
});
rangeFull.addEventListener('click', function () {
range.value = 100;
onRangeInput();
});
rangeNone.addEventListener('click', function () {
range.value = 0;
onRangeInput();
});
const canvasSupported = canvas.getContext;
if (canvasSupported) {
stage = canvas.getContext("2d");
resizeCanvas();
// Makes the colors add onto each other, producing that nice white in the middle of the fire
stage.globalCompositeOperation = "xor";
window.addEventListener("resize", function () {
resizeCanvas();
});
cancelAnimationFrame(request);
} else {
canvas.parentNode.removeChild(canvas);
}
</script>
</div>
<input id="submit" type="submit" class="button" value="Next" disabled>
<script>
let params, participated = false;
try {
params = new URLSearchParams(window.location.search);
participated = params.get('participated') === '1';
} catch (error) { }
if (participated) {
console.log('participated')
const commitFormElment = document.querySelector('#commit');
if (commitFormElment !== null) {
commitFormElment.style.display = 'none';
}
}
</script>
</form>
</main>
<footer class="page-footer">
<small><a href="/">Bonfire.link Geneva</a><br>Made with ❤️ at <a href="http://theport.ch/">THE Port</a> Hackathon 2019</small>
</footer>
</body>
</html>