diff --git a/static/css/main.css b/static/css/main.css index 4806e89..e970c42 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -325,15 +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(2.00) - text-decoration: none; + transition: transform 0.15s ease; + display: inline-block; + transform: scale(1.05); } .btn:active { - transform: translateY(1px) + transform: scale(0.95); } .btn.outline { @@ -359,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; @@ -663,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; @@ -675,6 +714,7 @@ select:focus { overflow-wrap: anywhere; } + @media (max-width:720px) { .error-card { padding: 12px diff --git a/static/js/main.js b/static/js/main.js index 86b44c3..eab72ec 100644 --- a/static/js/main.js +++ b/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'); } diff --git a/templates/form.html b/templates/form.html index fc569ce..377b28c 100644 --- a/templates/form.html +++ b/templates/form.html @@ -83,12 +83,17 @@
- + + + Open +
- Paste this link in your Mikrotik (IP -> DNS -> Adlist) or other DNS server / ad blocking tool + Paste this link in your Mikrotik (IP -> DNS -> Adlist) or other DNS server / + ad blocking tool