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

72
senju/templates/scan.html
View file

@ -12,8 +12,9 @@
<body> <body>
<div class="flex flex-col items-center justify-center min-h-screen bg-violet-900 text-white p-6"> <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"> <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"> <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"> <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"> <div class="flex flex-col items-center justify-center pt-5 pb-6">
@ -27,7 +28,7 @@
</label> </label>
</div> </div>
<!-- Image Preview container --> <!-- Image Preview container-->
<div id="image-preview" class="w-full hidden"> <div id="image-preview" class="w-full hidden">
<div class="relative"> <div class="relative">
<img id="preview-img" src="" alt="Preview" class="w-full h-auto rounded-lg"> <img id="preview-img" src="" alt="Preview" class="w-full h-auto rounded-lg">
@ -39,6 +40,11 @@
</div> </div>
</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"> <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 Submit
</button> </button>
@ -59,12 +65,15 @@
const removeImageBtn = document.getElementById('remove-image'); const removeImageBtn = document.getElementById('remove-image');
const responseBox = document.getElementById('response-box'); const responseBox = document.getElementById('response-box');
const submitButton = document.getElementById('submit-button'); const submitButton = document.getElementById('submit-button');
const errorMessage = document.getElementById('error-message');
let imageUploaded = false;
function handleFileSelect(event) { function handleFileSelect(event) {
const file = event.target.files[0]; const file = event.target.files[0];
if (file && file.type.startsWith('image/')) { if (file && file.type.startsWith('image/')) {
// Create a URL for selected image // Create a URL for the selected image
const imageUrl = URL.createObjectURL(file); const imageUrl = URL.createObjectURL(file);
// Set the image source // Set the image source
@ -73,35 +82,74 @@
// Hide upload area and show image preview // Hide upload area and show image preview
uploadArea.classList.add('hidden'); uploadArea.classList.add('hidden');
imagePreview.classList.remove('hidden'); imagePreview.classList.remove('hidden');
errorMessage.classList.add('hidden');
// Set flag that image is uploaded
imageUploaded = true;
} }
} }
function removeImage() { function removeImage() {
dropzoneFile.value = ''; dropzoneFile.value = '';
// Hide image // Hide image
imagePreview.classList.add('hidden'); imagePreview.classList.add('hidden');
uploadArea.classList.remove('hidden'); uploadArea.classList.remove('hidden');
// Revoke the object
URL.revokeObjectURL(previewImg.src); URL.revokeObjectURL(previewImg.src);
previewImg.src = ''; previewImg.src = '';
imageUploaded = false;
responseBox.classList.add('opacity-0');
setTimeout(() => {
document.getElementById('ai-response').textContent = 'Waiting for input...';
}, 500);
} }
function handleSubmit() { function handleSubmit() {
responseBox.classList.remove('opacity-0'); if (imageUploaded) {
// Hide error
errorMessage.classList.add('hidden');
//Example usage // Show response box
document.getElementById('ai-response').textContent = 'Image uploaded successfully!'; 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); dropzoneFile.addEventListener('change', handleFileSelect);
removeImageBtn.addEventListener('click', removeImage); removeImageBtn.addEventListener('click', removeImage);
submitButton.addEventListener('click', handleSubmit); 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> </script>
</body> </body>
</html>{% endblock %} </html>
{% endblock %}