|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Modern CMS Dashboard</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> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.content-area { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar-collapsed + .content-area { |
|
|
margin-left: 5rem; |
|
|
} |
|
|
.dropdown:hover .dropdown-menu { |
|
|
display: block; |
|
|
} |
|
|
.content-block { |
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease; |
|
|
} |
|
|
.content-block:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
.wysiwyg-editor { |
|
|
min-height: 300px; |
|
|
border: 1px solid #e2e8f0; |
|
|
border-radius: 0.375rem; |
|
|
padding: 1rem; |
|
|
} |
|
|
.wysiwyg-toolbar { |
|
|
border: 1px solid #e2e8f0; |
|
|
border-bottom: none; |
|
|
border-radius: 0.375rem 0.375rem 0 0; |
|
|
} |
|
|
.media-item { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.media-item:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
.media-item.selected { |
|
|
border-color: #3b82f6; |
|
|
background-color: #eff6ff; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
position: fixed; |
|
|
z-index: 50; |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
.sidebar-open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
.sidebar-collapsed + .content-area { |
|
|
margin-left: 0; |
|
|
} |
|
|
.mobile-menu-button { |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans antialiased"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-gray-800 text-white w-64 flex-shrink-0"> |
|
|
<div class="flex items-center justify-between p-4 border-b border-gray-700"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-cube text-blue-400 text-xl"></i> |
|
|
<span class="text-xl font-semibold">ContentHub</span> |
|
|
</div> |
|
|
<button id="sidebarToggle" class="text-gray-400 hover:text-white focus:outline-none"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search..." class="w-full bg-gray-700 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav class="mt-2"> |
|
|
<div class="px-2"> |
|
|
<div class="py-2 text-gray-400 uppercase text-xs font-semibold tracking-wider">Dashboard</div> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-white bg-gray-900 rounded-lg"> |
|
|
<i class="fas fa-tachometer-alt mr-3"></i> |
|
|
<span>Overview</span> |
|
|
</a> |
|
|
|
|
|
<div class="py-2 mt-4 text-gray-400 uppercase text-xs font-semibold tracking-wider">Content</div> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> |
|
|
<i class="fas fa-file-alt mr-3"></i> |
|
|
<span>Pages</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> |
|
|
<i class="fas fa-newspaper mr-3"></i> |
|
|
<span>Posts</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> |
|
|
<i class="fas fa-images mr-3"></i> |
|
|
<span>Media</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> |
|
|
<i class="fas fa-tags mr-3"></i> |
|
|
<span>Categories</span> |
|
|
</a> |
|
|
|
|
|
<div class="py-2 mt-4 text-gray-400 uppercase text-xs font-semibold tracking-wider">Templates</div> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> |
|
|
<i class="fas fa-file-code mr-3"></i> |
|
|
<span>Template Files</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> |
|
|
<i class="fas fa-upload mr-3"></i> |
|
|
<span>Upload Templates</span> |
|
|
</a> |
|
|
|
|
|
<div class="py-2 mt-4 text-gray-400 uppercase text-xs font-semibold tracking-wider">System</div> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> |
|
|
<i class="fas fa-users mr-3"></i> |
|
|
<span>Users</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span>Settings</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span>Analytics</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg"> |
|
|
<i class="fas fa-plug mr-3"></i> |
|
|
<span>Integrations</span> |
|
|
</a> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<div class="absolute bottom-0 w-full p-4 border-t border-gray-700"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full"> |
|
|
<div class="ml-3"> |
|
|
<div class="text-sm font-medium">John Doe</div> |
|
|
<div class="text-xs text-gray-400">Administrator</div> |
|
|
</div> |
|
|
<button class="ml-auto text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content-area flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-white shadow-sm z-10"> |
|
|
<div class="flex items-center justify-between px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<button id="mobileMenuButton" class="mobile-menu-button mr-4 text-gray-500 hover:text-gray-600 focus:outline-none lg:hidden"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Dashboard Overview</h1> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-gray-500 hover:text-gray-600 focus:outline-none"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-600 focus:outline-none"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-600 focus:outline-none"> |
|
|
<i class="fas fa-search text-xl"></i> |
|
|
</button> |
|
|
<div class="relative dropdown"> |
|
|
<button class="flex items-center space-x-2 focus:outline-none"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full"> |
|
|
<span class="hidden md:inline-block font-medium">John Doe</span> |
|
|
<i class="fas fa-chevron-down hidden md:inline-block text-xs"></i> |
|
|
</button> |
|
|
<div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> |
|
|
<div class="border-t border-gray-200"></div> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="content-block bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-file-alt text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-gray-500 text-sm font-medium">Total Pages</h3> |
|
|
<p class="text-2xl font-semibold">1,248</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-medium">+12.5%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">from last month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="content-block bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-newspaper text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-gray-500 text-sm font-medium">Total Posts</h3> |
|
|
<p class="text-2xl font-semibold">3,567</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-medium">+8.3%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">from last month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="content-block bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-gray-500 text-sm font-medium">Total Users</h3> |
|
|
<p class="text-2xl font-semibold">248</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-medium">+5.2%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">from last month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="content-block bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
|
|
<i class="fas fa-eye text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-gray-500 text-sm font-medium">Total Views</h3> |
|
|
<p class="text-2xl font-semibold">124,890</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-medium">+22.7%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">from last month</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="lg:col-span-2 content-block bg-white rounded-lg shadow"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Sarah Johnson <span class="text-gray-500">published a new post</span></p> |
|
|
<p class="text-sm text-gray-500">"How to optimize your content for SEO"</p> |
|
|
<p class="text-xs text-gray-400 mt-1">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-10 h-10 rounded-full"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Michael Chen <span class="text-gray-500">updated the homepage</span></p> |
|
|
<p class="text-sm text-gray-500">Added new hero section and CTA buttons</p> |
|
|
<p class="text-xs text-gray-400 mt-1">5 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-10 h-10 rounded-full"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Emily Wilson <span class="text-gray-500">uploaded new media</span></p> |
|
|
<p class="text-sm text-gray-500">12 product images added to the gallery</p> |
|
|
<p class="text-xs text-gray-400 mt-1">1 day ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">John Doe <span class="text-gray-500">created a new user</span></p> |
|
|
<p class="text-sm text-gray-500">Added new editor: Robert Johnson</p> |
|
|
<p class="text-xs text-gray-400 mt-1">2 days ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 text-center"> |
|
|
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">View all activity</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content-block bg-white rounded-lg shadow"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Quick Actions</h2> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<button class="w-full flex items-center justify-between px-4 py-3 mb-3 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-alt mr-3"></i> |
|
|
<span>Create New Page</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
<button class="w-full flex items-center justify-between px-4 py-3 mb-3 bg-green-50 text-green-600 rounded-lg hover:bg-green-100"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-newspaper mr-3"></i> |
|
|
<span>Create New Post</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
<button class="w-full flex items-center justify-between px-4 py-3 mb-3 bg-purple-50 text-purple-600 rounded-lg hover:bg-purple-100"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-images mr-3"></i> |
|
|
<span>Upload Media</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
<button class="w-full flex items-center justify-between px-4 py-3 bg-yellow-50 text-yellow-600 rounded-lg hover:bg-yellow-100"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-user-plus mr-3"></i> |
|
|
<span>Add New User</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
<button class="w-full flex items-center justify-between px-4 py-3 bg-indigo-50 text-indigo-600 rounded-lg hover:bg-indigo-100"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-code mr-3"></i> |
|
|
<span>Upload Template</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="content-block bg-white rounded-lg shadow"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Recent Content</h2> |
|
|
<select class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>Last 7 days</option> |
|
|
<option>Last 30 days</option> |
|
|
<option>Last 90 days</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">Homepage Redesign</h3> |
|
|
<p class="text-sm text-gray-500">Updated by Michael Chen</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Published</span> |
|
|
<span class="ml-3 text-xs text-gray-500">2 days ago</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">Summer Sale Announcement</h3> |
|
|
<p class="text-sm text-gray-500">Created by Sarah Johnson</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Draft</span> |
|
|
<span class="ml-3 text-xs text-gray-500">1 day ago</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">Product Catalog Update</h3> |
|
|
<p class="text-sm text-gray-500">Updated by Emily Wilson</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Published</span> |
|
|
<span class="ml-3 text-xs text-gray-500">3 days ago</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">Blog: SEO Best Practices</h3> |
|
|
<p class="text-sm text-gray-500">Created by Sarah Johnson</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Pending</span> |
|
|
<span class="ml-3 text-xs text-gray-500">5 hours ago</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 text-center"> |
|
|
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">View all content</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content-block bg-white rounded-lg shadow"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Content Editor Preview</h2> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="wysiwyg-toolbar bg-gray-100 p-2 flex flex-wrap items-center"> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-bold"></i></button> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-italic"></i></button> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-underline"></i></button> |
|
|
<div class="w-px h-6 bg-gray-300 mx-1"></div> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-align-left"></i></button> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-align-center"></i></button> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-align-right"></i></button> |
|
|
<div class="w-px h-6 bg-gray-300 mx-1"></div> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-list-ul"></i></button> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-list-ol"></i></button> |
|
|
<div class="w-px h-6 bg-gray-300 mx-1"></div> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-link"></i></button> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-image"></i></button> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-video"></i></button> |
|
|
<div class="w-px h-6 bg-gray-300 mx-1"></div> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-code"></i></button> |
|
|
<button class="p-2 text-gray-700 hover:bg-gray-200 rounded"><i class="fas fa-table"></i></button> |
|
|
</div> |
|
|
<div class="wysiwyg-editor bg-white"> |
|
|
<h2>Welcome to ContentHub CMS</h2> |
|
|
<p>This is a sample content block that demonstrates the WYSIWYG editor capabilities. You can format text, add images, embed videos, and much more.</p> |
|
|
<p>Try creating engaging content with our intuitive editor that makes content creation a breeze.</p> |
|
|
<ul> |
|
|
<li>Drag and drop media</li> |
|
|
<li>Real-time preview</li> |
|
|
<li>Version history</li> |
|
|
<li>SEO optimization</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-end space-x-3"> |
|
|
<button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Save Draft</button> |
|
|
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Publish</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="templateModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Upload Template Files</h3> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Template Type</label> |
|
|
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>Next.js</option> |
|
|
<option>React</option> |
|
|
<option>Vue</option> |
|
|
<option>Angular</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">File Format</label> |
|
|
<select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>TypeScript (.tsx)</option> |
|
|
<option>JavaScript (.jsx)</option> |
|
|
<option>CSS Modules (.module.css)</option> |
|
|
<option>SCSS (.scss)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Upload Files</label> |
|
|
<div class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center"> |
|
|
<i class="fas fa-file-upload text-3xl text-gray-400 mb-2"></i> |
|
|
<p class="text-sm text-gray-500">Drag and drop files here or click to browse</p> |
|
|
<input type="file" class="hidden" id="templateUpload" multiple> |
|
|
<button class="mt-3 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm" onclick="document.getElementById('templateUpload').click()"> |
|
|
Select Files |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button onclick="document.getElementById('templateModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"> |
|
|
Cancel |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"> |
|
|
Upload Templates |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('[href="#"], button').forEach(btn => { |
|
|
if (btn.textContent.includes('Upload Template') || btn.textContent.includes('Upload Templates')) { |
|
|
btn.addEventListener('click', () => { |
|
|
document.getElementById('templateModal').classList.remove('hidden'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('templateUpload').addEventListener('change', function(e) { |
|
|
const files = e.target.files; |
|
|
if (files.length > 0) { |
|
|
const fileList = document.createElement('div'); |
|
|
fileList.className = 'mt-3 text-sm text-left'; |
|
|
|
|
|
for (let i = 0; i < files.length; i++) { |
|
|
const fileItem = document.createElement('div'); |
|
|
fileItem.className = 'flex items-center py-1'; |
|
|
fileItem.innerHTML = ` |
|
|
<i class="fas fa-file-code text-gray-500 mr-2"></i> |
|
|
<span>${files[i].name}</span> |
|
|
<span class="ml-auto text-xs text-gray-500">${(files[i].size / 1024).toFixed(2)} KB</span> |
|
|
`; |
|
|
fileList.appendChild(fileItem); |
|
|
} |
|
|
|
|
|
const uploadContainer = document.querySelector('.border-dashed'); |
|
|
const existingList = uploadContainer.querySelector('.text-left'); |
|
|
if (existingList) { |
|
|
uploadContainer.replaceChild(fileList, existingList); |
|
|
} else { |
|
|
uploadContainer.appendChild(fileList); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
const sidebarToggle = document.getElementById('sidebarToggle'); |
|
|
const sidebar = document.querySelector('.sidebar'); |
|
|
const contentArea = document.querySelector('.content-area'); |
|
|
|
|
|
sidebarToggle.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('sidebar-collapsed'); |
|
|
contentArea.classList.toggle('sidebar-collapsed'); |
|
|
|
|
|
|
|
|
if (sidebar.classList.contains('sidebar-collapsed')) { |
|
|
sidebarToggle.innerHTML = '<i class="fas fa-chevron-right"></i>'; |
|
|
} else { |
|
|
sidebarToggle.innerHTML = '<i class="fas fa-chevron-left"></i>'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobileMenuButton'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('sidebar-open'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!sidebar.contains(e.target) && !mobileMenuButton.contains(e.target)) { |
|
|
sidebar.classList.remove('sidebar-open'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const dropdowns = document.querySelectorAll('.dropdown'); |
|
|
|
|
|
dropdowns.forEach(dropdown => { |
|
|
const button = dropdown.querySelector('button'); |
|
|
const menu = dropdown.querySelector('.dropdown-menu'); |
|
|
|
|
|
button.addEventListener('click', () => { |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!dropdown.contains(e.target)) { |
|
|
menu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const mediaItems = document.querySelectorAll('.media-item'); |
|
|
|
|
|
mediaItems.forEach(item => { |
|
|
item.addEventListener('click', () => { |
|
|
item.classList.toggle('selected'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function handleResize() { |
|
|
if (window.innerWidth < 768) { |
|
|
sidebar.classList.add('sidebar-collapsed'); |
|
|
contentArea.classList.add('sidebar-collapsed'); |
|
|
sidebarToggle.innerHTML = '<i class="fas fa-chevron-right"></i>'; |
|
|
} |
|
|
} |
|
|
|
|
|
window.addEventListener('resize', handleResize); |
|
|
handleResize(); |
|
|
</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=Crazyka51/testcms" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
