• Scroll to top
Skip to content
Defeat MSA Alliance
Defeat MSA Alliance
Defeat MSA Alliance
Defeat MSA Alliance
Defeat MSA Alliance Defeat MSA Alliance
  • What is MSA?
    • MSA 101
    • Managing MSA
    • Diseases That Mimic MSA
    • Symptoms & Misdiagnoses
    • Known Treatments
    • Summary About MSA in Spanish & English
  • About Us
    • Our Mission
    • Joe’s Story
    • Board of Directors
    • Board of Advisors
    • Financials
  • Research
    • Research Registry
    • Brain Donations
    • Pipelines
    • Scientific & Medical Research Advisors
    • Glossary
  • Patient Programs
    • Caregivers Blog
    • Patient Support Blog
    • Loaner Closet Program
    • Facebook Groups
    • Friends & Allies
    • Assistive Communication
  • Education
    • Medical Conferences
  • Public Awareness
    • MSA Awareness Shoe
    • MSA Awareness Proclamations
  • Giving Programs
    • Legacy Funds
    • Volunteer
    • Memorial Envelopes
  • Shop

© 2024-2025 Defeat MSA Alliance, All rights reserved. The brand names “Defeat MSA” and “Defeat Multiple System Atrophy” are trademarked and wholly owned by Defeat MSA Alliance.
No part of this website may be copied without the express permission of Defeat MSA Alliance. For information, contact the trademark and copyright holder: copyright@defeatmsa.org

Privacy Policy

  • Donate
  • 0
    Cart review

    No products in the cart.

  • What is MSA?
    • MSA 101
    • Managing MSA
    • Diseases That Mimic MSA
    • Symptoms & Misdiagnoses
    • Known Treatments
    • Summary About MSA in Spanish & English
  • About Us
    • Our Mission
    • Joe’s Story
    • Board of Directors
    • Board of Advisors
    • Financials
  • Research
    • Research Registry
    • Brain Donations
    • Pipelines
    • Scientific & Medical Research Advisors
    • Glossary
  • Patient Programs
    • Caregivers Blog
    • Patient Support Blog
    • Loaner Closet Program
    • Facebook Groups
    • Friends & Allies
    • Assistive Communication
  • Education
    • Medical Conferences
  • Public Awareness
    • MSA Awareness Shoe
    • MSA Awareness Proclamations
  • Giving Programs
    • Legacy Funds
    • Volunteer
    • Memorial Envelopes
  • Shop
Get In Touch
29924 Jefferson Avenue
Saint Clair Shores, MI, 48082
Ph: +1-855-542-5672 | +1 (855 KICK-MSA)
Back

Shop

Filters
Filters

Showing 1–12 of 21 results

  • Select options
    Cuffed Beanie
    Uncategorized
    $23.95
  • Select options
    Cuffed Beanie
    Uncategorized
    $23.95
  • Select options
    Cuffed Beanie
    Uncategorized
    $15.50
  • Select options
    Distressed Dad Hat
    Uncategorized
    $25.50
  • Select options
    Men's classic tee
    Uncategorized
    $14.50 – $23.50
  • Select options
    Pom-Pom Beanie
    Uncategorized
    $24.50
  • Select options
    Pom-Pom Beanie
    Uncategorized
    $24.50
  • Select options
    Socks
    Uncategorized
    $15.00
  • Select options
    Trucker Cap
    Uncategorized
    $23.00
  • Select options
    Unisex Long Sleeve Tee
    Uncategorized
    $28.50
  • Select options
    Unisex Sweatshirt
    Uncategorized
    $29.95 – $37.95
  • Select options
    Unisex Sweatshirt
    Uncategorized
    $45.50
  • 1
  • 2
  • Facebook. Instagram. LinkedIn.
  • 29924 JEFFERSON AVENUE
    SAINT CLAIR SHORES, MICHIGAN,
    48082, USA

  • Call Toll Free
    +(855)542-5672 | (855 KICK-MSA)

  • Get Involved

    • Loaner Closet Program
    • Brain Donations
    • Memorial Envelopes
    • Volunteer
    • MSA Shop
  • About Us

    • Mission
    • Joe's Story
    • Board of Directors
    • Legacy Grants
    • Financials
    • Other Conduct Policies
  • Supporters

    • Research & Medical Advisors
    • Friends & Allies
  • Downloads

    • Defeat MSA Alliance Brochure
    • Patient Wallet Card
    • Patient Pamphlet
    • MSA Awareness Card
    • Medical Resources
    • MSA Zoom Backgrounds
    • Overview MSA Treatment (EN)
    • Overview MSA Treatment (SP)

© 2024-2025 Defeat MSA Alliance, All rights reserved. The brand names “Defeat MSA” and “Defeat Multiple System Atrophy” are trademarked and wholly owned by Defeat MSA Alliance.
No part of this website may be copied without the express permission of Defeat MSA Alliance. For information, contact the trademark and copyright holder:
copyright@defeatmsa.org

Privacy Policy

This website stores cookies on your computer. Cookie Policy

Translate »
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>

<body>
<div id=”imageContainer”>
<img id=”selectedImage” alt=”Selected Image”>
<img id=”customFrame” src=”https://defeatmsa.org/wp-content/uploads/2024/03/Defeat_MSA_Awareness-01.png”
alt=”Custom Frame”>
</div>

<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)”>

<script src=”https://html2canvas.hertzen.com/dist/html2canvas.min.js”></script>
<script>
let offsetX = 0;
let offsetY = 0;
let zoomValue = 100;

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>