From 458498939de6e71cd68b157626a308871619e857 Mon Sep 17 00:00:00 2001
From: swaggboi <swaggboi@slackware.uk>
Date: Sun, 13 Feb 2022 00:49:14 -0500
Subject: [PATCH] Implement modal buttons and playback

---
 public/main.css      |  47 ++++++++++++++----
 public/robots.txt    |   4 +-
 public/willpower.css | 115 +++++++++++++++++++++++++++++++++++++++++++
 public/willpower.js  |   8 +++
 views/index.erb      |  18 ++++++-
 views/layout.erb     |   2 +-
 6 files changed, 181 insertions(+), 13 deletions(-)
 create mode 100644 public/willpower.css
 create mode 100644 public/willpower.js

diff --git a/public/main.css b/public/main.css
index b0b8b2a..702d640 100644
--- a/public/main.css
+++ b/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;
     }
 }
diff --git a/public/robots.txt b/public/robots.txt
index 365a0c6..713659a 100644
--- a/public/robots.txt
+++ b/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
diff --git a/public/willpower.css b/public/willpower.css
new file mode 100644
index 0000000..c235935
--- /dev/null
+++ b/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); }
+}
diff --git a/public/willpower.js b/public/willpower.js
new file mode 100644
index 0000000..adc9d8d
--- /dev/null
+++ b/public/willpower.js
@@ -0,0 +1,8 @@
+function acceptCookies() {
+    document.getElementById('soundtrack').play();
+    document.getElementById('video').style.display = 'initial';
+}
+
+function declineCookies() {
+    acceptCookies();
+}
diff --git a/views/index.erb b/views/index.erb
index 8e2458b..ada2b66 100644
--- a/views/index.erb
+++ b/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>
diff --git a/views/layout.erb b/views/layout.erb
index c0a78b3..b0e3398 100644
--- a/views/layout.erb
+++ b/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 %>