windpacer/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement Contact Form with Python FastAPI backend and mailcow SMTP integration

Browse Source
This commit is contained in:
Wind
2026-02-15 06:16:52 +09:00
parent 7e5f452449
commit 998d733eb5
6 changed files with 241 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
html/assets/js/script.js
View File

@@ -46,3 +46,78 @@ mobileNavLinks.forEach(link => {
mobileMenu.classList.add('translate-x-full');
});
});
// Contact form handler
const contactSubmitBtn = document.getElementById('contact-submit');
const contactForm = {
name: document.getElementById('contact-name'),
email: document.getElementById('contact-email'),
company: document.getElementById('contact-company'),
message: document.getElementById('contact-message')
};
const contactStatus = document.getElementById('contact-status');
if (contactSubmitBtn) {
contactSubmitBtn.addEventListener('click', async (e) => {
e.preventDefault();
// 폼 데이터 수집
const formData = {
name: contactForm.name.value,
email: contactForm.email.value,
company: contactForm.company.value,
message: contactForm.message.value
};
// 로딩 상태 표시
contactSubmitBtn.disabled = true;
contactSubmitBtn.textContent = 'Sending...';
contactStatus.classList.add('hidden');
try {
// Python FastAPI 엔드포인트로 요청
const response = await fetch('http://localhost:8001/api/contact', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData),
mode: 'cors',
credentials: 'omit'
});
const result = await response.json();
// 응답 처리
contactStatus.classList.remove('hidden');
if (response.ok && result.success !== false) {
// 성공 메시지
contactStatus.classList.remove('bg-red-900/50', 'text-red-200');
contactStatus.classList.add('bg-green-900/50', 'text-green-200');
contactStatus.textContent = result.message;
// 폼 초기화
contactForm.name.value = '';
contactForm.email.value = '';
contactForm.company.value = '';
contactForm.message.value = '';
} else {
// 오류 메시지
contactStatus.classList.remove('bg-green-900/50', 'text-green-200');
contactStatus.classList.add('bg-red-900/50', 'text-red-200');
contactStatus.textContent = result.detail || result.message || 'Failed to send message';
}
} catch (error) {
// 네트워크 오류
contactStatus.classList.remove('hidden', 'bg-green-900/50', 'text-green-200');
contactStatus.classList.add('bg-red-900/50', 'text-red-200');
contactStatus.textContent = 'Error: Could not send message. Please try again later.';
console.error('Contact form error:', error);
} finally {
// 버튼 상태 복구
contactSubmitBtn.disabled = false;
contactSubmitBtn.textContent = 'Send Message';
}
});
}

11
html/index.html
View File

@@ -399,12 +399,13 @@
<div class="max-w-2xl mx-auto">
<div class="grid grid-cols-1 gap-5">
<div class="grid grid-cols-2 gap-5">
<input type="text" placeholder="Full Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
<input type="email" placeholder="Email Address" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
<input type="text" id="contact-name" placeholder="Full Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
<input type="email" id="contact-email" placeholder="Email Address" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
</div>
<input type="text" placeholder="Company Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
<textarea rows="5" placeholder="Describe your project requirements..." class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors resize-none font-light"></textarea>
<button class="bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-bold transition-all hover:-translate-y-0.5 font-industrial text-xs tracking-widest uppercase shadow-2xl">Send Message</button>
<input type="text" id="contact-company" placeholder="Company Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
<textarea rows="5" id="contact-message" placeholder="Describe your project requirements..." class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors resize-none font-light"></textarea>
<button id="contact-submit" class="bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-bold transition-all hover:-translate-y-0.5 font-industrial text-xs tracking-widest uppercase shadow-2xl">Send Message</button>
<div id="contact-status" class="hidden p-5 rounded-2xl text-center font-light"></div>
</div>
</div>
</div>

2
html/status.json
View File

@@ -1 +1 @@
{"cpu_temp": "40", "nvme_temp": "35", "uptime_days": 2, "last_update": "05:53:01"}
{"cpu_temp": "43", "nvme_temp": "35", "uptime_days": 2, "last_update": "06:16:01"}