-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
108 lines (103 loc) · 4.72 KB
/
index.html
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
<!DOCTYPE html>
<!--
This file is part of muntineer, which visualizes window-pane algebra.
Copyright (c) 2021 Eliah Kagan
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
-->
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=.86">
<title>muntineer</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap">
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/selawik">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.3/katex.min.css"
integrity="sha512-6VMVcy7XQNyarhVuiL50FzpgCFKsyTd6YO93aaQEyET+BNaWvj0IgKR86Bf6+AmWczxAcSnL+JGjo+iStgO1gQ=="
crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
integrity="sha512-TktJbycEG5Van9KvrSHFUcYOKBroD7QCYkEe73HAutODCw9QTFcvF6fuxioYM1h6THNudK1GjVidazj6EslK4A=="
crossorigin="anonymous">
<link rel="stylesheet" href="muntineer.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.3/katex.min.js"
integrity="sha512-b9IKj4LCNrtCPBhceRcoYOHWW/S2q9fpl7iAJlyxYpykRj1SKM7FE9+E0NEnJ8g8ni47LBr2GuX9qzg/xeuwzQ=="
crossorigin="anonymous"
defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.3/contrib/auto-render.min.js"
integrity="sha512-iWiuBS5nt6r60fCz26Nd0Zqe0nbk1ZTIQbl3Kv7kYsX+yKMUFHzjaH2+AnM6vp2Xs+gNmaBAVWJjSmuPw76Efg=="
crossorigin="anonymous"
defer></script>
<script src="render-katex.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"
integrity="sha512-I+rKw3hArzZIHzrkdELbKqrXfkSvw/h0lW/GgB8FThaBVz2e5ZUlSW8kY8v3q6wq37eybIwyufkEZxe4qSlGcg=="
crossorigin="anonymous"
defer></script>
<script src="muntineer.js" defer></script>
</head>
<body>
<a class="github-fork-ribbon"
href="https://github.com/EliahKagan/muntineer"
data-ribbon="Fork me on GitHub"
title="Fork me on GitHub">Fork me on GitHub</a>
<h1>muntineer</h1>
<p><b>visualizing window-pane algebra</b></p>
<main>
<p>$$Np + 2c + (N - 1)m = w$$</p>
<form>
<fieldset data-shortname="scale">
<label for="scale">Scale (for drawing):</label>
<input id="scale" type="text" value=".4">
</fieldset>
<fieldset data-shortname="total height">
<label for="totalHeight">Total window height:</label>
<input id="totalHeight" type="text" value="1050">
</fieldset>
</form>
<div id="drawing-div"></div>
<p id="statusMessage" class="status bad">
<strong>
It looks like muntineer may not be compatible with your browser.
☹
</strong>
</p>
<p>
The width of each pane ($p$) is
<strong id="paneWidth" class="result bad">? ? ?</strong>.
Adjust these variables to change it:
</p>
<form>
<fieldset data-shortname="$w$">
<label for="totalWidth">Total window width ($w$):</label>
<input id="totalWidth" type="text" value="1800">
</fieldset>
<fieldset data-shortname="$N$">
<label for="panes">Number of panes ($N$):</label>
<input id="panes" type="text" value="3">
</fieldset>
<fieldset data-shortname="$c$">
<label for="casing">Width of casing ($c$):</label>
<input id="casing" type="text" value="40">
</fieldset>
<fieldset data-shortname="$m$">
<label for="muntin">Width of muntin ($m$):</label>
<input id="muntin" type="text" value="40">
</fieldset>
</form>
</main>
</body>
</html>