Spaces:
Running
Running
Download index.html from MainSource365/content-creation: direct link, hf CLI and curl.
- Browser
- Download file 32.5 kB
-
https://huggingface.co/spaces/MainSource365/content-creation/resolve/main/index.html
- Command line
-
hf download hf://spaces/MainSource365/content-creation/index.html
-
curl -L -o index.html https://huggingface.co/spaces/MainSource365/content-creation/resolve/main/index.html
32.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Social Media Super Agent</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-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .content-preview { | |
| transition: all 0.3s ease; | |
| } | |
| .content-preview:hover { | |
| transform: scale(1.03); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-8 md:mb-0"> | |
| <h1 class="text-4xl font-bold mb-2">AI Social Media Super Agent</h1> | |
| <p class="text-xl opacity-90">Automate your social media presence across 6 major platforms</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg blur opacity-75 animate-pulse"></div> | |
| <button class="relative bg-white text-purple-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-all"> | |
| <i class="fas fa-rocket mr-2"></i> Launch Agent | |
| </button> | |
| </div> | |
| <button class="bg-white bg-opacity-20 px-4 py-3 rounded-lg hover:bg-opacity-30 transition-all"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> | |
| <!-- Platform Cards --> | |
| <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fab fa-facebook-f text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Facebook</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Schedule posts, analyze engagement, and automate responses.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Posts</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Analytics</span> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-pink-100 p-3 rounded-full mr-4"> | |
| <i class="fab fa-instagram text-pink-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Instagram</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Auto-post images, stories, and reels with AI-generated captions.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Stories</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Reels</span> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-pink-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fab fa-twitter text-blue-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Twitter</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Tweet automatically, engage with trends, and grow your audience.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Threads</span> | |
| <span class="bg-cyan-100 text-cyan-800 text-xs px-2 py-1 rounded">Trends</span> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-400"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fab fa-linkedin-in text-blue-700 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">LinkedIn</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Professional content automation for networking and lead generation.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Articles</span> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Networking</span> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-700"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-black p-3 rounded-full mr-4"> | |
| <i class="fab fa-tiktok text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">TikTok</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Create and schedule viral short-form videos with AI assistance.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Videos</span> | |
| <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Sounds</span> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-black"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="platform-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-3 rounded-full mr-4"> | |
| <i class="fab fa-youtube text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">YouTube</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Upload videos, optimize thumbnails, and manage your channel.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Videos</span> | |
| <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">Shorts</span> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content Creation Section --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-bold mb-6">AI Content Generator</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Content Type</label> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <button class="bg-blue-100 text-blue-700 py-2 px-4 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-align-left mr-2"></i> Text | |
| </button> | |
| <button class="bg-green-100 text-green-700 py-2 px-4 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-image mr-2"></i> Image | |
| </button> | |
| <button class="bg-purple-100 text-purple-700 py-2 px-4 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-video mr-2"></i> Video | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Content Theme</label> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Business & Marketing</option> | |
| <option>Technology & AI</option> | |
| <option>Lifestyle & Wellness</option> | |
| <option>Entertainment</option> | |
| <option>Education</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Content Details</label> | |
| <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 h-32" placeholder="Describe what you want to post about..."></textarea> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="bg-blue-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center"> | |
| <i class="fas fa-magic mr-2"></i> Generate Content | |
| </button> | |
| <button class="bg-gray-100 text-gray-700 py-3 px-6 rounded-lg font-medium hover:bg-gray-200 transition-colors flex items-center"> | |
| <i class="fas fa-eraser mr-2"></i> Clear | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">Preview</label> | |
| <div class="content-preview bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl p-6 flex flex-col items-center justify-center h-full"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i> | |
| <p class="text-gray-500 text-center">Your generated content will appear here. Describe what you want to post and click "Generate Content".</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scheduling Section --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-bold mb-6">Post Scheduling</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Schedule Time</label> | |
| <div class="flex space-x-4"> | |
| <input type="date" class="p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-1"> | |
| <input type="time" class="p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-1"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">Post Frequency</label> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>One-time post</option> | |
| <option>Daily</option> | |
| <option>Weekly</option> | |
| <option>Monthly</option> | |
| <option>Custom</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">Platform Selection</label> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="facebook-schedule" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked> | |
| <label for="facebook-schedule" class="ml-2 block text-gray-700">Facebook</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="instagram-schedule" class="h-4 w-4 text-pink-600 focus:ring-pink-500 border-gray-300 rounded" checked> | |
| <label for="instagram-schedule" class="ml-2 block text-gray-700">Instagram</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="twitter-schedule" class="h-4 w-4 text-blue-400 focus:ring-blue-400 border-gray-300 rounded" checked> | |
| <label for="twitter-schedule" class="ml-2 block text-gray-700">Twitter</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="linkedin-schedule" class="h-4 w-4 text-blue-700 focus:ring-blue-700 border-gray-300 rounded" checked> | |
| <label for="linkedin-schedule" class="ml-2 block text-gray-700">LinkedIn</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="tiktok-schedule" class="h-4 w-4 text-black focus:ring-black border-gray-300 rounded" checked> | |
| <label for="tiktok-schedule" class="ml-2 block text-gray-700">TikTok</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="youtube-schedule" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded" checked> | |
| <label for="youtube-schedule" class="ml-2 block text-gray-700">YouTube</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end"> | |
| <button class="bg-green-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-green-700 transition-colors flex items-center"> | |
| <i class="fas fa-calendar-plus mr-2"></i> Schedule Post | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analytics Dashboard --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-bold mb-6">Performance Analytics</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-blue-600 font-medium">Total Posts</p> | |
| <h3 class="text-2xl font-bold mt-1">1,248</h3> | |
| </div> | |
| <div class="bg-blue-100 p-2 rounded-full"> | |
| <i class="fas fa-paper-plane text-blue-600"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-blue-600 mt-2"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-green-600 font-medium">Engagement Rate</p> | |
| <h3 class="text-2xl font-bold mt-1">8.2%</h3> | |
| </div> | |
| <div class="bg-green-100 p-2 rounded-full"> | |
| <i class="fas fa-heart text-green-600"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-green-600 mt-2"><i class="fas fa-arrow-up mr-1"></i> 3.5% from last month</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-purple-600 font-medium">New Followers</p> | |
| <h3 class="text-2xl font-bold mt-1">4,721</h3> | |
| </div> | |
| <div class="bg-purple-100 p-2 rounded-full"> | |
| <i class="fas fa-users text-purple-600"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-purple-600 mt-2"><i class="fas fa-arrow-up mr-1"></i> 18% from last month</p> | |
| </div> | |
| <div class="bg-orange-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-orange-600 font-medium">Click Rate</p> | |
| <h3 class="text-2xl font-bold mt-1">3.1%</h3> | |
| </div> | |
| <div class="bg-orange-100 p-2 rounded-full"> | |
| <i class="fas fa-mouse-pointer text-orange-600"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-orange-600 mt-2"><i class="fas fa-arrow-down mr-1"></i> 0.8% from last month</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">Platform Performance</h3> | |
| <select class="p-2 border border-gray-300 rounded-lg text-sm"> | |
| <option>Last 7 days</option> | |
| <option>Last 30 days</option> | |
| <option>Last 90 days</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4"> | |
| <div class="text-center"> | |
| <div class="h-32 w-full bg-blue-100 rounded-lg flex items-center justify-center mb-2"> | |
| <i class="fab fa-facebook-f text-blue-600 text-2xl"></i> | |
| </div> | |
| <p class="font-medium">Facebook</p> | |
| <p class="text-sm text-green-600">+12%</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="h-32 w-full bg-pink-100 rounded-lg flex items-center justify-center mb-2"> | |
| <i class="fab fa-instagram text-pink-600 text-2xl"></i> | |
| </div> | |
| <p class="font-medium">Instagram</p> | |
| <p class="text-sm text-green-600">+18%</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="h-32 w-full bg-blue-100 rounded-lg flex items-center justify-center mb-2"> | |
| <i class="fab fa-twitter text-blue-400 text-2xl"></i> | |
| </div> | |
| <p class="font-medium">Twitter</p> | |
| <p class="text-sm text-green-600">+7%</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="h-32 w-full bg-blue-100 rounded-lg flex items-center justify-center mb-2"> | |
| <i class="fab fa-linkedin-in text-blue-700 text-2xl"></i> | |
| </div> | |
| <p class="font-medium">LinkedIn</p> | |
| <p class="text-sm text-green-600">+22%</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="h-32 w-full bg-black rounded-lg flex items-center justify-center mb-2"> | |
| <i class="fab fa-tiktok text-white text-2xl"></i> | |
| </div> | |
| <p class="font-medium">TikTok</p> | |
| <p class="text-sm text-green-600">+35%</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="h-32 w-full bg-red-100 rounded-lg flex items-center justify-center mb-2"> | |
| <i class="fab fa-youtube text-red-600 text-2xl"></i> | |
| </div> | |
| <p class="font-medium">YouTube</p> | |
| <p class="text-sm text-green-600">+9%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h2 class="text-xl font-bold mb-2">AI Social Media Super Agent</h2> | |
| <p class="text-gray-400">Automate and optimize your social media presence</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 AI Social Media Super Agent. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Contact Us</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| </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=MainSource365/content-creation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |