You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
2.1 KiB
56 lines
2.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>My Song Lyrics</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<!-- DataTables CSS -->
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>My Song Lyrics</h1>
|
|
<nav>
|
|
<a href="{{ url_for('index') }}">Home</a>
|
|
<a href="{{ url_for('add_song') }}">Add Song</a>
|
|
<a href="{{ url_for('add_album') }}">Add Album</a>
|
|
<form action="{{ url_for('search') }}" method="get" style="display:inline;">
|
|
<input type="text" name="query" placeholder="Search songs...">
|
|
<button type="submit">Search</button>
|
|
</form>
|
|
</nav>
|
|
<hr>
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<!-- jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<!-- DataTables JS -->
|
|
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#songTable').DataTable();
|
|
});
|
|
|
|
function openTab(evt, tabName) {
|
|
var i, tabcontent, tablinks;
|
|
tabcontent = document.getElementsByClassName("tabcontent");
|
|
for (i = 0; i < tabcontent.length; i++) {
|
|
tabcontent[i].style.display = "none";
|
|
}
|
|
tablinks = document.getElementsByClassName("tablinks");
|
|
for (i = 0; i < tablinks.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
|
}
|
|
document.getElementById(tabName).style.display = "block";
|
|
evt.currentTarget.className += " active";
|
|
}
|
|
|
|
// Default open tab
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.getElementsByClassName('tablinks')[0].click();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|