Update app.py

app.py

@@ -1,271 +1,533 @@
-from seo_analyzer.app import main
-if __name__ == "__main__":
-    main()
-
+import streamlit as st
 import requests
-from bs4 import BeautifulSoup
-import json
-import re
-from urllib.parse import urljoin, urlparse
+from urllib.parse import urlparse
+import time
+from seo_analyzer import SEOAnalyzer
+from preview_generators import PreviewGenerator
 
+# Page configuration
+st.set_page_config(
+    page_title="SEO Metadata Analyzer",
+    page_icon="🔍",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
 
+def validate_url(url):
+    """Validate and normalize URL"""
+    if not url:
+        return None, "Please enter a URL"
+    
+    if not url.startswith(('http://', 'https://')):
+        url = 'https://' + url
+    
+    try:
+        result = urlparse(url)
+        if not all([result.scheme, result.netloc]):
+            return None, "Invalid URL format"
+        return url, None
+    except Exception as e:
+        return None, f"Invalid URL: {str(e)}"
 
-class SEOAnalyzer:
-    def __init__(self):
-        self.session = requests.Session()
-        self.session.headers.update({
-            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
-        })
+def main():
+    # Custom CSS for responsive design
+    st.markdown("""
+    <style>
+    /* Responsive Main Header */
+    .main-header {
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        padding: 2rem 1rem;
+        border-radius: 10px;
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+    .main-header h1 {
+        color: white;
+        margin: 0;
+        font-size: clamp(1.8rem, 4vw, 2.5rem);
+        font-weight: 700;
+    }
+    .main-header p {
+        color: #f0f0f0;
+        margin: 0.5rem 0 0 0;
+        font-size: clamp(1rem, 2.5vw, 1.2rem);
+        line-height: 1.4;
+    }
     
-    def analyze_website(self, url):
-        """Main analysis function"""
-        try:
-            # Fetch the webpage
-            response = self.session.get(url, timeout=10, allow_redirects=True)
-            response.raise_for_status()
+    /* Responsive Buttons */
+    .stButton > button {
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        border-radius: 12px;
+        font-weight: 600;
+        width: 100%;
+        padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 24px);
+        font-size: clamp(14px, 3.5vw, 16px);
+        transition: all 0.3s ease;
+        margin: 8px 0;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    .stButton > button:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
+        background: linear-gradient(90deg, #5a6fd8 0%, #6a4190 100%);
+    }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    # Main header
+    st.markdown("""
+    <div class="main-header">
+        <h1>🔍 SEO Metadata Analyzer</h1>
+        <p>Analyze your website's SEO performance and get actionable insights with visual previews</p>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # Sidebar for controls
+    with st.sidebar:
+        st.markdown("### 🎯 Analysis Controls")
+        
+        # Enhanced URL input with visual https:// prefix
+        st.markdown("**🌐 Website URL**")
+        
+        # Create a visual input with https:// prefix
+        domain_input = st.text_input(
+            "Domain",
+            placeholder="google.com or github.com",
+            help="Just enter the domain name - https:// is added automatically!",
+            key="domain_input"
+        )
+        
+        # Display the full URL visually
+        if domain_input:
+            url_input = f"https://{domain_input.strip().replace('https://', '').replace('http://', '')}"
+            st.markdown(f"""
+            <div style="
+                background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+                color: white;
+                padding: 0.5rem 1rem;
+                border-radius: 8px;
+                margin: 0.5rem 0;
+                font-family: monospace;
+                font-size: 0.9rem;
+                word-break: break-all;
+            ">
+                📎 Full URL: {url_input}
+            </div>
+            """, unsafe_allow_html=True)
+        else:
+            url_input = ""
+        
+        st.markdown("---")
+        
+        # Feature highlights
+        st.markdown("""
+        **🚀 What You'll Get:**
+        - SEO Score & Status
+        - Google Preview
+        - Social Media Previews
+        - Detailed Analysis
+        - Action Items
+        """)
+        
+        analyze_button = st.button("🚀 Analyze SEO", type="primary", use_container_width=True)
+        
+        if url_input:
+            normalized_url, error = validate_url(url_input)
+            if error:
+                st.error(error)
+            elif normalized_url:
+                st.success(f"✅ Ready to analyze: {normalized_url}")
+                
+        st.markdown("---")
+        st.markdown("💡 **Pro Tip:** Try analyzing popular sites like GitHub, Twitter, or LinkedIn to see examples of good SEO!")
+    
+    # Main content area
+    if analyze_button and url_input:
+        normalized_url, error = validate_url(url_input)
+        
+        if error:
+            st.error(error)
+            return
             
-            # Parse HTML
-            soup = BeautifulSoup(response.text, 'html.parser')
+        # Progress indicator
+        progress_bar = st.progress(0)
+        status_text = st.empty()
+        
+        try:
+            # Initialize analyzer
+            status_text.text("🌐 Fetching website data...")
+            progress_bar.progress(20)
             
-            # Extract metadata
-            metadata = self.extract_metadata(soup)
+            analyzer = SEOAnalyzer()
+            analysis_result = analyzer.analyze_website(normalized_url)
             
-            # Extract structured data
-            structured_data = self.extract_structured_data(soup)
+            if not analysis_result['success']:
+                st.error(f"❌ Failed to analyze website: {analysis_result['error']}")
+                return
             
-            # Calculate SEO score
-            seo_score = self.calculate_seo_score(metadata)
+            progress_bar.progress(60)
+            status_text.text("🔍 Analyzing SEO metadata...")
             
-            # Generate recommendations
-            recommendations = self.generate_recommendations(metadata, url)
+            # Generate previews
+            progress_bar.progress(80)
+            status_text.text("🎨 Generating previews...")
             
-            return {
-                'success': True,
-                'metadata': metadata,
-                'structured_data': structured_data,
-                'seo_score': seo_score,
-                'recommendations': recommendations,
-                'html_head': str(soup.head) if soup.head else "Head section not found"
-            }
+            preview_gen = PreviewGenerator(analysis_result['metadata'])
             
-        except requests.exceptions.RequestException as e:
-            return {
-                'success': False,
-                'error': f"Failed to fetch website: {str(e)}"
-            }
-        except Exception as e:
-            return {
-                'success': False,
-                'error': f"Analysis error: {str(e)}"
-            }
+            progress_bar. me show you all the complete code files properly! I'll provide each file one by one:
+
+## 📁 File 1: `app.py` (Main Application)
+
+```python
+import streamlit as st
+import requests
+from urllib.parse import urlparse
+import time
+from seo_analyzer import SEOAnalyzer
+from preview_generators import PreviewGenerator
+
+# Page configuration
+st.set_page_config(
+    page_title="SEO Metadata Analyzer",
+    page_icon="🔍",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+def validate_url(url):
+    """Validate and normalize URL"""
+    if not url:
+        return None, "Please enter a URL"
     
-    def extract_metadata(self, soup):
-        """Extract all relevant metadata from the page"""
-        metadata = {}
-        
-        # Basic meta tags
-        if soup.title:
-            metadata['title'] = soup.title.string.strip() if soup.title.string else ""
-        
-        # Meta tags
-        meta_tags = soup.find_all('meta')
-        for tag in meta_tags:
-            # Standard meta tags
-            if tag.get('name'):
-                name = tag.get('name').lower()
-                content = tag.get('content', '')
-                metadata[name] = content
-            
-            # Property meta tags (Open Graph, etc.)
-            elif tag.get('property'):
-                prop = tag.get('property').lower()
-                content = tag.get('content', '')
-                metadata[prop] = content
-            
-            # HTTP-equiv meta tags
-            elif tag.get('http-equiv'):
-                equiv = tag.get('http-equiv').lower()
-                content = tag.get('content', '')
-                metadata[f'http-equiv-{equiv}'] = content
-            
-            # Charset
-            elif tag.get('charset'):
-                metadata['charset'] = tag.get('charset')
-        
-        # Link tags (canonical, etc.)
-        link_tags = soup.find_all('link')
-        for tag in link_tags:
-            rel = tag.get('rel')
-            if rel:
-                rel_str = ' '.join(rel) if isinstance(rel, list) else rel
-                if rel_str in ['canonical', 'alternate', 'prev', 'next']:
-                    metadata[f'link-{rel_str}'] = tag.get('href', '')
-        
-        return metadata
+    if not url.startswith(('http://', 'https://')):
+        url = 'https://' + url
     
-    def extract_structured_data(self, soup):
-        """Extract JSON-LD structured data"""
-        structured_data = []
-        
-        scripts = soup.find_all('script', type='application/ld+json')
-        for script in scripts:
-            try:
-                if script.string:
-                    data = json.loads(script.string.strip())
-                    structured_data.append(data)
-            except json.JSONDecodeError:
-                continue
-        
-        return structured_data
+    try:
+        result = urlparse(url)
+        if not all([result.scheme, result.netloc]):
+            return None, "Invalid URL format"
+        return url, None
+    except Exception as e:
+        return None, f"Invalid URL: {str(e)}"
+
+def main():
+    # Custom CSS for responsive design
+    st.markdown("""
+    <style>
+    /* Responsive Main Header */
+    .main-header {
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        padding: 2rem 1rem;
+        border-radius: 10px;
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+    .main-header h1 {
+        color: white;
+        margin: 0;
+        font-size: clamp(1.8rem, 4vw, 2.5rem);
+        font-weight: 700;
+    }
+    .main-header p {
+        color: #f0f0f0;
+        margin: 0.5rem 0 0 0;
+        font-size: clamp(1rem, 2.5vw, 1.2rem);
+        line-height: 1.4;
+    }
     
-    def calculate_seo_score(self, metadata):
-        """Calculate SEO score based on best practices"""
-        score = 0
-        max_score = 100
-        
-        # Title tag (20 points)
-        title = metadata.get('title', '')
-        if title:
-            score += 10
-            if 30 <= len(title) <= 60:
-                score += 10
+    /* Responsive Buttons */
+    .stButton > button {
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        border-radius: 12px;
+        font-weight: 600;
+        width: 100%;
+        padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 24px);
+        font-size: clamp(14px, 3.5vw, 16px);
+        transition: all 0.3s ease;
+        margin: 8px 0;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    .stButton > button:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
+        background: linear-gradient(90deg, #5a6fd8 0%, #6a4190 100%);
+    }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    # Main header
+    st.markdown("""
+    <div class="main-header">
+        <h1>🔍 SEO Metadata Analyzer</h1>
+        <p>Analyze your website's SEO performance and get actionable insights with visual previews</p>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # Sidebar for controls
+    with st.sidebar:
+        st.markdown("### 🎯 Analysis Controls")
         
-        # Meta description (20 points)
-        description = metadata.get('description', '')
-        if description:
-            score += 10
-            if 120 <= len(description) <= 160:
-                score += 10
+        # Enhanced URL input with visual https:// prefix
+        st.markdown("**🌐 Website URL**")
         
-        # Open Graph tags (20 points)
-        og_title = metadata.get('og:title', '')
-        og_description = metadata.get('og:description', '')
-        og_image = metadata.get('og:image', '')
+        # Create a visual input with https:// prefix
+        domain_input = st.text_input(
+            "Domain",
+            placeholder="google.com or github.com",
+            help="Just enter the domain name - https:// is added automatically!",
+            key="domain_input"
+        )
         
-        if og_title:
-            score += 7
-        if og_description:
-            score += 7
-        if og_image:
-            score += 6
+        # Display the full URL visually
+        if domain_input:
+            url_input = f"https://{domain_input.strip().replace('https://', '').replace('http://', '')}"
+            st.markdown(f"""
+            <div style="
+                background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+                color: white;
+                padding: 0.5rem 1rem;
+                border-radius: 8px;
+                margin: 0.5rem 0;
+                font-family: monospace;
+                font-size: 0.9rem;
+                word-break: break-all;
+            ">
+                📎 Full URL: {url_input}
+            </div>
+            """, unsafe_allow_html=True)
+        else:
+            url_input = ""
         
-        # Twitter Card (15 points)
-        twitter_card = metadata.get('twitter:card', '')
-        twitter_title = metadata.get('twitter:title', '')
-        twitter_description = metadata.get('twitter:description', '')
+        st.markdown("---")
         
-        if twitter_card:
-            score += 5
-        if twitter_title:
-            score += 5
-        if twitter_description:
-            score += 5
+        # Feature highlights
+        st.markdown("""
+        **🚀 What You'll Get:**
+        - SEO Score & Status
+        - Google Preview
+        - Social Media Previews
+        - Detailed Analysis
+        - Action Items
+        """)
         
-        # Technical SEO (25 points)
-        if metadata.get('viewport'):
-            score += 5
-        if metadata.get('charset'):
-            score += 5
-        if metadata.get('robots'):
-            score += 5
-        if metadata.get('link-canonical'):
-            score += 5
-        if not metadata.get('robots') or 'noindex' not in metadata.get('robots', '').lower():
-            score += 5
+        analyze_button = st.button("🚀 Analyze SEO", type="primary", use_container_width=True)
         
-        return min(score, max_score)
+        if url_input:
+            normalized_url, error = validate_url(url_input)
+            if error:
+                st.error(error)
+            elif normalized_url:
+                st.success(f"✅ Ready to analyze: {normalized_url}")
+                
+        st.markdown("---")
+        st.markdown("💡 **Pro Tip:** Try analyzing popular sites like GitHub, Twitter, or LinkedIn to see examples of good SEO!")
     
-    def generate_recommendations(self, metadata, url):
-        """Generate actionable SEO recommendations"""
-        recommendations = []
-        
-        # Title tag recommendations
-        title = metadata.get('title', '')
-        if not title:
-            recommendations.append({
-                'type': 'error',
-                'message': 'Missing title tag. Add a descriptive title between 30-60 characters.'
-            })
-        elif len(title) < 30:
-            recommendations.append({
-                'type': 'warning',
-                'message': f'Title tag is too short ({len(title)} chars). Aim for 30-60 characters.'
-            })
-        elif len(title) > 60:
-            recommendations.append({
-                'type': 'warning',
-                'message': f'Title tag is too long ({len(title)} chars). Keep it under 60 characters to avoid truncation.'
-            })
-        
-        # Meta description recommendations
-        description = metadata.get('description', '')
-        if not description:
-            recommendations.append({
-                'type': 'error',
-                'message': 'Missing meta description. Add a compelling description between 120-160 characters.'
-            })
-        elif len(description) < 120:
-            recommendations.append({
-                'type': 'warning',
-                'message': f'Meta description is too short ({len(description)} chars). Aim for 120-160 characters.'
-            })
-        elif len(description) > 160:
-            recommendations.append({
-                'type': 'warning',
-                'message': f'Meta description is too long ({len(description)} chars). Keep it under 160 characters.'
-            })
-        
-        # Open Graph recommendations
-        if not metadata.get('og:title'):
-            recommendations.append({
-                'type': 'warning',
-                'message': 'Missing Open Graph title. Add og:title for better social media sharing.'
-            })
+    # Main content area
+    if analyze_button and url_input:
+        normalized_url, error = validate_url(url_input)
         
-        if not metadata.get('og:description'):
-            recommendations.append({
-                'type': 'warning',
-                'message': 'Missing Open Graph description. Add og:description for social media previews.'
-            })
-        
-        if not metadata.get('og:image'):
-            recommendations.append({
-                'type': 'warning',
-                'message': 'Missing Open Graph image. Add og:image (1200x630px recommended) for social sharing.'
-            })
-        
-        # Twitter Card recommendations
-        if not metadata.get('twitter:card'):
-            recommendations.append({
-                'type': 'info',
-                'message': 'Consider adding Twitter Card meta tags for better Twitter sharing experience.'
-            })
+        if error:
+            st.error(error)
+            return
+            
+        # Progress indicator
+        progress_bar = st.progress(0)
+        status_text = st.empty()
         
-        # Technical SEO recommendations
-        if not metadata.get('viewport'):
-            recommendations.append({
-                'type': 'error',
-                'message': 'Missing viewport meta tag. Add <meta name="viewport" content="width=device-width, initial-scale=1"> for mobile optimization.'
-            })
+        try:
+            # Initialize analyzer
+            status_text.text("🌐 Fetching website data...")
+            progress_bar.progress(20)
+            
+            analyzer = SEOAnalyzer()
+            analysis_result = analyzer.analyze_website(normalized_url)
+            
+            if not analysis_result['success']:
+                st.error(f"❌ Failed to analyze website: {analysis_result['error']}")
+                return
+            
+            progress_bar.progress(60)
+            status_text.text("🔍 Analyzing SEO metadata...")
+            
+            # Generate previews
+            progress_bar.progress(80)
+            status_text.text("🎨 Generating previews...")
+            
+            preview_gen = PreviewGenerator(analysis_result['metadata'])
+            
+            progress_bar.progress(100)
+            status_text.text("✅ Analysis complete!")
+             results
+            display_results(analysis_result, preview_gen, normalized_url)
+            
+        except Exception as e:
+            st.error(f"❌ An error occurred during analysis: {str(e)}")
+            progress_bar.empty()
+            status_text.empty()
+    
+    else:
+        # Show welcome dashboard when no analysis is running
+        col1, col2, col3 = st.columns([1, 2, 1])
+        with col2:
+            st.markdown("""
+            <div style="
+                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+                padding: 2rem;
+                border-radius: 15px;
+                margin: 2rem 0;
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            ">
+                <h3 style="text-align: center; color: #2c3e50; margin-bottom: 1.5rem;">🎯 How It Works</h3>
+                
+                <div style="display: flex; align-items: center; margin-bottom: 1rem;">
+                    <div style="background: #3498db; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-weight: bold;">1</div>
+                    <span><strong>Enter a URL</strong> in the sidebar (e.g., google.com, github.com)</span>
+                </div>
+                
+                <div style="display: flex; align-items: center; margin-bottom: 1rem;">
+                    <div style="background: #e74c3c; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-weight: bold;">2</div>
+                    <span><strong>Click Analyze SEO</strong> to start the comprehensive analysis</span>
+                </div>
+                
+                <div style="display: flex; align-items: center; margin-bottom: 1.5rem;">
+                    <div style="background: #27ae60; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-weight: bold;">3</div>
+                    <span><strong>Review detailed results</strong> with actionable insights</span>
+                </div>
+                
+                <h4 style="color: #2c3e50; margin-bottom: 1rem;">📊 Complete SEO Analysis Includes:</h4>
+                <ul style="color: #34495e; line-height: 1.6;">
+                    <li><strong>SEO Score & Status</strong> - Overall website rating</li>
+                    <li><strong>Meta Tags Analysis</strong> - Title, description, keywords</li>
+                    <li><strong>Social Media Previews</strong> - Facebook, Twitter cards</li>
+                    <li><strong>Google Search Preview</strong> - How your site appears in search</li>
+                    <li><strong>Technical SEO Check</strong> - Viewport, canonical URLs, robots</li>
+                    <li><strong>Structured Data</strong> - JSON-LD schema markup</li>
+                    <li><strong>Priority Recommendations</strong> - Step-by-step improvement guide</li>
+                </ul>
+            </div>
+            """, unsafe_allow_html=True)
         
-        if not metadata.get('charset'):
-            recommendations.append({
-                'type': 'warning',
-                'message': 'Missing charset declaration. Add <meta charset="UTF-8"> in the head section.'
-            })
+        # Example websites to try
+        st.markdown("### 🌟 Try These Popular Websites:")
         
-        if not metadata.get('link-canonical'):
-            recommendations.append({
-                'type': 'info',
-                'message': 'Consider adding a canonical URL to prevent duplicate content issues.'
-            })
+        example_col1, example_col2, example_col3 = st.columns(3)
         
-        # Robots meta tag
-        robots = metadata.get('robots', '')
-        if 'noindex' in robots.lower():
-            recommendations.append({
-                'type': 'warning',
-                'message': 'Page is set to noindex. Remove this if you want the page to be indexed by search engines.'
-            })
+        with example_col1:
+            if st.button("📚 GitHub", use_container_width=True):
+                st.session_state.example_url = "github.com"
+                st.rerun()
+                
+        with example_col2:
+            if st.button("🔍 Google", use_container_width=True):
+                st.session_state.example_url = "google.com"
+                st.rerun()
+                
+        with example_col3:
+            if st.button("💼 LinkedIn", use_container_width=True):
+                st.session_state.example_url = "linkedin.com"
+                st.rerun()
         
-        return recommendations
+        # Handle example URL selection
+        if hasattr(st.session_state, 'example_url'):
+            st.info(f"💡 Example selected: {st.session_state.example_url} - Enter this in the sidebar and click Analyze!")
+
+def display_results(analysis_result, preview_gen, url):
+    """Display the complete analysis results"""
+    metadata = analysis_result['metadata']
+    seo_score = analysis_result['seo_score']
+    recommendations = analysis_result['recommendations']
+    
+    # Overall SEO Status Header
+    st.header("🎯 SEO Analysis Report")
+    
+    # Overall Status Card
+    if seo_score >= 80:
+        status_color = "#28a745"
+        status_text = "EXCELLENT"
+        status_icon = "🟢"
+        status_message = "Your website has excellent SEO optimization!"
+    elif seo_score >= 60:
+        status_color = "#ffc107"
+        status_text = "GOOD"
+        status_icon = "🟡"
+        status_message = "Your website has good SEO with room for improvement."
+    else:
+        status_color = "#dc3545"
+        status_text = "NEEDS IMPROVEMENT"
+        status_icon = "🔴"
+        status_message = "Your website needs significant SEO improvements."
+    
+    # Main Status Display
+    st.markdown(f"""
+    <div style="
+        background: linear-gradient(135deg, {status_color}15, {status_color}05);
+        border: 2px solid {status_color};
+        border-radius: 15px;
+        padding: clamp(15px, 5vw, 25px);
+        margin: 20px auto;
+        text-align: center;
+        max-width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    ">
+        <h1 style="
+            margin: 0; 
+            color: {status_color}; 
+            font-size: clamp(2.5rem, 8vw, 4rem);
+            font-weight: 800;
+            line-height: 1;
+        ">{seo_score}</h1>
+        <h2 style="
+            margin: clamp(8px, 2vw, 15px) 0; 
+            color: {status_color};
+            font-size: clamp(1.2rem, 4vw, 1.8rem);
+            font-weight: 600;
+        ">{status_icon} {status_text}</h2>
+        <p style="
+            margin: 0; 
+            font-size: clamp(1rem, 3vw, 1.2rem); 
+            color: #666;
+            line-height: 1.4;
+            text-align: center;
+            max-width: 90%;
+        ">{status_message}</p>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # Previews
+    st.header("👀 Search & Social Media Previews")
+    
+    # Google Search Preview
+    st.subheader("🔍 Google Search Result Preview")
+    google_preview = preview_gen.generate_google_preview(url)
+    st.markdown(google_preview, unsafe_allow_html=True)
+    
+    # Social Media Previews
+    col1, col2 = st.columns([1, 1])
+    
+    with col1:
+        st.subheader("📘 Facebook Preview")
+        facebook_preview = preview_gen.generate_facebook_preview(url)
+        st.markdown(facebook_preview, unsafe_allow_html=True)
+    
+    with col2:
+        st.subheader("🐦 Twitter Preview")
+        twitter_preview = preview_gen.generate_twitter_preview(url)
+        st.markdown(twitter_preview, unsafe_allow_html=True)
+
+if __name__ == "__main__":
+    main()