mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Chan page is nice
This commit is contained in:
Nicolas A. Tonne
66
index.php
66
index.php
@@ -6,7 +6,6 @@
|
|||||||
else $list=$list[1];
|
else $list=$list[1];
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
|
||||||
<head>
|
<head>
|
||||||
<?php include("php/header.php"); ?>
|
<?php include("php/header.php"); ?>
|
||||||
@@ -19,48 +18,69 @@
|
|||||||
<a href="//zoff.no" class="brand-logo hide-on-small-only">
|
<a href="//zoff.no" class="brand-logo hide-on-small-only">
|
||||||
<img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
|
<img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
|
||||||
</a>
|
</a>
|
||||||
<div class="brand-logo center">
|
<div class="brand-logo">
|
||||||
<a href="zoff.no" class="hide-on-med-and-up">Zöff</a>
|
<a href="//zoff.no" class="hide-on-med-and-up">Zöff</a>
|
||||||
<span class="hide-on-med-and-up">/</span>
|
<span class="hide-on-med-and-up">/</span>
|
||||||
<span id="chan" class="chan" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
|
<span id="chan" class="chan hide" title="Show big URL" onclick="show()"><?php echo(ucfirst($list));?></span>
|
||||||
</div>
|
</div>
|
||||||
<form>
|
<ul class="right">
|
||||||
<div class="input-field">
|
|
||||||
<input id="search" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
|
|
||||||
<label for="search"><i class="mdi-action-search"></i></label>
|
|
||||||
<i class="mdi-navigation-close"></i>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<ul id="nav-mobile" class="right">
|
|
||||||
<li>
|
<li>
|
||||||
<a href="#" id="settings" onclick="skip();">
|
<a class="nav-btn" href="#" id="skip" onclick="skip();">
|
||||||
<i class="mdi-av-skip-next"></i>
|
<i class="mdi-av-skip-next"></i>
|
||||||
Skip
|
<span class="hover-text">Skip</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#" onclick="admin();">
|
<a class="nav-btn" href="#" onclick="admin();" data-activates="mobile-demo" id="settings">
|
||||||
<i class="mdi-action-settings"></i>
|
<i class="mdi-action-settings"></i>
|
||||||
Settings
|
<span class="hover-text">Conf</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="side-nav" id="mobile-demo">
|
<ul class="side-nav" id="mobile-demo">
|
||||||
<li><a href="sass.html">Sass</a></li>
|
<?php include("php/panel.php");?>
|
||||||
<li><a href="components.html">Components</a></li>
|
|
||||||
<li><a href="javascript.html">Javascript</a></li>
|
|
||||||
<li><a href="mobile.html">Mobile</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
<form id="searchform">
|
||||||
|
<div>
|
||||||
|
<input id="search" type="search" required title="Search for songs..." spellcheck="false" placeholder="Search" onsubmit="null;" autocomplete="off">
|
||||||
|
<!--<label for="search"><i class="mdi-action-search"></i></label>
|
||||||
|
<i class="mdi-navigation-close"></i>-->
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="center-align container">
|
<main class="container center-align main">
|
||||||
<div class="section">
|
<div class="row">
|
||||||
|
<div class="col s12 m9 video-container">
|
||||||
|
<div id="player" class="ytplayer"></div>
|
||||||
|
</div>
|
||||||
|
<div id="playlist" class="col s12 m3">
|
||||||
|
<div id="wrapper">
|
||||||
|
<div id="list-song-html">
|
||||||
|
<div id="list-song" class="card list-song">
|
||||||
|
<a class="clickable votebg">
|
||||||
|
<div class="card-image cardbg list-image"></div>
|
||||||
|
</a>
|
||||||
|
<div class="card-content">
|
||||||
|
<p class="left-align">
|
||||||
|
<span class="flow-text truncate list-title"></span>
|
||||||
|
<span class="highlighted hide">Votes: </span>
|
||||||
|
<span class="list-votes hide"></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-action hide">
|
||||||
|
<a id="del" onclick="vote('id','del')" class="clickable" class="waves-effect waves-orange btn-flat">Remove</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
<div id="controls"></div>
|
||||||
|
|
||||||
<?php include("php/footer.php"); ?>
|
<?php include("php/footer.php"); ?>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -46,7 +46,6 @@ foreach($fil as $files){
|
|||||||
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
|
||||||
<head>
|
<head>
|
||||||
<?php include("header.php"); ?>
|
<?php include("header.php"); ?>
|
||||||
@@ -55,7 +54,7 @@ foreach($fil as $files){
|
|||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<div class="nav-wrapper">
|
<div class="nav-wrapper">
|
||||||
<a href="//zoff.no" class="brand-logo hide-on-small-only">
|
<a href="#" class="brand-logo hide-on-small-only">
|
||||||
<img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
|
<img id="zicon" src="static/images/squareicon_small.png" alt="zöff" title="Zöff">
|
||||||
</a>
|
</a>
|
||||||
<a href="zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a>
|
<a href="zoff.no" class="brand-logo hide-on-med-and-up">Zöff</a>
|
||||||
|
|||||||
@@ -106,15 +106,40 @@ hide mdi-action-visibility mdi-action-visibility-off
|
|||||||
/* INDEX PAGE */
|
/* INDEX PAGE */
|
||||||
|
|
||||||
#zicon{
|
#zicon{
|
||||||
/* width: 50px; */
|
|
||||||
/* margin: 7px 20px; */
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
transition: padding 1s ease;
|
||||||
|
|
||||||
.section .search {
|
|
||||||
padding-top: 2.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#channels li{opacity: 0;}
|
#channels li{opacity: 0;}
|
||||||
|
|
||||||
/* Channel page */
|
/*------------------- Channel page ---------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
#searchform{
|
||||||
|
width: 50%;
|
||||||
|
margin-left: 25%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.main{
|
||||||
|
width: 100%;
|
||||||
|
max-width:99%;
|
||||||
|
margin: 0px;
|
||||||
|
padding:0px;
|
||||||
|
}
|
||||||
|
.video-container{
|
||||||
|
height: calc(100% - 64px);
|
||||||
|
}
|
||||||
|
#playlist{
|
||||||
|
padding:0px 15px;
|
||||||
|
}
|
||||||
|
.nav-btn
|
||||||
|
{
|
||||||
|
transition: background-color .2s;
|
||||||
|
min-width: 64px;
|
||||||
|
}
|
||||||
|
.nav-btn:hover{background-color:rgba(0,0,0,0.5);}
|
||||||
|
.hover-text{display:none;}
|
||||||
|
.nav-btn:hover > .hover-text {display:inline;}
|
||||||
|
|
||||||
|
.list-image{height:40px;}
|
||||||
|
.list-title{display:block;}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@@ -5,6 +5,7 @@ var myScroll;
|
|||||||
var scroller = false;
|
var scroller = false;
|
||||||
var showToggle =true;
|
var showToggle =true;
|
||||||
var chan = $("#chan").html();
|
var chan = $("#chan").html();
|
||||||
|
var list_html = $("#list-song-html").html();
|
||||||
var hasadmin=0;
|
var hasadmin=0;
|
||||||
|
|
||||||
function updateList()
|
function updateList()
|
||||||
@@ -38,23 +39,18 @@ function updateList()
|
|||||||
$.each(list.songs, function(j, listeID){
|
$.each(list.songs, function(j, listeID){
|
||||||
var video_title=listeID.title.replace(/\\\'/g, "'").replace(/"/g,"'").replace(/&/g,"&");
|
var video_title=listeID.title.replace(/\\\'/g, "'").replace(/"/g,"'").replace(/&/g,"&");
|
||||||
var video_id = listeID.id;
|
var video_id = listeID.id;
|
||||||
if(find && $.inArray(video_id, bright) == -1) brightness = "brightness";
|
var video_thumb = "background-image:url('http://img.youtube.com/vi/"+video_id+"/mqdefault.jpg');";
|
||||||
else if(find && $.inArray(video_id, bright) != -1) brightness = "brightness fullbrightness";
|
//var delsong = ""; if(pass_corr=="correct");
|
||||||
else brightness = "";
|
var video_votes = listeID.votes;
|
||||||
var video_thumb = "http://i.ytimg.com/vi/"+video_id+"/mqdefault.jpg";
|
$("#wrapper").append(list_html);
|
||||||
var odd = ""; if(j%2===0)odd=" oddlist";
|
var song = $("#list-song");
|
||||||
var delsong = ""; if(pass_corr=="correct")delsong="<input id='del' title='Remove' type='button' class='button' value='X' onclick=\"vote('"+video_id+"','del')\">";
|
song.find(".list-title").text(video_title);
|
||||||
var finalhtml="<div id='result' class='"+video_id+" result "+brightness+" lresult"+odd+"'>"+
|
song.find(".list-votes").text(video_votes);
|
||||||
"<img class='thumb lthumb' src='"+video_thumb+"'>"+
|
song.find(".votebg").attr("onclick", "vote('"+video_id+"','pos')");
|
||||||
"<div class='ltitle'>"+video_title+"</div>"+
|
song.find(".list-image").attr("style",video_thumb);
|
||||||
"<div class='votes'>"+listeID.votes+
|
song.attr("id",video_id);
|
||||||
"<a onclick=\"vote('"+video_id+"','pos');\" id='plus'>+</a>"+
|
|
||||||
"<a onclick=\"vote('"+video_id+"','neg');\" id='minus'>-</a>"+
|
|
||||||
delsong+
|
|
||||||
"</div>"+
|
|
||||||
"</div>";
|
|
||||||
$("#wrapper").append(finalhtml);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if($("#playlist").height() != $("#player").height() || (peis && $("#playlist").height() != $("#jplayer").height()))
|
if($("#playlist").height() != $("#player").height() || (peis && $("#playlist").height() != $("#jplayer").height()))
|
||||||
{
|
{
|
||||||
if(!window.mobilecheck())
|
if(!window.mobilecheck())
|
||||||
@@ -101,9 +97,6 @@ function updateList()
|
|||||||
else
|
else
|
||||||
$("#setpass").text("Channel has no admin");
|
$("#setpass").text("Channel has no admin");
|
||||||
}
|
}
|
||||||
$("#settings").css("visibility", "visible");
|
|
||||||
$("#settings").css("opacity", "0.7");
|
|
||||||
$("#wrapper").css("opacity", "1");
|
|
||||||
}, 2500);
|
}, 2500);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,14 +11,11 @@ function getCookie(cname) {
|
|||||||
|
|
||||||
$(document).ready(function (){
|
$(document).ready(function (){
|
||||||
Materialize.showStaggeredList('#channels');
|
Materialize.showStaggeredList('#channels');
|
||||||
var deg = 0;
|
var pad = 0;
|
||||||
var pr = 15;
|
|
||||||
document.getElementById("zicon").addEventListener("click", function(){
|
document.getElementById("zicon").addEventListener("click", function(){
|
||||||
deg = deg + 365;
|
pad+=10;
|
||||||
pr = pr + 0.5;
|
document.getElementById("zicon").style.paddingLeft = pad+"%";
|
||||||
document.getElementById("zicon").style.transform = "rotate("+deg+"deg)";
|
if(pad >= 100)
|
||||||
document.getElementById("zicon").style.width = pr+"%";
|
|
||||||
if(pr >= 60)
|
|
||||||
window.location.href = 'https://www.youtube.com/v/mK2fNG26xFg?autoplay=1&showinfo=0&autohide=1';
|
window.location.href = 'https://www.youtube.com/v/mK2fNG26xFg?autoplay=1&showinfo=0&autohide=1';
|
||||||
});
|
});
|
||||||
if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
|
if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
|
||||||
|
|||||||
@@ -37,6 +37,7 @@ var colorThief;
|
|||||||
|
|
||||||
$(document).ready(function()
|
$(document).ready(function()
|
||||||
{
|
{
|
||||||
|
$("#settings").sideNav();
|
||||||
colorThief = new ColorThief();
|
colorThief = new ColorThief();
|
||||||
window.mobilecheck = function() {
|
window.mobilecheck = function() {
|
||||||
var check = false;
|
var check = false;
|
||||||
@@ -46,8 +47,6 @@ $(document).ready(function()
|
|||||||
|
|
||||||
if(!window.mobilecheck())
|
if(!window.mobilecheck())
|
||||||
{
|
{
|
||||||
$("#change").css("opacity", "0");
|
|
||||||
$("#wrapper").css("opacity", "0");
|
|
||||||
Notification.requestPermission();
|
Notification.requestPermission();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user