-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
401 lines (376 loc) · 21.8 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
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!DOCTYPE html>
<html lang="de">
<head>
<title>logibear | feed the bear</title>
<meta charset="UTF-8">
<meta name="description" content="">
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="canonical" href="https://www.logibear.de/home">
<link rel="stylesheet" media="all" href="resources/bootstrap.min.css">
<link rel="stylesheet" media="all" href="css/screen.min.css">
<link rel="stylesheet" media="print" href="css/print.min.css">
</head>
<body class="container-fluid">
<!-- NAVBAR -->
<nav id="nav" class="row navbar navbar-expand-lg navbar-light sticky-top p-1 mb-5">
<!-- NAVBAR BRAND -->
<a href="https://www.logibear.de/" target="_self" title="Logibear" class="navbar-brand text-dark ml-3 ml-lg-0 mt-lg-3">
<span>Logibear</span>
</a>
<!-- NAVBAR BRAND end -->
<!-- NAVBAR TOGGLER -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Menü öffnen">
<span class="navbar-toggler-icon"></span>
</button>
<!-- NAVBAR TOGGLER end -->
<!-- MENU -->
<section id="navbar" class="navbar-collapse collapse mt-lg-3">
<!-- MENU LEFT -->
<ul id="navbar-left" class="navbar-nav pl-lg-5">
<li class="nav-item list-inline-item">
<a href="#about" target="_self" title="Alles über die Entwickler und die Organisation" class="nav-link">Über uns</a>
</li>
<li class="nav-item list-inline-item">
<a href="#selection" target="_self" title="Die Funktionen in der Übersicht" class="nav-link">Funktionen</a>
</li>
<li class="nav-item list-inline-item">
<a href="https://www.logibear.de/learn/" target="_self" title="Jetzt Logik lernen mit den interaktiven Übungen" class="nav-link">Lernen</a>
</li>
<li class="nav-item list-inline-item">
<a href="https://www.logibear.de/doc/" target="_self" title="Vollständige Dokumentation zur Syntax" class="nav-link">Dokumentation</a>
</li>
</ul>
<!-- MENU LEFT end -->
<!-- MENU RIGHT -->
<ul id="navbar-right" class="navbar-nav ml-lg-auto pr-lg-5">
<li class="nav-item">
<a href="#faq" target="_self" title="Häufig gestellte Fragen" class="nav-link" rel="help">Hilfe</a>
</li>
<li class="nav-item">
<a href="https://github.com/jp-richter/logibear" target="_blank" title="GitHub Repository zur Schnittstelle" class="nav-link" rel="external"><i class="fab fa-github"></i> GitHub</a>
</li>
<li class="nav-item">
<a href="https://slack.logibear.de/" target="_blank" title="Öffentlicher Slack Workspace" class="nav-link" rel="external"><i class="fab fa-slack-hash"></i> Slack</a>
</li>
</ul>
<!-- MENU RIGHT end -->
</section>
<!-- MENU end -->
</nav>
<!-- NAVBAR end -->
<!-- SELECTION -->
<section id="selection" class="row justify-content-center">
<section class="col-md-auto text-secondary text-center">
<h5><small>
<select name="categorie" id="lb-functions-categorie">
<option value="propositional_logic" selected>
Aussagenlogik
</option>
<option value="modal_logic" disabled>
Modallogik
</option>
<option value="predicate_logic" disabled>
Prädikatenlogik
</option>
</select>
<label class="pl-2 text-light" for="lb-functions-categorie">
Was möchtest du tun?
</label>
</small></h5>
<ul id="lb-functions-selection-list" class="d-flex flex-wrap justify-content-center list-inline border rounded text-center text-uppercase bg-light mb-0">
<li class="list-inline-item p-4 pl-3 pr-3 border border-top-0 border-bottom-0 border-left-0 selected">
<small class="align-middle">Semantischer<br />Vergleich</small>
</li>
<li class="list-inline-item p-4 pl-3 pr-3 border border-top-0 border-bottom-0 border-left-0">
<label for="lb-functions-evaluate"><small>Auswerten</small></label><br />
<select name="evaluate" id="lb-functions-evaluate">
<option disabled selected>Auswertung wählen</option>
<option value="value_table">Wertetabelle</option>
<option value="graph">Graph</option>
</select>
</li>
<li class="list-inline-item p-4 pl-3 pr-3">
<label for="lb-functions-transformation"><small>Umformung</small></label><br />
<select name="transformation" id="lb-functions-transformation">
<option disabled selected>Umformung wählen</option>
<option value="negation">Negationsnormalform</option>
<option value="conjunctive">Konjunktive Normalform</option>
<option value="disjunctive">Disjunktive Normalform</option>
<option value="horn_formula">Hornformel</option>
<option value="implicational">Implikationsform</option>
</select>
</li>
</ul>
</section>
</section>
<!-- SELECTION end -->
<!-- FUNCTIONS -->
<section id="functions" class="row mt-lg-5 pt-5 border border-divider border-left-0 border-right-0 border-bottom-0">
<!-- FUNCTIONS CONTENT -->
<section class="col-12 p-3 p-sm-5">
<section class="row">
<!-- INPUT/RESULT -->
<section class="col-lg-8 col-md-12">
<!-- DESCRIPTION -->
<h3 class="text-center"><small>Semantischer Vergleich zweier aussagenlogischer Formeln</small></h3>
<p class="text-center">
Hier können zwei aussagenlogische Formeln auf semantische Äquivalenz überprüft werden. Die Syntax zur Eingabe kannst Du
den Beispielen oder der Dokumentation entnehmen.
</p>
<!-- DESCRIPTION end -->
<!-- INPUT -->
<section class="input-group">
<span class="input-group-addon" id="lb-comparison-term1-label">φ<sub>1</sub></span>
<input type="text" id="lb-comparison-term1" class="form-control" placeholder="A ∧ B" aria-label="x1" aria-describedby="lb-comparison-term1-label">
<span class="input-group-addon">≡</span>
<input type="text" id="lb-comparison-term2" class="form-control" placeholder="B ∧ A" aria-label="x1" aria-describedby="lb-comparison-term2-label">
<span class="input-group-addon" id="lb-comparison-term2-label">φ<sub>2</sub></span>
</section>
<!-- INPUT end -->
<!-- BUTTONS -->
<section class="d-flex justify-content-center mt-3">
<section class="d-inline-flex btn-group">
<button type="button" id="lb-comparison-start" class="btn btn-info">Vergleich starten</button>
<button type="button" id="lb-comparison-reset" class="btn btn-secondary">Zurücksetzen</button>
</section>
</section>
<!-- BUTTONS end -->
<!-- LOADER -->
<section class="d-flex justify-content-center">
<section class="d-inline-flex">
<section id="lb-comparison-loader" class="loader text-center">
<h5><small>Berechne Ergebnis</small></h5>
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
<span class="line line-4"></span>
<span class="line line-5"></span>
<span class="line line-6"></span>
<span class="line line-7"></span>
<span class="line line-8"></span>
<span class="line line-9"></span>
</section>
</section>
</section>
<!-- LOADER end -->
<!-- RESULT -->
<section class="d-flex justify-content-center mt-2">
<section class="d-inline-flex">
<section id="lb-comparison-result" class="result text-center">
Ergebnis: <kbd class="ml-2" id="lb-comparison-result-value">Undefined</kbd>
<p id="lb-comparison-result-message"></p>
</section>
</section>
</section>
<!-- RESULT end -->
</section>
<!-- INPUT/RESULT end -->
<!-- EXAMPLES -->
<section class="col-lg-4 col-md-12 mt-4 mt-lg-0">
<section class="jumbotron p-3">
<h4 class="text-center"><small>Erläuterungen</small></h4>
<p><kbd>&</kbd> repräsentiert <code>∧</code>, dies ermöglicht eine einfache und schnelle Eingabe von Formeln.<br />
<u>Beispiel:</u> <kbd>A & B</kbd> = <code>A ∧ B</code></p>
<p><kbd>|</kbd> repräsentiert <code>∨</code>.<br />
<u>Beispiel:</u> <kbd>A | B</kbd> = <code>A ∨ B</code></p>
<p>Weitere Beispiele? <a href="https://www.logibear.de/dokumentation" target="_self" title="Dokumentation">Dokumentation</a></p>
</section>
</section>
<!-- EXAMPLES end -->
</section>
</section>
<!-- FUNCTIONS CONTENT end -->
</section>
<!-- FUNCTIONS end -->
<section id="faq" class="row p-2">
<section class="col-sm-1 col-md-2"></section>
<section class="col-sm-10 col-md-8">
<section class="row">
<section class="col-12 text-center mb-2 mt-3">
<h4 class="text-uppercase"><small>Häufig gestellte Fragen</small></h4>
</section>
<section class="col-sm-12 col-md-6 col-lg-4">
<small class="text-uppercase font-weight-bold">Welche Syntax wird für die logischen Terme genutzt?</small>
<p>Beispielhaft kann die Syntax den Erläuterungen neben der jeweiligen Funktion entnommen werden. Die detaillierte Beschreibung der Syntax ist in unserer
<a href="https://www.logibear.de/doc/" target="_self" title="Dokumentation">Dokumentation</a> zu finden.</p>
</section>
<section class="col-sm-12 col-md-6 col-lg-4">
<small class="text-uppercase font-weight-bold">Wie kann ich auf die Schnittstelle zugreifen?</small>
<p>Generell bieten wir keinen uneingeschränkten Zugang zu unserer Schnittstelle, um unsere Server Kapazitäten garantieren zu können. Entwickler können im
<a href="https://api.logibear.de/" target="_blank" title="Entwicklerportal">Entwicklerportal</a> einen Zugangsschlüssel anfordern, zudem bieten wir spezielle Konditionen für
<a href="https://api.logibear.de/student/" target="_blank" title="Studenten">Studenten</a>.</p>
</section>
<section class="col-sm-12 col-md-6 col-lg-4">
<small class="text-uppercase font-weight-bold">Wie kann ich das Projekt unterstützen?</small>
<p>Als Entwickler kannst du über <a href="https://github.com/jp-richter/logibear" target="_blank" title="GitHub Repository zur Schnittstelle" rel="external">GitHub</a> etwas zum Code beisteuern. Es ist allerdings keine besondere Unterstützung notwendig, die reine Nutzung der Webseite ist Unterstützung genug.</p>
</section>
<section class="col-sm-12 col-md-6 col-lg-4">
<small class="text-uppercase font-weight-bold">Wofür werden Cookies benötigt/benutzt?</small>
<p>Wir nutzen Google Analytics, um die Nutzung unserer Webseite zu analysieren und um Stolpersteine oder Fehler schnellstmöglich zu beseitigen. Wenn du Google Analytics nicht nutzen möchtest, kannst du dich
<a href="https://tools.google.com/dlpage/gaoptout?hl=de" target="_blank" title="Tool um Google Analytics zu deaktivieren" rel="external">hier</a> informieren.</p>
</section>
<section class="col-sm-12 col-md-6 col-lg-4">
<small class="text-uppercase font-weight-bold">Wie finanziert sich dieses Projekt?</small>
<p>Dieses Open Source Projekt finanziert sich durch die Entwickler. Die Webseite ist vollkommen werbefrei.</p>
</section>
<section class="col-12 text-center mb-2">
<p>Frage nicht beantwortet? <a href="mailto:hello@logibear.de" target="_blank" title="E-Mail senden">E-Mail senden</a></p>
</section>
</section>
</section>
<section class="col-sm-1 col-md-2"></section>
</section>
<!-- SPONSORS -->
<section id="sponsors" class="row p-5 border border-divider border-left-0 border-right-0 border-bottom-0">
<section class="col-12">
<!-- HEADER -->
<section class="row">
<section class="col-12 text-center text-uppercase text-secondary">
<small>Technologien, die dieses Projekt ermöglichen</small>
</section>
</section>
<!-- HEADER end -->
<!-- LOGOS -->
<section class="row pt-4">
<section class="col-12">
<ul class="list-inline text-center mb-0">
<li class="list-inline-item p-2 pl-3 pr-3">
<i class="fab fa-html5 fa-3x"></i>
</li>
<li class="list-inline-item p-2 pl-3 pr-3">
<i class="fab fa-css3-alt fa-3x"></i>
</li>
<li class="list-inline-item p-2 pl-3 pr-3">
<i class="fab fa-js fa-3x"></i>
</li>
<li class="list-inline-item p-2 pl-3 pr-3">
<i class="fab fa-react fa-3x"></i>
</li>
<li class="list-inline-item p-2 pl-3 pr-3">
<i class="fab fa-github fa-3x"></i>
</li>
<li class="list-inline-item p-2 pl-3 pr-3">
<i class="fab fa-aws fa-3x"></i>
</li>
</ul>
</section>
</section>
<!-- LOGOS end -->
</section>
</section>
<!-- SPONSORS end -->
<!-- FOOTER -->
<footer class="row p-5 border border-divider border-left-0 border-right-0 border-bottom-0 justify-content-center">
<section class="col-12 col-sm-11 col-md-10 col-lg-9">
<!-- FOOTER MENU -->
<section class="row">
<!-- DESCRIPTION -->
<section class="col-md-12 col-xl-5 text-center text-sm-left">
<h3><small>Logibear</small></h3>
<p class="text-secondary">Logibear kann logische Terme vergleichen, umformen und auswerten. Mit Benutzeroberfläche direkt hier auf logibear.de oder als Entwickler mit Zugang zu unserer Schnittstelle.</p>
</section>
<!-- DESCRIPTION end -->
<!-- MENU 1 -->
<section class="col-sm-4 col-xl-2 offset-xl-1">
<ul class="list-inline text-center text-sm-left">
<li class="text-uppercase">
<small>Über uns</small>
</li>
<li>
<a href="https://www.logibear.de/about" target="_self" title="Logibear">Logibear</a>
</li>
<li>
<a href="https://www.logibear.de/privacy" target="_self" title="Datenschutzerklärung">Datenschutz</a>
</li>
<li>
<a href="https://www.logibear.de/imprint" target="_self" title="Impressum">Impressum</a>
</li>
<li>
<a href="https://www.logibear.de/contact" target="_self" title="Kontakt">Kontakt</a>
</li>
</ul>
</section>
<!-- MENU 1 end -->
<!-- MENU 2 -->
<section class="col-sm-4 col-xl-2">
<ul class="list-inline text-center text-sm-left">
<li class="text-uppercase">
<small>Funktionen</small>
</li>
<li>
<a href="#functions" target="_self" title="Aussagenlogik">Aussagenlogik</a>
</li>
<li>
<a href="https://www.logibear.de/" target="_self" title="Modallogik" class="disabled text-secondary">Modallogik</a>
</li>
<li>
<a href="https://www.logibear.de/" target="_self" title="Prädikatenlogik" class="disabled text-secondary">Prädikatenlogik</a>
</li>
</ul>
</section>
<!-- MENU 2 end -->
<!-- MÉNU 3 -->
<section class="col-sm-4 col-xl-2">
<ul class="list-inline text-center text-sm-left">
<li class="text-uppercase">
<small>Entwickler</small>
</li>
<li>
<a href="https://api.logibear.de/" target="_blank" title="Entwicklerportal">Entwicklerportal</a>
</li>
<li>
<a href="https://api.logibear.de/doc/" target="_blank" title="Dokumentation">Dokumentation</a>
</li>
<li>
<a href="https://api.logibear.de/student/" target="_blank" title="Studenten">Studenten</a>
</li>
</ul>
</section>
<!-- MENU 3 end -->
</section>
<!-- FOOTER MENU end -->
<!-- FOOTER COPYRIGHT -->
<section class="row mt-3">
<!-- COPYRIGHT -->
<section class="col-12 col-md-6 text-center text-md-left pt-2">
© 2017-2018 logibear. Alle Rechte vorbehalten.
</section>
<!-- COPYRIGHT end -->
<!-- SOCIAL -->
<section class="col-12 col-md-6 text-center text-md-right pt-2">
<ul class="list-inline">
<li class="list-inline-item m-1 mt-0">
<a href="https://github.com/jp-richter/logibear" class="text-secondary" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
</li>
<li class="list-inline-item m-1 mt-0">
<a href="https://slack.logibear.de/" class="text-secondary" target="_blank" title="Slack"><i class="fab fa-slack-hash"></i></a>
</li>
<li class="list-inline-item m-1 mt-0">
<a href="#" class="text-secondary" target="_blank" title="Xing" rel="author"><i class="fab fa-xing"></i></a>
</li>
<li class="list-inline-item m-1 mt-0">
<a href="#" class="text-secondary" target="_blank" title="LinkedIn" rel="author"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
</section>
<!-- SOCIAL end -->
</section>
<!-- FOOTER COPYRIGHT end -->
</section>
</footer>
<!-- FOOTER end -->
<!-- JAVASCRIPT DEPENDENCIES -->
<script type="text/javascript" src="resources/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="resources/popper.min.js"></script>
<script type="text/javascript" src="resources/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.min.js"></script>
<script defer type="text/javascript" src="resources/fontawesome-all.min.js"></script>
<!-- JAVASCRIPT DEPENDENCIES end -->
</body>
</html>