76 lines
2.4 KiB
HTML
76 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>these r not the droids you u looking 4</title>
|
|
</head>
|
|
<body>
|
|
<div style="position: absolute; float: right; right: 10px;">
|
|
<a href="/player">Player</a>
|
|
-
|
|
<a href="/stats">Stats</a>
|
|
</div>
|
|
<div id="main">
|
|
<label for="show">Show:</label>
|
|
<select id="show" onchange="show_change()">
|
|
<option value="all" selected>All</option>
|
|
<option value="anime">Anime</option>
|
|
<option value="manga">Manga</option>
|
|
<option value="music">Music</option>
|
|
<option value="favourited">Favourited</option>
|
|
</select>
|
|
<div>
|
|
<ul>
|
|
[[ for:listings:listing ]]
|
|
[[ component:listing ]]
|
|
[[ endfor ]]
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function show_change() {
|
|
const show_value = document.getElementById("show").value;
|
|
if (show_value === "all") {
|
|
document.querySelectorAll(".listing").forEach((l) => {
|
|
l.style.display = "list-item";
|
|
});
|
|
} else if (show_value === "anime") {
|
|
document.querySelectorAll(".listing").forEach((l) => {
|
|
if (l.classList.contains("anime-listing")) {
|
|
l.style.display = "list-item";
|
|
} else {
|
|
l.style.display = "none";
|
|
}
|
|
});
|
|
} else if (show_value === "manga") {
|
|
document.querySelectorAll(".listing").forEach((l) => {
|
|
if (l.classList.contains("manga-listing")) {
|
|
l.style.display = "list-item";
|
|
} else {
|
|
l.style.display = "none";
|
|
}
|
|
});
|
|
} else if (show_value === "music") {
|
|
document.querySelectorAll(".listing").forEach((l) => {
|
|
if (l.classList.contains("music-listing")) {
|
|
l.style.display = "list-item";
|
|
} else {
|
|
l.style.display = "none";
|
|
}
|
|
});
|
|
} else if (show_value === "favourited") {
|
|
document.querySelectorAll(".listing").forEach((l) => {
|
|
if (l.classList.contains("favourited-listing")) {
|
|
l.style.display = "list-item";
|
|
} else {
|
|
l.style.display = "none";
|
|
}
|
|
});
|
|
}
|
|
}
|
|
show_change();
|
|
</script>
|
|
</body>
|
|
</html>
|