web-app/src/lib/pages/main/MainMenu.svelte

<script>
  /** @type {Array<{ id: 'print' | 'scan' | 'photo' | 'access', label: string, grad: string, glow: string, icon: string }>} */
  const actions = [
    {
      id: 'print',
      label: 'Печать',
      grad: 'linear-gradient(135deg, #5b8cff 0%, #38c6ff 100%)',
      glow: 'rgba(72, 150, 255, 0.45)',
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>'
    },
    {
      id: 'scan',
      label: 'Скан',
      grad: 'linear-gradient(135deg, #34d399 0%, #2dd4bf 100%)',
      glow: 'rgba(52, 211, 153, 0.45)',
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"></path><path d="M17 3h2a2 2 0 0 1 2 2v2"></path><path d="M21 17v2a2 2 0 0 1-2 2h-2"></path><path d="M7 21H5a2 2 0 0 1-2-2v-2"></path><line x1="7" y1="12" x2="17" y2="12"></line></svg>'
    },
    {
      id: 'photo',
      label: 'Фото на документ',
      grad: 'linear-gradient(135deg, #ffb457 0%, #ff8a5c 100%)',
      glow: 'rgba(255, 150, 90, 0.45)',
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"></rect><circle cx="8" cy="11" r="3"></circle><path d="M14 10h4"></path><path d="M14 14h4"></path><path d="M4 19c0-2 2-3 4-3s4 1 4 3"></path></svg>'
    },
    {
      id: 'access',
      label: 'Дополнительно',
      grad: 'linear-gradient(135deg, #a78bfa 0%, #f472b6 100%)',
      glow: 'rgba(167, 139, 250, 0.45)',
      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="4" r="2"></circle><path d="M12 6v6"></path><path d="M12 12l-4 8"></path><path d="M12 12l4 8"></path><path d="M6 10h12"></path></svg>'
    }
  ];

  /** @param {'print' | 'scan' | 'photo' | 'access'} id */
  export let onAction = (id) => {
    console.log('Выбрано действие:', id);
  };
</script>

<div class="menu-container">
  <div class="content">
    <header class="header">
      <h1>Сервисы</h1>
      <p>Выберите действие</p>
    </header>

    <main class="grid">
      {#each actions as a}
        <button
          class="card"
          style="--grad: {a.grad}; --glow: {a.glow}"
          onclick={() => onAction(a.id)}
        >
          <span class="icon" aria-hidden="true">{@html a.icon}</span>
          <span class="label">{a.label}</span>
        </button>
      {/each}
    </main>

    <footer class="footer">
      <div class="home-bar"></div>
    </footer>
  </div>
</div>

<style>
  /* Стили остаются здесь, но убираем глобальные сбросы body/html */
  
  .menu-container {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 28px 20px 10px;
    display: flex;
    flex-direction: column;
    background: radial-gradient(120% 60% at 50% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 60%);
  }

  .header {
    margin: 4px 4px 26px;
  }

  .header h1 {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .header p {
    margin: 0;
    font-size: 15px;
    color: #8b93a1;
  }

  /* Сетка 2×2 */
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* Карточка-кнопка в стиле мобильного UI */
  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 12px 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #f5f7fa;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
  }

  @media (hover: hover) {
    .card:hover {
      transform: translateY(-3px);
      border-color: rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.08);
    }
  }

  /* Эффект нажатия, как в мобильных приложениях */
  .card:active {
    transform: scale(0.96);
  }

  /* Иконка с градиентом и свечением */
  .icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--grad);
    color: #fff;
    box-shadow: 0 10px 22px -8px var(--glow);
  }

  .label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
  }

  /* «Домашняя» полоска внизу, как на iPhone */
  .footer {
    margin-top: auto;
    padding: 32px 0 8px;
    display: flex;
    justify-content: center;
  }

  .home-bar {
    width: 120px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
  }
</style>