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

feat: add box to show generated haiku from image

Browse source 
OPS-55
This commit is contained in:
0xjrx 2025-03-14 15:11:04 +01:00
parent b43d03c35c
commit 4eef745764
No known key found for this signature in database
GPG key ID: 61C53033867D0271
1 changed files with 29 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

27
senju/templates/scan.html
View file

@ -75,6 +75,19 @@
</div> </div>
<p class="text-lg text-gray-700 mt-4 italic">Creating a beautiful haiku based on your image...</p> <p class="text-lg text-gray-700 mt-4 italic">Creating a beautiful haiku based on your image...</p>
</div> </div>
<div id="generated-haiku-box" class="mt-8 bg-white text-gray-900 p-6 rounded-lg shadow-lg max-w-lg w-full text-center hidden transition-opacity duration-500 ease-in-out">
<h2 class="text-2xl font-semibold text-violet-700">Red suit, vents unseen,<br>
Sus behavior, crew unsure,<br>
Vote him, task complete.</h2>
<div class="flex justify-center mt-4">
<div class="loader animate-pulse flex space-x-4">
<div class="w-3 h-3 bg-violet-600 rounded-full"></div>
<div class="w-3 h-3 bg-violet-600 rounded-full"></div>
<div class="w-3 h-3 bg-violet-600 rounded-full"></div>
</div>
</div>
<p class="text-lg text-gray-700 mt-4 italic">Creating a beautiful haiku based on your image...</p>
</div>
</div> </div>
<script> <script>
@ -90,7 +103,7 @@
const yesButton = document.getElementById('yes-button'); const yesButton = document.getElementById('yes-button');
const noButton = document.getElementById('no-button'); const noButton = document.getElementById('no-button');
const generatingHaikuBox = document.getElementById('generating-haiku-box'); const generatingHaikuBox = document.getElementById('generating-haiku-box');
const generatedHaikuBox = document.getElementById('generated-haiku-box');
let imageUploaded = false; let imageUploaded = false;
function handleFileSelect(event) { function handleFileSelect(event) {
@ -156,14 +169,18 @@
// Hide response box // Hide response box
responseBox.classList.add('opacity-0'); responseBox.classList.add('opacity-0');
// Show generating haiku box // Show generating haiku box first
setTimeout(() => { setTimeout(() => {
responseBox.classList.add('hidden'); responseBox.classList.add('hidden');
generatingHaikuBox.classList.remove('hidden'); generatingHaikuBox.classList.remove('hidden');
}, 500);
}
function handleNoClick() { // After a delay, hide generating box and show result
setTimeout(() => {
generatingHaikuBox.classList.add('hidden');
generatedHaikuBox.classList.remove('hidden');
}, 3000); // Show loading animation for 3 seconds before revealing the haiku
}, 500); // Wait for response box fade out
} function handleNoClick() {
// Reset everything // Reset everything
removeImage(); removeImage();
} }