From 988136a59283ae3e155325d8a4403181fba22f89 Mon Sep 17 00:00:00 2001
From: "M.M.Azizi" <121211931+TheGreatAzizi@users.noreply.github.com>
Date: Thu, 23 Apr 2026 19:37:37 +0330
Subject: [PATCH] Add files via upload

---
 script.js |  13 +++++-
 style.css | 133 ++++++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 110 insertions(+), 36 deletions(-)

diff --git a/script.js b/script.js
index 6c3b1ef..4a3b637 100644
--- a/script.js
+++ b/script.js
@@ -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;
         }
 
diff --git a/style.css b/style.css
index f4c5ffc..a7ca71f 100644
--- a/style.css
+++ b/style.css
@@ -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;