| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Angular Subscription & Data Hub</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> |
| | <base href="/"> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| | body { |
| | font-family: 'Poppins', sans-serif; |
| | } |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | } |
| | .plan-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); |
| | } |
| | .premium-glow { |
| | box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); |
| | } |
| | .print-area { |
| | display: none; |
| | } |
| | @media print { |
| | body * { |
| | visibility: hidden; |
| | } |
| | .print-area, .print-area * { |
| | visibility: visible; |
| | } |
| | .print-area { |
| | position: absolute; |
| | left: 0; |
| | top: 0; |
| | width: 100%; |
| | display: block; |
| | } |
| | .no-print { |
| | display: none !important; |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50 min-h-screen"> |
| | <app-root></app-root> |
| | |
| | |
| | <script> |
| | feather.replace(); |
| | |
| | // This would be in your Angular components in the real implementation |
| | document.addEventListener('DOMContentLoaded', () => { |
| | // Mock Angular-like behavior for this demo |
| | const appRoot = document.querySelector('app-root'); |
| | |
| | // Navigation |
| | appRoot.innerHTML = ` |
| | <div class="flex flex-col min-h-screen"> |
| | |
| | <header class="gradient-bg text-white shadow-lg"> |
| | <div class="container mx-auto px-4 py-6"> |
| | <div class="flex justify-between items-center"> |
| | <h1 class="text-2xl font-bold flex items-center"> |
| | <i data-feather="zap" class="mr-2"></i> |
| | AngularHub |
| | </h1> |
| | <nav class="hidden md:flex space-x-6"> |
| | <button onclick="showModule('plans')" class="px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition flex items-center"> |
| | <i data-feather="credit-card" class="mr-2"></i> |
| | Subscription Plans |
| | </button> |
| | <button onclick="showModule('data')" class="px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition flex items-center"> |
| | <i data-feather="database" class="mr-2"></i> |
| | API Data Table |
| | </button> |
| | </nav> |
| | <button class="md:hidden" onclick="toggleMobileMenu()"> |
| | <i data-feather="menu"></i> |
| | </button> |
| | </div> |
| | |
| | <div id="mobileMenu" class="hidden md:hidden mt-4 space-y-2"> |
| | <button onclick="showModule('plans')" class="w-full text-left px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition flex items-center"> |
| | <i data-feather="credit-card" class="mr-2"></i> |
| | Subscription Plans |
| | </button> |
| | <button onclick="showModule('data')" class="w-full text-left px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition flex items-center"> |
| | <i data-feather="database" class="mr-2"></i> |
| | API Data Table |
| | </button> |
| | </div> |
| | </div> |
| | </header> |
| | |
| | |
| | <main class="flex-grow container mx-auto px-4 py-8"> |
| | <div id="plansModule"> |
| | |
| | <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Choose Your Plan</h2> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> |
| | |
| | <div class="plan-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> |
| | <div class="p-6"> |
| | <div class="flex justify-between items-start"> |
| | <h3 class="text-xl font-bold text-gray-800">Minimum</h3> |
| | <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Basic</span> |
| | </div> |
| | <p class="text-gray-600 text-sm mt-1">Essentials for Startups</p> |
| | </div> |
| | <div class="px-6 pb-4"> |
| | <p class="text-3xl font-bold text-gray-800">100 <span class="text-lg">BDT</span></p> |
| | <p class="text-gray-600 text-sm mt-1">10 Days Unlimited</p> |
| | </div> |
| | <div class="border-t border-gray-100 px-6 py-4"> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-green-500 mr-2"></i> |
| | <span class="text-gray-600">10 Days Unlimited</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="x" class="text-red-400 mr-2"></i> |
| | <span class="text-gray-600">SMS: OFF</span> |
| | </li> |
| | </ul> |
| | </div> |
| | <div class="px-6 py-4 bg-gray-50"> |
| | <button onclick="selectPlan('minimum')" class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"> |
| | Select Plan |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="plan-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> |
| | <div class="p-6"> |
| | <div class="flex justify-between items-start"> |
| | <h3 class="text-xl font-bold text-gray-800">Regular</h3> |
| | <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Standard</span> |
| | </div> |
| | <p class="text-gray-600 text-sm mt-1">Balanced and Optimized</p> |
| | </div> |
| | <div class="px-6 pb-4"> |
| | <p class="text-3xl font-bold text-gray-800">300 <span class="text-lg">BDT</span></p> |
| | <p class="text-gray-600 text-sm mt-1">15 Days Unlimited</p> |
| | </div> |
| | <div class="border-t border-gray-100 px-6 py-4"> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-green-500 mr-2"></i> |
| | <span class="text-gray-600">15 Days Unlimited</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="x" class="text-red-400 mr-2"></i> |
| | <span class="text-gray-600">SMS: OFF</span> |
| | </li> |
| | </ul> |
| | </div> |
| | <div class="px-6 py-4 bg-gray-50"> |
| | <button onclick="selectPlan('regular')" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition"> |
| | Select Plan |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="plan-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 border-2 border-yellow-400"> |
| | <div class="absolute -top-2 -right-2 bg-yellow-400 text-yellow-800 text-xs font-bold px-2 py-1 rounded-full animate-pulse"> |
| | POPULAR |
| | </div> |
| | <div class="p-6"> |
| | <div class="flex justify-between items-start"> |
| | <h3 class="text-xl font-bold text-gray-800">Popular</h3> |
| | <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Best Value</span> |
| | </div> |
| | <p class="text-gray-600 text-sm mt-1">The Smart Choice for Success!</p> |
| | </div> |
| | <div class="px-6 pb-4"> |
| | <p class="text-3xl font-bold text-gray-800">500 <span class="text-lg">BDT</span></p> |
| | <p class="text-gray-600 text-sm mt-1">30 Days Unlimited</p> |
| | </div> |
| | <div class="border-t border-gray-100 px-6 py-4"> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-green-500 mr-2"></i> |
| | <span class="text-gray-600">30 Days Unlimited</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-green-500 mr-2"></i> |
| | <span class="text-gray-600">415 Free SMS</span> |
| | </li> |
| | </ul> |
| | </div> |
| | <div class="px-6 py-4 bg-gray-50"> |
| | <button onclick="selectPlan('popular')" class="w-full py-2 px-4 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg transition"> |
| | Select Plan |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="plan-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> |
| | <div class="p-6"> |
| | <div class="flex justify-between items-start"> |
| | <h3 class="text-xl font-bold text-gray-800">Enterprise (Monthly)</h3> |
| | <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Premium</span> |
| | </div> |
| | <p class="text-gray-600 text-sm mt-1">Premium Solution</p> |
| | </div> |
| | <div class="px-6 pb-4"> |
| | <p class="text-3xl font-bold text-gray-800">1000 <span class="text-lg">BDT</span></p> |
| | <p class="text-gray-600 text-sm mt-1">30 Days Unlimited</p> |
| | </div> |
| | <div class="border-t border-gray-100 px-6 py-4"> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-green-500 mr-2"></i> |
| | <span class="text-gray-600">30 Days Unlimited</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-green-500 mr-2"></i> |
| | <span class="text-gray-600">850 Free SMS</span> |
| | </li> |
| | </ul> |
| | </div> |
| | <div class="px-6 py-4 bg-gray-50"> |
| | <button onclick="selectPlan('enterprise-monthly')" class="w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg transition"> |
| | Select Plan |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="plan-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 premium-glow"> |
| | <div class="absolute -top-2 -right-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs font-bold px-2 py-1 rounded-full"> |
| | PREMIUM |
| | </div> |
| | <div class="p-6"> |
| | <div class="flex justify-between items-start"> |
| | <h3 class="text-xl font-bold text-gray-800">Enterprise (Yearly)</h3> |
| | <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded-full">Best Offer</span> |
| | </div> |
| | <p class="text-gray-600 text-sm mt-1">Best Value for Long-Term</p> |
| | </div> |
| | <div class="px-6 pb-4"> |
| | <p class="text-3xl font-bold text-gray-800">5000 <span class="text-lg">BDT</span></p> |
| | <p class="text-gray-600 text-sm mt-1">1 Year Unlimited</p> |
| | </div> |
| | <div class="border-t border-gray-100 px-6 py-4"> |
| | <ul class="space-y-2"> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-green-500 mr-2"></i> |
| | <span class="text-gray-600">1 Year Unlimited</span> |
| | </li> |
| | <li class="flex items-center"> |
| | <i data-feather="check" class="text-green-500 mr-2"></i> |
| | <span class="text-gray-600">5000 Free SMS</span> |
| | </li> |
| | </ul> |
| | </div> |
| | <div class="px-6 py-4 bg-gray-50"> |
| | <button onclick="selectPlan('enterprise-yearly')" class="w-full py-2 px-4 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white rounded-lg transition"> |
| | Select Plan |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div id="checkoutSection" class="hidden bg-white rounded-xl shadow-md p-6 max-w-2xl mx-auto"> |
| | <h2 class="text-2xl font-bold text-gray-800 mb-6">Checkout</h2> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div> |
| | <h3 class="text-lg font-semibold text-gray-700 mb-2">Selected Plan</h3> |
| | <div id="selectedPlanInfo" class="bg-gray-50 p-4 rounded-lg"> |
| | |
| | </div> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-lg font-semibold text-gray-700 mb-2">SMS Options</h3> |
| | <div class="bg-gray-50 p-4 rounded-lg"> |
| | <div class="flex items-center justify-between mb-4"> |
| | <div> |
| | <label class="font-medium text-gray-700">SMS Service</label> |
| | <p class="text-sm text-gray-500">Purchase additional SMS</p> |
| | </div> |
| | <label class="relative inline-flex items-center cursor-pointer"> |
| | <input type="checkbox" id="smsToggle" class="sr-only peer" onchange="toggleSms()"> |
| | <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> |
| | </label> |
| | </div> |
| | |
| | <div id="smsOptions" class="hidden"> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Additional SMS (0.60 BDT per SMS)</label> |
| | <input type="number" id="smsQuantity" min="100" step="100" value="500" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" oninput="calculateTotal()"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6 bg-blue-50 p-4 rounded-lg"> |
| | <h3 class="text-lg font-semibold text-gray-700 mb-2">Order Summary</h3> |
| | <div class="flex justify-between items-center mb-2"> |
| | <span class="text-gray-600">Plan Price</span> |
| | <span id="planPrice" class="font-medium">0 BDT</span> |
| | </div> |
| | <div id="smsCostContainer" class="hidden flex justify-between items-center mb-2"> |
| | <span class="text-gray-600">Additional SMS Cost</span> |
| | <span id="smsCost" class="font-medium">0 BDT</span> |
| | </div> |
| | <div class="border-t border-gray-200 pt-2 mt-2"> |
| | <div class="flex justify-between items-center"> |
| | <span class="font-semibold">Total</span> |
| | <span id="totalPrice" class="font-bold text-lg">0 BDT</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6 flex justify-end space-x-3"> |
| | <button onclick="cancelCheckout()" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition"> |
| | Cancel |
| | </button> |
| | <button onclick="processPayment()" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center"> |
| | <i data-feather="credit-card" class="mr-2"></i> |
| | Buy Now |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div id="dataModule" class="hidden"> |
| | |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-3xl font-bold text-gray-800">User Data from API</h2> |
| | <button onclick="printTable()" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition flex items-center"> |
| | <i data-feather="printer" class="mr-2"></i> |
| | Print Table |
| | </button> |
| | </div> |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| | <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| | <div class="flex items-center"> |
| | <input type="text" id="searchInput" placeholder="Search..." class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| | <button onclick="filterTable()" class="ml-2 px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> |
| | <i data-feather="search"></i> |
| | </button> |
| | </div> |
| | <div class="flex items-center"> |
| | <span class="text-sm text-gray-600 mr-2">Sort by:</span> |
| | <select id="sortSelect" onchange="sortTable()" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| | <option value="name">Name</option> |
| | <option value="email">Email</option> |
| | <option value="city">City</option> |
| | </select> |
| | </div> |
| | </div> |
| | |
| | <div class="print-area"> |
| | <table id="dataTable" class="min-w-full divide-y divide-gray-200"> |
| | <thead class="bg-gray-50"> |
| | <tr> |
| | <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> |
| | <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> |
| | <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> |
| | <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">City</th> |
| | <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th> |
| | </tr> |
| | </thead> |
| | <tbody id="tableBody" class="bg-white divide-y divide-gray-200"> |
| | |
| | </tbody> |
| | </table> |
| | </div> |
| | |
| | <div class="p-4 border-t border-gray-200 flex justify-between items-center"> |
| | <div class="text-sm text-gray-600"> |
| | Showing <span id="startRow">1</span> to <span id="endRow">10</span> of <span id="totalRows">50</span> entries |
| | </div> |
| | <div class="flex space-x-2"> |
| | <button onclick="prevPage()" class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-50 transition"> |
| | <i data-feather="chevron-left"></i> |
| | </button> |
| | <button onclick="nextPage()" class="px-3 py-1 border border-gray-300 rounded-md hover:bg-gray-50 transition"> |
| | <i data-feather="chevron-right"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| | |
| | |
| | <footer class="gradient-bg text-white py-8"> |
| | <div class="container mx-auto px-4"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <div class="mb-4 md:mb-0"> |
| | <h2 class="text-xl font-bold flex items-center"> |
| | <i data-feather="zap" class="mr-2"></i> |
| | AngularHub |
| | </h2> |
| | <p class="text-sm mt-1">Subscription & Data Management Solution</p> |
| | </div> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="hover:text-blue-200 transition"> |
| | <i data-feather="github"></i> |
| | </a> |
| | <a href="#" class="hover:text-blue-200 transition"> |
| | <i data-feather="twitter"></i> |
| | </a> |
| | <a href="#" class="hover:text-blue-200 transition"> |
| | <i data-feather="linkedin"></i> |
| | </a> |
| | </div> |
| | </div> |
| | <div class="border-t border-blue-400 mt-6 pt-6 text-center text-sm"> |
| | <p>© 2023 AngularHub. All rights reserved.</p> |
| | </div> |
| | </div> |
| | </footer> |
| | </div> |
| | `; |
| | |
| | // Initialize Feather Icons |
| | feather.replace(); |
| | |
| | // Show plans module by default |
| | showModule('plans'); |
| | |
| | // Load sample data for the table (in a real Angular app, this would be an API call) |
| | loadSampleData(); |
| | }); |
| | |
| | // Mock functions that would be in Angular components/services |
| | function showModule(moduleName) { |
| | document.getElementById('plansModule').classList.add('hidden'); |
| | document.getElementById('dataModule').classList.add('hidden'); |
| | |
| | if (moduleName === 'plans') { |
| | document.getElementById('plansModule').classList.remove('hidden'); |
| | } else { |
| | document.getElementById('dataModule').classList.remove('hidden'); |
| | } |
| | |
| | // Close mobile menu if open |
| | document.getElementById('mobileMenu').classList.add('hidden'); |
| | } |
| | |
| | function toggleMobileMenu() { |
| | const menu = document.getElementById('mobileMenu'); |
| | if (menu.classList.contains('hidden')) { |
| | menu.classList.remove('hidden'); |
| | } else { |
| | menu.classList.add('hidden'); |
| | } |
| | } |
| | |
| | // Subscription Plans Module Functions |
| | const plans = { |
| | 'minimum': { |
| | name: 'Minimum', |
| | price: 100, |
| | duration: '10 Days Unlimited', |
| | sms: 'OFF', |
| | tagline: 'Essentials for Startups - Simple, Affordable, and Effective.' |
| | }, |
| | 'regular': { |
| | name: 'Regular', |
| | price: 300, |
| | duration: '15 Days Unlimited', |
| | sms: 'OFF', |
| | tagline: 'Balanced and Optimized - Perfect for Growing Businesses.' |
| | }, |
| | 'popular': { |
| | name: 'Popular', |
| | price: 500, |
| | duration: '30 Days Unlimited', |
| | sms: '415 Free SMS', |
| | tagline: 'The Smart Choice for Success! Our Most Popular Plan.' |
| | }, |
| | 'enterprise-monthly': { |
| | name: 'Enterprise (Monthly)', |
| | price: 1000, |
| | duration: '30 Days Unlimited', |
| | sms: '850 Free SMS', |
| | tagline: 'Premium Solution for Enterprises.' |
| | }, |
| | 'enterprise-yearly': { |
| | name: 'Enterprise (Yearly)', |
| | price: 5000, |
| | duration: '1 Year Unlimited', |
| | sms: '5000 Free SMS', |
| | tagline: 'Best Value for Long-Term Growth.' |
| | } |
| | }; |
| | |
| | let selectedPlan = null; |
| | let smsEnabled = false; |
| | let smsQuantity = 500; |
| | |
| | function selectPlan(planId) { |
| | selectedPlan = plans[planId]; |
| | |
| | // Update selected plan info |
| | const planInfoDiv = document.getElementById('selectedPlanInfo'); |
| | planInfoDiv.innerHTML = ` |
| | <h4 class="font-bold text-lg">${selectedPlan.name}</h4> |
| | <p class="text-gray-600">${selectedPlan.tagline}</p> |
| | <div class="mt-2 flex justify-between"> |
| | <span class="text-gray-700">Price:</span> |
| | <span class="font-medium">${selectedPlan.price} BDT</span> |
| | </div> |
| | <div class="flex justify-between"> |
| | <span class="text-gray-700">Duration:</span> |
| | <span class="font-medium">${selectedPlan.duration}</span> |
| | </div> |
| | <div class="flex justify-between"> |
| | <span class="text-gray-700">SMS:</span> |
| | <span class="font-medium">${selectedPlan.sms}</span> |
| | </div> |
| | `; |
| | |
| | // Show checkout section |
| | document.getElementById('checkoutSection').classList.remove('hidden'); |
| | |
| | // Update prices |
| | calculateTotal(); |
| | |
| | // Scroll to checkout |
| | document.getElementById('checkoutSection').scrollIntoView({ behavior: 'smooth' }); |
| | } |
| | |
| | function toggleSms() { |
| | smsEnabled = !smsEnabled; |
| | const smsOptions = document.getElementById('smsOptions'); |
| | const smsCostContainer = document.getElementById('smsCostContainer'); |
| | |
| | if (smsEnabled) { |
| | smsOptions.classList.remove('hidden'); |
| | smsCostContainer.classList.remove('hidden'); |
| | } else { |
| | smsOptions.classList.add('hidden'); |
| | smsCostContainer.classList.add('hidden'); |
| | } |
| | |
| | calculateTotal(); |
| | } |
| | |
| | function calculateTotal() { |
| | if (!selectedPlan) return; |
| | |
| | const planPrice = selectedPlan.price; |
| | let total = planPrice; |
| | |
| | document.getElementById('planPrice').textContent = `${planPrice} BDT`; |
| | |
| | if (smsEnabled) { |
| | smsQuantity = parseInt(document.getElementById('smsQuantity').value) || 500; |
| | const smsCost = Math.floor(smsQuantity * 0.6); |
| | document.getElementById('smsCost').textContent = `${smsCost} BDT`; |
| | total += smsCost; |
| | } |
| | |
| | document.getElementById('totalPrice').textContent = `${total} BDT`; |
| | } |
| | |
| | function cancelCheckout() { |
| | document.getElementById('checkoutSection').classList.add('hidden'); |
| | selectedPlan = null; |
| | } |
| | |
| | function processPayment() { |
| | alert('Payment processing would happen here in a real application!'); |
| | // Reset after "payment" |
| | document.getElementById('checkoutSection').classList.add('hidden'); |
| | selectedPlan = null; |
| | } |
| | |
| | // Data Table Module Functions |
| | let currentPage = 1; |
| | const rowsPerPage = 10; |
| | let allData = []; |
| | let filteredData = []; |
| | let sortField = 'name'; |
| | let sortDirection = 'asc'; |
| | |
| | function loadSampleData() { |
| | // In a real Angular app, this would be an HTTP GET request to the API |
| | // Mock data for demonstration |
| | allData = [ |
| | { id: 1, name: 'Leanne Graham', email: 'leanne@example.com', city: 'Gwenborough', company: 'Romaguera-Crona' }, |
| | { id: 2, name: 'Ervin Howell', email: 'ervin@example.com', city: 'Wisokyburgh', company: 'Deckow-Crist' }, |
| | { id: 3, name: 'Clementine Bauch', email: 'clementine@example.com', city: 'McKenziehaven', company: 'Romaguera-Jacobson' }, |
| | { id: 4, name: 'Patricia Lebsack', email: 'patricia@example.com', city: 'South Elvis', company: 'Robel-Corkery' }, |
| | { id: 5, name: 'Chelsey Dietrich', email: 'chelsey@example.com', city: 'Roscoeview', company: 'Keebler LLC' }, |
| | { id: 6, name: 'Mrs. Dennis Schulist', email: 'dennis@example.com', city: 'South Christy', company: 'Considine-Lockman' }, |
| | { id: 7, name: 'Kurtis Weissnat', email: 'kurtis@example.com', city: 'Howemouth', company: 'Johns Group' }, |
| | { id: 8, name: 'Nicholas Runolfsdottir V', email: 'nicholas@example.com', city: 'Aliyaview', company: 'Abernathy Group' }, |
| | { id: 9, name: 'Glenna Reichert', email: 'glenna@example.com', city: 'Bartholomebury', company: 'Yost and Sons' }, |
| | { id: 10, name: 'Clementina DuBuque', email: 'clementina@example.com', city: 'Lebsackbury', company: 'Hoeger LLC' }, |
| | { id: 11, name: 'John Doe', email: 'john@example.com', city: 'New York', company: 'ABC Corp' }, |
| | { id: 12, name: 'Jane Smith', email: 'jane@example.com', city: 'Los Angeles', company: 'XYZ Inc' } |
| | ]; |
| | |
| | filteredData = [...allData]; |
| | renderTable(); |
| | } |
| | |
| | function renderTable() { |
| | const tableBody = document.getElementById('tableBody'); |
| | tableBody.innerHTML = ''; |
| | |
| | // Sort data |
| | filteredData.sort((a, b) => { |
| | if (a[sortField] < b[sortField]) return sortDirection === 'asc' ? -1 : 1; |
| | if (a[sortField] > b[sortField]) return sortDirection === 'asc' ? 1 : -1; |
| | return 0; |
| | }); |
| | |
| | // Pagination |
| | const startIdx = (currentPage - 1) * rowsPerPage; |
| | const endIdx = Math.min(startIdx + rowsPerPage, filteredData.length); |
| | const pageData = filteredData.slice(startIdx, endIdx); |
| | |
| | // Update pagination info |
| | document.getElementById('startRow').textContent = startIdx + 1; |
| | document.getElementById('endRow').textContent = endIdx; |
| | document.getElementById('totalRows').textContent = filteredData.length; |
| | |
| | // Render rows |
| | pageData.forEach(item => { |
| | const row = document.createElement('tr'); |
| | row.innerHTML = ` |
| | <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.id}</td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm font-medium text-gray-900">${item.name}</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">${item.email}</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">${item.city}</div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="text-sm text-gray-900">${item.company}</div> |
| | </td> |
| | `; |
| | tableBody.appendChild(row); |
| | }); |
| | |
| | feather.replace(); |
| | } |
| | |
| | function filterTable() { |
| | const searchTerm = document.getElementById('searchInput').value.toLowerCase(); |
| | |
| | if (!searchTerm) { |
| | filteredData = [...allData]; |
| | } else { |
| | filteredData = allData.filter(item => |
| | item.name.toLowerCase().includes(searchTerm) || |
| | item.email.toLowerCase().includes(searchTerm) || |
| | item.city.toLowerCase().includes(searchTerm) || |
| | item.company.toLowerCase().includes(searchTerm) |
| | ); |
| | } |
| | |
| | currentPage = 1; |
| | renderTable(); |
| | } |
| | |
| | function sortTable() { |
| | const sortSelect = document.getElementById('sortSelect'); |
| | sortField = sortSelect.value; |
| | sortDirection = sortDirection === 'asc' ? 'desc' : 'asc'; |
| | renderTable(); |
| | } |
| | |
| | function prevPage() { |
| | if (currentPage > 1) { |
| | currentPage--; |
| | renderTable(); |
| | } |
| | } |
| | |
| | function nextPage() { |
| | const totalPages = Math.ceil(filteredData.length / rowsPerPage); |
| | if (currentPage < totalPages) { |
| | currentPage++; |
| | renderTable(); |
| | } |
| | } |
| | |
| | function printTable() { |
| | window.print(); |
| | } |
| | </script> |
| | </body> |
| | </html> |
| |
|
