content-creation / index.html
MainSource365's picture
undefined - Initial Deployment
11fe8c1 verified
Raw History Blame Contribute Delete
32.5 kB
<!DOCTYPE html>
<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>
// Simple animation for the generate content button
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', function() {
this.classList.add('transform', 'scale-95');
setTimeout(() => {
this.classList.remove('transform', 'scale-95');
}, 150);
});
});
// Simulate content generation
document.querySelector('.bg-blue-600').addEventListener('click', function() {
const preview = document.querySelector('.content-preview');
preview.innerHTML = `
<div class="w-full">
<div class="bg-white p-4 rounded-lg shadow mb-4">
<h4 class="font-bold mb-2">AI-Generated Post Content</h4>
<p class="text-gray-700 mb-3">"The future of social media is automated! With AI-powered tools, you can create engaging content, schedule posts, and analyze performance across all platforms from one dashboard. #SocialMedia #AI #Marketing"</p>
<div class="flex justify-between text-sm text-gray-500">
<span><i class="far fa-clock mr-1"></i> Just now</span>
<span><i class="fas fa-robot mr-1"></i> AI Generated</span>
</div>
</div>
<div class="grid grid-cols-2 gap-2 mb-4">
<div class="bg-blue-100 rounded-lg h-24 flex items-center justify-center">
<i class="fas fa-image text-blue-400 text-xl"></i>
</div>
<div class="bg-green-100 rounded-lg h-24 flex items-center justify-center">
<i class="fas fa-chart-line text-green-400 text-xl"></i>
</div>
</div>
<button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700 transition-colors">
<i class="fas fa-share-alt mr-2"></i> Post to Selected Platforms
</button>
</div>
`;
});
</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>