Spaces:
Running
Running
Build to me Social Media Automation Software that enables marketers and entrepreneurs to share their content across all the social platforms, like Instagram, Facebook, Twitter, YouTube, Google Plus, Tumblr, LinkedIn, and Pinterest, all from one dashboard. - Initial Deployment
fb71228
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SocialSync Pro | All-in-One Social Media Automation</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> | |
| .platform-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .platform-icon:hover { | |
| transform: scale(1.1); | |
| } | |
| .content-card { | |
| transition: all 0.3s ease; | |
| } | |
| .content-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .scheduled-post { | |
| border-left: 4px solid #3b82f6; | |
| } | |
| #postEditor { | |
| min-height: 200px; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .platform-tab { | |
| transition: all 0.3s ease; | |
| } | |
| .platform-tab:hover:not(.active) { | |
| background-color: #f3f4f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-white border-r border-gray-200"> | |
| <div class="flex items-center justify-center h-16 px-4 bg-blue-600"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-share-alt text-white text-2xl mr-2"></i> | |
| <span class="text-white font-bold text-xl">SocialSync Pro</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <div class="space-y-1"> | |
| <button class="flex items-center w-full px-4 py-3 text-sm font-medium text-white bg-blue-600 rounded-lg"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| Dashboard | |
| </button> | |
| <button class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| Scheduler | |
| </button> | |
| <button class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| Analytics | |
| </button> | |
| <button class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-users mr-3"></i> | |
| Audience | |
| </button> | |
| <button class="flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </button> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Connected Accounts</h3> | |
| <div class="mt-2 space-y-1"> | |
| <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fab fa-facebook text-blue-600 mr-3"></i> | |
| <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span> | |
| </div> | |
| <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fab fa-instagram text-purple-600 mr-3"></i> | |
| <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span> | |
| </div> | |
| <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fab fa-twitter text-blue-400 mr-3"></i> | |
| <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span> | |
| </div> | |
| <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fab fa-linkedin text-blue-700 mr-3"></i> | |
| <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span> | |
| </div> | |
| <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fab fa-pinterest text-red-600 mr-3"></i> | |
| <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span> | |
| </div> | |
| <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fab fa-youtube text-red-600 mr-3"></i> | |
| YouTube | |
| <span class="ml-auto text-green-500"><i class="fas fa-check-circle"></i></span> | |
| </div> | |
| <div class="flex items-center px-4 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-plus-circle text-gray-400 mr-3"></i> | |
| Add Account | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h2 class="ml-4 text-lg font-semibold text-gray-800">Dashboard</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </div> | |
| <div class="flex items-center"> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile"> | |
| <span class="ml-2 text-sm font-medium text-gray-700">Sarah Johnson</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 overflow-auto p-6 bg-gray-50"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="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-calendar-alt"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-500">Scheduled Posts</h3> | |
| <p class="text-2xl font-semibold text-gray-800">24</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="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-rocket"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-500">Published Today</h3> | |
| <p class="text-2xl font-semibold text-gray-800">8</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="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"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-500">Total Reach</h3> | |
| <p class="text-2xl font-semibold text-gray-800">42.5K</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="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-heart"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-500">Engagement</h3> | |
| <p class="text-2xl font-semibold text-gray-800">1.2K</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Post Section --> | |
| <div class="bg-white rounded-lg shadow mb-6"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-800">Create New Post</h3> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Platform Selection Tabs --> | |
| <div class="flex overflow-x-auto mb-6"> | |
| <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg active" data-tab="all"> | |
| All Platforms | |
| </button> | |
| <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="facebook"> | |
| <i class="fab fa-facebook text-blue-600 mr-2"></i>Facebook | |
| </button> | |
| <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="instagram"> | |
| <i class="fab fa-instagram text-purple-600 mr-2"></i>Instagram | |
| </button> | |
| <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="twitter"> | |
| <i class="fab fa-twitter text-blue-400 mr-2"></i>Twitter | |
| </button> | |
| <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="linkedin"> | |
| <i class="fab fa-linkedin text-blue-700 mr-2"></i>LinkedIn | |
| </button> | |
| <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="pinterest"> | |
| <i class="fab fa-pinterest text-red-600 mr-2"></i>Pinterest | |
| </button> | |
| <button class="platform-tab flex-shrink-0 px-4 py-2 text-sm font-medium rounded-t-lg" data-tab="youtube"> | |
| <i class="fab fa-youtube text-red-600 mr-2"></i>YouTube | |
| </button> | |
| </div> | |
| <!-- Post Editor --> | |
| <div class="mb-6"> | |
| <div id="postEditor" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" contenteditable="true" placeholder="What would you like to share?"></div> | |
| </div> | |
| <!-- Media Upload --> | |
| <div class="mb-6"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="flex items-center justify-center w-10 h-10 rounded-full bg | |
| <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=muflhi001/01testfloe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |