-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
261 lines (232 loc) · 16.2 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html>
<html lang="de-CH">
<head>
<title>Math Tools</title>
<meta name="mobile-web-app-title" content="Math Tools">
<meta name="apple-mobile-web-app-title" content="Math Tools">
<link rel="icon" type="image/png" href="assets/images/logo_256.png">
<link rel="shortcut icon" type="image/png" href="assets/images/logo_256.png">
<link rel="apple-touch-icon" href="assets/images/logo_256.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/images/logo_256.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/logo_256.png">
<link rel="apple-touch-icon" sizes="167x167" href="assets/images/logo_256.png">
<link rel="canonical" href="https://math.neodym.dev">
<script src="https://unpkg.com/akar-icons-fonts"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="assets/functions.js"></script>
<script src="assets/calc.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta charset="UTF-8">
<meta name="description" content="Eine Sammlung von diversen Mathematik Tools, die dir helfen sollen den Alltag zu erleichtern.">
<meta name="author" content="Michi von Ah">
<meta name="keywords" content="Math Tools, math-tools, math.neodym.dev, math tools app, math app, math-tools-app, Mathe Tools, Mathematik Tools">
<meta name="robots" content="index">
<meta http-equiv="expires" content="43200">
<meta property="og:title" content="Math Tools">
<meta property="og:description" content="Eine Sammlung von diversen Mathematik Tools, die dir helfen sollen den Alltag zu erleichtern.">
<meta property="og:image" content="assets/images/logo_256.png">
<meta property="og:image:type" content="image/png">
<meta property="og:url" content="https://math.neodym.dev">
<meta property="og:site_name" content="Math Tools">
<meta property="twitter:title" content="Math Tools">
<meta property="twitter:description" content="Eine Sammlung von diversen Mathematik Tools, die dir helfen sollen den Alltag zu erleichtern.">
<meta property="twitter:image" content="assets/images/logo_256.png">
<meta name="twitter:image:alt" content="Math Tools">
<meta name="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#3498db">
<meta name="mobile-web-app-status-bar-style" content="#3498db">
<meta name="apple-mobile-web-app-status-bar-style" content="#3498db">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="manifest.json">
<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=Mali:wght@300;400;500;600;700&family=Open+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script defer src="https://data.mchvnh.ch/script.js" data-website-id="35626273-0d1a-4458-834f-1d21a8e84bab"></script>
</head>
<body>
<div id="loadingscreen">
<div id="loader"></div>
</div>
<div id="openNavbar" onclick="toggleNavigation('show')">
<i class="ai-chevron-right"></i>
</div>
<div id="content">
<div id="toolNavigation">
<div id="toolList">
<div id="toolTitle">
<img src="assets/images/logo.svg" alt="Logo" title="Logo">
<p>Math Tools</p>
</div>
<input type="radio" id="welcome" class="toolCategoryInput" name="toolCategory" onchange="changeTool();" checked>
<label for="welcome" class="toolCategoryLabel"><i class="ai-victory-hand"></i> Willkommen</label>
<input type="radio" id="tool001" class="toolCategoryInput" name="toolCategory" onchange="changeTool();">
<label for="tool001" class="toolCategoryLabel"><i class="ai-calculator"></i> Zahlensysteme</label>
<input type="radio" id="tool002" class="toolCategoryInput" name="toolCategory" onchange="changeTool();">
<label for="tool002" class="toolCategoryLabel"><i class="ai-home"></i> Flächen/Volumen</label>
<input type="radio" id="tool003" class="toolCategoryInput" name="toolCategory" onchange="changeTool();">
<label for="tool003" class="toolCategoryLabel"><i class="ai-box"></i> Phytagoras</label>
<input type="radio" id="tool004" class="toolCategoryInput" name="toolCategory" onchange="changeTool();">
<label for="tool004" class="toolCategoryLabel"><i class="ai-globe"></i> IP-Rechner</label>
<input type="radio" id="tool005" class="toolCategoryInput" name="toolCategory" onchange="changeTool();">
<label for="tool005" class="toolCategoryLabel"><i class="ai-key"></i> Kryptografie</label>
<input type="radio" id="tool999" class="toolCategoryInput" name="toolCategory" onchange="changeTool();">
<label for="tool999" class="toolCategoryLabel"><i class="ai-paper"></i> Rechtliches</label>
</div>
</div>
<div id="toolContainer">
<div id="willkommen" class="tool" data-toolid="welcome">
<h2><var id="greeting">Hallo!</var> <i class="ai-victory-hand"></i></h2>
<p>Herzlich Willkommen auf math.neodym.dev. Das wird eine Sammlung von diversen Mathematik Tools. Es soll dazu dienen dir den Alltag zu erleichtern.</p>
<p class="notice">Links siehst du eine Liste mit allen bisher vorhanden Tools. Klicke darauf um es zu öffnen! Die Liste kann ausserdem mit dem kleinen Icon unten links vergrössert und verkleinert werden.</p>
<img src="assets/images/math_background.svg" alt="Mathematische Berechnungen und Formeln" title="Mathematische Berechnungen und Formeln">
<p>Was noch alles für dieses Tool geplant ist, siehst du auf dem <a href="https://github.com/michivonah/math-tools" class="link">GitHub Repo</a> zu dieser Website.</p>
<p>Wenn dir ein Tool fehlt, dann erstelle ein Issue bei GitHub.</p>
<p>Wenn du mehr über mich erfahren willst, besuche meine Website auf <a href="https://michivonah.ch" class="link">michivonah.ch</a>.</p>
<p>Und nun, viel Spass mit den Tools. ;-)</p>
</div>
<div id="zahlensysteme" class="tool" data-toolid="tool001">
<h2>Zahlensysteme</h2>
<p>Hier kannst du Zahlen zwischen verschiedenen Zahlensystemen umwandeln.</p>
<p class="notice">Hexadezimal in anderen Zahlensysteme funktioniert momentan nicht.</p>
<input id="tool001DEZ" type="number" placeholder="Dezimal (Beispiel: 123)" onkeyup="tool001('dez')">
<button class="copyBtn" onclick="copyClipboard('tool001DEZ')"><i class="ai-copy"></i></button>
<input id="tool001BIN" type="number" placeholder="Binär (Beispiel: 0011)" onkeyup="tool001('bin')">
<button class="copyBtn" onclick="copyClipboard('tool001BIN')"><i class="ai-copy"></i></button>
<input id="tool001HEX" type="text" placeholder="Hexadezimal (Beispiel: 12A)" onkeyup="tool001('hex')" pattern="[A-Fa-f0-9]{99}" disabled>
<button class="copyBtn" onclick="copyClipboard('tool001HEX')"><i class="ai-copy"></i></button>
<h3>Wie es funktioniert</h3>
<p>Hier erfährst du, wie die Umrechnung von einer Zahl aus einem beliebigen Zahlensystem ins Dezimalsystem (Basis 10) umgerechnet werden kann.</p>
<p class="mathPaper">14C<sub>16</sub> = ??<sub>10</sub> <br>C = 12<br>12 * 16<sup>0</sup> = 12<br>4 * 16<sup>1</sup> = 64<br>1 * 16<sup>2</sup> = 256<br>12 + 64 + 256 = <var class="result">332</var></p>
<p>Und nun wie eine Dezimalzahl in ein beliebiges Zahlensystem umgerechnet werden kann:</p>
<p class="mathPaper">332<sub>10</sub> = ??<sub>16</sub><br>332 / 16 = 20 Rest: C, Rest berechnen: 332 - (16 * 20) = 12 -> C<br>20 / 16 = 1 Rest: 4<br>1 / 16 = 0 Rest: 1<br>Rest zusammensetzen 1, 4, C = <var class="result">14C</var></p>
</div>
<div id="flaechen" class="tool" data-toolid="tool002">
<h2>Flächen & Volumen</h2>
<p>Fülle die Felder aus, um die entsprechende Fläche oder das Volumen zu berechnen. Funktioniert für Quadrate, Rechtecke und Quader.</p>
<input id="tool002lenght" type="number" placeholder="Länge" onkeyup="tool002()">
<input id="tool002width" type="number" placeholder="Breite" onkeyup="tool002()">
<input id="tool002height" type="number" placeholder="Höhe" onkeyup="tool002()">
<input id="tool002result" type="number" placeholder="Ergebnis (Beispiel: 2x3x4 = 24)" disabled>
<button class="copyBtn" onclick="copyClipboard('tool002result')"><i class="ai-copy"></i></button>
</div>
<div id="phytagoras" class="tool" data-toolid="tool003">
<h2>Phytagoras √</h2>
<p>Hier kannst du den Phytagoras berechnen.</p>
<img src="assets/images/phytagoras.svg" alt="Phytagoras" title="Phytagoras">
<input id="tool003A" type="number" placeholder="Kathete A" onkeyup="tool003('A')">
<button class="copyBtn" onclick="copyClipboard('tool003A')"><i class="ai-copy"></i></button>
<input id="tool003B" type="number" placeholder="Kathete B" onkeyup="tool003('B')">
<button class="copyBtn" onclick="copyClipboard('tool003B')"><i class="ai-copy"></i></button>
<input id="tool003C" type="number" placeholder="Hypotenuse C" onkeyup="tool003('C')" disabled>
<button class="copyBtn" onclick="copyClipboard('tool003C')"><i class="ai-copy"></i></button>
</div>
<div id="ipRechner" class="tool" data-toolid="tool004">
<h2><i class="ai-globe"></i> IP-Rechner</h2>
<p>Hiermit können IP-Adressen, Subnetzmasken und weitere IP-Konfigurationen berechnet werden. Die Felder, welche leer gelassen werden, werden berechnet.</p>
<p class="notice">Hinweis: Momentan funktioniert die Umrechnung nur von den Felder IP-Adresse & CIDR in die anderen Formate. Die Umrechnung von allem nach allem kommt noch.</p>
<input id="tool004IP" type="text" placeholder="IP-Adresse (192.168.1.10)" onkeyup="tool004()" maxlength="15">
<input id="tool004CIDR" type="number" placeholder="CIDR-Notation (Bsp: 24 = 255.255.255.0)" onkeyup="tool004()" maxlength="2" min="1" max="31">
<input id="tool004Subnet" type="text" placeholder="Subnetzmaske (255.255.255.0)" onkeyup="tool004()">
<input id="tool004Hosts" type="text" placeholder="Anzahl Hosts" onkeyup="tool004()">
<input id="tool004Netadress" type="text" placeholder="Netzadresse" onkeyup="tool004()">
<input id="tool004Broadcast" type="text" placeholder="Broadcast-Adresse" onkeyup="tool004()">
</div>
<div id="cryptography" class="tool" data-toolid="tool005">
<h2><i class="ai-key"></i> Kryptografie</h2>
<p>Tools um die Auftrittswahrscheinlichkeit, den Informationsgehalt und die Entropie zu berchnen.</p>
<p class="notice">Abschnitt noch in Entwicklung</p>
<h3>Kompression</h3>
<p>Entropie, Informationsgehalt, Auftrittswahrscheinlichkeit und Redunanz</p>
<h3>CRC berechnen</h3>
<p>Der CRC ist eine Checksumme.</p>
<ul>
<li><a href="https://public.hochschule-trier.de/~knorr/crc.php" alt="CRC berechnen" class="link">Tool zur Berechnung des CRC</a></li>
</ul>
<h3>Tools zur Verschlüsselung</h3>
<ul>
<li><a href="https://de.planetcalc.com/6947/?language_select=de" alt="Zaunmethode Rechner" class="link">Tool für Zaunmethode</a></li>
<li><a href="https://www.cryptool.org/de/cto/frequency-analysis" alt="Auftrittswahrscheinlichkeit von Zeichen berechnen" class="link">Tool zum Berechnen der Auftrittswahrscheinlichkeit von Zeichen (für Krypoanalyse)</a></li>
<li><a href="https://www.cryptool.org/de/cto/monoalpha" alt="Substition" class="link">Tool für die Substition</a></li>
</ul>
<p>Die verlinkten Tools haben keinen Zusammenhang mit dieser Website. Ich verlinke diese nur da ich diese empfehlen kann.</p>
</div>
<div id="imprint" class="tool" data-toolid="tool999">
<h2>Impressum <i class="ai-paper"></i></h2>
<p>Verantwortlich für diese Website (math.neodym.dev ehemals math-tools.app):</p>
<p><i class="ai-person"></i> Michael von Ah</p>
<p><i class="ai-location"></i> Obwalden, Schweiz</p>
<p><i class="ai-envelope"></i> <a class="link" href="mailto:hello@neodym.dev">hello@neodym.dev</a></p>
<h2>Hinweis zum Datenschutz</h2>
<p>Die auf dieser Website vom Benutzer angegebenen Daten werden nicht gespeichert und nur lokal auf dem Gerät zur Berechnung der gewünschten Werte verwendet. Die Website wird über <a class="link" href="https://pages.github.com/">GitHub Pages</a> gehosted (zur Verfügung gestellt), daher kann es sein, dass GitHub weitere Daten über den Benutzer speichert. Dies kann in der <a class="link" href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement">Datenschutzerklärung von GitHub</a> nachgelesen werden. Ausserdem werden die Aufrufe mit Umami Analytics getrackt. Damit wird aufgezeichnet wann und wie lange die Website besucht wurde sowie mit welchem Gerätetyp. Durch die Nutzung dieser Website stimmt der Benutzer dem zu</p>
<p>Der Quellcode zu dieser Website steht öffentlich auf <a class="link" href="https://github.com/michivonah/math-tools/">GitHub</a> zur Verfügung.</p>
<h2>Copyright</h2>
<p>Folgende Ressourcen/Bibliotheken wurden für dieses Projekt verwendet:</p>
<ul>
<li>CSS3 Patterns Gallery - projects.verou.me/css3patterns</li>
<li>Pixabay - pixabay.com</li>
<li>Animate on Scroll Library - michalsnik.github.io/aos</li>
<li>Akar Icons - akaricons.com</li>
<li>Google Fonts - fonts.google.com</li>
</ul>
</div>
</div>
</div>
<div id="scroll-top" onclick="scrollToTop();">
<i class="ai-chevron-up"></i>
</div>
<script>
// Loading
window.addEventListener('load', () => {
// detect darkmode
if(window.matchMedia('(prefers-color-scheme: dark)').matches || localStorage.getItem('darkmode') == "true"){
document.body.style.setProperty('--background', '#181818');
document.body.style.setProperty('--color', '#fff');
document.body.style.setProperty('--imgFilter', '0%');
console.log('Darkmode activated.');
}
// disable animation
AOS.init({disable: true});
// show current tool
changeTool();
// install service worker
//if('serviceWorker' in navigator) navigator.serviceWorker.register('/service-worker.js?v=1-0-2');
// add eventlistener for smartphone navigation
var navButtons = document.querySelectorAll('.toolCategoryLabel');
navButtons.forEach(obj => obj.addEventListener("click", toggleNavigation));
// show a random greeting
randomGreeting();
// hide loadingscreen
setTimeout(function(){
document.getElementById('loadingscreen').style.display = "none";
}, 1000)
});
window.addEventListener('scroll', function(e) {
var scrollTop = document.getElementById('scroll-top');
if(this.scrollY > 20){
scrollTop.style.right = "0";
}
else{
scrollTop.style.right = "-55px";
}
});
function scrollToTop(){
window.scroll(0, 0);
}
function randomGreeting(){
var greeting = document.getElementById("greeting");
var greetings = [
"Hallo Internetreisender!",
"Hallo du Mathe-Guru!",
"Hallo Sportsfreund!",
"Mathe angesagt?",
"Moin, alles munter?"
];
var random = Math.floor(Math.random() * greetings.length);
greeting.textContent = greetings[random];
}
</script>
</body>
</html>