codeeditor/index.html at main · RichardLiuCode/codeeditor · 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
<!DOCTYPE html>
<html>

<head>
    <title>Online HTML CSS JavaScript live editor</title>
    <link id="style" rel="stylesheet" href="style.css">
    <link id="themeStylesheet" rel="stylesheet">
    <link rel="icon" href="icons/CodeIcon.png">
    <meta name="google-site-verification" content="gXm3zyX0kWeHFMFAqF57ucVEi_a-nGp98t1D4Y2-Xu4" />
    <meta name="author" content="Richard Liu">
    <meta name="description" content="This is a HTML, CSS, JavaScript editor">
    <script src="asset/ace-builds/src-noconflict/ace.js"></script>
    <script src="asset/ace-builds/src-noconflict/ext-language_tools.js"></script>
    <script src="asset/beautify.js"></script>
    <script src="asset/beautify-css.js"></script>
    <script src="asset/beautify-html.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.js"
        integrity="sha512-3FKAKNDHbfUwAgW45wNAvfgJDDdNoTi5PZWU7ak3Xm0X8u0LbDBWZEyPklRebTZ8r+p0M2KIJWDYZQjDPyYQEA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script defer src="script.js"></script>

</head>

<body>
    <div class="topBar">
        <div class="torBarElementsWrapper">
            <button id="topBarExportBtn">Export</button>
            <button id="previewOption">Preview</button>
            <button id="getJSLIB">JS library</button>
            <button id="getShortcuts">Shortcuts</button>
        </div>
    </div>
    <div class="topBarMenu" id="previewMenu">
        <div style="width:100%;height:5px;"></div>
        <button id="MaximizeEditorBtn">Maximize Editor</button>
        <button id="previewInFullscreen">Maximize Previewer</button>
        <button id="WindowFullscreenBtn">Go To Fullscreen Editor</button>
        <div class="darkmodeOption">Darkmode<input type="range" id="darkmodeSwitch" min="0" max="1"></div>
    </div>
    <div class="topBarMenu" id="exportMenu">
        <div style="width:100%;height:5px;"></div>
        <button id="downloadHTML">Download HTML</button>
        <button id="downloadCSS">Download CSS</button>
        <button id="downloadJavaScript">Download JavaScript</button>
        <hr>
        <button id="downloadZip">Download Website as ZIP</button>
    </div>
    <div id="codespaceContainer">
        <div id="editors">
            <button id="htmlEditorTab" style="z-index:4;">HTML</button>
            <button id="cssEditorTab">CSS</button>
            <button id="jsEditorTab">JavaScript</button>
            <div id="HTMLeditor"></div>
            <div id="CSSeditor"></div>
            <div id="JSeditor"></div>
            <div id="codeRunningMessage">Your code is running !</div>
        </div>
        <div id="resizeBar">
            <div></div>
        </div>
        <div id="previewAreaWrapper">
            <div id="previewArea">
                <iframe id="preview"></iframe>
                <div id="consoleResizeBar">
                    <button id="openOrCloseConsoleButton">Open Console</button>
                    <div id="consolepanels">
                        <div class="consoleResizeBarHandle"></div>
                        <button id="clearConsoleButton">Clear Console</button>
                    </div>
                </div>
                <div id="consoleWrapper">
                    <div id="console"></div>
                    <div id="consoleInput" contenteditable spellcheck="false"></div>
                    <div class="consoleInputArrow">&gt;</div>
                </div>
            </div>
        </div>
    </div>
    <div id="jsLibSideBar">
        <h1>Search Javascript library</h1>
        <p>You can search the <a href="https://cdnjs.com" target="_blank" style="text-decoration:none;">cdnjs</a> here
            and add
            then to your website.
        </p>
        <form id="CDNJSsearchBar">
            <input class="CNDJSSEARCHBARinput" type="search" placeholder="Search JS Library" name="input">
            <input class="CNDJSSEARCHBARsub" type="submit" value="Search">
        </form>
        <div id="CDNJSsearchResultDsipalyContainer">
            <p style="margin:0 auto;text-align:center;font-family:arial;color:white;margin-top:18px;font-size:25px;">
                Your result will
                be here</p>
        </div>
    </div>
    <div id="shortcutsGuideSideBar">
        <h1>Shortcuts</h1>
        <ol>
            <li>Format code: Alt + Shift + F</li>
            <li>Save and run code: Ctrl +S</li>
        </ol>
    </div>
</body>

</html>