Hugging Face's logo

Spaces:
Tako12
/
https-huggingface-co-spaces-tako12-railway
Running

App Files Community
https-huggingface-co-spaces-tako12-railway / admin.html
Tako12's picture
Tako12
create another article on page 2 index.html - Follow Up Deployment
15aaca4 verified
Raw History Blame Contribute Delete
17.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard | EntertainBlogs</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.sidebar {
transition: all 0.3s ease;
}
.content {
transition: margin-left 0.3s ease;
}
.table-row {
transition: background-color 0.2s ease;
}
.table-row:hover {
background-color: #f9fafb;
}
</style>
</head>
<body class="bg-gray-100">
<div class="flex">
<!-- Sidebar -->
<aside class="sidebar bg-gray-800 text-white w-64 min-h-screen fixed">
<div class="p-6">
<a href="index.html" class="flex items-center space-x-2 mb-10">
<div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
<i data-feather="book-open" class="text-white"></i>
</div>
<h1 class="text-xl font-bold">CultureVerse</h1>
</a>
<nav>
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center p-3 rounded-lg bg-indigo-700">
<i data-feather="home" class="mr-3"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-700">
<i data-feather="file-text" class="mr-3"></i>
<span>Articles</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-700">
<i data-feather="users" class="mr-3"></i>
<span>Users</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-700">
<i data-feather="bar-chart-2" class="mr-3"></i>
<span>Analytics</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-700">
<i data-feather="settings" class="mr-3"></i>
<span>Settings</span>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- Main Content -->
<main class="content ml-64 flex-1">
<!-- Top Bar -->
<header class="bg-white shadow-sm">
<div class="flex justify-between items-center p-6">
<h2 class="text-2xl font-bold text-gray-800">Admin Dashboard</h2>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-gray-100">
<i data-feather="bell" class="text-gray-600"></i>
</button>
<div class="flex items-center">
<img src="http://static.photos/people/200x200/1" alt="User" class="w-10 h-10 rounded-full">
<span class="ml-3 font-medium text-gray-700">Admin User</span>
</div>
</div>
</div>
</header>
<!-- Stats Cards -->
<section class="p-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white p-6 rounded-xl shadow">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-500">Total Articles</p>
<p class="text-3xl font-bold mt-2">142</p>
</div>
<div class="p-3 bg-indigo-100 rounded-lg">
<i data-feather="file-text" class="text-indigo-600"></i>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-500">Published</p>
<p class="text-3xl font-bold mt-2">128</p>
</div>
<div class="p-3 bg-green-100 rounded-lg">
<i data-feather="check-circle" class="text-green-600"></i>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-500">Drafts</p>
<p class="text-3xl font-bold mt-2">14</p>
</div>
<div class="p-3 bg-yellow-100 rounded-lg">
<i data-feather="edit" class="text-yellow-600"></i>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-500">This Month</p>
<p class="text-3xl font-bold mt-2">24</p>
</div>
<div class="p-3 bg-blue-100 rounded-lg">
<i data-feather="trending-up" class="text-blue-600"></i>
</div>
</div>
</div>
</div>
<!-- Articles Table -->
<div class="bg-white rounded-xl shadow overflow-hidden">
<div class="flex justify-between items-center p-6 border-b">
<h3 class="text-xl font-bold text-gray-800">Recent Articles</h3>
<button class="bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 flex items-center">
<i data-feather="plus" class="mr-2"></i> New Article
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Author</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">The Hidden Gems of Contemporary Literature</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800">Books</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jane Smith</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Published</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">Cinematic Storytelling Evolution</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Movies</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">John Doe</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Published</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 12, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">Complex Characters in Modern TV</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Series</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Emily Johnson</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Draft</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 10, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">Studio Ghibli's Environmental Themes</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-pink-100 text-pink-800">Anime</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Michael Chen</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Published</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 8, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">Narrative Innovation in Indie Games</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Games</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Williams</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Published</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 5, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-white px-6 py-4 border-t flex items-center justify-between">
<div class="text-sm text-gray-500">
Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">142</span> results
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
Previous
</button>
<button class="px-3 py-1 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
Next
</button>
</div>
</div>
</div>
</section>
</main>
</div>
<script>
feather.replace();
</script>
</body>
</html>