Spaces:
Running
Running
funns can subscribe, and admin must connect by login and password to add/remove/active,desactive visibility ... - Initial Deployment
14c46b4 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Dashboard - CineVerse</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .stats-card { | |
| background: linear-gradient(135deg, rgba(76, 29, 149, 0.2) 0%, rgba(76, 29, 149, 0.1) 100%); | |
| border: 1px solid rgba(167, 139, 250, 0.2); | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 50px; | |
| height: 24px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #4B5563; | |
| 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: #8B5CF6; | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(26px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 shadow-lg fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <a href="index.html" class="flex items-center space-x-2"> | |
| <i data-feather="film" class="text-purple-500"></i> | |
| <span class="font-bold text-xl">CineVerse</span> | |
| </a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="hover:text-purple-400 transition">Home</a> | |
| <a href="browse.html" class="hover:text-purple-400 transition">Browse</a> | |
| <a href="add-post.html" class="hover:text-purple-400 transition">Add Content</a> | |
| <a href="#" id="logout-btn" class="text-red-400 hover:text-red-300 transition">Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Page Header --> | |
| <div class="pt-32 pb-10 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-4xl font-bold mb-2">Admin Dashboard</h1> | |
| <p class="text-gray-400">Manage content and user subscriptions</p> | |
| </div> | |
| <a href="add-post.html" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-semibold transition flex items-center"> | |
| <i data-feather="plus" class="mr-2 w-4 h-4"></i> Add New | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Overview --> | |
| <section class="py-8"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="stats-card rounded-xl p-6" data-aos="fade-up"> | |
| <div class="flex items-center"> | |
| <div class="p-3 bg-purple-500 bg-opacity-20 rounded-lg mr-4"> | |
| <i data-feather="film" class="w-6 h-6 text-purple-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Total Content</p> | |
| <h3 class="text-2xl font-bold">142</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stats-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center"> | |
| <div class="p-3 bg-blue-500 bg-opacity-20 rounded-lg mr-4"> | |
| <i data-feather="users" class="w-6 h-6 text-blue-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Subscribers</p> | |
| <h3 class="text-2xl font-bold">2,458</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stats-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center"> | |
| <div class="p-3 bg-green-500 bg-opacity-20 rounded-lg mr-4"> | |
| <i data-feather="eye" class="w-6 h-6 text-green-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Active Content</p> | |
| <h3 class="text-2xl font-bold">128</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Content Management --> | |
| <section class="py-8"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Content Management</h2> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">Movies</button> | |
| <button class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">Series</button> | |
| <button class="px-4 py-2 bg-purple-600 rounded-lg">All</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="text-left py-3">Title</th> | |
| <th class="text-left py-3">Type</th> | |
| <th class="text-left py-3">Added</th> | |
| <th class="text-left py-3">Status</th> | |
| <th class="text-right py-3">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-700"> | |
| <td class="py-4">The Dark Horizon</td> | |
| <td class="py-4"> | |
| <span class="bg-purple-600 text-xs px-2 py-1 rounded">Movie</span> | |
| </td> | |
| <td class="py-4">2 days ago</td> | |
| <td class="py-4"> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="p-2 bg-gray-700 rounded hover:bg-gray-600"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 bg-red-600 bg-opacity-20 rounded hover:bg-red-500 hover:bg-opacity-20"> | |
| <i data-feather="trash" class="w-4 h-4 text-red-400"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700"> | |
| <td class="py-4">Midnight Secrets</td> | |
| <td class="py-4"> | |
| <span class="bg-blue-600 text-xs px-2 py-1 rounded">Series</span> | |
| </td> | |
| <td class="py-4">1 week ago</td> | |
| <td class="py-4"> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="p-2 bg-gray-700 rounded hover:bg-gray-600"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 bg-red-600 bg-opacity-20 rounded hover:bg-red-500 hover:bg-opacity-20"> | |
| <i data-feather="trash" class="w-4 h-4 text-red-400"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-700"> | |
| <td class="py-4">Ocean's Depth</td> | |
| <td class="py-4"> | |
| <span class="bg-purple-600 text-xs px-2 py-1 rounded">Movie</span> | |
| </td> | |
| <td class="py-4">3 days ago</td> | |
| <td class="py-4"> | |
| <label class="toggle-switch"> | |
| <input type="checkbox"> | |
| <span class="slider"></span> | |
| </label> | |
| </td> | |
| <td class="py-4 text-right"> | |
| <div class="flex justify-end space-x-2"> | |
| <button class="p-2 bg-gray-700 rounded hover:bg-gray-600"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 bg-red-600 bg-opacity-20 rounded hover:bg-red-500 hover:bg-opacity-20"> | |
| <i data-feather="trash" class="w-4 h-4 text-red-400"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <p class="text-gray-400">Showing 1-10 of 142 items</p> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-700 rounded hover:bg-gray-600 transition">Prev</button> | |
| <button class="px-3 py-1 bg-purple-600 rounded">1</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded hover:bg-gray-600 transition">2</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded hover:bg-gray-600 transition">3</button> | |
| <button class="px-3 py-1 bg-gray-700 rounded hover:bg-gray-600 transition">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 py-12 mt-12"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <a href="index.html" class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="film" class="text-purple-500"></i> | |
| <span class="font-bold text-xl">CineVerse</span> | |
| </a> | |
| <p class="text-gray-400">Discover and share films and series from around the world.</p> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-4">Explore</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="browse.html" class="text-gray-400 hover:text-white transition">Browse All</a></li> | |
| <li><a href="browse.html?filter=category" class="text-gray-400 hover:text-white transition">By Category</a></li> | |
| <li><a href="browse.html?filter=country" class="text-gray-400 hover:text-white transition">By Country</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-4">Contribute</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="add-post.html" class="text-gray-400 hover:text-white transition">Add Content</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Guidelines</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-极4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a> | |
| </极div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2023 CineVerse. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| // Check if admin is logged in | |
| if (localStorage.getItem('adminLoggedIn') !== 'true') { | |
| window.location.href = 'login.html'; | |
| } | |
| // Logout functionality | |
| document.getElementById('logout-btn').addEventListener('click', function() { | |
| localStorage.removeItem('adminLoggedIn'); | |
| window.location.href = 'login.html'; | |
| }); | |
| // Toggle functionality for content visibility | |
| document.querySelectorAll('.toggle-switch input').forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| // This would update the content visibility status in a real app | |
| console.log('Visibility toggled:', this.checked); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |