MainMenu + PrintMenu временный предпросмотр

src/App.svelte

@@ -1,89 +1,66 @@
 <script>
-  import svelteLogo from './assets/svelte.svg'
-  import viteLogo from './assets/vite.svg'
-  import heroImg from './assets/hero.png'
-  import Counter from './lib/Counter.svelte'
+  import MainMenu from './lib/MainMenu.svelte';
+  import PrintMenu from './lib/PrintMenu.svelte';
+
+  /** @type {'main' | 'print'} */
+  let page = 'main';
+
+  /** @param {'print' | 'scan' | 'photo' | 'access'} id */
+  function handleAction(id) {
+    if (id === 'print') {
+      page = 'print';
+    } else {
+      console.log('Выбрано действие:', id);
+    }
+  }
+
+  function handleBack() {
+    page = 'main';
+  }
+
+  function handlePrint() {
+    console.log('Печать с настройками...');
+  }
+
+  function handleLoadPreview() {
+    console.log('Загрузка файла для предпросмотра...');
+  }
 </script>
 
-<section id="center">
-  <div class="hero">
-    <img src={heroImg} class="base" width="170" height="179" alt="" />
-    <img src={svelteLogo} class="framework" alt="Svelte logo" />
-    <img src={viteLogo} class="vite" alt="Vite logo" />
-  </div>
-  <div>
-    <h1>Get started</h1>
-    <p>Edit <code>src/App.svelte</code> and save to test <code>HMR</code></p>
-  </div>
-  <Counter />
-</section>
+<style>
+  :global(html),
+  :global(body) {
+    margin: 0;
+    padding: 0;
+    background: #0b0d11;
+  }
 
-<div class="ticks"></div>
+  :global(body) {
+    display: block;
+    place-items: initial;
+    min-width: 0;
+    color: #f5f7fa;
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
 
-<section id="next-steps">
-  <div id="docs">
-    <svg class="icon" role="presentation" aria-hidden="true">
-      <use href="/icons.svg#documentation-icon"></use>
-    </svg>
-    <h2>Documentation</h2>
-    <p>Your questions, answered</p>
-    <ul>
-      <li>
-        <a href="https://vite.dev/" target="_blank" rel="noreferrer">
-          <img class="logo" src={viteLogo} alt="" />
-          Explore Vite
-        </a>
-      </li>
-      <li>
-        <a href="https://svelte.dev/" target="_blank" rel="noreferrer">
-          <img class="button-icon" src={svelteLogo} alt="" />
-          Learn more
-        </a>
-      </li>
-    </ul>
-  </div>
-  <div id="social">
-    <svg class="icon" role="presentation" aria-hidden="true">
-      <use href="/icons.svg#social-icon"></use>
-    </svg>
-    <h2>Connect with us</h2>
-    <p>Join the Vite community</p>
-    <ul>
-      <li>
-        <a href="https://github.com/vitejs/vite" target="_blank" rel="noreferrer">
-          <svg class="button-icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#github-icon"></use>
-          </svg>
-          GitHub
-        </a>
-      </li>
-      <li>
-        <a href="https://chat.vite.dev/" target="_blank" rel="noreferrer">
-          <svg class="button-icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#discord-icon"></use>
-          </svg>
-          Discord
-        </a>
-      </li>
-      <li>
-        <a href="https://x.com/vite_js" target="_blank" rel="noreferrer">
-          <svg class="button-icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#x-icon"></use>
-          </svg>
-          X.com
-        </a>
-      </li>
-      <li>
-        <a href="https://bsky.app/profile/vite.dev" target="_blank" rel="noreferrer">
-          <svg class="button-icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#bluesky-icon"></use>
-          </svg>
-          Bluesky
-        </a>
-      </li>
-    </ul>
-  </div>
-</section>
+  .app-wrapper {
+    display: flex;
+    justify-content: center;
+  }
 
-<div class="ticks"></div>
-<section id="spacer"></section>
+  @media (max-width: 480px) {
+    .app-wrapper {
+      justify-content: center;
+    }
+  }
+</style>
+
+<main class="app-wrapper">
+  {#if page === 'main'}
+    <MainMenu onAction={handleAction} />
+  {/if}
+  {#if page === 'print'}
+    <PrintMenu onBack={handleBack} onPrint={handlePrint} />
+  {/if}
+</main>