Spaces:
Running
Running
| <html lang="en" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EduFlow Nexus | Settings</title> | |
| <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> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4361EE', | |
| secondary: '#3F37C9', | |
| accent: '#4CC9F0', | |
| dark: '#1A1A2E', | |
| light: '#F8F9FA' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .settings-tab { | |
| transition: all 0.2s ease; | |
| } | |
| .settings-tab.active { | |
| border-bottom: 2px solid #4361EE; | |
| color: #4361EE; | |
| } | |
| .switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 44px; | |
| height: 24px; | |
| } | |
| .switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #E5E7EB; | |
| transition: .4s; | |
| border-radius: 24px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 16px; | |
| width: 16px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { | |
| background-color: #4361EE; | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(20px); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-full bg-gray-50"> | |
| <div class="flex h-full"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 h-screen border-r border-gray-200 bg-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <i data-feather="book-open" class="text-primary mr-2"></i> | |
| <span class="text-xl font-bold text-primary">EduFlow</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow p-4 overflow-y-auto"> | |
| <nav class="flex-1 space-y-2"> | |
| <a href="index.html" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="home" class="mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="courses.html" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="book" class="mr-3"></i> | |
| Courses | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="calendar" class="mr-3"></i> | |
| Events | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="briefcase" class="mr-3"></i> | |
| Opportunities | |
| </a> | |
| <a href="bookings.html" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="clock" class="mr-3"></i> | |
| Bookings | |
| </a> | |
| <a href="settings.html" class="sidebar-item active flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-900 bg-gray-50"> | |
| <i data-feather="settings" class="mr-3 text-primary"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img class="w-10 h-10 rounded-full" src="http://static.photos/people/200x200/42" alt="User"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">John Doe</p> | |
| <p class="text-xs font-medium text-gray-500">Student</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Mobile header --> | |
| <header class="md:hidden bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-4 py-3"> | |
| <div class="flex items-center"> | |
| <i data-feather="menu" class="mr-4 cursor-pointer" id="mobile-menu-button"></i> | |
| <span class="text-lg font-bold text-primary">EduFlow</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <i data-feather="bell" class="cursor-pointer"></i> | |
| <span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span> | |
| </div> | |
| <img class="w-8 h-8 rounded-full ml-4" src="http://static.photos/people/200x200/42" alt="User"> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Desktop Header --> | |
| <header class="hidden md:flex items-center justify-between px-8 py-4 bg-white shadow-sm"> | |
| <h1 class="text-2xl font-bold text-gray-800">Settings</h1> | |
| <div class="flex items-center space-x-6"> | |
| <div class="relative"> | |
| <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| <input type="text" placeholder="Search settings..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="relative cursor-pointer"> | |
| <i data-feather="bell"></i> | |
| <span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span> | |
| </div> | |
| <div class="flex items-center"> | |
| <img class="w-8 h-8 rounded-full" src="http://static.photos/people/200x200/42" alt="User"> | |
| <span class="ml-2 text-sm font-medium text-gray-700">John Doe</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-4 md:p-8"> | |
| <!-- Settings Tabs --> | |
| <div class="mb-8 border-b border-gray-200"> | |
| <div class="flex space-x-8"> | |
| <button class="settings-tab active pb-3 text-sm font-medium"> | |
| Account | |
| </button> | |
| <button class="settings-tab pb-3 text-sm font-medium text-gray-500 hover:text-gray-700"> | |
| Notifications | |
| </button> | |
| <button class="settings-tab pb-3 text-sm font-medium text-gray-500 hover:text-gray-700"> | |
| Security | |
| </button> | |
| <button class="settings-tab pb-3 text-sm font-medium text-gray-500 hover:text-gray-700"> | |
| Preferences | |
| </button> | |
| <button class="settings-tab pb-3 text-sm font-medium text-gray-500 hover:text-gray-700"> | |
| Billing | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Account Settings --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-900">Profile Information</h3> | |
| <p class="mt-1 text-sm text-gray-500">Update your account's profile information and email address.</p> | |
| </div> | |
| <div class="p-6"> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label> | |
| <input type="text" id="first-name" value="John" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label> | |
| <input type="text" id="last-name" value="Doe" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" value="john.doe@example.com" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">Bio</label> | |
| <textarea id="bio" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">Computer Science student interested in web development and data science.</textarea> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button type="button" class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 mr-3">Cancel</button> | |
| <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-secondary transition-colors">Save</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Profile Photo --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-900">Profile Photo</h3> | |
| <p class="mt-1 text-sm text-gray-500">Update your profile photo.</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="mr-6"> | |
| <img class="w-20 h-20 rounded-full" src="http://static.photos/people/200x200/42" alt="User"> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 border border-primary text-primary rounded-lg text-sm font-medium hover:bg-primary hover:text-white transition-colors"> | |
| Change | |
| </button> | |
| <button class="px-4 py-2 border border-red-500 text-red-500 rounded-lg text-sm font-medium hover:bg-red-500 hover:text-white transition-colors"> | |
| Remove | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Delete Account --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-900">Delete Account</h3> | |
| <p class="mt-1 text-sm text-gray-500">Once your account is deleted, all of its resources and data will be permanently deleted.</p> | |
| </div> | |
| <div class="p-6"> | |
| <button class="px-4 py-2 border border-red-500 text-red-500 rounded-lg text-sm font-medium hover:bg-red-500 hover:text-white transition-colors"> | |
| Delete Account | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Mobile sidebar toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| document.getElementById('mobile-sidebar').classList.remove('hidden'); | |
| }); | |
| document.getElementById('mobile-sidebar-backdrop').addEventListener('click', function() { | |
| document.getElementById('mobile-sidebar').classList.add('hidden'); | |
| }); | |
| // Settings tabs | |
| const settingsTabs = document.querySelectorAll('.settings-tab'); | |
| settingsTabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| settingsTabs.forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |