mathflow/index.html at master · mathflowjs/mathflow · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Mathflow</title>
        <style>
            :root {
                font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
                line-height: 1.5;
                font-weight: 400;

                color-scheme: light dark;
                color: rgba(255, 255, 255, 0.87);
                background-color: #242424;

                font-synthesis: none;
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            @media (prefers-color-scheme: light) {
                :root {
                    color: #213547;
                    background-color: #ffffff;
                }
            }

            *,
            *::after,
            *::before {
                box-sizing: border-box;
            }

            body {
                margin: 0;
                display: flex;
                place-items: center;
                min-width: 320px;
                min-height: 100vh;
            }

            main {
                width: 100%;
                max-width: 800px;
                margin: 0 auto;
                padding: 2rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            main > * {
                width: 100%;
            }

            textarea {
                width: 100%;
                min-height: 45dvh;
                padding: 1rem;
                resize: vertical;
                font-size: 1.1rem;
            }

            details,
            summary {
                cursor: default;
            }

            button {
                padding: 0.5rem 1rem;
                width: 50%;
                margin: 1rem auto;
            }

            #error {
                display: none;
            }

            #error.active {
                display: block;
                padding: 1rem 0;
                color: rgb(243, 96, 96);
                border-radius: 15px;
            }
        </style>
    </head>

    <body>
        <main>
            <h1>Mathflow | Demo</h1>

            <div>
                <h3>Input math expression:</h3>
                <textarea
                    id="input"
                    autocapitalize="off"
                    autocorrect="off"
                    autofocus
                    spellcheck="false"
                ></textarea>
                <button id="solve">Solve</button>
            </div>

            <div>
                <h3>Solution:</h3>
                <div id="solution"></div>
            </div>

            <p id="error"></p>
        </main>

        <script type="module" src="./demo/main.ts"></script>
    </body>
</html>