64 lines
2.5 KiB
HTML
64 lines
2.5 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>Upload Art</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
|
<link rel="icon" href="{{ url_for('static', filename='artberry.ico') }}" type="image/x-icon">
|
|
|
|
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Upload Art</h1>
|
|
</header>
|
|
<main>
|
|
<form method="POST" action="{{ url_for('upload') }}" enctype="multipart/form-data" class="upload-form">
|
|
{{ form.hidden_tag() }}
|
|
<div class="form-group">
|
|
<label for="image_file">{{ form.image_file.label }}</label>
|
|
{{ form.image_file(class="file-input", id="imageInput") }}
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="tags">{{ form.tags.label }}</label>
|
|
{{ form.tags(placeholder="tag1, tag2", class="input-field") }}
|
|
</div>
|
|
<div class="form-group">
|
|
{{ form.recaptcha() }}
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
{{ form.agree_with_rules() }}
|
|
I agree with the <a href="{{ url_for('publication_rules') }}" target="_blank">publication rules</a>.
|
|
</label>
|
|
</div>
|
|
<div class="preview-container hidden" id="previewContainer">
|
|
<p>Image Preview:</p>
|
|
<img id="imagePreview" src="" alt="Image preview will appear here">
|
|
</div>
|
|
<button type="submit" class="button">{{ form.submit.label }}</button>
|
|
</form>
|
|
</main>
|
|
<script>
|
|
document.getElementById('imageInput').addEventListener('change', function(event) {
|
|
const file = event.target.files[0];
|
|
const previewContainer = document.getElementById('previewContainer');
|
|
const previewImage = document.getElementById('imagePreview');
|
|
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
previewImage.src = e.target.result;
|
|
previewContainer.classList.remove('hidden');
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
previewImage.src = '';
|
|
previewContainer.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|