90 lines
4.3 KiB
JavaScript
90 lines
4.3 KiB
JavaScript
// ============================================================
|
|
// ★ EmailJS 설정 - 아래 3가지 값을 본인 계정으로 교체하세요 ★
|
|
// ============================================================
|
|
const EMAILJS_PUBLIC_KEY = 'HO6i369gX6X5HEXtJ';
|
|
const EMAILJS_SERVICE_ID = 'service_4ur5lqd';
|
|
const EMAILJS_TEMPLATE_ID = 'template_jp0v5qv';
|
|
// ============================================================
|
|
|
|
emailjs.init(EMAILJS_PUBLIC_KEY);
|
|
|
|
// ── Contact Form ─────────────────────────────────────────────
|
|
document.getElementById('contact-submit').addEventListener('click', function () {
|
|
const name = document.getElementById('contact-name').value.trim();
|
|
const email = document.getElementById('contact-email').value.trim();
|
|
const company = document.getElementById('contact-company').value.trim();
|
|
const message = document.getElementById('contact-message').value.trim();
|
|
const btn = document.getElementById('contact-submit');
|
|
|
|
if (!name || !email || !message) {
|
|
showStatus('error', t('contact.error.required')); return;
|
|
}
|
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
|
showStatus('error', t('contact.error.email')); return;
|
|
}
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = t('contact.sending');
|
|
|
|
const templateParams = {
|
|
name : name,
|
|
message : 'Email : ' + email + '\nCompany : ' + (company || 'N/A') + '\n\n' + message,
|
|
reply_to : email
|
|
};
|
|
|
|
emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, templateParams)
|
|
.then(function () {
|
|
showStatus('success', t('contact.success'));
|
|
document.getElementById('contact-name').value = '';
|
|
document.getElementById('contact-email').value = '';
|
|
document.getElementById('contact-company').value = '';
|
|
document.getElementById('contact-message').value = '';
|
|
})
|
|
.catch(function (error) {
|
|
console.error('EmailJS error:', error);
|
|
showStatus('error', t('contact.error.fail'));
|
|
})
|
|
.finally(function () {
|
|
btn.disabled = false;
|
|
btn.textContent = t('contact.btn');
|
|
});
|
|
});
|
|
|
|
function showStatus(type, msg) {
|
|
const status = document.getElementById('contact-status');
|
|
status.classList.remove('hidden', 'bg-green-500/20', 'text-green-400', 'bg-red-500/20', 'text-red-400');
|
|
status.classList.add(type === 'success' ? 'bg-green-500/20' : 'bg-red-500/20',
|
|
type === 'success' ? 'text-green-400' : 'text-red-400');
|
|
status.textContent = msg;
|
|
}
|
|
|
|
// ── Header scroll ────────────────────────────────────────────
|
|
const mainHeader = document.getElementById('main-header');
|
|
const brandName = document.getElementById('brand-name');
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
mainHeader.classList.add('glass-effect', 'py-3');
|
|
mainHeader.classList.remove('py-6');
|
|
if (brandName) brandName.classList.replace('text-white', 'text-slate-900');
|
|
navLinks.forEach(link => link.classList.replace('text-slate-100', 'text-slate-700'));
|
|
} else {
|
|
mainHeader.classList.remove('glass-effect', 'py-3');
|
|
mainHeader.classList.add('py-6');
|
|
if (brandName) brandName.classList.replace('text-slate-900', 'text-white');
|
|
navLinks.forEach(link => link.classList.replace('text-slate-700', 'text-slate-100'));
|
|
}
|
|
});
|
|
|
|
// ── Mobile menu ───────────────────────────────────────────────
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const closeMenuBtn = document.getElementById('close-menu-btn');
|
|
|
|
if (mobileMenuBtn) mobileMenuBtn.addEventListener('click', () => mobileMenu.classList.remove('translate-x-full'));
|
|
if (closeMenuBtn) closeMenuBtn.addEventListener('click', () => mobileMenu.classList.add('translate-x-full'));
|
|
|
|
const mobileNavLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : [];
|
|
mobileNavLinks.forEach(link => link.addEventListener('click', () => mobileMenu.classList.add('translate-x-full')));
|