FLAPJS-WebApp/index.html at master · flapjs/FLAPJS-WebApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Metadata -->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#07889B">
    <!-- Search Metadata (Needs to be short!) -->
    <meta name="description" content="An intuitive web app to help you explore and construct formal languages and automata with real-time analysis and error checking.">
    <!-- An intuitive web app to help you explore what it means to be computable. Experiment and construct formal languages from finite automata to Turing machines with real-time analysis and error checking. From its humble beginnings as a small tool built by a determined CSE 105 homework group at UC San Diego inspired by JFLAP, it has continued to still be developed by the students, for the students. -->
    <meta name="keywords" content="flap,flapjs,FLAPJS,JFLAP,Computation Theory,CSE 105,UCSD">
    <!-- Title -->
    <title id="window-title">Flap.js - Formal Languages and Automata Package in JavaScript</title>
    <!-- Default styling -->
    <style>
    html, body { width: 100%; height: 100%; padding: 0; margin: 0;
      font-family: 'Lato', sans-serif;
      /* Disable drag-down reload behavior */
      overscroll-behavior-y: contain;
    }
    ._center { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
      display: flex; justify-content: center; align-items: center; }
    </style>
    <!-- Loading styles -->
    <style>
    /** Loading styles **/
    #root:not(:empty) + #loading { opacity: 0; visibility: hidden; }
    #loading { z-index: 9998; pointer-events: none; background: #FFF;
      transition: opacity 0.3s ease, visibility 0.3s ease; }
    #loading ._spinner > div {
      display: inline-block; width: 24px; height: 24px; margin: 3px;
      background-color: #333; border-radius: 50%;
      animation: _spinner-bouncedelay 1.4s 0s infinite ease-in-out both; }
    #loading ._spinner > div:first-child { animation-delay: 0.50s; }
    #loading ._spinner > div:nth-child(2) { animation-delay: 0.66s; }
    #loading ._spinner > div:last-child { animation-delay: 0.82s; }
    @keyframes _spinner-bouncedelay { 0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); } }
    /** Error styles **/
    #error { z-index: 9999; pointer-events: none; top: 64px; }
    </style>
    <!-- Import Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Overpass+Mono" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
  </head>
  <body>
    <!-- React Root -->
    <div id="root"></div>

    <!-- Loading Spinner -->
    <div class="_center" id="loading">
      <div class="_spinner"><div></div><div></div><div></div></div>
    </div>

    <!-- JavaScript Support -->
    <div class="_center" id="error">
      <noscript>You need to enable JavaScript to run this app.</noscript>
    </div>

    <!-- ServiceWorker -->
    <script>
    window.isUpdateAvailable = new Promise((resolve, reject) => {
      if ('serviceWorker' in navigator)
      {
        window.addEventListener('load', () => {
          navigator.serviceWorker
            .register('./serviceWorker.js', {scope: './'})
            .then(registration => {
              console.log("[ServiceWorker] Registration successful: ", registration.scope);
              registration.addEventListener('updatefound', foundEvent => {
                const installingWorker = registration.installing;
                installingWorker.addEventListener('statechange', changeEvent => {
                  if (installingWorker.state === 'installed')
                  {
                    //Found new update available
                    if (navigator.serviceWorker.controller) resolve(true);
                    //No update available
                    else resolve(false);
                  }
                });
              });
            })
            .catch(err => console.error("[ServiceWorker] Registration failed: ", err));
        });
      }
    });
    </script>

    <!-- Library files -->
    <script src="./dist/script/I18N.js" type="application/javascript"></script>
    <script>
      //TODO: this should be only lang/ when have server
      I18N.baseUrl = "dist/lang/";
      I18N.fetchLanguageFile("en_us");
    </script>

    <!-- Entry point -->
  <script type="text/javascript" src="dist/runtime~app.bundle.fe5fb2b9acc2229f3c3c.js"></script><script type="text/javascript" src="dist/styles.bundle.87da10efad92e7c5d935.js"></script><script type="text/javascript" src="dist/vendors.bundle.7d18ef29afd88451cf9c.js"></script><script type="text/javascript" src="dist/app.bundle.58797c13c1199645c9b6.js"></script></body>
</html>