studio.html

<!doctype html>

<!--
 * ════════════════════════════════════════════════════════════════
 *  FEAScript Website
 *  Finite Element Simulation in JavaScript
 *  Version: 0.3.1 | https://feascript.com
 *  MIT License © 2023–2026 FEAScript
 * ════════════════════════════════════════════════════════════════
-->

<html lang="en" class="site">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>FEAScript Studio</title>
    <link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
    <meta
      name="description"
      content="FEAScript Studio is a browser-based environment for creating and managing engineering applications powered by FEAScript"
    />
    <meta
      name="keywords"
      content="finite elements, fem, galerkin, cfd, computational mechanics, javascript, FEAScript Studio, engineering applications, browser-based simulation, cloud"
    />

    <script>
      // Apply stored theme before first paint and enable JS-only styles
      (function () {
        var d = document.documentElement;
        d.className += " js";
        try {
          var t = localStorage.getItem("feascript-theme");
          if (t === "light" || t === "dark") d.setAttribute("data-theme", t);
        } catch (e) {}
      })();
    </script>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&family=Roboto:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <link href="feascript-website.css" rel="stylesheet" type="text/css" />
  </head>

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-1JPK0KLEC9"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());

    gtag("config", "G-1JPK0KLEC9");
  </script>

  <body>
    <a class="skip-link" href="#main">Skip to content</a>

    <header class="site-nav">
      <div class="nav-inner">
        <div class="nav-group">
          <a class="nav-brand" href="index.html">
            <svg viewBox="14 79 242 242" aria-hidden="true">
              <polygon points="17,254 190,82 253,317" fill="#d4aa00" />
            </svg>
            <span
              >FEAScrip<svg class="wm-t" viewBox="0 0 30 115" fill="none" stroke="currentColor">
                <path stroke-width="5.9" d="M15 0V100A11.4 11.4 0 0 0 26.4 111.4H29.5" />
                <path stroke-width="5.4" d="M0.4 16.9H29.6" /></svg
            ></span>
          </a>
          <nav class="nav-links label" aria-label="Main">
            <a class="nav-link" href="index.html#whyusefeascript"><span>Why FEAScript</span></a>
            <a class="nav-link" href="index.html#howtousefeascript"><span>How to use</span></a>
            <a class="nav-link" href="index.html#features"><span>Features</span></a>
            <a class="nav-link" href="index.html#tutorials"><span>Tutorials</span></a>
            <a class="nav-link" href="index.html#licensing"><span>Licensing</span></a>
            <a class="nav-link nav-link-out" href="https://docs.feascript.com"><span>Documentation</span></a>
            <a class="nav-link nav-link-out" href="studio.html"><span>Studio</span></a>
            <a class="nav-link nav-link-out nav-link-lab" href="https://lab.feascript.com/"><span>Tri's Lab</span></a>
          </nav>
        </div>

        <div class="nav-group">
          <a
            class="nav-icon nav-github"
            href="https://github.com/FEAScript/FEAScript-core"
            aria-label="FEAScript on GitHub"
            title="FEAScript on GitHub"
          >
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path
                d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
              />
            </svg>
            <span id="github-stars" class="label"></span>
          </a>
          <button
            id="theme-toggle"
            class="nav-icon theme-toggle"
            type="button"
            aria-label="Toggle colour theme"
          >
            <svg
              class="icon-moon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
            >
              <path
                d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
              />
            </svg>
            <svg
              class="icon-sun"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
            >
              <circle cx="12" cy="12" r="4" />
              <path
                d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
              />
            </svg>
          </button>
          <a class="nav-cta" href="index.html#howtousefeascript">Get started</a>
          <button
            id="nav-burger"
            class="nav-icon nav-burger"
            type="button"
            aria-label="Open menu"
            aria-expanded="false"
            aria-controls="mobile-nav"
          >
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              aria-hidden="true"
            >
              <path d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
      </div>
      <nav id="mobile-nav" class="mobile-nav" aria-label="Mobile">
        <a href="index.html#whyusefeascript">Why use FEAScript</a>
        <a href="index.html#howtousefeascript">How to use FEAScript</a>
        <a href="index.html#features">Features</a>
        <a href="index.html#tutorials">Tutorials</a>
        <a href="index.html#licensing">Licensing</a>
        <a class="nav-link-out" href="https://docs.feascript.com">Documentation</a>
        <a class="nav-link-out" href="studio.html">FEAScript Studio</a>
        <a class="nav-link-out nav-link-lab" href="https://lab.feascript.com/">Tri's Lab by FEAScript</a>
      </nav>
    </header>

    <main id="main">
      <section class="section">
        <div class="section-frame">
          <div class="eyebrow label">
            <p data-doc-bar>FEAScript Studio</p>
          </div>

          <div class="section-head doc-head">
            <h1>Turn FEAScript models into <span class="accent">web applications.</span></h1>
            <p>
              FEAScript Studio is a browser-based environment for creating and managing engineering
              applications powered by FEAScript. With FEAScript Studio you will be able to turn FEAScript
              models into focused applications with controlled inputs and interactive simulation results.
            </p>
          </div>

          <div class="doc">
            <p class="highlight-container">
              <span class="tag">In development</span>
              <strong>FEAScript Studio is currently under development.</strong> Join the waitlist below to
              receive updates, suggest engineering workflows and participate in early testing.
            </p>

            <div class="eyebrow label" id="waitlist" role="heading" aria-level="2">
              <p>Join the waitlist</p>
            </div>
            <p>
              By joining the waitlist, you will also be subscribed to our mailing list to receive project
              updates and news.
            </p>

            <form
              class="maillist-form"
              action="https://feascript.us10.list-manage.com/subscribe/post?u=83b4dec50b84e136c2e82c6a4&amp;id=4aa4a60f27&amp;f_id=009362e3f0"
              method="post"
              id="mc-embedded-subscribe-form"
              name="mc-embedded-subscribe-form"
              target="_blank"
            >
              <label class="label" for="mce-EMAIL">Email address</label>
              <div class="maillist-row">
                <input type="email" name="EMAIL" id="mce-EMAIL" autocomplete="email" required value="" />
                <input
                  type="submit"
                  name="subscribe"
                  id="mc-embedded-subscribe"
                  class="btn btn-solid"
                  value="Subscribe"
                />
              </div>

              <div id="mce-responses" aria-live="polite">
                <div class="response" id="mce-error-response" style="display: none"></div>
                <div class="response" id="mce-success-response" style="display: none"></div>
              </div>

              <!-- Anti-bot protection -->
              <div class="maillist-honeypot" aria-hidden="true">
                <input type="text" name="b_83b4dec50b84e136c2e82c6a4_4aa4a60f27" tabindex="-1" value="" />
              </div>
            </form>

            <div class="eyebrow label" role="heading" aria-level="2">
              <p>Key capabilities</p>
            </div>
            <div class="grid grid-3">
              <article class="cell cell-pad">
                <h3>Focused engineering applications</h3>
                <p class="desc">Turn FEAScript models into purpose-specific web applications.</p>
              </article>
              <article class="cell cell-pad">
                <h3>Browser-based simulation</h3>
                <p class="desc">
                  Run supported calculations without requiring the application user to install any desktop
                  software.
                </p>
              </article>
              <article class="cell cell-pad">
                <h3>Controlled inputs and outputs</h3>
                <p class="desc">
                  Choose which model parameters users can change and which results they receive.
                </p>
              </article>
              <article class="cell cell-pad">
                <h3>Interactive results</h3>
                <p class="desc">
                  Present numerical outputs and simulation visualizations through clear, application-specific
                  interfaces.
                </p>
              </article>
              <article class="cell cell-pad">
                <h3>Sharing and embedding</h3>
                <p class="desc">
                  Publish supported applications through a web link or embed them into another website.
                </p>
              </article>
              <article class="cell cell-pad">
                <h3>JavaScript access</h3>
                <p class="desc">
                  Use FEAScript Core directly for advanced model and application development.
                </p>
              </article>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        <div class="footer-grid">
          <div class="footer-brand">
            <a class="footer-wordmark" href="index.html">
              <svg viewBox="14 79 242 242" aria-hidden="true">
                <polygon points="17,254 190,82 253,317" fill="#d4aa00" />
              </svg>
              <span
                >FEAScrip<svg class="wm-t" viewBox="0 0 30 115" fill="none" stroke="currentColor">
                  <path stroke-width="5.9" d="M15 0V100A11.4 11.4 0 0 0 26.4 111.4H29.5" />
                  <path stroke-width="5.4" d="M0.4 16.9H29.6" /></svg
              ></span>
            </a>
            <p class="footer-tagline">
              Finite element simulation in JavaScript, for the browser and Node.js.
            </p>
            <a class="footer-mail" href="mailto:info@feascript.com">info@feascript.com</a>
          </div>
          <nav class="footer-col" aria-label="Platform">
            <h2>Platform</h2>
            <ul>
              <li><a href="index.html#howtousefeascript">Get started</a></li>
              <li><a href="https://www.npmjs.com/package/feascript">npm package</a></li>
              <li><a href="studio.html">FEAScript Studio</a></li>
              <li><a href="sponsors.html">Sponsors</a></li>
            </ul>
          </nav>
          <nav class="footer-col" aria-label="Resources">
            <h2>Resources</h2>
            <ul>
              <li><a href="https://docs.feascript.com">Documentation</a></li>
              <li><a href="index.html#tutorials">Tutorials</a></li>
              <li><a href="https://lab.feascript.com/">Tri's Lab</a></li>
              <li><a href="https://blog.feascript.com/">Blog</a></li>
              <li><a href="https://github.com/FEAScript/FEAScript-core/issues">Support</a></li>
            </ul>
          </nav>
          <nav class="footer-col" aria-label="Community">
            <h2>Community</h2>
            <ul>
              <li><a href="https://github.com/FEAScript/FEAScript-core">GitHub</a></li>
              <li><a href="https://discord.gg/3DVjNcuW4f">Discord</a></li>
              <li><a href="https://www.youtube.com/@FEAScript">YouTube</a></li>
              <li><a href="https://www.linkedin.com/company/feascript/">LinkedIn</a></li>
              <li><a href="https://bsky.app/profile/feascript.com">Bluesky</a></li>
            </ul>
          </nav>
        </div>
        <div class="footer-bottom">
          <span>&#169; 2023-<span id="currentYear"></span> FEAScript</span>
          <span>Core: MIT license &middot; Website: CC BY 4.0</span>
        </div>
      </div>
    </footer>

    <script src="feascript-website.js"></script>
  </body>
</html>