swaggboi/mywillpower.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pretty up animation

Browse Source
This commit is contained in:
swaggboi 2022-02-15 21:57:23 -05:00
parent 9df7032ed4
commit 988cb84bbf
2 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/willpower.css
View File

@ -6,8 +6,11 @@ html, body {
margin: 0px; margin: 0px;
height: 100%; height: 100%;
font-family: sans-serif; font-family: sans-serif;
background-color: black;
} }
.modal { opacity: 1; }
.modal.background { .modal.background {
background-image: url('/tip.jpg'); background-image: url('/tip.jpg');
background-position: center; background-position: center;
@ -17,8 +20,12 @@ html, body {
width: 100%; width: 100%;
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
-webkit-animation-name: fade_out;
-webkit-animation-duration: 1.5s;
animation-name: fade_out;
animation-duration: 1.5s;
opacity: 0.5;
} }
.modal.box { .modal.box {
@ -35,6 +42,9 @@ html, body {
animation-duration: 1.5s; animation-duration: 1.5s;
position: absolute; position: absolute;
z-index: 10; z-index: 10;
top: 50%;
left: 50%;
margin: -10em auto auto -29em;
} }
.modal.buttons { .modal.buttons {
@ -96,23 +106,23 @@ html, body {
} }
@-webkit-keyframes fade_in { @-webkit-keyframes fade_in {
from { from { opacity: 0; }
opacity: 0; to { opacity: 1; }
}
to {
opacity: 1;
}
} }
@keyframes fade_in { @keyframes fade_in {
from { from { opacity: 0; }
opacity: 0; to { opacity: 1; }
} }
to { @-webkit-keyframes fade_out {
opacity: 1; from { opacity: 1; }
} to { opacity: 0.5; }
}
@keyframes fade_out {
from { opacity: 1; }
to { opacity: 0.5; }
} }
@keyframes spin { @keyframes spin {

37
views/index.erb
View File

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