| Server : LiteSpeed System : Linux in-mum-web984.main-hosting.eu 4.18.0-553.34.1.lve.el8.x86_64 #1 SMP Thu Jan 9 16:30:32 UTC 2025 x86_64 User : u689097916 ( 689097916) PHP Version : 8.0.30 Disable Function : NONE Directory : /home/u689097916/domains/sicthalassery.in/public_html/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Member Portal | SIC Thalasheri</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
body { font-family: 'Outfit', sans-serif; }
.glass-panel { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
.hero-bg { background: radial-gradient(circle at top right, #ecfdf5 0%, #f8fafc 100%); }
</style>
</head>
<body class="hero-bg min-h-screen flex flex-col p-4">
<div class="flex-grow flex items-center justify-center py-12">
<div class="max-w-4xl w-full grid md:grid-cols-2 gap-8 items-start">
<div class="hidden md:block space-y-6">
<div class="p-6">
<h2 class="text-3xl font-extrabold text-emerald-900 mb-4">About SIC</h2>
<p class="text-sm text-slate-600 leading-relaxed mb-4">
Samastha Islamic Center Thalasheri (KNR/CA/71/2022) is a premier community organization dedicated to social welfare, classical Sunni-Shafi‘i scholarship, and modern educational empowerment. We manage diverse projects including Study Centres, Relief Cells, and De-Addiction facilities to serve the society.
</p>
<h3 class="font-bold text-emerald-800 text-lg mb-2">Member Privileges</h3>
<ul class="text-sm text-slate-500 space-y-2">
<li>• Verified Digital Member Identity</li>
<li>• Priority Scholarship Access</li>
<li>• Conference Hall & Hostel Discounts</li>
</ul>
</div>
<div class="glass-panel rounded-3xl p-6 shadow-sm">
<h4 class="font-bold text-slate-800 mb-2 uppercase text-xs tracking-widest">Connect with Us</h4>
<p class="text-sm text-slate-600">Thalasheri Main Road, Kannur, Kerala</p>
<p class="text-sm text-slate-600 font-bold mt-1">+91 9656858783</p>
<p class="text-sm text-emerald-700 underline mt-1">info@sicthalasheri.in</p>
</div>
</div>
<div class="glass-panel w-full rounded-[2.5rem] shadow-2xl overflow-hidden border border-white">
<div class="bg-emerald-900 p-8 text-white text-center">
<h3 class="text-xl font-bold">Member Portal</h3>
<p class="text-emerald-300 text-xs">Login to manage your membership</p>
</div>
<div class="p-8">
<div id="loginView" class="space-y-4">
<div class="bg-emerald-50 p-3 rounded-xl mb-4 text-[11px] text-emerald-800 border border-emerald-100">
<b>Demo:</b> ID: <span class="font-mono">SIC001</span> | Pass: <span class="font-mono">123</span>
</div>
<input type="text" id="mID" placeholder="Member ID" class="w-full p-4 bg-slate-50 border border-slate-100 rounded-2xl outline-none focus:ring-2 focus:ring-emerald-500">
<input type="password" id="mPass" placeholder="Password" class="w-full p-4 bg-slate-50 border border-slate-100 rounded-2xl outline-none focus:ring-2 focus:ring-emerald-500">
<button onclick="doLogin()" class="w-full bg-emerald-900 text-white font-bold py-4 rounded-2xl hover:shadow-lg transition-all">Verify & Login</button>
</div>
<div id="dashView" class="hidden animate-in fade-in duration-500">
<div class="flex items-center space-x-4 mb-6">
<div class="w-12 h-12 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center font-bold">👤</div>
<div>
<h4 id="uName" class="font-bold text-slate-900 leading-tight">...</h4>
<span id="uID" class="text-xs text-slate-400">...</span>
</div>
</div>
<div class="bg-slate-900 rounded-3xl p-6 text-white mb-6">
<p class="text-[10px] opacity-60">Membership Fee Due</p>
<h5 class="text-3xl font-black mt-1">₹ 500.00</h5>
</div>
<div class="flex items-start mb-6">
<input type="checkbox" id="tcCheck" class="mt-1 w-4 h-4 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500 cursor-pointer">
<label for="tcCheck" class="ml-2 text-[11px] text-slate-500 leading-tight">
I accept the
<button type="button" onclick="toggleModal('paymentModal')" class="text-emerald-700 font-bold underline hover:text-emerald-900 transition">
Payment Terms
</button>
and confirm that I am paying this as a registered member of SIC Thalasheri.
</label>
</div>
<button onclick="payFee()" class="w-full bg-blue-600 text-white font-bold py-4 rounded-2xl hover:bg-blue-700 shadow-lg transition disabled:opacity-50">Pay Securely</button>
</div>
<div id="receiptView" class="hidden text-center animate-in fade-in zoom-in duration-500">
<div class="mb-6">
<div class="w-20 h-20 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm border border-emerald-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
</svg>
</div>
<h4 class="text-2xl font-black text-slate-900 tracking-tight">Payment Successful</h4>
<p class="text-[10px] text-emerald-600 font-bold uppercase tracking-[0.2em] mt-1">Transaction Verified</p>
</div>
<div class="relative bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm mb-6">
<div class="bg-slate-50 px-6 py-3 border-b border-slate-100 flex justify-between items-center">
<span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Official Receipt</span>
<span class="text-[9px] font-bold text-emerald-700 uppercase">SIC Thalasheri</span>
</div>
<div class="p-6 space-y-3 text-left">
<div class="flex justify-between items-center pb-2 border-b border-dashed border-slate-200">
<span class="text-[11px] text-slate-500 font-medium">Member Name</span>
<b id="recName" class="text-sm text-slate-900">...</b>
</div>
<div class="flex justify-between items-center">
<span class="text-[11px] text-slate-500 font-medium">Amount Paid</span>
<b class="text-lg text-emerald-700 font-black">₹ 500.00</b>
</div>
<div class="flex justify-between items-center">
<span class="text-[11px] text-slate-500 font-medium">Transaction ID</span>
<b id="recID" class="text-[11px] font-mono text-slate-900 uppercase">EN17D46D4SD</b>
</div>
<div class="flex justify-between items-center">
<span class="text-[11px] text-slate-500 font-medium">Date & Time</span>
<b id="recDateTime" class="text-[11px] text-slate-900">10/02/2026 05:00 PM</b>
</div>
</div>
<div class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-4 bg-emerald-50 rounded-full border border-slate-200"></div>
<div class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-4 h-4 bg-emerald-50 rounded-full border border-slate-200"></div>
</div>
<div class="space-y-3">
<button onclick="printDiv()" class="w-full bg-emerald-900 text-white font-bold py-4 rounded-2xl shadow-xl shadow-emerald-100 hover:bg-emerald-950 transition-all flex items-center justify-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
<span>Download Digital Receipt</span>
</button>
<button onclick="location.reload()" class="w-full py-3 text-[11px] font-bold text-slate-400 uppercase tracking-widest hover:text-rose-500 transition-colors">
Secure Logout
</button>
<script>
function printDiv() {
var content = document.getElementById("receiptView").innerHTML;
var original = document.body.innerHTML;
document.body.innerHTML = content;
window.print();
document.body.innerHTML = original;
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-white border-t border-slate-100 py-12 px-6">
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
<div class="md:col-span-2">
<h4 class="font-black text-emerald-900 text-xl mb-2 tracking-tighter">SIC THALASHERI</h4>
<p class="text-slate-400 text-xs leading-relaxed max-w-xs uppercase font-bold tracking-widest">Reg No: KNR/CA/71/2022</p>
<p class="text-slate-500 text-sm mt-4">Working for the spiritual and social excellence of Thalasheri through systematic community development.</p>
</div>
<div>
<h5 class="font-bold text-slate-900 text-sm mb-4">Internal Links</h5>
<ul class="text-slate-500 text-sm space-y-2">
<ul class="text-slate-500 text-sm space-y-2">
<li>
<button type="button" onclick="toggleModal('privacyModal')" class="hover:text-emerald-700 transition-colors">
Privacy Policy
</button>
</li>
<li>
<button type="button" onclick="toggleModal('paymentModal')" class="hover:text-emerald-700 transition-colors">
Payment Terms
</button>
</li>
<li><a href="#" class="hover:text-emerald-700">Scholarship Portal</a></li>
</ul>
</div>
<div id="privacyModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
<div class="bg-white max-w-lg w-full rounded-[2.5rem] shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-300">
<div class="bg-emerald-900 p-6 text-white flex justify-between items-center">
<h3 class="font-bold text-lg uppercase tracking-tight">Privacy Policy</h3>
<button onclick="toggleModal('privacyModal')" class="text-white opacity-70 hover:opacity-100 text-2xl">×</button>
</div>
<div class="p-8 overflow-y-auto max-h-[60vh] text-sm text-slate-600 leading-relaxed space-y-4">
<p>At <b>SIC Thalasheri</b>, we value your privacy. This policy outlines how we handle your data:</p>
<ul class="list-disc pl-5 space-y-2">
<li><b>Data Collection:</b> We collect only necessary information such as Name, Member ID, and contact details for institutional records.</li>
<li><b>Usage:</b> Your data is used exclusively for membership verification and sending official updates. We never sell your data to third parties.</li>
<li><b>Security:</b> We implement industry-standard encryption to protect your profile and transaction history.</li>
</ul>
</div>
<div class="p-6 bg-slate-50 text-right">
<button onclick="toggleModal('privacyModal')" class="bg-emerald-800 text-white px-8 py-2 rounded-xl font-bold hover:bg-emerald-900 transition">Close</button>
</div>
</div>
</div>
<div id="paymentModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
<div class="bg-white max-w-lg w-full rounded-[2.5rem] shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-300">
<div class="bg-emerald-900 p-6 text-white flex justify-between items-center">
<h3 class="font-bold text-lg uppercase tracking-tight">Payment Terms</h3>
<button onclick="toggleModal('paymentModal')" class="text-white opacity-70 hover:opacity-100 text-2xl">×</button>
</div>
<div class="p-8 overflow-y-auto max-h-[60vh] text-sm text-slate-600 leading-relaxed space-y-4">
<p>By proceeding with the payment, you agree to the following institutional terms:</p>
<ul class="list-disc pl-5 space-y-2">
<li><b>Fee Finality:</b> Annual membership fees are considered contributions to the organization and are non-refundable.</li>
<li><b>Gateways:</b> Payments are handled by secure third-party providers. SIC is not responsible for local bank network failures.</li>
<li><b>Confirmation:</b> A digital receipt is issued immediately. This serves as official proof of payment for the current session.</li>
</ul>
</div>
<div class="p-6 bg-slate-50 text-right">
<button onclick="toggleModal('paymentModal')" class="bg-emerald-800 text-white px-8 py-2 rounded-xl font-bold hover:bg-emerald-900 transition">I Agree</button>
</div>
</div>
</div>
<div>
<h5 class="font-bold text-slate-900 text-sm mb-4">Contact</h5>
<p class="text-slate-500 text-sm">Thalasheri, Kannur</p>
<p class="text-slate-500 text-sm mt-1">Kerala, 670101</p>
<p class="text-emerald-700 font-bold text-sm mt-4 underline">info@sicthalasheri.in</p>
<p class="text-emerald-700 font-bold text-sm mt-4 underline">+91 9656858783</p>
</div>
</div>
<div class="max-w-6xl mx-auto mt-12 pt-8 border-t border-slate-50 text-center text-[10px] text-slate-400 uppercase tracking-widest font-bold">
© 2026 SAMASTHA ISLAMIC CENTER THALASHERI. All Rights Reserved.
</div>
</footer>
<script>
function toggleModal(modalId) {
const modal = document.getElementById(modalId);
if (modal.classList.contains('hidden')) {
modal.classList.remove('hidden');
modal.classList.add('flex');
} else {
modal.classList.add('hidden');
modal.classList.remove('flex');
}
}
const members = { "SIC001": {name: "Sayyid Sabiq Ali", pass: "123"}, "SIC002": {name: "Mubarak E.", pass: "456"} };
let activeUser = null;
function doLogin() {
const id = document.getElementById('mID').value;
const pw = document.getElementById('mPass').value;
if(members[id] && members[id].pass === pw) {
activeUser = members[id];
document.getElementById('loginView').classList.add('hidden');
document.getElementById('dashView').classList.remove('hidden');
document.getElementById('uName').innerText = activeUser.name;
document.getElementById('uID').innerText = "ID: " + id;
} else { alert("Error: Use SIC001 / 123 for demo."); }
}
function payFee() {
const check = document.getElementById('tcCheck');
if(!check.checked) {
alert("Please accept the Payment Terms and Conditions to proceed.");
return;
}
const btn = event.target;
btn.innerText = "Securing Connection...";
btn.disabled = true;
setTimeout(() => {
document.getElementById('dashView').classList.add('hidden');
document.getElementById('receiptView').classList.remove('hidden');
document.getElementById('recName').innerText = activeUser.name;
document.getElementById('recDate').innerText = new Date().toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' });
}, 1200);
}
</script>
</body>
</html>