Hugging Face's logo

Spaces:
Gughanmk
/
ai
Running

App Files Community
ai / index.html
Gughanmk's picture
Gughanmk
Add 1 files
572ccaa verified
raw
history blame contribute delete
64 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI SEO Content Generator | Boost Your Rankings</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#10B981',
dark: '#1F2937',
light: '#F9FAFB',
accent: '#F59E0B',
danger: '#EF4444'
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'bounce-slow': 'bounce 2s infinite',
'spin-slow': 'spin 3s linear infinite'
}
}
}
}
</script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%);
}
.content-editor {
min-height: 500px;
border: 1px solid #E5E7EB;
border-radius: 0.5rem;
padding: 1.5rem;
}
.seo-score-meter {
width: 100%;
height: 8px;
background-color: #E5E7EB;
border-radius: 4px;
overflow: hidden;
}
.seo-score-progress {
height: 100%;
background: linear-gradient(90deg, #EF4444 0%, #F59E0B 50%, #10B981 100%);
}
.schema-tag {
background-color: #EFF6FF;
border-left: 3px solid #3B82F6;
padding: 0.5rem 1rem;
margin: 0.5rem 0;
border-radius: 0.25rem;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 200px;
background-color: #1F2937;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -100px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.tab-active {
border-bottom: 2px solid #4F46E5;
color: #4F46E5;
font-weight: 500;
}
.keyword-badge {
display: inline-flex;
align-items: center;
background-color: #E0E7FF;
color: #4F46E5;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
.keyword-badge button {
margin-left: 0.25rem;
color: #4F46E5;
opacity: 0.5;
}
.keyword-badge button:hover {
opacity: 1;
}
.readability-score {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
background: conic-gradient(#10B981 0% 75%, #F59E0B 75% 90%, #EF4444 90% 100%);
color: white;
}
.content-placeholder {
color: #9CA3AF;
pointer-events: none;
user-select: none;
}
.editor-toolbar {
position: sticky;
top: 0;
background: white;
z-index: 10;
padding: 0.5rem 0;
border-bottom: 1px solid #E5E7EB;
margin-bottom: 1rem;
}
.floating-toolbar {
position: absolute;
background: white;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border-radius: 0.375rem;
display: none;
z-index: 20;
}
.content-editor:focus-within .floating-toolbar {
display: flex;
}
.ai-suggestion {
background-color: #F0FDF4;
border-left: 3px solid #10B981;
padding: 0.75rem;
margin: 0.5rem 0;
border-radius: 0.25rem;
position: relative;
}
.ai-suggestion-actions {
position: absolute;
right: 0.5rem;
top: 0.5rem;
}
.content-editor h2 {
font-size: 1.5rem;
font-weight: 600;
margin: 1.5rem 0 1rem 0;
color: #1F2937;
}
.content-editor h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 1.25rem 0 0.75rem 0;
color: #1F2937;
}
.content-editor p {
margin: 0.75rem 0;
line-height: 1.6;
}
.content-editor ul, .content-editor ol {
margin: 0.75rem 0;
padding-left: 1.5rem;
}
.content-editor li {
margin: 0.25rem 0;
}
.content-editor table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
.content-editor th, .content-editor td {
border: 1px solid #E5E7EB;
padding: 0.5rem;
text-align: left;
}
.content-editor th {
background-color: #F3F4F6;
font-weight: 600;
}
.content-editor blockquote {
border-left: 4px solid #E5E7EB;
padding-left: 1rem;
margin: 1rem 0;
color: #6B7280;
}
.content-editor img {
max-width: 100%;
height: auto;
margin: 1rem 0;
border-radius: 0.375rem;
}
.content-editor a {
color: #4F46E5;
text-decoration: underline;
}
.content-editor a:hover {
color: #4338CA;
}
.content-editor .code-block {
background-color: #F3F4F6;
padding: 1rem;
border-radius: 0.375rem;
font-family: monospace;
margin: 1rem 0;
overflow-x: auto;
}
.content-editor .ai-highlight {
background-color: #EFF6FF;
padding: 0.25rem;
border-radius: 0.125rem;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Navigation -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-robot text-primary text-2xl mr-2"></i>
<span class="text-xl font-bold text-dark">AISEO</span>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#" class="border-primary text-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Content</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Analytics</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Settings</a>
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<div class="relative mr-4">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="fas fa-search text-gray-400"></i>
</div>
<input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm" placeholder="Search...">
</div>
<button class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
<i class="fas fa-bolt mr-2"></i> Upgrade Plan
</button>
<div class="ml-3 relative">
<div>
<button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
</div>
</div>
</div>
<div class="-mr-2 flex items-center sm:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex flex-col lg:flex-row gap-8">
<!-- Left Sidebar -->
<div class="w-full lg:w-1/4 space-y-6">
<!-- AI Model Selection -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-dark">AI Content Generator</h3>
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
AI Model
<span class="tooltip ml-1">
<i class="fas fa-info-circle text-gray-400"></i>
<span class="tooltip-text">Choose between Gemini, GPT-4, or Claude models</span>
</span>
</label>
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
<option selected>Gemini Pro</option>
<option>GPT-4 Turbo</option>
<option>Claude 3</option>
<option>Llama 3</option>
<option>Mistral 7B</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Content Type</label>
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
<option selected>Blog Post</option>
<option>Product Description</option>
<option>Landing Page</option>
<option>FAQ Section</option>
<option>How-To Guide</option>
<option>Comparison Article</option>
<option>News Article</option>
<option>Case Study</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Tone</label>
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
<option selected>Professional</option>
<option>Conversational</option>
<option>Friendly</option>
<option>Authoritative</option>
<option>Technical</option>
<option>Persuasive</option>
<option>Humorous</option>
<option>Formal</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Target Audience</label>
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
<option selected>General Audience</option>
<option>Business Professionals</option>
<option>Tech Savvy</option>
<option>Beginners</option>
<option>Experts</option>
<option>Students</option>
<option>Seniors</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Content Language</label>
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
<option selected>English</option>
<option>Spanish</option>
<option>French</option>
<option>German</option>
<option>Portuguese</option>
<option>Chinese</option>
<option>Japanese</option>
</select>
</div>
</div>
</div>
<!-- SEO Optimization -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-medium text-dark mb-4">SEO Optimization</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Primary Keyword</label>
<input type="text" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="e.g. best seo tools" value="AI content generation">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Secondary Keywords</label>
<div class="mt-1 flex flex-wrap p-2 border border-gray-300 rounded-md min-h-10">
<span class="keyword-badge">
SEO content tools
<button type="button"><i class="fas fa-times"></i></button>
</span>
<span class="keyword-badge">
AI writing assistant
<button type="button"><i class="fas fa-times"></i></button>
</span>
<span class="keyword-badge">
content automation
<button type="button"><i class="fas fa-times"></i></button>
</span>
<input type="text" class="flex-grow bg-transparent focus:outline-none text-sm" placeholder="Add keyword..." id="keyword-input">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Word Count</label>
<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
<option>500-800 words</option>
<option selected>800-1200 words</option>
<option>1200-2000 words</option>
<option>2000+ words</option>
</select>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="flex items-center">
<input id="generate-faq" name="generate-faq" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="generate-faq" class="ml-2 block text-sm text-gray-700">FAQ Section</label>
</div>
<div class="flex items-center">
<input id="generate-schema" name="generate-schema" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="generate-schema" class="ml-2 block text-sm text-gray-700">Schema Markup</label>
</div>
<div class="flex items-center">
<input id="generate-lsi" name="generate-lsi" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="generate-lsi" class="ml-2 block text-sm text-gray-700">LSI Keywords</label>
</div>
<div class="flex items-center">
<input id="generate-tables" name="generate-tables" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="generate-tables" class="ml-2 block text-sm text-gray-700">Data Tables</label>
</div>
<div class="flex items-center">
<input id="generate-images" name="generate-images" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="generate-images" class="ml-2 block text-sm text-gray-700">Images</label>
</div>
<div class="flex items-center">
<input id="generate-links" name="generate-links" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="generate-links" class="ml-2 block text-sm text-gray-700">Internal Links</label>
</div>
</div>
<div class="pt-2">
<button class="w-full bg-primary text-white py-2 px-4 rounded-md text-sm font-medium hover:bg-indigo-700 flex items-center justify-center" id="optimize-content">
<i class="fas fa-magic mr-2"></i> Optimize Content
</button>
</div>
</div>
</div>
<!-- Content Structure -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-medium text-dark mb-4">Content Structure</h3>
<div class="space-y-3">
<div class="flex items-center">
<input id="add-intro" name="add-intro" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="add-intro" class="ml-2 block text-sm text-gray-700">Introduction</label>
</div>
<div class="flex items-center">
<input id="add-headings" name="add-headings" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="add-headings" class="ml-2 block text-sm text-gray-700">H2/H3 Headings</label>
</div>
<div class="flex items-center">
<input id="add-images" name="add-images" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="add-images" class="ml-2 block text-sm text-gray-700">Relevant Images</label>
</div>
<div class="flex items-center">
<input id="add-lists" name="add-lists" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="add-lists" class="ml-2 block text-sm text-gray-700">Bullet/Numbers Lists</label>
</div>
<div class="flex items-center">
<input id="add-conclusion" name="add-conclusion" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="add-conclusion" class="ml-2 block text-sm text-gray-700">Conclusion</label>
</div>
<div class="flex items-center">
<input id="add-cta" name="add-cta" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="add-cta" class="ml-2 block text-sm text-gray-700">Call-to-Action</label>
</div>
<div class="flex items-center">
<input id="add-statistics" name="add-statistics" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="add-statistics" class="ml-2 block text-sm text-gray-700">Statistics</label>
</div>
<div class="flex items-center">
<input id="add-quotes" name="add-quotes" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="add-quotes" class="ml-2 block text-sm text-gray-700">Expert Quotes</label>
</div>
<div class="flex items-center">
<input id="add-code" name="add-code" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="add-code" class="ml-2 block text-sm text-gray-700">Code Examples</label>
</div>
</div>
</div>
</div>
<!-- Main Editor Area -->
<div class="w-full lg:w-2/4">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold text-dark">Content Editor</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 flex items-center">
<i class="fas fa-save mr-1"></i> Save Draft
</button>
<button class="px-3 py-1 bg-primary text-white rounded-md text-sm font-medium hover:bg-indigo-700 flex items-center" id="generate-content">
<i class="fas fa-robot mr-1"></i> Generate Content
</button>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
<input type="text" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Enter your article title" value="The Ultimate Guide to AI-Powered SEO Content Creation" id="content-title">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Meta Description</label>
<textarea rows="2" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" id="meta-description">Learn how AI can revolutionize your SEO content strategy with automated content generation, optimization, and performance tracking.</textarea>
</div>
<div class="flex border-b border-gray-200 mb-4">
<button class="tab-active py-2 px-4 text-sm font-medium" data-tab="editor">Editor</button>
<button class="py-2 px-4 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="html">HTML</button>
<button class="py-2 px-4 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="preview">Preview</button>
</div>
<div class="content-editor" id="editor-content" contenteditable="true">
<div class="content-placeholder">Start typing or click "Generate Content" to begin...</div>
</div>
<div class="hidden" id="html-content">
<textarea class="w-full h-96 font-mono text-sm p-2 border border-gray-300 rounded-md" readonly></textarea>
</div>
<div class="hidden p-4 border border-gray-200 rounded-md" id="preview-content"></div>
<div class="mt-4 flex justify-between items-center">
<div class="flex space-x-2">
<button class="p-2 text-gray-500 hover:text-gray-700 rounded hover:bg-gray-100" data-command="bold">
<i class="fas fa-bold"></i>
</button>
<button class="p-2 text-gray-500 hover:text-gray-700 rounded hover:bg-gray-100" data-command="italic">
<i class="fas fa-italic"></i>
</button>
<button class="p-2 text-gray-500 hover:text-gray-700 rounded hover:bg-gray-100" data-command="insertUnorderedList">
<i class="fas fa-list-ul"></i>
</button>
<button class="p-2 text-gray-500 hover:text-gray-700 rounded hover:bg-gray-100" data-command="insertOrderedList">
<i class="fas fa-list-ol"></i>
</button>
<button class="p-2 text-gray-500 hover:text-gray-700 rounded hover:bg-gray-100" data-command="createLink">
<i class="fas fa-link"></i>
</button>
<button class="p-2 text-gray-500 hover:text-gray-700 rounded hover:bg-gray-100" data-command="insertImage">
<i class="fas fa-image"></i>
</button>
<button class="p-2 text-gray-500 hover:text-gray-700 rounded hover:bg-gray-100" data-command="formatBlock" data-value="h2">
<i class="fas fa-heading"></i> H2
</button>
<button class="p-2 text-gray-500 hover:text-gray-700 rounded hover:bg-gray-100" data-command="formatBlock" data-value="h3">
<i class="fas fa-heading"></i> H3
</button>
</div>
<button class="px-4 py-2 bg-green-600 text-white rounded-md text-sm font-medium hover:bg-green-700 flex items-center" id="publish-now">
<i class="fas fa-check-circle mr-2"></i> Publish Now
</button>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div class="w-full lg:w-1/4 space-y-6">
<!-- SEO Analysis -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-medium text-dark mb-4">SEO Analysis</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">SEO Score</span>
<span class="text-sm font-medium text-primary" id="seo-score">87/100</span>
</div>
<div class="seo-score-meter">
<div class="seo-score-progress" style="width: 87%" id="seo-progress"></div>
</div>
</div>
<div class="readability-score" id="readability-score">B+</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-green-50 p-3 rounded-lg">
<div class="text-green-800 text-sm font-medium">Keyword Density</div>
<div class="text-green-600 text-xs">Optimal (2.8%)</div>
</div>
<div class="bg-green-50 p-3 rounded-lg">
<div class="text-green-800 text-sm font-medium">Readability</div>
<div class="text-green-600 text-xs">Good (8th grade)</div>
</div>
<div class="bg-yellow-50 p-3 rounded-lg">
<div class="text-yellow-800 text-sm font-medium">Word Count</div>
<div class="text-yellow-600 text-xs">1,024 words</div>
</div>
<div class="bg-green-50 p-3 rounded-lg">
<div class="text-green-800 text-sm font-medium">Headings</div>
<div class="text-green-600 text-xs">Well structured</div>
</div>
<div class="bg-red-50 p-3 rounded-lg">
<div class="text-red-800 text-sm font-medium">Internal Links</div>
<div class="text-red-600 text-xs">None found</div>
</div>
<div class="bg-green-50 p-3 rounded-lg">
<div class="text-green-800 text-sm font-medium">Images</div>
<div class="text-green-600 text-xs">3 with alt text</div>
</div>
</div>
<div class="pt-2">
<button class="w-full bg-primary text-white py-2 px-4 rounded-md text-sm font-medium hover:bg-indigo-700 flex items-center justify-center" id="run-audit">
<i class="fas fa-search mr-2"></i> Run Full SEO Audit
</button>
</div>
</div>
</div>
<!-- Keyword Suggestions -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-medium text-dark mb-4">Keyword Suggestions</h3>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-700">Primary Keyword</span>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">AI content generation</span>
</div>
<div>
<div class="text-sm font-medium text-gray-700 mb-2">LSI Keywords</div>
<div class="flex flex-wrap gap-1">
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">natural language processing</span>
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">content automation</span>
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">machine learning</span>
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">SEO optimization</span>
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">text generation</span>
<span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">content marketing</span>
</div>
</div>
<div>
<div class="text-sm font-medium text-gray-700 mb-2">Related Questions</div>
<div class="space-y-2">
<div class="text-sm text-gray-600">How does AI content generation work?</div>
<div class="text-sm text-gray-600">What are the best AI writing tools?</div>
<div class="text-sm text-gray-600">Is AI-generated content good for SEO?</div>
<div class="text-sm text-gray-600">Can AI replace human content writers?</div>
<div class="text-sm text-gray-600">How to optimize AI content for SEO?</div>
</div>
</div>
<div class="pt-2">
<button class="w-full bg-gray-100 text-gray-700 py-2 px-4 rounded-md text-sm font-medium hover:bg-gray-200 flex items-center justify-center" id="refresh-suggestions">
<i class="fas fa-sync-alt mr-2"></i> Refresh Suggestions
</button>
</div>
</div>
</div>
<!-- Schema Markup Preview -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-medium text-dark mb-4">Schema Markup</h3>
<div class="space-y-3">
<div class="schema-tag">
<div class="text-xs text-gray-500">Article</div>
<div class="text-sm">"@type": "Article"</div>
</div>
<div class="schema-tag">
<div class="text-xs text-gray-500">FAQPage</div>
<div class="text-sm">"@type": "FAQPage"</div>
</div>
<div class="schema-tag">
<div class="text-xs text-gray-500">Breadcrumb</div>
<div class="text-sm">"@type": "BreadcrumbList"</div>
</div>
<div class="pt-2">
<button class="w-full bg-gray-100 text-gray-700 py-2 px-4 rounded-md text-sm font-medium hover:bg-gray-200 flex items-center justify-center" id="edit-schema">
<i class="fas fa-edit mr-2"></i> Edit Schema
</button>
</div>
</div>
</div>
<!-- AI Suggestions -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-medium text-dark mb-4">AI Suggestions</h3>
<div class="space-y-3">
<div class="ai-suggestion">
<div class="ai-suggestion-actions">
<button class="text-green-600 hover:text-green-800 mr-1"><i class="fas fa-check"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button>
</div>
<div class="text-sm font-medium mb-1">Consider adding:</div>
<div class="text-sm">"AI content generation statistics from 2024 show a 45% adoption rate among marketers."</div>
</div>
<div class="ai-suggestion">
<div class="ai-suggestion-actions">
<button class="text-green-600 hover:text-green-800 mr-1"><i class="fas fa-check"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button>
</div>
<div class="text-sm font-medium mb-1">Improve readability:</div>
<div class="text-sm">"Break this paragraph into two for better readability and add a transition sentence."</div>
</div>
<div class="ai-suggestion">
<div class="ai-suggestion-actions">
<button class="text-green-600 hover:text-green-800 mr-1"><i class="fas fa-check"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button>
</div>
<div class="text-sm font-medium mb-1">Keyword opportunity:</div>
<div class="text-sm">"You could naturally include 'content automation tools' in this section."</div>
</div>
<div class="pt-2">
<button class="w-full bg-gray-100 text-gray-700 py-2 px-4 rounded-md text-sm font-medium hover:bg-gray-200 flex items-center justify-center" id="get-suggestions">
<i class="fas fa-lightbulb mr-2"></i> Get More Suggestions
</button>
</div>
</div>
</div>
<!-- Publishing Options -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-medium text-dark mb-4">Publishing Options</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Publish Date</label>
<input type="datetime-local" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>
<div class="flex items-center">
<input id="submit-to-google" name="submit-to-google" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="submit-to-google" class="ml-2 block text-sm text-gray-700">Submit to Google Indexing API</label>
</div>
<div class="flex items-center">
<input id="share-on-social" name="share-on-social" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="share-on-social" class="ml-2 block text-sm text-gray-700">Auto-share on social media</label>
</div>
<div class="flex items-center">
<input id="notify-subscribers" name="notify-subscribers" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="notify-subscribers" class="ml-2 block text-sm text-gray-700">Notify email subscribers</label>
</div>
<div class="pt-2">
<button class="w-full bg-primary text-white py-2 px-4 rounded-md text-sm font-medium hover:bg-indigo-700 flex items-center justify-center" id="publish-content">
<i class="fas fa-paper-plane mr-2"></i> Publish Now
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-white border-t border-gray-200 mt-12">
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div class="md:flex md:items-center md:justify-between">
<div class="flex justify-center md:order-2 space-x-6">
<a href="#" class="text-gray-400 hover:text-gray-500">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<i class="fab fa-facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<i class="fab fa-github"></i>
</a>
</div>
<div class="mt-8 md:mt-0 md:order-1">
<p class="text-center text-sm text-gray-500">&copy; 2023 AISEO Content Generator. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script>
// Tab switching
const tabs = document.querySelectorAll('[data-tab]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Update tab UI
tabs.forEach(t => {
t.classList.remove('tab-active', 'text-dark');
t.classList.add('text-gray-500');
});
tab.classList.add('tab-active', 'text-dark');
tab.classList.remove('text-gray-500');
// Show corresponding content
const tabName = tab.getAttribute('data-tab');
document.getElementById('editor-content').classList.add('hidden');
document.getElementById('html-content').classList.add('hidden');
document.getElementById('preview-content').classList.add('hidden');
document.getElementById(`${tabName}-content`).classList.remove('hidden');
// Update content for HTML and Preview tabs
if(tabName === 'html') {
document.getElementById('html-content').querySelector('textarea').value = document.getElementById('editor-content').innerHTML;
} else if(tabName === 'preview') {
document.getElementById('preview-content').innerHTML = document.getElementById('editor-content').innerHTML;
}
});
});
// Editor functionality
const editor = document.getElementById('editor-content');
const editorButtons = document.querySelectorAll('[data-command]');
editorButtons.forEach(button => {
button.addEventListener('click', () => {
const command = button.getAttribute('data-command');
const value = button.getAttribute('data-value');
if(command === 'createLink') {
const url = prompt('Enter the URL:');
if(url) document.execCommand(command, false, url);
} else if(command === 'insertImage') {
const url = prompt('Enter the image URL:');
if(url) {
const alt = prompt('Enter alt text:');
document.execCommand('insertHTML', false, `<img src="${url}" alt="${alt || ''}" style="max-width:100%;height:auto;">`);
}
} else {
document.execCommand(command, false, value);
}
editor.focus();
});
});
// Remove placeholder when editor is focused
editor.addEventListener('focus', () => {
if(editor.querySelector('.content-placeholder')) {
editor.innerHTML = '';
}
});
// Add keyword on Enter key
const keywordInput = document.getElementById('keyword-input');
keywordInput.addEventListener('keydown', (e) => {
if(e.key === 'Enter' && keywordInput.value.trim()) {
const container = keywordInput.parentElement;
const badge = document.createElement('span');
badge.className = 'keyword-badge';
badge.innerHTML = `
${keywordInput.value.trim()}
<button type="button"><i class="fas fa-times"></i></button>
`;
container.insertBefore(badge, keywordInput);
keywordInput.value = '';
// Add remove functionality
badge.querySelector('button').addEventListener('click', () => {
badge.remove();
});
}
});
// Generate content button
document.getElementById('generate-content').addEventListener('click', function() {
const editor = document.getElementById('editor-content');
editor.innerHTML = `
<div class="text-center py-8">
<div class="animate-pulse-slow text-gray-500">
<i class="fas fa-robot text-4xl mb-4 animate-spin-slow"></i>
<p>Generating high-quality SEO content with AI...</p>
<p class="text-xs mt-2">Analyzing top-ranking content for "AI content generation"</p>
</div>
</div>
`;
setTimeout(() => {
editor.innerHTML = `
<h2>Introduction</h2>
<p>AI-powered SEO content creation is transforming digital marketing strategies by combining artificial intelligence with search engine optimization techniques. This innovative approach enables businesses to produce optimized content at scale while maintaining quality and relevance.</p>
<h2>Key Benefits of AI SEO Content</h2>
<ul>
<li><strong>Time Efficiency:</strong> Reduce content creation time by up to 80%</li>
<li><strong>Consistent Quality:</strong> Maintain uniform tone and style across all content</li>
<li><strong>Data-Driven Optimization:</strong> Leverage real-time SEO data for better rankings</li>
<li><strong>Scalability:</strong> Produce more content without proportional resource increase</li>
</ul>
<h2>Best Practices for AI-Generated Content</h2>
<h3>1. Human Editing is Essential</h3>
<p>While AI can produce excellent drafts, human editors should review for:</p>
<ul>
<li>Brand voice consistency</li>
<li>Factual accuracy</li>
<li>Natural flow and readability</li>
</ul>
<h3>2. Combine Multiple AI Models</h3>
<p>For best results, use specialized models for different content needs:</p>
<table class="min-w-full divide-y divide-gray-200 mt-2 mb-4">
<thead class="bg-gray-50">
<tr>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Task</th>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Recommended Model</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-3 py-2 text-sm">Blog Content</td>
<td class="px-3 py-2 text-sm">GPT-4 Turbo</td>
</tr>
<tr>
<td class="px-3 py-2 text-sm">Product Descriptions</td>
<td class="px-3 py-2 text-sm">Claude 3</td>
</tr>
<tr>
<td class="px-3 py-2 text-sm">Technical SEO</td>
<td class="px-3 py-2 text-sm">Gemini Pro</td>
</tr>
</tbody>
</table>
<div class="bg-blue-50 p-4 rounded-lg mt-6">
<h3 class="font-medium text-blue-800 mb-2">Pro Tip</h3>
<p class="text-blue-700">For featured snippet optimization, structure content in clear, concise paragraphs and use numbered lists for step-by-step guides.</p>
</div>
`;
// Update SEO score
document.getElementById('seo-progress').style.width = '92%';
document.getElementById('seo-score').textContent = '92/100';
// Show success notification
showNotification('Content generated successfully!', 'success');
}, 3000);
});
// Optimize content button
document.getElementById('optimize-content').addEventListener('click', function() {
const editor = document.getElementById('editor-content');
if(editor.textContent.trim() === '' || editor.querySelector('.content-placeholder')) {
showNotification('Please generate or enter content first', 'error');
return;
}
showNotification('Optimizing content for SEO...', 'info');
setTimeout(() => {
// Highlight keywords
const keywords = ['AI content generation', 'SEO', 'content automation'];
let content = editor.innerHTML;
keywords.forEach(keyword => {
const regex = new RegExp(keyword, 'gi');
content = content.replace(regex, match =>
`<span class="ai-highlight">${match}</span>`
);
});
editor.innerHTML = content;
// Update SEO score
document.getElementById('seo-progress').style.width = '95%';
document.getElementById('seo-score').textContent = '95/100';
showNotification('Content optimized successfully!', 'success');
}, 2000);
});
// Run SEO audit button
document.getElementById('run-audit').addEventListener('click', function() {
showNotification('Running full SEO audit...', 'info');
setTimeout(() => {
// Simulate finding issues
const issues = [
'Add more internal links',
'Include at least one external authoritative link',
'Optimize images with better alt text'
];
let message = 'SEO audit completed. ';
if(issues.length > 0) {
message += `Found ${issues.length} areas for improvement.`;
showNotification(message, 'warning');
// Add suggestions to AI Suggestions panel
const suggestionsPanel = document.querySelector('.ai-suggestion');
if(suggestionsPanel) {
issues.forEach(issue => {
const newSuggestion = document.createElement('div');
newSuggestion.className = 'ai-suggestion mt-2';
newSuggestion.innerHTML = `
<div class="ai-suggestion-actions">
<button class="text-green-600 hover:text-green-800 mr-1"><i class="fas fa-check"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button>
</div>
<div class="text-sm font-medium mb-1">SEO Recommendation:</div>
<div class="text-sm">${issue}</div>
`;
suggestionsPanel.parentNode.insertBefore(newSuggestion, suggestionsPanel.nextSibling);
});
}
} else {
message += 'No issues found!';
showNotification(message, 'success');
}
}, 2500);
});
// Publish buttons
document.getElementById('publish-now').addEventListener('click', function() {
showNotification('Publishing content...', 'info');
setTimeout(() => {
showNotification('Content published successfully!', 'success');
}, 1500);
});
document.getElementById('publish-content').addEventListener('click', function() {
showNotification('Publishing content with selected options...', 'info');
setTimeout(() => {
showNotification('Content published successfully!', 'success');
}, 1500);
});
// Get more suggestions button
document.getElementById('get-suggestions').addEventListener('click', function() {
showNotification('Generating AI suggestions...', 'info');
setTimeout(() => {
const suggestions = [
{
title: "Add statistic:",
content: "According to recent studies, 67% of marketers now use AI for content creation."
},
{
title: "Improve transition:",
content: "Add a sentence connecting the benefits to the best practices section."
},
{
title: "Include example:",
content: "Consider adding a real-world example of a company that improved SEO with AI content."
}
];
const suggestionsPanel = document.querySelector('.ai-suggestion');
if(suggestionsPanel) {
suggestions.forEach(suggestion => {
const newSuggestion = document.createElement('div');
newSuggestion.className = 'ai-suggestion mt-2';
newSuggestion.innerHTML = `
<div class="ai-suggestion-actions">
<button class="text-green-600 hover:text-green-800 mr-1"><i class="fas fa-check"></i></button>
<button class="text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button>
</div>
<div class="text-sm font-medium mb-1">${suggestion.title}</div>
<div class="text-sm">${suggestion.content}</div>
`;
suggestionsPanel.parentNode.insertBefore(newSuggestion, suggestionsPanel.nextSibling);
});
}
showNotification('New suggestions generated!', 'success');
}, 2000);
});
// Edit schema button
document.getElementById('edit-schema').addEventListener('click', function() {
showNotification('Opening schema markup editor...', 'info');
setTimeout(() => {
// Simulate schema editing
const schemaTags = document.querySelectorAll('.schema-tag');
schemaTags.forEach(tag => {
const currentText = tag.querySelector('.text-sm').textContent;
tag.querySelector('.text-sm').innerHTML = `
<input type="text" class="w-full text-sm border border-gray-300 rounded px-2 py-1" value="${currentText}">
`;
});
this.innerHTML = '<i class="fas fa-save mr-2"></i> Save Schema';
this.removeEventListener('click', arguments.callee);
this.addEventListener('click', function() {
showNotification('Schema markup saved!', 'success');
setTimeout(() => {
schemaTags.forEach(tag => {
const input = tag.querySelector('input');
tag.querySelector('.text-sm').textContent = input.value;
});
this.innerHTML = '<i class="fas fa-edit mr-2"></i> Edit Schema';
this.addEventListener('click', arguments.callee);
}, 500);
});
}, 500);
});
// Refresh suggestions button
document.getElementById('refresh-suggestions').addEventListener('click', function() {
showNotification('Refreshing keyword suggestions...', 'info');
setTimeout(() => {
const lsiKeywords = [
'AI writing assistant',
'automated content creation',
'machine learning SEO',
'natural language generation',
'content optimization tools'
];
const relatedQuestions = [
'How accurate is AI-generated content?',
'What are the limitations of AI content tools?',
'How to make AI content sound more human?'
];
// Update LSI keywords
const lsiContainer = document.querySelector('.flex.flex-wrap.gap-1');
if(lsiContainer) {
lsiContainer.innerHTML = '';
lsiKeywords.forEach(keyword => {
const span = document.createElement('span');
span.className = 'text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full';
span.textContent = keyword;
lsiContainer.appendChild(span);
});
}
// Update related questions
const questionsContainer = document.querySelector('.space-y-2');
if(questionsContainer) {
questionsContainer.innerHTML = '';
relatedQuestions.forEach(question => {
const div = document.createElement('div');
div.className = 'text-sm text-gray-600';
div.textContent = question;
questionsContainer.appendChild(div);
});
}
showNotification('Keyword suggestions refreshed!', 'success');
}, 1500);
});
// Helper function to show notifications
function showNotification(message, type) {
const colors = {
success: 'bg-green-500',
error: 'bg-red-500',
info: 'bg-blue-500',
warning: 'bg-yellow-500'
};
const notification = document.createElement('div');
notification.className = `fixed bottom-4 right-4 ${colors[type]} text-white px-4 py-2 rounded-md shadow-lg flex items-center animate-bounce-slow`;
notification.innerHTML = `
<i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : type === 'warning' ? 'fa-exclamation-triangle' : 'fa-info-circle'} mr-2"></i>
${message}
<button class="ml-4" onclick="this.parentElement.remove()">
<i class="fas fa-times"></i>
</button>
`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 5000);
}
// Initialize with editor tab active
document.querySelector('[data-tab="editor"]').click();
</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=Gughanmk/ai" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>