RunKit/index.html at main · SatyamV7/RunKit · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="manifest" href="manifest.json">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="libs/monaco-editor@0.50.0/package/min/vs/editor/editor.main.css">
    <meta name="description"
        content="RunKit is a JavaScript playground which allows you to run and test your code natively in your browser.">
    <link rel="stylesheet" href="src/Styles.css">
    <title>RunKit</title>
    <script>
        let startTime = new Date();
        document.addEventListener('DOMContentLoaded', function () {
            let loadTime = new Date() - startTime;
            console.log(`DOM Loaded in ${loadTime / 1000}s`);
        });
    </script>
</head>

<body>
    <div id="splash-screen">
        <div class="screen">
            <div class="loaderImg">
                <img src="favicon.ico" alt="" height="256px" width="256px">
            </div>
            <span class="loader"></span>
        </div>
    </div>
    <div class="container">
        <div class="header">
            <span><img id="headerImg" src="assets/icons/icon_clear.png">
                <p id="banner">
                    RunKit | In-Browser JavaScript Playground
                </p>
            </span>
            <span>
                <div class="checkbox-container">
                    <input type="checkbox" class="checkbox" id="checkbox">
                    <label for="checkbox" class="checkbox-label">
                        <span class="moon">🌙</span>
                        <span class="sun">🔆</span>
                        <span class="ball"></span>
                    </label>
                </div>
                <input type="file" name="FileInput" id="FileInput" accept=".js" aria-label="Import External Libraries">
                <button onclick="displayConsole(true)" class="button primary-button run-button"
                    aria-label="Run Code">Run&nbsp;▶</button>
                <button onclick="displayConsole(true)" class="button primary-button stop-button"
                    aria-label="Stop Code">Stop&nbsp;⚠</button>
            </span>
        </div>
        <div class="row">
            <div class="Buttons">
                <button class="button open-file-button" id="fileInput">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
                        fill="#007bff">
                        <path
                            d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z" />
                    </svg></button>
                <button class="button download-button" id="Save" aria-label="Save As">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
                        fill="#007bff">
                        <path
                            d="M840-680v480q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h480l160 160Zm-80 34L646-760H200v560h560v-446ZM480-240q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM240-560h360v-160H240v160Zm-40-86v446-560 114Z" />
                    </svg></button>
                <button onclick="clearConsole()" class="button clear-button" aria-label="Clear Console">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
                        fill="#007bff">
                        <path
                            d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" />
                    </svg></button>
                <button class="button display-button" onclick="displayConsole()" aria-label="Show/Hide Console">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
                        fill="#007bff">
                        <path
                            d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z" />
                    </svg></button>
            </div>
            <div class="Workspace">
                <div class="column playground" id="editor">
                </div>
                <div class="column playground-console">
                    <div id="console"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // document.addEventListener('DOMContentLoaded', function () {
        setTimeout(function () {
            document.querySelector('#splash-screen').classList.add('disappear');
            document.querySelector('.container').classList.add('reveal');
        }, 3250);
        // });
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        });
        var require = { paths: { vs: 'libs/monaco-editor@0.50.0/package/min/vs' } };
    </script>
    <script src="libs/monaco-editor@0.50.0/package/min/vs/loader.js"></script>
    <script src="libs/monaco-editor@0.50.0/package/min/vs/editor/editor.main.nls.js"></script>
    <script src="libs/monaco-editor@0.50.0/package/min/vs/editor/editor.main.js"></script>
    <script src="src/App.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>