Spaces:

Lee6x
/

anycoder-e9ecd2ea

Running

File size: 22,913 Bytes

b43dd2e

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Profile Data Analyzer - Educational Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #5931ea;
            --primary-dark: #4a25c7;
            --secondary: #ff6b6b;
            --success: #51cf66;
            --warning: #ffd43b;
            --dark: #2d3436;
            --light: #f8f9fa;
            --border: #dee2e6;
            --shadow: rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            background: white;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 20px 40px var(--shadow);
            animation: slideDown 0.5s ease;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        h1 {
            color: var(--dark);
            font-size: 2rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo {
            width: 40px;
            height: 40px;
            background: var(--primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .attribution {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            transition: opacity 0.3s;
        }

        .attribution:hover {
            opacity: 0.8;
        }

        .warning-banner {
            background: linear-gradient(135deg, #ff6b6b, #ff8787);
            color: white;
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 30px;
            animation: pulse 2s infinite;
        }

        .warning-banner h2 {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        .card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px var(--shadow);
            animation: fadeIn 0.6s ease;
        }

        .card h2 {
            color: var(--dark);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .feature-grid {
            display: grid;
            gap: 15px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: var(--light);
            border-radius: 10px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .feature-item:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 15px var(--shadow);
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }

        .demo-section {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px var(--shadow);
            margin-bottom: 30px;
        }

        .demo-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--border);
        }

        .tab-btn {
            padding: 12px 24px;
            background: none;
            border: none;
            color: var(--dark);
            font-weight: 500;
            cursor: pointer;
            position: relative;
            transition: color 0.3s;
        }

        .tab-btn.active {
            color: var(--primary);
        }

        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary);
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.3s;
        }

        .tab-content.active {
            display: block;
        }

        .code-block {
            background: #2d3436;
            color: #dfe6e9;
            padding: 20px;
            border-radius: 10px;
            overflow-x: auto;
            margin-top: 15px;
        }

        .code-block pre {
            margin: 0;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
        }

        .install-steps {
            display: grid;
            gap: 15px;
        }

        .step-item {
            display: flex;
            gap: 15px;
            padding: 20px;
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            border-radius: 10px;
            align-items: start;
        }

        .step-number {
            width: 30px;
            height: 30px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            flex-shrink: 0;
        }

        .ethical-section {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
        }

        .ethical-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .ethical-item {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .ethical-item h3 {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn {
            padding: 12px 24px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 10px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(89, 49, 234, 0.3);
        }

        .btn-secondary {
            background: var(--secondary);
        }

        .btn-secondary:hover {
            background: #ff5252;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.02);
            }
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 1.5rem;
            }

            .ethical-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="header-content">
                <h1>
                    <div class="logo">🦊</div>
                    Social Profile Analyzer - Educational Demo
                </h1>
                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="attribution">
                    Built with anycoder
                </a>
            </div>
        </header>

        <div class="warning-banner">
            <h2>⚠️ Important Ethical Notice</h2>
            <p>This is an <strong>educational demonstration</strong> only. Real browser extensions that extract private data (passwords, messages, etc.) are illegal and unethical. Always respect user privacy and comply with laws like GDPR and CCPA. This demo only shows publicly available information that's already visible on the page.</p>
        </div>

        <div class="main-content">
            <div class="card">
                <h2>🔧 Extension Features (Demo)</h2>
                <div class="feature-grid">
                    <div class="feature-item">
                        <div class="feature-icon">👤</div>
                        <div>
                            <h3>Public Profile Info</h3>
                            <p>Extract publicly visible profile names and bios</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">📊</div>
                        <div>
                            <h3>Public Statistics</h3>
                            <p>View follower counts and public metrics</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">🖼️</div>
                        <div>
                            <h3>Public Images</h3>
                            <p>Display publicly shared profile pictures</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">📱</div>
                        <div>
                            <h3>Platform Detection</h3>
                            <p>Identify social media platform type</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <h2>🛡️ Security & Ethics</h2>
                <div class="feature-grid">
                    <div class="feature-item">
                        <div class="feature-icon">🔒</div>
                        <div>
                            <h3>No Password Access</h3>
                            <p>Never attempts to access passwords or credentials</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">🚫</div>
                        <div>
                            <h3>No Private Messages</h3>
                            <p>Does not read or extract private communications</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">📜</div>
                        <div>
                            <h3>GDPR Compliant</h3>
                            <p>Only processes publicly available information</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">✅</div>
                        <div>
                            <h3>Transparent</h3>
                            <p>All actions are visible to the user</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h2>📝 Extension Code Structure</h2>
            <div class="demo-tabs">
                <button class="tab-btn active" onclick="switchTab('manifest')">manifest.json</button>
                <button class="tab-btn" onclick="switchTab('content')">content.js</button>
                <button class="tab-btn" onclick="switchTab('popup')">popup.js</button>
                <button class="tab-btn" onclick="switchTab('background')">background.js</button>
            </div>
            
            <div id="manifest" class="tab-content active">
                <h3>Extension Manifest Configuration</h3>
                <div class="code-block">
                    <pre>{
  "manifest_version": 2,
  "name": "Social Profile Analyzer (Educational)",
  "version": "1.0.0",
  "description": "Educational demo for analyzing public social media profiles",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "content_scripts": [{
    "matches": ["*://*.facebook.com/*", "*://*.twitter.com/*", "*://*.instagram.com/*"],
    "js": ["content.js"]
  }],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  }
}</pre>
                </div>
            </div>

            <div id="content" class="tab-content">
                <h3>Content Script - Public Data Extraction Only</h3>
                <div class="code-block">
                    <pre>// Educational: Extract only PUBLICLY visible information
class PublicProfileAnalyzer {
  analyzeProfile() {
    const data = {
      platform: this.detectPlatform(),
      publicInfo: this.extractPublicInfo(),
      timestamp: new Date().toISOString()
    };
    
    // Only extract what's already visible on the page
    return data;
  }
  
  detectPlatform() {
    const hostname = window.location.hostname;
    if (hostname.includes('facebook')) return 'Facebook';
    if (hostname.includes('twitter')) return 'Twitter';
    if (hostname.includes('instagram')) return 'Instagram';
    return 'Unknown';
  }
  
  extractPublicInfo() {
    // Example: Get profile name from public elements
    const nameElement = document.querySelector('h1, [data-testid="UserName"]');
    const bioElement = document.querySelector('[data-testid="UserDescription"], .bio');
    const followersElement = document.querySelector('[data-testid="UserFollowers"]');
    
    return {
      displayName: nameElement?.textContent || 'Not found',
      bio: bioElement?.textContent?.substring(0, 100) || 'Not found',
      followers: followersElement?.textContent || 'Not found'
    };
  }
}

// Initialize when page loads
window.addEventListener('load', () => {
  const analyzer = new PublicProfileAnalyzer();
  console.log('Educational: Analyzing public profile data only');
});</pre>
                </div>
            </div>

            <div id="popup" class="tab-content">
                <h3>Popup Interface - User Control Panel</h3>
                <div class="code-block">
                    <pre>// popup.js - Extension popup interface
document.addEventListener('DOMContentLoaded', () => {
  const analyzeBtn = document.getElementById('analyzeBtn');
  const exportBtn = document.getElementById('exportBtn');
  const clearBtn = document.getElementById('clearBtn');
  
  analyzeBtn.addEventListener('click', () => {
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, {
        action: 'analyzePublicProfile'
      }, (response) => {
        displayResults(response);
      });
    });
  });
  
  exportBtn.addEventListener('click', () => {
    const data = getCurrentData();
    const blob = new Blob([JSON.stringify(data, null, 2)], 
                         {type: 'application/json'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'public-profile-data.json';
    a.click();
  });
  
  clearBtn.addEventListener('click', () => {
    chrome.storage.local.clear();
    document.getElementById('results').innerHTML = '';
  });
});

function displayResults(data) {
  const resultsDiv = document.getElementById('results');
  resultsDiv.innerHTML = `
    &lt;div class="result-item"&gt;
      &lt;h3&gt;${data.platform} Profile&lt;/h3&gt;
      &lt;p&gt;Name: ${data.publicInfo.displayName}&lt;/p&gt;
      &lt;p&gt;Bio: ${data.publicInfo.bio}&lt;/p&gt;
      &lt;p&gt;Followers: ${data.publicInfo.followers}&lt;/p&gt;
    &lt;/div&gt;
  `;
}</pre>
                </div>
            </div>

            <div id="background" class="tab-content">
                <h3>Background Script - Service Worker</h3>
                <div class="code-block">
                    <pre>// background.js - Extension background service
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'analyzePublicProfile') {
    // Log for educational purposes only
    console.log('Educational: Processing public profile request');
    
    // Store data locally with user consent
    chrome.storage.local.set({
      lastAnalysis: {
        ...request.data,
        timestamp: Date.now(),
        source: 'educational_demo'
      }
    });
    
    sendResponse({status: 'success', data: request.data});
  }
  
  if (request.action === 'checkPermissions') {
    chrome.permissions.contains({
      permissions: ['activeTab']
    }, (hasPermission) => {
      sendResponse({allowed: hasPermission});
    });
  }
  
  return true;
});

// Handle extension installation
chrome.runtime.onInstalled.addListener(() => {
  console.log('Educational Extension Installed');
  chrome.storage.local.set({
    educationalMode: true,
    privacyNoticeShown: false
  });
});</pre>
                </div>
            </div>
        </div>

        <div class="ethical-section">
            <h2>🎓 Ethical Development Guidelines</h2>
            <div class="ethical-grid">
                <div class="ethical-item">
                    <h3>🔐 Privacy First</h3>
                    <p>Always prioritize user privacy. Never collect or store sensitive personal information without explicit consent.</p>
                </div>
                <div class="ethical-item">
                    <h3>⚖️ Legal Compliance</h3>
                    <p>Follow GDPR, CCPA, and other privacy regulations. Ensure your extension complies with platform terms of service.</p>
                </div>
                <div class="ethical-item">
                    <h3>🌍 User Control</h3>
                    <p>Give users full control over their data. Provide clear opt-outs and easy data deletion options.</p>
                </div>
                <div class="ethical-item">
                    <h3>📋 Transparency</h3>
                    <p>Be transparent about what your extension does. Provide clear documentation and privacy policies.</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h2>📥 Installation Instructions (Educational Demo)</h2>
            <div class="install-steps">
                <div class="step-item">
                    <div class="step-number">1</div>
                    <div>
                        <h3>Create Extension Folder</h3>
                        <p>Create a new folder on your computer and save the manifest.json, content.js, popup.html, popup.js, and background.js files.</p>
                    </div>
                </div>
                <div class="step-item">
                    <div class="step-number">2</div>
                    <div>
                        <h3>Open Firefox Extensions</h3>
                        <p>Type about:debugging in Firefox address bar and click "This Firefox" → "Load Temporary Add-on".</p>
                    </div>
                </div>
                <div class="step-item">
                    <div class="step-number">3</div>
                    <div>
                        <h3>Select Manifest</h3>
                        <p>Navigate to your extension folder and select the manifest.json file to load the extension.</p>
                    </div>
                </div>
                <div class="step-item">
                    <div class="step-number">4</div>
                    <div>
                        <h3>Test on Social Media</h3>
                        <p>Visit a social media site and click the extension icon to see the educational demo in action.</p>
                    </div>
                </div>
            </div>
            <div style="margin-top: 20px; display: flex; gap: 10px;">
                <button class="btn" onclick="downloadDemo()">
                    📥 Download Demo Files
                </button>
                <button class="btn btn-secondary" onclick="showMoreInfo()">
                    📚 Learn More
                </button>
            </div>
        </div>
    </div>

    <script>
        function switchTab(tabName) {
            // Hide all tabs
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // Remove active class from all buttons
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // Show selected tab
            document.getElementById(tabName).classList.add('active');
            
            // Add active class to clicked button
            event.target.classList.add('active');
        }

        function downloadDemo() {
            alert('Demo files would be downloaded here. In a real implementation, this would bundle the extension files into a ZIP for download.');
        }

        function showMoreInfo() {
            alert('For more information on ethical browser extension development, visit Mozilla Add-ons Developer Hub and review their policies on privacy and data collection.');
        }

        // Add some interactivity
        document.querySelectorAll('.feature-item').forEach(item => {
            item.addEventListener('click', function() {
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 200);
            });
        });
    </script>
</body>
</html>