dashfront/index.html

<!doctype html>
<html lang="de" class="notranslate" translate="no">

<head>
  <meta charset="UTF-8" />
  <meta name="google" content="notranslate" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>QuixPOS * Management Interface</title>

  <!-- Primary Meta Tags -->
  <meta name="title" content="QuixPOS * Management Interface" />
  <meta name="description"
    content="QuixPOS * Point-of-Sale- und Warenwirtschaftssystem. Schnelle Kassenabwicklung, intelligente Artikelverwaltung, Aufträge und Bestandsführung." />
  <meta name="keywords"
    content="QuixPOS, POS, Kassensystem, Warenwirtschaft, ERP, Artikelverwaltung, Lagerverwaltung, Kasse, Point of Sale" />
  <meta name="author" content="QuixPOS" />
  <meta name="robots" content="index, follow" />
  <meta name="theme-color" content="#1d4ed8" />

  <!-- Icons -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="apple-touch-icon" href="/icons/icon-192.png" />

  <!-- Open Graph / Facebook / LinkedIn / WhatsApp -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="QuixPOS" />
  <meta property="og:title" content="QuixPOS * Management Interface" />
  <meta property="og:description"
    content="Webbasiertes Point-of-Sale- und Warenwirtschaftssystem. Schnelle Kassenabwicklung, intelligente Artikelverwaltung und Bestandsführung." />
  <meta property="og:image" content="/og-image.png" />
  <meta property="og:image:secure_url" content="/og-image.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="QuixPOS * Point-of-Sale & Warenwirtschaftssystem" />
  <meta property="og:locale" content="de_DE" />

  <!-- Twitter / X -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="QuixPOS * Management Interface" />
  <meta name="twitter:description"
    content="Webbasiertes Point-of-Sale- und Warenwirtschaftssystem. Schnelle Kassenabwicklung, intelligente Artikelverwaltung und Bestandsführung." />
  <meta name="twitter:image" content="/og-image.png" />
  <meta name="twitter:image:alt" content="QuixPOS * Point-of-Sale & Warenwirtschaftssystem" />

  <!-- Structured Data: JSON-LD -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "@id": "#webapp",
        "name": "QuixPOS",
        "alternateName": "QuixPOS Management Interface",
        "applicationCategory": "BusinessApplication",
        "operatingSystem": "All",
        "browserRequirements": "Requires modern JavaScript browser (Chrome, Firefox, Safari, Edge)",
        "description": "Webbasiertes Point-of-Sale- und Warenwirtschaftssystem. Schnelle Kassenabwicklung, intelligente Artikelverwaltung, Aufträge und Bestandsführung.",
        "image": "/og-image.png",
        "screenshot": "/og-image.png",
        "softwareVersion": "1.0",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "EUR"
        },
        "featureList": [
          "Point of Sale Kassenbetrieb",
          "Artikel- & Barcodeverwaltung",
          "Lager- & Lieferantenmanagement",
          "Angebote & Bestellwesen",
          "Kundenverwaltung & Preisgruppen"
        ]
      },
      {
        "@type": "Organization",
        "@id": "#organization",
        "name": "QuixPOS",
        "logo": "/quixpos-logo.png",
        "image": "/og-image.png",
        "description": "Point-of-Sale & Warenwirtschaftssystem"
      }
    ]
  }
  </script>

  <style>
    /* First-paint colors. Mirrored from src/colors.js (MAIN_BACKGROUND /
       THEME_COLOR) because this file must paint before the JS bundle loads.
       Once the app boots, src/colors.js takes over via CSS custom properties. */
    html,
    body,
    #root {
      min-height: 100%;
      background-color: #82b8b4;
    }

    html,
    body {
      overscroll-behavior-y: none;
      touch-action: manipulation;
    }

    html {
      scrollbar-gutter: stable;
    }
  </style>
</head>

<body>
  <noscript>
    <div
      style="font-family:system-ui,-apple-system,sans-serif;max-width:440px;margin:60px auto;padding:32px 24px;text-align:center;background:#ffffff;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,0.12);color:#1e293b;">
      <img src="/quixpos-logo.png" alt="QuixPOS Logo" width="96" height="96"
        style="border-radius:16px;margin-bottom:16px;box-shadow:0 4px 12px rgba(0,0,0,0.08);" />
      <h1 style="margin:0 0 6px;font-size:26px;font-weight:700;color:#0f2f35;">QuixPOS</h1>
      <p style="margin:0 0 12px;font-size:16px;font-weight:600;color:#0f766e;">Management Interface</p>
      <p style="margin:0;font-size:13px;color:#94a3b8;">Bitte aktivieren Sie JavaScript, um das Management Interface zu
        nutzen.</p>
    </div>
  </noscript>
  <div id="root"></div>
  <script>
    (function () {
      var host = location.hostname;
      if (host !== 'localhost' && host !== '127.0.0.1') return;
      if (!navigator.serviceWorker) return;
      var hadSw = false;
      navigator.serviceWorker.getRegistrations().then(function (regs) {
        hadSw = regs.length > 0;
        return Promise.all(regs.map(function (r) { return r.unregister(); }));
      }).then(function () {
        if (!window.caches) return hadSw;
        return caches.keys().then(function (keys) {
          return Promise.all(keys.map(function (k) { return caches.delete(k); }))
            .then(function () { return hadSw; });
        });
      }).then(function (reload) {
        if (reload && !sessionStorage.getItem('dashfront-sw-cleared')) {
          sessionStorage.setItem('dashfront-sw-cleared', '1');
          location.reload();
        }
      });
    })();
  </script>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>