aheh/Secure-Pastebin-Self-Hosted
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
M.M.Azizi
2026-04-23 19:37:37 +03:30
committed by GitHub
parent 61e84dd062
commit 988136a592
2 changed files with 110 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
script.js
+11 -2
View File
@@ -7,6 +7,15 @@ const FONT_STACK_MONO = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
const MAX_CUSTOM_EXPIRY_SECONDS = 31536000;
const MIN_CUSTOM_EXPIRY_SECONDS = 300;
function prefersInstantScroll() {
return window.matchMedia('(max-width: 640px)').matches;
}
function smartScrollIntoView(element) {
if (!element) return;
element.scrollIntoView({ behavior: prefersInstantScroll() ? 'auto' : 'smooth', block: 'start' });
}
function showError(msg) {
document.getElementById('errorDisplay').style.display = 'flex';
document.getElementById('errorMessage').textContent = msg;
@@ -616,7 +625,7 @@ async function createPaste() {
document.getElementById('expiryTime').textContent = expiry.displayDate.toLocaleString();
document.getElementById('passwordNotice').style.display = hasPassword ? 'flex' : 'none';
document.getElementById('resultBox').classList.add('show');
document.getElementById('resultBox').scrollIntoView({ behavior: 'smooth', block: 'start' });
smartScrollIntoView(document.getElementById('resultBox'));
resetCreateForm();
} catch (err) {
@@ -669,7 +678,7 @@ async function decryptPaste() {
pendingData = data;
document.getElementById('createView').style.display = 'none';
document.getElementById('passwordPrompt').classList.add('show');
document.getElementById('passwordPrompt').scrollIntoView({ behavior: 'smooth', block: 'start' });
smartScrollIntoView(document.getElementById('passwordPrompt'));
return;
}
style.css
+99 -34
View File
@@ -23,11 +23,11 @@
--radius-lg: 24px;
--radius-md: 18px;
--radius-sm: 12px;
--shadow-lg: 0 24px 60px rgba(2, 8, 23, 0.42);
--shadow-md: 0 14px 32px rgba(2, 8, 23, 0.28);
--shadow-lg: 0 12px 28px rgba(2, 8, 23, 0.22);
--shadow-md: 0 8px 18px rgba(2, 8, 23, 0.16);
--content-max: 960px;
--toolbar-size: 2rem;
--transition: 180ms ease;
--transition: none;
--font-sans: 'Vazirmatn Local', 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
@@ -40,7 +40,7 @@
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-behavior: auto;
}
body {
@@ -49,8 +49,7 @@ body {
line-height: 1.65;
color: var(--text);
background:
radial-gradient(circle at top, rgba(99, 102, 241, 0.2), transparent 36%),
radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.14), transparent 28%),
radial-gradient(circle at top, rgba(99, 102, 241, 0.12), transparent 34%),
linear-gradient(180deg, #08101d 0%, #0b1324 42%, #09111f 100%);
}
@@ -146,8 +145,7 @@ h1 {
padding: clamp(18px, 3vw, 28px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.75));
backdrop-filter: blur(16px);
background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.8));
box-shadow: var(--shadow-lg);
}
@@ -247,7 +245,7 @@ select,
border: 1px solid var(--border);
background: rgba(8, 15, 28, 0.78);
color: var(--text);
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
transition: none;
}
textarea,
@@ -308,7 +306,7 @@ select {
border: 1px solid rgba(129, 140, 248, 0.18);
border-radius: 22px;
background: linear-gradient(180deg, rgba(10, 18, 34, 0.94), rgba(8, 14, 27, 0.88));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 26px rgba(2, 8, 23, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 8px 18px rgba(2, 8, 23, 0.12);
}
.editor-shell-head {
@@ -351,19 +349,18 @@ select {
user-select: none;
font-size: 0.85rem;
user-select: none;
transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
transition: none;
}
.toolbar-btn:hover {
background: rgba(99, 102, 241, 0.14);
border-color: rgba(129, 140, 248, 0.24);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.15);
box-shadow: none;
}
.toolbar-btn:active {
transform: translateY(0);
transform: none;
}
.toolbar-btn strong,
@@ -470,7 +467,7 @@ select {
border-radius: 999px;
background: rgba(30, 41, 59, 0.95);
border: 1px solid rgba(148, 163, 184, 0.16);
transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
transition: none;
}
.switch-ui::after {
@@ -483,7 +480,7 @@ select {
border-radius: 999px;
background: #f8fafc;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
transition: transform var(--transition);
transition: none;
}
.feature-toggle:hover .switch-ui {
@@ -502,22 +499,15 @@ select {
.password-input-wrapper,
.custom-expiry-wrapper {
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: max-height 220ms ease, opacity 180ms ease, margin-top 180ms ease;
display: none;
}
.password-input-wrapper.show,
.custom-expiry-wrapper.show {
max-height: 260px;
display: grid;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed rgba(129, 140, 248, 0.18);
opacity: 1;
pointer-events: auto;
}
.password-strength-bar {
@@ -531,7 +521,7 @@ select {
height: 100%;
width: 0;
border-radius: inherit;
transition: width 180ms ease;
transition: none;
background: linear-gradient(90deg, #ef4444, #f59e0b);
}
@@ -574,13 +564,13 @@ select {
color: #fff;
font-weight: 700;
cursor: pointer;
box-shadow: 0 18px 36px rgba(79, 70, 229, 0.24);
transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
box-shadow: 0 10px 20px rgba(79, 70, 229, 0.18);
transition: none;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 20px 40px rgba(79, 70, 229, 0.32);
transform: none;
box-shadow: 0 10px 20px rgba(79, 70, 229, 0.18);
}
.btn:disabled {
@@ -653,11 +643,46 @@ select {
display: grid;
}
.password-prompt,
.decrypt-view,
.result-box {
gap: 20px;
}
.password-prompt .alert,
.result-box .alert {
margin-bottom: 0;
}
.password-prompt .btn {
width: 100%;
margin-top: 8px;
}
.password-prompt input[type="password"] {
margin-top: 8px;
}
#passwordError {
margin-top: 10px !important;
}
.decrypt-header > div {
min-width: 0;
flex: 1;
}
#copyDecryptedBtn {
align-self: flex-start;
margin-top: 4px;
}
.decrypt-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
gap: 18px;
flex-wrap: wrap;
}
@@ -907,12 +932,12 @@ footer {
color: var(--text-soft);
border: 1px solid rgba(148, 163, 184, 0.15);
background: rgba(8, 15, 28, 0.56);
transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
transition: none;
}
.footer-links a:hover,
.footer-doc-link:hover {
transform: translateY(-1px);
transform: none;
border-color: rgba(125, 211, 252, 0.32);
background: rgba(14, 165, 233, 0.1);
color: #fff;
@@ -928,7 +953,7 @@ footer {
border: 1px solid rgba(148, 163, 184, 0.15);
background: rgba(8, 15, 28, 0.56);
color: var(--text-soft);
transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
transition: none;
}
.api-page .docs-container {
@@ -1036,10 +1061,19 @@ footer {
--toolbar-size: 1.9rem;
}
html {
scroll-behavior: auto;
}
.container {
padding: 14px;
}
.card {
backdrop-filter: none;
box-shadow: 0 14px 30px rgba(2, 8, 23, 0.24);
}
header {
padding: 28px 0 22px;
}
@@ -1094,6 +1128,37 @@ footer {
border-radius: 18px;
}
.password-input-wrapper,
.custom-expiry-wrapper,
.switch-ui,
.switch-ui::after,
.btn,
.toolbar-btn {
transition: none;
}
.password-prompt,
.decrypt-view,
.result-box {
gap: 18px;
}
.password-prompt .btn,
.btn-copy-content,
.url-actions .btn {
width: 100%;
min-height: 48px;
}
.decrypt-header {
gap: 16px;
}
.url-actions {
gap: 8px;
}
.feature-icon {
width: 36px;
height: 36px;