Files
LEAKHUB/index.html
T

435 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InfoValidator - Universal Information Verification Platform</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="floating-grid"></div>
<!-- Production Header -->
<nav class="production-nav">
<div class="nav-container">
<div class="nav-brand">
<h1 class="logo">InfoValidator</h1>
<span class="version">v3.0.0</span>
</div>
<div class="nav-menu">
<a href="#submit" class="nav-link active">Submit</a>
<a href="#library" class="nav-link">Library</a>
<a href="#compare" class="nav-link">Compare</a>
<a href="#community" class="nav-link">Community</a>
<a href="#analytics" class="nav-link">Analytics</a>
</div>
<div class="nav-actions">
<button class="user-profile-btn" onclick="toggleUserProfile()">
<span class="user-avatar">👤</span>
<span class="user-name" id="currentUserName">Guest</span>
</button>
<button class="settings-btn" onclick="toggleSettings()">⚙️</button>
</div>
</div>
</nav>
<div class="container">
<header>
<div class="hero-section">
<h1>InfoValidator</h1>
<p class="subtitle">The universal platform for crowd-sourced information verification. Humans + AI = Truth! 🔍✨</p>
<div class="hero-stats">
<div class="stat-item">
<div class="stat-icon">🎯</div>
<div class="stat-content">
<div class="stat-number" id="activeLeaks">0</div>
<div class="stat-label">Active Claims</div>
</div>
</div>
<div class="stat-item">
<div class="stat-icon">📊</div>
<div class="stat-content">
<div class="stat-number" id="totalSubmissions">0</div>
<div class="stat-label">Total Submissions</div>
</div>
</div>
<div class="stat-item">
<div class="stat-icon"></div>
<div class="stat-content">
<div class="stat-number" id="verifiedPrompts">0</div>
<div class="stat-label">Verified Claims</div>
</div>
</div>
<div class="stat-item">
<div class="stat-icon">👥</div>
<div class="stat-content">
<div class="stat-number" id="activeUsers">0</div>
<div class="stat-label">Active Validators</div>
</div>
</div>
</div>
<div class="quick-actions">
<button onclick="toggleLeaderboard()" class="action-btn primary">
🏆 Leaderboard
</button>
<button onclick="toggleRequests()" class="action-btn secondary">
🎯 Challenges
</button>
<button onclick="toggleChat()" class="action-btn tertiary">
💬 Live Chat
</button>
<button onclick="toggleAnalytics()" class="action-btn quaternary">
📈 Analytics
</button>
</div>
</div>
</header>
<!-- Real-time Chat System -->
<div id="chatPanel" class="chat-panel" style="display: none;">
<div class="chat-header">
<h3>💬 InfoValidator Live Chat</h3>
<button onclick="toggleChat()" class="close-btn">×</button>
</div>
<div class="chat-messages" id="chatMessages">
<div class="system-message">Welcome to InfoValidator Live Chat! Share discoveries, discuss verification methods, and collaborate in real-time! 🚀</div>
</div>
<div class="chat-input-container">
<input type="text" id="chatInput" placeholder="Type your message..." maxlength="500">
<button onclick="sendChatMessage()" class="send-btn">Send</button>
</div>
<div class="chat-users" id="chatUsers">
<div class="online-indicator">🟢 Online: <span id="onlineCount">1</span></div>
</div>
</div>
<!-- User Profile Overlay -->
<div id="userProfileOverlay" class="overlay" style="display: none;">
<div class="overlay-content">
<div class="close-button" onclick="toggleUserProfile()"></div>
<div class="profile-header">
<h2>👤 Validator Profile</h2>
<div class="profile-avatar" id="profileAvatar">👤</div>
<div class="profile-name" id="profileName">Guest Validator</div>
</div>
<div class="profile-stats" id="profileStats">
<!-- Stats will be populated by JavaScript -->
</div>
<div class="profile-achievements" id="profileAchievements">
<!-- Achievements will be populated by JavaScript -->
</div>
</div>
</div>
<!-- Settings Overlay -->
<div id="settingsOverlay" class="overlay" style="display: none;">
<div class="overlay-content">
<div class="close-button" onclick="toggleSettings()"></div>
<h2>⚙️ Settings</h2>
<div class="settings-section">
<h3>Validator Preferences</h3>
<label>
<input type="text" id="userNameInput" placeholder="Enter your validator name">
Validator Name
</label>
<label>
<input type="checkbox" id="notificationsEnabled" checked>
Enable Notifications
</label>
<label>
<input type="checkbox" id="autoSaveEnabled" checked>
Auto-save Data
</label>
</div>
<div class="settings-section">
<h3>Data Management</h3>
<button onclick="exportData()" class="settings-btn">📤 Export Data</button>
<button onclick="importData()" class="settings-btn">📥 Import Data</button>
<button onclick="clearAllData()" class="settings-btn danger">🗑️ Clear All Data</button>
</div>
</div>
</div>
<!-- Analytics Overlay -->
<div id="analyticsOverlay" class="overlay" style="display: none;">
<div class="overlay-content wide">
<div class="close-button" onclick="toggleAnalytics()"></div>
<h2>📈 InfoValidator Analytics</h2>
<div class="analytics-grid">
<div class="analytics-card">
<h3>📊 Platform Statistics</h3>
<div class="analytics-stats" id="platformStats">
<!-- Platform stats -->
</div>
</div>
<div class="analytics-card">
<h3>🎯 Claim Categories</h3>
<div class="analytics-chart" id="targetChart">
<!-- Category distribution chart -->
</div>
</div>
<div class="analytics-card">
<h3>📈 Growth Trends</h3>
<div class="analytics-trends" id="growthTrends">
<!-- Growth trends -->
</div>
</div>
<div class="analytics-card">
<h3>🏆 Top Validators</h3>
<div class="analytics-leaders" id="topContributors">
<!-- Top contributors -->
</div>
</div>
</div>
</div>
</div>
<div class="main-section">
<div class="panel">
<h2>📤 Submit Information Claim</h2>
<form class="submission-form" onsubmit="submitLeak(event)">
<input type="text" id="sourceName" placeholder="Your validator name (e.g., Validator123, Anonymous)" required>
<select id="targetType" onchange="updateTargetFields()" required style="width: 100%; padding: 0.5rem; margin-bottom: 1rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
<option value="">Select claim category...</option>
<option value="ai-system">🤖 AI System Prompt</option>
<option value="code-snippet">💻 Code/Algorithm</option>
<option value="data-fact">📊 Data/Fact</option>
<option value="document">📄 Document/Text</option>
<option value="image">🖼️ Image/Visual</option>
<option value="audio">🎵 Audio/Video</option>
<option value="api">🔌 API/Endpoint</option>
<option value="custom">🛠️ Custom Claim</option>
</select>
<input type="text" id="instanceId" placeholder="Claim title (e.g., 'ChatGPT-4 System Prompt', 'Bitcoin Mining Algorithm')" required>
<input type="url" id="targetUrl" placeholder="Source URL (e.g., https://example.com)" style="margin-bottom: 1rem;">
<div style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; margin-bottom: 1rem;">
<p style="color: #00aaff; font-size: 0.9rem; margin-bottom: 0.8rem;">🔒 Access Requirements</p>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<label style="display: flex; align-items: center; gap: 0.5rem; color: #888; font-size: 0.9rem;">
<input type="checkbox" id="requiresLogin" style="width: auto;">
Requires Login
</label>
<label style="display: flex; align-items: center; gap: 0.5rem; color: #888; font-size: 0.9rem;">
<input type="checkbox" id="requiresPaid" style="width: auto;">
Paid/Subscription
</label>
</div>
<input type="text" id="accessNotes" placeholder="Additional access notes (e.g., 'Plus subscription required')"
style="width: 100%; margin-top: 0.8rem; padding: 0.5rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
</div>
<div id="additionalFields" style="display: none;">
<input type="text" id="parentSystem" placeholder="Parent system (e.g., ChatGPT for a plugin)" style="margin-bottom: 1rem;">
<input type="text" id="functionName" placeholder="Specific function/tool name (if applicable)" style="margin-bottom: 1rem;">
</div>
<textarea id="leakContent" placeholder="Paste the information claim here (code, text, data, etc.)..." required></textarea>
<input type="text" id="context" placeholder="Context: How was this obtained? Verification method? (optional)">
<div style="display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem;">
<input type="checkbox" id="hasTools" onchange="toggleToolsSection()" style="width: auto;">
<label for="hasTools" style="color: #888; font-size: 0.9rem;">This claim has related sub-components or variations</label>
</div>
<div id="toolsSection" style="display: none; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; margin-bottom: 1rem;">
<p style="color: #00aaff; font-size: 0.9rem; margin-bottom: 0.5rem;">🔧 Related Components (optional)</p>
<textarea id="toolPrompts" placeholder="If you found related components or variations, paste them here..." style="min-height: 100px;"></textarea>
</div>
<button type="submit">Submit for Validation</button>
</form>
</div>
<div class="panel">
<h2>📚 Claims Library</h2>
<div class="submissions-list" id="submissionsList">
<p style="color: #666; text-align: center;">No claims yet. Be the first to submit information for validation!</p>
</div>
</div>
</div>
<div class="comparison-section">
<div class="panel">
<h2>🔍 Compare Multiple Claims</h2>
<div class="comparison-controls">
<select id="submission1" style="width: 100%; padding: 0.5rem; margin-bottom: 1rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
<option value="">Select first claim...</option>
</select>
<select id="submission2" style="width: 100%; padding: 0.5rem; margin-bottom: 1rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
<option value="">Select second claim...</option>
</select>
</div>
<div class="comparison-controls">
<button onclick="performComparison()" class="enhanced-btn">🔍 Basic Comparison</button>
<button onclick="performAdvancedComparison()" class="enhanced-btn">🤖 AI Analysis</button>
</div>
<div id="comparisonResults">
<div class="match-metrics">
<div class="metric-card">
<div class="metric-label">Character Match</div>
<div class="metric-value" id="charMatch">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Word Match</div>
<div class="metric-value" id="wordMatch">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Structure Match</div>
<div class="metric-value" id="structureMatch">-</div>
</div>
<div class="metric-card">
<div class="metric-label">Core Similarity</div>
<div class="metric-value" id="coreSimilarity">-</div>
</div>
</div>
<div class="consensus-viewer">
<h3>Consensus View (Common Elements)</h3>
<div class="consensus-text" id="consensusText"></div>
</div>
</div>
</div>
</div>
<div class="library-stats">
<div class="stat-card">
<div class="stat-number" id="uniqueInstances">0</div>
<div class="stat-label">Unique Claims</div>
</div>
<div class="stat-card">
<div class="stat-number" id="avgSimilarity">0%</div>
<div class="stat-label">Average Similarity</div>
</div>
<div class="stat-card">
<div class="stat-number" id="highConfidence">0</div>
<div class="stat-label">High Confidence Matches</div>
</div>
</div>
</div>
<div class="alert" id="alert"></div>
<!-- Leaderboard Overlay -->
<div class="leaderboard-overlay" id="leaderboardOverlay">
<div class="leaderboard-container">
<div class="close-button" onclick="toggleLeaderboard()"></div>
<div class="leaderboard-header">
<h1 class="leaderboard-title">🏆 InfoValidator Hall of Fame</h1>
<p class="subtitle">Recognizing the top information validators</p>
</div>
<div class="leaderboard-tabs">
<div class="leaderboard-tab active" onclick="switchLeaderboardTab('rankings')">📊 Rankings</div>
<div class="leaderboard-tab" onclick="switchLeaderboardTab('achievements')">🏅 Achievements</div>
<div class="leaderboard-tab" onclick="switchLeaderboardTab('timeline')">📅 Timeline</div>
</div>
<div id="rankings-content" class="leaderboard-content">
<div class="rankings">
<h2 style="color: #00ff88; margin-bottom: 1.5rem;">Top Validators</h2>
<div id="rankingsList"></div>
</div>
</div>
<div id="achievements-content" class="leaderboard-content" style="display: none;">
<h2 style="color: #ffd700; margin-bottom: 1.5rem; text-align: center;">Notable Achievements</h2>
<div class="achievements" id="achievementsList"></div>
</div>
<div id="timeline-content" class="leaderboard-content" style="display: none;">
<div class="timeline-section">
<h2 style="color: #00aaff; margin-bottom: 1.5rem;">Validation Timeline</h2>
<div id="timelineList"></div>
</div>
</div>
</div>
</div>
<!-- Requests & Challenges Overlay -->
<div class="requests-overlay" id="requestsOverlay">
<div class="requests-container">
<div class="close-button" onclick="toggleRequests()"></div>
<div class="requests-header">
<h1 class="requests-title">🎯 InfoValidator Bounty Board</h1>
<p class="subtitle">Request information validation and compete in daily challenges</p>
</div>
<!-- Daily Challenge -->
<div class="daily-challenge">
<h2 class="challenge-title">🎯 Today's Challenge</h2>
<p class="challenge-description" id="challengeDescription">Find and verify a system prompt from any AI model!</p>
<div class="challenge-reward">💰 Reward: 500 bonus points + Special Badge</div>
<div class="challenge-timer" id="challengeTimer">Time remaining: 23:45:30</div>
</div>
<div class="requests-grid">
<!-- Submit Request Form -->
<div class="request-form">
<h2 style="color: #ffd700; margin-bottom: 1.5rem;">📝 Request Information Validation</h2>
<form onsubmit="submitRequest(event)">
<select id="requestTargetType" required style="width: 100%; padding: 0.5rem; margin-bottom: 1rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
<option value="">Select claim category...</option>
<option value="ai-system">🤖 AI System Prompt</option>
<option value="code-snippet">💻 Code/Algorithm</option>
<option value="data-fact">📊 Data/Fact</option>
<option value="document">📄 Document/Text</option>
<option value="image">🖼️ Image/Visual</option>
<option value="audio">🎵 Audio/Video</option>
<option value="api">🔌 API/Endpoint</option>
<option value="custom">🛠️ Custom Claim</option>
</select>
<input type="text" id="requestModel" placeholder="Claim title (e.g., Gemini Pro Prompt, Bitcoin Algorithm)" required
style="width: 100%; margin-bottom: 1rem;">
<input type="url" id="requestUrl" placeholder="Source URL (optional)"
style="width: 100%; margin-bottom: 1rem;">
<textarea id="requestDescription" placeholder="Why is this important? Any tips on how to verify it?"
style="width: 100%; min-height: 100px; margin-bottom: 1rem;"></textarea>
<div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
<label style="display: flex; align-items: center; gap: 0.5rem; color: #888; font-size: 0.9rem;">
<input type="checkbox" id="requestRequiresLogin" style="width: auto;">
🔒 Login Required
</label>
<label style="display: flex; align-items: center; gap: 0.5rem; color: #888; font-size: 0.9rem;">
<input type="checkbox" id="requestRequiresPaid" style="width: auto;">
💰 Paid Access
</label>
</div>
<input type="number" id="requestBounty" placeholder="Bounty points (optional)" min="0"
style="width: 100%; margin-bottom: 1rem;">
<button type="submit" style="width: 100%;">Submit Request</button>
</form>
</div>
<!-- Active Requests -->
<div class="request-list">
<h2 style="color: #ffd700; margin-bottom: 1rem;">🔥 Hot Requests</h2>
<div class="filter-tabs">
<div class="filter-tab active" onclick="filterRequests('trending')">🔥 Trending</div>
<div class="filter-tab" onclick="filterRequests('bounty')">💰 Highest Bounty</div>
<div class="filter-tab" onclick="filterRequests('new')">🆕 Newest</div>
<div class="filter-tab" onclick="filterRequests('myvotes')">👍 My Votes</div>
</div>
<div id="requestsList">
<p style="color: #666; text-align: center;">No requests yet. Be the first to request information validation!</p>
</div>
</div>
</div>
</div>
</div>
<script src="api/database.js"></script>
<script src="script.js"></script>
<script src="demo-data.js"></script>
</body>
</html>