Redesigned admin panel, refractored a bit of css and cleaned up a bit, and fixed #25

index.php

@@ -25,8 +25,9 @@
 					<!--<a href="/php/admin.php?list=<?php echo $list; ?>" title="Channel settings" ><img src="/static/settings2.png" class="skip middle" alt="Settings"/></a>-->
 					<img src="static/settings2.png" class="skip middle" alt="Settings" title="Settings" onclick="admin();"/>
 					<img src="static/skip.png" class="skip" alt="Skip" title="Skip" onclick="skip();">
+
 				</div>
-					<div id="adminPanel"></div>
+					<div class="result hiddenAdmin" id="adminPanel"><?php include("php/panel.php");?> </div>
 					<div id="playlist">
 						<div id="wrapper">
 

js/admin.js

@@ -2,22 +2,7 @@ var adminTogg;
 
 function admin()
 {
-	adminTogg = !adminTogg;
+	$("#adminPanel").toggleClass("hiddenAdmin");
-	if(adminTogg){
-		$.ajax({
-			url:"../static/panel.html",
-			context: document.body, 
-			success: function(response){
-				//$(response).hide().appendTo("#adminPanel").fadeIn(1000);
-				$("#adminPanel").append(response).hide().fadeIn(300);
-			}
-		});
-	}else
-	{
-		setTimeout(function(){document.getElementById("adminPanel").innerHTML = "";}, 300);
-		$("#adminPanel").fadeOut(300);
-	}
-	$("#playlist").toggleClass("lowOpacity");
 }
 
 

js/visualize.js

@@ -1,5 +0,0 @@
-/*$(document).ready(function()
-{
-	context = new AudioContext();
-	src = context.createMediaElementSource($('#player video'));
-}*/

lists/tritoen.json

@@ -1 +1 @@
-{"nowPlaying":{"MXXRHpVed3M":{"id":"MXXRHpVed3M","title":"Vengaboys - We\\'re Going to Ibiza!","votes":0,"added":1412951860,"guids":[]}},"songs":{"O1OTWCd40bc":{"id":"O1OTWCd40bc","title":"The Weeknd - Wicked Games (Explicit)","votes":0,"added":1412951860,"guids":[]},"Z7YrFLIyYIw":{"id":"Z7YrFLIyYIw","title":"Tuuli - Do It Like A Dru [[WoW Parody]]","votes":0,"added":1412951860,"guids":[]},"ZKuOB1HGWMY":{"id":"ZKuOB1HGWMY","title":"Robert er du neger?","votes":0,"added":1412951860,"guids":[]},"ZyhrYis509A":{"id":"ZyhrYis509A","title":"Aqua - Barbie Girl","votes":0,"added":1412951860,"guids":[]},"_ovdm2yX4MA":{"id":"_ovdm2yX4MA","title":"Avicii - Levels","votes":0,"added":1412951860,"guids":[]},"aZg2pEokcFw":{"id":"aZg2pEokcFw","title":"H\u00f8vlerivisa","votes":0,"added":1412951860,"guids":[]},"afOH2SGDiK0":{"id":"afOH2SGDiK0","title":"dde vi ska f\u00e6st","votes":0,"added":1412951860,"guids":[]},"bESGLojNYSo":{"id":"bESGLojNYSo","title":"Lady Gaga - Poker Face","votes":0,"added":1412951860,"guids":[]},"bLLMPnPK0fU":{"id":"bLLMPnPK0fU","title":"D.D.E. - Bondekn\u00f8l","votes":0,"added":1412951860,"guids":[]},"byp94CCWKSI":{"id":"byp94CCWKSI","title":"Jason Derulo - \\"The Other Side\\" (Official HD Music Video)","votes":0,"added":1412951860,"guids":[]},"cN-ZjkDBaX8":{"id":"cN-ZjkDBaX8","title":"\u00c5ge Aleksandersen -  Fire Pils og en Pizza - Rockefeller, 03.2009. HQ.","votes":0,"added":1412951860,"guids":[]},"cNvjKkXFBvU":{"id":"cNvjKkXFBvU","title":"WEKEED - Wild Child","votes":0,"added":1412951860,"guids":[]},"cjEwjDvh_2c":{"id":"cjEwjDvh_2c","title":"Pelle Politibil Intro Sang","votes":0,"added":1412951860,"guids":[]},"fIMz0nTp2sA":{"id":"fIMz0nTp2sA","title":"E-Type ft. Na Na - Life","votes":0,"added":1412951860,"guids":[]},"iMP4BwvJSwo":{"id":"iMP4BwvJSwo","title":"LMFAO - Sexy And I Know It (Mord Fustang Remix)","votes":0,"added":1412951860,"guids":[]},"kHue-HaXXzg":{"id":"kHue-HaXXzg","title":"Demi Lovato - Let It Go (from \\"Frozen\\") [Official]","votes":0,"added":1412951860,"guids":[]},"kTHNpusq654":{"id":"kTHNpusq654","title":"Katy Perry - Hot N Cold","votes":0,"added":1412951860,"guids":[]},"nI_MVldpxDQ":{"id":"nI_MVldpxDQ","title":"Daddy DJ","votes":0,"added":1412951860,"guids":[]},"qQ31INpjXX0":{"id":"qQ31INpjXX0","title":"Albatraoz - Albatraoz","votes":0,"added":1412951860,"guids":[]},"smwj7ISnwXM":{"id":"smwj7ISnwXM","title":"tribalistas ja sei namorar","votes":0,"added":1412951860,"guids":[]},"tenz01ic1D8":{"id":"tenz01ic1D8","title":"Avicii - Levels","votes":0,"added":1412951860,"guids":[]},"w15oWDh02K4":{"id":"w15oWDh02K4","title":"Gigi D\\'Agostino - L\\'Amour Toujours ( Official Video )","votes":0,"added":1412951860,"guids":[]},"-1jPUB7gRyg":{"id":"-1jPUB7gRyg","title":"Aqua - Doctor Jones","votes":0,"added":1412952071,"guids":[]},"llyiQ4I-mcQ":{"id":"llyiQ4I-mcQ","title":"Vengaboys - Boom, Boom, Boom, Boom!!","votes":0,"added":1412952280,"guids":[]},"-N6O0xI3A2o":{"id":"-N6O0xI3A2o","title":"Guy Sebastian - Like a Drum","votes":0,"added":1412952356,"guids":[]},"2CGF_Z3yZAo":{"id":"2CGF_Z3yZAo","title":"Jason Derulo - Don\\'t Wanna Go Home (Official Video)","votes":0,"added":1412955658,"guids":[]},"4fndeDfaWCg":{"id":"4fndeDfaWCg","title":"Backstreet Boys - I Want It That Way","votes":0,"added":1412971020,"guids":[]},"7x3CCKaOlfU":{"id":"7x3CCKaOlfU","title":"Peaches - Rosa Helikopter","votes":0,"added":1412971324,"guids":[]},"87JabMupbB8":{"id":"87JabMupbB8","title":"Bodybangers Inc. - Kompani Linge 2012","votes":0,"added":1413802920,"guids":[]},"CduA0TULnow":{"id":"CduA0TULnow","title":"Britney Spears - Oops!...I Did It Again","votes":0,"added":1413802920,"guids":[]},"Eo-KmOd3i7s":{"id":"Eo-KmOd3i7s","title":"\\'N Sync - Bye Bye Bye","votes":0,"added":1413802922,"guids":[]},"EpbjEttizy8":{"id":"EpbjEttizy8","title":"David Guetta - Lovers On The Sun (Official Audio) ft Sam Martin","votes":0,"added":1413802923,"guids":[]},"GMoud3dub6U":{"id":"GMoud3dub6U","title":"\u00c5ge Aleksandersen - Levva Livet","votes":0,"added":1413802924,"guids":[]},"J_DV9b0x7v4":{"id":"J_DV9b0x7v4","title":"CaramellDansen (Full Version + Lyrics)","votes":0,"added":1413802924,"guids":[]},"LOZuxwVk7TU":{"id":"LOZuxwVk7TU","title":"Britney Spears - Toxic","votes":0,"added":1413803307,"guids":[]}},"conf":{"startTime":1413803307,"views":1,"skips":[]}}
+{"nowPlaying":{"O1OTWCd40bc":{"id":"O1OTWCd40bc","title":"The Weeknd - Wicked Games (Explicit)","votes":0,"added":1413804986,"guids":[]}},"songs":{"Z7YrFLIyYIw":{"id":"Z7YrFLIyYIw","title":"Tuuli - Do It Like A Dru [[WoW Parody]]","votes":0,"added":1413805247,"guids":[]},"ZKuOB1HGWMY":{"id":"ZKuOB1HGWMY","title":"Robert er du neger?","votes":0,"added":1413805324,"guids":[]},"ZyhrYis509A":{"id":"ZyhrYis509A","title":"Aqua - Barbie Girl","votes":0,"added":1413805530,"guids":[]},"_ovdm2yX4MA":{"id":"_ovdm2yX4MA","title":"Avicii - Levels","votes":0,"added":1413805733,"guids":[]},"aZg2pEokcFw":{"id":"aZg2pEokcFw","title":"H\u00f8vlerivisa","votes":0,"added":1413805864,"guids":[]},"bESGLojNYSo":{"id":"bESGLojNYSo","title":"Lady Gaga - Poker Face","votes":0,"added":1413806083,"guids":[]},"afOH2SGDiK0":{"id":"afOH2SGDiK0","title":"dde vi ska f\u00e6st","votes":0,"added":1413806149,"guids":[]},"bLLMPnPK0fU":{"id":"bLLMPnPK0fU","title":"D.D.E. - Bondekn\u00f8l","votes":0,"added":1413806157,"guids":[]},"byp94CCWKSI":{"id":"byp94CCWKSI","title":"Jason Derulo - \\"The Other Side\\" (Official HD Music Video)","votes":0,"added":1413806422,"guids":[]},"cN-ZjkDBaX8":{"id":"cN-ZjkDBaX8","title":"\u00c5ge Aleksandersen -  Fire Pils og en Pizza - Rockefeller, 03.2009. HQ.","votes":0,"added":1413806661,"guids":[]},"cNvjKkXFBvU":{"id":"cNvjKkXFBvU","title":"WEKEED - Wild Child","votes":0,"added":1413807028,"guids":[]},"cjEwjDvh_2c":{"id":"cjEwjDvh_2c","title":"Pelle Politibil Intro Sang","votes":0,"added":1413807168,"guids":[]},"fIMz0nTp2sA":{"id":"fIMz0nTp2sA","title":"E-Type ft. Na Na - Life","votes":0,"added":1413807409,"guids":[]},"iMP4BwvJSwo":{"id":"iMP4BwvJSwo","title":"LMFAO - Sexy And I Know It (Mord Fustang Remix)","votes":0,"added":1413807542,"guids":[]},"kHue-HaXXzg":{"id":"kHue-HaXXzg","title":"Demi Lovato - Let It Go (from \\"Frozen\\") [Official]","votes":0,"added":1413807545,"guids":[]},"kTHNpusq654":{"id":"kTHNpusq654","title":"Katy Perry - Hot N Cold","votes":0,"added":1413807549,"guids":[]},"nI_MVldpxDQ":{"id":"nI_MVldpxDQ","title":"Daddy DJ","votes":0,"added":1413807552,"guids":[]},"qQ31INpjXX0":{"id":"qQ31INpjXX0","title":"Albatraoz - Albatraoz","votes":0,"added":1413807556,"guids":[]},"smwj7ISnwXM":{"id":"smwj7ISnwXM","title":"tribalistas ja sei namorar","votes":0,"added":1413807780,"guids":[]},"tenz01ic1D8":{"id":"tenz01ic1D8","title":"Avicii - Levels","votes":0,"added":1413808022,"guids":[]},"w15oWDh02K4":{"id":"w15oWDh02K4","title":"Gigi D\\'Agostino - L\\'Amour Toujours ( Official Video )","votes":0,"added":1413808717,"guids":[]},"-1jPUB7gRyg":{"id":"-1jPUB7gRyg","title":"Aqua - Doctor Jones","votes":0,"added":1413808929,"guids":[]},"llyiQ4I-mcQ":{"id":"llyiQ4I-mcQ","title":"Vengaboys - Boom, Boom, Boom, Boom!!","votes":0,"added":1413809137,"guids":[]},"-N6O0xI3A2o":{"id":"-N6O0xI3A2o","title":"Guy Sebastian - Like a Drum","votes":0,"added":1413809333,"guids":[]},"2CGF_Z3yZAo":{"id":"2CGF_Z3yZAo","title":"Jason Derulo - Don\\'t Wanna Go Home (Official Video)","votes":0,"added":1413809590,"guids":[]},"4fndeDfaWCg":{"id":"4fndeDfaWCg","title":"Backstreet Boys - I Want It That Way","votes":0,"added":1413809813,"guids":[]},"7x3CCKaOlfU":{"id":"7x3CCKaOlfU","title":"Peaches - Rosa Helikopter","votes":0,"added":1413810040,"guids":[]},"87JabMupbB8":{"id":"87JabMupbB8","title":"Bodybangers Inc. - Kompani Linge 2012","votes":0,"added":1413810263,"guids":[]},"CduA0TULnow":{"id":"CduA0TULnow","title":"Britney Spears - Oops!...I Did It Again","votes":0,"added":1413810519,"guids":[]},"Eo-KmOd3i7s":{"id":"Eo-KmOd3i7s","title":"\\'N Sync - Bye Bye Bye","votes":0,"added":1413810765,"guids":[]},"EpbjEttizy8":{"id":"EpbjEttizy8","title":"David Guetta - Lovers On The Sun (Official Audio) ft Sam Martin","votes":0,"added":1413810973,"guids":[]},"GMoud3dub6U":{"id":"GMoud3dub6U","title":"\u00c5ge Aleksandersen - Levva Livet","votes":0,"added":1413811320,"guids":[]},"J_DV9b0x7v4":{"id":"J_DV9b0x7v4","title":"CaramellDansen (Full Version + Lyrics)","votes":0,"added":1413811502,"guids":[]},"LOZuxwVk7TU":{"id":"LOZuxwVk7TU","title":"Britney Spears - Toxic","votes":0,"added":1413811718,"guids":[]},"MXXRHpVed3M":{"id":"MXXRHpVed3M","title":"Vengaboys - We\\'re Going to Ibiza!","votes":0,"added":1413811942,"guids":[]}},"conf":{"startTime":1413811942,"views":2,"skips":[]}}

php/footer.php

@@ -7,3 +7,4 @@
 <script type="text/javascript" src="static/js/youtube.js"></script>
 <script type="text/javascript" src="static/js/search.js"></script> 
 <script type="text/javascript" src="static/js/admin.js"></script>
+<script type="text/javascript" src="static/js/toggler.js"></script>

static/mobile.css

@@ -0,0 +1,27 @@
+@media (max-width: 1000px) {
+    body{background-color: #fff;}
+    .bgimage{display: none;}
+    #player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: none;}
+    .playlist{width: 100%;}
+    .lresult{font-size: 40px; height: 90px; font-size: 50px;}
+    .votes{float: right; background-color: rgba(0,0,0,0.9); margin-top: -1.5em;font-size: 42px; padding-right: 8px; height: 89px; line-height: 89px; padding-left: 20px; border-radius: 1px;}
+    .lthumb{height: 90px; box-shadow: none;}
+    .ltitle{height: 70px; color: #000;}
+    #plus,#minus{padding-left: 24px; margin-left: 0; padding-right: 24px;}
+    #plus{border-right:solid 3px rgb(172, 172, 172);}
+    #search{text-align: left; height: 100px; font-size: 40px; border: solid 2px #ccc;}
+    #buttons{text-align: center; height: 80px; margin: 0;}
+    .skip{height: 50px;}
+    .vcent{
+        top: inherit; 
+        -webkit-transform: translateY(0%);
+    }
+    #title{
+        font-size: 30px;
+        font-weight: bold;
+        overflow: hidden;
+        padding-left: 2%;
+        padding-top: 0;
+    }
+    .footer{font-size: 40px; margin-top: 150px;}
+}

static/panel.html

@@ -1,20 +0,0 @@
-<b>Admin Panel</b>
-<br>
-<form id="adminForm" name="ufo" action="" class="daform nomargin" id="base">
-	<label>Anyone can vote:
-		<label> <input class="adminBox" type="checkbox" name="vote" value="1"></input></label>
-	</label><br>
-	<label>Anyone can add songs:
-			<label><input class="adminBox" type="checkbox" name="addSongs" value="1"></input></label>
-	</label><br>
-	<label>Allow long songs:
-			<label><input class="adminBox" type="checkbox" name="longSongs" value="1"></input></label>
-	</label><br>
-	<label>Show playlist on frontpage::
-			<label><input class="adminBox" type="checkbox" name="frontPage" value="1"></input></label>
-	</label><br>
-	<label>Allow only music:
-		<label><input class="adminBox" type="checkbox" name="onlyMusic" value="1"></input></label>
-	</label><br>
-	<input type="button" value="Save Settings" onclick="submitAdmin(this.form)">   
-</form>

static/style.css

@@ -1,12 +1,12 @@
-body{background:#000; margin:0;}
+body{background:#000; margin:0; }
 .top{
     font-family: 'Open Sans', sans-serif; font-weight: 300; text-align: center; 
     animation: fadein .5s; -moz-animation: fadein .5s; -webkit-animation: fadein .5s; -o-animation: fadein .5s;
 }
 .top, .top a{color:#ed207f; text-decoration: none;}
-.vcent{position: relative; top: 50%; -webkit-transform: translateY(-50%);}
+.vcent{position: relative; /*display: table; height: 100%; width: 100%;*/}
 .nochanvcent{position: relative; top: 46%; -webkit-transform: translateY(-54%);}
-
+/*#change{ display: table-cell; vertical-align: middle;}*/
 ::-webkit-input-placeholder{color: #FEFEFE;}
 ::-moz-input-placeholder{color: #FEFEFE;}
 ::input-placeholder{color: #FEFEFE;}
@@ -17,11 +17,11 @@ body{background:#000; margin:0;}
 }
 .success{animation: fadecol 1.5s; -moz-animation: fadecol 1.5s; -webkit-animation: fadecol 1.5s; -o-animation: fadecol 1.5s;}
 .error{animation: fadewrong 1.5s; -moz-animation: fadewrong 1.5s; -webkit-animation: fadewrong 1.5s; -o-animation: fadewrong 1.5s;}
-.small{font-size: 5vw; color:#E2E2E2; display:block !important; text-decoration: none; }
+.small{font-size: 5vw; color:#E2E2E2; text-decoration: none; }
 /*.small:hover{color: #CCC;}*/
 .big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;}
 .footer a{color:#fefefe; text-decoration: none;}.footer a:hover {color:#ed207f;} 
-.footer{font-size: 15px; position:absolute; width:99%;color:#c0c0c0 !important; margin-top: 0; word-spacing: 2px;}
+.footer{font-size: 15px;  position: absolute; width:99%;color:#c0c0c0 !important; margin-top: 0px; word-spacing: 2px;}
 .bottom{bottom:10px;}
 #channels{width:40%; min-width: 300px; padding-top: 4%; font-size: 25px;}
 .channel{padding: 7px; display: inline-block; font-weight: bold; color: #C4C4C4 !important;font-size: 18px;}
@@ -53,18 +53,18 @@ body{background:#000; margin:0;}
 
 #buttons{cursor: default; text-align: right; -webkit-filter: brightness(1.6);margin-top: -65px; margin-bottom: 28px; pointer-events:none;}
 #buttons:hover{background-color: none !important;}
-.skip{cursor: pointer; height: 25px; padding:8px 21px 0 0; pointer-events:auto;}
+.skip{cursor: pointer; height: 25px; padding:8px 21px 0 0; -webkit-filter: brightness(0.6); pointer-events:auto;}
-.skip:hover{ -webkit-filter: brightness(0.6);}
+.skip:hover{ -webkit-filter: brightness(0.3);}
 
 #results{position:absolute; background-color: white; font-size: 14px; width:90%; margin-left: 5%; margin-top:-5px; z-index: 2; font-family: sans-serif;}
-.result{border-bottom:none; padding: 3px 0 3px 10%; text-align: left; height: 55px; cursor: pointer;}
+.result{border-bottom:none; padding: 3px 0 3px 10%; text-align: left; height: 55px; cursor: pointer; border-radius: 3px;}
 .result:hover{background-color: rgba(0,0,0,0.2);}
 #title{ padding-left: 20%; padding-top:10px; max-width: 76%; color:#ed207f; height: 36px;}
 .result_info{color:#888; font-size: 12px; float:right;}
 .thumb{height: 40px; width:80px; float: left;}
 
 .main{width:90%; margin: 0 auto 0 auto;}
-.playlist{background-color: none; width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; /*overflow: hidden;*/ height: calc(87% - 183px);}
+.playlist{width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top;  height: calc(87% - 183px);}
 .lresult{padding:10px 0 10px 5px; height: 70px; border-top: none; cursor: default; border-bottom: solid 1px rgba(255,255,255,0.2);}
 .lthumb{height: 70px; margin-right: 10px; display: inline; width: 109px; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
 .ltitle{ color:#FFF; overflow: hidden; height: 40px; }
@@ -74,41 +74,24 @@ body{background:#000; margin:0;}
 #plus:hover,#minus:hover{color:#000;}
 
 #player{height: 68%; height: calc(87% - 183px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
-#adminForm{text-align:left;}
-.adminBox{float:right;}
-#adminPanel{color:black;background-color:#EEE;position:absolute;z-index:1;width:18%; margin-top: -1px; padding-top: 15px; display: none;}
-.lowOpacity{opacity:0.5; -webkit-filter: blur(5px);}
 #playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
 .nomargin{padding: 0;margin:0;}
 
-@media (max-width: 1000px) {
+#adminForm{text-align:left;}
-    body{background-color: #fff;}
+#adminForm label{display: block; cursor: pointer;}
-    .bgimage{display: none;}
+.adminBox{float:right;}
-    #player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: none;}
+#adminPanel{color:white; height:180px; padding: 10px; transition: all 0.5s ease-in-out; overflow:hidden; background-color: rgba(0,0,0,0.2);}
-    .playlist{width: 100%;}
+.hiddenAdmin{padding:0 !important; margin:0 !important; height: 0 !important;}
-    .lresult{font-size: 40px; height: 90px; font-size: 50px;}
+.button{background-color: rgba(255,255,255,0.2); border-radius: 4px; border: none;color: white;padding: 5px 15px; margin-top: 15px; transition: all 0.1s ease-in-out;}
-    .votes{float: right; background-color: rgba(0,0,0,0.9); margin-top: -1.5em;font-size: 42px; padding-right: 8px; height: 89px; line-height: 89px; padding-left: 20px; border-radius: 1px;}
+.button:hover{background-color: rgba(255,255,255,0.4); }
-    .lthumb{height: 90px; box-shadow: none;}
+
-    .ltitle{height: 70px; color: #000;}
+
-    #plus,#minus{padding-left: 24px; margin-left: 0; padding-right: 24px;}
-    #plus{border-right:solid 3px rgb(172, 172, 172);}
-    #search{text-align: left; height: 100px; font-size: 40px; border: solid 2px #ccc;}
-    #buttons{text-align: center; height: 80px; margin: 0;}
-    .skip{height: 50px;}
-    .vcent{
-   	 	top: inherit; 
-   	 	-webkit-transform: translateY(0%);
-	}
-	#title{
-		font-size: 30px;
-		font-weight: bold;
-		overflow: hidden;
-		padding-left: 2%;
-		padding-top: 0;
-	}
-	.footer{font-size: 40px; margin-top: 150px;}
-}
 
 @-webkit-keyframes fadein{from {opacity:0;}to{opacity:1;}}@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}
 @-webkit-keyframes fadecol{from {background-color:rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadecol{from{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}
 @-webkit-keyframes fadewrong{from {background-color:rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadewrong{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadewrong{from{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadewrong{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}
+
+
+/* imports */
+@import url("mobile.css");
+/*@import url("toggler.css");*/

static/toggler.css

@@ -0,0 +1,62 @@
+.toggle, .toggler {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 10px;
+}
+
+.toggler {
+  color: slategray;
+  transition: .2s;
+}
+
+.toggler--is-active {
+  color: black;
+}
+
+.b {
+  display: block;
+}
+
+.toggle {
+  width: 100px;
+  height: 60px;
+  border-radius: 100px;
+  background-color: #2ecc71;
+  overflow: hidden;
+  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
+}
+
+.check {
+  position: absolute;
+  display: block;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 6;
+}
+
+.check:checked ~ .switch {
+  right: 2px;
+  left: 37.5%;
+  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  transition-property: left, right;
+  transition-delay: .08s, 0s;
+}
+
+.switch {
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  bottom: 2px;
+  right: 37.5%;
+  background-color: #fff;
+  border-radius: 36px;
+  z-index: 1;
+  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  transition-property: left, right;
+  transition-delay: 0s, .08s;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}