style: add assets

assets/script.js

@@ -0,0 +1,64 @@
+const translations = {
+  en: document.querySelectorAll('[data-lang="en"]'),
+  ru: document.querySelectorAll('[data-lang="ru"]'),
+};
+
+function setLanguage(lang) {
+  document.documentElement.lang = lang;
+  localStorage.setItem("lang", lang);
+
+  const langToHide = lang === "en" ? "ru" : "en";
+
+  translations[langToHide].forEach((el) => (el.style.display = "none"));
+  translations[lang].forEach((el) => (el.style.display = ""));
+
+  document.getElementById(`lang-${lang}`).classList.add("active");
+  document.getElementById(`lang-${langToHide}`).classList.remove("active");
+
+  if (window.event) event.preventDefault();
+}
+
+function setTheme(theme) {
+  if (theme === "new") {
+    document.documentElement.setAttribute("data-theme", "new");
+  } else {
+    document.documentElement.removeAttribute("data-theme");
+  }
+
+  localStorage.setItem("theme", theme);
+
+  document
+    .getElementById("theme-old")
+    .classList.toggle("active", theme === "old");
+  document
+    .getElementById("theme-new")
+    .classList.toggle("active", theme === "new");
+
+  if (window.event) event.preventDefault();
+}
+
+function copyGPGKey() {
+  var e = window.event;
+  if (e) { e.preventDefault(); e.stopPropagation(); }
+  const keyText = document.getElementById('gpg-key').textContent;
+  navigator.clipboard.writeText(keyText).then(() => {
+    const btnEn = document.getElementById('copy-gpg');
+    const btnRu = document.getElementById('copy-gpg-ru');
+    const prevEn = btnEn.textContent;
+    const prevRu = btnRu.textContent;
+    btnEn.textContent = 'Copied!';
+    btnRu.textContent = 'Скопировано!';
+    setTimeout(() => {
+      btnEn.textContent = prevEn;
+      btnRu.textContent = prevRu;
+    }, 2000);
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const savedLang = localStorage.getItem("lang") || "en";
+  const savedTheme = localStorage.getItem("theme") || "old";
+
+  setLanguage(savedLang);
+  setTheme(savedTheme);
+});

assets/style.css

@@ -0,0 +1,207 @@
+:root {
+    color-scheme: light dark;
+    --bg-color: Canvas;
+    --text-color: CanvasText;
+    --surface-color: color-mix(in oklab, Canvas 96%, CanvasText 6%);
+    --surface-border: color-mix(in oklab, CanvasText 25%, transparent);
+    --accent-color: inherit;
+    --hr-color: color-mix(in oklab, CanvasText 12%, transparent);
+    --switcher-active: CanvasText;
+}
+
+[data-theme="new"] {
+    color-scheme: dark;
+    --bg-color: #090a0d;
+    --text-color: #f2dec4;
+    --surface-color: #191526;
+    --surface-border: #a63232;
+    --accent-color: #a63232;
+    --hr-color: #191526;
+    --switcher-active: #a63232;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    font-family:
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        Segoe UI,
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif;
+    line-height: 1.6;
+    transition:
+        background-color 0.3s,
+        color 0.3s;
+}
+
+main {
+    max-width: 920px;
+    margin: 0 auto;
+    padding: 20px;
+    position: relative;
+}
+
+.top-controls {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+    font-size: 0.9rem;
+    z-index: 10000;
+}
+
+.top-controls a {
+    text-decoration: none;
+    padding: 2px 4px;
+    opacity: 0.6;
+    color: var(--text-color);
+}
+
+.top-controls a:hover {
+    opacity: 1;
+}
+
+.top-controls a.active {
+    font-weight: bold;
+    text-decoration: underline;
+    opacity: 1;
+    color: var(--switcher-active);
+}
+
+h1,
+h2,
+h3 {
+    font-weight: 600;
+    margin: 0 0 10px;
+}
+
+h1 {
+    font-size: 1.25rem;
+}
+
+small.muted {
+    opacity: 0.7;
+    font-size: 0.85rem;
+}
+
+section {
+    margin: 22px 0;
+}
+
+pre,
+code {
+    font-family:
+        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+pre {
+    background: var(--surface-color);
+    padding: 12px;
+    border-radius: 8px;
+    overflow: auto;
+}
+
+blockquote {
+    margin: 0;
+    padding: 12px;
+    border-left: 3px solid var(--surface-border);
+    background: var(--surface-color);
+    border-radius: 0 8px 8px 0;
+}
+
+footer {
+    margin-top: 32px;
+    opacity: 0.6;
+    font-size: 0.85rem;
+}
+
+a {
+    color: var(--accent-color);
+}
+
+[data-theme="new"] a:hover {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+hr {
+    border: 0;
+    height: 1px;
+    background: var(--hr-color);
+    margin: 24px 0;
+}
+
+details {
+    background: var(--surface-color);
+    border-radius: 6px;
+    padding: 10px;
+    margin-bottom: 8px;
+}
+
+details summary {
+    cursor: pointer;
+    font-weight: bold;
+}
+
+details[open] summary {
+    margin-bottom: 10px;
+}
+
+.gpg-details pre {
+    margin: 10px auto 0;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    display: inline-block;
+    text-align: left;
+}
+
+.gpg-details {
+    text-align: center;
+}
+
+.gpg-details {
+    display: flex;
+    flex-direction: column;
+}
+
+.summary-row {
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    width: calc(100% - 1.5em);
+}
+
+.copy-link {
+    font-weight: normal;
+    font-size: 0.85rem;
+    opacity: 0.6;
+}
+
+.copy-link:hover {
+    opacity: 1;
+}
+
+img {
+    display: block;
+}
+
+@media (max-width: 768px) {
+    main {
+        padding: 60px 20px 20px;
+    }
+
+    .top-controls {
+        top: 10px;
+        right: 10px;
+    }
+}