|
|
<!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> |
