mirror of
https://github.com/KevinMidboe/zoff.git
synced 2026-01-01 23:26:18 +00:00
Sexy front page and images
This commit is contained in:
Nicolas A. Tonne
@@ -7,8 +7,7 @@
|
|||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
|
||||||
xmlns:fb="http://ogp.me/ns/fb#">
|
|
||||||
<head>
|
<head>
|
||||||
<?php include("php/header.php"); ?>
|
<?php include("php/header.php"); ?>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
<!--
|
|
||||||
Zöff
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||||
Project is on github: https://github.com/nixolas1/Zoff
|
| Zöff |
|
||||||
Made by: Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
|
| Project is on github: https://github.com/nixolas1/Zoff |
|
||||||
-->
|
| Made by: Nicolas Almagro Tonne and Kasper Rynning-Tønnesen |
|
||||||
|
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
|
||||||
<title>Zöff</title>
|
<title>Zöff</title>
|
||||||
<meta name="author" content="Nicolas 'Nixo' Almagro Tonne & Kasper 'KasperRT' Rynning-Tønnesen">
|
<meta name="author" content="Nicolas 'Nixo' Almagro Tonne & Kasper 'KasperRT' Rynning-Tønnesen">
|
||||||
|
|||||||
291
php/nochan.php
291
php/nochan.php
@@ -1,8 +1,8 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
if(isset($_GET['chan'])){
|
if(isset($_GET['chan'])){
|
||||||
$chan = htmlspecialchars($_GET['chan']);
|
$chan = htmlspecialchars($_GET['chan']);
|
||||||
header('Location: '.$chan);
|
header('Location: '.$chan);
|
||||||
}
|
}
|
||||||
|
|
||||||
$dir = scandir('./lists');
|
$dir = scandir('./lists');
|
||||||
@@ -21,147 +21,174 @@ array_multisort(array_map('filemtime', ($fil = glob("*.json"))), SORT_DESC, $fil
|
|||||||
$viewers = array();
|
$viewers = array();
|
||||||
|
|
||||||
foreach($fil as $files){
|
foreach($fil as $files){
|
||||||
if(strpos($files, '.json') !== FALSE){
|
if(strpos($files, '.json') !== FALSE){
|
||||||
$time_lasted = time() - filemtime($files);
|
$time_lasted = time() - filemtime($files);
|
||||||
if($time_lasted > $to)
|
if($time_lasted > $to)
|
||||||
{
|
{
|
||||||
$file = file_get_contents($files);
|
$file = file_get_contents($files);
|
||||||
$data = json_decode($file, TRUE);
|
$data = json_decode($file, TRUE);
|
||||||
$q = array_values($data["nowPlaying"]);
|
if(isset($data["nowPlaying"])){
|
||||||
/*if($q[0]["id"] == "30H2Z8Lr-4c");
|
$q = array_values($data["nowPlaying"]);
|
||||||
unlink("./lists/".$files);*/
|
}
|
||||||
}
|
}
|
||||||
if($time_lasted < $time){
|
if($time_lasted < $time){
|
||||||
$file = file_get_contents($files); //Checking if the channel has the setting for showing on the frontpage set to true.
|
$file = file_get_contents($files); //Checking if the channel has the setting for showing on the frontpage set to true.
|
||||||
$data = json_decode($file, TRUE);
|
$data = json_decode($file, TRUE);
|
||||||
if($i <= 12 && (!array_key_exists("frontpage", $data['conf']) || $data['conf']['frontpage'] == "true")){ //If it is true, the channelname will be shown on the frontpage
|
if($i <= 40 && (!array_key_exists("frontpage", $data['conf']) || $data['conf']['frontpage'] == "true")){ //If it is true, the channelname will be shown on the frontpage
|
||||||
array_push($channels, ucfirst(str_replace(".json", "", $files)));
|
array_push($channels, ucfirst(str_replace(".json", "", $files)));
|
||||||
array_push($viewers, sizeof($data["conf"]["views"]));
|
array_push($viewers, sizeof($data["conf"]["views"]));
|
||||||
array_push($chan_data, $data);
|
array_push($chan_data, $data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$i++;
|
$i++;
|
||||||
array_push($all_channels, ucfirst(str_replace(".json", "", $files)));
|
array_push($all_channels, ucfirst(str_replace(".json", "", $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"); ?>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<div class="nav-wrapper">
|
<div class="nav-wrapper">
|
||||||
<a href="zoff.no" class="brand-logo hide-on-small-only"><img id="zicon" src="static/images/favicon.png" alt="zöff"></a>
|
<a href="zoff.no" class="brand-logo hide-on-small-only"><img id="zicon" src="static/images/squareicon_small.png" alt="zöff"></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>
|
||||||
<ul id="nav-mobile" class="right hide-on-med-and-down">
|
<ul id="nav-mobile" class="right hide-on-med-and-down">
|
||||||
<li><a href="#">About</a></li>
|
<li><a href="#">About</a></li>
|
||||||
<li><a href="#">GitHub</a></li>
|
<li><a href="#">GitHub</a></li>
|
||||||
<li><a href="#">Legal</a></li>
|
<li><a href="#">Legal</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="center-align container">
|
<main class="center-align container">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<form class="row" id="base" method="get">
|
<form class="row" id="base" method="get">
|
||||||
<div class="input-field col s12">
|
<div class="input-field col s12">
|
||||||
<input
|
<input
|
||||||
class="input-field"
|
class="input-field"
|
||||||
type="text"
|
type="text"
|
||||||
id="search"
|
id="search"
|
||||||
name="chan"
|
name="chan"
|
||||||
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
|
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
list="searches"
|
list="searches"
|
||||||
required pattern="[a-zA-Z0-9]+"
|
required pattern="[a-zA-Z0-9]+"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
maxlength="18"
|
maxlength="18"
|
||||||
autofocus
|
autofocus
|
||||||
/>
|
/>
|
||||||
<label for="search">Channel name</label>
|
<label for="search">Find or create radio channel</label>
|
||||||
<datalist id="searches">
|
<datalist id="searches">
|
||||||
<?php foreach($all_channels as $channel){echo "<option value='".htmlspecialchars($channel)."'> ";} ?>
|
<?php foreach($all_channels as $channel){echo "<option value='".htmlspecialchars($channel)."'> ";} ?>
|
||||||
</datalist>
|
</datalist>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="divider"></div>
|
|
||||||
<div class="section container">
|
<div class="section">
|
||||||
<div class="row">
|
<ul class="row" id="channels">
|
||||||
<?php
|
<?php
|
||||||
foreach ($chan_data as $v => $d)
|
foreach ($chan_data as $v => $d)
|
||||||
{
|
{
|
||||||
if(count($d["songs"])>0)
|
if(count($d["songs"])>0)
|
||||||
{
|
{
|
||||||
$ch=htmlspecialchars($channels[$v]);
|
$ch=htmlspecialchars($channels[$v]);
|
||||||
$views=$viewers[$v];
|
$views=$viewers[$v];
|
||||||
$now=reset($d["nowPlaying"]);
|
$now=reset($d["nowPlaying"]);
|
||||||
$img="http://img.youtube.com/vi/".$now["id"]."/hqdefault.jpg";
|
$img="http://img.youtube.com/vi/".$now["id"]."/hqdefault.jpg";
|
||||||
//echo "<a class='channel' href='./".$ch."' title='Viewers: ~".$viewers[$v]."'>".$ch."</a>";
|
//echo "<a class='channel' href='./".$ch."' title='Viewers: ~".$viewers[$v]."'>".$ch."</a>";
|
||||||
?>
|
?>
|
||||||
<div class="col s4">
|
<li class="col s12 m4 l3">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<a href="<?php echo $ch; ?>">
|
<a href="<?php echo $ch; ?>">
|
||||||
<div class="card-image cardbg" style="background-image:url('<?php echo $img; ?>')">
|
<div class="card-image cardbg" style="background-image:url('<?php echo $img; ?>')">
|
||||||
<img class="invisible" src="<?php echo $img; ?>">
|
<img class="invisible" src="<?php echo $img; ?>">
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<p class="left-align">
|
<p class="left-align">
|
||||||
<span class="flow-text truncate"><?php echo $ch; ?></span>
|
<span class="flow-text truncate"><?php echo $ch; ?></span>
|
||||||
<br>
|
<br>
|
||||||
<span class="highlighted">Viewers: </span><?php echo $views; ?>
|
<span class="highlighted">Viewers: </span><?php echo $views; ?>
|
||||||
<span class="highlighted">Songs: </span><?php echo(count($d["songs"])+1); ?>
|
<br>
|
||||||
</p>
|
<span class="highlighted">Songs: </span><?php echo(count($d["songs"])+1); ?>
|
||||||
</div>
|
</p>
|
||||||
<div class="card-action">
|
</div>
|
||||||
<a href="<?php echo $ch; ?>" class="waves-effect waves-teal btn-flat">Listen</a>
|
<div class="card-action">
|
||||||
</div>
|
<a href="<?php echo $ch; ?>" class="waves-effect waves-teal btn-flat">Listen</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php
|
</li>
|
||||||
}
|
<?php
|
||||||
}
|
}
|
||||||
?>
|
}
|
||||||
</div>
|
?>
|
||||||
</div>
|
</ul>
|
||||||
</main>
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<footer class="page-footer">
|
<footer class="page-footer">
|
||||||
<div class="badge">
|
<div class="container">
|
||||||
<a href="https://play.google.com/store/apps/details?id=no.lqasse.zoff">
|
<div class="row">
|
||||||
<img alt="Get it on Google Play" src="static/images/google_play.png">
|
<div class="col l6 s12">
|
||||||
</a>
|
<h5 class="white-text">Zöff</h5>
|
||||||
</div>
|
<p class="grey-text text-lighten-4">The shared youtube radio</p>
|
||||||
© <?php echo date("Y"); ?>
|
<p class="grey-text text-lighten-4">
|
||||||
<a href="//nixo.no">Nixo</a> &
|
Being built around the youtube search and video API
|
||||||
<a href="//kasperrt.no">KasperRT</a>
|
it enables the creation of collaboratiive and shared live playlists,
|
||||||
</footer>
|
with billions of videos and songs to choose from, all for free and without registration.
|
||||||
|
<br>
|
||||||
|
Enjoy!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col l4 offset-l2 s12 valign-wrapper">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://play.google.com/store/apps/details?id=no.lqasse.zoff">
|
||||||
|
<img title="Get it on Google Play" src="static/images/google_play.png">
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/nixolas1/Zoff">
|
||||||
|
<img title="Contribute on GitHub" src="static/images/GitHub_Logo.png">
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-copyright">
|
||||||
|
<div class="container">
|
||||||
|
© <?php echo date("Y"); ?>
|
||||||
|
<a href="//nixo.no">Nixo</a> &
|
||||||
|
<a href="//kasperrt.no">KasperRT</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||||
<script type="text/javascript" src="static/js/nochan.js"></script>
|
<script type="text/javascript" src="static/js/lib/materialize.js"></script>
|
||||||
<script type="text/javascript" src="static/js/lib/materialize.js"></script>
|
<script type="text/javascript" src="static/js/nochan.js"></script>
|
||||||
|
|
||||||
<!-- Piwik tracking -->
|
<!-- Piwik tracking -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var _paq = _paq || [];
|
var _paq = _paq || [];
|
||||||
_paq.push(['trackPageView']);
|
_paq.push(['trackPageView']);
|
||||||
_paq.push(['enableLinkTracking']);
|
_paq.push(['enableLinkTracking']);
|
||||||
(function() {
|
(function() {
|
||||||
var u="//zoff.no/analyse/";
|
var u="//zoff.no/analyse/";
|
||||||
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
||||||
_paq.push(['setSiteId', 1]);
|
_paq.push(['setSiteId', 1]);
|
||||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||||
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
<noscript><p><img src="//zoff.no/analyse/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
|
<noscript><p><img src="//zoff.no/analyse/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
|
||||||
<!-- End Piwik Code -->
|
<!-- End Piwik Code -->
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -16,13 +16,40 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* global color */
|
/* global colors */
|
||||||
footer.page-footer,
|
footer.page-footer,
|
||||||
nav, .tabs .tab a,
|
nav, .tabs .tab a,
|
||||||
.side-nav .collapsible-body li.active,
|
.side-nav .collapsible-body li.active,
|
||||||
.side-nav.fixed .collapsible-body li.active,
|
.side-nav.fixed .collapsible-body li.active,
|
||||||
.pagination 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 {
|
main {
|
||||||
@@ -49,6 +76,9 @@ main {
|
|||||||
height: 120px;
|
height: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card .card-content {
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
.card .card-action a {
|
.card .card-action a {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -76,10 +106,13 @@ hide mdi-action-visibility mdi-action-visibility-off
|
|||||||
/* INDEX PAGE */
|
/* INDEX PAGE */
|
||||||
|
|
||||||
#zicon{
|
#zicon{
|
||||||
width: 50px;
|
/* width: 50px; */
|
||||||
margin: 7px 20px;
|
/* margin: 7px 20px; */
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section .search {
|
.section .search {
|
||||||
padding-top: 2.5rem;
|
padding-top: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#channels li{opacity: 0;}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.5 KiB |
BIN
static/images/squareicon.png
Normal file
BIN
static/images/squareicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
static/images/squareicon_small.png
Normal file
BIN
static/images/squareicon_small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
40
static/js/nochan.js
Normal file
40
static/js/nochan.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user