Merge pull request #33 from stephensli/feature-6/sample-site-for-loca…

…l-execution Sample site to support local development and testing
stephen-slm · Jun 25, 2022 · dce0613 · dce0613
2 parents cc28ca2 + 8c4c317
commit dce0613
Show file tree

Hide file tree

Showing 9 changed files with 630 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -27,6 +27,7 @@ untrusted code inside a container with https://gvisor.dev/, tracking execution p
 ## Documentation
 
 * [API Endpoints (Compiling, Templates, Languages)](./docs/ENDPOINTS.md)
+* [API Sample Site (Compiling, Running, Testing)](./docs/SAMPLE_SITE.md)
 
 ## Supported Queues
 

diff --git a/assets/sample-site-full.png b/assets/sample-site-full.png
diff --git a/assets/sample-site/index.css b/assets/sample-site/index.css
@@ -0,0 +1,113 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    margin: 0;
+}
+
+.wrapper {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    height: 100vh;
+}
+
+#editor, #preview {
+    width: 100%;
+    height: 50%;
+    overflow: auto;
+}
+
+@media only screen and (min-width: 992px) {
+    .wrapper {
+        flex-direction: row;
+    }
+
+    #editor, #preview {
+        width: 50%;
+        height: 100%;
+        overflow: auto;
+    }
+}
+
+#editor {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+}
+
+#code, #compiler, #settings {
+    /* Add shadows to create the "card" effect */
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    transition: 0.3s;
+    padding: 10px;
+}
+
+#preview {
+    display: grid;
+    padding: 10px;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    gap: 10px;
+    grid-auto-flow: row;
+    grid-template-areas:
+    "."
+    "."
+    ".";
+}
+
+.metrics {
+    display: grid;
+}
+
+.metric div {
+    padding-right: 5px;
+    display: inline-flex;
+}
+
+#code-output, #compiler-output {
+    margin-top: 10px;
+}
+
+.card {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+
+
+.inputOutputTest {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 25px;
+}
+
+.inputOutputTest textarea {
+    box-sizing: border-box;
+    resize: vertical;
+    width: 100%;
+    max-height: 80px;
+    height: 80px;
+}
+
+.green {
+    font-weight:  bold;
+    color: green;
+}
+
+.red {
+    font-weight:  bold;
+    color: red;
+}
+
+.orange {
+    font-weight:  bold;
+    color: orange;
+}
diff --git a/assets/sample-site/index.html b/assets/sample-site/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Local Sample Site</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+<div>
+
+
+    <div id="root">
+        <div class="wrapper">
+            <div id="editor"></div>
+            <div id="preview">
+                <div id="settings">
+                    <label>
+                        <select id="language-modes">
+                        </select>
+                    </label>
+                    <button id="reset-code">Reset Code</button>
+                    <button id="run">Run</button>
+                    <label>
+                        <input type="checkbox" id="enable-test" checked="checked">
+                        Enable Test
+                    </label>
+                    <h3 class="header">Metrics</h3>
+                    <div class="metrics">
+                        <div class="metric">Status:
+                            <div id="execution-status"></div>
+                        </div>
+                        <div class="metric">Test Status:
+                            <div id="execution-test-status"></div>
+                        </div>
+                        <div class="metric">Compiler Runtime (Ms):
+                            <div id="compiler-runtime"></div>
+                        </div>
+                        <div class="metric">Code Runtime (Ms):
+                            <div id="code-runtime"></div>
+                        </div>
+                    </div>
+                    <h3 class="header">Input Testing</h3>
+                    <p style="max-width: 600px; text-align: justify">
+                        Here you can provide a standard input for the source code and an expected standard output, this
+                        will be used to test the source code, for example take in a number and output that number in
+                        a power of two. Another example would be taking in a string and expecting that string in reverse
+                        back.
+                    </p>
+                    <div class="inputOutputTest">
+                        <label>
+                            <div>Standard input</div>
+                            <textarea id="standard-input" class="card">Hello World</textarea>
+                        </label>
+                        <label>
+                            <div>Expected input</div>
+                            <textarea id="expected-output" class="card">dlroW olleH</textarea>
+                        </label>
+                    </div>
+                </div>
+                <div id="code">
+
+                    <h3 class="header">Output</h3>
+                    <div id="code-output">
+                    </div>
+                </div>
+                <div id="compiler">
+                    <h3 class="header">Compiler Output</h3>
+                    <div id="compiler-output"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.6.0/ace.js"
+        integrity="sha512-mCwKQ3CvPxkAIwyhkfKGNMEH7mE7VAyoBq3pJIuer8G9BXEDAqnfuMHlt26sdPApAgKAXCPNkLAmMXlEVHezqQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<script src="index.js"></script>
+</body>
+</html>