KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sexy front page and images

Browse Source
This commit is contained in:
Nicolas A. Tonne
2015-04-09 13:42:27 +02:00
parent dc431677f9
commit d5b36640c7
9 changed files with 243 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.php
View File

@@ -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>

11
php/header.php
View File

@@ -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 &amp; Kasper 'KasperRT' Rynning-Tønnesen"> <meta name="author" content="Nicolas 'Nixo' Almagro Tonne &amp; Kasper 'KasperRT' Rynning-Tønnesen">

59
php/nochan.php
View File

@@ -27,14 +27,14 @@ foreach($fil as $files){
{ {
$file = file_get_contents($files); $file = file_get_contents($files);
$data = json_decode($file, TRUE); $data = json_decode($file, TRUE);
if(isset($data["nowPlaying"])){
$q = array_values($data["nowPlaying"]); $q = array_values($data["nowPlaying"]);
/*if($q[0]["id"] == "30H2Z8Lr-4c"); }
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);
@@ -55,7 +55,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"><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>
@@ -83,16 +83,16 @@ foreach($fil as $files){
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)
{ {
@@ -104,7 +104,7 @@ foreach($fil as $files){
$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; ?>')">
@@ -116,6 +116,7 @@ foreach($fil as $files){
<span class="flow-text truncate"><?php echo $ch; ?></span> <span class="flow-text truncate"><?php echo $ch; ?></span>
<br> <br>
<span class="highlighted">Viewers:&nbsp</span><?php echo $views; ?> <span class="highlighted">Viewers:&nbsp</span><?php echo $views; ?>
<br>
<span class="highlighted">Songs:&nbsp</span><?php echo(count($d["songs"])+1); ?> <span class="highlighted">Songs:&nbsp</span><?php echo(count($d["songs"])+1); ?>
</p> </p>
</div> </div>
@@ -123,29 +124,55 @@ foreach($fil as $files){
<a href="<?php echo $ch; ?>" class="waves-effect waves-teal btn-flat">Listen</a> <a href="<?php echo $ch; ?>" class="waves-effect waves-teal btn-flat">Listen</a>
</div> </div>
</div> </div>
</div> </li>
<?php <?php
} }
} }
?> ?>
</div> </ul>
</div> </div>
</main> </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>
<p class="grey-text text-lighten-4">The shared youtube radio</p>
<p class="grey-text text-lighten-4">
Being built around the youtube search and video API
it enables the creation of collaboratiive and shared live playlists,
with billions of videos and songs to choose from, all for free and without registration.
<br>
Enjoy!
</p>
</div> </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">
&copy; <?php echo date("Y"); ?> &copy; <?php echo date("Y"); ?>
<a href="//nixo.no">Nixo</a> &amp; <a href="//nixo.no">Nixo</a> &amp;
<a href="//kasperrt.no">KasperRT</a> <a href="//kasperrt.no">KasperRT</a>
</div>
</div>
</footer> </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">

41
static/css/style.css
View File

@@ -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;}

BIN
static/images/GitHub_Logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/images/google_play.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
static/images/squareicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
static/images/squareicon_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

40
static/js/nochan.js Normal file
View 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;
}
}
}
});