0xalivecow/senju
1
0
Fork 0
mirror of https://github.com/senju1337/senju.git synced 2025-12-24 07:39:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: Add removal of submit message if no image is submitted yet

Browse source 
Refs: OPS-55
This commit is contained in:
0xjrx 2025-03-07 16:24:16 +01:00
parent 34b52b8866
commit b739b1d1dc
No known key found for this signature in database
GPG key ID: 61C53033867D0271
1 changed files with 61 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

74
senju/templates/scan.html
View file

@ -12,8 +12,9 @@
<body>
<div class="flex flex-col items-center justify-center min-h-screen bg-violet-900 text-white p-6">
<div class="bg-white text-gray-900 p-8 rounded-xl shadow-lg max-w-lg w-full text-center transform transition duration-300 hover:scale-105 mb-8">
<h1 class="text-3xl font-bold text-violet-700 mb-4">Upload your image</h1>
<!-- File upload container -->
<h1 class="text-3xl font-bold text-violet-700 mb-4">Upload your image</h1>
<!-- File Upload container-->
<div id="upload-area" class="flex items-center justify-center w-full">
<label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
@ -27,7 +28,7 @@
</label>
</div>
<!-- Image Preview container -->
<!-- Image Preview container-->
<div id="image-preview" class="w-full hidden">
<div class="relative">
<img id="preview-img" src="" alt="Preview" class="w-full h-auto rounded-lg">
@ -39,6 +40,11 @@
</div>
</div>
<!-- Error message -->
<div id="error-message" class="mt-4 text-red-500 hidden">
Please upload an image first.
</div>
<button id="submit-button" type="submit" class="mt-6 bg-violet-600 hover:bg-violet-700 text-white font-bold py-2 px-4 rounded transition duration-300">
Submit
</button>
@ -59,12 +65,15 @@
const removeImageBtn = document.getElementById('remove-image');
const responseBox = document.getElementById('response-box');
const submitButton = document.getElementById('submit-button');
const errorMessage = document.getElementById('error-message');
let imageUploaded = false;
function handleFileSelect(event) {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
// Create a URL for selected image
// Create a URL for the selected image
const imageUrl = URL.createObjectURL(file);
// Set the image source
@ -73,35 +82,74 @@
// Hide upload area and show image preview
uploadArea.classList.add('hidden');
imagePreview.classList.remove('hidden');
errorMessage.classList.add('hidden');
// Set flag that image is uploaded
imageUploaded = true;
}
}
function removeImage() {
dropzoneFile.value = '';
// Hide image
imagePreview.classList.add('hidden');
uploadArea.classList.remove('hidden');
// Revoke the object
URL.revokeObjectURL(previewImg.src);
previewImg.src = '';
imageUploaded = false;
responseBox.classList.add('opacity-0');
setTimeout(() => {
document.getElementById('ai-response').textContent = 'Waiting for input...';
}, 500);
}
function handleSubmit() {
responseBox.classList.remove('opacity-0');
//Example usage
document.getElementById('ai-response').textContent = 'Image uploaded successfully!';
if (imageUploaded) {
// Hide error
errorMessage.classList.add('hidden');
// Show response box
responseBox.classList.remove('opacity-0');
// Example response
document.getElementById('ai-response').textContent = 'Generating Haiku from image...';
} else {
errorMessage.classList.remove('hidden');
uploadArea.classList.add('shake');
setTimeout(() => {
uploadArea.classList.remove('shake');
}, 600);
}
}
// Add event listeners
dropzoneFile.addEventListener('change', handleFileSelect);
removeImageBtn.addEventListener('click', removeImage);
submitButton.addEventListener('click', handleSubmit);
// Add some CSS animation
document.head.insertAdjacentHTML('beforeend', `
<style>
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.shake {
animation: shake 0.5s ease-in-out;
border-color: #ef4444 !important;
}
</style>
`);
</script>
</body>
</html>{% endblock %}
</html>
{% endblock %}