app/views/layouts/home.html.erb
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<meta name="theme-color" content="#2196F3">
<title>The Anchorman | Drop your anchor</title>
<%= stylesheet_link_tag 'home' %>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css" />
<![endif]-->
</head>
<body id="top" class="scrollspy">
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/aspushkinus/take_dat_shit">Fork me on GitHub</a>
</div>
</div>
<!-- Pre Loader -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!--Navigation-->
<div class="navbar-fixed">
<nav id="nav_f" class="default_color" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#top" class="brand-logo">The Anchorman</a>
<ul id="nav-mobile" class="right side-nav">
<li><a href="#details">Details</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#">Sign Up</a></li>
</ul><a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</div>
</div>
</nav>
</div>
<!--Hero-->
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<h1 class="text_h center header cd-headline letters type">
<span>I Love</span>
<span class="cd-words-wrapper waiting">
<b class="is-visible">waiting</b>
<b>bowel anxiety</b>
<b>to pinch a loaf</b>
</span>
</h1>
<div class="row">
<div class="container">
<p id="toilet_state" class="z-depth-4 white-text toilet toilet-available center-align">We take our crap seriously.</p>
</div>
</div>
</div>
</div>
<!--Intro and features-->
<div id="details" class="section scrollspy">
<div class="container">
<div class="row">
<div class="col s12">
<h2 class="center header text_h2">Have you ever had to <span class="span_h2">wait 30+ minutes</span> to drop the anchor?
This is incredible, but a lot of people suffer from it.
</h2>
</div>
<div class="col s12 m4 l4">
<div class="center promo promo-example">
<i class="mdi-image-flash-on"></i>
<h5 class="promo-caption">Stay calm</h5>
<p class="light center">That feeling when the "turtle" is about to show its head from the shell... Relax and check if the toilet is available online.
No need to humiliate yourself by going there and seeing that door closed again.</p>
</div>
</div>
<div class="col s12 m4 l4">
<div class="center promo promo-example">
<i class="mdi-social-group"></i>
<h5 class="promo-caption">Get notified</h5>
<p class="light center">Receive toilet availability notifications on your smart phone and computer in near real-time,
so that you could run like hell before somebody else landed their butt on the "oval office".</p>
</div>
</div>
<div class="col s12 m4 l4">
<div class="center promo promo-example">
<i class="mdi-hardware-desktop-windows"></i>
<h5 class="promo-caption">Enjoy privacy</h5>
<p class="light center">Sit back and relax while you defecate: read a book, check your Twitter or Facebook - be creative.</p>
</div>
</div>
</div>
</div>
</div>
<!--Parallax-->
<div class="parallax-container">
<div class="parallax"><img src="images/cam13_006.jpg"></div>
</div>
<!--Footer-->
<footer id="contact" class="page-footer default_color scrollspy">
<div class="container">
<div class="row">
<div class="col l5 s12 white-text">
<h5>The project</h5>
<p>
I'm using the revolutionary toilet occupancy monitoring technology:
an advanced magnetic door sensor ($3) allows me to track the occupancy status of the toilet.
</p>
<p>
This website is open source, so if you found a bug - go fix it yourself here:
<a href="https://github.com/aspushkinus/take_dat_shit" class="white-text">https://github.com/aspushkinus/take_dat_shit</a>
</p>
</div>
<div class="col l1 s1 white-text">
</div>
<div class="col l3 s12">
<h5 class="white-text">TDS</h5>
<ul>
<li><a class="white-text" href="http://alex.shovik.com/">Home</a></li>
<li><a class="white-text" href="http://alex.shovik.com">Blog</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Social</h5>
<ul>
<li>
<a class="white-text" href="https://twitter.com/aspushkinus">
<i class="small fa fa-twitter-square white-text"></i> Twitter
</a>
</li>
<li>
<a class="white-text" href="https://www.facebook.com/ashovik">
<i class="small fa fa-facebook-square white-text"></i> Facebook
</a>
</li>
<li>
<a class="white-text" href="https://github.com/aspushkinus">
<i class="small fa fa-github-square white-text"></i> Github
</a>
</li>
<li>
<a class="white-text" href="https://www.linkedin.com/pub/alex-kovshovik/8/258/453">
<i class="small fa fa-linkedin-square white-text"></i> LinkedIn
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright default_color">
<div class="container">
Made by <a class="white-text" href="http://alex.shovik.com">Alex Kovshovik</a>. Thanks to <a class="white-text" href="http://joashpereira.com">Joash Pereira</a>
and <a class="white-text" href="http://materializecss.com/">Materialize CSS.</a>
</div>
</div>
</footer>
<%= javascript_include_tag 'home' %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44951720-2', 'auto');
ga('send', 'pageview');
</script>
<script>
$(document).ready(function() {
var url = 'http://' + window.location.hostname + ':3001';
var socket = io(url);
var lastData = null;
var notificationEnabled = false;
var notificationRequested = false;
function updateToilet(data) {
var now = new Date();
var updatedAt = new Date(data.updated_at);
var updatedTimeAgoWords = timeAgoInWords(updatedAt);
var keepaliveAgoMilliseconds = now - new Date(data.last_keep_alive_at);
var additionalOccupiedEmotion = ' :(';
// Longer than 8 minutes.
if (now - updatedAt > 480000) {
additionalOccupiedEmotion = '. GEEZAZ! Light a match!'
}
if (notificationEnabled && notificationRequested && lastData.state != 'available' && data.state == 'available') {
var notification = new Notification('GO NOW! The toilet is AVAILABLE!');
notificationRequested = false;
}
if (keepaliveAgoMilliseconds > 65000) {
$('#toilet_state').removeClass('red');
$('#toilet_state').removeClass('toilet-occupied');
$('#toilet_state').removeClass('toilet-available');
$('#toilet_state').addClass('toilet-offline');
$('#toilet_state').html('The toilet is <b>OFFLINE!</b> Blame <u>David G.</u>')
} else if (data.state == 'available') {
$('#toilet_state').removeClass('red');
$('#toilet_state').removeClass('toilet-occupied');
$('#toilet_state').removeClass('toilet-offline');
$('#toilet_state').addClass('toilet-available');
$('#toilet_state').html('<b>AVAILABLE</b> since ' + updatedTimeAgoWords + ' :)')
} else {
var occupiedPhrase = ' since ' + updatedTimeAgoWords + additionalOccupiedEmotion;
if (notificationRequested) {
occupiedPhrase = '. Notification requested'
}
$('#toilet_state').addClass('red');
$('#toilet_state').removeClass('toilet-available');
$('#toilet_state').removeClass('toilet-offline');
$('#toilet_state').addClass('toilet-occupied');
$('#toilet_state').html('<b>OCCUPIED</b>' + occupiedPhrase);
}
lastData = data;
}
function periodicUpdate() {
updateToilet(lastData);
setTimeout(periodicUpdate, 2000);
}
// Get initial status of the toilet.
$.getJSON("/toilets/1", updateToilet);
// Listen to new toilet events.
socket.on('toilet/1', function(json) {
var data = JSON.parse(json);
updateToilet(data);
});
// Launch periodic toilet time update loop.
setTimeout(periodicUpdate, 2000);
// Check user's desktop notifications permissions.
if ("Notification" in window) {
if (Notification.permission === "granted") {
notificationEnabled = true;
} else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (permission === "granted") {
notificationEnabled = true;
}
});
}
}
if (notificationEnabled) {
console.log('Notifications are enabled');
}
// Wire the "notify me" button.
$('#toilet_state').click(function() {
notificationRequested = true;
updateToilet(lastData);
});
})
</script>
</body>
</html>