| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AutoLend - Vehicle Financing</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> |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| @keyframes slideIn { |
| from { transform: translateX(-100%); } |
| to { transform: translateX(0); } |
| } |
| |
| @keyframes slideOut { |
| from { transform: translateX(0); } |
| to { transform: translateX(-100%); } |
| } |
| |
| .animate-fadeIn { |
| animation: fadeIn 0.5s ease-in-out; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-10px); } |
| } |
| |
| .animate-float { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| .animate-bounce { |
| animation: bounce 2s infinite; |
| } |
| |
| @keyframes bounce { |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} |
| 40% {transform: translateY(-10px);} |
| 60% {transform: translateY(-5px);} |
| } |
| |
| |
| .fab-container { |
| position: relative; |
| z-index: 10; |
| } |
| |
| .fab-btn { |
| width: 64px; |
| height: 64px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #2196F3, #1976D2); |
| box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| position: relative; |
| z-index: 20; |
| } |
| |
| .fab-btn:hover { |
| transform: scale(1.05); |
| box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4); |
| } |
| |
| .fab-btn:active { |
| transform: scale(0.95); |
| transition: transform 0.15s ease-out; |
| } |
| |
| .fab-btn i { |
| transition: transform 0.2s ease-in-out; |
| } |
| |
| .fab-btn:hover { |
| transform: scale(1.05); |
| filter: brightness(1.1); |
| box-shadow: 0 8px 20px rgba(33, 150, 243, 0.4); |
| } |
| |
| .fab-active i { |
| transform: rotate(45deg); |
| } |
| |
| |
| .fab-ripple { |
| position: absolute; |
| border-radius: 50%; |
| background-color: rgba(255, 255, 255, 0.3); |
| transform: scale(0); |
| animation: ripple 0.3s ease-out; |
| pointer-events: none; |
| } |
| |
| @keyframes ripple { |
| to { |
| transform: scale(4); |
| opacity: 0; |
| } |
| } |
| |
| .fab-menu { |
| position: absolute; |
| bottom: 70px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 200px; |
| height: 100px; |
| background: white; |
| border-radius: 50px; |
| box-shadow: 0 8px 20px rgba(0,0,0,0.1); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 15; |
| opacity: 0; |
| visibility: hidden; |
| transition: all 0.3s ease; |
| } |
| |
| .fab-menu.active { |
| opacity: 1; |
| visibility: visible; |
| } |
| |
| .fab-menu-items { |
| display: flex; |
| justify-content: space-around; |
| width: 100%; |
| padding: 0 20px; |
| } |
| |
| .fab-menu-item { |
| width: 48px; |
| height: 48px; |
| border-radius: 50%; |
| background: #f5f5f5; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| transform: translateY(20px); |
| opacity: 0; |
| } |
| |
| .fab-menu-item:hover { |
| background: #e3f2fd; |
| transform: translateY(15px) scale(1.1); |
| } |
| |
| .fab-menu-item i { |
| color: #2196F3; |
| font-size: 18px; |
| } |
| |
| .fab-menu.active .fab-menu-item { |
| transform: translateY(0); |
| opacity: 1; |
| transition-delay: calc(var(--i) * 0.1s); |
| } |
| |
| .input-highlight { |
| box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); |
| } |
| |
| .animate-slideIn { |
| animation: slideIn 0.3s ease-in-out; |
| } |
| |
| .animate-slideOut { |
| animation: slideOut 0.3s ease-in-out; |
| } |
| |
| .sidebar { |
| transition: transform 0.3s ease-in-out; |
| } |
| |
| .sidebar-hidden { |
| transform: translateX(-100%); |
| } |
| |
| .sidebar-visible { |
| transform: translateX(0); |
| } |
| |
| .modal { |
| transition: all 0.3s ease; |
| } |
| |
| .modal-hidden { |
| opacity: 0; |
| visibility: hidden; |
| transform: scale(0.8); |
| } |
| |
| .modal-visible { |
| opacity: 1; |
| visibility: visible; |
| transform: scale(1); |
| } |
| |
| .accordion-content { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.3s ease; |
| } |
| |
| .accordion-content.open { |
| max-height: 500px; |
| } |
| |
| .slider { |
| scroll-behavior: smooth; |
| } |
| |
| .slider::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .dot { |
| transition: background-color 0.3s ease; |
| } |
| |
| .dot.active { |
| background-color: #2563eb; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 5px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #2563eb; |
| border-radius: 10px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #1d4ed8; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50 text-gray-800"> |
| |
| <div class="max-w-md mx-auto bg-white min-h-screen relative overflow-hidden shadow-lg"> |
| |
| <div id="sidebar" class="sidebar sidebar-hidden fixed top-0 left-0 w-64 h-full bg-white shadow-lg z-50"> |
| <div class="p-4 bg-blue-600 text-white flex items-center justify-between"> |
| <div class="flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="Logo" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <p class="font-semibold">John Doe</p> |
| <p class="text-xs opacity-80">Premium Member</p> |
| </div> |
| </div> |
| <button onclick="toggleSidebar()" class="text-white"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="overflow-y-auto h-full pb-20"> |
| <ul class="py-2"> |
| <li> |
| <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50"> |
| <i class="fas fa-home mr-3 text-blue-600"></i> |
| <span>Home</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50"> |
| <i class="fas fa-car mr-3 text-blue-600"></i> |
| <span>My Loans</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50"> |
| <i class="fas fa-file-invoice mr-3 text-blue-600"></i> |
| <span>Payments</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50"> |
| <i class="fas fa-user mr-3 text-blue-600"></i> |
| <span>Profile</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50"> |
| <i class="fas fa-cog mr-3 text-blue-600"></i> |
| <span>Settings</span> |
| </a> |
| </li> |
| <li class="border-t border-gray-100 mt-2 pt-2"> |
| <a href="#" id="logout-btn-sidebar" class="flex items-center px-4 py-3 text-red-600 hover:bg-red-50"> |
| <i class="fas fa-sign-out-alt mr-3"></i> |
| <span>Logout</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> |
|
|
| |
| <div id="app-content" class="relative"> |
| |
| <div id="landing-page"> |
| |
| <header class="bg-white shadow-sm py-3 px-4 flex items-center justify-between sticky top-0 z-30"> |
| <button id="sidebar-toggle" class="text-gray-600 focus:outline-none" onclick="toggleSidebar()"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| |
| <div id="search-container" class="relative flex-1 mx-4 hidden"> |
| <input type="text" id="search-input" placeholder="Search..." |
| class="w-full py-2 px-4 pl-10 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| <div id="search-results" class="absolute left-0 right-0 mt-2 bg-white rounded-lg shadow-lg z-50 hidden"> |
| <div class="p-2 text-sm text-gray-500">Recent searches</div> |
| <div class="divide-y divide-gray-100"> |
| <div class="p-3 hover:bg-blue-50 cursor-pointer">Car loan calculator</div> |
| <div class="p-3 hover:bg-blue-50 cursor-pointer">Two wheeler loan</div> |
| <div class="p-3 hover:bg-blue-50 cursor-pointer">Pre-approved offers</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <button id="search-toggle" class="text-gray-600 focus:outline-none"> |
| <i class="fas fa-search text-xl"></i> |
| </button> |
| <button class="text-gray-600 relative focus:outline-none" onclick="alert('Notifications feature coming soon!')"> |
| <i class="fas fa-bell text-xl"></i> |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
| </button> |
| </div> |
| </header> |
| |
| <main class="pb-20"> |
|
|
| |
| <div class="mx-4 mb-6 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl shadow-sm p-4 border border-blue-200"> |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <h3 class="text-sm font-medium text-blue-800">Welcome back,</h3> |
| <h2 class="text-xl font-semibold">John Doe</h2> |
| </div> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Loan #AL789456</span> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-3 text-sm"> |
| <div> |
| <p class="text-gray-500">Finance Amount</p> |
| <p class="font-medium">₹5,76,504</p> |
| </div> |
| <div> |
| <p class="text-gray-500">Vehicle</p> |
| <p class="font-medium">Hyundai Creta SX</p> |
| </div> |
| <div> |
| <p class="text-gray-500">EMI Amount</p> |
| <p class="font-medium">₹16,014</p> |
| </div> |
| <div> |
| <p class="text-gray-500">Next EMI Date</p> |
| <p class="font-medium">15 Oct 2023</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mx-4 mb-6 bg-white rounded-xl shadow-sm p-4 border border-gray-100 relative overflow-hidden"> |
| <div class="absolute -right-6 -top-6 w-24 h-24 bg-blue-100 rounded-full opacity-20"></div> |
| <div class="relative z-10"> |
| <h3 class="text-lg font-semibold mb-3 flex items-center"> |
| <i class="fas fa-wallet text-blue-600 mr-2"></i> |
| EMI Status |
| </h3> |
| |
| <div class="grid grid-cols-2 gap-4 mb-4"> |
| <div class="bg-blue-50 p-3 rounded-lg"> |
| <p class="text-xs text-blue-800 mb-1">EMI Outstanding</p> |
| <p class="text-xl font-bold">₹1,92,168</p> |
| <p class="text-xs text-gray-500 mt-1">24 EMIs remaining</p> |
| </div> |
| <div class="bg-red-50 p-3 rounded-lg"> |
| <p class="text-xs text-red-800 mb-1">Total Overdue</p> |
| <p class="text-xl font-bold">₹32,028</p> |
| <p class="text-xs text-gray-500 mt-1">2 EMIs pending</p> |
| </div> |
| </div> |
| |
| <button class="w-full bg-gradient-to-r from-blue-600 to-blue-500 text-white py-3 px-4 rounded-lg font-medium hover:from-blue-700 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition transform hover:scale-[1.01] active:scale-[0.99] shadow-lg hover:shadow-blue-200 flex items-center justify-center"> |
| <i class="fas fa-rupee-sign mr-2"></i> |
| Pay Now |
| </button> |
| </div> |
| </div> |
|
|
| <div class="px-4 mb-6 mt-2"> |
| <h2 class="text-lg font-semibold mb-3">Quick Actions</h2> |
| <div class="grid grid-cols-4 gap-3"> |
| <button class="flex flex-col items-center justify-center p-2 bg-blue-50 rounded-lg hover:bg-blue-100 transition"> |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-1"> |
| <i class="fas fa-car text-blue-600"></i> |
| </div> |
| <span class="text-xs text-center">New Loan</span> |
| </button> |
| <button class="flex flex-col items-center justify-center p-2 bg-blue-50 rounded-lg hover:bg-blue-100 transition"> |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-1"> |
| <i class="fas fa-file-invoice-dollar text-blue-600"></i> |
| </div> |
| <span class="text-xs text-center">My Loans</span> |
| </button> |
| <button class="flex flex-col items-center justify-center p-2 bg-blue-50 rounded-lg hover:bg-blue-100 transition"> |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-1"> |
| <i class="fas fa-calendar-alt text-blue-600"></i> |
| </div> |
| <span class="text-xs text-center">Schedule</span> |
| </button> |
| <button class="flex flex-col items-center justify-center p-2 bg-blue-50 rounded-lg hover:bg-blue-100 transition"> |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-1"> |
| <i class="fas fa-headset text-blue-600"></i> |
| </div> |
| <span class="text-xs text-center">Support</span> |
| </button> |
| </div> |
| </div> |
| |
|
|
|
|
|
|
| |
| <div class="relative px-4 mt-2"> |
| <div id="banner-slider" class="slider flex overflow-x-auto snap-x snap-mandatory scroll-smooth rounded-xl" style="scrollbar-width: none;"> |
| <div class="flex-shrink-0 w-full snap-start"> |
| <img src="https://via.placeholder.com/360x150?text=Banner+1" alt="Banner 1" class="w-full h-40 object-cover rounded-xl"> |
| </div> |
| <div class="flex-shrink-0 w-full snap-start"> |
| <img src="https://via.placeholder.com/360x150?text=Banner+2" alt="Banner 2" class="w-full h-40 object-cover rounded-xl"> |
| </div> |
| <div class="flex-shrink-0 w-full snap-start"> |
| <img src="https://via.placeholder.com/360x150?text=Banner+3" alt="Banner 3" class="w-full h-40 object-cover rounded-xl"> |
| </div> |
| </div> |
| <div class="flex justify-center space-x-2 mt-2"> |
| <button class="dot w-2 h-2 rounded-full bg-gray-300 active" data-index="0"></button> |
| <button class="dot w-2 h-2 rounded-full bg-gray-300" data-index="1"></button> |
| <button class="dot w-2 h-2 rounded-full bg-gray-300" data-index="2"></button> |
| </div> |
| </div> |
| </br> |
|
|
| |
| <div class="bg-blue-600 text-white mx-4 p-4 rounded-xl mb-6"> |
| <h2 class="text-lg font-semibold mb-2">EMI Calculator</h2> |
| <p class="text-sm opacity-90 mb-4">Calculate your monthly payments</p> |
| <div class="space-y-3"> |
| <div> |
| <label class="block text-sm mb-1">Loan Amount (₹)</label> |
| <input type="range" min="50000" max="5000000" step="50000" value="500000" class="w-full accent-white"> |
| <div class="flex justify-between text-xs"> |
| <span>50K</span> |
| <span>50L</span> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm mb-1">Tenure (Years)</label> |
| <input type="range" min="1" max="7" step="1" value="3" class="w-full accent-white"> |
| <div class="flex justify-between text-xs"> |
| <span>1</span> |
| <span>7</span> |
| </div> |
| </div> |
| </div> |
| <button onclick="showPage('emi-calculator-page')" class="w-full mt-4 bg-white text-blue-600 py-2 px-4 rounded-lg font-medium hover:bg-gray-100 focus:outline-none transition transform hover:scale-[1.01]"> |
| Calculate EMI |
| </button> |
| </div> |
| |
| |
| <div class="px-4 mb-6"> |
| <h2 class="text-lg font-semibold mb-3">Current Offers</h2> |
| <div class="grid grid-cols-2 gap-3"> |
| <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-3 rounded-lg"> |
| <h3 class="font-medium mb-1">Low Interest Rates</h3> |
| <p class="text-xs opacity-90">Starting from 8.5% p.a.</p> |
| </div> |
| <div class="bg-gradient-to-r from-blue-400 to-blue-500 text-white p-3 rounded-lg"> |
| <h3 class="font-medium mb-1">Flexible Tenure</h3> |
| <p class="text-xs opacity-90">Up to 7 years</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="px-4 mb-6"> |
| <h2 class="text-lg font-semibold mb-3">Frequently Asked Questions</h2> |
| <div class="space-y-2"> |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="accordion-btn w-full flex justify-between items-center p-3 text-left hover:bg-gray-50 transition"> |
| <span>What documents are required for a vehicle loan?</span> |
| <i class="fas fa-chevron-down text-xs transition-transform duration-300"></i> |
| </button> |
| <div class="accordion-content"> |
| <div class="p-3 pt-0 text-sm text-gray-600"> |
| You'll need proof of identity (Aadhaar, PAN, etc.), proof of address, income proof (salary slips or IT returns), and vehicle quotation from the dealer. |
| </div> |
| </div> |
| </div> |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="accordion-btn w-full flex justify-between items-center p-3 text-left hover:bg-gray-50 transition"> |
| <span>How long does the approval process take?</span> |
| <i class="fas fa-chevron-down text-xs transition-transform duration-300"></i> |
| </button> |
| <div class="accordion-content"> |
| <div class="p-3 pt-0 text-sm text-gray-600"> |
| Typically, approval takes 24-48 hours after submitting all required documents. Disbursement happens within 1-2 working days after approval. |
| </div> |
| </div> |
| </div> |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="accordion-btn w-full flex justify-between items-center p-3 text-left hover:bg-gray-50 transition"> |
| <span>Can I prepay my loan?</span> |
| <i class="fas fa-chevron-down text-xs transition-transform duration-300"></i> |
| </button> |
| <div class="accordion-content"> |
| <div class="p-3 pt-0 text-sm text-gray-600"> |
| Yes, you can prepay your loan after 6 months. A nominal prepayment charge of 2% applies for prepayment within the first year. |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| |
| |
| <nav id="main-footer" class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 flex justify-around items-center py-2 z-20 h-16"> |
| <button onclick="showPage('landing-page')" class="flex flex-col items-center p-2 text-blue-600"> |
| <i class="fas fa-home text-lg"></i> |
| <span class="text-xs mt-1">Home</span> |
| </button> |
| |
| |
| <div class="fab-container"> |
| <button id="fab-btn" class="fab-btn -mt-6 text-white"> |
| <i class="fas fa-plus text-2xl" id="fab-icon"></i> |
| </button> |
| |
| |
| <div id="fab-menu" class="fab-menu"> |
| <div class="fab-menu-items"> |
| <button onclick="showPage('documents-page')" class="fab-menu-item" style="--i: 0"> |
| <i class="fas fa-file-alt"></i> |
| </button> |
| <button onclick="showPage('quickpay-page')" class="fab-menu-item" style="--i: 1"> |
| <i class="fas fa-bolt"></i> |
| </button> |
| <button onclick="showPage('support-page')" class="fab-menu-item" style="--i: 2"> |
| <i class="fas fa-headset"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <button onclick="showPage('profile-page')" class="flex flex-col items-center p-2 text-gray-500 hover:text-blue-600"> |
| <i class="fas fa-user text-lg"></i> |
| <span class="text-xs mt-1">Profile</span> |
| </button> |
| </nav> |
|
|
| |
| <div id="search-page" class="hidden"> |
| <header class="bg-white shadow-sm py-3 px-4 flex items-center justify-between sticky top-0 z-30"> |
| <button onclick="showPage('landing-page')" class="text-gray-600 focus:outline-none"> |
| <i class="fas fa-arrow-left text-xl"></i> |
| </button> |
| <div class="relative flex-1 mx-4"> |
| <input type="text" placeholder="Search FAQs..." |
| class="w-full py-2 px-4 pl-10 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| </header> |
| |
| <main class="p-4 pb-20"> |
| <h2 class="text-xl font-semibold mb-4">Frequently Asked Questions</h2> |
| |
| <div class="space-y-3"> |
| <div class="bg-gradient-to-r from-blue-50 to-white p-4 rounded-xl shadow-sm border border-blue-100"> |
| <h3 class="font-medium flex items-center"> |
| <i class="fas fa-question-circle text-blue-500 mr-2"></i> |
| How to apply for a vehicle loan? |
| </h3> |
| <p class="text-sm text-gray-600 mt-2">You can apply through our mobile app or website by filling the application form and uploading required documents.</p> |
| </div> |
| |
| <div class="bg-gradient-to-r from-blue-50 to-white p-4 rounded-xl shadow-sm border border-blue-100"> |
| <h3 class="font-medium flex items-center"> |
| <i class="fas fa-question-circle text-blue-500 mr-2"></i> |
| What is the minimum credit score required? |
| </h3> |
| <p class="text-sm text-gray-600 mt-2">We require a minimum credit score of 650 for loan approval. Higher scores get better interest rates.</p> |
| </div> |
| |
| <div class="bg-gradient-to-r from-blue-50 to-white p-4 rounded-xl shadow-sm border border-blue-100"> |
| <h3 class="font-medium flex items-center"> |
| <i class="fas fa-question-circle text-blue-500 mr-2"></i> |
| How to check loan status? |
| </h3> |
| <p class="text-sm text-gray-600 mt-2">Login to your account and check under 'My Applications' section or contact our customer support.</p> |
| </div> |
| </div> |
| </main> |
| </div> |
| |
| |
| <div id="profile-page" class="hidden"> |
| <header class="bg-white shadow-sm py-3 px-4 flex items-center justify-between sticky top-0 z-30"> |
| <button onclick="showPage('landing-page')" class="text-gray-600 focus:outline-none"> |
| <i class="fas fa-arrow-left text-xl"></i> |
| </button> |
| <h1 class="text-lg font-semibold">My Profile</h1> |
| <button class="text-gray-600 focus:outline-none opacity-0"> |
| <i class="fas fa-bell text-xl"></i> |
| </button> |
| </header> |
| |
| <main class="p-4 pb-20"> |
| <div class="flex flex-col items-center mb-6"> |
| <div class="relative mb-3"> |
| <img src="https://via.placeholder.com/100" alt="Profile" class="w-24 h-24 rounded-full border-4 border-blue-100"> |
| <button class="absolute bottom-0 right-0 bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 transition"> |
| <i class="fas fa-pencil-alt text-xs"></i> |
| </button> |
| </div> |
| <h2 class="text-xl font-semibold">John Doe</h2> |
| <p class="text-gray-500 text-sm">Premium Member</p> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <h3 class="font-medium mb-3 text-blue-600">Personal Information</h3> |
| <div class="space-y-3"> |
| <div> |
| <p class="text-xs text-gray-500">Full Name</p> |
| <p class="font-medium">John Michael Doe</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500">Email Address</p> |
| <p class="font-medium">john.doe@example.com</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500">Mobile Number</p> |
| <p class="font-medium">+91 9876543210</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500">Date of Birth</p> |
| <p class="font-medium">15 Jan 1985</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <h3 class="font-medium mb-3 text-blue-600">Address Details</h3> |
| <div class="space-y-3"> |
| <div> |
| <p class="text-xs text-gray-500">Residence Address</p> |
| <p class="font-medium">123 Main Street, Apt 4B</p> |
| <p class="font-medium">Mumbai, Maharashtra 400001</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500">Permanent Address</p> |
| <p class="font-medium">Same as residence</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <h3 class="font-medium mb-3 text-blue-600">Account Settings</h3> |
| <div class="space-y-3"> |
| <button class="w-full flex justify-between items-center py-2"> |
| <span>Change Password</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </button> |
| <button class="w-full flex justify-between items-center py-2"> |
| <span>Notification Preferences</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </button> |
| <button class="w-full flex justify-between items-center py-2"> |
| <span>Language</span> |
| <span class="text-gray-400">English</span> |
| </button> |
| <button id="logout-btn-profile" class="w-full flex justify-between items-center py-2 text-red-500"> |
| <span>Logout</span> |
| <i class="fas fa-sign-out-alt"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <div id="emi-calculator-page" class="hidden"> |
| <header class="bg-white shadow-sm py-3 px-4 flex items-center justify-between sticky top-0 z-30"> |
| <button onclick="showPage('landing-page')" class="text-gray-600 focus:outline-none"> |
| <i class="fas fa-arrow-left text-xl"></i> |
| </button> |
| <h1 class="text-lg font-semibold">EMI Calculator</h1> |
| <button class="text-gray-600 focus:outline-none opacity-0"> |
| <i class="fas fa-bell text-xl"></i> |
| </button> |
| </header> |
| |
| <main class="p-4 pb-20"> |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-6"> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Loan Amount (₹)</label> |
| <div class="relative"> |
| <input type="number" id="loan-amount" value="500000" min="50000" max="5000000" step="10000" |
| class="w-full py-2 px-4 pl-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| <span class="absolute left-3 top-2.5 text-gray-500">₹</span> |
| </div> |
| <input type="range" id="loan-amount-slider" min="50000" max="5000000" step="10000" value="500000" |
| class="w-full mt-2 accent-blue-600"> |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> |
| <span>50K</span> |
| <span>50L</span> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Interest Rate (% p.a.)</label> |
| <div class="relative"> |
| <input type="number" id="interest-rate" value="9.5" min="5" max="20" step="0.1" |
| class="w-full py-2 px-4 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| <span class="absolute right-3 top-2.5 text-gray-500">%</span> |
| </div> |
| <input type="range" id="interest-rate-slider" min="5" max="20" step="0.1" value="9.5" |
| class="w-full mt-2 accent-blue-600"> |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> |
| <span>5%</span> |
| <span>20%</span> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Loan Tenure (Years)</label> |
| <div class="relative"> |
| <input type="number" id="loan-tenure" value="3" min="1" max="7" step="1" |
| class="w-full py-2 px-4 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> |
| <span class="absolute right-3 top-2.5 text-gray-500">Yrs</span> |
| </div> |
| <input type="range" id="loan-tenure-slider" min="1" max="7" step="1" value="3" |
| class="w-full mt-2 accent-blue-600"> |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> |
| <span>1</span> |
| <span>7</span> |
| </div> |
| </div> |
| |
| <button id="calculate-emi" class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition transform hover:scale-[1.01]"> |
| Calculate EMI |
| </button> |
| </div> |
| </div> |
| |
| <div id="emi-result" class="hidden bg-blue-50 border border-blue-100 rounded-lg p-4 mb-6 animate-fadeIn"> |
| <h2 class="text-lg font-semibold text-blue-800 mb-3">Your EMI Breakdown</h2> |
| <div class="space-y-3"> |
| <div class="flex justify-between"> |
| <span class="text-gray-700">Monthly EMI</span> |
| <span class="font-semibold" id="monthly-emi">₹16,014</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-700">Total Interest</span> |
| <span class="font-semibold" id="total-interest">₹76,504</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-700">Total Payment</span> |
| <span class="font-semibold" id="total-payment">₹5,76,504</span> |
| </div> |
| </div> |
| |
| <div class="mt-4"> |
| <h3 class="text-sm font-medium text-blue-800 mb-2">Payment Schedule</h3> |
| <div class="bg-white rounded-lg p-3"> |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> |
| <span>Year</span> |
| <span>Principal</span> |
| <span>Interest</span> |
| <span>Balance</span> |
| </div> |
| <div class="space-y-2" id="payment-schedule"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <h3 class="font-medium mb-3 text-blue-600">Loan Eligibility</h3> |
| <div class="flex items-center mb-2"> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-3"> |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div> |
| </div> |
| <span class="text-sm font-medium">75%</span> |
| </div> |
| <p class="text-sm text-gray-600">Based on your profile, you're eligible for up to ₹3,75,000 additional loan amount.</p> |
| <button class="w-full mt-3 border border-blue-600 text-blue-600 py-2 px-4 rounded-lg font-medium hover:bg-blue-50 focus:outline-none transition"> |
| Check Eligibility |
| </button> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <div id="logout-modal" class="modal modal-hidden fixed inset-0 flex items-center justify-center z-50 p-4"> |
| <div class="bg-white rounded-lg shadow-xl max-w-sm w-full p-6 animate-fadeIn"> |
| <div class="text-center"> |
| <i class="fas fa-sign-out-alt text-4xl text-blue-600 mb-3"></i> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Logout Confirmation</h3> |
| <p class="text-sm text-gray-500 mb-6">Are you sure you want to logout from your account?</p> |
| </div> |
| <div class="flex space-x-3"> |
| <button id="cancel-logout" class="flex-1 border border-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium hover:bg-gray-50 focus:outline-none transition"> |
| Cancel |
| </button> |
| <button id="confirm-logout" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700 focus:outline-none transition"> |
| Logout |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const loginPage = document.getElementById('login-page'); |
| const landingPage = document.getElementById('landing-page'); |
| const profilePage = document.getElementById('profile-page'); |
| const emiCalculatorPage = document.getElementById('emi-calculator-page'); |
| |
| const loginForm = document.getElementById('login-form'); |
| const mobileInput = document.getElementById('mobile'); |
| const mobileError = document.getElementById('mobile-error'); |
| const otpSection = document.getElementById('otp-section'); |
| const otpInput = document.getElementById('otp'); |
| const otpError = document.getElementById('otp-error'); |
| const loginBtn = document.getElementById('login-btn'); |
| const resendOtp = document.getElementById('resend-otp'); |
| const countdown = document.getElementById('countdown'); |
| |
| const sidebar = document.getElementById('sidebar'); |
| const sidebarToggle = document.getElementById('sidebar-toggle'); |
| const overlay = document.getElementById('overlay'); |
| |
| const logoutBtnSidebar = document.getElementById('logout-btn-sidebar'); |
| const logoutBtnProfile = document.getElementById('logout-btn-profile'); |
| const logoutModal = document.getElementById('logout-modal'); |
| const cancelLogout = document.getElementById('cancel-logout'); |
| const confirmLogout = document.getElementById('confirm-logout'); |
| |
| const bannerSlider = document.getElementById('banner-slider'); |
| const dots = document.querySelectorAll('.dot'); |
| |
| const accordionBtns = document.querySelectorAll('.accordion-btn'); |
| |
| |
| const loanAmount = document.getElementById('loan-amount'); |
| const loanAmountSlider = document.getElementById('loan-amount-slider'); |
| const interestRate = document.getElementById('interest-rate'); |
| const interestRateSlider = document.getElementById('interest-rate-slider'); |
| const loanTenure = document.getElementById('loan-tenure'); |
| const loanTenureSlider = document.getElementById('loan-tenure-slider'); |
| const calculateEmiBtn = document.getElementById('calculate-emi'); |
| const emiResult = document.getElementById('emi-result'); |
| const monthlyEmi = document.getElementById('monthly-emi'); |
| const totalInterest = document.getElementById('total-interest'); |
| const totalPayment = document.getElementById('total-payment'); |
| const paymentSchedule = document.getElementById('payment-schedule'); |
| |
| |
| function showPage(pageId) { |
| landingPage.classList.add('hidden'); |
| profilePage.classList.add('hidden'); |
| emiCalculatorPage.classList.add('hidden'); |
| |
| document.getElementById(pageId).classList.remove('hidden'); |
| |
| |
| document.getElementById('main-footer').classList.remove('hidden'); |
| } |
| |
| |
| loginForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| if (!otpSection.classList.contains('hidden')) { |
| |
| if (!otpInput.value.match(/^[0-9]{6}$/)) { |
| otpError.classList.remove('hidden'); |
| otpInput.classList.add('border-red-500'); |
| otpInput.classList.add('input-highlight'); |
| setTimeout(() => { |
| otpInput.classList.remove('input-highlight'); |
| }, 1000); |
| return; |
| } |
| |
| |
| loginBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Verified!'; |
| loginBtn.classList.add('bg-green-500', 'from-green-500', 'to-green-400'); |
| loginBtn.classList.remove('bg-blue-600', 'from-blue-600', 'to-blue-500'); |
| |
| setTimeout(() => { |
| showPage('landing-page'); |
| startBannerSlider(); |
| }, 1500); |
| } else { |
| |
| if (!mobileInput.value.match(/^[0-9]{10}$/)) { |
| mobileError.classList.remove('hidden'); |
| mobileInput.classList.add('border-red-500'); |
| mobileInput.classList.add('input-highlight'); |
| setTimeout(() => { |
| mobileInput.classList.remove('input-highlight'); |
| }, 1000); |
| return; |
| } |
| |
| |
| otpSection.classList.remove('hidden'); |
| document.getElementById('btn-text').textContent = 'Verify OTP'; |
| document.getElementById('btn-icon').classList.replace('fa-arrow-right', 'fa-check'); |
| mobileError.classList.add('hidden'); |
| |
| |
| startCountdown(); |
| |
| |
| loginForm.style.maxHeight = loginForm.scrollHeight + 'px'; |
| } |
| }); |
| |
| |
| document.getElementById('edit-mobile').addEventListener('click', function() { |
| otpSection.classList.add('hidden'); |
| document.getElementById('btn-text').textContent = 'Continue'; |
| document.getElementById('btn-icon').classList.replace('fa-check', 'fa-arrow-right'); |
| loginForm.style.maxHeight = loginForm.scrollHeight + 'px'; |
| }); |
| |
| |
| mobileInput.addEventListener('focus', function() { |
| this.parentElement.parentElement.classList.add('input-highlight'); |
| }); |
| |
| mobileInput.addEventListener('blur', function() { |
| this.parentElement.parentElement.classList.remove('input-highlight'); |
| }); |
| |
| otpInput.addEventListener('focus', function() { |
| this.parentElement.parentElement.classList.add('input-highlight'); |
| }); |
| |
| otpInput.addEventListener('blur', function() { |
| this.parentElement.parentElement.classList.remove('input-highlight'); |
| }); |
| |
| |
| function startCountdown() { |
| let timeLeft = 30; |
| resendOtp.disabled = true; |
| |
| const timer = setInterval(() => { |
| timeLeft--; |
| countdown.textContent = timeLeft; |
| |
| if (timeLeft <= 0) { |
| clearInterval(timer); |
| resendOtp.disabled = false; |
| countdown.textContent = ''; |
| resendOtp.innerHTML = 'Resend OTP'; |
| } |
| }, 1000); |
| } |
| |
| resendOtp.addEventListener('click', function() { |
| startCountdown(); |
| this.innerHTML = 'Resend OTP in <span id="countdown">30</span>s'; |
| }); |
| |
| |
| function toggleSidebar() { |
| const sidebar = document.getElementById('sidebar'); |
| const overlay = document.getElementById('overlay'); |
| |
| sidebar.classList.toggle('sidebar-hidden'); |
| sidebar.classList.toggle('sidebar-visible'); |
| overlay.classList.toggle('hidden'); |
| |
| if (sidebar.classList.contains('sidebar-visible')) { |
| sidebar.classList.add('animate-slideIn'); |
| sidebar.classList.remove('animate-slideOut'); |
| } else { |
| sidebar.classList.add('animate-slideOut'); |
| sidebar.classList.remove('animate-slideIn'); |
| } |
| } |
| |
| overlay.addEventListener('click', function(e) { |
| e.stopPropagation(); |
| sidebar.classList.add('sidebar-hidden'); |
| sidebar.classList.remove('sidebar-visible'); |
| sidebar.classList.add('animate-slideOut'); |
| sidebar.classList.remove('animate-slideIn'); |
| overlay.classList.add('hidden'); |
| }); |
| |
| |
| function openLogoutModal() { |
| logoutModal.classList.remove('modal-hidden'); |
| logoutModal.classList.add('modal-visible'); |
| overlay.classList.remove('hidden'); |
| } |
| |
| function closeLogoutModal() { |
| logoutModal.classList.remove('modal-visible'); |
| logoutModal.classList.add('modal-hidden'); |
| overlay.classList.add('hidden'); |
| } |
| |
| logoutBtnSidebar.addEventListener('click', function(e) { |
| e.preventDefault(); |
| openLogoutModal(); |
| }); |
| |
| logoutBtnProfile.addEventListener('click', function(e) { |
| e.preventDefault(); |
| openLogoutModal(); |
| }); |
| |
| cancelLogout.addEventListener('click', closeLogoutModal); |
| |
| confirmLogout.addEventListener('click', function() { |
| closeLogoutModal(); |
| showPage('login-page'); |
| loginForm.reset(); |
| otpSection.classList.add('hidden'); |
| loginBtn.textContent = 'Continue'; |
| }); |
| |
| |
| function startBannerSlider() { |
| let currentSlide = 0; |
| |
| |
| function updateDots() { |
| dots.forEach((dot, index) => { |
| if (index === currentSlide) { |
| dot.classList.add('active'); |
| } else { |
| dot.classList.remove('active'); |
| } |
| }); |
| } |
| |
| |
| setInterval(() => { |
| currentSlide = (currentSlide + 1) % 3; |
| bannerSlider.scrollTo({ |
| left: currentSlide * bannerSlider.offsetWidth, |
| behavior: 'smooth' |
| }); |
| updateDots(); |
| }, 5000); |
| |
| |
| dots.forEach(dot => { |
| dot.addEventListener('click', function() { |
| currentSlide = parseInt(this.getAttribute('data-index')); |
| bannerSlider.scrollTo({ |
| left: currentSlide * bannerSlider.offsetWidth, |
| behavior: 'smooth' |
| }); |
| updateDots(); |
| }); |
| }); |
| } |
| |
| |
| accordionBtns.forEach(btn => { |
| btn.addEventListener('click', function() { |
| const content = this.nextElementSibling; |
| const icon = this.querySelector('i'); |
| |
| content.classList.toggle('open'); |
| icon.classList.toggle('rotate-180'); |
| }); |
| }); |
| |
| |
| function calculateEMI() { |
| const principal = parseFloat(loanAmount.value); |
| const rate = parseFloat(interestRate.value) / 100 / 12; |
| const time = parseFloat(loanTenure.value) * 12; |
| |
| |
| const emi = principal * rate * Math.pow(1 + rate, time) / (Math.pow(1 + rate, time) - 1); |
| const total = emi * time; |
| const totalInt = total - principal; |
| |
| |
| monthlyEmi.textContent = '₹' + emi.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
| totalInterest.textContent = '₹' + totalInt.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
| totalPayment.textContent = '₹' + total.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
| |
| |
| let scheduleHTML = ''; |
| let balance = principal; |
| |
| for (let year = 1; year <= parseFloat(loanTenure.value); year++) { |
| let yearPrincipal = 0; |
| let yearInterest = 0; |
| |
| for (let month = 1; month <= 12; month++) { |
| if (balance <= 0) break; |
| |
| const interest = balance * rate; |
| const principalPayment = emi - interest; |
| |
| yearPrincipal += principalPayment; |
| yearInterest += interest; |
| balance -= principalPayment; |
| } |
| |
| scheduleHTML += ` |
| <div class="flex justify-between text-xs"> |
| <span>Year ${year}</span> |
| <span>₹${yearPrincipal.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</span> |
| <span>₹${yearInterest.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</span> |
| <span>₹${balance > 0 ? balance.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '0'}</span> |
| </div> |
| `; |
| } |
| |
| paymentSchedule.innerHTML = scheduleHTML; |
| emiResult.classList.remove('hidden'); |
| } |
| |
| |
| loanAmount.addEventListener('input', function() { |
| loanAmountSlider.value = this.value; |
| }); |
| |
| loanAmountSlider.addEventListener('input', function() { |
| loanAmount.value = this.value; |
| }); |
| |
| interestRate.addEventListener('input', function() { |
| interestRateSlider.value = this.value; |
| }); |
| |
| interestRateSlider.addEventListener('input', function() { |
| interestRate.value = this.value; |
| }); |
| |
| loanTenure.addEventListener('input', function() { |
| loanTenureSlider.value = this.value; |
| }); |
| |
| loanTenureSlider.addEventListener('input', function() { |
| loanTenure.value = this.value; |
| }); |
| |
| calculateEmiBtn.addEventListener('click', calculateEMI); |
| |
| |
| const searchToggle = document.getElementById('search-toggle'); |
| const searchContainer = document.getElementById('search-container'); |
| const searchInput = document.getElementById('search-input'); |
| const searchResults = document.getElementById('search-results'); |
| const logo = document.querySelector('img[alt="Logo"]'); |
| |
| searchToggle.addEventListener('click', function() { |
| searchContainer.classList.toggle('hidden'); |
| logo.classList.toggle('hidden'); |
| }); |
| |
| |
| searchInput.addEventListener('input', function() { |
| if (this.value.length > 0) { |
| searchResults.classList.remove('hidden'); |
| } else { |
| searchResults.classList.add('hidden'); |
| } |
| }); |
| |
| |
| const fabBtn = document.getElementById('fab-btn'); |
| const fabMenu = document.getElementById('fab-menu'); |
| const fabIcon = document.getElementById('fab-icon'); |
| let fabOpen = false; |
| |
| fabBtn.addEventListener('click', function(e) { |
| e.stopPropagation(); |
| |
| |
| const ripple = document.createElement('span'); |
| ripple.className = 'fab-ripple'; |
| const rect = this.getBoundingClientRect(); |
| const size = Math.max(rect.width, rect.height); |
| ripple.style.width = ripple.style.height = size + 'px'; |
| ripple.style.left = e.clientX - rect.left - size/2 + 'px'; |
| ripple.style.top = e.clientY - rect.top - size/2 + 'px'; |
| this.appendChild(ripple); |
| |
| |
| setTimeout(() => { |
| ripple.remove(); |
| }, 300); |
| |
| |
| this.style.transform = 'scale(0.95)'; |
| setTimeout(() => { |
| this.style.transform = 'scale(1)'; |
| this.style.transition = 'transform 0.1s ease-in'; |
| }, 150); |
| |
| fabOpen = !fabOpen; |
| |
| if (fabOpen) { |
| fabMenu.classList.add('active'); |
| fabIcon.classList.replace('fa-plus', 'fa-times'); |
| fabBtn.classList.add('fab-active'); |
| fabBtn.style.boxShadow = '0 8px 20px rgba(33, 150, 243, 0.5)'; |
| } else { |
| fabMenu.classList.remove('active'); |
| fabIcon.classList.replace('fa-times', 'fa-plus'); |
| fabBtn.classList.remove('fab-active'); |
| fabBtn.style.boxShadow = ''; |
| } |
| |
| setTimeout(() => { |
| this.style.transition = ''; |
| }, 250); |
| }); |
| |
| |
| document.addEventListener('click', function(e) { |
| if (fabOpen && !fabMenu.contains(e.target) && e.target !== fabBtn) { |
| fabOpen = false; |
| fabMenu.classList.remove('active'); |
| fabIcon.classList.replace('fa-times', 'fa-plus'); |
| fabBtn.style.transform = ''; |
| fabBtn.style.boxShadow = ''; |
| } |
| }); |
| |
| |
| function animateFab() { |
| fabBtn.style.animation = 'bounce 2s infinite'; |
| setTimeout(() => { |
| fabBtn.style.animation = ''; |
| }, 2000); |
| } |
| |
| |
| setTimeout(animateFab, 1000); |
| setInterval(animateFab, 10000); |
| |
| |
| document.querySelector('.fa-bell').closest('button').addEventListener('click', function() { |
| alert('Notifications feature coming soon!'); |
| }); |
| |
| |
| startBannerSlider(); |
| </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=divyanshushekhar/mobile-template" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
