initial commit
This commit is contained in:
174
src/templates/index.html
Normal file
174
src/templates/index.html
Normal file
@@ -0,0 +1,174 @@
|
||||
<!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">
|
||||
<select id="genreSelect" multiple>
|
||||
<!-- Populated dynamically -->
|
||||
</select>
|
||||
|
||||
<select id="tagSelect" multiple>
|
||||
<!-- Populated dynamically -->
|
||||
</select>
|
||||
</div>
|
||||
<button onclick="performSearch()">Search</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{% if results %}
|
||||
<div style="margin-bottom: 1em;">
|
||||
<label>
|
||||
<input type="checkbox" id="toggleNSFW" />
|
||||
Show NSFW content
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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 }})'>Info</button>
|
||||
<!-- return title and id -->
|
||||
<button onclick='sendRequest({{ result.id | tojson }})'>Request</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- 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").textContent = data.description || "No description available.";
|
||||
document.getElementById("infoModal").style.display = "block";
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById("infoModal").style.display = "none";
|
||||
}
|
||||
// Blur effect for NSFW images
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const checkbox = document.getElementById("toggleNSFW");
|
||||
const body = document.body;
|
||||
|
||||
// Initial state
|
||||
body.classList.add("nsfw-disabled");
|
||||
|
||||
// NSFW toggle
|
||||
checkbox.addEventListener("change", () => {
|
||||
const enabled = checkbox.checked;
|
||||
body.classList.toggle("nsfw-disabled", !enabled);
|
||||
body.classList.toggle("nsfw-enabled", enabled);
|
||||
|
||||
// Reset all image blur states when toggling
|
||||
document.querySelectorAll('.image-container.nsfw img').forEach(img => {
|
||||
img.dataset.blurred = "true";
|
||||
img.style.filter = ""; // Remove inline filter style to respect CSS hover and CSS blur
|
||||
});
|
||||
});
|
||||
|
||||
// Fetch genres and tags on page load
|
||||
fetchOptions("/api/genres", "genreSelect");
|
||||
fetchOptions("/api/tags", "tagSelect");
|
||||
});
|
||||
// Mobile: click toggles blur when NSFW is disabled
|
||||
async function fetchOptions(url, selectId) {
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
const select = document.getElementById(selectId);
|
||||
|
||||
data.forEach(item => {
|
||||
const option = document.createElement("option");
|
||||
option.value = item;
|
||||
option.textContent = item;
|
||||
select.appendChild(option);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Error fetching " + selectId, err);
|
||||
}
|
||||
}
|
||||
|
||||
function performSearch() {
|
||||
const searchTerm = document.getElementById("searchInput").value.trim();
|
||||
|
||||
const selectedGenres = Array.from(document.getElementById("genreSelect").selectedOptions).map(opt => opt.value);
|
||||
const selectedTags = Array.from(document.getElementById("tagSelect").selectedOptions).map(opt => opt.value);
|
||||
|
||||
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) {
|
||||
// Replace this with your rendering logic
|
||||
console.log(data);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user