Notes

<div id="multi-step-form" class="p-5">
<div class="image-strip" id="preview-container">
{% for image in images %}
<div class="image-wrapper">
<div class="image-container"> <!-- Container for image -->
<img src="{{ image.image.url }}" alt="Image {{ forloop.counter }}">
</div>
<div class="text-container">
<textarea class="form-control" placeholder="Write Caption here" data-index="{{ forloop.counter0 }}"></textarea>
</div>
<div class="caption" data-index="{{ forloop.counter0 }}"></div>
<div class="style-popup" data-index="{{ forloop.counter0 }}">
<span style="font-weight: bold;" class="toggle-bold">B</span>
<span style="font-style: italic;" class="toggle-italic">I</span>
<span style="text-decoration: underline;" class="toggle-underline">U</span>
<span class="toggle-case">Aa</span>
<span style="color: #e74c3c;" class="change-color">Color</span>
<input type="color" class="color-picker" value="#ffffff">
</div>
</div>
{% endfor %}
</div>

<button id="save-sequence-btn" class="btn btn-primary mt-2" style="float: right;">Save Caption</button>
</div>


this is css
.image-strip {
display: flex;
flex-direction: column;
gap: 2.3rem;
padding: 2.5rem;
border: 1px solid #eee;
width: 100%;
box-sizing: border-box;
}

.image-wrapper {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}

.image-wrapper img {
width: 500px;
height: 300px;
border-radius: 8px;
margin-right: 4rem;
}

.form-control {
width: 500px;
height: 300px;
padding: 6px 10px;
border-radius: 6px;
border: 1.5px solid #3498db;
outline: none;
}

.image-wrapper:hover img {
transform: scale(1.05);
transition: transform 0.3s ease;
}

.image-wrapper:hover .form-control {
border-color: #2980b9;
background-color: rgba(41, 128, 185, 0.1);
transition: background-color 0.3s ease, border-color 0.3s ease;
border: 3.1px solid #3498db;
}

.caption {
position: absolute;
bottom: 20px;
left: 20px;
color: rgb(15, 8, 8);
padding: 5px;
border-radius: 5px;
cursor: move;
user-select: none;
}

.style-popup {
display: none;
position: absolute;
bottom: 50px;
left: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 10;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
}

/* .style-popup {
display: none;
position: absolute;
background: rgba(255, 255, 255, 0.9);
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 10;
display: flex;
align-items: center;
} */
.style-popup span {
margin: 0 5px;
cursor: pointer;
padding: 5px 10px;
}

.style-popup span:hover {
background: #3498db;
color: white;
}

.color-picker {
width: 40px;
height: 40px;
margin-left: 5px;
display: inline-block;
/* Keep display as inline-block */
}

.captions-display {
width: 500px;
height: 300px;
padding: 6px 10px;
border-radius: 6px;
border: 1.5px solid #3498db;
outline: none;
}
</style>

this is my js
<script>
const captionsData = []; // Array to hold caption data for saving
document.querySelectorAll('.form-control').forEach(textArea => {
textArea.addEventListener('input', function () {
const index = this.getAttribute('data-index');
const captionDiv = document.querySelector(`.caption[data-index='${index}']`);
captionDiv.textContent = this.value; // Update the caption with text from textarea
// Save caption initial state
saveCaptionState(index);
});
});
document.querySelectorAll('.caption').forEach(caption => {
const index = caption.getAttribute('data-index');
const stylePopup = document.querySelector(`.style-popup[data-index='${index}']`);
const imageWrapper = caption.closest('.image-wrapper');
const imageContainer = imageWrapper.querySelector('.image-container');
caption.addEventListener('mouseenter', () => {
stylePopup.style.display = 'flex'; // Show the popup as a flex box on hover
});
stylePopup.addEventListener('mouseenter', () => {
stylePopup.style.display = 'block';
});
caption.addEventListener('mouseleave', () => {
stylePopup.style.display = 'none'; // Hide the popup when not hovering
});
// Enable drag-and-drop functionality for captions
caption.addEventListener('mousedown', function (e) {
let posX = e.clientX;
let posY = e.clientY;
const captionElement = this;
function drag(event) {
// Calculate the new position
let newLeft = captionElement.offsetLeft + event.clientX - posX;
let newTop = captionElement.offsetTop + event.clientY - posY;
// Get image dimensions for boundary checking
const imageRect = imageContainer.getBoundingClientRect();
const captionRect = captionElement.getBoundingClientRect();

// Restrict movements within the bounds of the image
if (newLeft < 0) newLeft = 0; // Left boundary
if (newLeft + captionRect.width > imageRect.width) newLeft = imageRect.width - captionRect.width; // Right boundary
if (newTop < 0) newTop = 0; // Top boundary
if (newTop + captionRect.height > imageRect.height) newTop = imageRect.height - captionRect.height; // Bottom boundary
captionElement.style.left = newLeft + 'px';
captionElement.style.top = newTop + 'px';

posX = event.clientX;
posY = event.clientY;
// Update the caption state on drag
saveCaptionState(index);
}
function stopDrag() {
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', stopDrag);
}
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
});
// Handle click outside the popup to hide it
document.addEventListener('click', (event) => {
if (!stylePopup.contains(event.target) && !caption.contains(event.target)) {
stylePopup.style.display = 'none'; // Hide the popup if clicking outside
}
});
// Color change functionality
stylePopup.querySelector('.change-color').addEventListener('click', () => {
const newColor = prompt("Enter a color (name or hex code):", "#ffffff");
if (newColor) {
caption.style.color = newColor; // Change caption text color
saveCaptionState(index); // Update state after changes
}
});
// Toggle styles
function toggleStyle(style) {
switch (style) {
case 'bold':
caption.style.fontWeight = caption.style.fontWeight === 'bold' ? 'normal' : 'bold';
break;
case 'italic':
caption.style.fontStyle = caption.style.fontStyle === 'italic' ? 'normal' : 'italic';
break;
case 'underline':
caption.style.textDecoration = caption.style.textDecoration === 'underline' ? 'none' : 'underline';
break;
case 'case':
const captionText = caption.textContent;
caption.textContent = captionText === captionText.toUpperCase() ? captionText.toLowerCase() : captionText.toUpperCase();
break;
}
saveCaptionState(index); // Update state after changes
}
stylePopup.querySelector('.toggle-bold').addEventListener('click', () => toggleStyle('bold'));
stylePopup.querySelector('.toggle-italic').addEventListener('click', () => toggleStyle('italic'));
stylePopup.querySelector('.toggle-underline').addEventListener('click', () => toggleStyle('underline'));
stylePopup.querySelector('.toggle-case').addEventListener('click', () => toggleStyle('case'));
// Add event listener for color picker
const colorPicker = stylePopup.querySelector('.color-picker');
colorPicker.addEventListener('input', function () {
caption.style.color = this.value;
saveCaptionState(index); // Update state after color change
});
});
// Function to save caption state
function saveCaptionState(index) {
const captionElement = document.querySelector(`.caption[data-index='${index}']`);
const captionText = captionElement.textContent;
const captionStyles = {
color: captionElement.style.color,
fontWeight: captionElement.style.fontWeight,
fontStyle: captionElement.style.fontStyle,
textDecoration: captionElement.style.textDecoration,
position: {
left: captionElement.style.left,
top: captionElement.style.top,
},
};
captionsData[index] = { text: captionText, styles: captionStyles }; // Save state
}
document.getElementById('save-sequence-btn').addEventListener('click', function() {
// Here we would typically send captionsData to the server or the next page
console.log(captionsData);

// Redirect to a new URL
window.location.href = 'aspect-ratio';
});

</script>