v1.0.0

Patitotective · Aug 18, 2024 · a0a7bc7 · a0a7bc7
1 parent 4900b45
commit a0a7bc7
Show file tree

Hide file tree

Showing 29 changed files with 9,036 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,21 @@
 # grado
-This website implements 2D cinematic simulations using `matter-js`.
+This website implements a projectile motion simulation.
 
 ## Features
-- You can change the canon's initial velocity and angle with the mouse or keyboard
-- You can see the total time and height in real time
-- You can see the position, velocity and time of any point in the trajectory as well as the first, highest and last point
-- You can see the velocity magnitude with arrows in real time
+- Physics with `matter-js`.
+- Equations with `MathJax`.
 
-## Building
-To build the frontend, run:
-```
-nimble frontend
-```
-It will generate a `frontend.js` file in `public/js`.
+## Files
+- `dist_en`: The website with English as the default language.
+- `dist_es`: The website with Spanish as the default language.
 
-To build the backend, run:
+## Building
+To build the html page, run:
 ```
-nimble build
+nimble htmlpage
 ```
-It will generate a binary `app` (or `app.exe`) that will host the page locally.
 
-If you want to build and run the backend, run:
-```
-nimble run
-```
+## Post processing
+1. Babel Formatter with https://codifyformatter.org/babel-formatter.
+2. JS Minifier with https://www.toptal.com/developers/javascript-minifier.
 
diff --git a/dist_en/app.js b/dist_en/app.js
diff --git a/dist_en/img/canon.png b/dist_en/img/canon.png
diff --git a/dist_en/img/canonBase.png b/dist_en/img/canonBase.png
diff --git a/dist_en/img/canonPlatform.png b/dist_en/img/canonPlatform.png
diff --git a/dist_en/img/favicon.ico b/dist_en/img/favicon.ico
diff --git a/dist_en/index.html b/dist_en/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Parabola</title>
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/x-icon" href="./img/favicon.ico">
+
+  <!-- Bootstrap and FontAwesome -->
+  <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> -->
+  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
+
+  <!-- Google Fonts -->
+  <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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,300,1,0" />
+
+  <!-- My Custom Css -->
+  <link rel="stylesheet" type="text/css" href="./style.css">
+  <!-- <link rel="stylesheet" type="text/css" href="/public/css/spectre/dist/spectre.min.css"> -->
+  <!-- <link rel="stylesheet" type="text/css" href="/public/css/spectre/dist/spectre-icons.min.css"> -->
+
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=$ ga"></script> -->
+  <!-- <script> -->
+  <!--   window.dataLayer = window.dataLayer || []; -->
+    <!-- function gtag(){dataLayer.push(arguments);} -->
+    <!-- gtag('js', new Date()); -->
+
+    <!-- gtag('config', '$ ga'); -->
+  <!-- </script> -->
+
+</head>
+
+<body>
+  <div id="ROOT"></div>
+  <!-- Bootstrap -->
+  <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> -->
+
+  <!-- Matter.js -->
+  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js" integrity="sha512-0z8URjGET6GWnS1xcgiLBZBzoaS8BNlKayfZyQNKz4IRp+s7CKXx0yz7Eco2+TcwoeMBa5KMwmTX7Kus7Fa5Uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+  <!-- Matter.js wrap plugin -->
+  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/build/matter-wrap.min.js" integrity="sha256-5Joj4yN1bnDB2NEyA2XIM5FanLSGfd2q6Jvpdh399gs=" crossorigin="anonymous"></script>
+
+  <!-- Pollyfill -->
+  <!-- <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> -->
+
+  <!-- Mathjax -->
+  <script>
+    MathJax = {
+      loader: {load: ['a11y/explorer']}, 
+      startup: {
+        typeset: false,
+        // ready: () => {
+          // MathJax.startup.defaultReady();
+        // },
+      },
+      options: {
+        // enableEnrichment: true,
+        // enableExplorer: false,                // set to false to disable the explorer
+        // enableComplexity: false,       // set to false to disable complexity computations
+        enableMenu: true,          // set to false to disable the menu
+        menuOptions: {
+          settings: {
+            zoom: 'DoubleClick',        // or 'Click' or 'DoubleClick' as zoom trigger
+            zscale: '200%',        // zoom scaling factor
+            // assistiveMml: false,    // true if hidden assistive MathML should be generated for screen readers
+            // collapsible: false,    // true if complex math should be collapsible
+            // explorer: false,       // true if the expression explorer should be active
+            // texHints: false,        // put TeX-related attributes on MathML
+            // semantics: false,      // put original format in <semantic> tag in MathM
+          },
+        }
+      }
+    }
+  </script>
+
+  <script defer id="MathJax-script" src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-chtml.js"></script>
+
+  <!-- Frontend   -->
+  <script defer src="./app.js"></script> <!-- ?t=$ timestamp -->
+</body> 
+</html>
+