1
0

feat: per-page copy-link button for compact URLs + shareable force-language links
Deploy / deploy (push) Successful in 0s

- Copy-link pill in each page's top bar copies its compact URL (SEC-01/AGT-01, /, /privacy)
- ?lang= / #lang= forces the page language over saved/browser default (EN/DE, FA); hash form survives the compact-URL 302
- add .gitignore (keeps local CLAUDE.md out of the public repo)
This commit is contained in:
Pouya
2026-06-05 11:33:51 +02:00
parent 3677993690
commit eedceada29
5 changed files with 282 additions and 6 deletions
+60 -1
View File
@@ -244,6 +244,24 @@ code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
.themebar{top:.7rem;right:.9rem}
}
/* ---- copy-link control (shares the segmented-pill language) ------- */
.copylink{
appearance:none;cursor:pointer;display:inline-flex;align-items:center;
font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;line-height:1;color:var(--muted);background:var(--surface);
border:1px solid var(--border-strong);border-radius:99px;padding:.42em .85em;
box-shadow:var(--shadow);
transition:color .16s ease, border-color .16s ease, background-color .16s ease;
}
.copylink:hover{color:var(--accent-ink);border-color:var(--accent)}
.copylink:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.copylink svg{width:13px;height:13px;flex:none}
.copylink .cl-idle,.copylink .cl-done{display:inline-flex;align-items:center;gap:.45em}
.copylink .cl-done{display:none}
.copylink.copied{color:var(--good);border-color:var(--good);background:var(--good-wash)}
.copylink.copied .cl-idle{display:none}
.copylink.copied .cl-done{display:inline-flex}
/* =========================================================================
SECTION SHELL (matches index.html)
========================================================================= */
@@ -407,7 +425,17 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
<!-- ============================ MASTHEAD ============================ -->
<header class="masthead wrap">
<div class="themebar" role="group" aria-label="Colour theme">
<div class="themebar" role="group" aria-label="Colour theme and link">
<button type="button" class="copylink" data-copy-url="https://tutorials.pouyalab.de/privacy" aria-label="Copy link to this page">
<span class="cl-idle">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 15l6-6M10.5 6.5l1-1a4.95 4.95 0 0 1 7 7l-1 1M13.5 17.5l-1 1a4.95 4.95 0 0 1-7-7l1-1"/></svg>
<span>Copy link</span>
</span>
<span class="cl-done">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
<span>Copied</span>
</span>
</button>
<div class="tgctl" role="group" aria-label="Colour theme">
<span class="tglabel">Theme</span>
<div class="themeseg">
@@ -621,6 +649,37 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
}, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });
els.forEach(function(el){ io.observe(el); });
})();
/* =========================================================================
COPY-LINK — copies the page's compact URL to the clipboard, with a brief
"Copied" confirmation. Falls back to execCommand where the async clipboard
API is unavailable (older browsers / non-secure contexts).
========================================================================= */
(function(){
function fallback(text, cb){
try{
var ta = document.createElement('textarea');
ta.value = text; ta.setAttribute('readonly','');
ta.style.position = 'fixed'; ta.style.top = '-9999px';
document.body.appendChild(ta); ta.focus(); ta.select();
document.execCommand('copy'); document.body.removeChild(ta); cb();
}catch(e){}
}
document.querySelectorAll('.copylink').forEach(function(b){
var t = null;
b.addEventListener('click', function(){
var url = b.getAttribute('data-copy-url'); if(!url) return;
var done = function(){
b.classList.add('copied');
if(t) clearTimeout(t);
t = setTimeout(function(){ b.classList.remove('copied'); }, 1700);
};
if(navigator.clipboard && navigator.clipboard.writeText){
navigator.clipboard.writeText(url).then(done).catch(function(){ fallback(url, done); });
} else { fallback(url, done); }
});
});
})();
</script>
</body>
</html>