CalvinBackup/LEAKHUB
1
0
Fork 0
mirror of https://github.com/elder-plinius/LEAKHUB.git synced 2026-02-12 16:52:53 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
60bf06caa75127d2562d99e16fd817e002869c8c
LEAKHUB/index.html

297 lines
17 KiB
HTML
Raw Blame History

<!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>
<div class="container">
<header>
<h1>LeakHub</h1>
<p class="subtitle">The community hub for crowd-sourced system prompt leak verification. CL4R1T4S!</p>
<div class="status-bar">
<div class="status-item">
<span>Active Targets:</span>
<span class="status-value" id="activeLeaks">0</span>
</div>
<div class="status-item">
<span>Total Submissions:</span>
<span class="status-value" id="totalSubmissions">0</span>
</div>
<div class="status-item">
<span>Verified Prompts:</span>
<span class="status-value" id="verifiedPrompts">0</span>
</div>
</div>
<div style="text-align: center; margin-top: 1rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<button onclick="toggleLeaderboard()" style="background: linear-gradient(135deg, #ff00ff, #00ff88); padding: 0.6rem 2rem;">
🏆 View Leaderboard
</button>
<button onclick="toggleRequests()" style="background: linear-gradient(135deg, #ff6b6b, #ffd700); padding: 0.6rem 2rem;">
🎯 Requests & Challenges
</button>
</div>
</header>
<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">
<h2 style="color: #00ff88; margin-bottom: 1.5rem;">🔍 Compare Multiple Instances</h2>
<div class="comparison-controls">
<div class="instance-selector">
<label style="color: #888; font-size: 0.9rem;">Instance A:</label>
<select id="instanceA" class="form-control" style="width: 100%; padding: 0.5rem; margin-top: 0.5rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
<option value="">Select submission...</option>
</select>
</div>
<div class="instance-selector">
<label style="color: #888; font-size: 0.9rem;">Instance B:</label>
<select id="instanceB" class="form-control" style="width: 100%; padding: 0.5rem; margin-top: 0.5rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
<option value="">Select submission...</option>
</select>
</div>
<button onclick="compareInstances()" style="align-self: flex-end;">Compare</button>
</div>
<div id="comparisonResults" style="display: none;">
<div class="comparison-grid">
<div class="instance-viewer">
<h3>Instance A</h3>
<div class="instance-content" id="instanceAContent"></div>
</div>
<div class="instance-viewer">
<h3>Instance B</h3>
<div class="instance-content" id="instanceBContent"></div>
</div>
</div>
<div class="results-panel">
<h3 style="color: #00ff88; margin-bottom: 1.5rem;">Analysis Results</h3>
<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 type="module" src="api/database.js"></script>
<script type="module" src="script.js"></script>
<script type="module" src="demo-data.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink