Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Settings | CommunityPulse Hub</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex flex-col"> | |
| <custom-navbar></custom-navbar> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="mb-8"> | |
| <h1 class="text-2xl font-bold text-gray-800">Community Settings</h1> | |
| <p class="text-gray-600">Configure your community parameters and preferences</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <button id="generalTab" class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-primary-500 text-primary-600"> | |
| General | |
| </button> | |
| <button id="duesTab" class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> | |
| Dues Settings | |
| </button> | |
| <button id="membershipTab" class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> | |
| Membership | |
| </button> | |
| <button id="notificationsTab" class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> | |
| Notifications | |
| </button> | |
| <button id="securityTab" class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> | |
| Security | |
| </button> | |
| </nav> | |
| </div> | |
| <div class="p-6"> | |
| <!-- General Settings --> | |
| <div id="generalSettings" class="space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Community Information</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="communityName" class="block text-sm font-medium text-gray-700 mb-1">Community Name</label> | |
| <input type="text" id="communityName" name="communityName" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="United Tagaligtas Eagles Club"> | |
| </div> | |
| <div> | |
| <label for="communityType" class="block text-sm font-medium text-gray-700 mb-1">Community Type</label> | |
| <select id="communityType" name="communityType" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"> | |
| <option>Fraternal Organization</option> | |
| <option>Social Club</option> | |
| <option>Professional Association</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="communityDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="communityDescription" name="communityDescription" rows="3" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm">Your centralized platform for brotherhood management, finances, and member engagement</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Logo</label> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-16 w-16 rounded-full overflow-hidden bg-gray-100"> | |
| <img src="http://static.photos/people/1200x630/1" alt="Community logo" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Change | |
| </button> | |
| <button class="ml-2 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-5 border-t border-gray-200"> | |
| <div class="flex justify-end"> | |
| <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Cancel | |
| </button> | |
| <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dues Settings (hidden by default) --> | |
| <div id="duesSettings" class="hidden space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Dues Configuration</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="duesAmount" class="block text-sm font-medium text-gray-700 mb-1">Monthly Dues Amount</label> | |
| <div class="mt-1 relative rounded-md shadow-sm"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500 sm:text-sm">₱</span> | |
| </div> | |
| <input type="number" id="duesAmount" name="duesAmount" class="block w-full pl-7 pr-12 border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="2500"> | |
| <div class="absolute inset-y-0 right-0 flex items-center"> | |
| <label for="currency" class="sr-only">Currency</label> | |
| <span class="text-gray-500 sm:text-sm pr-3">PHP</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="duesDay" class="block text-sm font-medium text-gray-700 mb-1">Due Date</label> | |
| <select id="duesDay" name="duesDay" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"> | |
| <option value="1" selected>1st of the Month</option> | |
| <option value="15">15th of the Month</option> | |
| <option value="last">Last Day of Month</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Late Payment Policy</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label for="gracePeriod" class="block text-sm font-medium text-gray-700 mb-1">Grace Period (days)</label> | |
| <input type="number" id="gracePeriod" name="gracePeriod" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="7"> | |
| </div> | |
| <div> | |
| <label for="lateFee" class="block text-sm font-medium text-gray-700 mb-1">Late Fee</label> | |
| <div class="mt-1 relative rounded-md shadow-sm"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500 sm:text-sm">₱</span> | |
| </div> | |
| <input type="number" id="lateFee" name="lateFee" class="block w-full pl-7 pr-12 border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="lateFeeType" class="block text-sm font-medium text-gray-700 mb-1">Late Fee Type</label> | |
| <select id="lateFeeType" name="lateFeeType" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"> | |
| <option value="fixed" selected>Fixed Amount</option> | |
| <option value="percentage">Percentage of Dues</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Payment Methods</label> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="bankTransfer" name="bankTransfer" type="checkbox" checked class="focus:ring-primary-500 h-4 w-4 text-primary-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="bankTransfer" class="font-medium text-gray-700">Bank Transfer</label> | |
| <p class="text-gray-500">Allow members to pay via bank transfer</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="gcash" name="gcash" type="checkbox" checked class="focus:ring-primary-500 h-4 w-4 text-primary-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="gcash" class="font-medium text-gray-700">GCash</label> | |
| <p class="text-gray-500">Allow members to pay via GCash</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="paypal" name="paypal" type="checkbox" class="focus:ring-primary-500 h-4 w-4 text-primary-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="paypal" class="font-medium text-gray-700">PayPal</label> | |
| <p class="text-gray-500">Allow members to pay via PayPal</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="cash" name="cash" type="checkbox" checked class="focus:ring-primary-500 h-4 w-4 text-primary-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="cash" class="font-medium text-gray-700">Cash</label> | |
| <p class="text-gray-500">Allow members to pay in person with cash</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-5 border-t border-gray-200"> | |
| <div class="flex justify-end"> | |
| <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Cancel | |
| </button> | |
| <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Membership Settings (hidden by default) --> | |
| <div id="membershipSettings" class="hidden space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Membership Requirements</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="applicationFee" class="block text-sm font-medium text-gray-700 mb-1">Application Fee</label> | |
| <div class="mt-1 relative rounded-md shadow-sm"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500 sm:text-sm">₱</span> | |
| </div> | |
| <input type="number" id="applicationFee" name="applicationFee" class="block w-full pl-7 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="1000"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="membershipApproval" class="block text-sm font-medium text-gray-700 mb-1">Membership Approval</label> | |
| <select id="membershipApproval" name="membershipApproval" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"> | |
| <option value="automatic">Automatic</option> | |
| <option value="board" selected>Board Approval Required</option> | |
| <option value="vote">Member Vote Required</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="minimumAge" class="block text-sm font-medium text-gray-700 mb-1">Minimum Age</label> | |
| <input type="number" id="minimumAge" name="minimumAge" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="18"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Member Roles</h3> | |
| <p class="text-sm text-gray-500 mb-4">Configure the roles available in your community and their permissions.</p> | |
| <div class="overflow-x-auto"> | |
| <table 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">Role</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Permissions</th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="font-medium text-gray-900">President</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Community leader</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Full access</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-500 hover:text-blue-700">Edit</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="font-medium text-gray-900">Treasurer</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Manages finances</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Financial access</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-500 hover:text-blue-700">Edit</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="font-medium text-gray-900">Secretary</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Manages records</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Member management</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-500 hover:text-blue-700">Edit</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="font-medium text-gray-900">Member</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Regular member</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Basic access</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-500 hover:text-blue-700">Edit</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="pt-5 border-t border-gray-200"> | |
| <div class="flex justify-end"> | |
| <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Cancel | |
| </button> | |
| <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notification Settings (hidden by default) --> | |
| <div id="notificationSettings" class="hidden space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Email Notifications</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="paymentReminders" name="paymentReminders" type="checkbox" checked class="focus:ring-primary-500 h-4 w-4 text-primary-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="paymentReminders" class="font-medium text-gray-700">Payment Reminders</label> | |
| <p class="text-gray-500">Send reminders when dues payments are upcoming or overdue</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="paymentConfirmations" name="paymentConfirmations" type="checkbox" checked class="focus:ring-primary-500 h-4 w-4 text-primary-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="paymentConfirmations" class="font-medium text-gray-700">Payment Confirmations</label> | |
| <p class="text-gray-500">Send confirmations when payments are received</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="eventInvitations" name="eventInvitations" type="checkbox" checked class="focus:ring-primary-500 h-4 w-4 text-primary-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="eventInvitations" class="font-medium text-gray-700">Event Invitations</label> | |
| <p class="text-gray-500">Notify members about upcoming events</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="communityAnnouncements" name="communityAnnouncements" type="checkbox" checked class="focus:ring-primary-500 h-4 w-4 text-primary-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="communityAnnouncements" class="font-medium text-gray-700">Community Announcements</label> | |
| <p class="text-gray-500">Send important community updates and news</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Notification Schedule</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label for="reminderDaysBefore" class="block text-sm font-medium text-gray-700 mb-1">Reminder (days before due)</label> | |
| <input type="number" id="reminderDaysBefore" name="reminderDaysBefore" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="3"> | |
| </div> | |
| <div> | |
| <label for="lateNoticeDaysAfter" class="block text-sm font-medium text-gray-700 mb-1">Late Notice (days after due)</label> | |
| <input type="number" id="lateNoticeDaysAfter" name="lateNoticeDaysAfter" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" value="7"> | |
| </div> | |
| <div> | |
| <label for="followUpFrequency" class="block text-sm font-medium text-gray-700 mb-1">Follow-up Frequency</label> | |
| <select id="followUpFrequency" name="followUpFrequency" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"> | |
| <option value="weekly">Weekly</option> | |
| <option value="biweekly" selected>Bi-weekly</option> | |
| <option value="monthly">Monthly</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-5 border-t border-gray-200"> | |
| <div class="flex justify-end"> | |
| <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Cancel | |
| </button> | |
| <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Security Settings (hidden by default) --> | |
| <div id="securitySettings" class="hidden space-y-6"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Authentication</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="passwordComplexity" class="block text-sm font-medium text-gray-700 mb-1">Password Complexity</label> | |
| <select id="passwordComplexity" name="passwordComplexity" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"> | |
| <option value="low">Low (6+ characters)</option> | |
| <option value="medium" selected>Medium (8+ characters with mix)</option> | |
| <option value="high">High (10+ characters with special)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="sessionTimeout" class="block text-sm font-medium text-gray-700 mb-1">Session Timeout</label> | |
| <select id="sessionTimeout" name="sessionTimeout" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"> | |
| <option value="15">15 minutes</option> | |
| <option value="30">30 minutes</option> | |
| <option value="60" selected>1 hour</option> | |
| <option value="120">2 hours</option> | |
| <option value="0">Until logout</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="twoFactorAuth" class="block text-sm font-medium text-gray-700 mb-1">Two-Factor Authentication</label> | |
| <select id="twoFactorAuth" name="twoFactorAuth" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"> | |
| <option value="none">Not required</option> | |
| <option value="admin" selected>Required for admins</option> | |
| <option value="all">Required for all users</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Data Privacy</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="gdprCompliance" name="gdprCompliance" type="checkbox" checked class="focus:ring-primary-500 h-4 w-4 text-primary-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="gdprCompliance" class="font-medium text-gray-700">GDPR Compliance</label> | |
| <p class="text-gray-500">Enable GDPR compliance features including data access requests</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="dataRetention" name="dataRetention" type="checkbox" checked class="focus:ring-primary-500 h-4 w-4 text-primary-500 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="dataRetention" class="font-medium text-gray-700">Data Retention Policy</label> | |
| <p class="text-gray-500">Automatically delete inactive accounts after 2 years</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-5 border-t border-gray-200"> | |
| <div class="flex justify-end"> | |
| <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Cancel | |
| </button> | |
| <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| // Tab switching functionality | |
| document.getElementById('generalTab').addEventListener('click', function() { | |
| document.getElementById('generalSettings').classList.remove('hidden'); | |
| document.getElementById('duesSettings').classList.add('hidden'); | |
| document.getElementById('membershipSettings').classList.add('hidden'); | |
| document.getElementById('notificationSettings').classList.add('hidden'); | |
| document.getElementById('securitySettings').classList.add('hidden'); | |
| document.getElementById('generalTab').classList.add('border-primary-500', 'text-primary-600'); | |
| document.getElementById('generalTab').classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| ['duesTab', 'membershipTab', 'notificationsTab', 'securityTab'].forEach(tabId => { | |
| document.getElementById(tabId).classList.remove('border-primary-500', 'text-primary-600'); | |
| document.getElementById(tabId).classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| }); | |
| }); | |
| document.getElementById('duesTab').addEventListener('click', function() { | |
| document.getElementById('generalSettings').classList.add('hidden'); | |
| document.getElementById('duesSettings').classList.remove('hidden'); | |
| document.getElementById('membershipSettings').classList.add('hidden'); | |
| document.getElementById('notificationSettings').classList.add('hidden'); | |
| document.getElementById('securitySettings').classList.add('hidden'); | |
| document.getElementById('duesTab').classList.add('border-primary-500', 'text-primary-600'); | |
| document.getElementById('duesTab').classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| ['generalTab', 'membershipTab', 'notificationsTab', 'securityTab'].forEach(tabId => { | |
| document.getElementById(tabId).classList.remove('border-primary-500', 'text-primary-600'); | |
| document.getElementById(tabId).classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| }); | |
| }); | |
| document.getElementById('membershipTab').addEventListener('click', function() { | |
| document.getElementById('generalSettings').classList.add('hidden'); | |
| document.getElementById('duesSettings').classList.add('hidden'); | |
| document.getElementById('membershipSettings').classList.remove('hidden'); | |
| document.getElementById('notificationSettings').classList.add('hidden'); | |
| document.getElementById('securitySettings').classList.add('hidden'); | |
| document.getElementById('membershipTab').classList.add('border-primary-500', 'text-primary-600'); | |
| document.getElementById('membershipTab').classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| ['generalTab', 'duesTab', 'notificationsTab', 'securityTab'].forEach(tabId => { | |
| document.getElementById(tabId).classList.remove('border-primary-500', 'text-primary-600'); | |
| document.getElementById(tabId).classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| }); | |
| }); | |
| document.getElementById('notificationsTab').addEventListener('click', function() { | |
| document.getElementById('generalSettings').classList.add('hidden'); | |
| document.getElementById('duesSettings').classList.add('hidden'); | |
| document.getElementById('membershipSettings').classList.add('hidden'); | |
| document.getElementById('notificationSettings').classList.remove('hidden'); | |
| document.getElementById('securitySettings').classList.add('hidden'); | |
| document.getElementById('notificationsTab').classList.add('border-primary-500', 'text-primary-600'); | |
| document.getElementById('notificationsTab').classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| ['generalTab', 'duesTab', 'membershipTab', 'securityTab'].forEach(tabId => { | |
| document.getElementById(tabId).classList.remove('border-primary-500', 'text-primary-600'); | |
| document.getElementById(tabId).classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| }); | |
| }); | |
| document.getElementById('securityTab').addEventListener('click', function() { | |
| document.getElementById('generalSettings').classList.add('hidden'); | |
| document.getElementById('duesSettings').classList.add('hidden'); | |
| document.getElementById('membershipSettings').classList.add('hidden'); | |
| document.getElementById('notificationSettings').classList.add('hidden'); | |
| document.getElementById('securitySettings').classList.remove('hidden'); | |
| document.getElementById('securityTab').classList.add('border-primary-500', 'text-primary-600'); | |
| document.getElementById('securityTab').classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| ['generalTab', 'duesTab', 'membershipTab', 'notificationsTab'].forEach(tabId => { | |
| document.getElementById(tabId).classList.remove('border-primary-500', 'text-primary-600'); | |
| document.getElementById(tabId).classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| }); | |
| }); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |