## ~smitop/eigen.fun

f91e5857068d0cf6e82176894fa0f1579cc46867 — Smitty 3 years ago
```add about page
```
```3 files changed, 204 insertions(+), 163 deletions(-)

M public/index.html
A public/style.css
```
`A public/about.html => public/about.html +41 -0`
```@@ 0,0 1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="application-name" content="eigen.fun">
+        <meta name="description" content="All about eigen.fun, an interactive app for exploring linear transformation">
+        <meta name="rating" content="General">
+        <style>
+            h1 {
+                display: block;
+                margin: 0;
+            }
+            body {
+                margin: 8px;
+            }
+        </style>
+    <body>
+        <h1>
+            <a href="/">
+                <span class="title-left">eigen</span>.<span class="title-right">fun</span>
+            </a>
+        </h1>
+        <p>
+            eigen.fun is an interactive website for playing with 2D linear transformations. You can create and play with linear transformations, and see how the plane is morphed by your changes. There are various linear algebra operations you can do to modify the matrix that repersents the current linear transformation. I hope you have fun playing with linear transformations!
+        </p>
+        <p>
+            Drag around the basis vectors to directly change the current transformation. You can also use the toolbar at the top to apply certain matrix actions to the current transformation. There is a point that is initially at (1, 1). It is transformed with the rest of the plane, and can be used to easily see how a transformation affects a single point.
+        </p>
+        <p>
+            You can use eigen.fun to experiment with interesting transformations, and see exactly what moving around the basis vectors does. You can also get a better intuition for what the matrix actions in the toolbar do to the linear transformation.
+        </p>
+    </body>
+</html>

```
`M public/index.html => public/index.html +2 -163`
```@@ 10,169 10,7 @@
<meta name="rating" content="General">
-        <style>
-            /*
-                z-index values:
-                0-9: bottom
-                10-29: canvases
-                30: right on top of canvases
-            */
-            body {
-                margin: 0;
-                font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-                height: 100vh;
-                overflow: hidden;
-                /* prevents back/forward gestures in Chrome */
-                overscroll-behavior: none;
-            }
-            canvas {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                top: 0;
-                left: 0;
-            }
-            h1 {
-                margin: 0;
-                margin: 0.333rem;
-                position: absolute;
-                left: 0;
-                top: 0;
-                text-shadow: 0px 0px 4px white, 0px 0px 4px white, 0px 0px 4px white, 0px 0px 4px #2d2d2d;
-                position: relative;
-                z-index: 30;
-                width: max-content;
-            }
-            .title-left {
-                color: rgb(0, 0, 255);
-            }
-            .title-right {
-                color: rgb(177, 0, 0);
-            }
-            footer {
-                position: absolute;
-                bottom: 0;
-                width: max-content;
-                text-align: center;
-                display: flex;
-                justify-content: center;
-                width: 100%;
-                pointer-events: none;
-            }
-            footer > div {
-                width: max-content;
-                pointer-events: all;
-                background: white;
-                color: black;
-                position: relative;
-                z-index: 30;
-                border: 3px solid black;
-                border-bottom: none;
-            }
-            noscript {
-                margin-top: 3rem;
-                margin-left: 0.5rem;
-                display: block;
-            }
-            #transform-canvas {
-                z-index: 11;
-            }
-            #grid-canvas {
-                z-index: 10;
-            }
-            nav {
-                background-color: black;
-                position: fixed;
-                transform: translateX(-50%);
-                left: 50%;
-                display: flex;
-                z-index: 30;
-                opacity: 0.9;
-                top: 1rem;
-            }
-            nav .action:active {
-                background-color: #00aaff !important;
-            }
-            nav .action.on {
-                background-color: #00cd00;
-            }
-            nav .action.on:hover {
-                background-color: #63f863;
-            }
-            nav .action.on .name, nav .action.on .shortcut {
-                color: black;
-            }
-            nav .action:hover {
-                background-color: hsl(0, 0%, 28%);
-            }
-            nav .action {
-                position: relative;
-                vertical-align: middle;
-                width: 60px;
-                height: 60px;
-                background: transparent;
-                border: none;
-                outline: none;
-                font: inherit;
-                text-align: center;
-                font-size: 20px;
-                color: inherit;
-                white-space: nowrap;
-                cursor: default;
-            }
-            nav .action .name {
-                top: 6px;
-            }
-            nav .action .shortcut {
-                bottom: 6px;
-            }
-            nav .action .shortcut, nav .action .name {
-                position: absolute;
-                left: 50%;
-                transform: translateX(-50%);
-                font-size: 11px;
-                line-height: 11px;
-                color: hsl(0, 0%, 80%);
-            }
-            @media (max-width: 700px) {
-                h1 {
-                    display: none;
-                }
-            }
-            @media (prefers-color-scheme: dark) {
-                nav {
-                    background-color: white;
-                }
-                nav .action .shortcut, nav .action .name {
-                    color: hsl(0, 0%, 20%);
-                }
-                nav .action:hover {
-                    background-color: hsl(0, 0%, 72%);
-                }
-                nav .action:active {
-                    background-color: #00aaff;
-                }
-                body {
-                    background: black;
-                    color: white;
-                }
-                h1 {
-                    text-shadow: 0px 0px 4px #6d6d6d;
-                }
-                .title-left {
-                    color: rgb(194, 194, 255);
-                }
-                .title-right {
-                    color: rgb(255, 215, 215);
-                }
-            }
-        </style>
<!-- TODO: compile JS properly -->
<script src="https://unpkg.com/mathjs@9.3.2/lib/browser/math.js"></script>
<script src="/script.js"></script>

@@ 226,6 64,7 @@
</noscript>
<footer>
<div>
<a href="https://sr.ht/~smitop/eigen.fun">source</a> |
<a href="https://smitop.com">author</a>
</div>

```
`A public/style.css => public/style.css +161 -0`
```@@ 0,0 1,161 @@
+/*
+    z-index values:
+    0-9: bottom
+    10-29: canvases
+    30: right on top of canvases
+*/
+body {
+    margin: 0;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    height: 100vh;
+    overflow: hidden;
+    /* prevents back/forward gestures in Chrome */
+    overscroll-behavior: none;
+}
+canvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+h1 {
+    margin: 0;
+    margin: 0.333rem;
+    position: absolute;
+    left: 0;
+    top: 0;
+    text-shadow: 0px 0px 4px white, 0px 0px 4px white, 0px 0px 4px white, 0px 0px 4px #2d2d2d;
+    position: relative;
+    z-index: 30;
+    width: max-content;
+}
+.title-left {
+    color: rgb(0, 0, 255);
+}
+.title-right {
+    color: rgb(177, 0, 0);
+}
+footer {
+    position: absolute;
+    bottom: 0;
+    width: max-content;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    pointer-events: none;
+}
+footer > div {
+    width: max-content;
+    pointer-events: all;
+    background: white;
+    color: black;
+    position: relative;
+    z-index: 30;
+    border: 3px solid black;
+    border-bottom: none;
+}
+noscript {
+    margin-top: 3rem;
+    margin-left: 0.5rem;
+    display: block;
+}
+#transform-canvas {
+    z-index: 11;
+}
+#grid-canvas {
+    z-index: 10;
+}
+nav {
+    background-color: black;
+    position: fixed;
+    transform: translateX(-50%);
+    left: 50%;
+    display: flex;
+    z-index: 30;
+    opacity: 0.9;
+    top: 1rem;
+}
+nav .action:active {
+    background-color: #00aaff !important;
+}
+nav .action.on {
+    background-color: #00cd00;
+}
+nav .action.on:hover {
+    background-color: #63f863;
+}
+nav .action.on .name, nav .action.on .shortcut {
+    color: black;
+}
+nav .action:hover {
+    background-color: hsl(0, 0%, 28%);
+}
+nav .action {
+    position: relative;
+    vertical-align: middle;
+    width: 60px;
+    height: 60px;
+    background: transparent;
+    border: none;
+    outline: none;
+    font: inherit;
+    text-align: center;
+    font-size: 20px;
+    color: inherit;
+    white-space: nowrap;
+    cursor: default;
+}
+nav .action .name {
+    top: 6px;
+}
+nav .action .shortcut {
+    bottom: 6px;
+}
+nav .action .shortcut, nav .action .name {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 11px;
+    line-height: 11px;
+    color: hsl(0, 0%, 80%);
+}
+@media (max-width: 700px) {
+    h1 {
+        display: none;
+    }
+}
+@media (prefers-color-scheme: dark) {
+    nav {
+        background-color: white;
+    }
+    nav .action .shortcut, nav .action .name {
+        color: hsl(0, 0%, 20%);
+    }
+    nav .action:hover {
+        background-color: hsl(0, 0%, 72%);
+    }
+    nav .action:active {
+        background-color: #00aaff;
+    }
+    body {
+        background: black;
+        color: white;
+    }
+    h1 {
+        text-shadow: 0px 0px 4px #6d6d6d;
+    }
+    .title-left {
+        color: rgb(194, 194, 255);
+    }
+    .title-right {
+        color: rgb(255, 215, 215);
+    }
+}<
\ No newline at end of file

```