|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Digital Product Publisher</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> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
} |
|
|
.platform-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.platform-icon:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.product-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.scheduled-post { |
|
|
border-left: 4px solid #a777e3; |
|
|
} |
|
|
#previewModal { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.modal-enter { |
|
|
opacity: 0; |
|
|
transform: scale(0.9); |
|
|
} |
|
|
.modal-enter-active { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
transition: opacity 300ms, transform 300ms; |
|
|
} |
|
|
.modal-exit { |
|
|
opacity: 1; |
|
|
} |
|
|
.modal-exit-active { |
|
|
opacity: 0; |
|
|
transform: scale(0.9); |
|
|
transition: opacity 300ms, transform 300ms; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-rocket text-2xl"></i> |
|
|
<h1 class="text-2xl font-bold">Digital Publisher Pro</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-white text-purple-600 px-4 py-2 rounded-full font-semibold hover:bg-purple-50 transition"> |
|
|
<i class="fas fa-user mr-2"></i>Account |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<aside class="lg:col-span-1 bg-white rounded-xl shadow-md p-6 h-fit sticky top-8"> |
|
|
<div class="mb-8"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Dashboard</h2> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 text-purple-600 font-medium p-2 rounded-lg bg-purple-50"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span>Overview</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 text-gray-600 hover:text-purple-600 hover:bg-purple-50 font-medium p-2 rounded-lg transition"> |
|
|
<i class="fas fa-box-open"></i> |
|
|
<span>Products</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 text-gray-600 hover:text-purple-600 hover:bg-purple-50 font-medium p-2 rounded-lg transition"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
<span>Schedule</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 text-gray-600 hover:text-purple-600 hover:bg-purple-50 font-medium p-2 rounded-lg transition"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
<span>Analytics</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 text-gray-600 hover:text-purple-600 hover:bg-purple-50 font-medium p-2 rounded-lg transition"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
<span>Messages</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-3 text-gray-600 hover:text-purple-600 hover:bg-purple-50 font-medium p-2 rounded-lg transition"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span>Settings</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Connected Accounts</h2> |
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
<div class="platform-icon bg-blue-500 text-white p-3 rounded-full text-center cursor-pointer"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</div> |
|
|
<div class="platform-icon bg-pink-500 text-white p-3 rounded-full text-center cursor-pointer"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</div> |
|
|
<div class="platform-icon bg-blue-400 text-white p-3 rounded-full text-center cursor-pointer"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</div> |
|
|
<div class="platform-icon bg-red-500 text-white p-3 rounded-full text-center cursor-pointer"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</div> |
|
|
<div class="platform-icon bg-green-500 text-white p-3 rounded-full text-center cursor-pointer"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
</div> |
|
|
<div class="platform-icon bg-gray-800 text-white p-3 rounded-full text-center cursor-pointer"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-3 space-y-8"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500">Total Products</p> |
|
|
<h3 class="text-3xl font-bold text-gray-800">24</h3> |
|
|
</div> |
|
|
<div class="bg-purple-100 p-3 rounded-full"> |
|
|
<i class="fas fa-box text-purple-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500">Scheduled Posts</p> |
|
|
<h3 class="text-3xl font-bold text-gray-800">8</h3> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-full"> |
|
|
<i class="fas fa-calendar text-blue-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 3 new today</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500">Messages Sent</p> |
|
|
<h3 class="text-3xl font-bold text-gray-800">156</h3> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-envelope text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-red-500 text-sm mt-2"><i class="fas fa-arrow-down mr-1"></i> 5% from last week</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Create New Post</h2> |
|
|
<form id="postForm"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="product">Select Product</label> |
|
|
<select id="product" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-300 focus:border-purple-500"> |
|
|
<option value="">-- Select a product --</option> |
|
|
<option value="1">E-book: Digital Marketing Guide</option> |
|
|
<option value="2">Course: Web Development 101</option> |
|
|
<option value="3">Template: Social Media Pack</option> |
|
|
<option value="4">Plugin: SEO Optimizer</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="platforms">Select Platforms</label> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox text-blue-500" checked> |
|
|
<span class="ml-2">Facebook</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox text-pink-500" checked> |
|
|
<span class="ml-2">Instagram</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox text-blue-400"> |
|
|
<span class="ml-2">Twitter</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox text-red-500"> |
|
|
<span class="ml-2">YouTube</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="message">Post Content</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-300 focus:border-purple-500" placeholder="Write your post content here..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Add Media</label> |
|
|
<div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50 transition"> |
|
|
<i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
|
|
<p class="text-gray-500">Click to upload or drag and drop</p> |
|
|
<p class="text-sm text-gray-400">PNG, JPG, GIF up to 10MB</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2" for="schedule">Schedule Post</label> |
|
|
<input type="datetime-local" id="schedule" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-300 focus:border-purple-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2" for="timezone">Timezone</label> |
|
|
<select id="timezone" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-300 focus:border-purple-500"> |
|
|
<option value="EST">Eastern Time (EST)</option> |
|
|
<option value="PST">Pacific Time (PST)</option> |
|
|
<option value="CST">Central Time (CST)</option> |
|
|
<option value="GMT">GMT</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<button type="button" id="previewBtn" class="px-6 py-2 border border-purple-600 text-purple-600 rounded-lg hover:bg-purple-50 transition"> |
|
|
<i class="fas fa-eye mr-2"></i>Preview |
|
|
</button> |
|
|
<div class="space-x-3"> |
|
|
<button type="button" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition"> |
|
|
<i class="fas fa-save mr-2"></i>Save Draft |
|
|
</button> |
|
|
<button type="submit" class="px-6 py-2 gradient-bg text-white rounded-lg hover:opacity-90 transition"> |
|
|
<i class="fas fa-paper-plane mr-2"></i>Publish Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold text-gray-800">Recent Scheduled Posts</h2> |
|
|
<button class="text-purple-600 hover:text-purple-800 transition"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="scheduled-post bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">E-book Launch Announcement</h3> |
|
|
<p class="text-sm text-gray-500">Scheduled for: Today, 3:00 PM EST</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-500 hover:text-blue-700 transition"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-500 hover:text-red-700 transition"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mt-2 space-x-2"> |
|
|
<span class="text-xs px-2 py-1 bg-blue-100 text-blue-600 rounded-full">Facebook</span> |
|
|
<span class="text-xs px-2 py-1 bg-pink-100 text-pink-600 rounded-full">Instagram</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="scheduled-post bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">Web Development Course Discount</h3> |
|
|
<p class="text-sm text-gray-500">Scheduled for: Tomorrow, 10:00 AM EST</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-500 hover:text-blue-700 transition"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-500 hover:text-red-700 transition"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mt-2 space-x-2"> |
|
|
<span class="text-xs px-2 py-1 bg-blue-100 text-blue-600 rounded-full">Facebook</span> |
|
|
<span class="text-xs px-2 py-1 bg-blue-400 text-white rounded-full">Twitter</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="scheduled-post bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-800">New Template Pack Release</h3> |
|
|
<p class="text-sm text-gray-500">Scheduled for: Friday, 2:00 PM EST</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-500 hover:text-blue-700 transition"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-500 hover:text-red-700 transition"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mt-2 space-x-2"> |
|
|
<span class="text-xs px-2 py-1 bg-pink-100 text-pink-600 rounded-full">Instagram</span> |
|
|
<span class="text-xs px-2 py-1 bg-red-100 text-red-600 rounded-full">YouTube</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="previewModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl w-full max-w-2xl mx-4 overflow-hidden"> |
|
|
<div class="flex justify-between items-center border-b p-4"> |
|
|
<h3 class="text-lg font-bold text-gray-800">Post Preview</h3> |
|
|
<button id="closePreview" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Platform Preview</label> |
|
|
<div class="flex space-x-2 overflow-x-auto pb-2"> |
|
|
<button class="platform-preview-btn active bg-blue-500 text-white px-4 py-1 rounded-full text-sm">Facebook</button> |
|
|
<button class="platform-preview-btn bg-pink-500 text-white px-4 py-1 rounded-full text-sm">Instagram</button> |
|
|
<button class="platform-preview-btn bg-blue-400 text-white px-4 py-1 rounded-full text-sm">Twitter</button> |
|
|
<button class="platform-preview-btn bg-red-500 text-white px-4 py-1 rounded-full text-sm">YouTube</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="preview-content bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-purple-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="font-medium">Your Page</h4> |
|
|
<p class="text-xs text-gray-500">Just now · <i class="fas fa-globe-americas"></i></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p id="previewText" class="text-gray-800 mb-4">This is where your post content will appear. Write something engaging about your digital product!</p> |
|
|
|
|
|
<div class="bg-white border rounded-lg overflow-hidden mb-4"> |
|
|
<img src="https://via.placeholder.com/600x400?text=Product+Image" alt="Product" class="w-full"> |
|
|
<div class="p-3"> |
|
|
<h4 class="font-bold text-lg" id="previewProductTitle">Product Title</h4> |
|
|
<p class="text-gray-600 text-sm" id="previewProductDesc">Product description will appear here. Make it compelling!</p> |
|
|
<p class="text-purple-600 font-medium mt-2">Learn More →</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between text-gray-500 border-t pt-3"> |
|
|
<button class="flex items-center space-x-1 hover:text-blue-500"> |
|
|
<i class="far fa-thumbs-up"></i> |
|
|
<span>Like</span> |
|
|
</button> |
|
|
<button class="flex items-center space-x-1 hover:text-green-500"> |
|
|
<i class="far fa-comment"></i> |
|
|
<span>Comment</span> |
|
|
</button> |
|
|
<button class="flex items-center space-x-1 hover:text-red-500"> |
|
|
<i class="far fa-share-square"></i> |
|
|
<span>Share</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t p-4 flex justify-end"> |
|
|
<button class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition mr-3"> |
|
|
Back to Edit |
|
|
</button> |
|
|
<button class="px-6 py-2 gradient-bg text-white rounded-lg hover:opacity-90 transition"> |
|
|
Confirm & Schedule |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('previewBtn').addEventListener('click', function() { |
|
|
const postText = document.getElementById('message').value; |
|
|
const productSelect = document.getElementById('product'); |
|
|
const productText = productSelect.options[productSelect.selectedIndex].text; |
|
|
|
|
|
document.getElementById('previewText').textContent = postText || "This is where your post content will appear. Write something engaging about your digital product!"; |
|
|
|
|
|
if (productText !== "-- Select a product --") { |
|
|
const parts = productText.split(':'); |
|
|
document.getElementById('previewProductTitle').textContent = parts[1] ? parts[1].trim() : parts[0].trim(); |
|
|
document.getElementById('previewProductDesc').textContent = parts[1] ? `New ${parts[0].trim()} available now!` : "Check out this amazing product!"; |
|
|
} else { |
|
|
document.getElementById('previewProductTitle').textContent = "Product Title"; |
|
|
document.getElementById('previewProductDesc').textContent = "Product description will appear here. Make it compelling!"; |
|
|
} |
|
|
|
|
|
document.getElementById('previewModal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('closePreview').addEventListener('click', function() { |
|
|
document.getElementById('previewModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const platformPreviewBtns = document.querySelectorAll('.platform-preview-btn'); |
|
|
platformPreviewBtns.forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
platformPreviewBtns.forEach(b => b.classList.remove('active')); |
|
|
this.classList.add('active'); |
|
|
|
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('postForm').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('Your post has been published successfully!'); |
|
|
this.reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
</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=Ahmedaill/https-www-facebook-com-ahmed-ail-524160" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
