-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
161 lines (150 loc) · 8.2 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
This is a simple website you can go to when your coworker leaves his desk
without locking his screen. This prank is, IMHO, funnier (and less harmful)
than posting silly messages on his wall or event sending emails!
Brought to you by Sébastien Saunier - http://saunier.me
-->
<title>Lock your screen!</title>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
background: url('noise.png') black;
color: white;
padding: 1em;
}
h1 { font-size: 2em; margin: 2em auto; width: 20em; text-align: center; }
h2 { text-align: center; }
#main { text-align: center; display: none; }
#lys-img { max-width: 600px; max-height: 400px; }
img { border: 4px #111 solid; max-width: 80%; }
#footer {
position: fixed;
left: 50%;
bottom: 12px;
color: #888;
margin-left: -150px;
width: 300px;
text-align: center;
font-size: 11px;
}
#footer a { color: #999; text-decoration: none; }
#footer a:hover { text-decoration: underline; color: #FAFAD2; }
#footer span { display: none; }
</style>
<meta name="google-site-verification" content="sujQ2hhQFXtGn-iIOKJuJafyOe_l9yw26Jg_qvb94fA" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
<div id="main">
<h1 id="caption">Baby Polar Bear is disappointed that you didn't lock your screen.</h1>
<a href="http://sebastien.saunier.me">
<img src="img/sad-polar-bear.jpg" alt="Baby Polar Bear" id="lys-img" />
</a>
</div>
<div>
<h2 id="timer">
</h2>
</div>
<div id="footer">
<a href="#" id="revealDetails">About</a>
<span>
Kindly brought to you by <a href="http://sebastien.saunier.me" id="cb">Sébastien Saunier</a> :)
</span>
|
<a href="https://github.com/ssaunier/lockyourscreen" target="_blank">Add pictures!</a>
</div>
<script type="text/javascript">
var PICTURES = [
{ src: 'img/sad-polar-bear.jpg', alt: "Baby Polar Bear"},
{ src: 'img/mister-t.jpg', alt: "Mister T", fullcaption: "Lock your screen, fool." },
{ src: 'img/grumpy-cat.jpg', alt: "Grumpy Cat" },
{ src: 'img/obama.jpg', alt: "Obama" },
{ src: 'img/charlize-theron.jpg', alt: "Charlize Theron" },
{ src: 'img/lisa-simpson.jpg', alt: "Lisa Simpson" },
{ src: 'img/the-captain.jpg', alt: 'The Captain' },
{ src: 'img/muhammad-sarim-akhtar.jpg', alt: "Muhammad Sarim Akhtar" },
{ src: 'img/elon-musk.jpg', alt: "Elon Musk" },
{ src: 'img/captain-holt.jpg', alt: "Captain Holt" },
{ src: 'img/lumbergh.jpg', alt: 'Lumbergh', fullcaption: "Yeah, if you could go ahead and lock your screen next time, that'd be great." },
{ src: 'img/mckayla.jpg', alt: 'McKayla Maroney', fullcaption: "McKayla is not impressed with your unlocked computer." },
{ src: 'img/cain-statue.jpg', alt: "Statue of Cain", fullcaption: "Cain is disappointed you forgot to lock your screen." },
{ src: 'img/disappointed-turtle.jpg', alt: "Disappointed turtle", fullcaption: "Disappointed turtle is disappointed you left your screen unlocked." },
{ src: 'img/dawson-crying.jpg', alt: "Crying Dawson", fullcaption: "You forgot to lock your screen, and you made Dawson cry." },
{ src: 'img/zoidberg.png', alt: "Zoidberg", fullcaption: "Who else but Zoidberg would forget to lock their screen?" },
{ src: 'img/darth-vader.jpg', alt: "Darth Vader", fullcaption: "Darth Vader finds your lack of lock disturbing." },
{ src: 'img/son-i-am-disappoint.jpg', alt: "Son I am disappoint", fullcaption: "You no lock screen? Son I am disappoint." },
{ src: 'img/disappointed-cat.png', alt: "Disappointed cat", fullcaption: "Disappointed cat is disappointed you left your screen unlocked." },
{ src: 'img/disappointed-cupid.jpg', alt: "Disappointed Cupid", fullcaption: "Cupid is not impressed with your unlocked screen." },
{ src: 'img/scary-robot.jpg', alt: "Scary robot", fullcaption: "Human, you must lock your screen. There will be no further warnings." },
{ src: 'img/yoda.jpg', alt: "Yoda in combat", fullcaption: "Lock your screen you must." },
{ src: 'img/upsetcat.jpg', alt: "Upset tabby cat", fullcaption: "You aren't chopped liver, lock your screen" },
{ src: 'img/orbweaver.jpg', alt: "Orb Weaver in web", fullcaption: "Lock your screen before you get tangled up" },
{ src: 'img/skunk.jpg', alt: "Skunk in grass", fullcaption: "It stinks that you didn't lock your screen." },
{ src: 'img/y-u-no.jpg', alt: "Y U NO", fullcaption: "Y U NO LOCK YOUR SCREEN" },
{ src: 'img/uncle-sam.jpg', alt: "Uncle Sam", fullcaption: "Uncle Sam wants you to lock your screen." },
{ src: 'img/one-does-not-simply.jpg', alt: "One does not simply", fullcaption: "One does not simply leave your screen unlocked." },
{ src: 'img/greta.jpg', alt: "Greta", fullcaption: "How dare you leave your screen unlocked." },
{ src: 'img/southpark-ski-instructor.jpg', alt: "Thumper the ski instructor", fullcaption: "If you forget to lock your screen, you're gonna have a bad time!"},
{ src: 'img/bernie-sanders.jpg', alt: "Bernie Sanders", fullcaption: "Bernie Sanders is disappointed that you didn't lock your screen."},
{ src: 'img/disappointed_dog.jpg', alt: "Disappointed dog", fullcaption: "Doggo is sad that you forgot to lock your screen."},
{ src: 'img/golum.jpg', alt: "Golum", fullcaption: "Gollum is disappointed that you forgot to put your precious lock on the screen, my precious!"}
];
window.onload = function() {
var about = document.getElementById('revealDetails');
about.addEventListener('click', revealDetails);
var cb = document.getElementById('cb');
cb.addEventListener('click', clickCb);
loadRandomPicture();
var start = Date.now();
setInterval(function() {
document.getElementById('timer').innerHTML = 'It has been ' + Math.floor((Date.now() - start) / 1000) + ' seconds since you\'ve been pwned 🙈'
}, 1000);
}
function revealDetails(e) {
e.preventDefault(); // Don't move to top
_gaq.push(['_trackEvent', 'Link', 'Click', 'About']);
this.parentNode.children[1].style.display = 'block';
this.style.display = 'none';
}
function clickCb(e) {
e.preventDefault(); // Don't navigate yet, wait for tracking first
var url = this.href;
_gaq.push(['_trackEvent', 'Link', 'Click', 'Cb']);
setTimeout(function() {
document.location.href = url;
}, 200);
}
function loadRandomPicture() {
var queryParams = new URLSearchParams(document.location.search);
var forcedPictureFromQuery = PICTURES.find(function (element) {
return element.src.includes("img/" + queryParams.get("img") + ".")
});
if (forcedPictureFromQuery !== undefined) {
var picture = forcedPictureFromQuery;
} else {
var picture = PICTURES[Math.floor(Math.random()*PICTURES.length)];
}
var img = document.getElementById('lys-img');
img.src = picture.src;
img.alt = picture.alt;
var caption = picture.fullcaption;
if (!caption) caption = picture.alt + " is disappointed that you didn't lock your screen.";
document.getElementById('caption').innerHTML = caption;
document.getElementById('main').style.display = 'block';
}
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17777460-1']);
_gaq.push(['_setDomainName', '.lockyourscreen.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>