269 lines
10 KiB
HTML
269 lines
10 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Anime Search and Request Page</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Search Manga</h1>
|
|
|
|
<div class="search-bar">
|
|
<input type="text" id="searchInput" placeholder="Search..." />
|
|
<div class="selectors">
|
|
<div class="autocomplete">
|
|
<input type="text" id="genreInput" placeholder="Select genres..." oninput="filterSuggestions('genre')"
|
|
onclick="showDropdown('genre')">
|
|
<button onclick="resetGenres()" , class="reset">Reset</button>
|
|
<div class="dropdown-content" id="genreDropdown">
|
|
<!-- Genre suggestions will be dynamically populated here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="autocomplete">
|
|
<input type="text" id="tagInput" placeholder="Select tags..." oninput="filterSuggestions('tag')"
|
|
onclick="showDropdown('tag')">
|
|
<button onclick="resetTags()" class="reset">Reset</button>
|
|
<div class="dropdown-content" id="tagDropdown">
|
|
<!-- Tag suggestions will be dynamically populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button onclick="performSearch()">Search</button>
|
|
<div style="margin-bottom: 1em;">
|
|
<label>
|
|
<input type="checkbox" id="toggleNSFW" />
|
|
Show NSFW content
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{% if results %}
|
|
|
|
<div class="results">
|
|
{% for result in results %}
|
|
<div class="card">
|
|
<div class="image-container {{ 'nsfw' if result.isAdult else '' }}">
|
|
|
|
<img src="{{ result.image }}" alt="Cover">
|
|
{% if result.isAdult %}
|
|
<div class="adult-badge">18+</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<p>{{ result.title }}</p>
|
|
<div class="actions">
|
|
<button onclick="showInfo({{ result | tojson | safe }})" , class="info">Info</button>
|
|
<button onclick="sendRequest({{ result.id | tojson }})" , class="request">Request</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="results">
|
|
<!-- Results will be dynamically populated here -->
|
|
</div>
|
|
|
|
<!-- Info Modal -->
|
|
<div id="infoModal" class="modal" style="display:none;">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeModal()">×</span>
|
|
<h2 id="modalTitle"></h2>
|
|
<p><strong>Status:</strong> <span id="modalStatus"></span></p>
|
|
<p><strong>Type:</strong> <span id="modalType"></span></p>
|
|
<p><strong>Genres:</strong> <span id="modalGenres"></span></p>
|
|
<p><strong>Tags:</strong> <span id="modalTags"></span></p>
|
|
<p><strong>Adult Content:</strong> <span id="modalAdult"></span></p>
|
|
<p><strong>Description:</strong></p>
|
|
<p id="modalDescription"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function sendRequest(item) {
|
|
fetch("/request", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ item: item })
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => alert(data.status === "success" ? "Request logged!" : "Failed"));
|
|
}
|
|
|
|
function showInfo(data) {
|
|
document.getElementById("modalTitle").textContent = data.title;
|
|
document.getElementById("modalStatus").textContent = data.status || "Unknown";
|
|
document.getElementById("modalType").textContent = data.type || "Unknown";
|
|
document.getElementById("modalGenres").textContent = (data.genres || []).join(", ");
|
|
document.getElementById("modalTags").textContent = (data.tags || []).join(", ");
|
|
document.getElementById("modalAdult").textContent = data.isAdult ? "Yes" : "No";
|
|
document.getElementById("modalDescription").innerHTML = data.description || "No description available.";
|
|
document.getElementById("infoModal").style.display = "block";
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById("infoModal").style.display = "none";
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const checkbox = document.getElementById("toggleNSFW");
|
|
const body = document.body;
|
|
|
|
body.classList.add("nsfw-disabled");
|
|
|
|
checkbox.addEventListener("change", () => {
|
|
const enabled = checkbox.checked;
|
|
body.classList.toggle("nsfw-disabled", !enabled);
|
|
body.classList.toggle("nsfw-enabled", enabled);
|
|
|
|
document.querySelectorAll('.image-container.nsfw img').forEach(img => {
|
|
img.dataset.blurred = "true";
|
|
img.style.filter = "";
|
|
});
|
|
});
|
|
|
|
fetchOptions("/api/genres", "genre");
|
|
fetchOptions("/api/tags", "tag");
|
|
});
|
|
|
|
async function fetchOptions(url, dropdownId) {
|
|
try {
|
|
const res = await fetch(url);
|
|
const data = await res.json();
|
|
const dropdown = document.getElementById(dropdownId + 'Dropdown');
|
|
|
|
data.forEach(item => {
|
|
const option = document.createElement("div");
|
|
option.className = "dropdown-item";
|
|
option.textContent = item.name || item;
|
|
option.onclick = () => addToInput(dropdownId, item.name || item);
|
|
dropdown.appendChild(option);
|
|
});
|
|
} catch (err) {
|
|
console.error("Error fetching " + dropdownId, err);
|
|
}
|
|
}
|
|
|
|
function addToInput(inputId, value) {
|
|
const input = document.getElementById(inputId + 'Input');
|
|
const currentValues = input.value.split(',').map(v => v.trim()).filter(v => v);
|
|
|
|
if (!currentValues.includes(value)) {
|
|
currentValues.push(value);
|
|
input.value = currentValues.join(', ');
|
|
}
|
|
}
|
|
|
|
function filterSuggestions(inputId) {
|
|
const input = document.getElementById(inputId + 'Input');
|
|
const filter = input.value.toLowerCase();
|
|
const dropdown = document.getElementById(inputId + 'Dropdown');
|
|
const items = dropdown.getElementsByClassName('dropdown-item');
|
|
|
|
let hasVisibleItems = false;
|
|
Array.from(items).forEach(item => {
|
|
const text = item.textContent.toLowerCase();
|
|
const isVisible = text.includes(filter);
|
|
item.style.display = isVisible ? '' : 'none';
|
|
if (isVisible) hasVisibleItems = true;
|
|
});
|
|
|
|
dropdown.classList.toggle('show', hasVisibleItems);
|
|
}
|
|
|
|
function showDropdown(inputId) {
|
|
const dropdown = document.getElementById(inputId + 'Dropdown');
|
|
dropdown.classList.add('show');
|
|
}
|
|
|
|
document.addEventListener('click', (event) => {
|
|
if (!event.target.matches('.autocomplete input')) {
|
|
document.querySelectorAll('.dropdown-content').forEach(dropdown => {
|
|
dropdown.classList.remove('show');
|
|
});
|
|
}
|
|
});
|
|
|
|
function resetGenres() {
|
|
document.getElementById('genreInput').value = '';
|
|
}
|
|
|
|
function resetTags() {
|
|
document.getElementById('tagInput').value = '';
|
|
}
|
|
|
|
function performSearch() {
|
|
const searchTerm = document.getElementById("searchInput").value.trim();
|
|
const selectedGenres = document.getElementById("genreInput").value.split(',').map(v => v.trim()).filter(v => v);
|
|
const selectedTags = document.getElementById("tagInput").value.split(',').map(v => v.trim()).filter(v => v);
|
|
|
|
const query = {
|
|
query: searchTerm,
|
|
genres: selectedGenres,
|
|
tags: selectedTags
|
|
};
|
|
|
|
fetch("/search", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(query)
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => displayResults(data))
|
|
.catch(err => console.error("Search failed", err));
|
|
}
|
|
|
|
function displayResults(data) {
|
|
const resultsContainer = document.querySelector('.results');
|
|
resultsContainer.innerHTML = ''; // Clear previous results
|
|
|
|
data.forEach(result => {
|
|
const card = document.createElement('div');
|
|
card.className = 'card';
|
|
|
|
const imageContainer = document.createElement('div');
|
|
imageContainer.className = `image-container ${result.isAdult ? 'nsfw' : ''}`;
|
|
|
|
const img = document.createElement('img');
|
|
img.src = result.image || 'https://demofree.sirv.com/nope-not-here.jpg';
|
|
img.alt = 'Cover';
|
|
imageContainer.appendChild(img);
|
|
|
|
if (result.isAdult) {
|
|
const badge = document.createElement('div');
|
|
badge.className = 'adult-badge';
|
|
badge.textContent = '18+';
|
|
imageContainer.appendChild(badge);
|
|
}
|
|
|
|
const title = document.createElement('p');
|
|
title.textContent = result.title || 'Untitled';
|
|
|
|
const actions = document.createElement('div');
|
|
actions.className = 'actions';
|
|
|
|
const infoButton = document.createElement('button');
|
|
infoButton.textContent = 'Info';
|
|
infoButton.onclick = () => showInfo(result);
|
|
|
|
const requestButton = document.createElement('button');
|
|
requestButton.textContent = 'Request';
|
|
requestButton.onclick = () => sendRequest(result.id);
|
|
|
|
actions.appendChild(infoButton);
|
|
actions.appendChild(requestButton);
|
|
|
|
card.appendChild(imageContainer);
|
|
card.appendChild(title);
|
|
card.appendChild(actions);
|
|
|
|
resultsContainer.appendChild(card);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |