docs: make demo open fullscreen

2026-05-28 00:19:22 +03:00
parent 4c2ee19957
commit 2b8bcd10b8
7 changed files with 190 additions and 153 deletions
@@ -0,0 +1,142 @@
+---
+const defaultDemoSrc = '/demo/runtime/app.html?screen=home&mock=tariffs';
+const docsHref = '/getting-started/demo/';
+---
+
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="theme-color" content="#05080f" />
+    <title>Remnawave Minishop Demo</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        font-family:
+          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+          sans-serif;
+        background: #05080f;
+        color: #f8fafc;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+
+      body {
+        display: grid;
+        grid-template-rows: auto minmax(0, 1fr);
+        overflow: hidden;
+        background: #05080f;
+      }
+
+      .demo-topbar {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 3.25rem;
+        padding: max(0.7rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
+          0.7rem max(1rem, env(safe-area-inset-left));
+        border-bottom: 1px solid rgb(148 163 184 / 20%);
+        background: rgb(5 8 15 / 94%);
+        backdrop-filter: blur(16px);
+      }
+
+      .demo-topbar__title {
+        min-width: 0;
+      }
+
+      .demo-topbar__title strong,
+      .demo-topbar__title span {
+        display: block;
+      }
+
+      .demo-topbar__title strong {
+        color: #00fe7a;
+        font-size: 0.95rem;
+        line-height: 1.2;
+      }
+
+      .demo-topbar__title span {
+        overflow: hidden;
+        color: #cbd5e1;
+        font-size: 0.82rem;
+        line-height: 1.35;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .demo-topbar__back {
+        flex: 0 0 auto;
+        border: 1px solid rgb(0 254 122 / 45%);
+        border-radius: 7px;
+        padding: 0.48rem 0.72rem;
+        color: #f8fafc;
+        font-size: 0.86rem;
+        font-weight: 650;
+        line-height: 1;
+        text-decoration: none;
+      }
+
+      .demo-topbar__back:hover {
+        border-color: #00fe7a;
+        color: #00fe7a;
+      }
+
+      .demo-frame {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        background: #05080f;
+      }
+
+      @media (max-width: 42rem) {
+        .demo-topbar {
+          align-items: flex-start;
+          gap: 0.75rem;
+        }
+
+        .demo-topbar__title span {
+          white-space: normal;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <header class="demo-topbar">
+      <div class="demo-topbar__title">
+        <strong>Remnawave Minishop demo</strong>
+        <span>Демо-режим: статическая сборка с моковыми данными, без backend</span>
+      </div>
+      <a class="demo-topbar__back" href={docsHref}>Вернуться к документации</a>
+    </header>
+    <iframe
+      id="demo-frame"
+      class="demo-frame"
+      title="Remnawave Minishop static demo"
+      src={defaultDemoSrc}
+      loading="eager"
+    ></iframe>
+    <script is:inline>
+      const frame = document.getElementById('demo-frame');
+      const params = new URLSearchParams(window.location.search);
+      if (!params.has('screen')) params.set('screen', 'home');
+      if (!params.has('mock')) params.set('mock', 'tariffs');
+      frame.src = `/demo/runtime/app.html?${params.toString()}${window.location.hash || ''}`;
+    </script>
+  </body>
+</html>