/
index.html
113 lines (112 loc) · 4.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Honk.ci</title>
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<meta charset="utf-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel="stylesheet" href="style.css" />
<script src="libs/jquery.js"></script>
<script src="libs/jquery-ui.js"></script>
<script src="libs/shake.js"></script>
<script>
var shakeEvent = new Shake({threshold: 15});
shakeEvent.start();
window.addEventListener('shake', function(){
$( "#bell" ).effect({effect: "shake", distance: 400, times: 10, direction: "left" });
$("#to-do-list").effect({effect: "shake", distance: 50, times: 10, direction: "right"});
}, false);
var timestamp = 0;
var previousCursorPositionY = 0;
var previousCursorPositionX = 0;
var previousTriggerTime = 0;
$(document).mousemove(function(e) {
var now = Date.now();
var currentCursorPositionY = e.screenY;
var currentCursorPositionX = e.screenX;
var xDistance = Math.abs(currentCursorPositionX - previousCursorPositionX);
var yDistance = Math.abs(currentCursorPositionY - previousCursorPositionY);
var distance = Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2))
var deltaTime = now - timestamp;
var speed = Math.round(distance / deltaTime);
if (speed > 15 && (now - previousTriggerTime) > 3000) {
trigger = Date.now();
$( "#bell" ).effect({effect: "shake", distance: 400, times: 5, direction: "left" });
$("#to-do-list").effect({effect: "shake", distance: 50, times: 5, direction: "right"});
}
previousCursorPositionY = currentCursorPositionY;
previousCursorPositionX = currentCursorPositionX;
timestamp = now;
});
</script>
</head>
<body>
<main>
<section id="to-do-list">
<heading class="to-do-heading"><b>to do:</b></heading>
<div id="bell"><img src="assets/bell.png"></div>
<div class="to-do-items">
<div class="item">
<input type="checkbox" id="item1" checked/>
<label for="item1"></label>
<span>Become a contributor.</span>
</div>
<div class="item">
<input type="checkbox" id="item2" checked />
<label for="item2"></label>
<span>Become a member.</span>
</div>
<div class="item">
<input type="checkbox" id="item3" checked/>
<label for="item3"></label>
<span>Goto contributor summit.</span>
</div>
<div class="item">
<input type="checkbox" id="item4" />
<label for="item4"></label>
<span>Find <a href="https://twitter.com/jeefy" target="_newpage">@jeefy</a> or <a href="https://twitter.com/mrbobbytables" target="_newpage">@mrbobbytables</a></span>
</div>
<div class="item child-item">
<input type="checkbox" id="item5" />
<label for="item5"></label>
<span> <b>Honk</b> at them for a prize!</span>
</div>
<div class="item child-item">
<input type="checkbox" id="item6" />
<label for="item6"></label>
<span>Be one of the <b>first of 5</b> to tell them what triggers <b>Goose Honkin</b> to honk for a bonus prize!</span>
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item child-item">
<input type="checkbox" id="item7" />
<label for="item7"></label>
<span>Be the first to find the hidden bell for the <b>GRAND PRIZE.</b></span>
</div>
<div class="item">
</div>
<div class="item">
<input type="checkbox" id="item8" checked/>
<label for="item8"></label>
<span>Rake in the lake</span>
</div>
<div class="item">
</div>
<div class="item">
<input type="checkbox" id="item9" />
<label for="item9"></label>
<span>Shake device in frustration. :)</span>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</section>
<!-- honk -->
</main>
</body>
</html>