|
|
<!DOCTYPE html> |
|
|
<html lang="fa" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>هم وام | خدمات وام مسکن</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Vazirmatn', sans-serif; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); |
|
|
} |
|
|
|
|
|
.loan-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.loan-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
border-radius: 4px; |
|
|
background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%); |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
|
|
|
.input-field { |
|
|
transition: all 0.3s ease; |
|
|
border: 1px solid #d1d5db; |
|
|
} |
|
|
|
|
|
.input-field:focus { |
|
|
border-color: #7c3aed; |
|
|
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); |
|
|
} |
|
|
|
|
|
.range-slider { |
|
|
-webkit-appearance: none; |
|
|
width: 100%; |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
background: #e5e7eb; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.range-slider::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: #7c3aed; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.range-slider::-webkit-slider-thumb:hover { |
|
|
transform: scale(1.2); |
|
|
background: #4f46e5; |
|
|
} |
|
|
|
|
|
.toggle-checkbox:checked { |
|
|
right: 0; |
|
|
border-color: #7c3aed; |
|
|
} |
|
|
|
|
|
.toggle-checkbox:checked + .toggle-label { |
|
|
background-color: #7c3aed; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
|
|
|
.animate-pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-home text-3xl"></i> |
|
|
<h1 class="text-2xl font-bold">هم وام</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="hover:text-gray-200 transition">صفحه اصلی</a> |
|
|
<a href="#" class="hover:text-gray-200 transition">خدمات وام</a> |
|
|
<a href="#" class="hover:text-gray-200 transition">شرایط و ضوابط</a> |
|
|
<a href="#" class="hover:text-gray-200 transition">درباره ما</a> |
|
|
<a href="#" class="hover:text-gray-200 transition">تماس با ما</a> |
|
|
</nav> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition">ورود</button> |
|
|
<button class="hidden md:block bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-800 transition">ثبت نام</button> |
|
|
<button class="md:hidden text-white text-2xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h2 class="text-4xl font-bold mb-4">وام مسکن با بهترین شرایط</h2> |
|
|
<p class="text-xl mb-8">با هم وام، رویای خانه دار شدن را به واقعیت تبدیل کنید. دریافت وام با کمترین بهره و سریعترین زمان ممکن.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition">درخواست وام</button> |
|
|
<button class="border-2 border-white text-white px-6 py-3 rounded-lg font-bold hover:bg-white hover:text-indigo-600 transition">مشاوره رایگان</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-full max-w-md"> |
|
|
<div class="absolute -top-6 -right-6 w-32 h-32 bg-indigo-400 rounded-full opacity-20 animate-pulse"></div> |
|
|
<div class="absolute -bottom-6 -left-6 w-32 h-32 bg-purple-400 rounded-full opacity-20 animate-pulse"></div> |
|
|
<div class="relative bg-white text-gray-800 p-8 rounded-xl shadow-xl"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-center">محاسبه وام</h3> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">مبلغ وام (تومان)</label> |
|
|
<div class="relative"> |
|
|
<input type="range" min="100000000" max="5000000000" value="1000000000" step="10000000" class="range-slider" id="loanAmount"> |
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1"> |
|
|
<span>100 میلیون</span> |
|
|
<span>5 میلیارد</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<input type="text" id="loanAmountDisplay" class="input-field w-full p-3 rounded-lg border text-left" value="1,000,000,000" readonly> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2">مدت بازپرداخت (سال)</label> |
|
|
<div class="relative"> |
|
|
<input type="range" min="1" max="20" value="5" class="range-slider" id="loanTerm"> |
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1"> |
|
|
<span>1 سال</span> |
|
|
<span>20 سال</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<input type="text" id="loanTermDisplay" class="input-field w-full p-3 rounded-lg border text-left" value="5" readonly> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="flex items-center cursor-pointer"> |
|
|
<div class="relative"> |
|
|
<input type="checkbox" id="toggle" class="toggle-checkbox sr-only"> |
|
|
<div class="toggle-label block w-14 h-8 rounded-full bg-gray-300"></div> |
|
|
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div> |
|
|
</div> |
|
|
<div class="mr-3 text-gray-700">بیمه وام</div> |
|
|
</label> |
|
|
</div> |
|
|
<button id="calculateBtn" class="gradient-bg text-white w-full py-3 rounded-lg font-bold hover:opacity-90 transition">محاسبه اقساط</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div id="loanModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-8 max-w-md w-full mx-4"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold">نتیجه محاسبه وام</h3> |
|
|
<button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-600">مبلغ وام:</span> |
|
|
<span id="modalLoanAmount" class="font-medium">1,000,000,000 تومان</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-600">مدت بازپرداخت:</span> |
|
|
<span id="modalLoanTerm" class="font-medium">5 سال</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-600">نرخ سود:</span> |
|
|
<span id="modalInterestRate" class="font-medium">18% سالانه</span> |
|
|
</div> |
|
|
<div class="border-t border-gray-200 my-4"></div> |
|
|
<div class="flex justify-between text-lg font-bold"> |
|
|
<span>قسط ماهانه:</span> |
|
|
<span id="modalMonthlyPayment" class="text-indigo-600">25,000,000 تومان</span> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<button class="gradient-bg text-white w-full py-3 rounded-lg font-bold hover:opacity-90 transition">درخواست وام</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">چرا هم وام؟</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="loan-card bg-gray-50 p-6 rounded-xl"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-bolt text-indigo-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">پرداخت سریع</h3> |
|
|
<p class="text-gray-600">پرداخت وام در کمتر از 72 ساعت پس از تایید مدارک شما</p> |
|
|
</div> |
|
|
<div class="loan-card bg-gray-50 p-6 rounded-xl"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-percent text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">نرخ سود مناسب</h3> |
|
|
<p class="text-gray-600">بهترین نرخ سود بازار با توجه به شرایط شما</p> |
|
|
</div> |
|
|
<div class="loan-card bg-gray-50 p-6 rounded-xl"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-headset text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">پشتیبانی 24/7</h3> |
|
|
<p class="text-gray-600">پشتیبانی تلفنی و آنلاین در تمام ساعات شبانه روز</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">انواع وام های مسکن</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="loan-card bg-white p-6 rounded-xl"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">وام مسکن کلید</h3> |
|
|
<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium">جدید</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">وام ویژه خرید خانه های نوساز با شرایط ویژه</p> |
|
|
<div class="space-y-3 mb-6"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">حداکثر مبلغ:</span> |
|
|
<span class="font-medium">5 میلیارد تومان</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">نرخ سود:</span> |
|
|
<span class="font-medium">16% سالانه</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">مدت بازپرداخت:</span> |
|
|
<span class="font-medium">تا 15 سال</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full border border-indigo-600 text-indigo-600 py-2 rounded-lg font-medium hover:bg-indigo-50 transition">اطلاعات بیشتر</button> |
|
|
</div> |
|
|
<div class="loan-card bg-white p-6 rounded-xl"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">وام مسکن ملی</h3> |
|
|
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">پرفروش</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">وام مناسب برای خرید خانه های طرح مسکن ملی</p> |
|
|
<div class="space-y-3 mb-6"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">حداکثر مبلغ:</span> |
|
|
<span class="font-medium">2 میلیارد تومان</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">نرخ سود:</span> |
|
|
<span class="font-medium">18% سالانه</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">مدت بازپرداخت:</span> |
|
|
<span class="font-medium">تا 10 سال</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full border border-purple-600 text-purple-600 py-2 rounded-lg font-medium hover:bg-purple-50 transition">اطلاعات بیشتر</button> |
|
|
</div> |
|
|
<div class="loan-card bg-white p-6 rounded-xl"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold">وام نوسازی</h3> |
|
|
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">ویژه</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">وام برای بازسازی و نوسازی منزل مسکونی</p> |
|
|
<div class="space-y-3 mb-6"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">حداکثر مبلغ:</span> |
|
|
<span class="font-medium">1 میلیارد تومان</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">نرخ سود:</span> |
|
|
<span class="font-medium">15% سالانه</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">مدت بازپرداخت:</span> |
|
|
<span class="font-medium">تا 5 سال</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full border border-green-600 text-green-600 py-2 rounded-lg font-medium hover:bg-green-50 transition">اطلاعات بیشتر</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">مراحل دریافت وام</h2> |
|
|
<div class="relative"> |
|
|
<div class="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2"></div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div class="relative z-10"> |
|
|
<div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-xl font-bold">1</div> |
|
|
<h3 class="text-xl font-bold text-center mb-2">ثبت درخواست</h3> |
|
|
<p class="text-gray-600 text-center">ثبت اطلاعات اولیه در سایت هم وام</p> |
|
|
</div> |
|
|
<div class="relative z-10"> |
|
|
<div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-xl font-bold">2</div> |
|
|
<h3 class="text-xl font-bold text-center mb-2">تایید مدارک</h3> |
|
|
<p class="text-gray-600 text-center">ارسال مدارک و تایید توسط کارشناسان</p> |
|
|
</div> |
|
|
<div class="relative z-10"> |
|
|
<div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-xl font-bold">3</div> |
|
|
<h3 class="text-xl font-bold text-center mb-2">بررسی اعتبار</h3> |
|
|
<p class="text-gray-600 text-center">بررسی سابقه اعتباری و مالی شما</p> |
|
|
</div> |
|
|
<div class="relative z-10"> |
|
|
<div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-white text-xl font-bold">4</div> |
|
|
<h3 class="text-xl font-bold text-center mb-2">پرداخت وام</h3> |
|
|
<p class="text-gray-600 text-center">واریز مبلغ وام به حساب شما</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">نظرات مشتریان</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="loan-card bg-white p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold">م.ح</div> |
|
|
<div class="mr-4"> |
|
|
<h4 class="font-bold">محمد حسینی</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"با تشکر از هم وام که در کمتر از 3 روز وام مسکن من را پرداخت کردند. پشتیبانی بسیار خوبی داشتند و تمام مراحل به صورت آنلاین انجام شد."</p> |
|
|
</div> |
|
|
<div class="loan-card bg-white p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-bold">ف.ر</div> |
|
|
<div class="mr-4"> |
|
|
<h4 class="font-bold">فاطمه رضایی</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"نرخ سود بسیار مناسبی داشتند و مشاوره رایگانشان واقعا کمکم کرد تا بهترین گزینه را انتخاب کنم. ممنون از تیم حرفه ای هم وام."</p> |
|
|
</div> |
|
|
<div class="loan-card bg-white p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 font-bold">ع.ک</div> |
|
|
<div class="mr-4"> |
|
|
<h4 class="font-bold">علی کریمی</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"برای خرید خانه دومم از هم وام استفاده کردم. مدارک را آنلاین ارسال کردم و بدون نیاز به مراجعه حضوری، وامم را دریافت کردم. بسیار راضی هستم."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">آماده دریافت وام مسکن هستید؟</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">همین حالا درخواست خود را ثبت کنید و در کمتر از 5 دقیقه پیشنهاد شخصی سازی شده خود را دریافت نمایید.</p> |
|
|
<button class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition">ثبت درخواست وام</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-home text-2xl"></i> |
|
|
<h3 class="text-xl font-bold">هم وام</h3> |
|
|
</div> |
|
|
<p class="text-gray-400">همراه شما برای تحقق رویای خانه دار شدن با بهترین شرایط وام مسکن.</p> |
|
|
<div class="flex space-x-4 mt-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">لینک های مفید</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">صفحه اصلی</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">خدمات وام</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">شرایط و ضوابط</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">درباره ما</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">تماس با ما</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">خدمات</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">وام مسکن کلید</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">وام مسکن ملی</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">وام نوسازی</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">مشاوره رایگان</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">محاسبه گر اقساط</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">تماس با ما</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt text-gray-400 ml-2"></i> |
|
|
<span class="text-gray-400">تهران، خیابان ولیعصر، پلاک 1000</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone text-gray-400 ml-2"></i> |
|
|
<span class="text-gray-400">021-12345678</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope text-gray-400 ml-2"></i> |
|
|
<span class="text-gray-400">[email protected]</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 هم وام. تمام حقوق محفوظ است.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function formatNumber(num) { |
|
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const loanAmountSlider = document.getElementById('loanAmount'); |
|
|
const loanAmountDisplay = document.getElementById('loanAmountDisplay'); |
|
|
const loanTermSlider = document.getElementById('loanTerm'); |
|
|
const loanTermDisplay = document.getElementById('loanTermDisplay'); |
|
|
const calculateBtn = document.getElementById('calculateBtn'); |
|
|
const loanModal = document.getElementById('loanModal'); |
|
|
const closeModal = document.getElementById('closeModal'); |
|
|
|
|
|
|
|
|
loanAmountSlider.addEventListener('input', function() { |
|
|
loanAmountDisplay.value = formatNumber(this.value); |
|
|
}); |
|
|
|
|
|
|
|
|
loanTermSlider.addEventListener('input', function() { |
|
|
loanTermDisplay.value = this.value; |
|
|
}); |
|
|
|
|
|
|
|
|
calculateBtn.addEventListener('click', function() { |
|
|
const loanAmount = parseInt(loanAmountSlider.value); |
|
|
const loanTerm = parseInt(loanTermSlider.value); |
|
|
const hasInsurance = document.getElementById('toggle').checked; |
|
|
|
|
|
|
|
|
const interestRate = hasInsurance ? 0.16 : 0.18; |
|
|
const monthlyInterestRate = interestRate / 12; |
|
|
const numberOfPayments = loanTerm * 12; |
|
|
|
|
|
|
|
|
const monthlyPayment = (loanAmount * monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments)) / |
|
|
(Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1); |
|
|
|
|
|
|
|
|
document.getElementById('modalLoanAmount').textContent = formatNumber(loanAmount) + ' تومان'; |
|
|
document.getElementById('modalLoanTerm').textContent = loanTerm + ' سال'; |
|
|
document.getElementById('modalInterestRate').textContent = (interestRate * 100) + '% سالانه'; |
|
|
document.getElementById('modalMonthlyPayment').textContent = formatNumber(Math.round(monthlyPayment)) + ' تومان'; |
|
|
|
|
|
|
|
|
loanModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
closeModal.addEventListener('click', function() { |
|
|
loanModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
loanModal.addEventListener('click', function(e) { |
|
|
if (e.target === loanModal) { |
|
|
loanModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const toggle = document.getElementById('toggle'); |
|
|
const toggleLabel = document.querySelector('.toggle-label'); |
|
|
const dot = document.querySelector('.dot'); |
|
|
|
|
|
toggle.addEventListener('change', function() { |
|
|
if (this.checked) { |
|
|
dot.style.transform = 'translateX(1.5rem)'; |
|
|
} else { |
|
|
dot.style.transform = 'translateX(0)'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AhmedAz/hamvam" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
