Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LinkScout - Smart Analysis. Simple Answers.</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| width: 450px; | |
| min-height: 600px; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: #f8fafc; | |
| color: #1e293b; | |
| } | |
| .container { | |
| background: white; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #0f172a 0%, #334155 100%); | |
| padding: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%); | |
| } | |
| .header-content { | |
| position: relative; | |
| z-index: 1; | |
| text-align: center; | |
| } | |
| .logo { | |
| font-size: 36px; | |
| margin-bottom: 8px; | |
| } | |
| .header h1 { | |
| font-size: 22px; | |
| font-weight: 700; | |
| color: #ffffff; | |
| margin-bottom: 4px; | |
| letter-spacing: -0.5px; | |
| } | |
| .tagline { | |
| font-size: 12px; | |
| color: #cbd5e1; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| } | |
| .status-badge { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| padding: 4px 10px; | |
| background: rgba(34, 197, 94, 0.2); | |
| border: 1px solid rgba(34, 197, 94, 0.4); | |
| border-radius: 12px; | |
| font-size: 9px; | |
| font-weight: 700; | |
| color: #22c55e; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .search-section { | |
| padding: 20px; | |
| background: #f8fafc; | |
| border-bottom: 1px solid #e2e8f0; | |
| } | |
| .input-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: #64748b; | |
| margin-bottom: 8px; | |
| display: block; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .search-wrapper { | |
| position: relative; | |
| margin-bottom: 12px; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 12px 40px 12px 14px; | |
| border: 2px solid #e2e8f0; | |
| border-radius: 8px; | |
| font-size: 13px; | |
| font-family: inherit; | |
| transition: all 0.2s; | |
| background: white; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .clear-btn { | |
| position: absolute; | |
| right: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: #e2e8f0; | |
| border: none; | |
| color: #64748b; | |
| font-size: 18px; | |
| cursor: pointer; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| transition: all 0.2s; | |
| display: none; | |
| } | |
| .clear-btn:hover { | |
| background: #cbd5e1; | |
| } | |
| .button-group { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| } | |
| .btn { | |
| padding: 12px; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| color: white; | |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| transform: translateY(-1px); | |
| box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35); | |
| } | |
| .btn-secondary { | |
| background: #10b981; | |
| color: white; | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background: #059669; | |
| transform: translateY(-1px); | |
| } | |
| .btn-warning { | |
| background: #f59e0b; | |
| color: white; | |
| } | |
| .btn-warning:hover:not(:disabled) { | |
| background: #d97706; | |
| transform: translateY(-1px); | |
| } | |
| .btn-danger { | |
| background: #ef4444; | |
| color: white; | |
| } | |
| .btn-danger:hover:not(:disabled) { | |
| background: #dc2626; | |
| transform: translateY(-1px); | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none ; | |
| } | |
| .results-section { | |
| padding: 20px; | |
| max-height: 450px; | |
| overflow-y: auto; | |
| } | |
| .loading { | |
| text-align: center; | |
| padding: 40px 20px; | |
| } | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 3px solid #e2e8f0; | |
| border-top-color: #3b82f6; | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| margin: 0 auto 16px; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loading-text { | |
| font-size: 13px; | |
| color: #64748b; | |
| font-weight: 500; | |
| } | |
| .percentage-display { | |
| text-align: center; | |
| padding: 24px; | |
| margin-bottom: 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); | |
| } | |
| .percentage-value { | |
| font-size: 54px; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .percentage-value.low { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .percentage-value.medium { | |
| background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .verdict-text { | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .section { | |
| margin-bottom: 16px; | |
| padding: 14px; | |
| background: #f8fafc; | |
| border-radius: 8px; | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .section-title { | |
| font-size: 13px; | |
| font-weight: 700; | |
| color: #1e293b; | |
| margin-bottom: 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .section-content { | |
| font-size: 12px; | |
| line-height: 1.6; | |
| color: #475569; | |
| } | |
| .tabs { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 16px; | |
| border-bottom: 2px solid #e2e8f0; | |
| } | |
| .tab-btn { | |
| padding: 10px 16px; | |
| background: transparent; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| font-size: 12px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| color: #64748b; | |
| transition: all 0.2s; | |
| margin-bottom: -2px; | |
| } | |
| .tab-btn.active { | |
| color: #3b82f6; | |
| border-bottom-color: #3b82f6; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .suspicious-item { | |
| background: white; | |
| padding: 12px; | |
| margin-bottom: 10px; | |
| border-radius: 6px; | |
| border-left: 4px solid #ef4444; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| } | |
| .suspicious-item.medium { | |
| border-left-color: #f59e0b; | |
| } | |
| .suspicious-item.low { | |
| border-left-color: #10b981; | |
| } | |
| .source-link { | |
| display: block; | |
| padding: 10px; | |
| margin-bottom: 8px; | |
| background: white; | |
| border-radius: 6px; | |
| text-decoration: none; | |
| color: #3b82f6; | |
| font-size: 12px; | |
| transition: background 0.2s; | |
| border: 1px solid #e2e8f0; | |
| } | |
| .source-link:hover { | |
| background: #eff6ff; | |
| } | |
| .no-results { | |
| text-align: center; | |
| padding: 40px 20px; | |
| color: #64748b; | |
| } | |
| .no-results h3 { | |
| font-size: 16px; | |
| margin-bottom: 12px; | |
| color: #1e293b; | |
| } | |
| .features-list { | |
| text-align: left; | |
| display: inline-block; | |
| margin-top: 16px; | |
| font-size: 12px; | |
| line-height: 1.8; | |
| } | |
| .feature-badge { | |
| display: inline-block; | |
| padding: 3px 8px; | |
| background: #eff6ff; | |
| border: 1px solid #bfdbfe; | |
| border-radius: 4px; | |
| font-size: 9px; | |
| font-weight: 600; | |
| color: #1e40af; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| margin: 2px; | |
| } | |
| /* Scrollbar */ | |
| .results-section::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .results-section::-webkit-scrollbar-track { | |
| background: #f8fafc; | |
| } | |
| .results-section::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 3px; | |
| } | |
| .results-section::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <div class="status-badge">Active</div> | |
| <div class="header-content"> | |
| <div class="logo">🔍</div> | |
| <h1>LinkScout</h1> | |
| <p class="tagline">Smart Analysis. Simple Answers.</p> | |
| </div> | |
| </div> | |
| <!-- Search Section --> | |
| <div class="search-section"> | |
| <label class="input-label">🔍 Enter Text or URL</label> | |
| <div class="search-wrapper"> | |
| <input | |
| type="text" | |
| id="searchInput" | |
| class="search-input" | |
| placeholder="Paste article text or URL to analyze..." | |
| autocomplete="off" | |
| > | |
| <button id="clearBtn" class="clear-btn">×</button> | |
| </div> | |
| <div class="button-group" style="margin-bottom: 10px;"> | |
| <button id="analyzeBtn" class="btn btn-primary" disabled> | |
| <span>🔬</span> | |
| <span>Analyze</span> | |
| </button> | |
| <button id="scanPageBtn" class="btn btn-secondary"> | |
| <span>📄</span> | |
| <span>Scan Page</span> | |
| </button> | |
| </div> | |
| <div class="button-group"> | |
| <button id="highlightBtn" class="btn btn-warning"> | |
| <span>🎨</span> | |
| <span>Highlight</span> | |
| </button> | |
| <button id="clearHighlightBtn" class="btn btn-danger"> | |
| <span>❌</span> | |
| <span>Clear</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="resultsSection" class="results-section"> | |
| <div class="no-results"> | |
| <h3>👋 Welcome to LinkScout!</h3> | |
| <p style="margin-top: 10px; font-size: 13px; line-height: 1.6;"> | |
| Your AI-powered fact-checking companion combining: | |
| </p> | |
| <div class="features-list"> | |
| • Advanced AI-powered analysis<br> | |
| • Real-time web research & fact-checking<br> | |
| • Smart paragraph highlighting<br> | |
| • Comprehensive misinformation detection<br> | |
| • Source credibility analysis<br> | |
| • Learns from your feedback to improve accuracy | |
| </div> | |
| <p style="margin-top: 16px; font-size: 11px; color: #94a3b8;"> | |
| Paste text/URL above or click "Scan Page" to start | |
| </p> | |
| <div style="margin-top: 12px;"> | |
| <span class="feature-badge">AI Powered</span> | |
| <span class="feature-badge">Multi-Layer</span> | |
| <span class="feature-badge">Smart Learning</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RL Feedback Section (hidden by default) --> | |
| <div id="feedbackSection" class="search-section" style="display: none; border-top: 2px solid #e2e8f0;"> | |
| <label class="input-label">🤖 Help Improve Detection Accuracy</label> | |
| <p style="font-size: 11px; color: #64748b; margin-bottom: 12px;"> | |
| Your feedback trains our AI to be more accurate over time! | |
| </p> | |
| <div class="button-group" style="grid-template-columns: 1fr 1fr;"> | |
| <button id="feedbackCorrect" class="btn" style="background: #10b981; color: white; font-size: 11px;"> | |
| <span>✅</span> | |
| <span>Accurate</span> | |
| </button> | |
| <button id="feedbackIncorrect" class="btn" style="background: #ef4444; color: white; font-size: 11px;"> | |
| <span>❌</span> | |
| <span>Inaccurate</span> | |
| </button> | |
| </div> | |
| <div class="button-group" style="grid-template-columns: 1fr 1fr; margin-top: 8px;"> | |
| <button id="feedbackAggressive" class="btn" style="background: #f59e0b; color: white; font-size: 11px;"> | |
| <span>⚠️</span> | |
| <span>Too Strict</span> | |
| </button> | |
| <button id="feedbackLenient" class="btn" style="background: #3b82f6; color: white; font-size: 11px;"> | |
| <span>📊</span> | |
| <span>Too Lenient</span> | |
| </button> | |
| </div> | |
| <!-- RL Stats Display --> | |
| <div id="rlStatsDisplay" style="margin-top: 12px; padding: 10px; background: #f8fafc; border-radius: 6px; font-size: 10px; color: #64748b; display: none;"> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 4px;"> | |
| <span>📚 Learning Episodes:</span> | |
| <span id="rlEpisodes" style="font-weight: 600; color: #1e293b;">0</span> | |
| </div> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 4px;"> | |
| <span>🎯 Model Accuracy:</span> | |
| <span id="rlAccuracy" style="font-weight: 600; color: #10b981;">--</span> | |
| </div> | |
| <div style="display: flex; justify-content: space-between;"> | |
| <span>🔬 Exploration Rate:</span> | |
| <span id="rlEpsilon" style="font-weight: 600; color: #3b82f6;">--</span> | |
| </div> | |
| </div> | |
| <!-- Feedback Success Message --> | |
| <div id="feedbackSuccess" style="display: none; margin-top: 10px; padding: 8px; background: #dcfce7; border: 1px solid #86efac; border-radius: 6px; font-size: 11px; color: #166534; text-align: center;"> | |
| ✅ Thank you! Your feedback helps improve accuracy. | |
| </div> | |
| </div> | |
| </div> | |
| <script src="popup.js"></script> | |
| </body> | |
| </html> | |