415 lines
23 KiB
HTML
415 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Media Management</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<link href="//at.alicdn.com/t/font_2184398_zfvo7yhbkl9.css" rel="stylesheet">
|
|
<style>
|
|
.upload-area {
|
|
border: 2px dashed #cbd5e0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.upload-area.active {
|
|
border-color: #4299e1;
|
|
background-color: rgba(66, 153, 225, 0.1);
|
|
}
|
|
.table-row {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
.table-row:hover {
|
|
background-color: rgba(237, 242, 247, 0.7);
|
|
}
|
|
.pagination-item.active {
|
|
background-color: #4299e1;
|
|
color: white;
|
|
}
|
|
.media-table th {
|
|
position: relative;
|
|
}
|
|
.media-table th:after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 25%;
|
|
height: 50%;
|
|
width: 1px;
|
|
background-color: #e2e8f0;
|
|
}
|
|
.media-table th:last-child:after {
|
|
display: none;
|
|
}
|
|
.preview-thumbnail {
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-semibold text-gray-800">Media Library</h1>
|
|
<div class="flex space-x-2">
|
|
<div class="relative">
|
|
<input type="text" placeholder="Search media..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<i class="iconfont icon-search absolute left-3 top-3 text-gray-400"></i>
|
|
</div>
|
|
<select class="border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option>All media</option>
|
|
<option>Images</option>
|
|
<option>Videos</option>
|
|
<option>Documents</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Area -->
|
|
<div id="upload-area" class="upload-area rounded-lg p-10 mb-8 flex flex-col items-center justify-center cursor-pointer">
|
|
<i class="iconfont icon-upload text-5xl text-blue-500 mb-4"></i>
|
|
<p class="text-gray-600 text-center mb-2">Drag and drop files here or click to browse</p>
|
|
<p class="text-gray-400 text-sm text-center">Supports: JPG, PNG, GIF, MP4, PDF</p>
|
|
<input type="file" id="file-input" multiple class="hidden">
|
|
</div>
|
|
|
|
<!-- Media Table Section -->
|
|
<div class="mb-12 bg-white rounded-lg shadow overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full media-table">
|
|
<thead class="bg-gray-50 border-b border-gray-200">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
<div class="flex items-center">
|
|
File Name
|
|
<button class="ml-1 text-gray-400 hover:text-gray-600">
|
|
<i class="iconfont icon-sort"></i>
|
|
</button>
|
|
</div>
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
<div class="flex items-center">
|
|
Upload Time
|
|
<button class="ml-1 text-gray-400 hover:text-gray-600">
|
|
<i class="iconfont icon-sort"></i>
|
|
</button>
|
|
</div>
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
<div class="flex items-center">
|
|
File Size
|
|
<button class="ml-1 text-gray-400 hover:text-gray-600">
|
|
<i class="iconfont icon-sort"></i>
|
|
</button>
|
|
</div>
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
<div class="flex items-center">
|
|
File Type
|
|
<button class="ml-1 text-gray-400 hover:text-gray-600">
|
|
<i class="iconfont icon-sort"></i>
|
|
</button>
|
|
</div>
|
|
</th>
|
|
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<!-- Image file row -->
|
|
<tr class="table-row">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 h-10 w-10 mr-3">
|
|
<img class="preview-thumbnail" src="https://via.placeholder.com/300x225" alt="Image preview">
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-900">sunset-beach.jpg</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
Today, 10:30 AM
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
2.4 MB
|
|
</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">
|
|
Image
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
|
|
<div class="flex justify-center space-x-2">
|
|
<button class="p-1 text-blue-600 hover:text-blue-900 focus:outline-none" title="Preview">
|
|
<i class="iconfont icon-eye"></i>
|
|
</button>
|
|
<button class="p-1 text-gray-600 hover:text-gray-900 focus:outline-none" title="Download">
|
|
<i class="iconfont icon-download"></i>
|
|
</button>
|
|
<button class="p-1 text-red-600 hover:text-red-900 focus:outline-none" title="Delete">
|
|
<i class="iconfont icon-delete"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- PDF file row -->
|
|
<tr class="table-row">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
|
|
<i class="iconfont icon-file-pdf text-2xl text-red-500"></i>
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-900">presentation.pdf</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
Yesterday, 3:45 PM
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
4.8 MB
|
|
</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">
|
|
PDF
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
|
|
<div class="flex justify-center space-x-2">
|
|
<button class="p-1 text-blue-600 hover:text-blue-900 focus:outline-none" title="Preview">
|
|
<i class="iconfont icon-eye"></i>
|
|
</button>
|
|
<button class="p-1 text-gray-600 hover:text-gray-900 focus:outline-none" title="Download">
|
|
<i class="iconfont icon-download"></i>
|
|
</button>
|
|
<button class="p-1 text-red-600 hover:text-red-900 focus:outline-none" title="Delete">
|
|
<i class="iconfont icon-delete"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Video file row -->
|
|
<tr class="table-row">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
|
|
<i class="iconfont icon-file-video text-2xl text-blue-500"></i>
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-900">promo_video.mp4</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
Aug 28, 2023
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
24.8 MB
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
|
|
Video
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
|
|
<div class="flex justify-center space-x-2">
|
|
<button class="p-1 text-blue-600 hover:text-blue-900 focus:outline-none" title="Preview">
|
|
<i class="iconfont icon-play"></i>
|
|
</button>
|
|
<button class="p-1 text-gray-600 hover:text-gray-900 focus:outline-none" title="Download">
|
|
<i class="iconfont icon-download"></i>
|
|
</button>
|
|
<button class="p-1 text-red-600 hover:text-red-900 focus:outline-none" title="Delete">
|
|
<i class="iconfont icon-delete"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Document file row -->
|
|
<tr class="table-row">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
|
|
<i class="iconfont icon-file-word text-2xl text-blue-700"></i>
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-900">report_q3.docx</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
Aug 25, 2023
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
1.2 MB
|
|
</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">
|
|
Document
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
|
|
<div class="flex justify-center space-x-2">
|
|
<button class="p-1 text-blue-600 hover:text-blue-900 focus:outline-none" title="Preview">
|
|
<i class="iconfont icon-eye"></i>
|
|
</button>
|
|
<button class="p-1 text-gray-600 hover:text-gray-900 focus:outline-none" title="Download">
|
|
<i class="iconfont icon-download"></i>
|
|
</button>
|
|
<button class="p-1 text-red-600 hover:text-red-900 focus:outline-none" title="Delete">
|
|
<i class="iconfont icon-delete"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Audio file row -->
|
|
<tr class="table-row">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
|
|
<i class="iconfont icon-file-audio text-2xl text-green-600"></i>
|
|
</div>
|
|
<div class="text-sm font-medium text-gray-900">podcast_interview.mp3</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
Aug 20, 2023
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
18.5 MB
|
|
</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">
|
|
Audio
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
|
|
<div class="flex justify-center space-x-2">
|
|
<button class="p-1 text-blue-600 hover:text-blue-900 focus:outline-none" title="Preview">
|
|
<i class="iconfont icon-play"></i>
|
|
</button>
|
|
<button class="p-1 text-gray-600 hover:text-gray-900 focus:outline-none" title="Download">
|
|
<i class="iconfont icon-download"></i>
|
|
</button>
|
|
<button class="p-1 text-red-600 hover:text-red-900 focus:outline-none" title="Delete">
|
|
<i class="iconfont icon-delete"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Table footer with pagination -->
|
|
<div class="bg-gray-50 px-6 py-3 border-t border-gray-200 flex items-center justify-between">
|
|
<div class="flex-1 flex justify-between sm:hidden">
|
|
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
Previous
|
|
</button>
|
|
<button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
Next
|
|
</button>
|
|
</div>
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> results
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">Previous</span>
|
|
<i class="iconfont icon-arrow-left"></i>
|
|
</button>
|
|
<button class="relative inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-500 text-sm font-medium text-white">
|
|
1
|
|
</button>
|
|
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
|
2
|
|
</button>
|
|
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
|
3
|
|
</button>
|
|
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
|
...
|
|
</span>
|
|
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
|
5
|
|
</button>
|
|
<button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">Next</span>
|
|
<i class="iconfont icon-arrow-right"></i>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const uploadArea = document.getElementById('upload-area');
|
|
const fileInput = document.getElementById('file-input');
|
|
|
|
// Handle click on upload area
|
|
uploadArea.addEventListener('click', () => {
|
|
fileInput.click();
|
|
});
|
|
|
|
// Handle file selection
|
|
fileInput.addEventListener('change', (e) => {
|
|
handleFiles(e.target.files);
|
|
});
|
|
|
|
// Handle drag and drop
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
uploadArea.addEventListener(eventName, preventDefaults, false);
|
|
});
|
|
|
|
function preventDefaults(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => {
|
|
uploadArea.addEventListener(eventName, () => {
|
|
uploadArea.classList.add('active');
|
|
}, false);
|
|
});
|
|
|
|
['dragleave', 'drop'].forEach(eventName => {
|
|
uploadArea.addEventListener(eventName, () => {
|
|
uploadArea.classList.remove('active');
|
|
}, false);
|
|
});
|
|
|
|
uploadArea.addEventListener('drop', (e) => {
|
|
const dt = e.dataTransfer;
|
|
const files = dt.files;
|
|
handleFiles(files);
|
|
}, false);
|
|
|
|
function handleFiles(files) {
|
|
// In a real application, you would upload these files to a server
|
|
// For this demo, we'll just show an alert
|
|
const fileNames = Array.from(files).map(file => file.name).join(', ');
|
|
alert(`Files selected: ${fileNames}`);
|
|
|
|
// Here you would typically send these files to your server
|
|
// const formData = new FormData();
|
|
// Array.from(files).forEach(file => {
|
|
// formData.append('files', file);
|
|
// });
|
|
// fetch('/upload', {
|
|
// method: 'POST',
|
|
// body: formData
|
|
// });
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|