~smitop/eigen.fun

f91e5857068d0cf6e82176894fa0f1579cc46867 — Smitty 3 years ago 2d9ba0f 
add about page
patch browse .tar.gz 
3 files changed, 204 insertions(+), 163 deletions(-)

A public/about.html
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">
    <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>About eigen.fun</title>
        <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">
        <link rel="author" href="https://smitop.com/">
        <link rel="icon" href="/logo.svg">
        <link rel="stylesheet" href="/style.css">
        <style>
            h1 {
                display: block;
                margin: 0;
            }
            body {
                margin: 8px;
            }
        </style>
    </head>
    <body>
        <h1>
            About 
            <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">
        <link rel="author" href="https://smitop.com/">
        <link rel="icon" href="/logo.svg">
        <style>
            /*
                z-index values:
                0-9: bottom
                10-29: canvases
                30: right on top of canvases
            */
            body {
                margin: 0;
                padding: 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;
                padding-left: 1rem;
                padding-right: 1rem;
                background: white;
                color: black;
                border-top-left-radius: 0.5rem;
                border-top-right-radius: 0.5rem;
                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;
                border-radius: 4px;
            }
            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>
        <link rel="stylesheet" href="/style.css">
        <!-- 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="/about.html">about</a> |
                <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;
    padding: 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;
    padding-left: 1rem;
    padding-right: 1rem;
    background: white;
    color: black;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    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;
    border-radius: 4px;
}
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