-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
157 lines (136 loc) · 5.73 KB
/
index.html
File metadata and controls
157 lines (136 loc) · 5.73 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-169000941-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-169000941-1');
</script>
<meta charset="UTF-8">
<!-- Primary Meta Tags -->
<title>Quick Regex - Learn Regex Step By Step</title>
<meta name="title" content="Quick Regex - Learn Regex Step By Step">
<meta name="description"
content="Learn regular expressions through a series of guided tutorials. Go from a newbie to a regex master in no time!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://henry-yslin.github.io/QuickRegex/">
<meta property="og:title" content="Quick Regex - Learn Regex Step By Step">
<meta property="og:description"
content="Learn regular expressions through a series of guided tutorials. Go from a newbie to a regex master in no time!">
<meta property="og:image" content="screenshot.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://henry-yslin.github.io/QuickRegex/">
<meta property="twitter:title" content="Quick Regex - Learn Regex Step By Step">
<meta property="twitter:description"
content="Learn regular expressions through a series of guided tutorials. Go from a newbie to a regex master in no time!">
<meta property="twitter:image" content="screenshot.png">
<link rel="canonical" href="https://henry-yslin.github.io/QuickRegex/" />
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Quick Regex">
<meta name="apple-mobile-web-app-title" content="Quick Regex">
<meta name="theme-color" content="#7cb342">
<meta name="msapplication-navbutton-color" content="#7cb342">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="192x192" href="favicon.png">
<link rel="apple-touch-icon" type="image/png" sizes="192x192" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Oxygen+Mono&family=Noto+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>
<body faded="true">
<div class="mobile">
<div>
<p class="icon">
<i class="material-icons">desktop_windows</i>
</p>
<p>Quick Regex requires a larger screen to function</p>
</div>
</div>
<div id="endscreen" style="display:none;">
<div class="background-wipe">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h1>Congratulations!</h1>
<p>You have completed the Quick Regex tutorial</p>
</div>
<div id="grid">
<div class="page">
<header>
<h2 id="title">Lesson 1 - Introduction</h2>
<p id="description">Regular expressions are patterns used to match character combinations in strings.</p>
</header>
<main>
<textarea class="regex-editor" rows="1" spellcheck="false" id="editor" placeholder="Type Regex here..."
autofocus></textarea>
<pre class="regex" id="highlighting"></pre>
<div class="message">
Type something to get started
</div>
<div class="case-list">
<template id="case-template">
<div class="case" passed="false">
<pre class="case-text"></pre>
<i class="material-icons checkmark">check_circle</i>
<i class="material-icons checkmark-outline">check_circle_outline</i>
</div>
</template>
</div>
<p>Write a Regex expression that matches the <mark class="target-highlight">targets</mark><br>
Your regex matches will be shown in <mark class="input-highlight">blue</mark><br>
If the match contains <mark class="target-highlight"><mark class="target-group-highlight">capturing
groups</mark></mark>,
you will also need to <mark class="input-highlight"><mark class="input-group-highlight">match</mark></mark>
them.</p>
</main>
<footer>
<div id="progress-bar">
<div style="width:50%">
<div id="progress-bar-text">
50%
</div>
</div>
</div>
<div class="fab-btn" enabled="false" onclick="nextlevel_onclick()">
<i class="material-icons fas">arrow_forward</i>
</div>
</footer>
</div>
<nav>
<div class="nav-list">
<template id="nav-template">
<div class="nav-item" unlocked="false" current="false" passed="false">
<div class="nav-title"></div>
<i class="material-icons checkmark">done</i>
</div>
</template>
</div>
</nav>
</div>
<script type="module" src="index.js"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('serviceWorker.js').then(function (registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function (err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
</body>
</html>