From 5ab1e059c48265c72f78bd640284ce8416c0962f Mon Sep 17 00:00:00 2001
From: Charles Truluck <charlestdev@gmail.com>
Date: Sat, 26 Dec 2015 23:50:52 -0500
Subject: [PATCH] Fade-in for page load? Maybe?

---
 web/css/style.css          | 24 +++++++++++++++++++-----
 web/pages/about.html       |  2 +-
 web/pages/chat.html        |  2 +-
 web/pages/home.html        |  2 +-
 web/pages/login.html       |  2 +-
 web/pages/problems.html    |  2 +-
 web/pages/programming.html |  2 +-
 web/pages/register.html    |  2 +-
 web/pages/rules.html       |  6 +++---
 web/pages/scoreboard.html  |  2 +-
 web/pages/shell.html       |  2 +-
 web/pages/updates.html     |  2 +-
 12 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/web/css/style.css b/web/css/style.css
index d823a07..103a4e8 100644
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -66,8 +66,22 @@ li a, .navbar-brand {
 table {
 	color: #226C1B;
 }
-/*textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
-    border-color: #62AC5B;
-    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px #29d257;
-    outline: 0 none;
-}*/
+
+@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+
+.fade_in {
+	 opacity: 0;
+   -webkit-animation: fadeIn ease-in-out 1;
+   -moz-animation: fadeIn ease-in-out 1;
+   animation: fadeIn ease-in-out 1;
+
+   -webkit-animation-fill-mode: forwards;
+   -moz-animation-fill-mode: forwards;
+   animation-fill-mode: forwards;
+
+   -webkit-animation-duration: 1s;
+   -moz-animation-duration: 1s;
+   animation-duration: 1s;
+}
diff --git a/web/pages/about.html b/web/pages/about.html
index 4863ddc..296d69f 100644
--- a/web/pages/about.html
+++ b/web/pages/about.html
@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>About</h1>
   <h2>(insert stuff here)</h2>
 </center>
diff --git a/web/pages/chat.html b/web/pages/chat.html
index f848fa4..ebe44f6 100644
--- a/web/pages/chat.html
+++ b/web/pages/chat.html
@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>EasyCTF IRC</h1>
   <h2>(Insert iFrame with IRC here)</h2>
 </center>
diff --git a/web/pages/home.html b/web/pages/home.html
index 94710a6..dc203c7 100644
--- a/web/pages/home.html
+++ b/web/pages/home.html
@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>EasyCTF 3</h1>
   <h3 style="color: #44783f;"> Coming 2016 </h3>
   <br>
diff --git a/web/pages/login.html b/web/pages/login.html
index e501fc7..8f67ee5 100644
--- a/web/pages/login.html
+++ b/web/pages/login.html
@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
 <h1>Log-in</h1>
 <div class="input-group">
 	<form id="login-form">
diff --git a/web/pages/problems.html b/web/pages/problems.html
index 80633bf..791fe03 100644
--- a/web/pages/problems.html
+++ b/web/pages/problems.html
@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>Problems</h1>
   <div class="panel panel-info">
     <div class="panel-heading">
diff --git a/web/pages/programming.html b/web/pages/programming.html
index 8019070..129566d 100644
--- a/web/pages/programming.html
+++ b/web/pages/programming.html
@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>Programming</h1>
   <div class="panel panel-default">
     <div class="panel-heading">
diff --git a/web/pages/register.html b/web/pages/register.html
index 7f13b4c..4a68975 100644
--- a/web/pages/register.html
+++ b/web/pages/register.html
@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
 <h1 class="ui dividing header">Register</h1>
 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 <script src="js/register.js"></script>
diff --git a/web/pages/rules.html b/web/pages/rules.html
index 24fe602..afe3a04 100644
--- a/web/pages/rules.html
+++ b/web/pages/rules.html
@@ -1,6 +1,5 @@
-<center>
-  <h1> Info </h1>
-</center>
+<center class="fade_in">
+<h1> Info </h1>
 
 <h2>Rules</h2>
 Here are the rules regarding EasyCTF. Please follow these rules to make sure everyone has a fair chance at winning.
@@ -29,3 +28,4 @@ If you don't live in the United States, or you're not a high school or middle sc
 2nd Place: $256<br>
 3rd Place: $128<br>
 Top 20: Laptop Stickers<br>
+</center>
diff --git a/web/pages/scoreboard.html b/web/pages/scoreboard.html
index 012fee1..a6a2d73 100644
--- a/web/pages/scoreboard.html
+++ b/web/pages/scoreboard.html
@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>Scoreboard</h1>
   <table class="table">
       <thead>
diff --git a/web/pages/shell.html b/web/pages/shell.html
index dcc7680..f170831 100644
--- a/web/pages/shell.html
+++ b/web/pages/shell.html
@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>Shell</h1>
   <div class="panel panel-default">
     <div class="panel-heading">
diff --git a/web/pages/updates.html b/web/pages/updates.html
index af5a5d0..cb1dab1 100644
--- a/web/pages/updates.html
+++ b/web/pages/updates.html
@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>News / Updates</h1>
   <a class="twitter-timeline" href="https://twitter.com/easyctf" data-widget-id="680792667001884672">Tweets by @easyctf</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 </center>