orionEditorKA/index.html at main · ThatCodingFrog/orionEditorKA · 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
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orion Text Editor</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0" />
    <link rel="icon" href="./resources/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="./resources/style.css" />
    <link rel="stylesheet" href="./resources/editor-tabs.css" />
    <script src="./resources/scripts/VFS.js"></script> <!--Load as early as possible, to ensure database for Virtual File System is set up as soon as possible-->
    <script src="./resources/scripts/dialog.js"></script> <!--Load the Orion Dialog early as well-->
    <script>
        // Global variables relating to the VFS
        var orionVFS = new VFS();
        var currentFile = "index.html";

    </script>


</head>
<body>

    <div id="fadeBackground"></div>

    <nav>
        <a class="logo" href="https://www.khanacademy.org/profile/awesomeorion" target="_blank" rel="noopener">
            <img src="./resources/logo.png" alt="orion editor logo" />
            <div class="sidebar-text text">
                <h3>Orion Editor<span>v0.7</span></h3>
            </div>
        </a>
        <div>
            <a href="https://www.khanacademy.org/computer-programming/orion-studios-v3/4970259604422656" target="_blank" rel="noopener">Subscribe</a>
            <a href="https://www.khanacademy.org/profile/me" target="_blank" rel="noopener" class="return-to-ka">
                Return to KA
                <span class="material-symbols-rounded">
                    open_in_new
                </span>
            </a>
        </div>
    </nav>
    <div class="sidenav">
        <div class="editor-tools">
            <button class="tool material-symbols-rounded" onclick="copyCode()" title="Copy Code In Editor">
                file_copy
            </button>
            <button class="toggle-editor-btn material-symbols-rounded" onclick="toggleEditor()" title="Show/Hide Editor">
                terminal
            </button>
            <button class="fullscreen-btn material-symbols-rounded" onclick="openFullscreenPreview()" title="Open Preview in New Tab">
                open_in_full
            </button>
            <button class="fullscreen-btn material-symbols-rounded" onclick="uploadCode()" title="Upload File">
                upload
            </button>
            <button class="fullscreen-btn material-symbols-rounded" id="beautifyCode" onclick="beautifyCode()" title="Beautify Code in Editor">
                wand_stars
            </button>
            <button class="fullscreen-btn material-symbols-rounded" onclick="downloadCode()" title="Download Code in Editor">
                download
            </button>
            <button class="tool material-symbols-rounded" onclick="createNewFile()" title="New File">
                add_2
            </button>
        </div>
        <div class="editor-settings">
            <button id="theme" class="material-symbols-rounded" title="Toggle Light/Dark Theme">
                dark_mode
            </button>
            <button class="settings-btn material-symbols-rounded" onclick="notAddedYet()" title="Editor Settings">
                settings
            </button>
        </div>
    </div>
    <div class="editor-plus-preview">
        <div id="editor-container">
            <div id="fileTrack">
            </div>
            <div id="editor">
                <!-- Ace editor will replace this content -->
            </div>
            <canvas id="beautify-animation"></canvas>
        </div>
        <div id="resizer"></div>
        <div id="preview-container">
            <iframe id="preview" style="width: 100%; height: 100%;" title="Live HTML Preview"></iframe>
        </div>
    </div>
    <footer class="footer">
        <div class="editor-info">
            <div class="time"></div>
            <div id="totalLines">Lines: 0</div>
            <div id="totalChars">Chars: 0</div>
            <div class="other-info">
                <div>Size: <span id="canvasWidth">0</span> x <span id="canvasHeight">0</span></div>
            </div>
        </div>
        <div class="main-btns">
            <button class="restart-btn" onclick="rotate(); updatePreview()" title="Restart Preview">
                <span class="material-symbols-rounded" id="restart-icon">
                    cached
                </span>
                Restart
            </button>
            <button class="save-btn" onclick="saveCode()" title="Save Code to Local Storage">
                <span class="material-symbols-rounded" id="restart-icon">
                    save
                </span>
                Save
            </button>
        </div>
    </footer>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-inline_autocomplete.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.min.js"></script>

    <script src="./resources/scripts/main.js"></script>
    <script src="./resources/scripts/button-funcs.js"></script>
    <script src="./resources/scripts/newEditorTab.js"></script>
    <script src="./resources/scripts/beautify-animation.js"></script>
</body>
</html>