| | <!DOCTYPE html> |
| |
|
| | <html lang="en"> |
| |
|
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Paper</title> |
| | <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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" |
| | rel="stylesheet"> |
| | <style> |
| | :root { |
| | |
| | --bg-primary: #0f0f1a; |
| | --bg-secondary: #1a1a2e; |
| | --bg-tertiary: #252540; |
| | --bg-card: rgba(25, 25, 45, 0.95); |
| | --text-primary: #ffffff; |
| | --text-secondary: #b8b8d0; |
| | --text-muted: #7070a0; |
| | --accent-pink: #ff6b9d; |
| | --accent-purple: #a855f7; |
| | --accent-blue: #3b82f6; |
| | --accent-yellow: #fbbf24; |
| | --gradient-primary: linear-gradient(135deg, #ff6b9d 0%, #a855f7 50%, #3b82f6 100%); |
| | --gradient-hover: linear-gradient(135deg, #ff4d8a 0%, #9333ea 50%, #2563eb 100%); |
| | --success: #22c55e; |
| | --warning: #f59e0b; |
| | --error: #ef4444; |
| | --border: rgba(168, 85, 247, 0.25); |
| | --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3); |
| | --shadow-glow: 0 8px 40px rgba(168, 85, 247, 0.15); |
| | --radius: 24px; |
| | --radius-sm: 16px; |
| | --transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); |
| | } |
| | |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| | |
| | html, |
| | body { |
| | height: 100%; |
| | } |
| | |
| | body { |
| | font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; |
| | background: linear-gradient(135deg, #0f0f1a 0%, #1a1025 50%, #0f1520 100%); |
| | background-attachment: fixed; |
| | color: var(--text-primary); |
| | line-height: 1.6; |
| | position: relative; |
| | } |
| | |
| | body::before { |
| | content: ''; |
| | position: fixed; |
| | top: -50%; |
| | left: -50%; |
| | width: 200%; |
| | height: 200%; |
| | background: |
| | radial-gradient(circle at 20% 30%, rgba(255, 107, 157, 0.25) 0%, transparent 40%), |
| | radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.2) 0%, transparent 40%), |
| | radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.15) 0%, transparent 50%); |
| | animation: floatBg 20s ease-in-out infinite; |
| | pointer-events: none; |
| | z-index: 1; |
| | } |
| | |
| | @keyframes floatBg { |
| | |
| | 0%, |
| | 100% { |
| | transform: translate(0, 0) rotate(0deg); |
| | } |
| | |
| | 33% { |
| | transform: translate(2%, 2%) rotate(1deg); |
| | } |
| | |
| | 66% { |
| | transform: translate(-1%, 1%) rotate(-1deg); |
| | } |
| | } |
| | |
| | |
| | .login-screen { |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | height: 100%; |
| | padding: 20px; |
| | position: relative; |
| | z-index: 2; |
| | } |
| | |
| | |
| | .card-container { |
| | width: 100%; |
| | max-width: 420px; |
| | perspective: 1000px; |
| | } |
| | |
| | .card-inner { |
| | position: relative; |
| | width: 100%; |
| | transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); |
| | transform-style: preserve-3d; |
| | } |
| | |
| | .card-container.flipped .card-inner { |
| | transform: rotateY(180deg); |
| | } |
| | |
| | .card-front, |
| | .card-back { |
| | text-align: center; |
| | padding: 40px 36px; |
| | border-radius: var(--radius); |
| | background: var(--bg-card); |
| | border: 2px solid var(--border); |
| | box-shadow: var(--shadow-soft), var(--shadow-glow); |
| | backface-visibility: hidden; |
| | -webkit-backface-visibility: hidden; |
| | } |
| | |
| | .card-front { |
| | position: relative; |
| | z-index: 2; |
| | animation: bounceIn 0.6s var(--transition); |
| | } |
| | |
| | .card-back { |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | bottom: 0; |
| | transform: rotateY(180deg); |
| | z-index: 1; |
| | } |
| | |
| | @keyframes bounceIn { |
| | 0% { |
| | opacity: 0; |
| | transform: scale(0.9) translateY(20px); |
| | } |
| | |
| | 50% { |
| | transform: scale(1.02) translateY(-5px); |
| | } |
| | |
| | 100% { |
| | opacity: 1; |
| | transform: scale(1) translateY(0); |
| | } |
| | } |
| | |
| | .login-box h1 { |
| | margin-bottom: 12px; |
| | font-weight: 800; |
| | font-size: 42px; |
| | letter-spacing: -1px; |
| | font-family: 'Plus Jakarta Sans', sans-serif; |
| | background: var(--gradient-primary); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | background-clip: text; |
| | } |
| | |
| | .login-box h1::after { |
| | content: ' ✨'; |
| | -webkit-text-fill-color: initial; |
| | } |
| | |
| | .login-subtitle { |
| | color: var(--text-secondary); |
| | font-size: 16px; |
| | margin-bottom: 32px; |
| | font-weight: 500; |
| | line-height: 1.6; |
| | } |
| | |
| | |
| | .info-icon { |
| | position: absolute; |
| | top: 16px; |
| | right: 16px; |
| | width: 28px; |
| | height: 28px; |
| | border-radius: 50%; |
| | background: var(--bg-tertiary); |
| | border: 1px solid var(--border); |
| | color: var(--text-muted); |
| | font-size: 14px; |
| | font-weight: 600; |
| | cursor: pointer; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | transition: var(--transition); |
| | font-family: serif; |
| | z-index: 5; |
| | } |
| | |
| | .info-icon:hover { |
| | background: var(--accent-purple); |
| | color: white; |
| | border-color: var(--accent-purple); |
| | transform: scale(1.1); |
| | } |
| | |
| | .back-icon { |
| | position: absolute; |
| | top: 16px; |
| | right: 16px; |
| | width: 28px; |
| | height: 28px; |
| | border-radius: 50%; |
| | background: var(--bg-tertiary); |
| | border: 1px solid var(--border); |
| | color: var(--text-muted); |
| | font-size: 18px; |
| | font-weight: 300; |
| | cursor: pointer; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | transition: var(--transition); |
| | line-height: 1; |
| | } |
| | |
| | .back-icon:hover { |
| | background: var(--accent-pink); |
| | color: white; |
| | border-color: var(--accent-pink); |
| | transform: scale(1.1); |
| | } |
| | |
| | .info-title { |
| | font-size: 22px; |
| | font-weight: 700; |
| | color: var(--text-primary); |
| | margin-bottom: 20px; |
| | background: var(--gradient-primary); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | background-clip: text; |
| | } |
| | |
| | .info-list { |
| | list-style: none; |
| | padding: 0; |
| | margin: 0 0 24px 0; |
| | text-align: left; |
| | max-height: 200px; |
| | overflow-y: auto; |
| | padding-right: 8px; |
| | } |
| | |
| | |
| | .info-list::-webkit-scrollbar { |
| | width: 6px; |
| | } |
| | |
| | .info-list::-webkit-scrollbar-track { |
| | background: var(--bg-tertiary); |
| | border-radius: 6px; |
| | } |
| | |
| | .info-list::-webkit-scrollbar-thumb { |
| | background: var(--gradient-primary); |
| | border-radius: 6px; |
| | } |
| | |
| | .info-list::-webkit-scrollbar-thumb:hover { |
| | background: var(--gradient-hover); |
| | } |
| | |
| | .info-list li { |
| | color: var(--text-secondary); |
| | font-size: 13px; |
| | line-height: 1.7; |
| | padding: 10px 0; |
| | padding-left: 24px; |
| | position: relative; |
| | border-bottom: 1px solid var(--border); |
| | } |
| | |
| | .info-list li:last-child { |
| | border-bottom: none; |
| | } |
| | |
| | .info-list li::before { |
| | content: '✦'; |
| | position: absolute; |
| | left: 0; |
| | color: var(--accent-purple); |
| | } |
| | |
| | .info-list li strong { |
| | color: var(--text-primary); |
| | } |
| | |
| | .info-link { |
| | display: inline-flex; |
| | align-items: center; |
| | gap: 6px; |
| | color: var(--accent-blue); |
| | text-decoration: none; |
| | font-weight: 600; |
| | font-size: 13px; |
| | transition: var(--transition); |
| | padding: 10px 16px; |
| | background: var(--bg-tertiary); |
| | border-radius: 50px; |
| | border: 1px solid var(--border); |
| | } |
| | |
| | .info-link:hover { |
| | color: white; |
| | background: var(--accent-blue); |
| | border-color: var(--accent-blue); |
| | } |
| | |
| | .input-group { |
| | position: relative; |
| | margin-bottom: 24px; |
| | } |
| | |
| | .password-input { |
| | width: 100%; |
| | padding: 18px 24px; |
| | font-size: 17px; |
| | border: 2px solid var(--border); |
| | border-radius: var(--radius-sm); |
| | background: var(--bg-secondary); |
| | color: var(--text-primary); |
| | text-align: center; |
| | letter-spacing: 3px; |
| | outline: none; |
| | transition: var(--transition); |
| | font-family: 'Plus Jakarta Sans', monospace; |
| | font-weight: 600; |
| | } |
| | |
| | .password-input:focus { |
| | border-color: var(--accent-purple); |
| | box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.25), 0 0 30px rgba(168, 85, 247, 0.15); |
| | background: var(--bg-tertiary); |
| | transform: scale(1.02); |
| | } |
| | |
| | .password-input::placeholder { |
| | color: var(--text-muted); |
| | letter-spacing: normal; |
| | font-family: 'Plus Jakarta Sans', sans-serif; |
| | font-weight: 500; |
| | } |
| | |
| | .enter-btn { |
| | width: 100%; |
| | padding: 18px 32px; |
| | background: var(--gradient-primary); |
| | color: #ffffff; |
| | border: none; |
| | border-radius: var(--radius-sm); |
| | font-size: 16px; |
| | font-weight: 700; |
| | cursor: pointer; |
| | transition: var(--transition); |
| | position: relative; |
| | overflow: hidden; |
| | text-transform: uppercase; |
| | letter-spacing: 1.5px; |
| | font-family: 'Plus Jakarta Sans', sans-serif; |
| | box-shadow: 0 6px 25px rgba(255, 107, 157, 0.35); |
| | } |
| | |
| | .enter-btn:hover:not(:disabled) { |
| | transform: translateY(-3px) scale(1.02); |
| | box-shadow: 0 10px 35px rgba(255, 107, 157, 0.45); |
| | background: var(--gradient-hover); |
| | } |
| | |
| | .enter-btn:active { |
| | transform: translateY(0) scale(0.98); |
| | } |
| | |
| | .enter-btn:disabled { |
| | opacity: 0.6; |
| | cursor: not-allowed; |
| | transform: none; |
| | } |
| | |
| | .error { |
| | color: var(--error); |
| | margin-top: 16px; |
| | font-size: 14px; |
| | min-height: 20px; |
| | font-weight: 500; |
| | } |
| | |
| | |
| | .editor-screen { |
| | display: none; |
| | height: 100%; |
| | background: transparent; |
| | flex-direction: column; |
| | position: relative; |
| | z-index: 2; |
| | } |
| | |
| | .header { |
| | padding: 16px 24px; |
| | background: var(--bg-card); |
| | border-bottom: 2px solid var(--border); |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | backdrop-filter: blur(10px); |
| | position: relative; |
| | flex-shrink: 0; |
| | } |
| | |
| | .header-left { |
| | display: flex; |
| | align-items: center; |
| | gap: 16px; |
| | } |
| | |
| | .app-title { |
| | font-size: 26px; |
| | font-weight: 800; |
| | font-family: 'Plus Jakarta Sans', sans-serif; |
| | letter-spacing: -0.5px; |
| | background: var(--gradient-primary); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | background-clip: text; |
| | cursor: pointer; |
| | transition: var(--transition); |
| | } |
| | |
| | .app-title:hover { |
| | transform: scale(1.05); |
| | } |
| | |
| | .header-right { |
| | display: flex; |
| | align-items: center; |
| | gap: 12px; |
| | flex-wrap: wrap; |
| | } |
| | |
| | .save-status { |
| | font-size: 12px; |
| | font-weight: 700; |
| | padding: 10px 18px; |
| | border-radius: 50px; |
| | background: var(--bg-tertiary); |
| | color: var(--text-secondary); |
| | border: 2px solid var(--border); |
| | min-width: 90px; |
| | text-align: center; |
| | font-family: 'Plus Jakarta Sans', sans-serif; |
| | text-transform: uppercase; |
| | letter-spacing: 0.5px; |
| | transition: var(--transition); |
| | } |
| | |
| | .save-status.saving { |
| | background: var(--gradient-primary); |
| | color: white; |
| | border-color: transparent; |
| | box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3); |
| | animation: wiggle 0.5s ease-in-out infinite; |
| | } |
| | |
| | @keyframes wiggle { |
| | |
| | 0%, |
| | 100% { |
| | transform: rotate(-2deg); |
| | } |
| | |
| | 50% { |
| | transform: rotate(2deg); |
| | } |
| | } |
| | |
| | .save-status.saved { |
| | background: linear-gradient(135deg, var(--success) 0%, #10b981 100%); |
| | color: white; |
| | border-color: transparent; |
| | box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3); |
| | } |
| | |
| | .word-count { |
| | font-size: 14px; |
| | color: var(--text-secondary); |
| | font-weight: 600; |
| | font-family: 'Plus Jakarta Sans', sans-serif; |
| | background: var(--bg-tertiary); |
| | padding: 6px 14px; |
| | border-radius: 20px; |
| | } |
| | |
| | .editor-container { |
| | flex: 1; |
| | position: relative; |
| | margin: 20px; |
| | border-radius: var(--radius); |
| | background: var(--bg-card); |
| | border: 2px solid var(--border); |
| | box-shadow: var(--shadow-soft); |
| | animation: paperUnfold 0.5s ease-out; |
| | } |
| | |
| | .editor { |
| | width: 100%; |
| | height: 100%; |
| | padding: 28px 32px; |
| | border: none; |
| | outline: none; |
| | font-family: 'Plus Jakarta Sans', sans-serif; |
| | font-size: 17px; |
| | font-weight: 500; |
| | line-height: 1.9; |
| | resize: none; |
| | background: transparent; |
| | color: var(--text-primary); |
| | position: relative; |
| | z-index: 2; |
| | border-radius: var(--radius); |
| | caret-color: var(--accent-purple); |
| | } |
| | |
| | .editor::placeholder { |
| | color: var(--text-muted); |
| | font-weight: 500; |
| | } |
| | |
| | |
| | .editor::-webkit-scrollbar { |
| | width: 10px; |
| | } |
| | |
| | .editor::-webkit-scrollbar-track { |
| | background: var(--bg-tertiary); |
| | border-radius: 10px; |
| | } |
| | |
| | .editor::-webkit-scrollbar-thumb { |
| | background: var(--gradient-primary); |
| | border-radius: 10px; |
| | } |
| | |
| | .editor::-webkit-scrollbar-thumb:hover { |
| | background: var(--gradient-hover); |
| | } |
| | |
| | |
| | .fade-in { |
| | animation: fadeIn 0.4s ease-out; |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { |
| | opacity: 0; |
| | transform: translateY(20px) scale(0.98); |
| | } |
| | |
| | to { |
| | opacity: 1; |
| | transform: translateY(0) scale(1); |
| | } |
| | } |
| | |
| | |
| | .password-input:focus, |
| | .editor:focus { |
| | outline: none; |
| | } |
| | |
| | @keyframes slideUp { |
| | from { |
| | opacity: 0; |
| | transform: translateY(30px); |
| | } |
| | |
| | to { |
| | opacity: 1; |
| | transform: translateY(0); |
| | } |
| | } |
| | |
| | @keyframes paperUnfold { |
| | from { |
| | opacity: 0; |
| | transform: scale(0.95) rotateX(5deg); |
| | } |
| | |
| | to { |
| | opacity: 1; |
| | transform: scale(1) rotateX(0deg); |
| | } |
| | } |
| | |
| | |
| | .editor-container::after { |
| | content: ''; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | bottom: 0; |
| | background: var(--paper-texture); |
| | opacity: 0.1; |
| | pointer-events: none; |
| | z-index: 1; |
| | border-radius: var(--radius); |
| | } |
| | |
| | |
| | @media (max-width: 600px) { |
| | .header { |
| | padding: 12px 16px; |
| | gap: 8px; |
| | } |
| | |
| | .app-title { |
| | font-size: 20px; |
| | } |
| | |
| | .header-right { |
| | flex-wrap: nowrap; |
| | gap: 8px; |
| | } |
| | |
| | .save-status { |
| | font-size: 10px; |
| | padding: 6px 12px; |
| | min-width: 70px; |
| | letter-spacing: 0; |
| | } |
| | |
| | .word-count { |
| | font-size: 11px; |
| | padding: 4px 10px; |
| | } |
| | |
| | .editor-container { |
| | margin: 12px; |
| | } |
| | |
| | .editor { |
| | padding: 20px; |
| | font-size: 16px; |
| | } |
| | |
| | .card-front, |
| | .card-back { |
| | padding: 28px 20px; |
| | } |
| | |
| | .card-front h1 { |
| | font-size: 32px; |
| | } |
| | |
| | .login-subtitle { |
| | font-size: 14px; |
| | margin-bottom: 24px; |
| | } |
| | |
| | .info-list { |
| | margin-bottom: 16px; |
| | } |
| | |
| | .info-list li { |
| | font-size: 13px; |
| | padding: 6px 0; |
| | padding-left: 20px; |
| | } |
| | |
| | .info-title { |
| | font-size: 16px; |
| | margin-bottom: 12px; |
| | } |
| | |
| | .info-link { |
| | font-size: 11px; |
| | padding: 8px 12px; |
| | } |
| | } |
| | </style> |
| | </head> |
| |
|
| | <body> |
| | <div id="loginScreen" class="login-screen"> |
| | <div id="cardContainer" class="card-container"> |
| | <div class="card-inner"> |
| | |
| | <div class="card-front"> |
| | <div class="info-icon" onclick="flipCard()" title="Learn more">i</div> |
| | <h1>Paper</h1> |
| | <p class="login-subtitle">Perfect for temporary notes and secure sharing. Deleted after two days. |
| | </p> |
| |
|
| | <div class="input-group"> |
| | <input type="password" id="passwordInput" class="password-input" |
| | placeholder="min-8-char password" minlength="8" maxlength="100"> |
| | </div> |
| |
|
| | <button onclick="login()" class="enter-btn">Enter</button> |
| | <div id="loginError" class="error"></div> |
| | </div> |
| |
|
| | |
| | <div class="card-back"> |
| | <div class="back-icon" onclick="flipCard()" title="Back to login">X</div> |
| | <h3 class="info-title">About Paper ✨</h3> |
| | <ul class="info-list"> |
| | <li><strong>What is it?</strong> A secure notepad for temporary notes you can access from |
| | anywhere.</li> |
| | <li><strong>Encryption:</strong> Notes encrypted client-side with your password. Never sent to |
| | server.</li> |
| | <li><strong>Open Source:</strong> 100% open. Deployed on Hugging Face, Open for everyone to see. |
| | </li> |
| | <li><strong>Zero Access:</strong> Even the developer cannot read your notes. Only encrypted |
| | blobs stored.</li> |
| | <li><strong>Auto-Delete:</strong> Notes automatically deleted after 2 days of inactivity.</li> |
| | <li><strong>Pro tip:</strong> Use a strong password! If someone guesses it... well, that's on |
| | you 😅</li> |
| | </ul> |
| | <a href="https://github.com/jebin2/Paper" target="_blank" class="info-link"> |
| | 🔗 View source on GitHub |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div id="editorScreen" class="editor-screen"> |
| | <div class="header"> |
| | <div class="header-left"> |
| | <div class="app-title" onclick="goToLogin()" style="cursor: pointer;" title="Go to login">Paper</div> |
| | </div> |
| | <div class="header-right"> |
| | <div id="wordCount" class="word-count">0 words</div> |
| | <div id="saveStatus" class="save-status">Ready</div> |
| | </div> |
| | </div> |
| | <div class="editor-container"> |
| | <textarea id="editor" class="editor" placeholder="Start typing..."></textarea> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | let currentPassword = ''; |
| | let currentSalt = null; |
| | let fileHash = ''; |
| | let saveTimeout = null; |
| | let isWorking = false; |
| | |
| | const PBKDF2_ITERATIONS = 250000; |
| | |
| | |
| | function flipCard() { |
| | const container = document.getElementById('cardContainer'); |
| | container.classList.toggle('flipped'); |
| | } |
| | |
| | |
| | function updateWordCount() { |
| | const text = document.getElementById('editor').value; |
| | const words = text.trim() ? text.trim().split(/\s+/).length : 0; |
| | const chars = text.length; |
| | document.getElementById('wordCount').textContent = `${words} words, ${chars} chars`; |
| | } |
| | |
| | |
| | async function generateFilenameHash(password) { |
| | const encoder = new TextEncoder(); |
| | const data = encoder.encode(password); |
| | const hashBuffer = await crypto.subtle.digest('SHA-256', data); |
| | const hashArray = Array.from(new Uint8Array(hashBuffer)); |
| | return hashArray.map(b => b.toString(16).padStart(2, '0')).join('').slice(0, 16); |
| | } |
| | |
| | async function deriveKey(password, salt) { |
| | const encoder = new TextEncoder(); |
| | const keyMaterial = await crypto.subtle.importKey( |
| | 'raw', |
| | encoder.encode(password), |
| | { name: 'PBKDF2' }, |
| | false, |
| | ['deriveKey'] |
| | ); |
| | return crypto.subtle.deriveKey( |
| | { |
| | name: 'PBKDF2', |
| | salt: salt, |
| | iterations: PBKDF2_ITERATIONS, |
| | hash: 'SHA-256' |
| | }, |
| | keyMaterial, |
| | { name: 'AES-GCM', length: 256 }, |
| | true, |
| | ['encrypt', 'decrypt'] |
| | ); |
| | } |
| | |
| | async function encrypt(text, key) { |
| | const encoder = new TextEncoder(); |
| | const data = encoder.encode(text); |
| | const iv = crypto.getRandomValues(new Uint8Array(12)); |
| | |
| | const encryptedContent = await crypto.subtle.encrypt( |
| | { name: 'AES-GCM', iv: iv }, |
| | key, |
| | data |
| | ); |
| | |
| | const combined = new Uint8Array(iv.length + encryptedContent.byteLength); |
| | combined.set(iv); |
| | combined.set(new Uint8Array(encryptedContent), iv.length); |
| | |
| | return btoa(String.fromCharCode.apply(null, combined)); |
| | } |
| | |
| | async function decrypt(encryptedBase64, key) { |
| | try { |
| | const combined = Uint8Array.from(atob(encryptedBase64), c => c.charCodeAt(0)); |
| | const iv = combined.slice(0, 12); |
| | const encryptedContent = combined.slice(12); |
| | |
| | const decrypted = await crypto.subtle.decrypt( |
| | { name: 'AES-GCM', iv: iv }, |
| | key, |
| | encryptedContent |
| | ); |
| | |
| | return new TextDecoder().decode(decrypted); |
| | } catch (error) { |
| | console.error('Decryption failed:', error); |
| | throw new Error('Decryption failed. Check password.'); |
| | } |
| | } |
| | |
| | function base64ToUint8Array(base64) { |
| | const binaryString = atob(base64); |
| | const len = binaryString.length; |
| | const bytes = new Uint8Array(len); |
| | for (let i = 0; i < len; i++) { |
| | bytes[i] = binaryString.charCodeAt(i); |
| | } |
| | return bytes; |
| | } |
| | |
| | |
| | document.getElementById('passwordInput').focus(); |
| | document.getElementById('passwordInput').addEventListener('keypress', e => { |
| | if (e.key === 'Enter') login(); |
| | }); |
| | |
| | |
| | function fixIOSViewport() { |
| | const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; |
| | if (isIOS) { |
| | const vh = window.innerHeight * 0.01; |
| | document.documentElement.style.setProperty('--vh', `${vh}px`); |
| | |
| | window.addEventListener('resize', () => { |
| | const vh = window.innerHeight * 0.01; |
| | document.documentElement.style.setProperty('--vh', `${vh}px`); |
| | }); |
| | } |
| | } |
| | |
| | |
| | fixIOSViewport(); |
| | |
| | async function login() { |
| | if (isWorking) return; |
| | isWorking = true; |
| | |
| | const password = document.getElementById('passwordInput').value; |
| | const errorDiv = document.getElementById('loginError'); |
| | const enterBtn = document.querySelector('.enter-btn'); |
| | |
| | errorDiv.textContent = ''; |
| | if (password.length < 8) { |
| | errorDiv.textContent = 'Password must be at least 8 characters'; |
| | isWorking = false; |
| | return; |
| | } |
| | |
| | enterBtn.textContent = 'Loading...'; |
| | enterBtn.disabled = true; |
| | |
| | currentPassword = password; |
| | fileHash = await generateFilenameHash(password); |
| | |
| | try { |
| | const response = await fetch('/api/load', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ hash: fileHash }) |
| | }); |
| | |
| | const data = await response.json(); |
| | |
| | if (!response.ok) { |
| | throw new Error(data.error || 'Login failed'); |
| | } |
| | |
| | currentSalt = base64ToUint8Array(data.salt); |
| | |
| | let content = ''; |
| | if (data.content) { |
| | const key = await deriveKey(currentPassword, currentSalt); |
| | content = await decrypt(data.content, key); |
| | } |
| | |
| | document.getElementById('editor').value = content; |
| | document.getElementById('loginScreen').style.display = 'none'; |
| | document.getElementById('editorScreen').style.display = 'flex'; |
| | setupAutoSave(); |
| | updateSaveStatus('Ready'); |
| | updateWordCount(); |
| | |
| | } catch (error) { |
| | errorDiv.textContent = error.message.includes('Decryption') ? 'Invalid password' : 'Connection error'; |
| | } finally { |
| | isWorking = false; |
| | enterBtn.textContent = 'Enter'; |
| | enterBtn.disabled = false; |
| | } |
| | } |
| | |
| | function setupAutoSave() { |
| | const editor = document.getElementById('editor'); |
| | |
| | editor.addEventListener('input', () => { |
| | clearTimeout(saveTimeout); |
| | updateSaveStatus('Typing...'); |
| | updateWordCount(); |
| | |
| | saveTimeout = setTimeout(saveContent, 1500); |
| | }); |
| | } |
| | |
| | async function saveContent() { |
| | if (isWorking) return; |
| | isWorking = true; |
| | |
| | updateSaveStatus('Saving...'); |
| | |
| | const content = document.getElementById('editor').value; |
| | |
| | try { |
| | const key = await deriveKey(currentPassword, currentSalt); |
| | const encryptedContent = await encrypt(content, key); |
| | |
| | const response = await fetch('/api/save', { |
| | method: 'POST', |
| | headers: { 'Content-Type': 'application/json' }, |
| | body: JSON.stringify({ |
| | hash: fileHash, |
| | content: encryptedContent |
| | }) |
| | }); |
| | |
| | if (response.ok) { |
| | updateSaveStatus('Saved'); |
| | } else { |
| | const data = await response.json(); |
| | updateSaveStatus(`Error: ${data.error || 'Save failed'}`); |
| | } |
| | } catch (error) { |
| | console.error('Save failed:', error); |
| | updateSaveStatus('Save failed'); |
| | } finally { |
| | isWorking = false; |
| | } |
| | } |
| | |
| | function goToLogin() { |
| | const statusDiv = document.getElementById('saveStatus'); |
| | |
| | if (!statusDiv.className.includes('saved')) { |
| | if (!confirm('You have unsaved changes. Are you sure you want to leave?')) { |
| | return; |
| | } |
| | } |
| | |
| | |
| | currentPassword = ''; |
| | currentSalt = null; |
| | fileHash = ''; |
| | clearTimeout(saveTimeout); |
| | |
| | |
| | document.getElementById('editor').value = ''; |
| | document.getElementById('passwordInput').value = ''; |
| | document.getElementById('loginError').textContent = ''; |
| | document.getElementById('editorScreen').style.display = 'none'; |
| | document.getElementById('loginScreen').style.display = 'flex'; |
| | document.getElementById('passwordInput').focus(); |
| | } |
| | |
| | function updateSaveStatus(status) { |
| | const statusDiv = document.getElementById('saveStatus'); |
| | statusDiv.textContent = status; |
| | |
| | statusDiv.className = 'save-status'; |
| | if (status.includes('Saving') || status.includes('Typing')) { |
| | statusDiv.className += ' saving'; |
| | } else if (status === 'Saved') { |
| | statusDiv.className += ' saved'; |
| | } |
| | } |
| | |
| | |
| | window.addEventListener('beforeunload', function (e) { |
| | const statusDiv = document.getElementById('saveStatus'); |
| | |
| | if (!statusDiv.className.includes('saved')) { |
| | e.preventDefault(); |
| | e.returnValue = ''; |
| | } |
| | }); |
| | </script> |
| | </body> |
| |
|
| | </html> |
