mirror of
https://github.com/elder-plinius/LEAKHUB.git
synced 2026-02-12 16:52:53 +00:00
431 lines
23 KiB
HTML
431 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>LeakHub - AI System Prompt Discovery 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">LeakHub</h1>
|
||
<span class="version">v2.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>LeakHub</h1>
|
||
<p class="subtitle">The community hub for crowd-sourced system prompt leak verification. CL4R1T4S!</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 Targets</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 Prompts</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 Users</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>💬 LeakHub Live Chat</h3>
|
||
<button onclick="toggleChat()" class="close-btn">×</button>
|
||
</div>
|
||
<div class="chat-messages" id="chatMessages">
|
||
<div class="system-message">Welcome to LeakHub Live Chat! Share discoveries, ask questions, 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>👤 User Profile</h2>
|
||
<div class="profile-avatar" id="profileAvatar">👤</div>
|
||
<div class="profile-name" id="profileName">Guest User</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>User Preferences</h3>
|
||
<label>
|
||
<input type="text" id="userNameInput" placeholder="Enter your username">
|
||
Username
|
||
</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>📈 LeakHub 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>🎯 Target Distribution</h3>
|
||
<div class="analytics-chart" id="targetChart">
|
||
<!-- Target 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 Contributors</h3>
|
||
<div class="analytics-leaders" id="topContributors">
|
||
<!-- Top contributors -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main-section">
|
||
<div class="panel">
|
||
<h2>📤 Submit Leak</h2>
|
||
<form class="submission-form" onsubmit="submitLeak(event)">
|
||
<input type="text" id="sourceName" placeholder="Your identifier (e.g., User123, 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 target type...</option>
|
||
<option value="model">🤖 AI Model</option>
|
||
<option value="app">📱 App/Interface</option>
|
||
<option value="tool">🔧 Tool/Function</option>
|
||
<option value="agent">🤝 AI Agent</option>
|
||
<option value="plugin">🔌 Plugin/Extension</option>
|
||
<option value="custom">🛠️ Custom GPT/Bot</option>
|
||
</select>
|
||
|
||
<input type="text" id="instanceId" placeholder="Target name (e.g., ChatGPT-4, GitHub Copilot)" required>
|
||
|
||
<input type="url" id="targetUrl" placeholder="Target URL (e.g., https://chat.openai.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 suspected system prompt leak here..." required></textarea>
|
||
<input type="text" id="context" placeholder="Context: How was this obtained? (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 target has tools/functions with their own prompts</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 Tool Prompts (optional)</p>
|
||
<textarea id="toolPrompts" placeholder="If you found any tool-specific prompts, paste them here..." style="min-height: 100px;"></textarea>
|
||
</div>
|
||
|
||
<button type="submit">Submit to Library</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<h2>📚 Leak Library</h2>
|
||
<div class="submissions-list" id="submissionsList">
|
||
<p style="color: #666; text-align: center;">No submissions yet. Be the first to contribute!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comparison-section">
|
||
<div class="panel">
|
||
<h2>🔍 Compare Multiple Instances</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 submission...</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 submission...</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 Instances</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">🏆 LeakHub Hall of Fame</h1>
|
||
<p class="subtitle">Recognizing the top contributors to AI transparency</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 Contributors</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;">Discovery 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">🎯 LeakHub Bounty Board</h1>
|
||
<p class="subtitle">Request targets 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 GPT-4 Turbo!</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 a Leak Hunt</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 target type...</option>
|
||
<option value="model">🤖 AI Model</option>
|
||
<option value="app">📱 App/Interface</option>
|
||
<option value="tool">🔧 Tool/Function</option>
|
||
<option value="agent">🤝 AI Agent</option>
|
||
<option value="plugin">🔌 Plugin/Extension</option>
|
||
<option value="custom">🛠️ Custom GPT/Bot</option>
|
||
</select>
|
||
<input type="text" id="requestModel" placeholder="Target name (e.g., Gemini Pro, GitHub Copilot)" required
|
||
style="width: 100%; margin-bottom: 1rem;">
|
||
<input type="url" id="requestUrl" placeholder="Target URL (optional)"
|
||
style="width: 100%; margin-bottom: 1rem;">
|
||
<textarea id="requestDescription" placeholder="Why is this important? Any tips on how to get 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 a leak hunt!</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>
|