-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
134 lines (117 loc) · 7.46 KB
/
index.html
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
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Shamith">
<meta name="description" content="This is an web application used as an web code editor that can execute your code.">
<!-- Open Graph Protocol -->
<meta property="og:title" content="Online Code Editor">
<meta property="og:type" content="application">
<meta property="og:url" content="https://iamwatchdogs.github.io/Online_Code_Editor/">
<meta property="og:image" content="src/OP.png">
<link rel="icon" href="src/icon.png" type="image/icon-x">
<!-- CSS Styling for CodeMirror -->
<link rel="stylesheet" href="dependencies/codemirror-5.65.13/lib/codemirror.css">
<link rel="stylesheet" href="dependencies/codemirror-5.65.13/addon/scroll/simplescrollbars.css">
<link rel="stylesheet" href="dependencies/codemirror-5.65.13/addon/dialog/dialog.css">
<link rel="stylesheet" href="dependencies/codemirror-5.65.13/addon/search/matchesonscrollbar.css">
<!-- My CSS Styling for the page -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Required JavaScript for CodeMirror -->
<script src="dependencies/codemirror-5.65.13/lib/codemirror.js"></script>
<!-- Addon features JavaScript for CodeMirror -->
<script src="dependencies/codemirror-5.65.13/addon/comment/comment.js"></script>
<script src="dependencies/codemirror-5.65.13/addon/edit/closebrackets.js"></script>
<script src="dependencies/codemirror-5.65.13/addon/edit/matchbrackets.js"></script>
<script src="dependencies/codemirror-5.65.13/addon/scroll/simplescrollbars.js"></script>
<script src="dependencies/codemirror-5.65.13/addon/dialog/dialog.js"></script>
<script src="dependencies/codemirror-5.65.13/addon/search/searchcursor.js"></script>
<script src="dependencies/codemirror-5.65.13/addon/search/search.js"></script>
<script src="dependencies/codemirror-5.65.13/addon/scroll/annotatescrollbar.js"></script>
<script src="dependencies/codemirror-5.65.13/addon/search/matchesonscrollbar.js"></script>
<script src="dependencies/codemirror-5.65.13/addon/search/jump-to-line.js"></script>
<script src="dependencies/codemirror-5.65.13/addon/mode/loadmode.js"></script>
<!-- CodeMirror Mode's metadata JavaScript ( for dynamic/lazy mode-loading ) -->
<script src="dependencies/codemirror-5.65.13/mode/meta.js"></script>
<title>Online Code Editor</title>
</head>
<body>
<div class="container">
<header>
<h1><a href="https://github.com/iamwatchdogs/Online_Code_Editor" title="goto @iamwatchdogs/Online_Code_Editor Project" target="_blank">Online Code Editor</a></h1>
</header>
<main>
<form id="code" class="main-container">
<div class="editor">
<div class="editor-options">
<div class="select">
<select name="language" id="language">
<option value="" selected disabled hidden>Select an Language:</option>
<option value="c">C</option>
<option value="cpp">C++</option>
<option value="java">Java</option>
<option value="py">Python</option>
<option value="js">Javascript</option>
</select>
</div>
<div class="select">
<select name="theme" id="theme">
<option value="" selected disabled hidden>Select a theme:</option>
<option value="3024-day">3024-day</option>
<option value="ambiance-mobile">Ambiance Mobile</option>
<option value="ambiance">Ambiance</option>
<option value="ayu-mirage">Ayu Mirage</option>
<option value="cobalt">Cobalt</option>
<option value="colorforth">Colorforth</option>
<option value="dracula">Dracula</option>
<option value="eclipse">Eclipse</option>
<option value="elegant">Elegant</option>
<option value="liquidbyte">Liquidbyte</option>
<option value="mdn-like">MDN-like</option>
<option value="midnight">Midnight</option>
<option value="neat">Neat</option>
<option value="night">Night</option>
<option value="nord">Nord</option>
<option value="paraiso-dark">Paraiso Dark</option>
<option value="paraiso-light">Paraiso Light</option>
<option value="rubyblue">Rubyblue</option>
<option value="seti">Seti</option>
<option value="shadowfox">Shadowfox</option>
<option value="solarized">Solarized</option>
<option value="ssms">SSMS</option>
<option value="the-matrix">The Matrix</option>
<option value="twilight">Twilight</option>
<option value="ttcn">TTCN</option>
<option value="xq-dark">Xq Dark</option>
<option value="xq-light">Xq Light</option>
<option value="younce">Younce</option>
<option value="zenburn">Zenburn</option>
</select>
</div>
</div>
<textarea name="code" id="code-editor"></textarea>
</div>
<div class="input-output">
<div class="result-box input-box">
<label for="input">Input</label>
<textarea name="input" id="input" disabled></textarea>
</div>
<div class="result-box output-box">
<label for="output">Output</label>
<textarea name="output" id="output" disabled></textarea>
</div>
<div class="buttons">
<button type="submit" id="run" disabled>Run</button>
<button type="reset" id="reset">Reset</button>
</div>
</div>
</form>
</main>
<footer>
<p><span class="footer">Made by <a href="https://github.com/iamwatchdogs" title="Goto @iamwatchdogs" target="_blank">Shamith</a>.</span></p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>