-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
124 lines (113 loc) · 3.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Live Code Editor</title>
<!-- Syntax Highligher -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css"
/>
<!-- Custom Scripts -->
<link rel="stylesheet" href="css/custom-styles.css" />
<link rel="stylesheet" href="css/global-styles.css" />
</head>
<body>
<!-- NavBar -->
<div class="nav-bar row full-width space-between verti-center">
<div class="left-side">
<a class="navbar-brand" href="#">Live Code Editor</a>
</div>
<div class="right-side">
<div class="row verti-center">
<p><span id="time-based-welcome">Hello</span>, User</p>
<div class="user-profile"></div>
</div>
</div>
</div>
<!-- Live Code editor -->
<div id="editor">
<div>
<h2>HTML</h2>
<textarea
name="html"
id="html"
oninput="previewData()"
class="language-html"
></textarea>
</div>
<div>
<h2>CSS</h2>
<textarea name="css" id="css" oninput="previewData()"></textarea>
</div>
<div>
<h2>JS</h2>
<textarea name="js" id="js" oninput="previewData()"></textarea>
</div>
</div>
<!-- Live Code output -->
<div id="output">
<iframe id="output-frame"></iframe>
</div>
<script>
function previewData() {
var HTML = document.getElementById("html").value,
CSS = document.getElementById("css").value,
JS = document.getElementById("js").value,
iframe = document.getElementById("output-frame");
iframe.src =
"data:text/html;charset=utf-8," +
encodeURI(
HTML + "<style>" + CSS + "</style>" + "<script>" + JS + "<\/script>"
);
}
</script>
</body>
<!-- Syntax Highligher -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
<!-- Custom Scripts -->
<script src="js/formatter.js"></script>
<!-- <script>
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "s") {
// Prevent the Save dialog to open
e.preventDefault();
// Trigger the formatter
console.log("CTRL + S");
// Format HTML
HTML = document.getElementById("html");
HTML.addEventListener("input", function () {
HTML.value = formatHTML(HTML.value);
});
// Format CSS
CSS = document.getElementById("css");
CSS.addEventListener("input", function () {
CSS.value = formatCSS(CSS.value);
});
// Format JS
JS = document.getElementById("js");
JS.addEventListener("input", function () {
JS.value = formatJS(JS.value);
});
}
});
</script> -->
<script>
// Greetings
var time = new Date().getHours();
var greeting;
if (time < 12) {
greeting = "Good Morning";
} else if (time < 18) {
greeting = "Good Afternoon";
} else {
greeting = "Good Evening";
}
document.getElementById("time-based-welcome").innerHTML = greeting;
</script>
</html>