<!DOCTYPE html>

<head>

<title>Personal Profile Card Generator</title>

<style>

.apple-green { background-color: #52C41A; }

.color-preset {

width: 40px;

height: 40px;

border-radius: 8px;

cursor: pointer;

transition: transform 0.2s;

}

.color-preset:hover { transform: scale(1.1); }

.color-preset.selected {

border: 3px solid #000;

transform: scale(1.15);

}

#preview-card { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; }

</style>

</head>

<h1 class="text-4xl font-bold text-gray-900 mb-2">Personal Profile Card Generator</h1>

<p class="text-gray-600">Create your professional profile card in seconds</p>

</header>

<h2 class="text-2xl font-semibold mb-6 text-gray-800">Your Information</h2>

<div>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Avatar Image *</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">One-line Introduction *</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Card Color Theme</label>

</div>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Skills (Max 5)</label>

<button type="button" id="add-skill-btn" class="w-full py-2 px-4 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">+ Add Skill</button>

</div>

<h3 class="font-semibold text-gray-800 mb-3">Contact Details</h3>

</div>

<div>

<option value="1080x1080">1080 × 1080 px (Square)</option>

</select>

</div>

Generate Card

</button>

</form>

<p class="text-green-800 font-medium mb-3">✓ Your card is ready!</p>

Download Card

</button>

</div>

<h2 class="text-2xl font-semibold mb-6 text-gray-800">Live Preview</h2>

</div>

<p id="preview-intro" class="text-lg opacity-95">Your introduction appears here</p>

</div>

<h4 class="text-sm font-semibold text-gray-600 mb-3 uppercase tracking-wide">Skills</h4>

</div>

<h4 class="text-sm font-semibold text-gray-600 mb-3 uppercase tracking-wide">Contact</h4>

</div>

</div>

</div>

</div>

</div>

<p>Powered by <a href="https://Card-j0s.pages.dev" target="_blank" class="text-green-600 hover:underline">Card-j0s</a></p>

</footer>

</div>

let skillCount = 0;

let currentColor = '#52C41A';

let avatarDataUrl = null;

// Initialize

document.addEventListener('DOMContentLoaded', function() {

addSkill(); // Start with one skill field

setupEventListeners();

});

function setupEventListeners() {

// Form inputs

document.getElementById('name').addEventListener('input', updatePreview);

document.getElementById('intro').addEventListener('input', updatePreview);

document.getElementById('avatar').addEventListener('change', handleAvatarUpload);

document.getElementById('email').addEventListener('input', updatePreview);

document.getElementById('phone').addEventListener('input', updatePreview);

document.getElementById('wechat').addEventListener('input', updatePreview);

document.getElementById('linkedin').addEventListener('input', updatePreview);

document.getElementById('twitter').addEventListener('input', updatePreview);

// Color controls

document.getElementById('color-picker').addEventListener('input', function(e) {

updateColor(e.target.value);

});

document.getElementById('color-hex').addEventListener('input', function(e) {

if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) {

updateColor(e.target.value);

}

});

document.querySelectorAll('.color-preset').forEach(preset => {

preset.addEventListener('click', function() {

document.querySelectorAll('.color-preset').forEach(p => p.classList.remove('selected'));

this.classList.add('selected');

updateColor(this.dataset.color);

});

// Add skill button

document.getElementById('add-skill-btn').addEventListener('click', addSkill);

// Form submit

document.getElementById('profile-form').addEventListener('submit', handleSubmit);

// Download button

document.getElementById('download-btn').addEventListener('click', downloadCard);

}

function addSkill() {

if (skillCount >= 5) return;

skillCount++;

const container = document.getElementById('skills-container');

const skillDiv = document.createElement('div');

skillDiv.className = 'flex gap-2';

skillDiv.innerHTML = `

const input = skillDiv.querySelector('.skill-input');

const removeBtn = skillDiv.querySelector('.remove-skill');

input.addEventListener('input', updatePreview);

removeBtn.addEventListener('click', function() {

skillDiv.remove();

skillCount--;

updateAddSkillButton();

updatePreview();

});

container.appendChild(skillDiv);

updateAddSkillButton();

}

function updateAddSkillButton() {

const btn = document.getElementById('add-skill-btn');

if (skillCount >= 5) {

btn.disabled = true;

btn.classList.add('opacity-50', 'cursor-not-allowed');

} else {

btn.disabled = false;

btn.classList.remove('opacity-50', 'cursor-not-allowed');

}

function updateColor(color) {

currentColor = color;

document.getElementById('color-picker').value = color;

document.getElementById('color-hex').value = color;

document.getElementById('card-header').style.backgroundColor = color;

}

function handleAvatarUpload(e) {

const file = e.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = function(event) {

avatarDataUrl = event.target.result;

const img = document.getElementById('preview-avatar');

const placeholder = document.getElementById('avatar-placeholder');

img.src = avatarDataUrl;

img.classList.remove('hidden');

placeholder.classList.add('hidden');

};

reader.readAsDataURL(file);

}

function updatePreview() {

// Name

const name = document.getElementById('name').value || 'Your Name';

document.getElementById('preview-name').textContent = name;

// Intro

const intro = document.getElementById('intro').value || 'Your introduction appears here';

document.getElementById('preview-intro').textContent = intro;

// Skills

const skillInputs = document.querySelectorAll('.skill-input');

const skills = Array.from(skillInputs)

.map(input => input.value.trim())

.filter(skill => skill !== '');

const skillsSection = document.getElementById('preview-skills');

const skillsList = document.getElementById('skills-list');

if (skills.length > 0) {

skillsSection.classList.remove('hidden');

skillsList.innerHTML = skills.map(skill =>

`<span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm">${skill}</span>`

).join('');

} else {

skillsSection.classList.add('hidden');

}

// Contact details

const contactSection = document.getElementById('preview-contact');

let hasContact = false;

const email = document.getElementById('email').value;

const emailDiv = document.getElementById('contact-email');

if (email) {

emailDiv.classList.remove('hidden');

emailDiv.querySelector('span:last-child').textContent = email;

hasContact = true;

} else {

emailDiv.classList.add('hidden');

}

const phone = document.getElementById('phone').value;

const phoneDiv = document.getElementById('contact-phone');

if (phone) {

phoneDiv.classList.remove('hidden');

phoneDiv.querySelector('span:last-child').textContent = phone;

hasContact = true;

} else {

phoneDiv.classList.add('hidden');

}

const wechat = document.getElementById('wechat').value;

const wechatDiv = document.getElementById('contact-wechat');

if (wechat) {

wechatDiv.classList.remove('hidden');

wechatDiv.querySelector('span:last-child').textContent = wechat;

hasContact = true;

} else {

wechatDiv.classList.add('hidden');

}

const linkedin = document.getElementById('linkedin').value;

const linkedinDiv = document.getElementById('contact-linkedin');

if (linkedin) {

linkedinDiv.classList.remove('hidden');

linkedinDiv.querySelector('span:last-child').textContent = linkedin;

hasContact = true;

} else {

linkedinDiv.classList.add('hidden');

}

const twitter = document.getElementById('twitter').value;

const twitterDiv = document.getElementById('contact-twitter');

if (twitter) {

twitterDiv.classList.remove('hidden');

twitterDiv.querySelector('span:last-child').textContent = twitter;

hasContact = true;

} else {

twitterDiv.classList.add('hidden');

}

if (hasContact) {

contactSection.classList.remove('hidden');

} else {

contactSection.classList.add('hidden');

}

function handleSubmit(e) {

e.preventDefault();

document.getElementById('download-section').classList.remove('hidden');

document.getElementById('download-section').scrollIntoView({ behavior: 'smooth', block: 'nearest' });

}

async function downloadCard() {

const card = document.getElementById('preview-card');

const size = document.getElementById('card-size').value;

const [width, height] = size.split('x').map(Number);

// Calculate scale factor

const currentWidth = card.offsetWidth;

const scale = width / currentWidth;

try {

const canvas = await html2canvas(card, {

scale: scale,

backgroundColor: '#ffffff',

logging: false,

useCORS: true

});

const link = document.createElement('a');

link.download = `profile-card-${Date.now()}.png`;

link.href = canvas.toDataURL('image/png');

link.click();

} catch (error) {

console.error('Error generating image:', error);

alert('Failed to generate card. Please try again.');

}

</script>

</body>

</html>