/* Global Styles */ :root { --primary: #2563eb; /* ZeroGPT blue */ --primary-dark: #1e40af; --primary-light: #93c5fd; --secondary: #10b981; /* Green */ --danger: #dc2626; /* Red */ --dark: #1e293b; --light: #f8fafc; --gray: #64748b; --gray-light: #e2e8f0; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; background-color: var(--light); color: var(--dark); } a { text-decoration: none; color: inherit; } /* Main Content Styles */ .main-container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; } .hero { text-align: center; margin-bottom: 3rem; } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--primary-dark); line-height: 1.2; } .hero p { font-size: 1.1rem; color: var(--gray); max-width: 700px; margin: 0 auto 2rem; } /* AI Detector Tool Styles */ .tool-container { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 700px; margin: 0 auto; padding: 25px; background-color: #f8fafc; color: #334155; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 3rem; } .tool-container h1 { color: #1e40af; text-align: center; margin-bottom: 25px; font-weight: 700; } textarea { width: 100%; padding: 15px; margin-bottom: 20px; min-height: 200px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 16px; resize: vertical; transition: border 0.3s; background-color: #f1f5f9; } textarea:focus { outline: none; border-color: #1e40af; } .button-group { display: flex; gap: 12px; margin-bottom: 25px; flex-wrap: wrap; } button { padding: 12px 24px; background: #1e40af; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600; transition: all 0.3s; } button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } button.secondary { background: #64748b; } button.danger { background: #dc2626; } #counter { color: #64748b; margin-bottom: 15px; font-size: 14px; text-align: center; } .circle-container { width: 200px; height: 200px; margin: 0 auto 25px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .circle-bg { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #f1f5f9; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .circle-progress { position: relative; width: 180px; height: 180px; border-radius: 50%; background: conic-gradient( var(--circle-color) 0% var(--percentage), #e2e8f0 var(--percentage) 100% ); display: flex; align-items: center; justify-content: center; z-index: 1; } .circle-content { width: 160px; height: 160px; background: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); } .circle-percentage { font-size: 2.8rem; font-weight: 700; color: var(--circle-color); } .circle-label { font-size: 1.1rem; color: #64748b; margin-top: 5px; } #results { margin-top: 30px; padding: 30px; border-radius: 12px; background: white; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: none; } .results-heading { text-align: center; margin-bottom: 20px; } .conclusion { text-align: center; margin-bottom: 25px; font-size: 1.1rem; line-height: 1.6; } #highlightedText { border: 1px solid #e2e8f0; padding: 20px; border-radius: 8px; margin-top: 20px; line-height: 1.7; background-color: #f8fafc; } .ai-highlight { background-color: rgba(220, 38, 38, 0.15); padding: 2px 4px; border-radius: 4px; border-left: 3px solid #dc2626; } .human-highlight { background-color: rgba(16, 185, 129, 0.15); padding: 2px 4px; border-radius: 4px; border-left: 3px solid #10b981; } .action-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 25px; } .brand-header { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .brand-logo { font-size: 28px; margin-right: 10px; color: #1e40af; } .brand-name { font-size: 24px; font-weight: 700; color: #1e40af; } /* Content Publishing Section */ .publish-section { background-color: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); padding: 2rem; margin-bottom: 3rem; max-width: 800px; margin-left: auto; margin-right: auto; } .publish-section h2 { font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--primary-dark); } .publish-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .publish-option { background-color: var(--light); border-radius: 8px; padding: 1.5rem; transition: transform 0.3s, box-shadow 0.3s; } .publish-option:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .publish-option h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--primary); } .publish-option p { color: var(--gray); margin-bottom: 1rem; } .publish-btn { display: inline-block; background-color: var(--primary); color: white; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; transition: background-color 0.3s; } .publish-btn:hover { background-color: var(--primary-dark); } /* Footer Styles */ footer { background-color: var(--dark); color: white; padding: 3rem 0 1.5rem; } .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; } .footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; } .footer-logo-icon { font-size: 1.5rem; color: var(--primary-light); } .footer-logo-text { font-size: 1.2rem; font-weight: 700; color: white; } .footer-about p { color: #94a3b8; margin-bottom: 1rem; } .footer-links h3 { font-size: 1.1rem; margin-bottom: 1rem; color: white; } .footer-links ul { list-style: none; } .footer-links ul li { margin-bottom: 0.5rem; } .footer-links ul li a { color: #94a3b8; transition: color 0.3s; } .footer-links ul li a:hover { color: white; } .footer-bottom { text-align: center; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid #334155; color: #94a3b8; font-size: 0.9rem; } /* Responsive Styles */ @media (max-width: 768px) { .hero h1 { font-size: 2rem; } .main-container { padding: 0 1rem; } .tool-container, .publish-section { padding: 1.5rem; } .publish-options { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero h1 { font-size: 1.8rem; } .button-group { flex-direction: column; } button { width: 100%; } }

// Initialize on page load document.addEventListener('DOMContentLoaded', function() { // Set up event listeners setupEventListeners(); // Initialize result cache if (!localStorage.getItem('resultCache')) { localStorage.setItem('resultCache', JSON.stringify({})); } }); // Result cache to store analysis results const resultCache = {}; function setupEventListeners() { // Word counter document.getElementById('textInput').addEventListener('input', function() { const text = this.value; const words = text.trim() ? text.trim().split(/\s+/).length : 0; document.getElementById('counter').textContent = `Words: ${words} | Characters: ${text.length}`; }); // Copy text document.getElementById('copyBtn').addEventListener('click', function() { const textarea = document.getElementById('textInput'); textarea.select(); document.execCommand('copy'); // Visual feedback const originalText = textarea.value; textarea.value = "✓ Text copied to clipboard!"; setTimeout(() => { textarea.value = originalText; }, 1000); }); // Clear all document.getElementById('clearBtn').addEventListener('click', function() { document.getElementById('textInput').value = ''; document.getElementById('results').style.display = 'none'; document.getElementById('counter').textContent = 'Words: 0 | Characters: 0'; }); // Analyze text document.getElementById('analyzeBtn').addEventListener('click', function() { const text = document.getElementById('textInput').value.trim(); if (text.length alert('Results copied to clipboard!')) .catch(err => console.error('Failed to copy:', err)); }); // Download results document.getElementById('downloadBtn').addEventListener('click', function() { alert('For PDF report: Press Ctrl+P and select "Save as PDF"'); }); } function analyzeTextContent(text) { // Check cache first const cache = JSON.parse(localStorage.getItem('resultCache')); const textHash = hashCode(text); if (cache[textHash]) { return cache[textHash]; } // More sophisticated analysis with multiple factors let aiScore = 0; let humanScore = 0; // 1. Check for common AI patterns const aiPatterns = [ // Common AI phrases { regex: /in conclusion/gi, weight: 1.5 }, { regex: /it is important to note/gi, weight: 1.5 }, { regex: /moreover/gi, weight: 1.2 }, { regex: /however/gi, weight: 1.2 }, { regex: /furthermore/gi, weight: 1.5 }, { regex: /as a result/gi, weight: 1.3 }, { regex: /in summary/gi, weight: 1.5 }, { regex: /this (paper|essay|article)/gi, weight: 1.2 }, // Structural patterns { regex: /[a-z]\,\s[a-z]/g, weight: 1.1 }, { regex: /\.\s[A-Z][a-z]+\s[A-Z][a-z]+/g, weight: 1.3 }, { regex: /[A-Z][a-z]+([a-z]+\s){8,}\./g, weight: 1.4 }, { regex: /firstly|secondly|thirdly|finally/gi, weight: 1.4 }, { regex: /on the one hand|on the other hand/gi, weight: 1.5 }, // Vocabulary complexity { regex: /\b(utilize|facilitate|endeavor|commence)\b/gi, weight: 1.2 }, { regex: /\b(paradigm|leverage|synergy|optimal)\b/gi, weight: 1.3 } ]; aiPatterns.forEach(pattern => { const matches = text.match(pattern.regex) || []; aiScore += matches.length * pattern.weight; }); // 2. Check for human writing patterns const humanPatterns = [ // Personal pronouns { regex: /\b(I|me|my|we|our|us)\b/gi, weight: 1.5 }, // Informal elements { regex: /\!/g, weight: 1.2 }, { regex: /\?/g, weight: 1.1 }, { regex: /\.\.\./g, weight: 1.3 }, { regex: /\(.*?\)/g, weight: 1.2 }, { regex: /[a-z]'[a-z]/g, weight: 1.1 }, { regex: /[^\w\s]'/g, weight: 1.1 }, { regex: /\b(like|just|really|actually|maybe|perhaps)\b/gi, weight: 1.3 }, // Sentence fragments { regex: /^[a-z][^\.!?]*$/gm, weight: 1.4 }, { regex: /but\s[a-z]/gi, weight: 1.2 }, { regex: /and\s[a-z]/gi, weight: 1.2 }, // Personal experiences { regex: /\b(in my experience|I think|I believe|I feel)\b/gi, weight: 1.6 } ]; humanPatterns.forEach(pattern => { const matches = text.match(pattern.regex) || []; humanScore += matches.length * pattern.weight; }); // 3. Text statistics analysis const sentences = text.split(/[.!?]+/).filter(s => s.trim().length > 0); const words = text.trim() ? text.trim().split(/\s+/) : []; const avgSentenceLength = words.length / sentences.length; if (avgSentenceLength > 18) aiScore += 3; else if (avgSentenceLength p.trim().length > 0); if (paragraphs.length > 2) { const lengths = paragraphs.map(p => p.split(/\s+/).length); const variance = Math.max(...lengths) - Math.min(...lengths); if (variance 0) { aiProbability = (aiScore / totalScore) * 100; humanProbability = (humanScore / totalScore) * 100; } // Add small randomness (1-3%) to prevent fixed results but keep it consistent const randomFactor = (hashCode(text) % 5) - 2; // -2 to +2 aiProbability = Math.max(5, Math.min(95, aiProbability + randomFactor)); humanProbability = 100 - aiProbability; // Highlight text with more nuanced detection const highlighted = highlightText(text, aiProbability, humanScore, aiScore); const result = { text, aiProbability: parseFloat(aiProbability.toFixed(1)), humanProbability: parseFloat(humanProbability.toFixed(1)), isHumanDominant: humanProbability >= aiProbability, highlighted }; // Store in cache cache[textHash] = result; localStorage.setItem('resultCache', JSON.stringify(cache)); return result; } function highlightText(text, aiProbability, humanScore, aiScore) { // Split into sentences while preserving punctuation const sentenceRegex = /[^.!?]+[.!?]+[\])'"`’”]*|.+$/g; const sentences = text.match(sentenceRegex) || []; let highlightedHTML = ''; // Determine threshold for highlighting const baseThreshold = aiProbability / 100; sentences.forEach(sentence => { if (!sentence.trim()) return; // Calculate sentence features let sentenceAiScore = 0; let sentenceHumanScore = 0; // Check for AI patterns in this sentence const aiPatterns = [ /in conclusion/gi, /it is important to note/gi, /moreover/gi, /however/gi, /furthermore/gi, /as a result/gi, /[a-z]\,\s[a-z]/g, /\.\s[A-Z][a-z]+\s[A-Z][a-z]+/g, /[A-Z][a-z]+([a-z]+\s){8,}\./g, /firstly|secondly|thirdly|finally/gi, /on the one hand|on the other hand/gi, /\b(utilize|facilitate|endeavor|commence)\b/gi, /\b(paradigm|leverage|synergy|optimal)\b/gi ]; aiPatterns.forEach(pattern => { sentenceAiScore += (sentence.match(pattern) || []).length; }); // Check for human patterns in this sentence const humanPatterns = [ /\b(I|me|my|we|our|us)\b/gi, /\!|\?|\.\.\.|\(.*?\)/g, /[a-z]'[a-z]/g, /[^\w\s]'/g, /\b(like|just|really|actually|maybe|perhaps)\b/gi, /^[a-z][^\.!?]*$/gm, /but\s[a-z]|and\s[a-z]/gi, /\b(in my experience|I think|I believe|I feel)\b/gi ]; humanPatterns.forEach(pattern => { sentenceHumanScore += (sentence.match(pattern) || []).length; }); // Calculate sentence score const total = sentenceAiScore + sentenceHumanScore; let sentenceAiProb = 0; if (total > 0) { sentenceAiProb = sentenceAiScore / total; } // Adjust with overall document probabilities const adjustedProb = (sentenceAiProb * 0.7) + (baseThreshold * 0.3); // Determine if sentence is AI-like const isAISentence = adjustedProb > 0.5; highlightedHTML += isAISentence ? `${sentence} ` : `${sentence} `; }); return highlightedHTML; } function displayResults(result) { const { aiProbability, humanProbability, isHumanDominant, highlighted } = result; // Set circle colors and values const circle = document.getElementById('resultCircle'); const percentageDisplay = document.getElementById('percentageDisplay'); const resultLabel = document.getElementById('resultLabel'); if (isHumanDominant) { // Human-dominant result circle.style.setProperty('--circle-color', '#10b981'); circle.style.setProperty('--percentage', `${humanProbability}%`); percentageDisplay.textContent = `${humanProbability}%`; percentageDisplay.style.color = '#10b981'; resultLabel.textContent = 'Human'; resultLabel.style.color = '#10b981'; // Update conclusion text document.getElementById('mainResultType').textContent = 'Human written'; document.getElementById('mainResultType').style.color = '#10b981'; document.getElementById('secondaryResultType').textContent = 'AI'; document.getElementById('secondaryResultType').style.color = '#dc2626'; } else { // AI-dominant result circle.style.setProperty('--circle-color', '#dc2626'); circle.style.setProperty('--percentage', `${aiProbability}%`); percentageDisplay.textContent = `${aiProbability}%`; percentageDisplay.style.color = '#dc2626'; resultLabel.textContent = 'AI'; resultLabel.style.color = '#dc2626'; // Update conclusion text document.getElementById('mainResultType').textContent = 'AI generated'; document.getElementById('mainResultType').style.color = '#dc2626'; document.getElementById('secondaryResultType').textContent = 'human written'; document.getElementById('secondaryResultType').style.color = '#10b981'; } // Update highlighted text document.getElementById('highlightedText').innerHTML = highlighted; // Show results document.getElementById('results').style.display = 'block'; } function hashCode(str) { let hash = 0; for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash |= 0; } return hash; }