M.M.Azizi
88c8f766e2
This file contains the complete HTML structure for the Secure Pastebin application, including metadata, styles, and various user interface components for message encryption and sharing.
234 lines
12 KiB
HTML
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-Cloudflare-Worker/" 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>
|