-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (117 loc) · 4.92 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
<!DOCTYPE html>
<html lang="en">
<!-- NOTE: I am using a basic free bootstrap template avaiable online for the look/feel of the UI.
If this is not okay with you, please let me know and I will design my own. -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Grephy</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/grayscale.min.css" rel="stylesheet">
<script src="js/functions.js"></script>
<script src="js/globals.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<!-- Used for getting the contents of the file and sending them to the parseInput function -->
<script>
$(document).ready(function () {
<!-- Scroll to the top -->
$(this).scrollTop(0);
$('#fileBtn').change(function () {
if ($('#regexBox').val() === "") {
alert("You must enter a regular expression!");
location.reload();
} else {
var file = this.files && this.files[0];
var fileReader = new FileReader();
fileReader.onload = function (e) {
var text = e.target.result;
run(text);
};
fileReader.readAsText(this.files[0]);
}
});
$('input:radio').change(function() {
$('#regexBox').val(this.value);
});
});
</script>
<body id="page-top">
<!-- File upload section-->
<header class="masthead">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="brand-heading">GREPHY</h1>
</div>
</div>
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>Enter REGEX</h2>
<input type="text" id="regexBox">
<br><br>
<h5>
<input type="radio" name="testCase" value="a*b"> a*b
<br>
<input type="radio" name="testCase" value="ba*"> ba*
<br>
<input type="radio" name="testCase" value="ab*"> ab*
</h5>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>Upload Test File</h2>
<!-- Clever way of avoiding the annoying HTML 'file' input type and used an actual button instead -->
<input type="file" style="display: none;" accept=".txt" id="fileBtn">
<input type="button" class="btn" value="Choose File" onclick="document.getElementById('fileBtn').click();"/>
</div>
</div>
</div>
</div>
</header>
<!-- Output section -->
<section id="output" class="content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto" style="display:inline-block">
<h2>NFA DOT Output</h2>
<textarea id="nfaTA" rows="7" style="resize:none; background-color: #dcdcdc" cols="40" readonly></textarea>
</div>
</div>
<button class="btn" onclick="saveFile()">Save Output</button>
<br><br>
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>Accepted Lines From Test File</h2>
<textarea id="acceptedTA" rows="10" style="resize:none; background-color: #dcdcdc" cols="50" readonly></textarea>
</div>
</div>
</div>
</section>
<footer>
<div class="container text-center">
<p>Created by Christian Menk</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</body>
</html>