| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SEO Blog Post Generator with Keyword Research</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); |
| } |
| .keyword-pill { |
| transition: all 0.2s ease; |
| } |
| .keyword-pill:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
| } |
| .loading-spinner { |
| border: 4px solid rgba(0, 0, 0, 0.1); |
| border-radius: 50%; |
| border-top: 4px solid #3498db; |
| width: 40px; |
| height: 40px; |
| animation: spin 1s linear infinite; |
| } |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| .tab-content { |
| display: none; |
| } |
| .tab-content.active { |
| display: block; |
| } |
| .tab-button { |
| transition: all 0.3s ease; |
| } |
| .tab-button.active { |
| border-bottom: 3px solid #3b82f6; |
| color: #3b82f6; |
| font-weight: 600; |
| } |
| .infographic-container { |
| background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%); |
| border-radius: 12px; |
| } |
| </style> |
| </head> |
| <body class="gradient-bg min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-7xl"> |
| <header class="text-center mb-12"> |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">SEO Blog Post Generator</h1> |
| <p class="text-lg text-gray-600">Research keywords and create optimized content with visuals</p> |
| </header> |
|
|
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
| |
| <div class="flex border-b border-gray-200 mb-6"> |
| <button class="tab-button px-4 py-2 mr-2 active" data-tab="keyword-research"> |
| <i class="fas fa-search mr-2"></i>Keyword Research |
| </button> |
| <button class="tab-button px-4 py-2 mr-2" data-tab="content-generator"> |
| <i class="fas fa-edit mr-2"></i>Content Generator |
| </button> |
| <button class="tab-button px-4 py-2" data-tab="visuals"> |
| <i class="fas fa-image mr-2"></i>Visual Assets |
| </button> |
| </div> |
|
|
| |
| <div id="keyword-research" class="tab-content active"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h2 class="text-2xl font-semibold mb-4 text-gray-800">Keyword Research Tool</h2> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="seed-keyword">Seed Keyword</label> |
| <input type="text" id="seed-keyword" placeholder="Enter your main keyword" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="competition-level">Competition Level</label> |
| <select id="competition-level" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="low">Low</option> |
| <option value="medium" selected>Medium</option> |
| <option value="high">High</option> |
| </select> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2" for="search-volume">Minimum Search Volume</label> |
| <select id="search-volume" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="100">100+</option> |
| <option value="500" selected>500+</option> |
| <option value="1000">1000+</option> |
| <option value="5000">5000+</option> |
| </select> |
| </div> |
| |
| <button id="research-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
| <i class="fas fa-search mr-2"></i> Find Keywords |
| </button> |
| </div> |
| |
| <div class="bg-gray-50 rounded-lg p-4"> |
| <h2 class="text-2xl font-semibold mb-4 text-gray-800">Keyword Suggestions</h2> |
| |
| <div id="keyword-results" class="space-y-3"> |
| <div class="text-center py-12 text-gray-400"> |
| <i class="fas fa-keyboard text-4xl mb-4"></i> |
| <p>Your keyword suggestions will appear here</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="content-generator" class="tab-content"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h2 class="text-2xl font-semibold mb-4 text-gray-800">Content Settings</h2> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="content-topic">Blog Topic</label> |
| <input type="text" id="content-topic" placeholder="Enter your blog topic" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="primary-keyword">Primary Keyword</label> |
| <input type="text" id="primary-keyword" placeholder="Main keyword to optimize for" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="secondary-keywords">Secondary Keywords</label> |
| <input type="text" id="secondary-keywords" placeholder="Comma separated related keywords" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="content-tone">Writing Tone</label> |
| <select id="content-tone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="professional">Professional</option> |
| <option value="casual">Casual</option> |
| <option value="friendly" selected>Friendly</option> |
| <option value="authoritative">Authoritative</option> |
| </select> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="content-length">Post Length</label> |
| <select id="content-length" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="short">Short (800 words)</option> |
| <option value="medium" selected>Medium (1200 words)</option> |
| <option value="long">Long (2000+ words)</option> |
| </select> |
| </div> |
| |
| <div class="flex items-center mb-4"> |
| <input type="checkbox" id="include-seo" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500" checked> |
| <label for="include-seo" class="ml-2 text-gray-700">Include SEO Optimizations</label> |
| </div> |
| |
| <div class="flex items-center mb-6"> |
| <input type="checkbox" id="include-lsi" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500" checked> |
| <label for="include-lsi" class="ml-2 text-gray-700">Include LSI Keywords</label> |
| </div> |
| |
| <button id="generate-content-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
| <i class="fas fa-magic mr-2"></i> Generate SEO Content |
| </button> |
| </div> |
| |
| <div class="bg-gray-50 rounded-lg p-4"> |
| <h2 class="text-2xl font-semibold mb-4 text-gray-800">Content Preview</h2> |
| |
| <div id="content-preview" class="space-y-4"> |
| <div class="text-center py-12 text-gray-400"> |
| <i class="fas fa-newspaper text-4xl mb-4"></i> |
| <p>Your generated content will appear here</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="visuals" class="tab-content"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <h2 class="text-2xl font-semibold mb-4 text-gray-800">Visual Asset Generator</h2> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="visual-topic">Image/Infographic Topic</label> |
| <input type="text" id="visual-topic" placeholder="What the visual should represent" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="visual-type">Asset Type</label> |
| <select id="visual-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="featured-image">Featured Image</option> |
| <option value="infographic">Infographic</option> |
| <option value="chart">Chart</option> |
| <option value="diagram">Diagram</option> |
| </select> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="visual-style">Style</label> |
| <select id="visual-style" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="modern">Modern</option> |
| <option value="minimal" selected>Minimal</option> |
| <option value="hand-drawn">Hand Drawn</option> |
| <option value="photorealistic">Photorealistic</option> |
| <option value="3d">3D Illustration</option> |
| </select> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2" for="color-scheme">Color Scheme</label> |
| <div class="flex space-x-2"> |
| <button class="color-scheme-btn w-8 h-8 rounded-full bg-blue-500 border-2 border-blue-700" data-scheme="blue"></button> |
| <button class="color-scheme-btn w-8 h-8 rounded-full bg-green-500 border-2 border-transparent" data-scheme="green"></button> |
| <button class="color-scheme-btn w-8 h-8 rounded-full bg-red-500 border-2 border-transparent" data-scheme="red"></button> |
| <button class="color-scheme-btn w-8 h-8 rounded-full bg-purple-500 border-2 border-transparent" data-scheme="purple"></button> |
| <button class="color-scheme-btn w-8 h-8 rounded-full bg-yellow-500 border-2 border-transparent" data-scheme="yellow"></button> |
| <button class="color-scheme-btn w-8 h-8 rounded-full bg-gray-500 border-2 border-transparent" data-scheme="monochrome"></button> |
| </div> |
| </div> |
| |
| <button id="generate-visual-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
| <i class="fas fa-image mr-2"></i> Generate Visual |
| </button> |
| </div> |
| |
| <div class="bg-gray-50 rounded-lg p-4"> |
| <h2 class="text-2xl font-semibold mb-4 text-gray-800">Generated Visual</h2> |
| |
| <div id="visual-preview" class="flex items-center justify-center min-h-64"> |
| <div class="text-center py-12 text-gray-400"> |
| <i class="fas fa-image text-4xl mb-4"></i> |
| <p>Your generated visual will appear here</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="result-container" class="hidden bg-white rounded-xl shadow-lg p-6 mb-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-semibold text-gray-800">Your SEO-Optimized Blog Post</h2> |
| <div class="flex space-x-2"> |
| <button id="copy-content-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg flex items-center"> |
| <i class="fas fa-copy mr-2"></i> Copy Content |
| </button> |
| <button id="download-visuals-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg flex items-center"> |
| <i class="fas fa-download mr-2"></i> Download Visuals |
| </button> |
| </div> |
| </div> |
| |
| <div id="loading" class="hidden flex justify-center items-center py-12"> |
| <div class="loading-spinner"></div> |
| <span class="ml-3 text-gray-600">Generating your content...</span> |
| </div> |
| |
| <div id="generated-content" class="space-y-6"> |
| |
| </div> |
| |
| <div id="seo-analysis" class="mt-8 bg-gray-50 p-4 rounded-lg"> |
| <h3 class="text-lg font-semibold mb-3">SEO Analysis</h3> |
| <div id="seo-metrics" class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| // Tab functionality |
| const tabs = document.querySelectorAll('.tab-button'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| |
| tabs.forEach(tab => { |
| tab.addEventListener('click', () => { |
| // Remove active class from all tabs and contents |
| tabs.forEach(t => t.classList.remove('active')); |
| tabContents.forEach(c => c.classList.remove('active')); |
| |
| // Add active class to clicked tab and corresponding content |
| tab.classList.add('active'); |
| const tabId = tab.getAttribute('data-tab'); |
| document.getElementById(tabId).classList.add('active'); |
| }); |
| }); |
| |
| // Color scheme selection |
| const colorSchemeButtons = document.querySelectorAll('.color-scheme-btn'); |
| let selectedColorScheme = 'blue'; |
| |
| colorSchemeButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| colorSchemeButtons.forEach(btn => btn.classList.remove('border-blue-700', 'border-2')); |
| this.classList.add('border-blue-700', 'border-2'); |
| selectedColorScheme = this.getAttribute('data-scheme'); |
| }); |
| }); |
| |
| // Keyword Research |
| const researchBtn = document.getElementById('research-btn'); |
| const keywordResults = document.getElementById('keyword-results'); |
| |
| researchBtn.addEventListener('click', function() { |
| const seedKeyword = document.getElementById('seed-keyword').value.trim(); |
| const competitionLevel = document.getElementById('competition-level').value; |
| const searchVolume = document.getElementById('search-volume').value; |
| |
| if (!seedKeyword) { |
| alert('Please enter a seed keyword'); |
| return; |
| } |
| |
| // Show loading state |
| researchBtn.disabled = true; |
| researchBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Researching...'; |
| keywordResults.innerHTML = '<div class="text-center py-12"><div class="loading-spinner inline-block"></div><p class="mt-4 text-gray-600">Finding relevant keywords...</p></div>'; |
| |
| // Simulate API call with timeout |
| setTimeout(() => { |
| generateKeywordSuggestions(seedKeyword, competitionLevel, searchVolume); |
| |
| // Reset button |
| researchBtn.disabled = false; |
| researchBtn.innerHTML = '<i class="fas fa-search mr-2"></i> Find Keywords'; |
| }, 2000); |
| }); |
| |
| // Generate Content |
| const generateContentBtn = document.getElementById('generate-content-btn'); |
| const contentPreview = document.getElementById('content-preview'); |
| const resultContainer = document.getElementById('result-container'); |
| const generatedContent = document.getElementById('generated-content'); |
| const loadingElement = document.getElementById('loading'); |
| const copyContentBtn = document.getElementById('copy-content-btn'); |
| const downloadVisualsBtn = document.getElementById('download-visuals-btn'); |
| const seoMetrics = document.getElementById('seo-metrics'); |
| |
| generateContentBtn.addEventListener('click', function() { |
| const topic = document.getElementById('content-topic').value.trim(); |
| const primaryKeyword = document.getElementById('primary-keyword').value.trim(); |
| const secondaryKeywords = document.getElementById('secondary-keywords').value; |
| const tone = document.getElementById('content-tone').value; |
| const length = document.getElementById('content-length').value; |
| const includeSeo = document.getElementById('include-seo').checked; |
| const includeLsi = document.getElementById('include-lsi').checked; |
| |
| if (!topic || !primaryKeyword) { |
| alert('Please enter a topic and primary keyword'); |
| return; |
| } |
| |
| // Show loading state |
| generateContentBtn.disabled = true; |
| generateContentBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...'; |
| contentPreview.innerHTML = '<div class="text-center py-12"><div class="loading-spinner inline-block"></div><p class="mt-4 text-gray-600">Creating your content...</p></div>'; |
| |
| // Show result container |
| resultContainer.classList.remove('hidden'); |
| generatedContent.innerHTML = ''; |
| seoMetrics.innerHTML = ''; |
| loadingElement.classList.remove('hidden'); |
| |
| // Simulate API call with timeout |
| setTimeout(() => { |
| generateSeoContent(topic, primaryKeyword, secondaryKeywords, tone, length, includeSeo, includeLsi); |
| |
| // Reset button |
| generateContentBtn.disabled = false; |
| generateContentBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate SEO Content'; |
| loadingElement.classList.add('hidden'); |
| }, 3000); |
| }); |
| |
| // Generate Visuals |
| const generateVisualBtn = document.getElementById('generate-visual-btn'); |
| const visualPreview = document.getElementById('visual-preview'); |
| |
| generateVisualBtn.addEventListener('click', function() { |
| const topic = document.getElementById('visual-topic').value.trim(); |
| const type = document.getElementById('visual-type').value; |
| const style = document.getElementById('visual-style').value; |
| |
| if (!topic) { |
| alert('Please enter a topic for the visual'); |
| return; |
| } |
| |
| // Show loading state |
| generateVisualBtn.disabled = true; |
| generateVisualBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Creating...'; |
| visualPreview.innerHTML = '<div class="text-center py-12"><div class="loading-spinner inline-block"></div><p class="mt-4 text-gray-600">Designing your visual...</p></div>'; |
| |
| // Simulate API call with timeout |
| setTimeout(() => { |
| generateVisualAsset(topic, type, style, selectedColorScheme); |
| |
| // Reset button |
| generateVisualBtn.disabled = false; |
| generateVisualBtn.innerHTML = '<i class="fas fa-image mr-2"></i> Generate Visual'; |
| }, 2000); |
| }); |
| |
| // Copy Content |
| copyContentBtn.addEventListener('click', function() { |
| const range = document.createRange(); |
| range.selectNode(generatedContent); |
| window.getSelection().removeAllRanges(); |
| window.getSelection().addRange(range); |
| document.execCommand('copy'); |
| window.getSelection().removeAllRanges(); |
| |
| // Show copied feedback |
| const originalText = copyContentBtn.innerHTML; |
| copyContentBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!'; |
| setTimeout(() => { |
| copyContentBtn.innerHTML = originalText; |
| }, 2000); |
| }); |
| |
| // Download Visuals |
| downloadVisualsBtn.addEventListener('click', function() { |
| alert('Visual assets downloaded! (This is a simulation)'); |
| }); |
| |
| // Function to generate keyword suggestions |
| function generateKeywordSuggestions(seedKeyword, competitionLevel, searchVolume) { |
| // Sample keyword data based on inputs |
| const keywordGroups = { |
| low: [ |
| {keyword: `${seedKeyword} for beginners`, volume: 3200, difficulty: 32}, |
| {keyword: `best ${seedKeyword} techniques`, volume: 2400, difficulty: 45}, |
| {keyword: `${seedKeyword} tips and tricks`, volume: 1800, difficulty: 28}, |
| {keyword: `how to use ${seedKeyword}`, volume: 5900, difficulty: 38}, |
| {keyword: `${seedKeyword} examples`, volume: 2100, difficulty: 25}, |
| {keyword: `${seedKeyword} guide`, volume: 4300, difficulty: 41}, |
| {keyword: `${seedKeyword} benefits`, volume: 1700, difficulty: 22}, |
| {keyword: `${seedKeyword} vs alternatives`, volume: 1200, difficulty: 19} |
| ], |
| medium: [ |
| {keyword: `${seedKeyword} strategies`, volume: 5400, difficulty: 58}, |
| {keyword: `${seedKeyword} best practices`, volume: 4800, difficulty: 62}, |
| {keyword: `advanced ${seedKeyword}`, volume: 3200, difficulty: 55}, |
| {keyword: `${seedKeyword} case studies`, volume: 2100, difficulty: 48}, |
| {keyword: `${seedKeyword} trends 2023`, volume: 3900, difficulty: 52}, |
| {keyword: `${seedKeyword} implementation`, volume: 2800, difficulty: 49}, |
| {keyword: `${seedKeyword} optimization`, volume: 3600, difficulty: 56}, |
| {keyword: `${seedKeyword} tools`, volume: 6700, difficulty: 65} |
| ], |
| high: [ |
| {keyword: `what is ${seedKeyword}`, volume: 12100, difficulty: 78}, |
| {keyword: `${seedKeyword} tutorial`, volume: 9800, difficulty: 82}, |
| {keyword: `${seedKeyword} software`, volume: 8500, difficulty: 75}, |
| {keyword: `${seedKeyword} course`, volume: 7200, difficulty: 71}, |
| {keyword: `${seedKeyword} training`, volume: 6300, difficulty: 68}, |
| {keyword: `${seedKeyword} certification`, volume: 5400, difficulty: 72}, |
| {keyword: `${seedKeyword} services`, volume: 9100, difficulty: 79}, |
| {keyword: `${seedKeyword} solutions`, volume: 7800, difficulty: 76} |
| ] |
| }; |
| |
| // Filter by search volume |
| const minVolume = parseInt(searchVolume); |
| let keywords = keywordGroups[competitionLevel].filter(k => k.volume >= minVolume); |
| |
| // Sort by volume (descending) |
| keywords.sort((a, b) => b.volume - a.volume); |
| |
| // Generate HTML |
| let html = ''; |
| |
| if (keywords.length === 0) { |
| html = '<div class="text-center py-8 text-gray-500">No keywords found matching your criteria. Try adjusting your filters.</div>'; |
| } else { |
| keywords.forEach(kw => { |
| const difficultyColor = kw.difficulty < 40 ? 'bg-green-100 text-green-800' : |
| kw.difficulty < 70 ? 'bg-yellow-100 text-yellow-800' : |
| 'bg-red-100 text-red-800'; |
| |
| html += ` |
| <div class="keyword-pill bg-white p-3 rounded-lg shadow-sm flex justify-between items-center"> |
| <span class="font-medium">${kw.keyword}</span> |
| <div class="flex items-center space-x-3"> |
| <span class="text-sm text-gray-500"><i class="fas fa-chart-line mr-1"></i> ${kw.volume.toLocaleString()}/mo</span> |
| <span class="text-sm px-2 py-1 rounded ${difficultyColor}">Difficulty: ${kw.difficulty}</span> |
| <button class="text-blue-500 hover:text-blue-700" onclick="addKeywordToContent('${kw.keyword}')"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| `; |
| }); |
| } |
| |
| keywordResults.innerHTML = html; |
| } |
| |
| // Function to generate SEO content |
| function generateSeoContent(topic, primaryKeyword, secondaryKeywords, tone, length, includeSeo, includeLsi) { |
| // Word counts |
| const wordCounts = { |
| short: 800, |
| medium: 1200, |
| long: 2000 |
| }; |
| |
| // Tone variations |
| const tones = { |
| professional: { |
| intro: `In today's competitive landscape, ${topic} has emerged as a critical consideration for businesses and individuals alike.`, |
| transition: `When examining the implications of ${topic}, it becomes evident that`, |
| conclusion: `In summary, the comprehensive analysis of ${topic} presented here underscores its significance.` |
| }, |
| casual: { |
| intro: `Let's talk about ${topic} - it's become a pretty big deal recently, and for good reason.`, |
| transition: `So here's the thing about ${topic} -`, |
| conclusion: `At the end of the day, ${topic} is something worth paying attention to.` |
| }, |
| friendly: { |
| intro: `I'd love to share with you about ${topic}, which has become increasingly important in our daily lives.`, |
| transition: `What's really interesting about ${topic} is that`, |
| conclusion: `I hope this exploration of ${topic} has been helpful and informative for you!` |
| }, |
| authoritative: { |
| intro: `${topic.charAt(0).toUpperCase() + topic.slice(1)} represents one of the most impactful developments in recent years, with far-reaching consequences.`, |
| transition: `The evidence clearly demonstrates that ${topic}`, |
| conclusion: `The findings presented here leave no doubt about the importance of ${topic}.` |
| } |
| }; |
| |
| // LSI keywords based on topic |
| const lsiKeywords = [ |
| `${topic} definition`, |
| `${topic} meaning`, |
| `${topic} examples`, |
| `${topic} benefits`, |
| `${topic} advantages`, |
| `${topic} features`, |
| `${topic} applications`, |
| `${topic} uses` |
| ]; |
| |
| // Generate HTML content |
| let htmlContent = ''; |
| |
| // Add featured image |
| htmlContent += ` |
| <div class="mb-6"> |
| <img src="https://source.unsplash.com/800x450/?${encodeURIComponent(topic)},seo" alt="${topic}" class="w-full h-auto rounded-lg shadow-md"> |
| <p class="text-sm text-gray-500 mt-2 text-center">Featured image representing "${topic}"</p> |
| </div> |
| |
| <h1 class="text-3xl font-bold text-gray-800 mb-4">${topic.charAt(0).toUpperCase() + topic.slice(1)}: The Complete Guide</h1> |
| |
| <div class="flex items-center text-sm text-gray-500 mb-6"> |
| <span class="mr-4"><i class="far fa-calendar-alt mr-1"></i> ${new Date().toLocaleDateString()}</span> |
| <span><i class="far fa-clock mr-1"></i> ${Math.ceil(wordCounts[length] / 200)} min read</span> |
| </div> |
| |
| <div class="prose max-w-none"> |
| <p class="text-gray-700 mb-4 leading-relaxed">${tones[tone].intro} ${secondaryKeywords ? `We'll explore aspects including ${secondaryKeywords.split(',').slice(0, 3).join(', ')}.` : ''}</p> |
| |
| <h2 class="text-2xl font-semibold mt-6 mb-4 text-gray-800">Understanding ${topic}</h2> |
| <p class="text-gray-700 mb-4 leading-relaxed">${topic} refers to ${includeLsi ? lsiKeywords.slice(0, 3).join(', ') : 'a concept'} that has gained significant traction. ${tones[tone].transition} it offers numerous benefits that can't be ignored.</p> |
| |
| <h2 class="text-2xl font-semibold mt-6 mb-4 text-gray-800">Key Benefits of ${topic}</h2> |
| <ul class="list-disc pl-5 space-y-2 text-gray-700 mb-4"> |
| <li>Increased efficiency and productivity</li> |
| <li>Cost-effective solutions for common problems</li> |
| <li>${includeSeo ? 'Improved search engine visibility' : 'Enhanced visibility'}</li> |
| <li>Better user experience and engagement</li> |
| </ul> |
| |
| <h2 class="text-2xl font-semibold mt-6 mb-4 text-gray-800">How to Implement ${topic}</h2> |
| <p class="text-gray-700 mb-4 leading-relaxed">Implementing ${topic} effectively requires careful planning. Here are the essential steps:</p> |
| <ol class="list-decimal pl-5 space-y-2 text-gray-700 mb-4"> |
| <li>Conduct thorough research on ${primaryKeyword}</li> |
| <li>${includeSeo ? 'Optimize your content for search engines' : 'Create high-quality content'}</li> |
| <li>Measure and analyze your results</li> |
| <li>Iterate and improve based on data</li> |
| </ol> |
| |
| <div class="bg-blue-50 p-4 rounded-lg my-6"> |
| <h3 class="text-lg font-semibold mb-2 text-blue-800">Pro Tip</h3> |
| <p class="text-blue-700">For best results with ${topic}, focus on ${includeSeo ? 'both user experience and search engine optimization' : 'delivering real value to your audience'}.</p> |
| </div> |
| |
| <h2 class="text-2xl font-semibold mt-6 mb-4 text-gray-800">Common Challenges</h2> |
| <p class="text-gray-700 mb-4 leading-relaxed">While ${topic} offers many advantages, there are challenges to consider:</p> |
| <ul class="list-disc pl-5 space-y-2 text-gray-700 mb-4"> |
| <li>Steep learning curve for beginners</li> |
| <li>Potential ${includeLsi ? lsiKeywords[5] : 'technical issues'}</li> |
| <li>Time investment required</li> |
| </ul> |
| |
| <h2 class="text-2xl font-semibold mt-6 mb-4 text-gray-800">Conclusion</h2> |
| <p class="text-gray-700 mb-4 leading-relaxed">${tones[tone].conclusion} Whether you're just getting started or looking to enhance your existing approach, this guide provides the foundation you need.</p> |
| </div> |
| `; |
| |
| // Generate infographic |
| htmlContent += ` |
| <div class="infographic-container p-6 my-8"> |
| <h2 class="text-2xl font-semibold mb-4 text-center text-gray-800">${topic} At a Glance</h2> |
| <img src="https://source.unsplash.com/800x400/?infographic,${encodeURIComponent(topic)}" alt="${topic} infographic" class="w-full h-auto rounded-lg mb-4"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center"> |
| <div class="bg-white p-3 rounded-lg shadow-sm"> |
| <div class="text-blue-500 text-2xl font-bold mb-1">75%</div> |
| <div class="text-gray-600 text-sm">Adoption Rate</div> |
| </div> |
| <div class="bg-white p-3 rounded-lg shadow-sm"> |
| <div class="text-green-500 text-2xl font-bold mb-1">3.5x</div> |
| <div class="text-gray-600 text-sm">More Effective</div> |
| </div> |
| <div class="bg-white p-3 rounded-lg shadow-sm"> |
| <div class="text-purple-500 text-2xl font-bold mb-1">90%</div> |
| <div class="text-gray-600 text-sm">Satisfaction</div> |
| </div> |
| <div class="bg-white p-3 rounded-lg shadow-sm"> |
| <div class="text-yellow-500 text-2xl font-bold mb-1">40%</div> |
| <div class="text-gray-600 text-sm">Cost Savings</div> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| // Add call to action |
| htmlContent += ` |
| <div class="bg-gray-50 p-6 rounded-lg mt-8"> |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Ready to Get Started with ${topic}?</h3> |
| <p class="text-gray-700 mb-4">Implement these strategies today to see measurable results.</p> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg"> |
| Learn More About ${primaryKeyword} |
| </button> |
| </div> |
| `; |
| |
| // Update preview and result |
| contentPreview.innerHTML = ` |
| <div class="bg-white p-4 rounded-lg shadow"> |
| <h3 class="text-xl font-semibold mb-2">${topic}</h3> |
| <p class="text-gray-600 text-sm mb-3">${tones[tone].intro.substring(0, 120)}...</p> |
| <div class="flex flex-wrap gap-2 mb-3"> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">${primaryKeyword}</span> |
| ${secondaryKeywords ? secondaryKeywords.split(',').slice(0, 3).map(kw => |
| `<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">${kw.trim()}</span>` |
| ).join('') : ''} |
| </div> |
| <img src="https://source.unsplash.com/300x150/?${encodeURIComponent(topic)}" alt="Preview" class="w-full h-auto rounded"> |
| </div> |
| `; |
| |
| generatedContent.innerHTML = htmlContent; |
| |
| // Generate SEO metrics |
| const seoScore = Math.floor(Math.random() * 30) + 70; // Random score between 70-100 |
| const keywordDensity = (Math.random() * 3 + 1).toFixed(1); // 1.0-4.0% |
| const readabilityScore = Math.floor(Math.random() * 30) + 70; // 70-100 |
| |
| seoMetrics.innerHTML = ` |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-2"> |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-search text-green-600"></i> |
| </div> |
| <div> |
| <div class="font-medium">SEO Score</div> |
| <div class="text-2xl font-bold text-green-600">${seoScore}/100</div> |
| </div> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: ${seoScore}%"></div> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-2"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-key text-blue-600"></i> |
| </div> |
| <div> |
| <div class="font-medium">Keyword Density</div> |
| <div class="text-2xl font-bold text-blue-600">${keywordDensity}%</div> |
| </div> |
| </div> |
| <div class="text-sm text-gray-500">Primary keyword appears ${Math.floor(wordCounts[length] * keywordDensity / 100)} times</div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-2"> |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-book-reader text-purple-600"></i> |
| </div> |
| <div> |
| <div class="font-medium">Readability</div> |
| <div class="text-2xl font-bold text-purple-600">${readabilityScore}/100</div> |
| </div> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-purple-500 h-2 rounded-full" style="width: ${readabilityScore}%"></div> |
| </div> |
| </div> |
| `; |
| } |
| |
| // Function to generate visual assets |
| function generateVisualAsset(topic, type, style, colorScheme) { |
| // Color schemes |
| const colorSchemes = { |
| blue: ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe'], |
| green: ['#10b981', '#34d399', '#6ee7b7', '#a7f3d0'], |
| red: ['#ef4444', '#f87171', '#fca5a5', '#fecaca'], |
| purple: ['#8b5cf6', '#a78bfa', '#c4b5fd', '#ddd6fe'], |
| yellow: ['#f59e0b', '#fbbf24', '#fcd34d', '#fde68a'], |
| monochrome: ['#4b5563', '#6b7280', '#9ca3af', '#d1d5db'] |
| }; |
| |
| const colors = colorSchemes[colorScheme]; |
| |
| let visualHtml = ''; |
| |
| if (type === 'featured-image') { |
| visualHtml = ` |
| <div class="relative rounded-lg overflow-hidden shadow-lg"> |
| <img src="https://source.unsplash.com/800x450/?${style},${encodeURIComponent(topic)}" alt="${topic}" class="w-full h-auto"> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6"> |
| <h3 class="text-2xl font-bold text-white">${topic}</h3> |
| <p class="text-white/80">Featured image in ${style} style</p> |
| </div> |
| </div> |
| `; |
| } |
| else if (type === 'infographic') { |
| visualHtml = ` |
| <div class="infographic-container p-6"> |
| <h3 class="text-2xl font-bold text-center mb-6" style="color: ${colors[0]}">${topic} Infographic</h3> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3" style="background-color: ${colors[1]}"> |
| <i class="fas fa-chart-line text-white"></i> |
| </div> |
| <h4 class="font-semibold">Growth Trends</h4> |
| </div> |
| <div class="h-40 bg-gray-100 rounded flex items-center justify-center"> |
| <div class="text-center"> |
| <div class="text-3xl font-bold mb-1" style="color: ${colors[0]}">+42%</div> |
| <div class="text-gray-500 text-sm">Annual Growth</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-full flex items-center justify-center mr-3" style="background-color: ${colors[2]}"> |
| <i class="fas fa-users text-white"></i> |
| </div> |
| <h4 class="font-semibold">User Adoption</h4> |
| </div> |
| <div class="h-40 bg-gray-100 rounded flex items-center justify-center"> |
| <div class="text-center"> |
| <div class="text-3xl font-bold mb-1" style="color: ${colors[0]}">78%</div> |
| <div class="text-gray-500 text-sm">Of organizations</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <h4 class="font-semibold mb-3 text-center">Key Benefits</h4> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> |
| <div class="p-3 rounded text-center" style="background-color: ${colors[3]}"> |
| <i class="fas fa-bolt mb-2" style="color: ${colors[0]}"></i> |
| <div class="font-medium text-sm">Efficiency</div> |
| </div> |
| <div class="p-3 rounded text-center" style="background-color: ${colors[3]}"> |
| <i class="fas fa-dollar-sign mb-2" style="color: ${colors[0]}"></i> |
| <div class="font-medium text-sm">Cost Savings</div> |
| </div> |
| <div class="p-3 rounded text-center" style="background-color: ${colors[3]}"> |
| <i class="fas fa-user-check mb-2" style="color: ${colors[0]}"></i> |
| <div class="font-medium text-sm">User Experience</div> |
| </div> |
| <div class="p-3 rounded text-center" style="background-color: ${colors[3]}"> |
| <i class="fas fa-shield-alt mb-2" style="color: ${colors[0]}"></i> |
| <div class="font-medium text-sm">Reliability</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| } |
| else if (type === 'chart') { |
| visualHtml = ` |
| <div class="bg-white p-6 rounded-lg shadow"> |
| <h3 class="text-xl font-semibold mb-4 text-center" style="color: ${colors[0]}">${topic} Statistics</h3> |
| <div class="h-64 flex items-end justify-center space-x-2 mb-6"> |
| <div class="w-10 h-3/5 rounded-t" style="background-color: ${colors[1]}"></div> |
| <div class="w-10 h-4/5 rounded-t" style="background-color: ${colors[0]}"></div> |
| <div class="w-10 h-1/2 rounded-t" style="background-color: ${colors[2]}"></div> |
| <div class="w-10 h-2/3 rounded-t" style="background-color: ${colors[1]}"></div> |
| <div class="w-10 h-3/4 rounded-t" style="background-color: ${colors[0]}"></div> |
| </div> |
| <div class="grid grid-cols-5 gap-2 text-center text-sm text-gray-600"> |
| <div>Q1</div> |
| <div>Q2</div> |
| <div>Q3</div> |
| <div>Q4</div> |
| <div>Now</div> |
| </div> |
| </div> |
| `; |
| } |
| else if (type === 'diagram') { |
| visualHtml = ` |
| <div class="bg-white p-6 rounded-lg shadow"> |
| <h3 class="text-xl font-semibold mb-6 text-center" style="color: ${colors[0]}">${topic} Process Flow</h3> |
| <div class="flex flex-col items-center"> |
| <div class="w-16 h-16 rounded-full flex items-center justify-center mb-2" style="background-color: ${colors[0]}"> |
| <i class="fas fa-play text-white"></i> |
| </div> |
| <div class="h-6 w-1 mb-2" style="background-color: ${colors[1]}"></div> |
| |
| <div class="w-16 h-16 rounded-full flex items-center justify-center mb-2" style="background-color: ${colors[1]}"> |
| <i class="fas fa-search text-white"></i> |
| </div> |
| <div class="h-6 w-1 mb-2" style="background-color: ${colors[1]}"></div> |
| |
| <div class="w-16 h-16 rounded-full flex items-center justify-center mb-2" style="background-color: ${colors[2]}"> |
| <i class="fas fa-cog text-white"></i> |
| </div> |
| <div class="h-6 w-1 mb-2" style="background-color: ${colors[1]}"></div> |
| |
| <div class="w-16 h-16 rounded-full flex items-center justify-center mb-2" style="background-color: ${colors[0]}"> |
| <i class="fas fa-check text-white"></i> |
| </div> |
| </div> |
| </div> |
| `; |
| } |
| |
| visualPreview.innerHTML = visualHtml; |
| } |
| |
| // Global function to add keyword to content generator |
| window.addKeywordToContent = function(keyword) { |
| const secondaryKeywordsInput = document.getElementById('secondary-keywords'); |
| const currentKeywords = secondaryKeywordsInput.value; |
| |
| if (currentKeywords) { |
| secondaryKeywordsInput.value = `${currentKeywords}, ${keyword}`; |
| } else { |
| secondaryKeywordsInput.value = keyword; |
| } |
| |
| // Switch to content generator tab |
| document.querySelector('[data-tab="content-generator"]').click(); |
| document.getElementById('content-topic').focus(); |
| }; |
| }); |
| </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=KatEdwards/social-media-tools" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
