Fundraising Campaign - Defeat MSA Alliance

Frame 1

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
body {
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: ‘Arial’, sans-serif;
background-color: #f0f0f0;
}

#imageContainer {
position: relative;
width: 480px;
height: 480px;
border: 2px solid #ddd;
overflow: hidden;
margin-bottom: 20px;
}

/* Add a media query for smaller screens */
@media (max-width: 500px) {
#imageContainer {
width: 100%;
height: 350px;
/* Allow height to adjust based on the aspect ratio */
}
}

#selectedImage {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
cursor: grab;
}

#customFrame {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}

#uploadInput {
display: none;
}

#downloadButton {
display: none;
background-color: #4caf50;
color: white;
border: none;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}

#zoomSlider {
display: none;
width: 50%;
margin-top: 10px;
}

#buttonsContainer {
display: flex;
justify-content: space-between;
}
#moveContainer{
display: flex;
justify-content: space-between;
padding-top: 15px;

}
#moveContainer button {
font-size: 10px; /* Set the desired font size */
}

#chooseButton,
#downloadButton {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}

#chooseButton {
background-color: #3498db;
color: white;
border: none;
margin-right: 10px;
}

#downloadButton {
background-color: #4caf50;
color: white;
border: none;
}

#zoomContainer {

display: flex;
align-items: center;
margin-top: 10px;
}

#zoomLabel {
margin-right: 10px;
font-size: 16px;

}

#resetZoom {
padding: 8px;
font-size: 14px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #e74c3c;
color: white;
transition: background-color 0.3s;

}

#resetZoom:hover,
#chooseButton:hover,
#downloadButton:hover {
background-color: #555;
}
</style>
</head>

<div id=”buttonsContainer”>
<button id=”chooseButton” onclick=”chooseImage()”>Choose Image</button>
<button id=”downloadButton” onclick=”downloadImage()”>Download Image</button>

</div>
<div id=”moveContainer”>

<button onclick=”moveImage(‘left’)”>Move Left</button>
<button onclick=”moveImage(‘right’)”>Move Right</button>
<button onclick=”moveImage(‘up’)”>Move Up</button>
<button onclick=”moveImage(‘down’)”>Move Down</button>
</div>
<div id=”zoomContainerHide”>
<div id=”zoomContainer”>
<label id=”zoomLabel”>Zoom:</label>
<input type=”range” id=”zoomSlider” min=”50″ max=”200″ value=”100″ step=”1″ oninput=”adjustImageSize()”>
<button id=”resetZoom” onclick=”resetZoom()”>Reset Zoom</button>
</div>
</div>
<input type=”file” id=”uploadInput” accept=”image/*” onchange=”previewImage(event)”>

function chooseImage() {
document.getElementById(‘uploadInput’).click();
}

function previewImage(event) {
const selectedImage = document.getElementById(‘selectedImage’);
const downloadButton = document.getElementById(‘downloadButton’);
const zoomSlider = document.getElementById(‘zoomSlider’);

const file = event.target.files[0];
const reader = new FileReader();

reader.onload = function (e) {
selectedImage.src = e.target.result;
downloadButton.style.display = ‘block’;
zoomSlider.style.display = ‘block’;

offsetX = 0;
offsetY = 0;
adjustImageSize();
};

if (file) {
reader.readAsDataURL(file);
}
}

function adjustImageSize() {
const zoomSlider = document.getElementById(‘zoomSlider’);
const selectedImage = document.getElementById(‘selectedImage’);
zoomValue = zoomSlider.value;

selectedImage.style.transform = `translate(-50%, -50%) scale(${zoomValue / 100}) translate(${offsetX}px, ${offsetY}px)`;
}

function resetZoom() {
const zoomSlider = document.getElementById(‘zoomSlider’);
zoomValue = 100;
zoomSlider.value = 100;
adjustImageSize();
}

function moveImage(direction) {
const step = 10; // Adjust the step size as needed
const selectedImage = document.getElementById(‘selectedImage’);

switch (direction) {
case ‘left’:
offsetX -= step / (zoomValue / 100); // Adjust the step considering zoom level
break;
case ‘right’:
offsetX += step / (zoomValue / 100); // Adjust the step considering zoom level
break;
case ‘up’:
offsetY -= step / (zoomValue / 100); // Adjust the step considering zoom level
break;
case ‘down’:
offsetY += step / (zoomValue / 100); // Adjust the step considering zoom level
break;
}

selectedImage.style.transform = `translate(-50%, -50%) scale(${zoomValue / 100}) translate(${offsetX}px, ${offsetY}px)`;
}

function downloadImage() {
const imageContainer = document.getElementById(‘imageContainer’);
html2canvas(imageContainer).then(function (canvas) {
const link = document.createElement(‘a’);
link.href = canvas.toDataURL(‘image/png’);
link.download = ‘framed_image.png’;
link.click();
});
}
</script>
</body>

</html>

Cart review

Supporters