Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Settings Menu</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> | |
| .settings-transition { | |
| transition: all 0.3s ease; | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| background-color: #4f46e5; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #a5b4fc; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #c7d2fe; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #a5b4fc; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-white shadow-lg hidden md:block"> | |
| <div class="p-6"> | |
| <h1 class="text-2xl font-bold text-indigo-600 flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </h1> | |
| <div class="mt-8"> | |
| <div class="space-y-1"> | |
| <button onclick="openTab(event, 'account')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-indigo-700 bg-indigo-50"> | |
| <i class="fas fa-user-circle mr-3"></i> Account | |
| </button> | |
| <button onclick="openTab(event, 'notifications')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-bell mr-3"></i> Notifications | |
| </button> | |
| <button onclick="openTab(event, 'privacy')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-lock mr-3"></i> Privacy | |
| </button> | |
| <button onclick="openTab(event, 'appearance')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-palette mr-3"></i> Appearance | |
| </button> | |
| <button onclick="openTab(event, 'language')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-language mr-3"></i> Language | |
| </button> | |
| <button onclick="openTab(event, 'help')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-question-circle mr-3"></i> Help | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile header --> | |
| <div class="md:hidden w-full bg-white shadow-sm p-4 flex justify-between items-center"> | |
| <h1 class="text-xl font-bold text-indigo-600 flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </h1> | |
| <button id="mobileMenuButton" class="text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile sidebar (hidden by default) --> | |
| <div id="mobileSidebar" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden"> | |
| <div class="absolute left-0 top-0 h-full w-64 bg-white shadow-lg settings-transition transform -translate-x-full"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-indigo-600 flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </h1> | |
| <button id="closeMobileMenu" class="text-gray-600"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-1"> | |
| <button onclick="openTab(event, 'account')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-indigo-700 bg-indigo-50"> | |
| <i class="fas fa-user-circle mr-3"></i> Account | |
| </button> | |
| <button onclick="openTab(event, 'notifications')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-bell mr-3"></i> Notifications | |
| </button> | |
| <button onclick="openTab(event, 'privacy')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-lock mr-3"></i> Privacy | |
| </button> | |
| <button onclick="openTab(event, 'appearance')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-palette mr-3"></i> Appearance | |
| </button> | |
| <button onclick="openTab(event, 'language')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-language mr-3"></i> Language | |
| </button> | |
| <button onclick="openTab(event, 'help')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-question-circle mr-3"></i> Help | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 overflow-auto custom-scrollbar"> | |
| <div class="p-6 md:p-10"> | |
| <!-- Account Settings --> | |
| <div id="account" class="tab-content active"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-user-circle mr-3 text-indigo-600"></i> Account Settings | |
| </h2> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row items-center mb-8"> | |
| <div class="w-24 h-24 rounded-full bg-indigo-100 flex items-center justify-center mb-4 md:mb-0 md:mr-6"> | |
| <i class="fas fa-user text-4xl text-indigo-600"></i> | |
| </div> | |
| <div class="flex-1 text-center md:text-left"> | |
| <h3 class="text-lg font-semibold text-gray-800">John Doe</h3> | |
| <p class="text-gray-600">[email protected]</p> | |
| </div> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 mt-4 md:mt-0"> | |
| Change Photo | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label> | |
| <input type="text" value="John" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label> | |
| <input type="text" value="Doe" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" value="[email protected]" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label> | |
| <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 h-24">Product designer, photographer and traveler. Currently working at Example Inc.</textarea> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-8"> | |
| <button class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 mr-4"> | |
| Cancel | |
| </button> | |
| <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| Save Changes | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-key mr-2 text-indigo-600"></i> Change Password | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label> | |
| <div class="relative"> | |
| <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 pr-10"> | |
| <button class="absolute right-3 top-2.5 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label> | |
| <div class="relative"> | |
| <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 pr-10"> | |
| <button class="absolute right-3 top-2.5 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Must be at least 8 characters</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label> | |
| <div class="relative"> | |
| <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 pr-10"> | |
| <button class="absolute right-3 top-2.5 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-8"> | |
| <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| Update Password | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notifications Settings --> | |
| <div id="notifications" class="tab-content"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-bell mr-3 text-indigo-600"></i> Notification Settings | |
| </h2> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-indigo-600"></i> Email Notifications | |
| </h3> | |
| <div class="space-y-6"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Product updates</h4> | |
| <p class="text-sm text-gray-600">News about new features and improvements</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="toggle-checkbox sr-only" checked> | |
| <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Security alerts</h4> | |
| <p class="text-sm text-gray-600">Important notifications about your account security</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="toggle-checkbox sr-only" checked> | |
| <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Newsletter</h4> | |
| <p class="text-sm text-gray-600">Weekly digest with curated content</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="toggle-checkbox sr-only"> | |
| <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-mobile-alt mr-2 text-indigo-600"></i> Push Notifications | |
| </h3> | |
| <div class="space-y-6"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Messages</h4> | |
| <p class="text-sm text-gray-600">Get notified when you receive new messages</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="toggle-checkbox sr-only" checked> | |
| <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Reminders</h4> | |
| <p class="text-sm text-gray-600">Daily reminders for important tasks</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="toggle-checkbox sr-only"> | |
| <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Promotions</h4> | |
| <p class="text-sm text-gray-600">Special offers and discounts</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="toggle-checkbox sr-only"> | |
| <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-8"> | |
| <button class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 mr-4"> | |
| Reset | |
| </button> | |
| <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| Save Preferences | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Privacy Settings --> | |
| <div id="privacy" class="tab-content"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-lock mr-3 text-indigo-600"></i> Privacy Settings | |
| </h2> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-user-shield mr-2 text-indigo-600"></i> Account Privacy | |
| </h3> | |
| <div class="space-y-6"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Private Account</h4> | |
| <p class="text-sm text-gray-600">Only approved followers can see your content</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="toggle-checkbox sr-only"> | |
| <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Activity Status</h4> | |
| <p class="text-sm text-gray-600">Show when you were last active</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="toggle-checkbox sr-only" checked> | |
| <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-globe-americas mr-2 text-indigo-600"></i> Data Sharing | |
| </h3> | |
| <div class="space-y-6"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Analytics</h4> | |
| <p class="text-sm text-gray-600">Share usage data to help improve our services</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="toggle-checkbox sr-only" checked> | |
| <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Personalized Ads</h4> | |
| <p class="text-sm text-gray-600">See ads that are more relevant to you</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="toggle-checkbox sr-only"> | |
| <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-database mr-2 text-indigo-600"></i> Data Management | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-2">Download Your Data</h4> | |
| <p class="text-sm text-gray-600 mb-4">Request a copy of all your personal data we store</p> | |
| <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"> | |
| Request Data Download | |
| </button> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-2">Delete Account</h4> | |
| <p class="text-sm text-gray-600 mb-4">Permanently delete your account and all associated data</p> | |
| <button class="px-4 py-2 border border-red-300 text-red-600 rounded-lg hover:bg-red-50"> | |
| Delete Account | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Appearance Settings --> | |
| <div id="appearance" class="tab-content"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-palette mr-3 text-indigo-600"></i> Appearance Settings | |
| </h2> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-moon mr-2 text-indigo-600"></i> Theme | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="border-2 border-indigo-500 rounded-lg p-4 cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-sun text-yellow-500 mr-2"></i> | |
| <span class="font-medium">Light</span> | |
| </div> | |
| <div class="h-24 bg-gray-100 rounded"></div> | |
| </div> | |
| <div class="border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-gray-300"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-moon text-indigo-500 mr-2"></i> | |
| <span class="font-medium">Dark</span> | |
| </div> | |
| <div class="h-24 bg-gray-800 rounded"></div> | |
| </div> | |
| <div class="border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-gray-300"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-adjust text-gray-600 mr-2"></i> | |
| <span class="font-medium">System</span> | |
| </div> | |
| <div class="h-24 bg-gradient-to-r from-gray-100 to-gray-800 rounded"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-tint mr-2 text-indigo-600"></i> Accent Color | |
| </h3> | |
| <div class="grid grid-cols-5 gap-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-500 cursor-pointer border-2 border-indigo-700"></div> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 cursor-pointer hover:border-2 hover:border-blue-700"></div> | |
| <div class="w-10 h-10 rounded-full bg-green-500 cursor-pointer hover:border-2 hover:border-green-700"></div> | |
| <div class="w-10 h-10 rounded-full bg-red-500 cursor-pointer hover:border-2 hover:border-red-700"></div> | |
| <div class="w-10 h-10 rounded-full bg-purple-500 cursor-pointer hover:border-2 hover:border-purple-700"></div> | |
| <div class="w-10 h-10 rounded-full bg-pink-500 cursor-pointer hover:border-2 hover:border-pink-700"></div> | |
| <div class="w-10 h-10 rounded-full bg-yellow-500 cursor-pointer hover:border-2 hover:border-yellow-700"></div> | |
| <div class="w-10 h-10 rounded-full bg-orange-500 cursor-pointer hover:border-2 hover:border-orange-700"></div> | |
| <div class="w-10 h-10 rounded-full bg-gray-500 cursor-pointer hover:border-2 hover:border-gray-700"></div> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 cursor-pointer hover:border-2 hover:border-purple-700"></div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-text-height mr-2 text-indigo-600"></i> Font Size | |
| </h3> | |
| <div class="flex items-center"> | |
| <span class="text-sm mr-2">A</span> | |
| <input type="range" min="12" max="24" value="16" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <span class="text-xl ml-2">A</span> | |
| </div> | |
| <div class="flex justify-end mt-8"> | |
| <button class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 mr-4"> | |
| Reset | |
| </button> | |
| <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| Apply Changes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Language Settings --> | |
| <div id="language" class="tab-content"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-language mr-3 text-indigo-600"></i> Language Settings | |
| </h2> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-globe mr-2 text-indigo-600"></i> App Language | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <span class="text-indigo-600">EN</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">English</h4> | |
| </div> | |
| <i class="fas fa-check text-indigo-600"></i> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3"> | |
| <span class="text-gray-600">ES</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Español</h4> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3"> | |
| <span class="text-gray-600">FR</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Français</h4> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3"> | |
| <span class="text-gray-600">DE</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Deutsch</h4> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3"> | |
| <span class="text-gray-600">JA</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">日本語</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-keyboard mr-2 text-indigo-600"></i> Input Language | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <span class="text-indigo-600">EN</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">English (US)</h4> | |
| <p class="text-sm text-gray-600">QWERTY keyboard</p> | |
| </div> | |
| <i class="fas fa-check text-indigo-600"></i> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3"> | |
| <span class="text-gray-600">EN</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">English (UK)</h4> | |
| <p class="text-sm text-gray-600">QWERTY keyboard</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3"> | |
| <span class="text-gray-600">FR</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">French</h4> | |
| <p class="text-sm text-gray-600">AZERTY keyboard</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-indigo-300 hover:text-indigo-600"> | |
| <i class="fas fa-plus mr-2"></i> Add Input Language | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Help Settings --> | |
| <div id="help" class="tab-content"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-question-circle mr-3 text-indigo-600"></i> Help & Support | |
| </h2> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-book mr-2 text-indigo-600"></i> Help Center | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <h4 class="font-medium">Account Help</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Learn how to manage your account settings and preferences</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-lock text-blue-600"></i> | |
| </div> | |
| <h4 class="font-medium">Privacy & Security</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Understand how we protect your data and privacy</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-bug text-green-600"></i> | |
| </div> | |
| <h4 class="font-medium">Troubleshooting</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Fix common issues and problems</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-question text-purple-600"></i> | |
| </div> | |
| <h4 class="font-medium">FAQs</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Find answers to frequently asked questions</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-headset mr-2 text-indigo-600"></i> Contact Support | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-2">Email Support</h4> | |
| <p class="text-sm text-gray-600 mb-4">Send us an email and we'll get back to you within 24 hours</p> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-envelope mr-2"></i> Email Us | |
| </button> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-2">Live Chat</h4> | |
| <p class="text-sm text-gray-600 mb-4">Chat with a support agent in real-time (available 9AM-5PM)</p> | |
| <button class="px-4 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50"> | |
| <i class="fas fa-comment-dots mr-2"></i> Start Chat | |
| </button> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800 mb-2">Community Forum</h4> | |
| <p class="text-sm text-gray-600 mb-4">Get help from other users in our community</p> | |
| <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"> | |
| <i class="fas fa-users mr-2"></i> Visit Forum | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-info-circle mr-2 text-indigo-600"></i> About | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">App Version</span> | |
| <span class="font-medium">2.4.1</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Last Updated</span> | |
| <span class="font-medium">June 15, 2023</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Terms of Service</span> | |
| <a href="#" class="text-indigo-600 hover:underline">View</a> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Privacy Policy</span> | |
| <a href="#" class="text-indigo-600 hover:underline">View</a> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Open Source Licenses</span> | |
| <a href="#" class="text-indigo-600 hover:underline">View</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab functionality | |
| function openTab(evt, tabName) { | |
| // Hide all tab content | |
| const tabContents = document.getElementsByClassName("tab-content"); | |
| for (let i = 0; i < tabContents.length; i++) { | |
| tabContents[i].classList.remove("active"); | |
| } | |
| // Remove active class from all tab buttons | |
| const tabButtons = document.getElementsByClassName("tab-button"); | |
| for (let i = 0; i < tabButtons.length; i++) { | |
| tabButtons[i].classList.remove("text-indigo-700", "bg-indigo-50"); | |
| tabButtons[i].classList.add("text-gray-600", "hover:bg-gray-100"); | |
| } | |
| // Show the current tab and add active class to the button | |
| document.getElementById(tabName).classList.add("active"); | |
| evt.currentTarget.classList.add("text-indigo-700", "bg-indigo-50"); | |
| evt.currentTarget.classList.remove("text-gray-600", "hover:bg-gray-100"); | |
| // Close mobile menu if open | |
| document.getElementById('mobileSidebar').classList.add('hidden'); | |
| } | |
| // Mobile menu toggle | |
| document.getElementById('mobileMenuButton').addEventListener('click', function() { | |
| document.getElementById('mobileSidebar').classList.remove('hidden'); | |
| setTimeout(() => { | |
| document.querySelector('#mobileSidebar > div').classList.remove('-translate-x-full'); | |
| }, 10); | |
| }); | |
| document.getElementById('closeMobileMenu').addEventListener('click', function() { | |
| document.querySelector('#mobileSidebar > div').classList.add('-translate-x-full'); | |
| setTimeout(() => { | |
| document.getElementById('mobileSidebar').classList.add('hidden'); | |
| }, 300); | |
| }); | |
| // Close mobile menu when clicking outside | |
| document.getElementById('mobileSidebar').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| document.querySelector('#mobileSidebar > div').classList.add('-translate-x-full'); | |
| setTimeout(() => { | |
| document.getElementById('mobileSidebar').classList.add('hidden'); | |
| }, 300); | |
| } | |
| }); | |
| // Initialize first tab as active | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Set first tab button as active | |
| const firstTabButton = document.querySelector('.tab-button'); | |
| if (firstTabButton) { | |
| firstTabButton.classList.add("text-indigo-700", "bg-indigo-50"); | |
| firstTabButton.classList.remove("text-gray-600", "hover:bg-gray-100"); | |
| } | |
| }); | |
| </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=mrpaswan7/setting-page" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |