Skip to content

Commit 52fc163

Browse files
RichardLiuCodeRichardLiuCode
committed
update
0 parents  commit 52fc163

12 files changed

Lines changed: 10826 additions & 0 deletions

‎asset/beautify-css.js‎

Lines changed: 1693 additions & 0 deletions
Large diffs are not rendered by default.

‎asset/beautify-html.js‎

Lines changed: 3242 additions & 0 deletions
Large diffs are not rendered by default.

‎asset/beautify.js‎

Lines changed: 4053 additions & 0 deletions
Large diffs are not rendered by default.

‎darkMode.css‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
/* This is the css that contain darkmode colors */
2+
3+
html,
4+
body {
5+
background-color: rgb(159, 157, 157);
6+
}
7+
8+
.topBar {
9+
background-color: rgb(110, 110, 110);
10+
}
11+
12+
.torBarElementsWrapper button {
13+
background-color: rgb(180, 178, 178);
14+
border-color: black;
15+
color: black;
16+
}
17+
18+
19+
.torBarElementsWrapper button:hover {
20+
background-color: rgba(180, 178, 178, 0.874);
21+
}
22+
23+
.torBarElementsWrapper button:active {
24+
background-color: rgba(180, 178, 178, 0.694);
25+
}
26+
27+
.topBarMenu {
28+
background-color: rgb(110, 110, 110);
29+
border-color: black;
30+
}
31+
32+
.topBarMenu button {
33+
background-color: rgb(184, 184, 184);
34+
border-color: black;
35+
}
36+
37+
38+
#exportMenu hr {
39+
background-color: black;
40+
}
41+
42+
.darkmodeOption {
43+
color: lightgray;
44+
}
45+
46+
47+
#codespaceContainer {
48+
border-color: gray;
49+
}
50+
51+
#htmlEditorTab,
52+
#cssEditorTab,
53+
#jsEditorTab {
54+
background-color: rgb(91, 90, 90);
55+
color: white;
56+
}
57+
58+
#resizeBar {
59+
background-color: aliceblue;
60+
border-color: black;
61+
}
62+
63+
#resizeBar div {
64+
background-color: lightgray;
65+
}
66+
67+
#previewAreaWrapper {
68+
background-color: white;
69+
}
70+
71+
#console {
72+
background-color: rgb(68, 68, 68);
73+
color: white;
74+
}
75+
76+
#consoleInput {
77+
background-color: rgb(68, 68, 68);
78+
color: white;
79+
}
80+
81+
.consoleInputArrow {
82+
background-color: rgb(68, 68, 68);
83+
color: white;
84+
}
85+
86+
#consoleResizeBar {
87+
background-color: aliceblue;
88+
border-color: black;
89+
}
90+
91+
.consoleResizeBarHandle {
92+
background-color: lightgray;
93+
}
94+
95+
#openOrCloseConsoleButton {
96+
background-color: white;
97+
}
98+
99+
#clearConsoleButton {
100+
background-color: white;
101+
}
102+
103+
#codeRunningMessage {
104+
background-color: rgb(2, 242, 2);
105+
color: white;
106+
box-shadow: 0 0 2px 2px lightgray;
107+
}
108+
109+
/* Search JS Library*/
110+
111+
#jsLibSideBar {
112+
background-color: rgb(102, 108, 126);
113+
}
114+
115+
#jsLibSideBar h1 {
116+
color: white;
117+
}
118+
119+
#jsLibSideBar p {
120+
color: white;
121+
}
122+
123+
#jsLibSideBar a {
124+
color: rgb(152, 193, 239);
125+
}
126+
127+
128+
129+
#CDNJSsearchBar .CNDJSSEARCHBARinput {
130+
background-color: rgb(174, 173, 173);
131+
color: white;
132+
border-color: lightgray;
133+
}
134+
135+
#CDNJSsearchBar .CNDJSSEARCHBARinput:focus {
136+
border-color: rgb(163, 211, 247);
137+
}
138+
139+
#CDNJSsearchBar .CNDJSSEARCHBARsub {
140+
border-color: lightgray;
141+
background-color: gray;
142+
color: white;
143+
}
144+
145+
#CDNJSsearchResultDsipalyContainer {
146+
background-color: gray;
147+
border-color: lightgray;
148+
}
149+
150+
#CDNJSsearchResultDsipalyContainer::-webkit-scrollbar {
151+
background-color: white;
152+
}
153+
154+
#CDNJSsearchResultDsipalyContainer::-webkit-scrollbar-thumb {
155+
background-color: rgb(140, 137, 137);
156+
}
157+
158+
#CDNJSsearchResultDsipalyContainer .resultListObject {
159+
background-color: rgb(167, 164, 164);
160+
color: white;
161+
}
162+
163+
#CDNJSsearchResultDsipalyContainer .resultListObjectCodeContent {
164+
background-color: rgb(75, 75, 75);
165+
border-color: white;
166+
}
167+
168+
#CDNJSsearchResultDsipalyContainer .resultListObjectCodeContentCopyButton {
169+
background-color: gray;
170+
color: white;
171+
border-color: white;
172+
}
173+
174+
#CDNJSsearchResultDsipalyContainer .resultListObjectCodeContentCopyButton:hover {
175+
background-color: rgb(143, 142, 142);
176+
}
177+
178+
#CDNJSsearchResultDsipalyContainer .resultListObjectCodeContentCopyButton:active {
179+
background-color: rgb(175, 172, 172);
180+
}
181+
182+
#CDNJSsearchResultDsipalyContainer .resultListObjectDividingLine {
183+
background-color: white;
184+
}
185+
186+
/* Shortcut Guide */
187+
#shortcutsGuideSideBar {
188+
background-color: rgb(102, 108, 126);
189+
}
190+
191+
#shortcutsGuideSideBar h1 {
192+
color: white;
193+
}
194+
195+
#shortcutsGuideSideBar li {
196+
color: white;
197+
}
198+
199+
200+
/* Editor scrollbar*/
201+
202+
.ace_scrollbar::-webkit-scrollbar-track {
203+
background: none;
204+
border-radius: 0px;
205+
}
206+
207+
.ace_scrollbar::-webkit-scrollbar-thumb {
208+
background: #92919180;
209+
border-radius: 0px;
210+
}
211+
212+
.ace_scrollbar::-webkit-scrollbar-thumb:hover {
213+
background: #b1afaf7c;
214+
}

‎icons/CodeIcon.png‎

5.37 KB
Loading

‎icons/errorSymbol.png‎

39.2 KB
Loading

‎index.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Online HTML CSS JavaScript live editor</title>
6+
<link id="style" rel="stylesheet" href="style.css">
7+
<link id="themeStylesheet" rel="stylesheet">
8+
<link rel="icon" href="icons/CodeIcon.png">
9+
<meta name="google-site-verification" content="gXm3zyX0kWeHFMFAqF57ucVEi_a-nGp98t1D4Y2-Xu4" />
10+
<meta name="author" content="Richard Liu">
11+
<meta name="description" content="This is a HTML, CSS, JavaScript editor">
12+
<script src="asset/ace-builds/src-noconflict/ace.js"></script>
13+
<script src="asset/ace-builds/src-noconflict/ext-language_tools.js"></script>
14+
<script src="asset/beautify.js"></script>
15+
<script src="asset/beautify-css.js"></script>
16+
<script src="asset/beautify-html.js"></script>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.js"
18+
integrity="sha512-3FKAKNDHbfUwAgW45wNAvfgJDDdNoTi5PZWU7ak3Xm0X8u0LbDBWZEyPklRebTZ8r+p0M2KIJWDYZQjDPyYQEA=="
19+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
20+
<script defer src="script.js"></script>
21+
22+
</head>
23+
24+
<body>
25+
<div class="topBar">
26+
<div class="torBarElementsWrapper">
27+
<button id="topBarExportBtn">Export</button>
28+
<button id="previewOption">Preview</button>
29+
<button id="getJSLIB">JS library</button>
30+
<button id="getShortcuts">Shortcuts</button>
31+
</div>
32+
</div>
33+
<div class="topBarMenu" id="previewMenu">
34+
<div style="width:100%;height:5px;"></div>
35+
<button id="MaximizeEditorBtn">Maximize Editor</button>
36+
<button id="previewInFullscreen">Maximize Previewer</button>
37+
<button id="WindowFullscreenBtn">Go To Fullscreen Editor</button>
38+
<div class="darkmodeOption">Darkmode<input type="range" id="darkmodeSwitch" min="0" max="1"></div>
39+
</div>
40+
<div class="topBarMenu" id="exportMenu">
41+
<div style="width:100%;height:5px;"></div>
42+
<button id="downloadHTML">Download HTML</button>
43+
<button id="downloadCSS">Download CSS</button>
44+
<button id="downloadJavaScript">Download JavaScript</button>
45+
<hr>
46+
<button id="downloadZip">Download Website as ZIP</button>
47+
</div>
48+
<div id="codespaceContainer">
49+
<div id="editors">
50+
<button id="htmlEditorTab" style="z-index:4;">HTML</button>
51+
<button id="cssEditorTab">CSS</button>
52+
<button id="jsEditorTab">JavaScript</button>
53+
<div id="HTMLeditor"></div>
54+
<div id="CSSeditor"></div>
55+
<div id="JSeditor"></div>
56+
<div id="codeRunningMessage">Your code is running !</div>
57+
</div>
58+
<div id="resizeBar">
59+
<div></div>
60+
</div>
61+
<div id="previewAreaWrapper">
62+
<div id="previewArea">
63+
<iframe id="preview"></iframe>
64+
<div id="consoleResizeBar">
65+
<button id="openOrCloseConsoleButton">Open Console</button>
66+
<div id="consolepanels">
67+
<div class="consoleResizeBarHandle"></div>
68+
<button id="clearConsoleButton">Clear Console</button>
69+
</div>
70+
</div>
71+
<div id="consoleWrapper">
72+
<div id="console"></div>
73+
<div id="consoleInput" contenteditable spellcheck="false"></div>
74+
<div class="consoleInputArrow">&gt;</div>
75+
</div>
76+
<!-- redeploy -->
77+
</div>
78+
</div>
79+
</div>
80+
<div id="jsLibSideBar">
81+
<h1>Search Javascript library</h1>
82+
<p>You can search the <a href="https://cdnjs.com" target="_blank" style="text-decoration:none;">cdnjs</a> here
83+
and add
84+
then to your website.
85+
</p>
86+
<form id="CDNJSsearchBar">
87+
<input class="CNDJSSEARCHBARinput" type="search" placeholder="Search JS Library" name="input">
88+
<input class="CNDJSSEARCHBARsub" type="submit" value="Search">
89+
</form>
90+
<div id="CDNJSsearchResultDsipalyContainer">
91+
<p style="margin:0 auto;text-align:center;font-family:arial;color:white;margin-top:18px;font-size:25px;">
92+
Your result will
93+
be here</p>
94+
</div>
95+
</div>
96+
<div id="shortcutsGuideSideBar">
97+
<h1>Shortcuts</h1>
98+
<ol>
99+
<li>Format code: Alt + Shift + F</li>
100+
<li>Save and run code: Ctrl +S</li>
101+
</ol>
102+
</div>
103+
</body>
104+
105+
</html>

0 commit comments

Comments
 (0)