Artberry-web/templates/comic_upload.html
2025-02-16 16:38:57 +02:00

60 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>🫐comic upload - artberry🫐</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/comic_upload.css') }}">
<link rel="icon" href="{{ url_for('static', filename='artberry.ico') }}" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400&display=swap" rel="stylesheet">
</head>
<body>
<h1>Upload Comic</h1>
<form class="upload-comic-form" method="POST" action="{{ url_for('comic_upload') }}" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="form-group">
<label for="title">Comic Name:</label>
<input type="text" name="title" class="input-field" required>
</div>
<div class="form-group">
<label for="thumbnail">Thumbnail:</label>
<input type="file" name="thumbnail" class="file-input" accept="image/*" required>
</div>
<div class="form-group">
<label for="tags">Tags:</label>
<input type="text" name="tags" class="input-field" placeholder="Enter tags, separated by commas">
</div>
<div id="pages">
<div class="form-group">
<label>Page 1:</label>
<input type="file" name="pages[]" class="file-input" accept="image/*" required>
</div>
</div>
<button class="button" type="button" onclick="addPage()">Add Page:</button>
<button type="submit" class="button">Upload Comic:</button>
</form>
<script>
let pageCount = 1;
const maxPages = 64;
function addPage() {
if (pageCount >= maxPages) {
alert(`You cant add more than ${maxPages} pages!`);
return;
}
pageCount++;
const newPage = document.createElement("div");
newPage.classList.add("form-group");
newPage.innerHTML = `<label>Page ${pageCount}:</label><input type="file" name="pages[]" class="file-input" accept="image/*" required>`;
document.getElementById("pages").appendChild(newPage);
}
</script>
</body>
</html>