index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Primary Meta Tags -->
    <title>EEcircuit</title>
    <meta name="title" content="EEcircuit" />
    <meta
      name="description"
      content="EEcircuit is a circuit simulator based on ngspice and it runs inside the browser using WebAssembly technology. The input is spice based netlist, and the output is results of the analysis that you're doing in the simulations. You are able to plot and view the results directly in the browser using high-performance WebGL plotting library webgl-plot, or download the data in CSV format for further analysis. Notice that your netlist and results are processed locally and always remain inside your browser and are never uploaded to network. The focus of this implementation is rapid analysis, sharing circuits ideas and results in VLSI and chip-design communities."
    />

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="https://EEcircuit.com" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="EEcircuit" />
    <meta
      property="og:description"
      content="A browser based SPICE circuit simulator using WebAssembly technology"
    />
    <meta property="og:image" content="https://eecircuit.com/EEcircuit_og.png" />

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="twitter:domain" content="EEcircuit" />
    <meta property="twitter:url" content="https://EEcircuit.com" />
    <meta name="twitter:title" content="EEcircuit" />
    <meta
      name="twitter:description"
      content="A browser based SPICE circuit simulator using WebAssembly technology"
    />
    <meta name="twitter:image" content="https://eecircuit.com/EEcircuit_og.png" />

    <!-- Meta Tags Generated via https://www.opengraph.xyz -->

    <style>
      .github-corner {
        position: absolute;
        top: 0;
        border: 0;
        right: 0;
      }
      @media (prefers-color-scheme: light) {
        .github-corner svg {
          fill: rgb(10, 10, 10);
          color: rgb(250, 250, 250);
        }
      }
      @media (prefers-color-scheme: dark) {
        .github-corner svg {
          fill: rgb(250, 250, 250);
          color: rgb(10, 10, 10);
        }
      }
      .github-corner:hover .octo-arm {
        animation: octocat-wave 560ms ease-in-out;
      }
      @keyframes octocat-wave {
        0%, 100% {
          transform: rotate(0);
        }
        20%, 60% {
          transform: rotate(-25deg);
        }
        40%, 80% {
          transform: rotate(10deg);
        }
      }
      @media (max-width: 500px) {
        .github-corner:hover .octo-arm {
          animation: none;
        }
        .github-corner .octo-arm {
          animation: octocat-wave 560ms ease-in-out;
        }
      }
    </style>
  </head>
  <body>
    <nav>
      <a
        href="https://github.com/eelab-dev/EEcircuit"
        class="github-corner"
        aria-label="View source on GitHub"
        ><svg
          width="80"
          height="80"
          viewBox="0 0 250 250"
          style="
            @media (prefers-color-scheme: light) {
              fill: rgb(250, 250, 250);
              color: rgb(10, 10, 10);
            }
            @media (prefers-color-scheme: dark) {
              fill: rgb(10, 10, 10);
              color: rgb(250, 250, 250);
            }
            position: absolute;
            top: 0;
            border: 0;
            right: 0;
          "
          aria-hidden="true"
        >
          <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
          <path
            d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
            fill="currentColor"
            style="transform-origin: 130px 106px"
            class="octo-arm"
          ></path>
          <path
            d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
            fill="currentColor"
            class="octo-body"
          ></path></svg></a
      >
      <style>
        @media (prefers-color-scheme: dark) {
          #Layer_1 path {
            fill: #f2f2f2;
          }
        }
        @media (prefers-color-scheme: light) {
          #Layer_1 path {
            fill: #101010;
          }
        }
      </style>

      <div style="margin-bottom: 0.8em; display: flex; align-items: flex-end">
        <svg
          id="Layer_1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 121.49 35.03"
          height="3em"
        >
          <g>
            <path d="M2.2,31.54V4.47h14.73v5.26h-8.44v4.97h7.79v5.43h-7.79v5.91h8.44v5.5H2.2Z"/>
            <path d="M20.85,31.54V4.47h14.73v5.26h-8.44v4.97h7.79v5.43h-7.79v5.91h8.44v5.5h-14.73Z"/>
          </g>
          <g>
            <path d="M49.02,24.78l5.16-.19c-.15,2-.9,3.65-2.24,4.94-1.35,1.29-2.98,1.93-4.91,1.93-2.04,0-3.76-.71-5.17-2.13-1.41-1.42-2.11-3.16-2.11-5.22s.71-3.63,2.13-5.02,3.12-2.09,5.11-2.09c1.73,0,3.27.55,4.59,1.64s2.15,2.49,2.48,4.19l-5.27.2c-.45-.59-1.03-.89-1.73-.89-.59,0-1.08.19-1.46.58-.38.39-.57.88-.57,1.48s.2,1.11.61,1.52c.4.41.91.61,1.51.61.88,0,1.51-.51,1.88-1.54Z"/>
            <path d="M61.65,17.29v13.87h-5.21v-13.87h5.21ZM59.06,11.1c.71,0,1.32.25,1.83.74.52.5.77,1.08.77,1.76,0,.72-.24,1.32-.73,1.78-.49.46-1.11.7-1.87.7s-1.38-.23-1.87-.7c-.49-.46-.73-1.06-.73-1.78,0-.68.26-1.26.77-1.76.51-.5,1.12-.74,1.83-.74Z"/>
            <path d="M72.33,17.15v5.57c-.36-.2-.69-.31-.99-.31-.95,0-1.42.72-1.42,2.17v6.58h-5.21v-7.58c0-2,.55-3.6,1.64-4.79,1.09-1.19,2.56-1.79,4.38-1.79.41,0,.94.05,1.59.15Z"/>
            <path d="M82.37,24.78l5.16-.19c-.15,2-.9,3.65-2.24,4.94-1.35,1.29-2.98,1.93-4.91,1.93-2.04,0-3.76-.71-5.17-2.13-1.41-1.42-2.11-3.16-2.11-5.22s.71-3.63,2.13-5.02,3.12-2.09,5.11-2.09c1.73,0,3.27.55,4.59,1.64s2.15,2.49,2.48,4.19l-5.27.2c-.45-.59-1.03-.89-1.73-.89-.59,0-1.08.19-1.46.58-.38.39-.57.88-.57,1.48s.2,1.11.61,1.52c.4.41.91.61,1.51.61.88,0,1.51-.51,1.88-1.54Z"/>
            <path d="M89.81,17.49h5.21v7.83c0,.79.33,1.18.99,1.18s.97-.39.97-1.18v-7.83h5.2v7.74c0,1.8-.6,3.32-1.8,4.56-1.2,1.24-2.66,1.86-4.4,1.86-1.98,0-3.57-.72-4.77-2.16-.94-1.12-1.41-2.68-1.41-4.68v-7.32Z"/>
            <path d="M110.42,17.29v13.87h-5.21v-13.87h5.21ZM107.83,11.1c.71,0,1.32.25,1.83.74.52.5.77,1.08.77,1.76,0,.72-.24,1.32-.73,1.78-.49.46-1.11.7-1.87.7s-1.38-.23-1.87-.7c-.49-.46-.73-1.06-.73-1.78,0-.68.26-1.26.77-1.76.51-.5,1.12-.74,1.83-.74Z"/>
            <path d="M118.11,12.17v5.32h2.34v5.5h-2.34c0,1.1.17,1.86.52,2.28.35.42.99.63,1.91.63v5.47c-.27,0-.47.01-.6.01-1.18,0-2.29-.27-3.33-.82-1.04-.55-1.88-1.29-2.51-2.23-.8-1.2-1.2-2.78-1.2-4.76v-11.4h5.2Z"/>
          </g>
        </svg>
        <span style="margin-left: 1em">a SPICE based circuit simulator</span>
      </div>
    </nav>
    <main>
      <div id="root"></div>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <script type="module" src="./src/index.tsx"></script>
      <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    --></main>
  </body>
</html>