docs: add interactive demo page

docs-site/astro.config.mjs

@@ -59,6 +59,7 @@ export default defineConfig({
           label: 'Начало',
           items: [
             { label: 'Обзор', slug: 'getting-started/overview' },
+            { label: 'Демо', slug: 'demo' },
             { label: 'Установка', slug: 'getting-started/setup' },
             { label: 'Развертывание', slug: 'getting-started/deployment' },
             { label: 'Настройка окружения', slug: 'getting-started/configuration' },

docs-site/scripts/sync-docs.mjs

@@ -8,6 +8,7 @@ const sourceDir = path.join(repoRoot, 'docs');
 const outputDir = path.join(siteRoot, 'src', 'content', 'docs');
 
 const descriptions = {
+  'demo/index.md': 'Статический демо-режим Remnawave Minishop с моковыми данными для Mini App и админки.',
   'index.md': 'Документация по запуску, настройке и сопровождению Telegram Mini App для Remnawave.',
   'getting-started/overview.md': 'Что входит в Remnawave Minishop и как связаны бот, Mini App, backend, worker и Remnawave Panel.',
   'getting-started/setup.md': 'Минимальный путь запуска Remnawave Minishop через Docker Compose.',

docs-site/src/styles/custom.css

@@ -99,4 +99,114 @@
     border-radius: 5px;
     padding: 0.08rem 0.28rem;
   }
+
+  .demo-shell {
+    overflow: hidden;
+    margin-block: 1.5rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 8px;
+    background: var(--sl-color-bg);
+  }
+
+  .demo-shell__bar {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.85rem 1rem;
+    border-bottom: 1px solid var(--sl-color-gray-5);
+    background: var(--sl-color-bg-nav);
+  }
+
+  .demo-shell__bar strong,
+  .demo-shell__bar span {
+    display: block;
+  }
+
+  .demo-shell__bar strong {
+    color: var(--sl-color-white);
+    font-size: 0.95rem;
+  }
+
+  .demo-shell__bar span {
+    color: var(--sl-color-gray-2);
+    font-size: 0.82rem;
+  }
+
+  .demo-shell__exit {
+    flex: 0 0 auto;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 6px;
+    padding: 0.4rem 0.65rem;
+    color: var(--sl-color-white);
+    font-size: 0.84rem;
+    text-decoration: none;
+  }
+
+  .demo-shell__exit:hover {
+    border-color: var(--sl-color-text-accent);
+    color: var(--sl-color-text-accent);
+  }
+
+  .demo-shell__nav {
+    display: flex;
+    gap: 0.45rem;
+    overflow-x: auto;
+    padding: 0.7rem 1rem 0;
+    scrollbar-width: thin;
+  }
+
+  .demo-shell__nav--admin {
+    padding-top: 0.5rem;
+    padding-bottom: 0.7rem;
+    border-bottom: 1px solid var(--sl-color-gray-5);
+  }
+
+  .demo-shell__nav a {
+    flex: 0 0 auto;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 999px;
+    padding: 0.34rem 0.62rem;
+    color: var(--sl-color-gray-1);
+    font-size: 0.82rem;
+    line-height: 1.2;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .demo-shell__nav a:hover {
+    border-color: var(--sl-color-text-accent);
+    color: var(--sl-color-text-accent);
+  }
+
+  .demo-shell__frame {
+    display: block;
+    width: 100%;
+    height: min(78vh, 52rem);
+    min-height: 42rem;
+    border: 0;
+    background: #0b0f17;
+  }
+
+  @media (max-width: 42rem) {
+    .demo-shell {
+      margin-inline: calc(var(--sl-content-pad-x, 1rem) * -1);
+      border-inline: 0;
+      border-radius: 0;
+    }
+
+    .demo-shell__bar {
+      display: grid;
+      align-items: start;
+    }
+
+    .demo-shell__exit {
+      width: fit-content;
+    }
+
+    .demo-shell__frame {
+      height: 46rem;
+      min-height: 46rem;
+    }
+  }
 }