Sexy front page and images

static/css/style.css

@@ -16,13 +16,40 @@ body {
     flex-direction: column;
 }
 
-/* global color */
+/* global colors */
 footer.page-footer, 
 nav, .tabs .tab a, 
 .side-nav .collapsible-body li.active, 
 .side-nav.fixed .collapsible-body li.active, 
 .pagination li.active{
-    background-color: #2196f3;
+    background-color: #2D2D2D;
+}
+
+.secondary-content,
+.dropdown-content li > a, .dropdown-content li > span,
+.input-field .prefix.active,
+input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label
+{
+    color: #2D2D2D;
+}
+
+span.badge.new,
+.progress .determinate,
+.progress .indeterminate,
+.switch label input[type=checkbox]:checked + .lever:after,
+{
+    background-color: #2D2D2D;   
+}
+
+input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
+    border-bottom: 1px solid #9D9D9D;
+    box-shadow: 0 1px 0 0 #9D9D9D;
+}
+
+/* End global colors */
+
+nav .brand-logo{
+    padding-left: 20px;
 }
 
 main {
@@ -49,6 +76,9 @@ main {
     height: 120px;
 }
 
+.card .card-content {
+    padding: 10px 20px;
+}
 .card .card-action a {
   padding: 0;
   margin: 0;
@@ -76,10 +106,13 @@ hide mdi-action-visibility mdi-action-visibility-off
 /* INDEX PAGE */
 
 #zicon{
-    width: 50px;
-    margin: 7px 20px;
+    /* width: 50px; */
+    /* margin: 7px 20px; */
+    height: 100%;
 }
 
 .section .search {
     padding-top: 2.5rem;
 }
+
+#channels li{opacity: 0;}

static/js/nochan.js

@@ -0,0 +1,40 @@
+function getCookie(cname) {
+    var name = cname + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0; i<ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1);
+        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
+    }
+    return "";
+}
+
+$(document).ready(function (){
+    Materialize.showStaggeredList('#channels');
+    var deg = 0;
+    var pr = 15;
+    document.getElementById("zicon").addEventListener("click", function(){
+        deg = deg + 365;
+        pr = pr + 0.5;
+        document.getElementById("zicon").style.transform = "rotate("+deg+"deg)";
+        document.getElementById("zicon").style.width = pr+"%";
+        if(pr >= 60)
+            window.location.href = 'https://www.youtube.com/v/mK2fNG26xFg?autoplay=1&showinfo=0&autohide=1';
+    });
+    if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
+        console.log("android");
+        var ca = document.cookie.split(';');
+        if(getCookie("show_prompt") == ""){
+            var r = confirm("Do you want to download the native app for this webpage?");
+            if(r)
+                window.location.href = 'https://play.google.com/store/apps/details?id=no.lqasse.zoff';
+            else
+            {
+                var d = new Date();
+                d.setTime(d.getTime() + (10*24*60*60*1000));
+                var expires = "expires="+d.toUTCString();
+                document.cookie = "show_prompt=false;"+expires;
+            }
+        }
+     }
+});