web-app/src/App.svelte

<script>
  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>

<style>
  :global(html),
  :global(body) {
    margin: 0;
    padding: 0;
    background: #0b0d11;
  }

  :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;
  }

  .app-wrapper {
    display: flex;
    justify-content: center;
  }

  @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>