-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html.erb
77 lines (65 loc) · 2.3 KB
/
index.html.erb
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>beefing it all the way down to frown town</title>
<link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="assets/bootstrap.min.css">
<link rel="stylesheet" href="assets/beef.css">
<script src="assets/jquery.min.js"></script>
<script src="assets/imagesloaded.min.js"></script>
</head>
<body class="text-center">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<button class="btn btn-primary" type="button" id="beef">Gaze into the abyss</button>
<p><small class="text-muted"><span id="stats" class="text-danger"></span> images stored in BeefDB™</small></p>
</header>
<div id="loading">
<div id="loading-img" class="spinner-grow spinner-grow-lg" role="status" aria-hidden="true"></div>
</div>
<main role="main" class="inner cover">
<img id="beefing-it" class="img-fluid rounded" alt="Look at this and/or these idiot(s).">
</main>
<footer class="mt-auto">
<p><small class="text-muted">A product of <a href="https://weirdware.dev" class="text-muted">Weirdware, LLC</a></small></p>
</footer>
</div>
<script language="javascript" type="text/javascript">
var images = <%= @images %>;
function beefIt() {
var img = images[Math.floor(Math.random() * images.length)];
$('#beefing-it').imagesLoaded()
.done(function() {
$("#beefing-it").css("opacity", 1);
$("#loading").hide();
})
$('#beefing-it').attr('src', 'img/' + img);
}
$("#beef").click(function() {
$("#beefing-it").css("opacity", 0.1);
$("#loading").show();
beefIt();
});
$(document).ready(function() {
beefIt();
$('#stats').text(images.length);
});
</script>
</body>
</html>
<!--
CHANGELOG
* beefed.it v1.0 - virgin crapsite
* a shitty Rakefile
* an simple image tag that reloads on page reload
* no favicon
* no css at all
* uses a cdn for jquery
* beefed.it v2.0 - chad WEB 2.0 SERVERLESS LAMBDA MICROSERVICES
* a button to reload the image, so you don't have to reload the entire page
* some basic bitch ass css
* A MUFUKIN FAVICON!!!!
* a slightly less shitty Rakefile
* CaChInG FiLeZ iN NgINx
-->