Spaces:

ShabaMed
/

seo-automaton-pro

Running

App Files Files Community

ShabaMed commited on Oct 24, 2025

Commit

2fc5fa6

verified ·

1 Parent(s): bf13805

i want to use this hugging face space in an agentic sofwtare style.. where user just connect their wordpress API and then the agent start doing all the SEO tasks on autopilot and showing tasks performed and results from google analytics in real time.. users can only interact with chat with the agent to ask for changes or any thing.. the interface should be dark in the style of bolt.new "check screenshot" with space gristek font

Browse files

Files changed (7) hide show

README.md +8 -5
analytics.html +66 -0
components/footer.js +68 -0
components/navbar.js +140 -0
index.html +220 -19
script.js +188 -0
style.css +88 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Seo Automaton Pro
-emoji: 👀
-colorFrom: green
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: SEO Automaton Pro 🤖
+colorFrom: purple
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

analytics.html ADDED Viewed

	@@ -0,0 +1,66 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Analytics - SEO Automaton Pro</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        'space-grotesk': ['Space Grotesk', 'monospace'],
+                    },
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#fdf4ff',
+                            100: '#fae8ff',
+                            200: '#f5d0fe',
+                            300: '#f0abfc',
+                            400: '#e879f9',
+                            500: '#d946ef',
+                            600: '#c026d3',
+                            700: '#a21caf',
+                            800: '#86198f',
+                            900: '#701a75',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-white font-space-grotesk min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <main class="flex-1 container mx-auto px-4 py-8">
+        <div class="flex items-center gap-3 mb-8">
+            <i data-feather="bar-chart-2" class="text-secondary-400"></i>
+            <h1 class="text-3xl md:text-4xl font-bold">Analytics Dashboard</h1>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+            <!-- Traffic Overview -->
+            <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700">
+                <h2 class="text-2xl font-semibold mb-{"ok":false,"message":"Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model."}
+</body>
+</html>

components/footer.js ADDED Viewed

	@@ -0,0 +1,68 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: rgba(15, 23, 42, 0.8);
+          backdrop-filter: blur(10px);
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+          color: #94a3b8;
+          padding: 2rem;
+          text-align: center;
+          margin-top: auto;
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .footer-links {
+          display: flex;
+          justify-content: center;
+          gap: 2rem;
+          margin-bottom: 1rem;
+        }
+        .footer-link {
+          color: #94a3b8;
+          text-decoration: none;
+          transition: color 0.3s ease;
+        }
+        .footer-link:hover {
+          color: white;
+        }
+        .copyright {
+          font-size: 0.875rem;
+        }
+        @media (max-width: 768px) {
+          footer {
+            padding: 1.5rem 1rem;
+          }
+          .footer-links {
+            gap: 1rem;
+            flex-wrap: wrap;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-links">
+            <a href="/privacy.html" class="footer-link">Privacy</a>
+            <a href="/terms.html" class="footer-link">Terms</a>
+            <a href="/support.html" class="footer-link">Support</a>
+            <a href="/docs.html" class="footer-link">Documentation</a>
+          </div>
+          <p class="copyright">&copy; 2024 SEO Automaton Pro. All rights reserved.</p>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,140 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        nav {
+          background: rgba(15, 23, 42, 0.8);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: sticky;
+          top: 0;
+          z-index: 1000;
+        }
+        .nav-container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .logo {
+          background: linear-gradient(135deg, #38bdf8 0%, #e879f9 100%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-weight: 700;
+          font-size: 1.5rem;
+        }
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        .nav-link {
+          color: #94a3b8;
+          text-decoration: none;
+          font-weight: 500;
+          transition: all 0.3s ease;
+          position: relative;
+        }
+        .nav-link:hover {
+          color: white;
+        }
+        .nav-link.active {
+          color: #38bdf8;
+        }
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: -5px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: linear-gradient(135deg, #38bdf8 0%, #e879f9 100%);
+          transition: width 0.3s ease;
+        }
+        .nav-link:hover::after,
+        .nav-link.active::after {
+          width: 100%;
+        }
+        .status-indicator {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.5rem 1rem;
+          border-radius: 0.75rem;
+          font-size: 0.875rem;
+        }
+        .status-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: #ef4444;
+        }
+        .status-dot.connected {
+          background: #10b981;
+          animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.7; }
+        }
+        @media (max-width: 768px) {
+          nav {
+            padding: 1rem;
+          }
+          .nav-links {
+            gap: 1rem;
+          }
+        .logo {
+          font-size: 1.25rem;
+        }
+        }
+      </style>
+      <nav>
+        <div class="nav-container">
+          <a href="/" class="logo">SEO Automaton Pro</a>
+          <ul class="nav-links">
+            <li><a href="/" class="nav-link active">Dashboard</a></li>
+            <li><a href="/analytics.html" class="nav-link">Analytics</a></li>
+            <li><a href="/tasks.html" class="nav-link">Tasks</a></li>
+            <li><a href="/settings.html" class="nav-link">Settings</a></li>
+          </ul>
+          <div class="status-indicator">
+            <div class="status-dot"></div>
+            <span>Disconnected</span>
+          </div>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,220 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SEO Automaton Pro - AI-Powered SEO Automation</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        'space-grotesk': ['Space Grotesk', 'monospace'],
+                    },
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#fdf4ff',
+                            100: '#fae8ff',
+                            200: '#f5d0fe',
+                            300: '#f0abfc',
+                            400: '#e879f9',
+                            500: '#d946ef',
+                            600: '#c026d3',
+                            700: '#a21caf',
+                            800: '#86198f',
+                            900: '#701a75',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-white font-space-grotesk min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <main class="flex-1 container mx-auto px-4 py-8">
+        <!-- Header Section -->
+        <div class="text-center mb-12">
+            <h1 class="text-4xl md:text-6xl font-bold bg-gradient-to-r from-primary-400 to-secondary-500 bg-clip-text text-transparent mb-4">
+                SEO Automaton Pro
+            </h1>
+            <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                Your AI-powered SEO assistant that automates WordPress optimization and provides real-time analytics insights.
+            </p>
+        </div>
+        <!-- Main Dashboard Grid -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+            <!-- Connection Panel -->
+            <div class="lg:col-span-1 bg-gray-800 rounded-2xl p-6 border border-gray-700">
+                <div class="flex items-center gap-3 mb-6">
+                    <i data-feather="link" class="text-primary-400"></i>
+                    <h2 class="text-2xl font-semibold">WordPress Connection</h2>
+                </div>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-400 mb-2">WordPress URL</label>
+                        <input type="text" placeholder="https://your-site.com"
+                               class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-400 mb-2">API Key</label>
+                        <input type="password" placeholder="Enter your WordPress API key"
+                               class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                    </div>
+                    <button class="w-full bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105">
+                        <i data-feather="play" class="inline w-4 h-4 mr-2"></i>
+                        Start SEO Automation
+                    </button>
+                </div>
+            </div>
+            <!-- Analytics Panel -->
+            <div class="lg:col-span-2 bg-gray-800 rounded-2xl p-6 border border-gray-700">
+                <div class="flex items-center gap-3 mb-6">
+                    <i data-feather="bar-chart-2" class="text-secondary-400"></i>
+                    <h2 class="text-2xl font-semibold">Real-time Analytics</h2>
+                </div>
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+                    <div class="bg-gray-700 rounded-xl p-4 text-center">
+                        <div class="text-2xl font-bold text-primary-400">1.2K</div>
+                        <div class="text-sm text-gray-400">Visitors Today</div>
+                    </div>
+                    <div class="bg-gray-700 rounded-xl p-4 text-center">
+                        <div class="text-2xl font-bold text-secondary-400">45%</div>
+                        <div class="text-sm text-gray-400">Bounce Rate</div>
+                    </div>
+                    <div class="bg-gray-700 rounded-xl p-4 text-center">
+                        <div class="text-2xl font-bold text-green-400">3.2</div>
+                        <div class="text-sm text-gray-400">Avg. Session</div>
+                    </div>
+                    <div class="bg-gray-700 rounded-xl p-4 text-center">
+                        <div class="text-2xl font-bold text-yellow-400">87</div>
+                        <div class="text-sm text-gray-400">SEO Score</div>
+                    </div>
+                </div>
+                <div class="bg-gray-700 rounded-xl p-4">
+                    <div class="h-48 flex items-center justify-center text-gray-500">
+                        Analytics Chart Visualization
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Tasks & Chat Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <!-- Tasks Panel -->
+            <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700">
+                <div class="flex items-center gap-3 mb-6">
+                    <i data-feather="check-square" class="text-green-400"></i>
+                    <h2 class="text-2xl font-semibold">Recent Tasks</h2>
+                </div>
+                <div class="space-y-4">
+                    <div class="bg-gray-700 rounded-xl p-4 border-l-4 border-primary-500">
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium">Optimized meta tags for homepage</span>
+                            <span class="text-xs text-green-400 bg-green-400/10 px-2 py-1 rounded-full">Completed</span>
+                        </div>
+                        <p class="text-sm text-gray-400 mt-2">Improved title and description for better CTR</p>
+                    </div>
+                    <div class="bg-gray-700 rounded-xl p-4 border-l-4 border-yellow-500">
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium">Fixed broken internal links</span>
+                            <span class="text-xs text-yellow-400 bg-yellow-400/10 px-2 py-1 rounded-full">In Progress</span>
+                        </div>
+                        <p class="text-sm text-gray-400 mt-2">Identified and fixed 12 broken links</p>
+                    </div>
+                    <div class="bg-gray-700 rounded-xl p-4 border-l-4 border-blue-500">
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium">Image optimization batch</span>
+                            <span class="text-xs text-blue-400 bg-blue-400/10 px-2 py-1 rounded-full">Queued</span>
+                        </div>
+                        <p class="text-sm text-gray-400 mt-2">Compressing 45 images for better load times</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Chat Panel -->
+            <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700 flex flex-col">
+                <div class="flex items-center gap-3 mb-6">
+                    <i data-feather="message-square" class="text-primary-400"></i>
+                    <h2 class="text-2xl font-semibold">Chat with Agent</h2>
+                </div>
+                <div class="flex-1 bg-gray-700 rounded-xl p-4 mb-4 overflow-y-auto max-h-64">
+                    <div class="space-y-4">
+                        <div class="flex justify-start">
+                            <div class="bg-gray-600 rounded-2xl rounded-tl-none px-4 py-3 max-w-xs">
+                                <p class="text-sm">Hello! I'm your SEO assistant. I've connected to your WordPress site and started optimizing. How can I help you today?</p>
+                            </div>
+                        </div>
+                        <div class="flex justify-end">
+                            <div class="bg-primary-500 rounded-2xl rounded-tr-none px-4 py-3 max-w-xs">
+                                <p class="text-sm">Can you run a full site audit and show me the results?</p>
+                            </div>
+                        </div>
+                        <div class="flex justify-start">
+                            <div class="bg-gray-600 rounded-2xl rounded-tl-none px-4 py-3 max-w-xs">
+                                <p class="text-sm">Sure! I'll start a comprehensive SEO audit. This will analyze your site structure, content quality, technical SEO, and performance metrics.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex gap-2">
+                    <input type="text" placeholder="Ask your SEO agent..."
+                           class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                    <button class="bg-primary-500 hover:bg-primary-600 text-white p-3 rounded-lg transition-colors">
+                        <i data-feather="send" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <!-- Main Script -->
+    <script src="script.js"></script>
+    <!-- Initialize Feather Icons -->
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,188 @@

+// Shared JavaScript across all pages
+class SEOAutomaton {
+    constructor() {
+        this.isConnected = false;
+        this.tasks = [];
+        this.init();
+    }
+    init() {
+        console.log('SEO Automaton Pro initialized');
+        this.setupEventListeners();
+        this.simulateRealTimeUpdates();
+    }
+    setupEventListeners() {
+        // WordPress connection handler
+        const connectBtn = document.querySelector('button[class*="bg-gradient"]');
+        if (connectBtn) {
+            connectBtn.addEventListener('click', () => this.handleConnection());
+        }
+        // Chat functionality
+        const chatInput = document.querySelector('input[placeholder*="Ask your SEO agent"]');
+        const sendBtn = document.querySelector('button[class*="bg-primary"]');
+        if (sendBtn && chatInput) {
+            sendBtn.addEventListener('click', () => this.handleChatMessage(chatInput.value));
+            chatInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    this.handleChatMessage(chatInput.value);
+                    chatInput.value = '';
+                }
+            });
+        }
+    }
+    handleConnection() {
+        this.isConnected = true;
+        this.showNotification('Successfully connected to WordPress! Starting SEO automation...', 'success');
+        // Simulate starting automation tasks
+        setTimeout(() => {
+            this.addTask('Site audit initiated', 'Analyzing site structure and content', 'in-progress');
+        }, 1000);
+    }
+    handleChatMessage(message) {
+        if (!message.trim()) return;
+        this.addChatMessage(message, 'user');
+        // Simulate AI response
+        setTimeout(() => {
+            const response = this.generateAIResponse(message);
+            this.addChatMessage(response, 'agent');
+        }, 1000);
+    }
+    addChatMessage(message, sender) {
+        const chatContainer = document.querySelector('.bg-gray-700.rounded-xl.p-4');
+        if (!chatContainer) return;
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `flex justify-${sender === 'user' ? 'end' : 'start'} mb-4`;
+        const bubble = document.createElement('div');
+        bubble.className = sender === 'user'
+            ? 'bg-primary-500 rounded-2xl rounded-tr-none px-4 py-3 max-w-xs';
+        bubble.innerHTML = `<p class="text-sm">${message}</p>`;
+        messageDiv.appendChild(bubble);
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+    generateAIResponse(message) {
+        const responses = {
+            'audit': 'Starting comprehensive SEO audit. This will analyze your site structure, content quality, technical SEO factors, and performance metrics. Results will be available in approximately 2 minutes.',
+            'performance': 'I\'ll run performance optimization tasks including image compression, CSS/JS minification, and caching improvements.',
+            'keywords': 'Analyzing your current keyword strategy and identifying new opportunities based on search volume and competition.',
+            'default': 'I understand your request. Let me process that and provide you with the best optimization strategy for your WordPress site.'
+        };
+        const lowerMessage = message.toLowerCase();
+        if (lowerMessage.includes('audit')) return responses.audit;
+        if (lowerMessage.includes('performance') || lowerMessage.includes('speed')) return responses.performance;
+        if (lowerMessage.includes('keyword')) return responses.keywords;
+        return responses.default;
+    }
+    addTask(title, description, status = 'queued') {
+        const tasksContainer = document.querySelector('.space-y-4');
+        if (!tasksContainer) return;
+        const taskDiv = document.createElement('div');
+        const statusColors = {
+            'completed': 'green',
+            'in-progress': 'yellow',
+            'queued': 'blue'
+        };
+        taskDiv.className = `bg-gray-700 rounded-xl p-4 border-l-4 border-${statusColors[status]}-500';
+        taskDiv.innerHTML = `
+            <div class="flex justify-between items-center">
+                <span class="font-medium">${title}</span>
+                <span class="text-xs text-${statusColors[status]}-400 bg-${statusColors[status]}-400/10 px-2 py-1 rounded-full">${status.replace('-', ' ')}</span>
+            </div>
+            <p class="text-sm text-gray-400 mt-2">${description}</p>
+        `;
+        tasksContainer.appendChild(taskDiv);
+        this.tasks.push({ title, description, status });
+    }
+    simulateRealTimeUpdates() {
+        // Simulate real-time analytics updates
+        setInterval(() => {
+            if (!this.isConnected) return;
+            const visitorsElement = document.querySelector('.text-2xl.font-bold.text-primary-400');
+            if (visitorsElement) {
+                const current = parseInt(visitorsElement.textContent);
+                const change = Math.floor(Math.random() * 10) - 2;
+            visitorsElement.textContent = Math.max(800, current + change);
+            }
+        }, 5000);
+    }
+    showNotification(message, type = 'info') {
+        // Create notification element
+        const notification = document.createElement('div');
+        const bgColor = type === 'success' ? 'bg-green-500' : 'bg-blue-500';
+        notification.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 z-50';
+        notification.textContent = message;
+        document.body.appendChild(notification);
+        // Animate in
+        setTimeout(() => {
+            notification.classList.remove('translate-x-full');
+        }, 100);
+        // Remove after 3 seconds
+        setTimeout(() => {
+            notification.classList.add('translate-x-full');
+            setTimeout(() => {
+                if (notification.parentNode) {
+                    notification.parentNode.removeChild(notification);
+                }
+            }, 300);
+        }, 3000);
+    }
+}
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.seoAutomaton = new SEOAutomaton();
+});
+// Utility functions
+const utils = {
+    formatNumber: (num) => {
+        if (num >= 1000000) {
+            return (num / 1000000).toFixed(1) + 'M';
+        }
+        if (num >= 1000) {
+            return (num / 1000).toFixed(1) + 'K';
+        }
+        return num.toString();
+    },
+    debounce: (func, wait) => {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+};
+console.log('SEO Automaton Pro - AI-powered SEO automation platform loaded');

style.css CHANGED Viewed

@@ -1,28 +1,98 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+* {
+    box-sizing: border-box;
+}
 body {
+    font-family: 'Space Grotesk', monospace;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+    overflow-x: hidden;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+}
+::-webkit-scrollbar-track {
+    background: #1e293b;
+}
+::-webkit-scrollbar-thumb {
+    background: #475569;
+    border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #64748b;
+}
+/* Glass morphism effect */
+.glass {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
+/* Gradient text animation */
+.gradient-text {
+    background: linear-gradient(135deg, #38bdf8 0%, #e879f9 100%);
+    background-size: 200% 200%;
+    animation: gradient-shift 3s ease infinite;
 }
+@keyframes gradient-shift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
 }
+/* Pulse animation for active elements */
+.pulse-glow {
+    animation: pulse-glow 2s infinite;
 }
+@keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 5px rgba(56, 189, 248, 0.5); }
+    50% { box-shadow: 0 0 20px rgba(56, 189, 248, 0.8); }
 }
+/* Smooth transitions */
+.transition-all {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+/* Custom button hover effects */
+.btn-hover {
+    transition: all 0.3s ease;
+}
+.btn-hover:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+/* Loading animation */
+.loading-dots {
+    display: inline-block;
+}
+.loading-dots::after {
+    content: '';
+    animation: dots 1.5s steps(5, end) infinite;
+}
+@keyframes dots {
+    0%, 20% { content: '.'; }
+    40% { content: '..'; }
+    60% { content: '...'; }
+    80%, 100% { content: ''; }
+}
+/* Responsive text sizes */
+@media (max-width: 768px) {
+    .responsive-text {
+        font-size: 0.875rem;
+    }
+}