index.html

Rama main · réplica de lectura del repositorio original.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="color-scheme" content="light dark" />
  <meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png" href="/favicon.png">
  <link rel="apple-touch-icon" href="/pwa-192x192.png">
  <link rel="manifest" href="/manifest.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
  <meta name="msapplication-TileColor" content="#00aba9">
  <meta name="theme-color" content="#ffffff">
  <meta name="description" content="webapp to manage your OTA updates for capacitor">
  <meta name="title" content="Capgo app">
  <title>Capgo app</title>
  <style>
    :root {
      --app-loader-background: #f8fafc;
      --app-loader-logo-color: #0f172a;
    }

    :root[data-theme='capgodark'] {
      --app-loader-background: #0f172a;
      --app-loader-logo-color: #ffffff;
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme='capgolight']) {
        --app-loader-background: #0f172a;
        --app-loader-logo-color: #ffffff;
      }
    }

    html,
    body {
      margin: 0;
      background-color: var(--app-loader-background);
    }

    #app-loader {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--app-loader-background);
    }

    /* Animated Capgo mark, same markup as src/components/CapgoLoader.vue */
    #app-loader svg {
      width: 96px;
      height: 96px;
      color: var(--app-loader-logo-color);
    }

    #app-loader .spin {
      transform-box: view-box;
      transform-origin: 50% 50%;
      animation: app-loader-spin 2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
    }

    #app-loader .plate-left {
      animation: app-loader-plate-left 2s ease-in-out infinite;
    }

    #app-loader .plate-right {
      animation: app-loader-plate-right 2s ease-in-out infinite;
    }

    @keyframes app-loader-spin {
      0%,
      20% {
        transform: rotate(0deg);
      }

      50%,
      70% {
        transform: rotate(90deg);
      }

      100% {
        transform: rotate(180deg);
      }
    }

    @keyframes app-loader-plate-left {
      0%,
      20%,
      50%,
      70%,
      100% {
        transform: translateX(0);
      }

      10%,
      60% {
        transform: translateX(-40px);
      }
    }

    @keyframes app-loader-plate-right {
      0%,
      20%,
      50%,
      70%,
      100% {
        transform: translateX(0);
      }

      10%,
      60% {
        transform: translateX(40px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #app-loader .spin,
      #app-loader .plate-left,
      #app-loader .plate-right {
        animation: none;
      }
    }
  </style>
</head>

<body class="overflow-hidden h-full antialiased font-inter">
  <div id="app-loader" role="status" aria-label="Loading Capgo">
    <svg viewBox="0 0 1024 1024" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <mask id="app-loader-cut" maskUnits="userSpaceOnUse" x="-512" y="-512" width="1024" height="1024">
          <rect x="-512" y="-512" width="1024" height="1024" fill="#fff" />
          <g fill="#000">
            <path class="plate-left" d="M-160-145A45 45 0 0 1-70-145V145A45 45 0 0 1-160 145V50H-195A45 45 0 0 1-240 5V-5A45 45 0 0 1-195-50H-160Z" />
            <path class="plate-right" d="M160-145A45 45 0 0 0 70-145V145A45 45 0 0 0 160 145V50H195A45 45 0 0 0 240 5V-5A45 45 0 0 0 195-50H160Z" />
          </g>
        </mask>
      </defs>
      <g class="spin">
        <g transform="translate(512 512) rotate(-45)">
          <path fill="currentColor" mask="url(#app-loader-cut)" d="M-190-340H190A150 150 0 0 1 340-190V190A150 150 0 0 1 190 340H-190A150 150 0 0 1-340 190V-190A150 150 0 0 1-190-340Z" />
        </g>
      </g>
    </svg>
  </div>
  <div id="app" class="overflow-hidden h-full"></div>
  <script src="/theme-bootstrap.js"></script>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>