Files
Secure-Pastebin-Self-Hosted/index.html
T
2026-02-19 14:32:32 +03:30

234 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secure Pastebin - End-to-End Encrypted Message Sharing</title>
<meta name="description" content="Share sensitive messages securely with AES-256 encryption. Zero-knowledge architecture, password protection, self-destructing messages.">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Vazirmatn:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<header>
<div class="logo">🔐</div>
<h1>Secure Pastebin</h1>
<p class="subtitle">End-to-End Encrypted • Password Protected • Self-Destructing</p>
<div class="security-badges">
<span class="badge">🔒 AES-256-GCM</span>
<span class="badge">🔑 Password</span>
<span class="badge">🛡️ Zero-Knowledge</span>
<span class="badge">⚡ Web Crypto API</span>
</div>
</header>
<div id="errorDisplay" class="card alert alert-error" style="display: none;">
<span></span>
<div style="flex: 1;">
<strong>Error</strong>
<div id="errorMessage"></div>
</div>
</div>
<div id="createView" class="card">
<div class="alert alert-warning">
<span>⚠️</span>
<div>
<strong>Important:</strong> The encryption key is stored only in the URL fragment (after #).
If you lose the URL, the data is permanently lost. We cannot recover it.
</div>
</div>
<textarea id="content" placeholder="Enter your secret message here... (Supports English, Persian, Arabic, Hebrew, and all languages)" dir="auto"></textarea>
<div class="password-section">
<label class="password-toggle">
<input type="checkbox" id="enablePassword" onchange="togglePassword()">
<span>🔐 Protect with Password (Optional)</span>
</label>
<div id="passwordWrapper" class="password-input-wrapper">
<label>Enter Password:</label>
<input type="password" id="passwordInput" placeholder="Minimum 4 characters">
<small style="color: var(--text-muted); display: block; margin-top: 8px;">
This password will be required to decrypt the message. Share it separately.
</small>
</div>
</div>
<div class="options-grid">
<div class="form-group">
<label>⏱️ Expiration</label>
<select id="expiresIn">
<option value="3600">1 Hour</option>
<option value="86400" selected>1 Day</option>
<option value="604800">1 Week</option>
<option value="2592000">30 Days</option>
</select>
</div>
<div class="form-group">
<label>🔥 Security Mode</label>
<label class="checkbox-wrapper">
<input type="checkbox" id="burnAfterRead">
<span>Burn after reading</span>
</label>
</div>
</div>
<button id="createBtn" class="btn" onclick="createPaste()">
<span id="btnText">🔐 Encrypt & Save</span>
</button>
<div id="resultBox" class="result-box">
<div class="alert alert-success" style="margin-bottom: 12px;">
<span></span>
<strong>Successfully encrypted!</strong>
</div>
<div id="passwordNotice" class="alert alert-info" style="display: none; margin-bottom: 12px;">
<span>🔑</span>
<div>
<strong>Password Protected!</strong><br>
Remember to share the password separately. It is NOT in the URL.
</div>
</div>
<div class="url-container">
<input type="text" id="shareUrl" class="url-input" readonly>
<button class="btn btn-copy" onclick="copyUrl()">📋 Copy</button>
</div>
<div class="meta-info">
⏰ Expires: <span id="expiryTime"></span> • 🔑 Key never leaves your browser
</div>
</div>
</div>
<div id="passwordPrompt" class="card password-prompt">
<div class="alert alert-info" style="margin-bottom: 20px;">
<span>🔐</span>
<div>This message is password protected.</div>
</div>
<h3>Enter Password to Decrypt</h3>
<input type="password" id="decryptPassword" placeholder="Password">
<button class="btn" onclick="decryptWithPassword()">
<span id="decryptBtnText">🔓 Decrypt</span>
</button>
<p id="passwordError" style="color: var(--error); margin-top: 12px; display: none;">
❌ Wrong password!
</p>
</div>
<div id="decryptView" class="card decrypt-view">
<div id="burnNotice" class="burn-warning" style="display: none;">
<span>🔥</span>
<span>This message will be permanently deleted after you view it!</span>
</div>
<h3 style="margin-bottom: 12px;">🔓 Decrypted Content</h3>
<div id="decryptedContent" class="content-box" dir="auto"></div>
<button class="btn btn-secondary" onclick="window.location.href='/'" style="margin-top: 16px;">
📝 Create New Message
</button>
</div>
<div class="card how-it-works">
<h2>🔍 How It Works</h2>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h3>Client-Side Encryption</h3>
<p>Your message is encrypted in your browser using AES-256-GCM before being sent to the server. The encryption key is generated locally and never transmitted.</p>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h3>Zero-Knowledge Storage</h3>
<p>The server only stores the encrypted ciphertext. It cannot read, decrypt, or access your original message. We have zero knowledge of your content.</p>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h3>Key in URL Fragment</h3>
<p>The decryption key is embedded in the URL fragment (after #) which never reaches the server. Only the recipient with the full URL can decrypt.</p>
</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div class="step-content">
<h3>Password Protection (Optional)</h3>
<p>You can add an extra password layer. The password is used to derive the encryption key via PBKDF2 with 100,000 iterations. Share it separately.</p>
</div>
</div>
<div class="step">
<div class="step-number">5</div>
<div class="step-content">
<h3>Self-Destruction</h3>
<p>Choose "Burn after reading" to automatically delete the message after first view, or set an expiration time (1 hour to 30 days).</p>
</div>
</div>
</div>
<div class="tech-specs">
<h3>🛡️ Technical Specifications</h3>
<div class="specs-grid">
<div class="spec-item">AES-256-GCM Encryption</div>
<div class="spec-item">PBKDF2 Key Derivation (100k iterations)</div>
<div class="spec-item">Random 12-byte IV per message</div>
<div class="spec-item">256-bit Encryption Keys</div>
<div class="spec-item">No Server-Side Logs</div>
<div class="spec-item">MySQL Database Storage</div>
<div class="spec-item">Web Crypto API (Native)</div>
<div class="spec-item">No Registration Required</div>
</div>
</div>
</div>
<footer>
<p>🛡️ Zero-Knowledge Architecture • Server cannot read your data</p>
<p style="font-size: 0.8rem; margin-top: 8px; color: var(--text-muted);">
Built with privacy in mind. No tracking. No analytics. Open source.
</p>
<div class="footer-links">
<a href="https://github.com/TheGreatAzizi/Secure-Pastebin-Self-Hosted/" target="_blank" rel="noopener">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
GitHub
</a>
<a href="https://x.com/the_azzi" target="_blank" rel="noopener">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
@the_azzi
</a>
</div>
<div class="internet-for-all">
<div class="hashtag">#InternetForAll</div>
<div class="rights-text">
<strong>Internet access is a fundamental human right.</strong><br>
Restricting internet access violates human rights and limits freedom of expression,
access to information, and the ability to communicate securely.
We believe in <strong>free, open, and secure internet for everyone</strong>
regardless of borders, politics, or censorship.
</div>
</div>
<div class="tech-stack">
<span>PHP</span>
<span></span>
<span>MySQL</span>
<span></span>
<span>Web Crypto API</span>
<span></span>
<span>AES-256-GCM</span>
</div>
</footer>
</div>
<script src="/script.js"></script>
</body>
</html>