zmiany w js i html

app.py

@@ -296,14 +296,14 @@ def add_recent_link(url, target_ip):
         pipe.lpush(key, new_item)
         if filtered:
             pipe.rpush(key, *filtered[:99])
-        pipe.ltrim(key, 0, 9)
+        pipe.ltrim(key, 0, 99)
         pipe.execute()
 
     redis_client.incr("stats:recent_links_added")
 
 
 def get_recent_links():
-    links = redis_client.lrange("recent_links", 0, 9)
+    links = redis_client.lrange("recent_links", 0, 99)
     out = []
     for link in links:
         parts = link.decode().split("|")

static/css/main.css

@@ -194,7 +194,8 @@ select:focus {
 .form-actions {
     display: flex;
     gap: 10px;
-    align-items: center
+    align-items: center;
+    justify-content: flex-end;
 }
 
 /* Result */
@@ -324,14 +325,20 @@ select:focus {
     color: #fff;
     box-shadow: 0 10px 20px color-mix(in srgb, var(--brand) 35%, transparent);
     transition: transform .04s ease, filter .15s ease, box-shadow .15s ease;
+
+    display: inline-block;
+    text-decoration: none;
+    display: inline-block;
 }
 
 .btn:hover {
-    filter: brightness(1.05)
+    transition: transform 0.15s ease;
+    display: inline-block;
+    transform: scale(1.05);
 }
 
 .btn:active {
-    transform: translateY(1px)
+    transform: scale(0.95);
 }
 
 .btn.outline {
@@ -357,6 +364,30 @@ select:focus {
     border-radius: 14px
 }
 
+a.btn:hover {
+    text-decoration: none;
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+a.btn[aria-disabled="true"] {
+    opacity: .5;
+    cursor: not-allowed;
+    pointer-events: none;
+    filter: none;
+    transform: none;
+}
+
+a.btn[aria-disabled="true"]:hover {
+    filter: none;
+    transform: none;
+    text-decoration: none;
+}
+
 /* Toast */
 #toast {
     position: fixed;
@@ -661,6 +692,16 @@ select:focus {
     background: var(--bg-elev)
 }
 
+.result-box .hint {
+    display: block;
+    text-align: center;
+    font-size: .9rem;
+    color: var(--muted);
+    opacity: 0.5;
+    opacity: 1.1;
+    text-shadow: 0 0 4px rgba(123, 212, 255, 0.4);
+}
+
 #error-dump {
     margin: 0;
     padding: 12px;
@@ -673,6 +714,7 @@ select:focus {
     overflow-wrap: anywhere;
 }
 
+
 @media (max-width:720px) {
     .error-card {
         padding: 12px
@@ -685,4 +727,18 @@ select:focus {
     #error-dump {
         max-height: 300px
     }
+}
+
+.result-box {
+    margin-top: 14px;
+    padding: 12px;
+    border: 1px dashed var(--border);
+    border-radius: 12px;
+    background: var(--bg-elev);
+    box-shadow: 0 0 8px 2px color-mix(in srgb, var(--brand) 50%, transparent 50%);
+    transition: box-shadow 0.3s ease;
+}
+
+.result-box:hover {
+    box-shadow: 0 0 12px 4px color-mix(in srgb, var(--brand) 70%, transparent 30%);
 }

static/js/main.js

@@ -86,6 +86,7 @@
     const ipPreset = $('#ip-preset');
     const out = $('#generated-link');
     const openBtn = $('#open-link');
+    const copyBtn = $('#copy-btn');
 
     function showError(input, msg) {
         const id = input.getAttribute('id');
@@ -94,6 +95,7 @@
         input.setAttribute('aria-invalid', msg ? 'true' : 'false');
     }
 
+
     function updatePreview() {
         const rawUrl = (urlInput?.value || '').trim();
         const ip = (ipInput?.value || '').trim();
@@ -103,12 +105,14 @@
             if (openBtn) {
                 openBtn.setAttribute('href', '#');
                 openBtn.setAttribute('aria-disabled', 'true');
+                openBtn.setAttribute('disabled', 'true');
             }
+            if (copyBtn) copyBtn.setAttribute('disabled', 'true');
             $('.result-box')?.setAttribute('data-state', 'empty');
             return;
         }
 
-        const normalized = normalizeUrlMaybe(rawUrl); // poprawny http/https lub ''
+        const normalized = normalizeUrlMaybe(rawUrl);
         const guessed = rawUrl ? (rawUrl.includes('://') ? rawUrl : `https://${rawUrl}`) : '';
         const previewUrl = normalized || guessed;
 
@@ -117,7 +121,9 @@
             if (openBtn) {
                 openBtn.setAttribute('href', '#');
                 openBtn.setAttribute('aria-disabled', 'true');
+                openBtn.setAttribute('disabled', 'true');
             }
+            if (copyBtn) copyBtn.setAttribute('disabled', 'true');
             $('.result-box')?.setAttribute('data-state', 'empty');
             return;
         }
@@ -130,11 +136,14 @@
             if (ok) {
                 openBtn.setAttribute('href', link);
                 openBtn.setAttribute('aria-disabled', 'false');
+                openBtn.removeAttribute('disabled');
             } else {
                 openBtn.setAttribute('href', '#');
                 openBtn.setAttribute('aria-disabled', 'true');
+                openBtn.setAttribute('disabled', 'true');
             }
         }
+        if (copyBtn) copyBtn.toggleAttribute('disabled', !ok);
         $('.result-box')?.setAttribute('data-state', ok ? 'ready' : 'empty');
     }
 

templates/form.html

@@ -83,12 +83,17 @@
                     <input id="generated-link" type="text" value="{{ generated_link or '' }}" readonly
                         placeholder="Link will appear here…">
                     <div class="result-buttons">
-                        <button class="btn" type="button" data-action="copy" data-target="#generated-link">Copy</button>
+
+                        <button class="btn" type="button" id="copy-btn" data-action="copy"
+                            data-target="#generated-link">Copy</button>
+
                         <a class="btn outline" id="open-link" href="{{ generated_link or '#' }}" target="_blank"
                             rel="noopener" aria-disabled="{{ 'false' if generated_link else 'true' }}">Open</a>
+
                     </div>
                 </div>
-                <small class="hint"><strong>Paste this link in your Mikrotik (IP -> DNS -> Adlist) or other DNS server / ad blocking tool</strong></small>
+                <small class="hint">Paste this link in your Mikrotik (IP -> DNS -> Adlist) or other DNS server /
+                    ad blocking tool</small>
             </div>
         </section>