حمایت: تفاوت میان نسخهها
ظاهر
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
(۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
خط ۱: | خط ۱: | ||
<html lang="fa" dir="rtl"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<title>حمایت از دانشنامه کتاب مقدس</title> | |||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |||
<style> | |||
* { | |||
box-sizing: border-box; | |||
margin: 0; | |||
padding: 0; | |||
font-family: 'Tahoma', 'Arial', sans-serif; | |||
} | |||
body { | |||
background: #f5f7fa; | |||
padding: 20px; | |||
line-height: 1.6; | |||
color: #333; | |||
} | |||
.container { | |||
max-width: 800px; | |||
margin: 0 auto; | |||
background: white; | |||
border-radius: 15px; | |||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); | |||
overflow: hidden; | |||
} | |||
.header { | |||
background: linear-gradient(135deg, #6a89cc 0%, #4a69bd 100%); | |||
color: white; | |||
padding: 30px; | |||
text-align: center; | |||
} | |||
.header h1 { | |||
font-size: 28px; | |||
margin-bottom: 20px; | |||
color: white; | |||
} | |||
.header-content { | |||
background: rgba(255, 255, 255, 0.15); | |||
padding: 20px; | |||
border-radius: 10px; | |||
margin-top: 15px; | |||
text-align: right; | |||
line-height: 1.8; | |||
} | |||
.header-content p { | |||
margin-bottom: 15px; | |||
font-size: 16px; | |||
} | |||
.benefits { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
margin: 20px 0; | |||
} | |||
.benefit { | |||
background: rgba(255, 255, 255, 0.2); | |||
border-radius: 8px; | |||
padding: 12px 15px; | |||
margin: 8px; | |||
font-size: 14px; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.benefit i { | |||
margin-left: 8px; | |||
} | |||
.tabs { | |||
display: flex; | |||
background: #f8f9fa; | |||
border-bottom: 1px solid #ddd; | |||
} | |||
.tab { | |||
padding: 15px 20px; | |||
cursor: pointer; | |||
font-weight: bold; | |||
flex: 1; | |||
text-align: center; | |||
transition: all 0.3s; | |||
} | |||
.tab.active { | |||
background: white; | |||
border-bottom: 3px solid #4a69bd; | |||
color: #4a69bd; | |||
} | |||
.tab-content { | |||
display: none; | |||
padding: 25px; | |||
} | |||
.tab-content.active { | |||
display: block; | |||
} | |||
.form-group { | |||
margin-bottom: 20px; | |||
} | |||
.form-group label { | |||
display: block; | |||
margin-bottom: 8px; | |||
color: #444; | |||
font-weight: bold; | |||
} | |||
.form-group input, | |||
.form-group textarea, | |||
.form-group select { | |||
width: 100%; | |||
padding: 12px 15px; | |||
border: 2px solid #ddd; | |||
border-radius: 8px; | |||
font-size: 16px; | |||
transition: border-color 0.3s; | |||
} | |||
.form-group input:focus, | |||
.form-group textarea:focus, | |||
.form-group select:focus { | |||
border-color: #6a89cc; | |||
outline: none; | |||
} | |||
.required::after { | |||
content: " *"; | |||
color: #e74c3c; | |||
} | |||
.currency-container { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.currency-container select { | |||
width: 30%; | |||
margin-left: 10px; | |||
} | |||
.currency-container input { | |||
width: 70%; | |||
} | |||
.captcha-container { | |||
display: flex; | |||
align-items: center; | |||
background: #f8f9fa; | |||
padding: 15px; | |||
border-radius: 8px; | |||
margin: 20px 0; | |||
border: 1px solid #ddd; | |||
} | |||
.captcha-container input { | |||
margin-left: 10px; | |||
transform: scale(1.5); | |||
} | |||
.captcha-container label { | |||
color: #555; | |||
font-weight: normal; | |||
cursor: pointer; | |||
} | |||
.note { | |||
background-color: #f8f9fa; | |||
border-right: 4px solid #6a89cc; | |||
padding: 12px 15px; | |||
margin: 20px 0; | |||
border-radius: 5px; | |||
font-size: 14px; | |||
color: #555; | |||
} | |||
.btn { | |||
width: 100%; | |||
padding: 15px; | |||
background: linear-gradient(135deg, #6a89cc 0%, #4a69bd 100%); | |||
color: white; | |||
border: none; | |||
border-radius: 8px; | |||
font-size: 18px; | |||
font-weight: bold; | |||
cursor: pointer; | |||
transition: all 0.3s ease; | |||
} | |||
.btn:disabled { | |||
background: #ccc; | |||
cursor: not-allowed; | |||
transform: none; | |||
box-shadow: none; | |||
} | |||
.btn:hover:not(:disabled) { | |||
transform: translateY(-2px); | |||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |||
} | |||
.contact-info { | |||
background: #f8f9fa; | |||
padding: 20px; | |||
text-align: center; | |||
border-top: 1px solid #eee; | |||
} | |||
.contact-info h3 { | |||
color: #444; | |||
margin-bottom: 15px; | |||
} | |||
.email-link { | |||
display: inline-block; | |||
background: #6a89cc; | |||
color: white; | |||
padding: 10px 20px; | |||
border-radius: 50px; | |||
text-decoration: none; | |||
font-weight: bold; | |||
margin: 10px 0; | |||
transition: all 0.3s; | |||
} | |||
.email-link:hover { | |||
background: #4a69bd; | |||
transform: translateY(-2px); | |||
} | |||
.footer { | |||
text-align: center; | |||
padding: 15px; | |||
color: #666; | |||
font-size: 14px; | |||
background: #f1f2f6; | |||
} | |||
.alert { | |||
padding: 15px; | |||
margin: 20px 0; | |||
border-radius: 8px; | |||
text-align: center; | |||
} | |||
.alert-success { | |||
background-color: #d4edda; | |||
color: #155724; | |||
border: 1px solid #c3e6cb; | |||
} | |||
.alert-error { | |||
background-color: #f8d7da; | |||
color: #721c24; | |||
border: 1px solid #f5c6cb; | |||
} | |||
.submission { | |||
background: #f8f9fa; | |||
padding: 15px; | |||
margin: 15px 0; | |||
border-radius: 8px; | |||
border-right: 4px solid #6a89cc; | |||
} | |||
.submission h4 { | |||
color: #4a69bd; | |||
margin-bottom: 10px; | |||
} | |||
.submission p { | |||
margin: 5px 0; | |||
} | |||
.donation-options { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 10px; | |||
margin: 15px 0; | |||
} | |||
.donation-option { | |||
flex: 1; | |||
min-width: 120px; | |||
background: #f1f2f6; | |||
border: 2px solid #ddd; | |||
border-radius: 8px; | |||
padding: 12px; | |||
text-align: center; | |||
cursor: pointer; | |||
transition: all 0.3s; | |||
} | |||
.donation-option:hover { | |||
background: #e6e9f0; | |||
} | |||
.donation-option.selected { | |||
background: #4a69bd; | |||
color: white; | |||
border-color: #4a69bd; | |||
} | |||
@media (max-width: 600px) { | |||
.container { | |||
margin: 10px; | |||
border-radius: 10px; | |||
} | |||
.header { | |||
padding: 20px; | |||
} | |||
.header h1 { | |||
font-size: 22px; | |||
} | |||
.tab-content { | |||
padding: 20px; | |||
} | |||
.btn { | |||
padding: 12px; | |||
font-size: 16px; | |||
} | |||
.donation-options { | |||
flex-direction: column; | |||
} | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div class="container"> | |||
<div class="header"> | |||
<h1>📖 حمایت شما در پیشبرد دانشنامه کتاب مقدس بسیار ارزشمند است</h1> | |||
<div class="header-content"> | |||
<p>'''دانشنامه کتاب مقدس''' یک خدمت غیرانتفاعی و مستقل است؛ وابسته به هیچ سازمان یا کلیسا نیست و با محوریت کتاب مقدس و هدایت خادمین به آموزش، پژوهش و آشکارسازی آموزههای مسیحیت میپردازد.</p> | |||
<p>این دانشنامه، در کنار تکمیل واژه نامه تخصصی کتاب مقدس، پروژههای آموزشی و پژوهشی متعددی را برای ایمانداران، دانشجویان و معلمان فراهم میآورد و به عنوان اولین مرجع الاهیاتی و تخصصی در دنیای مسیحیت پارسیزبان شناخته میشود.</p> | |||
<div class="benefits"> | |||
<div class="benefit"><i class="fas fa-check-circle"></i> محتوای عمیق و علمی گسترش مییابد</div> | |||
<div class="benefit"><i class="fas fa-check-circle"></i> دسترسی جهانی و ترجمهها ممکن میشود</div> | |||
<div class="benefit"><i class="fas fa-check-circle"></i> زیرساخت و ابزارهای آموزشی تقویت میگردد</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="tabs"> | |||
<div class="tab active" data-tab="form">حمایت مالی</div> | |||
<div class="tab" data-tab="status">وضعیت حمایتها</div> | |||
<div class="tab" data-tab="help">راهنما</div> | |||
</div> | |||
<div class="tab-content active" id="form-tab"> | |||
<div id="formAlert" class="alert" style="display: none;"></div> | |||
<form id="donationForm"> | |||
<div class="form-group"> | |||
<label for="userName" class="required">نام شما</label> | |||
<input type="text" id="userName" name="name" placeholder="نام خود را وارد کنید" required> | |||
</div> | |||
<div class="form-group"> | |||
<label for="userEmail" class="required">ایمیل شما</label> | |||
<input type="email" id="userEmail" name="email" placeholder="email@example.com" required> | |||
</div> | |||
<div class="form-group"> | |||
<label for="userCountry" class="required">کشور</label> | |||
<input type="text" id="userCountry" name="country" placeholder="کشور خود را وارد کنید" required> | |||
</div> | |||
<div class="form-group"> | |||
<label for="donationAmount" class="required">مبلغ حمایت</label> | |||
<div class="currency-container"> | |||
<select id="currency" name="currency"> | |||
<option value="دلار">ریال</option> | |||
<option value="لیر">دلار</option> | |||
<option value="یورو">یورو</option> | |||
<option value="پوند">پوند</option> | |||
</select> | |||
<input type="number" id="donationAmount" name="amount" placeholder="مبلغ حمایت" required> | |||
</div> | |||
</div> | |||
<div class="form-group"> | |||
<label>مقادیر پیشنهادی:</label> | |||
<div class="donation-options"> | |||
<div class="donation-option" data-value="25">25 دلار</div> | |||
<div class="donation-option" data-value="50">50 دلار</div> | |||
<div class="donation-option" data-value="100">100 دلار</div> | |||
<div class="donation-option" data-value="200">200 دلار</div> | |||
</div> | |||
</div> | |||
<div class="form-group"> | |||
<label for="monthlySupport">نوع حمایت</label> | |||
<select id="monthlySupport" name="monthly"> | |||
<option value="no">حمایت یکباره</option> | |||
<option value="yes">حمایت ماهیانه</option> | |||
</select> | |||
</div> | |||
<div class="form-group"> | |||
<label for="userMessage">راه ارتباطی با شما جهت ارتباط</label> | |||
<textarea id="userMessage" name="message" placeholder="لطفا تلگرام یا ایمیل خودرا بنویسید تا بتوانیم با شما ارتباز بگیریم ..." rows="3"></textarea> | |||
</div> | |||
<div class="captcha-container"> | |||
<input type="checkbox" id="notRobot" name="notRobot" required> | |||
<label for="notRobot">من ربات نیستم</label> | |||
</div> | |||
<div class="note"> | |||
<i class="fas fa-info-circle"></i> پس از ارسال فرم، با شما تماس خواهیم گرفت و روشهای انتقال وجه را به شما اطلاع خواهیم داد. | |||
</div> | |||
<button type="submit" class="btn" id="submitBtn"> | |||
<i class="fas fa-hand-holding-heart"></i> ارسال درخواست حمایت | |||
</button> | |||
</form> | |||
</div> | |||
<div class="tab-content" id="status-tab"> | |||
<h3>درخواستهای حمایت ارسال شده</h3> | |||
<div id="submissionsList"> | |||
<p id="noSubmissions">هیچ درخواست حمایتی ارسال نشده است.</p> | |||
</div> | |||
</div> | |||
<div class="tab-content" id="help-tab"> | |||
<h3>راهنمای حمایت مالی</h3> | |||
<div class="note"> | |||
<p><strong>روشهای انتقال وجه:</strong></p> | |||
<ol> | |||
<li>از طریق کارتهای بانکی داخلی</li> | |||
<li>از طریق پی پال (PayPal)</li> | |||
<li>از طریق وسترن یونیون (Western Union)</li> | |||
<li>از طریق رمزارزها (Bitcoin, Ethereum)</li> | |||
</ol> | |||
<p>پس از ارسال فرم، با شما تماس گرفته خواهد شد و روش مناسب به شما اطلاع داده میشود.</p> | |||
</div> | |||
<h3>تماس مستقیم</h3> | |||
<div class="contact-info"> | |||
<a href="mailto:info@pediabible.com" class="email-link"> | |||
<i class="fas fa-envelope"></i> info@pediabible.com | |||
</a> | |||
<p>در صورت وجود هرگونه مشکل، مستقیماً با ایمیل فوق تماس بگیرید.</p> | |||
</div> | |||
</div> | |||
<div class="contact-info"> | |||
<h3><i class="fas fa-headset"></i> راه های ارتباطی</h3> | |||
<a href="mailto:info@pediabible.com" class="email-link"> | |||
<i class="fas fa-envelope"></i> info@pediabible.com | |||
</a> | |||
<p>دانشنامه کتاب مقدس</p> | |||
</div> | |||
<div class="footer"> | |||
<p>کلیه حقوق محفوظ است © ۲۰۲۳</p> | |||
</div> | |||
</div> | |||
<script> | |||
// مدیریت تبها | |||
document.querySelectorAll('.tab').forEach(tab => { | |||
tab.addEventListener('click', () => { | |||
// غیرفعال کردن همه تبها | |||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); | |||
document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active')); | |||
// فعال کردن تب انتخاب شده | |||
tab.classList.add('active'); | |||
document.getElementById(tab.dataset.tab + '-tab').classList.add('active'); | |||
// اگر تب وضعیت حمایتها است، لیست را بارگذاری کن | |||
if (tab.dataset.tab === 'status') { | |||
loadSubmissions(); | |||
} | |||
}); | |||
}); | |||
// فعال کردن دکمه ارسال وقتی کاربر تیک میزند | |||
document.getElementById('notRobot').addEventListener('change', function() { | |||
document.getElementById('submitBtn').disabled = !this.checked; | |||
}); | |||
// مدیریت انتخاب مبلغ از پیش تعیین شده | |||
document.querySelectorAll('.donation-option').forEach(option => { | |||
option.addEventListener('click', function() { | |||
document.querySelectorAll('.donation-option').forEach(opt => opt.classList.remove('selected')); | |||
this.classList.add('selected'); | |||
document.getElementById('donationAmount').value = this.dataset.value; | |||
}); | |||
}); | |||
// مدیریت ارسال فرم | |||
document.getElementById('donationForm').addEventListener('submit', function(e) { | |||
e.preventDefault(); | |||
// دریافت اطلاعات از کاربر | |||
let name = document.getElementById('userName').value; | |||
let email = document.getElementById('userEmail').value; | |||
let country = document.getElementById('userCountry').value; | |||
let amount = document.getElementById('donationAmount').value; | |||
let currency = document.getElementById('currency').value; | |||
let monthly = document.getElementById('monthlySupport').value; | |||
let message = document.getElementById('userMessage').value; | |||
let notRobot = document.getElementById('notRobot').checked; | |||
// بررسی پر بودن فیلدهای ضروری | |||
if (!name || !email || !country || !amount) { | |||
showAlert('لطفاً تمام فیلدهای ضروری را پر کنید', 'error'); | |||
return; | |||
} | |||
// بررسی تیک "من ربات نیستم" | |||
if (!notRobot) { | |||
showAlert('لطفاً گزینه "من ربات نیستم" را تأیید کنید', 'error'); | |||
return; | |||
} | |||
// ذخیره درخواست در localStorage | |||
saveSubmission(name, email, country, amount, currency, monthly, message); | |||
// ارسال به Formspree | |||
const formData = new FormData(); | |||
formData.append('name', name); | |||
formData.append('email', email); | |||
formData.append('country', country); | |||
formData.append('amount', amount); | |||
formData.append('currency', currency); | |||
formData.append('monthly', monthly); | |||
formData.append('message', message); | |||
formData.append('_replyto', email); | |||
formData.append('_subject', `درخواست حمایت مالی از ${name}`); | |||
fetch('https://formspree.io/f/mgvlblka', { | |||
method: 'POST', | |||
body: formData, | |||
headers: { | |||
'Accept': 'application/json' | |||
} | |||
}) | |||
.then(response => { | |||
if (response.ok) { | |||
showAlert('درخواست حمایت شما با موفقیت ارسال شد. به زودی با شما تماس خواهیم گرفت.', 'success'); | |||
document.getElementById('donationForm').reset(); | |||
document.getElementById('submitBtn').disabled = true; | |||
document.querySelectorAll('.donation-option').forEach(opt => opt.classList.remove('selected')); | |||
} else { | |||
showAlert('درخواست شما در سایت ذخیره شد اما در ارسال ایمیل مشکل ایجاد شد. لطفاً بعداً مجدداً تلاش کنید.', 'error'); | |||
} | |||
}) | |||
.catch(error => { | |||
showAlert('درخواست شما در سایت ذخیره شد اما در ارسال ایمیل مشکل ایجاد شد. لطفاً بعداً مجدداً تلاش کنید.', 'error'); | |||
}); | |||
}); | |||
// تابع نمایش پیام | |||
function showAlert(message, type) { | |||
const alertBox = document.getElementById('formAlert'); | |||
alertBox.textContent = message; | |||
alertBox.className = 'alert'; | |||
alertBox.classList.add(type === 'success' ? 'alert-success' : 'alert-error'); | |||
alertBox.style.display = 'block'; | |||
// مخفی کردن پیام پس از 5 ثانیه | |||
setTimeout(() => { | |||
alertBox.style.display = 'none'; | |||
}, 10000); | |||
} | |||
// توابع مدیریت ذخیره درخواستها | |||
function saveSubmission(name, email, country, amount, currency, monthly, message) { | |||
const submissions = JSON.parse(localStorage.getItem('donationSubmissions') || '[]'); | |||
const newSubmission = { | |||
id: Date.now(), | |||
name, | |||
email, | |||
country, | |||
amount, | |||
currency, | |||
monthly, | |||
message, | |||
date: new Date().toLocaleString('fa-IR') | |||
}; | |||
submissions.unshift(newSubmission); | |||
localStorage.setItem('donationSubmissions', JSON.stringify(submissions)); | |||
} | |||
function loadSubmissions() { | |||
const submissions = JSON.parse(localStorage.getItem('donationSubmissions') || '[]'); | |||
const submissionsList = document.getElementById('submissionsList'); | |||
const noSubmissions = document.getElementById('noSubmissions'); | |||
if (submissions.length === 0) { | |||
noSubmissions.style.display = 'block'; | |||
submissionsList.innerHTML = '<p id="noSubmissions">هیچ درخواست حمایتی ارسال نشده است.</p>'; | |||
return; | |||
} | |||
noSubmissions.style.display = 'none'; | |||
submissionsList.innerHTML = ''; | |||
submissions.forEach(sub => { | |||
const submissionEl = document.createElement('div'); | |||
submissionEl.className = 'submission'; | |||
submissionEl.innerHTML = ` | |||
<h4>${sub.name} - ${sub.amount} ${sub.currency}</h4> | |||
<p><strong>تاریخ:</strong> ${sub.date}</p> | |||
<p><strong>ایمیل:</strong> ${sub.email}</p> | |||
<p><strong>کشور:</strong> ${sub.country}</p> | |||
<p><strong>نوع حمایت:</strong> ${sub.monthly === 'yes' ? 'ماهیانه' : 'یکباره'}</p> | |||
${sub.message ? `<p><strong>پیام:</strong> ${sub.message}</p>` : ''} | |||
`; | |||
submissionsList.appendChild(submissionEl); | |||
}); | |||
} | |||
</script> | |||
</body> | |||
</html> |
نسخهٔ کنونی تا ۱۵ سپتامبر ۲۰۲۵، ساعت ۲۱:۴۹
📖 حمایت شما در پیشبرد دانشنامه کتاب مقدس بسیار ارزشمند است
'''دانشنامه کتاب مقدس''' یک خدمت غیرانتفاعی و مستقل است؛ وابسته به هیچ سازمان یا کلیسا نیست و با محوریت کتاب مقدس و هدایت خادمین به آموزش، پژوهش و آشکارسازی آموزههای مسیحیت میپردازد.
این دانشنامه، در کنار تکمیل واژه نامه تخصصی کتاب مقدس، پروژههای آموزشی و پژوهشی متعددی را برای ایمانداران، دانشجویان و معلمان فراهم میآورد و به عنوان اولین مرجع الاهیاتی و تخصصی در دنیای مسیحیت پارسیزبان شناخته میشود.
محتوای عمیق و علمی گسترش مییابد
دسترسی جهانی و ترجمهها ممکن میشود
زیرساخت و ابزارهای آموزشی تقویت میگردد
حمایت مالی
وضعیت حمایتها
راهنما
درخواستهای حمایت ارسال شده
هیچ درخواست حمایتی ارسال نشده است.
راهنمای حمایت مالی
روشهای انتقال وجه:
- از طریق کارتهای بانکی داخلی
- از طریق پی پال (PayPal)
- از طریق وسترن یونیون (Western Union)
- از طریق رمزارزها (Bitcoin, Ethereum)
پس از ارسال فرم، با شما تماس گرفته خواهد شد و روش مناسب به شما اطلاع داده میشود.
تماس مستقیم
info@pediabible.com
در صورت وجود هرگونه مشکل، مستقیماً با ایمیل فوق تماس بگیرید.