Spaces:

Titeiiko
/

Otis

Runtime error

App Files Files Community

Titeiiko commited on Nov 22, 2023

Commit

ab4f1d8

1 Parent(s): 14131be

Create index.html

Browse files

Files changed (1) hide show

index.html +255 -0

index.html ADDED Viewed

	@@ -0,0 +1,255 @@

+<!DOCTYPE html>
+<html>
+	<head>
+		<title>GJSON Playground</title>
+		<meta charset="utf-8"/>
+		<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css">
+        -->
+        <style>
+			* {
+				/* box-sizing: content-box; */
+				box-sizing: border-box;
+			}
+			html, body {
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				padding: 0;
+				background-color: #a7b2bb;
+				color: rgba(39,40,34,0.80);
+				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+				font-size: 17px;
+			}
+			.contents {
+				width: 90%;
+				margin: 0 auto;
+			}
+			#path {
+				display: block;
+				width: 100%;
+				max-width: 1000px;
+				border-radius: 15px;
+				background-color: #272822;
+				border: 0;
+				color: #dfdfde;
+				line-height: 50px;
+				padding: 0 25px;
+				font-size: 15px;
+				font-family: Hack, monospace;
+				outline: none;
+				box-shadow: 0px 15px 15px rgba(0,0,0,0.3);
+				margin: 10px auto;
+			}
+			#input, #output {
+				display: block;
+				width: 100%;
+				max-width: 1000px;
+				border-radius: 15px;
+				background-color: #272822;
+				border: 0;
+				padding: 25px;
+				color: #dfdfde;
+				font-size: 15px;
+				font-family: Hack, monospace;
+				outline: none;
+				box-shadow: 0px 15px 15px rgba(0,0,0,0.3);
+				resize: vertical;
+				margin: 10px auto;
+				word-wrap:unset;
+			}
+			#input {
+				height: 300px;
+			}
+			#output {
+				height: 150px;
+			}
+			.top {
+                display: block;
+                margin: 40px auto 40px auto;
+                text-align: center;
+            }
+            .top .logo {
+                position: relative;
+                left: -2px;
+                display: block;
+                margin: 0 auto 5px auto;
+            }
+            .top .sub {
+                color: #272822;
+                font-size: 32px;
+                font-weight: 900;
+                margin: 0 auto 0 auto;
+            }
+			.bottom {
+                display: block;
+                max-width: 800px;
+                margin: 40px auto 40px auto;
+            }
+            .bottom pre{
+                background: rgba(0,0,0,0.10);
+                padding: 20px;
+                border-radius: 6px;
+                font-family: Hack, monospace;
+                font-size: 15px;
+            }
+            .bottom p{
+                text-align: center;
+            }
+            .bottom h2, .bottom h3{
+                text-align: center;
+                color: #272822;
+            }
+            .octocat {
+                margin-top: 20px;
+                opacity: 0.82;
+            }
+            .example {
+                overflow: auto;
+            }
+			a {
+				color: black
+			}
+		</style>
+	</head>
+	<body>
+		<div class="contents">
+			<div class="top">
+				<img src="logo.png" height="60" class="logo">
+            	<div class="sub">PLAYGROUND</div>
+            	<p>Otis an Anti-Spam AI Model</p>
+			</div>
+			<div><input type="text" value="name.last" id="path"
+				data-gramm_editor="false" spellcheck="false" autocomplete="off"></div>
+			<div>
+				<textarea id="output" readonly
+				data-gramm_editor="false" spellcheck="false" autocomplete="off"
+				></textarea>
+			</div>
+			<div class="bottom">
+				<h3>EXAMPLES</h3>
+				<pre class="example">
+name.last        >> "Anderson"
+age              >> 37
+children         >> ["Sara","Alex","Jack"]
+children.#       >> 3
+children.1       >> "Alex"
+child*.2         >> "Jack"
+c?ildren.0       >> "Sara"
+fav\.movie       >> "Deer Hunter"
+friends.#.first  >> ["Dale","Roger","Jane"]
+friends.1.last   >> "Craig"</pre>
+				<p>
+					Query an array for the first match by using #(...),
+					or find all matches with #(...)#.
+					Queries support the ==, !=, <, <=, >, >= comparison operators and
+					the simple pattern matching % operator.
+				</p>
+				<pre class="example">
+friends.#(last=="Murphy").first   >> "Dale"
+friends.#(last=="Murphy")#.first  >> ["Dale","Jane"]
+friends.#(age>45)#.last           >> ["Craig","Murphy"]
+friends.#(first%"D*").last        >> "Murphy"
+friends.#(nets.#(=="fb"))#.first  >> ["Dale","Roger"]</pre>
+				<p>
+				</p>
+				<p>
+					Use the selectors syntax to join multiple paths into a new JSON document.
+				</p>
+				<pre class="example">
+{name.first,age,"murphys":friends.#(last="Murphy")#.first}
+[name.first,age,children.0]</pre>
+				<p>
+					Use modifiers to modify the json. There are currently the following built-in modifiers:
+					<ul>
+					<li><b>@reverse</b>: Reverse an array or the members of an object.</li>
+					<li><b>@ugly</b>: Remove all whitespace from JSON.</li>
+					<li><b>@pretty</b>: Make the JSON more human readable.</li>
+					<li><b>@this</b>: Returns the current element. It can be used to retrieve the root element.</li>
+					<li><b>@valid</b>: Ensure the json document is valid.</li>
+					<li><b>@flatten</b>: Flattens an array.</li>
+					<li><b>@join</b>: Joins multiple objects into a single object.</li>
+					<li><b>@keys</b>: Returns an array of keys for an object.</li>
+					<li><b>@values</b>: Returns an array of values for an object.</li>
+					</ul>
+				</p>
+				<pre class="example">
+children.@reverse                          >> ["Jack","Alex","Sara"]
+[email protected]                        >> "Jack"
+{name.first,"murphys":friends.0}.@pretty   >> <i>beautiful JSON</i>
+{name.first,"murphys":friends.0}.@ugly     >> <i>compact JSON</i>
+[@this].#(age>35).name.last                >> "Anderson"</pre>
+				<p>
+					For more information, please see the <a href="https://github.com/tidwall/gjson">GJSON project</a>
+					and the <a href="https://github.com/tidwall/gjson/blob/master/SYNTAX.md">GJSON syntax</a>.
+				</p>
+				<p>
+					<br>
+					<br>
+					This page is open source at
+					<a href="https://github.com/tidwall/gjson-play">tidwall/gjson-play</a>.
+					<br>
+					<a href="https://github.com/tidwall/gjson"><img class="octocat"
+						src="octocat.png" height="40" border="0"></a>
+				</p>
+			</div>
+		</div>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                var prev_path = null;
+                window.setInterval(function() {
+                    var path = document.getElementById("path").value.trim();
+                    if (path == "") {
+                    } else if (path != prev_path) {
+                        analyzeContent(path)
+                            .then(function(output) {
+                                document.getElementById("output").value = output;
+                                prev_path = path;
+                            })
+                            .catch(function(error) {
+                                console.error(error);
+                            });
+                    }
+                }, 200);
+            });
+            function analyzeContent(content) {
+                return new Promise(function(resolve, reject) {
+                    const endpoint = `/${content}`;
+                    fetch(endpoint)
+                        .then(function(response) {
+                            if (response.ok) {
+                                return response.text();
+                            } else {
+                                throw new Error('Failed to fetch data');
+                            }
+                        })
+                        .then(function(data) {
+                            resolve(data);
+                        })
+                        .catch(function(error) {
+                            reject(error);
+                        });
+                });
+            }
+        </script>
+	</body>
+</html>