-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
71 lines (69 loc) · 4.21 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
<!DOCUMENT html>
<html>
<head>
<meta charse="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Graph Language Analyzer - Wojciech Kasperski</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-cose-bilkent.min.js"></script>
<script src="src/misc.js"></script>
<script src="src/events.js"></script>
<script src="src/graphTools.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Graph Language Analyzer</h1>
<p class="lead">Developed by Wojciech Kasperski <a href="mailto:[email protected]"><[email protected]></a></p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="alert alert-primary" role="alert">
<h5><b>Instruction:</b></h5>
<p>Enter some text below to make a graph of language. When you click on "Click to Analyze!" your text will be automatically cleared form any special chars. If you want analyze text with special chars or language like morse alphabet choose second option.</p>
</div>
</div>
<div class="col-12">
<form id="analyzingText">
<div class="form-group">
<label for="toAnalyze">Enter language text for analyze below</label>
<textarea class="form-control" id="toAnalyze" rows="4"></textarea>
<button id="analyzeIt" class="btn btn-dark m-2">Click to Analyze!</button>
<button id="analyzeCrap" class="btn btn-dark m-2">Click to Analyze Without Input Cleaning!</button>
</div>
</form>
</div>
<div class="col-12">
<div id="cy"></div>
</div>
<div class="col-12">
<form id="analyzeSylabs">
<div class="form-group">
<label for="analyzeSylabsTextbox">Input just two chars to search for sylab:</label>
<textarea class="form-control" id="analyzeSylabsTextbox" rows="1"></textarea>
<button id="analyzeEnteredSylabs" class="btn btn-dark m-2">Click to search for sylabs!</button>
<button id="analyzeEnteredSylabsSpecial" class="btn btn-dark m-2">Click to search for sylabs based on special chars (for ex. if you are using Morse Alphabet)!</button>
</div>
</form>
</div>
<div class="col-12 mt-3">
<div class="alert alert-primary" role="alert">
<h5><b>Legend:</b></h5>
<img src="assets/img/start.png" class="height-50"> - a start point, which connects all first letters of words,<br>
<img src="assets/img/begin.png" class="height-50 width-36"> - first letter of word,<br>
<img src="assets/img/node.png" class="height-50 width-36"> - letter of the word on which word can't end,<br>
<img src="assets/img/end.png" class="height-50 width-36"> - letter of the word where reading can end. When it's connected to start it means that your grammar has single chars also. In short it can start and end on that node in some cases.<br>
</div>
</div>
</div>
</div>
</body>
</html>