Fancy Mode.

11 files changed, 154 insertions, 25 deletions

diff --git a/functions.php b/functions.php
index fcebb9f..62d5299 100644
--- a/functions.php
+++ b/functions.php
@@ -128,7 +128,9 @@ function print_index(){
 	<br>
         </div>
         <div class="row">
-		<img src="/static/kitten-prays-small.jpg" alt="praing kitten" class="img-responsive">
+		<div class="ec">
+			<img src="/static/kitten-prays-small.jpg" alt="praing kitten" class="img-responsive">
+		</div>
 	</div>
 		<br>
         <div class="row">
diff --git a/index.php b/index.php
index 268f0f2..52bf162 100644
--- a/index.php
+++ b/index.php
@@ -44,7 +44,9 @@ $user = new jg($u);
 	<?php 
 	//<link rel ="stylesheet" href="/static/style.css">
 
-	echo "<style>" . file_get_contents('static/style.min.css');?>
+	//echo "<style>" . file_get_contents('static/style.min.css');
+	echo "<style>" . file_get_contents('static/style.min.css');
+	?>
 	.dl-horizontal dt{white-space: normal;}.btn-info{background-color:#3083D6;border-color:#357ebd}.btn-primary{background-color:#3083D6;}.img-responsive{margin:0 auto;}@-moz-document url-prefix(){fieldset{display:table-cell;}}ul.nav li.dropdown:hover ul.dropdown-menu {display:block;}.video{max-width:720px;margin-right: auto;margin-left: auto;}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active{background-color:#3071a9}</style>
 	<noscript><style>.navbar{margin-bottom:0;}</style></noscript>
 	<title>Junge Gemeinde Adlershof</title>
diff --git a/static/chu.mp3 b/static/chu.mp3
new file mode 100644
index 0000000..6d4a7a4
--- /dev/null
+++ b/static/chu.mp3
diff --git a/static/eyecancer.js b/static/eyecancer.js
new file mode 100644
index 0000000..10c90e0
--- /dev/null
+++ b/static/eyecancer.js
@@ -0,0 +1,62 @@
+function randomizeColor(c){
+	var bg=document.getElementsByClassName("random-bg");
+	for (var i=0; i<bg.length; i++){
+		bg[i].style.backgroundColor=c;
+		bg[i].style.background=c;
+		bg[i].style.borderColor=c;
+	}
+	var f=document.getElementsByClassName("random-font");
+	for (var i=0; i<f.length; i++){
+		f[i].style.color=c;
+	}
+};
+
+function getRandomPosition(pos){
+	if(pos == "left"){
+		var mul = $(window).width();
+	} else if (pos = "top"){
+		var mul = $(window).height() - $("nav").height() - $("footer").height();
+	}
+	var pos = Math.floor(Math.random() * mul);
+	return pos;
+}
+
+function startRandomizer(){
+	$("h1").addClass("random-font");
+	$("table").addClass("effect-vv");
+	$("form").addClass("effect-vv");
+	$(".ec").addClass("effect-vv");
+	var cancer = ["A","B","C","D","E","F",0,1,2,3,4,5,6,7,8,9];
+	var images = ["flare1.png"];
+	var imgid = ["fi", "si", "ti", "foi"];
+	for ( var i = 0; i<imgid.length; i++){
+		$(".wrapper").append("<img class='gen' id='"+imgid[i]+"' src='/static/img/flare1.png'style='visibility:hidden;'/>");
+	}
+	$(".navbar").append("<audio src='/static/chu.mp3' autoplay loop></audio>")
+	window.setInterval(function () {
+		$("#gen").remove();
+		var newcancer = "#";
+		for ( var i = 0; i<6; i++){
+			newcancer = newcancer + cancer[Math.floor(Math.random() * cancer.length)];
+		}
+		randomizeColor( newcancer );
+		$(".gen").fadeOut(750, function t(){
+				for ( var i = 0; i<imgid.length; i++){
+					$("#"+imgid[i]).css({"visibility":"visible","position":"absolute","top": getRandomPosition("top") + "px", "left": getRandomPosition("left") + "px"});
+				}
+				$(".gen").fadeToggle(750);
+			}
+		);
+		$(".effect").effect( "pulsate", 750);
+		$(".effect").effect( "shake", 750);
+		$(".effect-vv").effect( "shake", 750);
+		$(".effect-vv").effect( "pulsate", 750);
+	}, 1500)
+}
+
+$( document ).ready( function() {
+	$("#loader").fadeOut();
+	$("#loader-bg").delay(1000).fadeOut("slow");
+	//window.setTimeout(startRandomizer(),1000);
+	startRandomizer();
+});
diff --git a/static/eyecancer.min.js b/static/eyecancer.min.js
new file mode 100644
index 0000000..1483787
--- /dev/null
+++ b/static/eyecancer.min.js
@@ -0,0 +1 @@
+function randomizeColor(e){var t=document.getElementsByClassName("random-bg");for(var n=0;n<t.length;n++){t[n].style.backgroundColor=e;t[n].style.background=e;t[n].style.borderColor=e}var r=document.getElementsByClassName("random-font");for(var n=0;n<r.length;n++){r[n].style.color=e}}function getRandomPosition(e){if(e=="left"){var t=$(window).width()}else if(e="top"){var t=$(window).height()-$("nav").height()-$("footer").height()}var e=Math.floor(Math.random()*t);return e}function startRandomizer(){$("h1").addClass("random-font");$("table").addClass("effect-vv");$("form").addClass("effect-vv");$(".ec").addClass("effect-vv");var e=["A","B","C","D","E","F",0,1,2,3,4,5,6,7,8,9];var t=["flare1.png"];var n=["fi","si","ti","foi"];for(var r=0;r<n.length;r++){$(".wrapper").append("<img class='gen' id='"+n[r]+"' src='/static/img/flare1.png'style='visibility:hidden;'/>")}$(".navbar").append("<audio src='/static/chu.mp3' autoplay loop></audio>");window.setInterval(function(){$("#gen").remove();var t="#";for(var r=0;r<6;r++){t=t+e[Math.floor(Math.random()*e.length)]}randomizeColor(t);$(".gen").fadeOut(750,function(){for(var t=0;t<n.length;t++){$("#"+n[t]).css({visibility:"visible",position:"absolute",top:getRandomPosition("top")+"px",left:getRandomPosition("left")+"px"})}$(".gen").fadeToggle(750)});$(".effect").effect("pulsate",750);$(".effect").effect("shake",750);$(".effect-vv").effect("shake",750);$(".effect-vv").effect("pulsate",750)},1500)}$(document).ready(function(){$("#loader").fadeOut();$("#loader-bg").delay(1e3).fadeOut("slow");startRandomizer()})
diff --git a/static/footer.php b/static/footer.php
index d786d68..82e3dd6 100755
--- a/static/footer.php
+++ b/static/footer.php
@@ -1,12 +1,26 @@
-		<div class="footer text-right">
+		</div>
+		<div class="footer text-right random-bg">
 			<div class="container">
-				<p>  Copyright 2014 <a id="copyright-text" href="//www.moehm.org/" target="_blank">Maximilian M&ouml;hring</a></p>
+				<p class="effect">  Copyright 2014 <a id="copyright-text" href="//www.moehm.org/" target="_blank">Maximilian M&ouml;hring</a></p>
 			</div>
 		</div>
 		<script src="//code.jquery.com/jquery-1.10.1.min.js" defer></script>
 		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" defer></script>
+		<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js" defer></script>
+		<!--script src="/static/eyecancer.js" defer></script-->
 		<?php //<script src='/boring.js' defer></script> ?>
 		<?php include("static/piwik.html"); ?>
+		<script>function loadFancy(){
+			document.getElementById("loader").style.visibility="visible";
+			document.getElementById("loader-bg").style.visibility="visible";
+
+			var eyecancer = document.createElement("script");
+			eyecancer.type = "text/javascript";
+			eyecancer.src = "/static/eyecancer.min.js";
+			document.getElementsByTagName("head")[0].appendChild(eyecancer);
+
+			return false;
+		}</script>
 	</body>
 </html>
 
diff --git a/static/header.php b/static/header.php
index 0276f94..ff51e71 100644
--- a/static/header.php
+++ b/static/header.php
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-default navbar-custom" role="navigation">
+<nav class="navbar navbar-default navbar-custom random-bg" role="navigation">
 	<div class="container">
                         <div class="navbar-header">
                                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
@@ -7,11 +7,11 @@
                                         <span class="icon-bar"></span>
                                         <span class="icon-bar"></span>
                                 </button>
-                                <a class="navbar-brand" href="/?page=index" title="Startseite"><span class="glyphicon glyphicon-home"></span> Home</a>
+                                <a class="navbar-brand effect" href="/?page=index" title="Startseite"><span class="glyphicon glyphicon-home"></span> Home</a>
                                 <!--a class="navbar-brand" href="/?page=index" title="Startseite">Home</a-->
                         </div>
 <div class="collapse navbar-collapse" id="navbarCollapse">
-                                <ul class="nav navbar-nav navbar-left">
+                                <ul class="nav navbar-nav navbar-left effect">
                                         <li class="dropdown">
                                                 <a href="/?page=liste" title="Liste aller JG-Mitglieder"><span class="glyphicon glyphicon-th-list"></span> Adressliste <span class="caret"></span></a>
 						<ul class="dropdown-menu" role="menu">
@@ -26,25 +26,30 @@
                                                 <a href="https://lists.iamfabulous.de/mailman/private/jungegemeinde/" target="_blank" title="Archiv der Mailing Liste "><span class="glyphicon glyphicon-send"></span> Mail Archiv</a>
                                         </li>
                                 </ul>
-				<ul class="nav navbar-nav navbar-right">
+				<ul class="nav navbar-nav navbar-right effect">
 					<li>
-					<?php
-					if ( $user->isLoggedIn() ) {
-					?>
-                                                <a href="/?page=account" title="Manage deinen Account"><span class="glyphicon glyphicon-user"></span> Account</a>
+						<a href="#" title="Much fancy, many amazing, wow" onclick="loadFancy();"><span class="glyphicon glyphicon-flag"></span> Fancy Mode</a>
 					</li>
-					<li>
-						<a href="/?page=logout" title="Beende die Session"><span class="glyphicon glyphicon-off"></span> Logout</a>
-					<?php
-					} else  {
-					?>
-                                                <a href="/?page=register&goto=index" title="Registriere dich für unbeschränkten Zugang"><span class="glyphicon glyphicon-user"></span> Register</a>
-					</li>
-					<li>
-						<a href="/?page=login&goto=index" title="Login"><span class="glyphicon glyphicon-off"></span> Login</a>
-					<?php
-					}
-					?>
+					<li class="dropdown">	
+                                                <a href="/?page=account" title="Manage deinen Account"><span class="glyphicon glyphicon-user"></span> Mitglied<span class="caret"></span></a>
+						<ul class="dropdown-menu" role="menu">
+							<li>
+						<?php
+						if ( $user->isLoggedIn() ) {
+						?>
+							<a href="/?page=logout" title="Beende die Session"><span class="glyphicon glyphicon-off"></span> Logout</a>
+						<?php
+						} else  {
+						?>
+							<a href="/?page=login&goto=index" title="Login"><span class="glyphicon glyphicon-off"></span> Login</a>
+							</li>
+							<li>
+                                               		<a href="/?page=register&goto=index" title="Registriere dich für unbeschränkten Zugang"><span class="glyphicon glyphicon-user"></span> Register</a>
+						<?php
+						}
+						?>
+							</li>
+						</ul>
 					</li>
 				</ul>
                         </div>
@@ -59,3 +64,7 @@
                         </div>
                 </div>
         </noscript>
+	<div id="loader-bg">
+		<div id="loader">&nbsp;</div>
+	</div>
+	<div class="wrapper">
diff --git a/static/img/flare1.png b/static/img/flare1.png
new file mode 100644
index 0000000..c65c459
--- /dev/null
+++ b/static/img/flare1.png
diff --git a/static/img/loading.gif b/static/img/loading.gif
new file mode 100644
index 0000000..235ef4b
--- /dev/null
+++ b/static/img/loading.gif
diff --git a/static/style.css b/static/style.css
index eaf3af0..8d19477 100644
--- a/static/style.css
+++ b/static/style.css
@@ -64,3 +64,42 @@ a {
 	color: #5E5E5E;
 	text-decoration: line-through;
 }
+
+.random-bg {
+	transition: all 1500ms;
+}
+.random-font {
+	transition: all 1500ms;
+}
+.wrapper {
+	overflow: hidden;
+}
+#loader-bg {
+	position: fixed;
+	/*
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	*/
+	background-color: #fefefe;
+	z-index: 99999;
+	height: 100%;
+	width: 100%;
+	overflow: hidden !important;
+	visibility: hidden;
+}
+#loader {
+	width: 40px;
+	height: 40px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	background-image: url(/static/img/loading.gif);
+	background-repeat: no-repeat;
+	background-position: center;
+	-webkit-background-size: cover;
+	background-size: cover;
+	margin: -20px 0 0 -20px;
+	visibility: hidden;
+}
diff --git a/static/style.min.css b/static/style.min.css
index 52aa281..f593c04 100644
--- a/static/style.min.css
+++ b/static/style.min.css
@@ -1 +1 @@
-html{position:relative;min-height:100%}body{margin-bottom:60px}a{color:#3083D6}.navbar-default{border-color:#3083D6;background:#3083D6}.navbar-default .navbar-brand{color:#fff}.navbar-default .navbar-nav>li>a{color:#fff}.footer{border-color:#3083D6;background:#3083D6;color:#fff;position:absolute;bottom:0;width:100%}#copyright-text{color:#fff}.noscript{background-color:#DD5148;color:#fff}.table-center{margin:0 auto!important;float:none!important}.disabled{color:#5E5E5E;text-decoration:line-through}
+html{position:relative;min-height:100%}body{margin-bottom:60px}a{color:#3083D6}.navbar-default{border-color:#3083D6;background:#3083D6}.navbar-default .navbar-brand{color:#fff}.navbar-default .navbar-nav>li>a{color:#fff}.footer{border-color:#3083D6;background:#3083D6;color:#fff;position:absolute;bottom:0;width:100%}#copyright-text{color:#fff}.noscript{background-color:#dd5148;color:#fff}.table-center{margin:0 auto!important;float:none!important}.disabled{color:#5E5E5E;text-decoration:line-through}.random-bg,.random-font{transition:all 1500ms}.wrapper{overflow:hidden}#loader-bg{position:fixed;background-color:#fefefe;z-index:99999;height:100%;width:100%;overflow:hidden!important;visibility:hidden}#loader{width:40px;height:40px;position:absolute;left:50%;top:50%;background-image:url(/static/img/loading.gif);background-repeat:no-repeat;background-position:center;-webkit-background-size:cover;background-size:cover;margin:-20px 0 0 -20px;visibility:hidden}