Implement modal buttons and playback

public/main.css

@@ -17,20 +17,47 @@ html, body {
     position: absolute;
 }
 
-.modal.content {
-    width: 95%;
-}
-
 .modal.box {
     background-color: #A9D0F5;
     border-radius: 15px;
+    border-style: solid;
+    border-color: #FFFFFF;
     text-align: center;
-    margin: 6em auto;
     width: 50%;
+    padding: 1em;
     -webkit-animation-name: from_top;
     -webkit-animation-duration: 1.5s;
     animation-name: from_top;
     animation-duration: 1.5s;
+    position: absolute;
+    left: 25%;
+    top: 25%;
+    z-index: 10;
+}
+
+.modal.button {
+    border-radius: 5px;
+    border: solid;
+    color: #FFFFFF;
+    font-size: 1em;
+    padding: 15px 25px;
+    text-align: center;
+    transition-duration: 0.3s;
+}
+
+.modal.button:hover {
+    background-color: #FFFFFF;
+    border: solid;
+    color: #000000;
+    cursor: pointer;
+}
+
+.modal.button.accept {
+    /* background-color: #04B404; */
+}
+
+.modal.button.decline {
+    background-color: #FF4D4D;
 }
 
 #video {
@@ -46,7 +73,7 @@ html, body {
 }
 
 .modal.loader {
-    border: 16px solid #F0F0F0;
+    border: 16px solid #C9C9C9;
     border-top: 16px solid #000000;
     border-radius: 50%;
     width: 120px;
@@ -61,24 +88,24 @@ html, body {
 
 @-webkit-keyframes from_top {
     from {
-        margin: -6em auto;
+        top: -25%;
         opacity: 0;
     }
 
     to {
-        margin: 6em auto;
+        top: 25%;
         opacity: 1;
     }
 }
 
 @keyframes from_top {
     from {
-        margin: -6em auto;
+        top: -25%;
         opacity: 0;
     }
 
     to {
-        margin: 6em auto;
+        top: 25%;
         opacity: 1;
     }
 }

public/robots.txt

@@ -1,4 +1,6 @@
 User-agent: *
-Disallow: main.css
 Disallow: tip.jpg
+Disallow: willpower.css
 Disallow: willpower.gif
+Disallow: willpower.js
+Disallow: willpower.mp3

public/willpower.css

@@ -0,0 +1,115 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+    margin: 0px;
+    height: 100%;
+}
+
+.modal.background {
+    background-image: url('/tip.jpg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+}
+
+.modal.box {
+    background-color: #A9D0F5;
+    border-radius: 15px;
+    border-style: solid;
+    border-color: #FFFFFF;
+    text-align: center;
+    width: 50%;
+    padding: 1em;
+    -webkit-animation-name: from_top;
+    -webkit-animation-duration: 1.5s;
+    animation-name: from_top;
+    animation-duration: 1s;
+    position: absolute;
+    left: 25%;
+    top: 25%;
+    z-index: 10;
+}
+
+.modal.button {
+    border-radius: 5px;
+    border: solid;
+    color: #000000;
+    font-size: 1em;
+    padding: 15px 25px;
+    text-align: center;
+    transition-duration: 0.3s;
+}
+
+.modal.button:hover {
+    border: solid;
+    color: #FFFFFF;
+    cursor: pointer;
+}
+
+.modal.button.accept {
+    background-color: #04B404;
+}
+
+.modal.button.decline {
+    background-color: #FF1A1A;
+}
+
+.modal.loader {
+    border: 16px solid #C9C9C9;
+    border-top: 16px solid #000000;
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+    margin: -4em auto auto -4em;
+    display: flex;
+    top: 50%;
+    left: 50%;
+    position: absolute;
+}
+
+#video {
+    background-image: url('/willpower.gif');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+    z-index: 255;
+    position: absolute;
+    display: none;
+}
+
+@-webkit-keyframes from_top {
+    from {
+        top: -25%;
+        opacity: 0;
+    }
+
+    to {
+        top: 25%;
+        opacity: 1;
+    }
+}
+
+@keyframes from_top {
+    from {
+        top: -25%;
+        opacity: 0;
+    }
+
+    to {
+        top: 25%;
+        opacity: 1;
+    }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

public/willpower.js

@@ -0,0 +1,8 @@
+function acceptCookies() {
+    document.getElementById('soundtrack').play();
+    document.getElementById('video').style.display = 'initial';
+}
+
+function declineCookies() {
+    acceptCookies();
+}

views/index.erb

@@ -1,6 +1,21 @@
 <div class="modal background">
   <div class="modal box">
-    <p>Ayy... lmao</p>
+    <h1>Notice:</h1>
+    <h2>This website uses cookies.</h2>
+    <p>We and selected partners use cookies as specified in
+      <a href="http://tools.ietf.org/html/rfc6265">RFC 6265</a>.
+      By proceeding you consent to the use of such
+      technologies; we may collect information from you
+      automatically through cookies or similar technology.</p>
+    <p>For further information please visit
+      <a href="http://allaboutcookies.org">allaboutcookies.org</a>.</p>
+    <button class="modal button accept" onclick="acceptCookies();">
+      Accept
+    </button>
+    &nbsp;
+    <button class="modal button decline" onclick="declineCookies();">
+      Decline
+    </button>
   </div>
 </div>
 <div class="modal loader"></div>
@@ -8,3 +23,4 @@
 <audio id="soundtrack" preload="auto" loop>
   <source src="/willpower.mp3" type="audio/mpeg">
 </audio>
+<script src="/willpower.js"></script>

views/layout.erb

@@ -23,7 +23,7 @@
   <meta name="description"
         content="One man's journey to summon his own calm from within.">
   <title>My Willpower</title>
-  <link rel="stylesheet" type="text/css" href="/main.css">
+  <link rel="stylesheet" type="text/css" href="/willpower.css">
 </head>
 <body>
 <%= yield %>