mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Refactored in more files, and fixed issues with panel markup
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -789,7 +789,7 @@ hide mdi-action-visibility mdi-action-visibility-off
|
|||||||
|
|
||||||
/* INDEX PAGE */
|
/* INDEX PAGE */
|
||||||
|
|
||||||
#zicon{
|
.zicon{
|
||||||
height: 64px;
|
height: 64px;
|
||||||
transition: padding 1s ease;
|
transition: padding 1s ease;
|
||||||
}
|
}
|
||||||
@@ -2422,7 +2422,7 @@ nav ul li:hover, nav ul li.active {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#zicon{
|
.zicon{
|
||||||
height:100%;
|
height:100%;
|
||||||
}
|
}
|
||||||
/*.list-remove{
|
/*.list-remove{
|
||||||
|
|||||||
@@ -395,7 +395,7 @@ function initfp() {
|
|||||||
if(window.location.hostname == "fb.zoff.me") {
|
if(window.location.hostname == "fb.zoff.me") {
|
||||||
$("footer").addClass("hide");
|
$("footer").addClass("hide");
|
||||||
}
|
}
|
||||||
|
|
||||||
channel_list = $("#channel-list-container").clone().html();
|
channel_list = $("#channel-list-container").clone().html();
|
||||||
|
|
||||||
if(window.location.hostname != "fb.zoff.me") share_link_modifier_frontpage();
|
if(window.location.hostname != "fb.zoff.me") share_link_modifier_frontpage();
|
||||||
@@ -457,16 +457,18 @@ function initfp() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var pad = 0;
|
var pad = 0;
|
||||||
document.getElementById("zicon").addEventListener("click", function(){
|
|
||||||
pad+=10;
|
$(".zicon").on("click", function(e) {
|
||||||
document.getElementById("zicon").style.paddingLeft = pad+"%";
|
e.preventDefault();
|
||||||
if(pad >= 100)
|
|
||||||
|
pad += 10;
|
||||||
|
$(".zicon").css("padding-left", pad + "vh");
|
||||||
|
if(pad >= 80)
|
||||||
window.location.href = 'http://etys.no';
|
window.location.href = 'http://etys.no';
|
||||||
});
|
});
|
||||||
|
|
||||||
if(!Helper.mobilecheck() && Frontpage.winter) {
|
if(!Helper.mobilecheck() && Frontpage.winter) {
|
||||||
$(".mega").prepend('<div id="snow"></div>');
|
$(".mega").prepend('<div id="snow"></div>');
|
||||||
//Frontpage.start_snowfall();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(Helper.mobilecheck()){
|
if(Helper.mobilecheck()){
|
||||||
|
|||||||
@@ -1,18 +1,18 @@
|
|||||||
{{> remote/header}}
|
{{> remote/header}}
|
||||||
<main class="center-align container remote-container">
|
<main class="center-align container remote-container">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h3 id="remote-text">Remote Controller</h3>
|
<h3 id="remote-text">Remote Controller</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
{{> remote/input}}
|
{{> remote/input}}
|
||||||
{{> remote/buttons}}
|
{{> remote/buttons}}
|
||||||
{{> remote/volume}}
|
{{> remote/volume}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section about-remote">
|
<div class="section about-remote">
|
||||||
<b>Here you can control another Zoff player from any device.</b>
|
<b>Here you can control another Zoff player from any device.</b>
|
||||||
<br>
|
<br>
|
||||||
To find the ID of your player, click the Conf <i class="material-icons">menu</i> icon on the top right of the player page, then "Remote Control".
|
To find the ID of your player, click the Conf <i class="material-icons">menu</i> icon on the top right of the player page, then "Remote Control".
|
||||||
<br>You can either scan the QR code or type the ID manually.
|
<br>You can either scan the QR code or type the ID manually.
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -3,7 +3,6 @@
|
|||||||
<li id="chat-log">
|
<li id="chat-log">
|
||||||
<ul class="inherit-height">
|
<ul class="inherit-height">
|
||||||
<li class="active inherit-height">
|
<li class="active inherit-height">
|
||||||
<!--<ul id="chat inherit-height">-->
|
|
||||||
<div class="row inherit-height">
|
<div class="row inherit-height">
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
<ul class="tabs chatTabs tabs-fixed-width">
|
<ul class="tabs chatTabs tabs-fixed-width">
|
||||||
@@ -14,7 +13,6 @@
|
|||||||
<div id="channelchat" class="col s12 inherit-height"><ul id="chatchannel" class="inherit-height"></ul></div>
|
<div id="channelchat" class="col s12 inherit-height"><ul id="chatchannel" class="inherit-height"></ul></div>
|
||||||
<div id="all_chat" class="col s12 inherit-height"><ul id="chatall" class="inherit-height"></ul></div>
|
<div id="all_chat" class="col s12 inherit-height"><ul id="chatall" class="inherit-height"></ul></div>
|
||||||
</div>
|
</div>
|
||||||
<!--</ul>-->
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -2,15 +2,12 @@
|
|||||||
<div class="navbar-fixed">
|
<div class="navbar-fixed">
|
||||||
<nav id="nav">
|
<nav id="nav">
|
||||||
<div class="nav-wrapper">
|
<div class="nav-wrapper">
|
||||||
|
|
||||||
<div class="brand-logo truncate zbrand">
|
<div class="brand-logo truncate zbrand">
|
||||||
<a href="/" class="brand-logo brand-logo-navigate">
|
<a href="/" class="brand-logo brand-logo-navigate">
|
||||||
<img id="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
|
<img class="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<span id="chan" class="chan clickable truncate" title="Show big URL">{{list_name}}</span>
|
<span id="chan" class="chan clickable truncate" title="Show big URL">{{list_name}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="title-container">
|
<ul class="title-container">
|
||||||
<li class="song-title cursor-pointer truncate" id="song-title">
|
<li class="song-title cursor-pointer truncate" id="song-title">
|
||||||
Loading...
|
Loading...
|
||||||
@@ -19,7 +16,6 @@
|
|||||||
<input id="search" class="search_input" type="text" title="Search for songs..." placeholder="Find song on YouTube..." onsubmit="null;" autocomplete="off" />
|
<input id="search" class="search_input" type="text" title="Search for songs..." placeholder="Find song on YouTube..." onsubmit="null;" autocomplete="off" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul class="right control-list noselect">
|
<ul class="right control-list noselect">
|
||||||
<li id="search_loader" class="valign-wrapper">
|
<li id="search_loader" class="valign-wrapper">
|
||||||
<div id="search_loader_inner">
|
<div id="search_loader_inner">
|
||||||
@@ -39,34 +35,18 @@
|
|||||||
<li>
|
<li>
|
||||||
<a class="nav-btn" href="#find" id="search-btn">
|
<a class="nav-btn" href="#find" id="search-btn">
|
||||||
<i class="material-icons">search</i>
|
<i class="material-icons">search</i>
|
||||||
<!--<span class="hover-text">Find</span>-->
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<!--<li>
|
|
||||||
<a class="nav-btn prev" href="#prev">
|
|
||||||
<i class="material-icons">skip_previous</i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="nav-btn skip" href="#skip">
|
|
||||||
<i class="material-icons">skip_next</i>
|
|
||||||
<span class="hover-text">Skip</span>
|
|
||||||
</a>
|
|
||||||
</li>-->
|
|
||||||
<li>
|
<li>
|
||||||
<a class="nav-btn" href="#stir" id="shuffle">
|
<a class="nav-btn" href="#stir" id="shuffle">
|
||||||
<i class="material-icons">shuffle</i>
|
<i class="material-icons">shuffle</i>
|
||||||
<!--<span class="hover-text">Stir</span>-->
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="settings-hamburger" data-activates="settings-bar" id="settings">
|
<li class="settings-hamburger" data-activates="settings-bar" id="settings">
|
||||||
<!--<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
|
|
||||||
<i class="material-icons">menu</i>
|
|
||||||
</a>-->
|
|
||||||
<div class="hamburger-sidenav">
|
<div class="hamburger-sidenav">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -21,491 +21,392 @@
|
|||||||
<span class="switch-text">
|
<span class="switch-text">
|
||||||
Add songs
|
Add songs
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch">
|
||||||
<span class="left-span">Anyone</span>
|
<label>
|
||||||
<input name="addsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
<span class="left-span">Anyone</span>
|
||||||
<span class="right-span">Admin</span>
|
<input name="addsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
</label></div></li>
|
<span class="right-span">Admin</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<span class="switch-text">
|
<span class="switch-text">
|
||||||
Vote
|
Vote
|
||||||
</span>
|
</span>
|
||||||
<div class="switch"><label>
|
<div class="switch">
|
||||||
|
<label>
|
||||||
<span class="left-span">Anyone</span>
|
<span class="left-span">Anyone</span>
|
||||||
<input name="vote" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="vote" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Admin</span>
|
<span class="right-span">Admin</span>
|
||||||
</label></div></li>
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li>
|
||||||
Shuffle
|
<span class="switch-text">
|
||||||
</span>
|
Shuffle
|
||||||
<div class="switch"><label>
|
</span>
|
||||||
|
<div class="switch">
|
||||||
|
<label>
|
||||||
<span class="left-span">Anyone</span>
|
<span class="left-span">Anyone</span>
|
||||||
<input name="shuffle" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="shuffle" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Admin</span>
|
<span class="right-span">Admin</span>
|
||||||
</label></div></li>
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li>
|
||||||
Skip
|
<span class="switch-text">
|
||||||
</span>
|
Skip
|
||||||
<div class="switch"><label>
|
</span>
|
||||||
|
<div class="switch">
|
||||||
|
<label>
|
||||||
<span class="left-span">Anyone</span>
|
<span class="left-span">Anyone</span>
|
||||||
<input name="skip" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="skip" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Admin</span>
|
<span class="right-span">Admin</span>
|
||||||
</label></div></li>
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li>
|
||||||
Song length
|
<span class="switch-text">
|
||||||
</span>
|
Song length
|
||||||
<div class="switch"><label>
|
</span>
|
||||||
|
<div class="switch">
|
||||||
|
<label>
|
||||||
<span class="left-span">Any</span>
|
<span class="left-span">Any</span>
|
||||||
<input name="longsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="longsongs" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Short</span>
|
<span class="right-span">Short</span>
|
||||||
</label></div></li>
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li>
|
||||||
Type
|
<span class="switch-text">
|
||||||
</span>
|
Type
|
||||||
<div class="switch"><label>
|
</span>
|
||||||
|
<div class="switch">
|
||||||
|
<label>
|
||||||
<span class="left-span">Any</span>
|
<span class="left-span">Any</span>
|
||||||
<input name="allvideos" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="allvideos" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Song</span>
|
<span class="right-span">Song</span>
|
||||||
</label></div></li>
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li>
|
||||||
Frontpage
|
<span class="switch-text">
|
||||||
</span>
|
Frontpage
|
||||||
<div class="switch"><label>
|
</span>
|
||||||
|
<div class="switch">
|
||||||
|
<label>
|
||||||
<span class="left-span">Hide</span>
|
<span class="left-span">Hide</span>
|
||||||
<input name="frontpage" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="frontpage" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Display</span>
|
<span class="right-span">Display</span>
|
||||||
</label></div></li>
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li><span class="switch-text">
|
<li>
|
||||||
After play
|
<span class="switch-text">
|
||||||
</span>
|
After play
|
||||||
<div class="switch"><label>
|
</span>
|
||||||
|
<div class="switch">
|
||||||
|
<label>
|
||||||
<span class="left-span">Keep</span>
|
<span class="left-span">Keep</span>
|
||||||
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
|
<input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
|
||||||
<span class="right-span">Remove</span>
|
<span class="right-span">Remove</span>
|
||||||
</label></div></li>
|
</label>
|
||||||
<li class="user-password-li hide"><span class="switch-text">
|
</div>
|
||||||
Channel password
|
</li>
|
||||||
</span>
|
<li class="user-password-li hide">
|
||||||
<div class="switch"><label>
|
<span class="switch-text">
|
||||||
|
Channel password
|
||||||
|
</span>
|
||||||
|
<div class="switch">
|
||||||
|
<label>
|
||||||
<span class="left-span">No</span>
|
<span class="left-span">No</span>
|
||||||
<input name="userpass" type="checkbox" class="conf password_protected" /><span class="lever"></span>
|
<input name="userpass" type="checkbox" class="conf password_protected" /><span class="lever"></span>
|
||||||
<span class="right-span">Yes</span>
|
<span class="right-span">Yes</span>
|
||||||
</label></div></li>
|
|
||||||
<li class="change_user_pass hide">
|
|
||||||
<a href="#!" class="change_user_pass_btn btn waves-effect blue">Change password</a>
|
|
||||||
</li>
|
|
||||||
<li class="delete-all hide">
|
|
||||||
<a href="#" class="delete-all-songs btn red">Delete all songs</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="no-padding">
|
|
||||||
<ul class="collapsible collapsible-accordion">
|
|
||||||
<li>
|
|
||||||
<a class="collapsible-header bold waves-effect">Channel Info
|
|
||||||
<i class="material-icons">info_outline</i>
|
|
||||||
</a>
|
|
||||||
<div class="collapsible-body">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<form id="thumbnail_form" style="display:none;">
|
|
||||||
<div class="input-field col s12">
|
|
||||||
<input type="text" placeholder="Thumbnail" name="chan_thumbnail" id="chan_thumbnail" autocomplete="off" />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<form id="description_form" style="display:none;">
|
|
||||||
<div class="input-field col s12">
|
|
||||||
<input type="text" placeholder="Description" name="chan_description" id="chan_description" autocomplete="off" maxlength="100" data-length="100" />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</li>
|
|
||||||
<li class="channel_info_container">
|
|
||||||
<div id="thumbnail_image">
|
|
||||||
</div>
|
|
||||||
<div id="description_area">
|
|
||||||
This channel doesn't have a description yet..
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="no-padding remote-panel hide-on-small-only">
|
|
||||||
<ul class="collapsible collapsible-accordion">
|
|
||||||
<li>
|
|
||||||
<a class="collapsible-header bold waves-effect">Remote Control
|
|
||||||
<i class="material-icons">settings_remote</i>
|
|
||||||
</a>
|
|
||||||
<div class="collapsible-body">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="switch-text">
|
|
||||||
Enable Remote
|
|
||||||
</span>
|
|
||||||
<div class="switch"><label>
|
|
||||||
Disabled
|
|
||||||
<input name="remote_switch" type="checkbox" class="remote_switch_class" checked /><span class="lever"></span>
|
|
||||||
Enabled
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div><a id="code-link" target="_blank">
|
|
||||||
<img id="code-qr" alt="QR code for control" title="Link to control this Zoff player" src="https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L%7C1&chl=http://zoff.me" />
|
|
||||||
|
|
||||||
<h4 id="code-text">ABBADUR</h4>
|
|
||||||
</a></div>
|
|
||||||
<p>
|
|
||||||
You can control this Zoff instance from another device by going to <b>https://remote.zoff.me/</b>
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="no-padding offline-panel">
|
|
||||||
<ul class="collapsible collapsible-accordion">
|
|
||||||
<li>
|
|
||||||
<a class="collapsible-header bold waves-effect">Local Mode
|
|
||||||
<i class="material-icons">visibility_off</i>
|
|
||||||
</a>
|
|
||||||
<div class="collapsible-body">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="switch-text">
|
|
||||||
Local Mode
|
|
||||||
</span>
|
|
||||||
<div class="switch"><label>
|
|
||||||
Disabled
|
|
||||||
<input name="offline_switch" type="checkbox" class="offline_switch_class" /><span class="lever"></span>
|
|
||||||
Enabled
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div id="offline-info">
|
</li>
|
||||||
By enabling local mode, you won't receive updates in position of the currently playing song, you'll be able to vote as many times as you please, and you can skip to a specific location in the song.
|
<li class="change_user_pass hide">
|
||||||
</div>
|
<a href="#!" class="change_user_pass_btn btn waves-effect blue">Change password</a>
|
||||||
|
</li>
|
||||||
|
<li class="delete-all hide">
|
||||||
|
<a href="#" class="delete-all-songs btn red">Delete all songs</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</form>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="no-padding">
|
||||||
|
<ul class="collapsible collapsible-accordion">
|
||||||
|
<li>
|
||||||
|
<a class="collapsible-header bold waves-effect">Channel Info
|
||||||
|
<i class="material-icons">info_outline</i>
|
||||||
|
</a>
|
||||||
|
<div class="collapsible-body">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<form id="thumbnail_form" style="display:none;">
|
||||||
|
<div class="input-field col s12">
|
||||||
|
<input type="text" placeholder="Thumbnail" name="chan_thumbnail" id="chan_thumbnail" autocomplete="off" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<form id="description_form" style="display:none;">
|
||||||
|
<div class="input-field col s12">
|
||||||
|
<input type="text" placeholder="Description" name="chan_description" id="chan_description" autocomplete="off" maxlength="100" data-length="100" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</li>
|
||||||
|
<li class="channel_info_container">
|
||||||
|
<div id="thumbnail_image">
|
||||||
|
</div>
|
||||||
|
<div id="description_area">
|
||||||
|
This channel doesn't have a description yet..
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="no-padding remote-panel hide-on-small-only">
|
||||||
|
<ul class="collapsible collapsible-accordion">
|
||||||
|
<li>
|
||||||
|
<a class="collapsible-header bold waves-effect">Remote Control
|
||||||
|
<i class="material-icons">settings_remote</i>
|
||||||
|
</a>
|
||||||
|
<div class="collapsible-body">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span class="switch-text">
|
||||||
|
Enable Remote
|
||||||
|
</span>
|
||||||
|
<div class="switch">
|
||||||
|
<label>
|
||||||
|
Disabled
|
||||||
|
<input name="remote_switch" type="checkbox" class="remote_switch_class" checked /><span class="lever"></span>
|
||||||
|
Enabled
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div><a id="code-link" target="_blank">
|
||||||
|
<img id="code-qr" alt="QR code for control" title="Link to control this Zoff player" src="https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L%7C1&chl=http://zoff.me" />
|
||||||
|
|
||||||
<li class="no-padding show-only-mobile">
|
<h4 id="code-text">ABBADUR</h4>
|
||||||
<ul class="collapsible collapsible-accordion">
|
</a></div>
|
||||||
<li>
|
<p>
|
||||||
<a class="collapsible-header bold waves-effect import-a">Remote Controller
|
You can control this Zoff instance from another device by going to <b>https://remote.zoff.me/</b>
|
||||||
<i class="material-icons">settings_remote</i>
|
</p>
|
||||||
</a>
|
</li>
|
||||||
<div class="collapsible-body">
|
</ul>
|
||||||
<ul id="remote-mobile-container">
|
</div>
|
||||||
<li class="white-bg">
|
</li>
|
||||||
<p id="remote_header">Control another client</p>
|
</ul>
|
||||||
<form action="#" class="row" id="remoteform">
|
</li>
|
||||||
<div class="input-field col s12">
|
|
||||||
<input
|
<li class="no-padding offline-panel">
|
||||||
class="input-field"
|
<ul class="collapsible collapsible-accordion">
|
||||||
type="text"
|
<li>
|
||||||
id="remote_channel"
|
<a class="collapsible-header bold waves-effect">Local Mode
|
||||||
name="chan"
|
<i class="material-icons">visibility_off</i>
|
||||||
autocomplete="off"
|
</a>
|
||||||
spellcheck="false"
|
<div class="collapsible-body">
|
||||||
maxlength="10"
|
<ul>
|
||||||
data-length="10"
|
<li>
|
||||||
placeholder="ID to remotecontroll"
|
<span class="switch-text">
|
||||||
/>
|
Local Mode
|
||||||
|
</span>
|
||||||
|
<div class="switch">
|
||||||
|
<label>
|
||||||
|
Disabled
|
||||||
|
<input name="offline_switch" type="checkbox" class="offline_switch_class" /><span class="lever"></span>
|
||||||
|
Enabled
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div id="offline-info">
|
||||||
|
By enabling local mode, you won't receive updates in position of the currently playing song, you'll be able to vote as many times as you please, and you can skip to a specific location in the song.
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="no-padding show-only-mobile">
|
||||||
|
<ul class="collapsible collapsible-accordion">
|
||||||
|
<li>
|
||||||
|
<a class="collapsible-header bold waves-effect import-a">Remote Controller
|
||||||
|
<i class="material-icons">settings_remote</i>
|
||||||
|
</a>
|
||||||
|
<div class="collapsible-body">
|
||||||
|
<ul id="remote-mobile-container">
|
||||||
|
<li class="white-bg">
|
||||||
|
<p id="remote_header">Control another client</p>
|
||||||
|
<form action="#" class="row" id="remoteform">
|
||||||
|
<div class="input-field col s12">
|
||||||
|
<input
|
||||||
|
class="input-field"
|
||||||
|
type="text"
|
||||||
|
id="remote_channel"
|
||||||
|
name="chan"
|
||||||
|
autocomplete="off"
|
||||||
|
spellcheck="false"
|
||||||
|
maxlength="10"
|
||||||
|
data-length="10"
|
||||||
|
placeholder="ID to remotecontroll"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div id="remote-sidebar-buttons-container">
|
||||||
|
<button id="playbutton_remote" class="remote-button waves-effect btn green" disabled>
|
||||||
|
<i id="remote_play" class="material-icons">play_arrow</i>
|
||||||
|
</button>
|
||||||
|
<button id="pausebutton_remote" class="remote-button waves-effect btn gray" disabled>
|
||||||
|
<i id="remote_pause" class="material-icons">pause</i>
|
||||||
|
</button>
|
||||||
|
<button id="skipbutton_remote" class="remote-button waves-effect btn blue" disabled>
|
||||||
|
<i id="remote_skip" class="material-icons">skip_next</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="" id="volume-control-remote" title="Volume"></div>
|
||||||
|
<i class="material-icons slider-vol-mobile">volume_up</i>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="no-padding">
|
||||||
|
<ul class="collapsible collapsible-accordion">
|
||||||
|
<li>
|
||||||
|
<a class="collapsible-header bold waves-effect import-a">Import Playlist
|
||||||
|
<i class="material-icons">keyboard_arrow_down</i>
|
||||||
|
</a>
|
||||||
|
<div class="collapsible-body">
|
||||||
|
<ul>
|
||||||
|
<li class="white-bg">
|
||||||
|
<div class="input-field field-settings youtube_unclicked import-buttons">
|
||||||
|
<a class="modal-trigger waves-effect red btn import-youtube" title="Import from YouTube playlist">
|
||||||
|
<img src="/assets/images/youtube.png" class="youtube_logo" alt="Youtube Logo" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="input-field field-settings youtube_clicked">
|
||||||
|
<form action="#" id="listImport">
|
||||||
|
<i class="material-icons import-icon">playlist_add</i>
|
||||||
|
<input title="Input YouTube-playlist url here!" placeholder="Enter YouTube-list URL" id="import" type="text" class="validate" autocomplete="off" />
|
||||||
|
<div class="valign playlist_loader_padding">
|
||||||
|
<div id="playlist_loader" class="preloader-wrapper small active hide">
|
||||||
|
{{> spinner}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div id="remote-sidebar-buttons-container">
|
</div>
|
||||||
<button id="playbutton_remote" class="remote-button waves-effect btn green" disabled>
|
</li>
|
||||||
<i id="remote_play" class="material-icons">play_arrow</i>
|
<li class="white-bg">
|
||||||
</button>
|
<div class="input-field field-settings spotify_unauthenticated import-buttons">
|
||||||
<button id="pausebutton_remote" class="remote-button waves-effect btn gray" disabled>
|
<a class="modal-trigger waves-effect green lighten btn import-spotify-auth" title="Import Spotify playlist">
|
||||||
<i id="remote_pause" class="material-icons">pause</i></button>
|
<img src="/assets/images/spotify.png" class="left spotify_logo" alt="Spotify Logo" />Spotify
|
||||||
<button id="skipbutton_remote" class="remote-button waves-effect btn blue" disabled>
|
</a>
|
||||||
<i id="remote_skip" class="material-icons">skip_next</i>
|
</div>
|
||||||
</button>
|
<div class="input-field field-settings spotify_authenticated">
|
||||||
|
<form action="#" id="listImportSpotify">
|
||||||
|
<i class="material-icons import-icon">playlist_add</i>
|
||||||
|
<input title="Input Spotify-playlist url here!" placeholder="Enter Spotify-list url" id="import_spotify" type="text" class="validate" autocomplete="off" />
|
||||||
|
<div id="playlist_loader_spotify" class="valign playlist_loader_padding hide">
|
||||||
|
<div class="preloader-wrapper small active">
|
||||||
|
{{> spinner}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="" id="volume-control-remote" title="Volume"></div>
|
</form>
|
||||||
<i class="material-icons slider-vol-mobile">volume_up</i>
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="not-imported white-bg hide">
|
||||||
|
<div class="center-align">Not imported</div>
|
||||||
|
<ul class="input-field field-settings not-imported-container">
|
||||||
|
<li class="white-bg not-imported-element">
|
||||||
|
<div class="extra-add-text truncate"></div>
|
||||||
|
<a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
|
||||||
|
<a href="#" class="waves-effect green lighten btn right extra-button extra-button-search">
|
||||||
|
<i class="material-icons search-extra">search</i>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="no-padding">
|
|
||||||
<ul class="collapsible collapsible-accordion">
|
|
||||||
<li>
|
|
||||||
<a class="collapsible-header bold waves-effect import-a">Import Playlist
|
|
||||||
<i class="material-icons">keyboard_arrow_down</i>
|
|
||||||
</a>
|
|
||||||
<div class="collapsible-body">
|
|
||||||
<ul>
|
|
||||||
<li class="white-bg">
|
|
||||||
<div class="input-field field-settings youtube_unclicked import-buttons">
|
|
||||||
<a class="modal-trigger waves-effect red btn import-youtube" title="Import from YouTube playlist">
|
|
||||||
<img src="/assets/images/youtube.png" class="youtube_logo" alt="Youtube Logo" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="input-field field-settings youtube_clicked">
|
|
||||||
<form action="#" id="listImport">
|
|
||||||
<i class="material-icons import-icon">playlist_add</i>
|
|
||||||
<input title="Input YouTube-playlist url here!" placeholder="Enter YouTube-list URL" id="import" type="text" class="validate" autocomplete="off" />
|
|
||||||
<div class="valign playlist_loader_padding">
|
|
||||||
<div id="playlist_loader" class="preloader-wrapper small active hide">
|
|
||||||
<div class="spinner-layer spinner-blue">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-red">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-yellow">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-green">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="white-bg">
|
|
||||||
<div class="input-field field-settings spotify_unauthenticated import-buttons">
|
|
||||||
<a class="modal-trigger waves-effect green lighten btn import-spotify-auth" title="Import Spotify playlist">
|
|
||||||
<img src="/assets/images/spotify.png" class="left spotify_logo" alt="Spotify Logo" />Spotify
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="input-field field-settings spotify_authenticated">
|
|
||||||
<form action="#" id="listImportSpotify">
|
|
||||||
<i class="material-icons import-icon">playlist_add</i>
|
|
||||||
<input title="Input Spotify-playlist url here!" placeholder="Enter Spotify-list url" id="import_spotify" type="text" class="validate" autocomplete="off" />
|
|
||||||
<div id="playlist_loader_spotify" class="valign playlist_loader_padding hide">
|
|
||||||
<div class="preloader-wrapper small active">
|
|
||||||
<div class="spinner-layer spinner-blue">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-red">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-yellow">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-green">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="not-imported white-bg hide">
|
|
||||||
<div class="center-align">Not imported</div>
|
|
||||||
<ul class="input-field field-settings not-imported-container">
|
|
||||||
<li class="white-bg not-imported-element">
|
|
||||||
<div class="extra-add-text truncate"></div>
|
|
||||||
<a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
|
|
||||||
<a href="#" class="waves-effect green lighten btn right extra-button extra-button-search">
|
|
||||||
<i class="material-icons search-extra">search</i></a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li class="no-padding">
|
<li class="no-padding">
|
||||||
<ul class="collapsible collapsible-accordion white-bg">
|
<ul class="collapsible collapsible-accordion white-bg">
|
||||||
<li>
|
<li>
|
||||||
<a class="collapsible-header bold waves-effect export-a">Export Playlist
|
<a class="collapsible-header bold waves-effect export-a">Export Playlist
|
||||||
<i class="material-icons">keyboard_arrow_up</i>
|
<i class="material-icons">keyboard_arrow_up</i>
|
||||||
</a>
|
</a>
|
||||||
<div class="collapsible-body">
|
<div class="collapsible-body">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="white-bg">
|
<li class="white-bg">
|
||||||
<div class="input-field field-settings youtube_export_button export-buttons">
|
<div class="input-field field-settings youtube_export_button export-buttons">
|
||||||
<a class="modal-trigger waves-effect red btn export-youtube" id="listExport" title="Export to YouTube">
|
<a class="modal-trigger waves-effect red btn export-youtube" id="listExport" title="Export to YouTube">
|
||||||
<img src="/assets/images/youtube.png" class="youtube_logo" alt="Youtube Logo" />
|
<img src="/assets/images/youtube.png" class="youtube_logo" alt="Youtube Logo" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="white-bg">
|
|
||||||
<div class="input-field field-settings spotify_export_button export-buttons">
|
|
||||||
<a class="modal-trigger waves-effect green lighten btn export-spotify-auth" title="Export Spotify playlist">
|
|
||||||
<img src="/assets/images/spotify.png" class="left spotify_logo" alt="Spotify Logo" />Spotify
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="exported-list-container white-bg hide">
|
|
||||||
<div class="valign playlist_loader_padding">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col s2">
|
|
||||||
<div id="playlist_loader_export" class="preloader-wrapper small active hide">
|
|
||||||
<div class="spinner-layer spinner-blue">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-red">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-yellow">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-green">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="current_number hide col s8 offset-s2">0/0</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="white-bg">
|
|
||||||
<div class="exported-list input-field field-settings export-buttons">
|
|
||||||
</div>
|
|
||||||
<li class="not-exported white-bg hide">
|
|
||||||
<div class="center-align">Not exported songs</div>
|
|
||||||
<ul class="input-field field-settings not-exported-container">
|
|
||||||
<li class="white-bg not-exported-element">
|
|
||||||
<div id="extra-export-container-text">
|
|
||||||
<input class="extra-add-text truncate" readonly />
|
|
||||||
</div>
|
|
||||||
<a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="white-bg">
|
||||||
|
<div class="input-field field-settings spotify_export_button export-buttons">
|
||||||
|
<a class="modal-trigger waves-effect green lighten btn export-spotify-auth" title="Export Spotify playlist">
|
||||||
|
<img src="/assets/images/spotify.png" class="left spotify_logo" alt="Spotify Logo" />Spotify
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="exported-list-container white-bg hide">
|
||||||
|
<div class="valign playlist_loader_padding">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s2">
|
||||||
|
<div id="playlist_loader_export" class="preloader-wrapper small active hide">
|
||||||
|
{{> spinner}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="current_number hide col s8 offset-s2">0/0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="white-bg">
|
||||||
|
<div class="exported-list input-field field-settings export-buttons">
|
||||||
|
</div>
|
||||||
|
<li class="not-exported white-bg hide">
|
||||||
|
<div class="center-align">Not exported songs</div>
|
||||||
|
<ul class="input-field field-settings not-exported-container">
|
||||||
|
<li class="white-bg not-exported-element">
|
||||||
|
<div id="extra-export-container-text">
|
||||||
|
<input class="extra-add-text truncate" readonly />
|
||||||
|
</div>
|
||||||
|
<a href="#" class="waves-effect red lighten btn right extra-button extra-button-delete">X</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
|
|
||||||
<!--
|
|
||||||
<li class="no-padding">
|
|
||||||
<h5 id="desc-title">List description</h5>
|
|
||||||
<span id="description"></span>
|
|
||||||
</li>
|
</li>
|
||||||
-->
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<li class="no-padding">
|
||||||
|
<h5 id="desc-title">List description</h5>
|
||||||
|
<span id="description"></span>
|
||||||
|
</li>
|
||||||
|
-->
|
||||||
|
|||||||
@@ -21,8 +21,6 @@
|
|||||||
<a href="#" class="waves-effect btn-flat clickable more_button">
|
<a href="#" class="waves-effect btn-flat clickable more_button">
|
||||||
<i class="material-icons">more_vert</i>
|
<i class="material-icons">more_vert</i>
|
||||||
</a>
|
</a>
|
||||||
<!--<a title="Remove song" class="waves-effect btn-flat clickable hide-on-small-only delete_button hide suggested_remove">Delete</a>
|
|
||||||
<a title="Remove song" class="waves-effect btn-flat clickable hide-on-med-and-up delete_button hide suggested_remove"><i class="material-icons">close</i></a>-->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mobile-delete red">DELETE</div>
|
<div class="mobile-delete red">DELETE</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -14,45 +14,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="valign hide" id="send-loader">
|
<div class="valign hide" id="send-loader">
|
||||||
<div class="preloader-wrapper small active">
|
<div class="preloader-wrapper small active">
|
||||||
<div class="spinner-layer spinner-blue">
|
{{> spinner}}
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-red">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-yellow">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spinner-layer spinner-green">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -2,10 +2,9 @@
|
|||||||
<nav id="fp-nav">
|
<nav id="fp-nav">
|
||||||
<div class="nav-wrapper">
|
<div class="nav-wrapper">
|
||||||
<a href="#" class="brand-logo">
|
<a href="#" class="brand-logo">
|
||||||
<img id="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
|
<img class="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
|
||||||
</a>
|
</a>
|
||||||
<div id="frontpage-viewer-counter" class="noselect" title="Divided among all channels. Hidden or not"></div>
|
<div id="frontpage-viewer-counter" class="noselect" title="Divided among all channels. Hidden or not"></div>
|
||||||
<!--<a href="//zoff.me" class="brand-logo brand-mobile hide-on-med-and-up">Zoff</a>-->
|
|
||||||
<ul class="right hide-on-med-and-down">
|
<ul class="right hide-on-med-and-down">
|
||||||
<li><a class="header-buttons waves-effect waves-cyan" id="offline-mode" title="Local mode" href="#">Local</a></li>
|
<li><a class="header-buttons waves-effect waves-cyan" id="offline-mode" title="Local mode" href="#">Local</a></li>
|
||||||
<li><a class="header-buttons waves-effect waves-green" title="Remote control a Zoff player" href="https://remote.zoff.me">Remote</a></li>
|
<li><a class="header-buttons waves-effect waves-green" title="Remote control a Zoff player" href="https://remote.zoff.me">Remote</a></li>
|
||||||
@@ -13,28 +12,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div id="about" class="modal">
|
{{> modal/about}}
|
||||||
<div class="modal-content">
|
|
||||||
<h4>About</h4>
|
|
||||||
<p>Zoff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
|
|
||||||
Zoff is mainly a web-based service. The website uses NodeJS with Socket.IO, MongoDB and express on the backend, with JavaScript, jQuery and Materialize on the frontend.<br><br>
|
|
||||||
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
|
|
||||||
|
|
||||||
</p>
|
|
||||||
<h4>Legal</h4>
|
|
||||||
<p>Copyright © 2017 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
|
|
||||||
<br><br>
|
|
||||||
Creative Commons License<br>
|
|
||||||
Zoff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
|
|
||||||
<br>
|
|
||||||
Do not redistribute without permission from the developers.
|
|
||||||
<br>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="donation" class="modal">
|
<div id="donation" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h4>Thanks!</h4>
|
<h4>Thanks!</h4>
|
||||||
|
|||||||
21
server/public/partials/modal/about.handlebars
Normal file
21
server/public/partials/modal/about.handlebars
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<div id="about" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h4>About</h4>
|
||||||
|
<p>Zoff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
|
||||||
|
Zoff is mainly a web-based service. The website uses NodeJS with Socket.IO, MongoDB and express on the backend, with JavaScript, jQuery and Materialize on the frontend.<br><br>
|
||||||
|
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
|
||||||
|
</p>
|
||||||
|
<h4>Legal</h4>
|
||||||
|
<p>Copyright © 2017 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
|
||||||
|
<br><br>
|
||||||
|
Creative Commons License<br>
|
||||||
|
Zoff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
|
||||||
|
<br>
|
||||||
|
Do not redistribute without permission from the developers.
|
||||||
|
<br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -2,11 +2,11 @@
|
|||||||
<nav id="fp-nav">
|
<nav id="fp-nav">
|
||||||
<div class="nav-wrapper">
|
<div class="nav-wrapper">
|
||||||
<a href="https://zoff.me" class="brand-logo brand-logo-navigate hide-on-med-and-down">
|
<a href="https://zoff.me" class="brand-logo brand-logo-navigate hide-on-med-and-down">
|
||||||
<img id="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
|
<img class="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
|
||||||
</a>
|
</a>
|
||||||
<div class="brand-logo truncate zbrand">
|
<div class="brand-logo truncate zbrand">
|
||||||
<a href="https://zoff.me" class="hide-on-large-only brand-logo-navigate">
|
<a href="https://zoff.me" class="hide-on-large-only brand-logo-navigate">
|
||||||
<img id="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
|
<img class="zicon" src="/assets/images/z.svg" alt="zoff" title="Zoff" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<ul class="right hide-on-med-and-down">
|
<ul class="right hide-on-med-and-down">
|
||||||
@@ -15,27 +15,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div id="about" class="modal">
|
{{> modal/about}}
|
||||||
<div class="modal-content">
|
|
||||||
<h4>About</h4>
|
|
||||||
<p>Zoff is a shared (free) YouTube based radio service, built upon the YouTube API. <br><br>
|
|
||||||
Zoff is mainly a web-based service. The website uses NodeJS with Socket.IO, MongoDB and express on the backend, with JavaScript, jQuery and Materialize on the frontend.<br><br>
|
|
||||||
The team consists of Kasper Rynning-Tønnesen and Nicolas Almagro Tonne, and the project has been worked on since late 2014.<br><br>
|
|
||||||
</p>
|
|
||||||
<h4>Legal</h4>
|
|
||||||
<p>Copyright © 2017 <br>Nicolas Almagro Tonne and Kasper Rynning-Tønnesen
|
|
||||||
<br><br>
|
|
||||||
Creative Commons License<br>
|
|
||||||
Zoff is licensed under a <br><a href="http://creativecommons.org/licenses/by-nc-nd/3.0/no/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Norway License.</a>
|
|
||||||
<br>
|
|
||||||
Do not redistribute without permission from the developers.
|
|
||||||
<br>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="help" class="modal">
|
<div id="help" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h4>Help</h4>
|
<h4>Help</h4>
|
||||||
|
|||||||
47
server/public/partials/spinner.handlebars
Normal file
47
server/public/partials/spinner.handlebars
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
<div class="spinner-layer spinner-blue">
|
||||||
|
<div class="circle-clipper left">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="gap-patch">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="spinner-layer spinner-red">
|
||||||
|
<div class="circle-clipper left">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="gap-patch">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="spinner-layer spinner-yellow">
|
||||||
|
<div class="circle-clipper left">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="gap-patch">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="spinner-layer spinner-green">
|
||||||
|
<div class="circle-clipper left">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="gap-patch">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user