Quotes Card

:root {
–primary: #4a6fa5;
–text: #333;
}

body {
font-family: ‘Hind Siliguri’, sans-serif;
background: #f0f4f8;
margin: 0;
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
color: var(–text);
transition: background 0.4s ease;
}

/* Background Themes */
body.bg-1 { background: #e3f2fd; }
body.bg-2 { background: #f3e5f5; }
body.bg-3 { background: #e8f5e8; }
body.bg-4 { background: #fff3e0; }
body.bg-5 { background: #fff8e1; }

.card-wrapper {
width: 400px;
height: 400px;
position: relative;
border-radius: 16px;
overflow: hidden;
}

.card {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border-radius: 16px;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
box-sizing: border-box;
background: #ffffff;
border: 6px solid #ffffff;
box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.quote {
font-size: 28px;
font-weight: 600;
margin: 0 0 12px;
line-height: 1.55;
padding: 0 10px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: #1a237e;
}

.author-container {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 18px;
font-weight: 600;
min-height: 40px;
color: #c62828;
}

.author-container i {
font-size: 18px;
transition: transform 0.3s ease;
}

.author-container:hover i {
transform: rotate(-10deg);
}

/* Control Panel */
.control-panel {
margin-top: 30px;
width: 400px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}

.control-group {
display: flex;
gap: 10px;
align-items: center;
}

.control-group select,
.control-group input[type=”color”] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
}

.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px;
background-color: #4a6fa5;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
margin-top: 10px;
}

.btn.download {
background-color: #2e7d32;
}

.btn:hover {
opacity: 0.9;
}

/* Font Classes */
.font-default {
font-family: ‘Hind Siliguri’, sans-serif !important;
}
.font-solaiman {
font-family: ‘SolaimanLipi’, serif !important;
}
.font-bensen {
font-family: ‘BenSen Handwriting’, cursive, sans-serif !important;
}

const body = document.getElementById(‘body’);
const card = document.querySelector(‘.card’);
const quoteText = document.getElementById(‘quoteText’);
const authorContainer = document.getElementById(‘authorContainer’);
const iconDisplay = document.getElementById(‘iconDisplay’);

function updatePostcard() {
const quote = document.getElementById(‘quoteInput’).value.trim();
const author = document.getElementById(‘authorInput’).value.trim();

quoteText.innerText = quote ? `”${quote}”` : ‘”জীবন সংগ্রামে হার মানো না, চেষ্টা চালিয়ে যাও।”‘;
document.getElementById(‘authorText’).innerText = author ? author : ‘বঙ্কিমচন্দ্র চট্টোপাধ্যায়’;

changeFont();
changeIcon();
changeCardBg();
changeQuoteColor();
changeAuthorColor();
}

function changeFont() {
const font = document.getElementById(‘fontSelect’).value;

quoteText.className = ‘quote’;
authorContainer.className = ‘author-container’;

if (font === ‘solaiman’) {
quoteText.classList.add(‘font-solaiman’);
authorContainer.classList.add(‘font-solaiman’);
} else if (font === ‘bensen’) {
quoteText.classList.add(‘font-bensen’);
authorContainer.classList.add(‘font-bensen’);
} else {
quoteText.classList.add(‘font-default’);
authorContainer.classList.add(‘font-default’);
}
}

function changeIcon() {
const icon = document.getElementById(‘iconSelect’).value;
iconDisplay.className = ”;
iconDisplay.classList.add(‘fas’, `fa-${icon}`);
}

function changeBackground() {
body.className = `bg-${document.getElementById(‘bgSelect’).value}`;
}

function changeCardBg() {
card.style.background = document.getElementById(‘cardBgPicker’).value;
}

function changeQuoteColor() {
quoteText.style.color = document.getElementById(‘quoteColorPicker’).value;
}

function changeAuthorColor() {
const color = document.getElementById(‘authorColorPicker’).value;
authorContainer.style.color = color;
iconDisplay.style.color = color;
}

function saveAsPNG() {
const element = document.getElementById(‘postcard’);
const canvas = document.getElementById(‘canvas’);
const scale = 3;

canvas.width = 400 * scale;
canvas.height = 400 * scale;

// No alert — silent processing
setTimeout(() => {
html2canvas(element, {
canvas: canvas,
scale: scale,
useCORS: true,
allowTaint: true,
backgroundColor: null,
logging: false,
width: 400,
height: 400
}).then(canvas => {
const link = document.createElement(‘a’);
link.download = ‘bangla-postcard.png’;
link.href = canvas.toDataURL(‘image/png’);
link.click(); // Auto-download
}).catch(() => {
// Fail silently
alert(“ডাউনলোড করতে সমস্যা হয়েছে। পুনরায় চেষ্টা করুন।”);
});
}, 1000); // Slight delay for rendering
}

// Initialize
changeFont();
changeIcon();
changeBackground();
changeCardBg();
changeQuoteColor();
changeAuthorColor();