Vacancy Update – Student & Corporate Card Designer
ID CARD DESIGNER ID STUDIO PRO
All-in-One Professional ID Card Designer
Layout & Setup
10 Premium Designs
Select any layout template background art below. They are entirely built with high contrast local vector paths.
25 Custom Layout Templates
Realign information blocks dynamically using these 25 built-in structural options.
Real-time Print-Ready Studio Render
ID Studio Pro custom parameters
- Choose your preferred **Layout Template** & **Background Art** from the customize tabs dynamically.
- Files uploaded for Logos, Student/Employee photos, and Signatures remain active when you swap templates.
- For physical printing, we recommend exporting high-res **PNG Image** and issuing off-set credit card size PVC printing.
${d.isStudent ? 'STUDENT' : 'EMPLOYEE'}
ID CARD
${d.isStudent ? `
Class:${d.field2}
Roll No.:${d.field1}
Father:${d.fieldFather}
Mother:${d.fieldMother}
D.O.B:${d.fieldDob}
Contact:${d.field4}
Address:${d.personalAddr}
` : `
Designation:${d.roleType}
Emp ID:${d.field1}
Department:${d.field2}
Contact:${d.field4}
Email:${d.fieldEmail}
Address:${d.personalAddr}
`}
${d.isStudent ? d.schoolAddr : d.officeAddr}
${d.webLink}
${d.signHTML}
${d.isStudent ? 'Principal' : 'Authorised Signatory'}
`;
} else {
// Landscape (Standard original template)
return `
${d.isStudent ? 'STUDENT' : 'EMPLOYEE'}
ID CARD
${d.isStudent ? `
Class:${d.field2}
Roll No.:${d.field1}
Father:${d.fieldFather}
Mother:${d.fieldMother}
D.O.B:${d.fieldDob}
Contact:${d.field4}
Address:${d.personalAddr}
` : `
Designation:${d.roleType}
Emp ID:${d.field1}
Department:${d.field2}
Contact:${d.field4}
Email:${d.fieldEmail}
Address:${d.personalAddr}
`}
${d.isStudent ? d.schoolAddr : d.officeAddr}
${d.webLink}
${d.signHTML}
${d.isStudent ? 'Principal' : 'Authorised Signatory'}
`;
}
}
},
'alternative-portrait-standard': {
name: '2. Alternative Traditional',
desc: 'Matches alternative student/corporate layouts (Universal Academy / Google style).',
render: (d) => {
if (d.isPortrait) {
return `
${d.org}
${d.isStudent ? 'STUDENT IDENTITY CARD' : 'OFFICIAL IDENTITY CARD'}
${d.isStudent ? `
ROLL NO:${d.field1}
CLASS:${d.field2}
FATHER:${d.fieldFather}
MOTHER:${d.fieldMother}
D.O.B:${d.fieldDob}
CONTACT:${d.field4}
ADDRESS:${d.personalAddr}
` : `
EMP ID:${d.field1}
DEPARTMENT:${d.field2}
BLOOD GROUP:${d.field3}
D.O.J:${d.fieldDoj}
EMERGENCY PH:${d.fieldEmergency}
ADDRESS:${d.personalAddr}
`}
${d.isStudent ? d.schoolAddr : d.officeAddr}
${d.signHTML}
`;
} else {
return `
${d.org}
${d.isStudent ? 'STUDENT IDENTITY CARD' : 'OFFICIAL IDENTITY CARD'}
${d.isStudent ? `
ROLL NO:${d.field1}
CLASS:${d.field2}
FATHER:${d.fieldFather}
MOTHER:${d.fieldMother}
D.O.B:${d.fieldDob}
CONTACT:${d.field4}
ADDRESS:${d.personalAddr}
` : `
EMP ID:${d.field1}
DEPARTMENT:${d.field2}
BLOOD GROUP:${d.field3}
D.O.J:${d.fieldDoj}
EMERGENCY PH:${d.fieldEmergency}
ADDRESS:${d.personalAddr}
`}
${d.isStudent ? d.schoolAddr : d.officeAddr}
${d.signHTML}
`;
}
}
},
'centered-vip-style': {
name: '3. Centered Elegant Shield',
desc: 'Centered minimal pass with shield element structure and colons-aligned data.',
render: (d) => {
return `
${d.org}
${d.isStudent ? `
ROLL: ${d.field1}
CLASS: ${d.field2}
ADDR: ${d.personalAddr}
` : `
ID: ${d.field1}
DEPT: ${d.field2}
ADDR: ${d.personalAddr}
`}
${d.signHTML}
`;
}
}
};
// Initialize Page Elements on Load
window.addEventListener('DOMContentLoaded', () => {
renderControls();
updateCards();
});
// Dynamic presets and UI renderer
function renderControls() {
// Pick active background suite depending on Active Studio Mode
const activeBgSuite = (currentStudioMode === 'student') ? studentBackgrounds : corporateBackgrounds;
document.getElementById('bg-selector-title').innerText = (currentStudioMode === 'student') ? "10 School ID Designs" : "10 Corporate ID Designs";
// Render 10 backgrounds selection grid
const bgContainer = document.getElementById('background-select-grid');
bgContainer.innerHTML = activeBgSuite.map((bg, idx) => `
`).join('');
// Render Layout templates selection list
const templateContainer = document.getElementById('template-select-list');
templateContainer.innerHTML = Object.keys(layoutTemplates).map(key => {
const t = layoutTemplates[key];
return `
`;
}).join('');
}
// Configuration switcher tabs
function switchConfigTab(tabId) {
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('text-indigo-600', 'bg-indigo-50');
btn.classList.add('text-slate-600', 'hover:bg-slate-50');
});
document.querySelectorAll('.tab-pane-config').forEach(pane => {
pane.classList.add('hidden');
});
if (tabId === 'details-tab') {
document.getElementById('btn-details-tab').classList.add('text-indigo-600', 'bg-indigo-50');
document.getElementById('tab-config-details').classList.remove('hidden');
} else if (tabId === 'design-tab') {
document.getElementById('btn-design-tab').classList.add('text-indigo-600', 'bg-indigo-50');
document.getElementById('tab-config-design').classList.remove('hidden');
} else if (tabId === 'templates-tab') {
document.getElementById('btn-templates-tab').classList.add('text-indigo-600', 'bg-indigo-50');
document.getElementById('tab-config-templates').classList.remove('hidden');
}
}
// --- STUDIO TOGGLE SYSTEM (Upper Switcher Button) ---
function switchStudio(mode) {
currentStudioMode = mode;
// Toggle form views
const formStudent = document.getElementById('form-student-panel');
const formCorporate = document.getElementById('form-corporate-panel');
const tabStudent = document.getElementById('tab-student');
const tabCorporate = document.getElementById('tab-corporate');
if (mode === 'student') {
formStudent.classList.remove('hidden');
formCorporate.classList.add('hidden');
tabStudent.className = "flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300 bg-indigo-600 text-white shadow-md shadow-indigo-500/25";
tabCorporate.className = "flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300 text-slate-300 hover:text-white";
selectedBgPreset = 'bg-student-sunrise';
changeTemplatePreset('classic-standard');
showToast("Switched to School ID Studio", "info");
} else {
formStudent.classList.add('hidden');
formCorporate.classList.remove('hidden');
tabCorporate.className = "flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300 bg-indigo-600 text-white shadow-md shadow-indigo-500/25";
tabStudent.className = "flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300 text-slate-300 hover:text-white";
selectedBgPreset = 'bg-corp-techvision';
changeTemplatePreset('classic-standard');
showToast("Switched to Corporate ID Studio", "info");
}
renderControls();
updateCards();
}
// --- ORIENTATION CONFIGS ---
function setOrientation(orientation) {
currentOrientation = orientation;
const btnLandscape = document.getElementById('opt-landscape');
const btnPortrait = document.getElementById('opt-portrait');
const renderPortal = document.getElementById('id-card-render-portal');
if (orientation === 'landscape') {
btnLandscape.className = "flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-bold border-2 transition-all border-indigo-600 text-indigo-600 bg-indigo-50/50";
btnPortrait.className = "flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-bold border-2 transition-all border-slate-200 text-slate-600 hover:bg-slate-50";
renderPortal.className = renderPortal.className.replace(/card-\w+/g, 'card-landscape');
} else {
btnPortrait.className = "flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-bold border-2 transition-all border-indigo-600 text-indigo-600 bg-indigo-50/50";
btnLandscape.className = "flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-bold border-2 transition-all border-slate-200 text-slate-600 hover:bg-slate-50";
renderPortal.className = renderPortal.className.replace(/card-\w+/g, 'card-portrait');
}
updateCards();
showToast("Orientation swapped to " + orientation, "success");
}
// Zoom scale controller
function changeCardScale() {
const val = document.getElementById('input-scale').value;
document.getElementById('scale-val').innerText = `${val}%`;
document.getElementById('id-card-render-portal').style.transform = `scale(${val / 100})`;
}
// Swap backgrounds
function changeBackgroundPreset(presetClass) {
selectedBgPreset = presetClass;
updateCards();
}
// Swap structural layout templates
function changeTemplatePreset(templateId) {
currentTemplateId = templateId;
updateCards();
}
// --- REAL-TIME INPUT TO CANVASES SYNCHRONIZER ---
function updateCards() {
const cardFrontContainer = document.getElementById('id-card-render-portal');
const activeTemplate = layoutTemplates[currentTemplateId] || layoutTemplates['classic-standard'];
// Clean previous background classes
cardFrontContainer.className = cardFrontContainer.className.replace(/bg-(student|corp)-\S+/g, '');
cardFrontContainer.classList.add(selectedBgPreset);
// Fetch high contrast check for text / border mapping
const isStudent = (currentStudioMode === 'student');
const isPortrait = (currentOrientation === 'portrait');
// Pick border colors dynamically modeled after user image guidelines
let photoBorderColor = "#f56b2a"; // default Sunrise Public orange border
if (selectedBgPreset === 'bg-student-forest') photoBorderColor = "#10b981";
if (selectedBgPreset === 'bg-student-royal') photoBorderColor = "#a855f7";
if (selectedBgPreset === 'bg-student-ocean') photoBorderColor = "#005b96";
if (selectedBgPreset === 'bg-student-crimson') photoBorderColor = "#be123c";
if (selectedBgPreset === 'bg-student-slate') photoBorderColor = "#38bdf8";
if (selectedBgPreset === 'bg-student-sunshine') photoBorderColor = "#eab308";
if (selectedBgPreset === 'bg-student-teal') photoBorderColor = "#0d9488";
if (selectedBgPreset === 'bg-student-rose') photoBorderColor = "#db2777";
if (selectedBgPreset === 'bg-student-charcoal') photoBorderColor = "#d97706";
if (selectedBgPreset === 'bg-corp-techvision') photoBorderColor = "#1d5bdf"; // default Techvision blue border
if (selectedBgPreset === 'bg-corp-obsidian') photoBorderColor = "#d97706";
if (selectedBgPreset === 'bg-corp-emerald') photoBorderColor = "#10b981";
if (selectedBgPreset === 'bg-corp-cyber') photoBorderColor = "#06b6d4";
if (selectedBgPreset === 'bg-corp-carbon') photoBorderColor = "#9ca3af";
if (selectedBgPreset === 'bg-corp-crimson') photoBorderColor = "#be123c";
if (selectedBgPreset === 'bg-corp-purple') photoBorderColor = "#a855f7";
if (selectedBgPreset === 'bg-corp-ocean') photoBorderColor = "#005b96";
if (selectedBgPreset === 'bg-corp-slate') photoBorderColor = "#64748b";
if (selectedBgPreset === 'bg-corp-sunset') photoBorderColor = "#ea580c";
// Fetch central theme styles
const activeTheme = themeStyles[selectedBgPreset] || themeStyles['bg-student-sunrise'];
if (isStudent) {
const inSchool = document.getElementById('inSchool').value || "Sunrise Public School";
const inSchoolContact = document.getElementById('inSchoolContact').value || "LEARN || GROW || SUCCEED";
const inSchoolAddr = document.getElementById('inSchoolAddr').value || "123, Green Park, New Delhi - 110016";
const inSchoolWeb = document.getElementById('inSchoolWeb').value || "www.sunrisepublicschool.com";
const inName = document.getElementById('inName').value || "Rohit Sharma";
const inRoll = document.getElementById('inRoll').value || "25";
const inClass = document.getElementById('inClass').value || "8th 'A'";
const inFather = document.getElementById('inFather').value || "Mr. Ramesh Sharma";
const inMother = document.getElementById('inMother').value || "Mrs. Sunita Sharma";
const inDob = document.getElementById('inDob').value || "12/05/2012";
const inContact = document.getElementById('inContact').value || "98765-43210";
const inAddr = document.getElementById('inAddr').value || "123, Green Park, New Delhi - 110016";
// Check stored uploads first
const finalLogo = userUploads.cardLogoStudent || "https://placehold.co/100x100/ea580c/ffffff?text=Logo";
const finalPhoto = userUploads.stuPhoto || "https://placehold.co/300x360/e2e8f0/1e293b?text=Student";
// Signature simulation handler with high contrast theme colors
const finalSignDataUrl = userUploads.sigImgStudent;
const fontName = "'Herr Von Muellerhoff', cursive";
const textSig = "Principal";
const finalSignHTML = finalSignDataUrl
? `
`
: `
${textSig}`;
const qrEndpoint = `https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=Student:${encodeURIComponent(inName)}-Roll:${encodeURIComponent(inRoll)}`;
cardFrontContainer.innerHTML = activeTemplate.render({
org: inSchool,
subLabel: inSchoolContact,
personalAddr: inAddr,
schoolAddr: inSchoolAddr,
webLink: inSchoolWeb,
name: inName,
roleType: "STUDENT ID CARD",
field1: inRoll,
field2: inClass,
field3: inFather,
field4: inContact,
fieldFather: inFather,
fieldMother: inMother,
fieldDob: inDob,
logo: finalLogo,
photo: finalPhoto,
signHTML: finalSignHTML,
qr: qrEndpoint,
borderColor: photoBorderColor,
isStudent: true,
isPortrait: isPortrait,
// Contrast parameters
textColor: activeTheme.text,
titleColor: activeTheme.title,
accentColor: activeTheme.accent,
isDark: activeTheme.isDark
});
} else {
const inCompany = document.getElementById('inCompany').value || "Techvision Solutions";
const inCompanyTagline = document.getElementById('inCompanyTagline').value || "INNOVATE | INTEGRATE | SUCCEED";
const inCompanyAddr = document.getElementById('inCompanyAddr').value || "A-45, Tech Park, Bangalore - 560103";
const inCompanyWeb = document.getElementById('inCompanyWeb').value || "www.techvisionsolutions.com";
const inEmpName = document.getElementById('inEmpName').value || "Vikas Kumar";
const inDesignation = document.getElementById('inDesignation').value || "Software Developer";
const inEmpID = document.getElementById('inEmpID').value || "TVS12345";
const inDept = document.getElementById('inDept').value || "IT Department";
const inBlood = document.getElementById('inBlood').value || "B+ve";
const inDOJ = document.getElementById('inDOJ').value || "01-Jan-2024";
const inEmail = document.getElementById('inEmail').value || "vikas.kumar@techvision.com";
const inEmpContact = document.getElementById('inEmpContact').value || "9876543210";
const inEmpEmergency = document.getElementById('inEmpEmergency').value || "+91 9991119992";
const inEmpAddr = document.getElementById('inEmpAddr').value || "A-45, Tech Park, Bangalore - 560103";
// Check stored uploads first
const finalLogo = userUploads.cardLogoCorp || "https://placehold.co/100x100/1e3a8a/ffffff?text=Logo";
const finalPhoto = userUploads.empPhoto || "https://placehold.co/300x360/e2e8f0/1e293b?text=Employee";
// Signature simulation handler with high contrast theme colors
const finalSignDataUrl = userUploads.sigImgCorp;
const fontName = "'Monsieur La Doulaise', cursive";
const textSig = "Authorized";
const finalSignHTML = finalSignDataUrl
? `
`
: `
${textSig}`;
const qrEndpoint = `https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=Emp:${encodeURIComponent(inEmpName)}-ID:${encodeURIComponent(inEmpID)}`;
cardFrontContainer.innerHTML = activeTemplate.render({
org: inCompany,
subLabel: inCompanyTagline,
address: inEmpAddr,
personalAddr: inEmpAddr,
officeAddr: inCompanyAddr,
webLink: inCompanyWeb,
name: inEmpName,
roleType: inDesignation,
field1: inEmpID,
field2: inDept,
field3: inBlood,
field4: inEmpContact,
fieldEmail: inEmail,
fieldDoj: inDOJ,
fieldEmergency: inEmpEmergency,
logo: finalLogo,
photo: finalPhoto,
signHTML: finalSignHTML,
qr: qrEndpoint,
borderColor: photoBorderColor,
isStudent: false,
isPortrait: isPortrait,
// Contrast parameters
textColor: activeTheme.text,
titleColor: activeTheme.title,
accentColor: activeTheme.accent,
isDark: activeTheme.isDark
});
}
// Reapply styling alignments
adjustLayoutSpecificColors();
}
// Theme alignments
function adjustLayoutSpecificColors() {
// Apply text colors based on selected background theme variables
const renderPortal = document.getElementById('id-card-render-portal');
const isDarkBackground = ['bg-corp-obsidian', 'bg-corp-cyber', 'bg-corp-carbon', 'bg-corp-purple', 'bg-student-charcoal', 'bg-student-slate'].includes(selectedBgPreset);
const cardName = document.getElementById('card-name');
const cardCompany = document.getElementById('card-company');
const cardTagline = document.getElementById('card-tagline');
if (isDarkBackground) {
renderPortal.style.color = '#f1f5f9';
if (cardName) cardName.style.color = '#ffffff';
if (cardCompany) cardCompany.style.color = '#ffffff';
if (cardTagline) cardTagline.style.color = '#94a3b8';
} else {
renderPortal.style.color = '#1e293b';
if (cardName) cardName.style.color = '#0f172a';
if (cardCompany) cardCompany.style.color = '#1e293b';
if (cardTagline) cardTagline.style.color = '#475569';
}
}
// --- SECURE UPLOADED IMAGE LOADER ---
function processImageUpload(event, targetElementId) {
const file = event.target.files[0];
if (!file) return;
if (file.size > 5 * 1024 * 1024) {
showToast("Image file exceeds 5MB size limit", "error");
return;
}
const reader = new FileReader();
reader.onload = function(e) {
// Save loaded file globally so switching layouts/templates preserves images
userUploads[targetElementId] = e.target.result;
updateCards();
showToast("Custom Image loaded successfully!", "success");
};
reader.readAsDataURL(file);
}
// --- LOAD SAMPLE DATA PRESETS ---
function loadSamplePresets() {
if (currentStudioMode === 'student') {
document.getElementById('inSchool').value = "Sunrise Public School";
document.getElementById('inSchoolContact').value = "LEARN || GROW || SUCCEED";
document.getElementById('inSchoolAddr').value = "123, Green Park, New Delhi - 110016";
document.getElementById('inSchoolWeb').value = "www.sunrisepublicschool.com";
document.getElementById('inName').value = "Rohit Sharma";
document.getElementById('inRoll').value = "25";
document.getElementById('inClass').value = "8th 'A'";
document.getElementById('inFather').value = "Mr. Ramesh Sharma";
document.getElementById('inMother').value = "Mrs. Sunita Sharma";
document.getElementById('inDob').value = "12/05/2012";
document.getElementById('inContact').value = "98765-43210";
document.getElementById('inAddr').value = "123, Green Park, New Delhi - 110016";
showToast("Sunrise Public School sample parameters loaded!", "success");
} else {
document.getElementById('inCompany').value = "Techvision Solutions";
document.getElementById('inCompanyTagline').value = "INNOVATE | INTEGRATE | SUCCEED";
document.getElementById('inCompanyAddr').value = "A-45, Tech Park, Bangalore - 560103";
document.getElementById('inCompanyWeb').value = "www.techvisionsolutions.com";
document.getElementById('inEmpName').value = "Vikas Kumar";
document.getElementById('inDesignation').value = "Software Developer";
document.getElementById('inEmpID').value = "TVS12345";
document.getElementById('inDept').value = "IT Department";
document.getElementById('inBlood').value = "B+ve";
document.getElementById('inDOJ').value = "01-Jan-2024";
document.getElementById('inEmail').value = "vikas.kumar@techvision.com";
document.getElementById('inEmpContact').value = "9876543210";
document.getElementById('inEmpEmergency').value = "+91 9991119992";
document.getElementById('inEmpAddr').value = "A-45, Tech Park, Bangalore - 560103";
showToast("Techvision Solutions sample parameters loaded!", "success");
}
updateCards();
}
// --- CLEAR FORM FIELDS ---
function resetForms() {
// Revert Upload cache
userUploads = {
cardLogoStudent: '',
stuPhoto: '',
sigImgStudent: '',
cardLogoCorp: '',
empPhoto: '',
sigImgCorp: ''
};
if (currentStudioMode === 'student') {
const fields = ['inSchool', 'inSchoolContact', 'inSchoolAddr', 'inSchoolWeb', 'inName', 'inRoll', 'inClass', 'inFather', 'inMother', 'inDob', 'inContact', 'inAddr'];
fields.forEach(id => document.getElementById(id).value = '');
showToast("Student form and cache has been reset", "info");
} else {
const fields = ['inCompany', 'inCompanyTagline', 'inCompanyAddr', 'inCompanyWeb', 'inEmpName', 'inDesignation', 'inEmpID', 'inDept', 'inBlood', 'inDOJ', 'inEmail', 'inEmpContact', 'inEmpEmergency', 'inEmpAddr'];
fields.forEach(id => document.getElementById(id).value = '');
showToast("Corporate form and cache has been reset", "info");
}
updateCards();
}
// --- PNG EXPORT VIA HTML2CANVAS ---
async function downloadPNG() {
const cardNode = document.getElementById('id-card-render-portal');
const cardName = (currentStudioMode === 'student')
? (document.getElementById('inName').value || 'Student')
: (document.getElementById('inEmpName').value || 'Employee');
// Temporarily standardizing style variables during canvas capture
const originalTransform = cardNode.style.transform;
cardNode.style.transform = 'scale(1)'; // Capture at native scale ratio
showToast("Generating high-res PNG file. Please wait...", "info");
try {
const renderOptions = {
scale: 3, // High-fidelity print scale
useCORS: true,
allowTaint: true,
backgroundColor: null,
scrollX: 0,
scrollY: 0
};
const canvas = await html2canvas(cardNode, renderOptions);
const dataURL = canvas.toDataURL('image/png');
const downloadLink = document.createElement('a');
downloadLink.download = `IDCard_${cardName.replace(/\s+/g, '_')}.png`;
downloadLink.href = dataURL;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
showToast("Card downloaded successfully!", "success");
} catch (err) {
console.error("Rendering failed:", err);
showToast("Could not export image. Please try again.", "error");
} finally {
// Restore preview scaling
cardNode.style.transform = originalTransform;
}
}
// --- BUILT-IN TOAST NOTIFICATIONS ---
function showToast(message, type = 'success') {
const container = document.getElementById('toast-container');
const toast = document.createElement('div');
let bgClass = "bg-slate-950 border-emerald-500/30 text-white";
let iconClass = "fa-solid fa-circle-check text-emerald-400";
if (type === 'error') {
bgClass = "bg-rose-950 border-rose-500/30 text-rose-100";
iconClass = "fa-solid fa-circle-exclamation text-rose-400";
} else if (type === 'info') {
bgClass = "bg-slate-900 border-indigo-500/30 text-indigo-100";
iconClass = "fa-solid fa-circle-info text-indigo-400";
}
toast.className = `flex items-center gap-3 px-5 py-3.5 rounded-2xl border ${bgClass} shadow-2xl transition-all duration-300 transform translate-y-2 opacity-0 text-xs sm:text-sm font-medium max-w-sm`;
toast.innerHTML = `
${message}`;
container.appendChild(toast);
setTimeout(() => {
toast.classList.remove('translate-y-2', 'opacity-0');
}, 10);
setTimeout(() => {
toast.classList.add('opacity-0', 'translate-y-2');
setTimeout(() => {
toast.remove();
}, 300);
}, 4000);
}
