mirror of
https://github.com/rembo10/headphones.git
synced 2026-03-20 03:39:26 +00:00
187 lines
8.0 KiB
HTML
187 lines
8.0 KiB
HTML
<%
|
|
import headphones
|
|
from headphones import version
|
|
%>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<title>Headphones - ${title}</title>
|
|
<meta name="description" content="Headphones 'default' interface - made by Elmar Kouwenhoven">
|
|
<meta name="author" content="Elmar Kouwenhoven">
|
|
|
|
<link rel="icon" href="images/favicon.ico">
|
|
<link rel="apple-touch-icon" href="images/headphoneslogo.png">
|
|
|
|
<link rel="stylesheet" href="css/jquery-ui.min.css">
|
|
<link rel="stylesheet" href="interfaces/default/css/style.css">
|
|
<link rel="stylesheet" href="interfaces/default/css/font-awesome.min.css">
|
|
${next.headIncludes()}
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="ajaxMsg" class="ajaxMsg"></div>
|
|
|
|
% if headphones.CONFIG.CHECK_GITHUB and not headphones.CURRENT_VERSION:
|
|
<div id="updatebar">
|
|
You're running an unknown version of Headphones. <a href="update">Update</a> or
|
|
<a href="#" class="close-updatebar">Close</a>
|
|
</div>
|
|
% elif headphones.CONFIG.CHECK_GITHUB and headphones.CURRENT_VERSION != headphones.LATEST_VERSION and headphones.COMMITS_BEHIND > 0 and headphones.INSTALL_TYPE != 'win':
|
|
<div id="updatebar">
|
|
A <a href="https://github.com/${headphones.CONFIG.GIT_USER}/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. <a href="update">Update</a> or <a href="#" class="close-updatebar">Close</a>
|
|
</div>
|
|
% endif
|
|
|
|
<header>
|
|
<div class="wrapper">
|
|
<div id="logo">
|
|
<a href="home"><img src="images/headphoneslogo.png" alt="headphones" width="64"></a>
|
|
</div>
|
|
<nav id="nav">
|
|
<ul>
|
|
<li><a href="upcoming">wanted</a></li>
|
|
<li><a href="extras">extras</a></li>
|
|
<li><a href="manage">manage</a></li>
|
|
<li><a href="history">history</a></li>
|
|
<li><a href="logs">logs</a></li>
|
|
<li><a href="config" class="config" aria-label="Configuration"><i class="fa fa-gear fa-lg"></i></a></li>
|
|
</ul>
|
|
</nav>
|
|
<div id="searchbar">
|
|
<form action="search" method="get">
|
|
<input type="text" value="" placeholder="Search" name="name" id="search-input" />
|
|
<i class='fa fa-search mini-icon'></i>
|
|
<select name="type" id="search_type">
|
|
<option value="artist">Artist</option>
|
|
<option value="album">Album</option>
|
|
<option value="series">Series</option>
|
|
</select>
|
|
<button type="submit">Search</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main" class="main">
|
|
<div id="subhead">
|
|
${next.headerIncludes()}
|
|
</div>
|
|
${next.body()}
|
|
</main>
|
|
|
|
<footer>
|
|
<div id="info">
|
|
<small>
|
|
<a href="https://github.com/rembo10/headphones"><i class="fa fa-headphones"></i> Website</a> |
|
|
%if headphones.CONFIG.GIT_USER != 'rembo10':
|
|
<a href="https://github.com/${headphones.CONFIG.GIT_USER}/headphones" title="Open this fork on github"><i class="fa fa-github"></i> GitHub</a> |
|
|
%endif
|
|
<a href="https://github.com/rembo10/headphones/wiki/TroubleShooting"><i class="fa fa-ambulance"></i> Help</a>
|
|
</small>
|
|
</div>
|
|
<div id="actions">
|
|
<small>
|
|
<a href="shutdown"><i class="fa fa-power-off"></i> Shutdown</a> |
|
|
<a href="restart"><i class="fa fa-power-off"></i> Restart</a> |
|
|
<a href="#" class="check-update-btn" data-success="Checking for update successful" data-error="Error checking for update"><i class="fa fa-refresh"></i> Check for new version</a>
|
|
</small>
|
|
</div>
|
|
<div id="version">
|
|
Version: <em>${headphones.CURRENT_VERSION}</em>
|
|
%if version.HEADPHONES_VERSION != 'master':
|
|
(${version.HEADPHONES_VERSION})
|
|
%endif
|
|
%if headphones.CONFIG.GIT_BRANCH != 'master':
|
|
(${headphones.CONFIG.GIT_BRANCH})
|
|
%endif
|
|
</div>
|
|
</footer>
|
|
<a href="#main" id="toTop" aria-label="Back to top"><i class="fa fa-angle-double-up"></i> <span>Back to top</span></a>
|
|
</div>
|
|
|
|
<script src="js/libs/jquery-3.7.1.min.js"></script>
|
|
<script src="js/libs/jquery-ui.min.js"></script>
|
|
<script src="js/common.js"></script>
|
|
|
|
${next.javascriptIncludes()}
|
|
|
|
<script src="interfaces/default/js/script.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
// Focus on the first form input that's not hidden
|
|
$('form:first *:input[type!=hidden]:first').focus();
|
|
|
|
// Persist search type using local storage
|
|
try {
|
|
var type = window.localStorage.getItem('search_type') || "artist";
|
|
$("#search_type").val(type);
|
|
} catch (e) {
|
|
console.error("Local Storage not available or error accessing it:", e);
|
|
}
|
|
|
|
// Modernized event listener for closing update bar (delegated)
|
|
// Uses event delegation for robustness: attaches handler to parent (#container)
|
|
// which listens for clicks on elements with class .close-updatebar
|
|
$('#container').on('click', '.close-updatebar', function(e) {
|
|
e.preventDefault(); // Prevent default link behavior
|
|
$(this).closest('#updatebar').slideUp('slow');
|
|
});
|
|
|
|
// Modernized event listener for "Check for new version" (delegated)
|
|
$('#actions').on('click', '.check-update-btn', function(e) {
|
|
e.preventDefault(); // Prevent default link behavior
|
|
// Assuming doAjaxCall is defined in common.js or script.js
|
|
doAjaxCall('checkGithub', $(this));
|
|
});
|
|
|
|
// Event listener for search type change
|
|
$('select[id=search_type]').on('change', function() {
|
|
var type = $(this).val();
|
|
try {
|
|
window.localStorage.setItem('search_type', type);
|
|
} catch (e) {
|
|
console.error("Local Storage not available or error accessing it:", e);
|
|
}
|
|
});
|
|
|
|
// Handle placeholder text for search input (no longer needs onfocus in HTML)
|
|
$('#search-input').on('focus', function() {
|
|
if (this.value === this.defaultValue) {
|
|
this.value = '';
|
|
}
|
|
}).on('blur', function() {
|
|
if (this.value === '') {
|
|
this.value = this.defaultValue;
|
|
}
|
|
});
|
|
|
|
// "Back to top" functionality
|
|
// Show/hide #toTop button based on scroll position
|
|
$(window).scroll(function() {
|
|
if ($(this).scrollTop() > 100) { // Show after scrolling 100px
|
|
$('#toTop').fadeIn();
|
|
} else {
|
|
$('#toTop').fadeOut();
|
|
}
|
|
});
|
|
|
|
// Smooth scroll to top when button is clicked
|
|
$('#toTop').click(function(e) {
|
|
e.preventDefault();
|
|
$('html, body').animate({scrollTop : 0}, 800);
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
<%def name="javascriptIncludes()"></%def>
|
|
<%def name="headIncludes()"></%def>
|
|
<%def name="headerIncludes()"></%def>
|