web-app/src/App.svelte

<script>
	import MainMenu from '$lib/pages/main/MainMenu.svelte';
	import PrintMenu from '$lib/pages/print/PrintMenu.svelte';
	import ScanPage from '$lib/pages/scan/ScanPage.svelte';

	/** @type {'main' | 'print' | 'scan'} */
	let page = $state('main');

	/** @param {'print' | 'scan' | 'photo' | 'access'} id */
	function handleAction(id) {
		if (id === 'print') {
			page = 'print';
		} else if (id === 'scan') {
			page = 'scan';
		} else {
			console.log('Выбрано действие:', id);
		}
	}

	function handleBack() {
		page = 'main';
	}
</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} />
	{:else if page === 'print'}
		<PrintMenu onBack={handleBack} />
	{:else if page === 'scan'}
		<ScanPage onBack={handleBack} />
	{/if}
</main>