-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
123 lines (123 loc) · 7.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fsh HTML</title>
<!-- Boiler plate------ -->
<link rel="icon" href="https://fsh.plus/fsh.png" type="image/png">
<meta name="description" content="Fsh html, Live html editor online">
<!-- ------- -->
<link rel="stylesheet" href="https://fsh.plus/media/style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="https://fsh.plus/fsh.png"/>
<meta name="theme-color" content="#a89c9b">
<!-- ------------------ -->
<link rel="stylesheet" href="/media/style.css">
<script src="/media/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/split.js"></script>
<script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
</head>
<body>
<div id="editors">
<dialog id="settings">
<button class="close" onclick="this.parentElement.close()">x</button>
<h2>Settings</h2>
<label for="opttabsize">Tab size:</label>
<select id="opttabsize" onchange="window.monaco.editor.getEditors().forEach(t=>t.getModel().updateOptions({ tabSize: Number(this.value) }))">
<option>2</option>
<option>3</option>
<option>4</option>
<option>8</option>
</select>
<br>
<label for="opttheme">Theme:</label>
<select id="opttheme" onchange="window.monaco.editor.getEditors().forEach(t=>t.updateOptions({ theme: this.value }))">
<option value="vs-dark">Dark</option>
<option value="vs">Light</option>
<option value="hc-black">Dark (HC)</option>
<option value="hc-light">Light (HC)</option>
</select>
<br>
<label for="optminmap">Minimap:</label>
<select id="optminmap" onchange="window.monaco.editor.getEditors().forEach(t=>t.updateOptions({ minimap: {enabled: this.value=='true'} }))">
<option value="false">No</option>
<option value="true">Yes</option>
</select>
<br>
<p>Spaces:</p>
<input checked type="checkbox" id="optspacehtml" onchange="document.getElementById('html').style.display = (this.checked ? '' : 'none');document.getElementById('h-html').style.display = (this.checked ? '' : 'none');layout()">
<label for="optspacehtml">HTML</label>
<br>
<input checked type="checkbox" id="optspacecss" onchange="document.getElementById('css').style.display = (this.checked ? '' : 'none');document.getElementById('h-css').style.display = (this.checked ? '' : 'none');layout()">
<label for="optspacecss">CSS</label>
<br>
<input checked type="checkbox" id="optspacejs" onchange="document.getElementById('js').style.display = (this.checked ? '' : 'none');document.getElementById('h-js').style.display = (this.checked ? '' : 'none');layout()">
<label for="optspacejs">JS</label>
<br>
<p>Features:</p>
<input checked type="checkbox" id="console-enabled" onchange="document.getElementById('console').style.display = (this.checked ? '' : 'none');document.querySelector('.gutter.gutter-vertical').style.display = (this.checked ? '' : 'none')">
<label for="console-enabled">Console</label>
<br>
<input checked type="checkbox" id="freeze">
<label for="freeze">Prevent browser freeze</label>
</dialog>
<dialog id="presets">
<button class="close" onclick="this.parentElement.close()">x</button>
<h2>Presets</h2>
<button onclick="setPreset('blank')">Blank</button>
<button onclick="setPreset('default')">Default</button>
</dialog>
<button onclick="document.getElementById('settings').showModal()" class="setting"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256"><!--Fsh icons--><path fill-rule="evenodd" clip-rule="evenodd" d="M128 203C169.421 203 203 169.421 203 128C203 86.5786 169.421 53 128 53C86.5786 53 53 86.5786 53 128C53 169.421 86.5786 203 128 203ZM128 160C145.673 160 160 145.673 160 128C160 110.327 145.673 96 128 96C110.327 96 96 110.327 96 128C96 145.673 110.327 160 128 160Z"/><path d="M105.303 32.0485C105.799 25.8098 111.007 21 117.265 21H137.735C143.993 21 149.201 25.8098 149.697 32.0485L152 61H103L105.303 32.0485Z"/><path d="M105.303 222.952C105.799 229.19 111.007 234 117.265 234H137.735C143.993 234 149.201 229.19 149.697 222.952L152 194H103L105.303 222.952Z"/><path d="M222.952 105.303C229.19 105.799 234 111.007 234 117.265L234 137.735C234 143.993 229.19 149.201 222.952 149.697L194 152L194 103L222.952 105.303Z"/><path d="M32.0485 105.303C25.8098 105.799 21 111.007 21 117.265L21 137.735C21 143.993 25.8098 149.201 32.0485 149.697L61 152L61 103L32.0485 105.303Z"/><path d="M180.068 43.7046C184.83 39.6387 191.917 39.9177 196.345 44.3453L210.809 58.8087C215.236 63.2364 215.515 70.3241 211.449 75.086L192.368 97.4336L157.72 62.7854L180.068 43.7046Z"/><path d="M43.951 179.34C39.8966 184.103 40.1806 191.181 44.6033 195.604L59.3963 210.397C63.819 214.819 70.8972 215.103 75.66 211.049L97.7846 192.215L62.7845 157.215L43.951 179.34Z"/><path d="M211.059 179.316C215.119 184.078 214.838 191.162 210.413 195.587L195.939 210.061C191.513 214.487 184.43 214.768 179.668 210.707L157.567 191.864L192.215 157.216L211.059 179.316Z"/><path d="M75.6599 43.9512C70.8971 39.8969 63.819 40.1808 59.3962 44.6036L44.6033 59.3964C40.1806 63.8192 39.8967 70.8973 43.951 75.6601L62.7846 97.7848L97.7846 62.7848L75.6599 43.9512Z"/></svg></button>
<button onclick="document.getElementById('presets').showModal()" class="presets">Presets</button>
<div id="h-html"><img src="/media/html.svg" class="icon"><p class="icon-text">HTML</p></div>
<div id="html"></div>
<div id="h-css"><img src="/media/css.svg" class="icon"><p class="icon-text">CSS</p></div>
<div id="css"></div>
<div id="h-js"><img src="/media/js.svg" class="icon"><p class="icon-text">JS</p></div>
<div id="js"></div>
<script>
require.config({ paths: { vs: 'https://unpkg.com/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
monaco.editor.create(document.getElementById('html'), {
value: `<!DOCTYPE html>\n<html lang="en">\n <head>\n \n </head>\n <body>\n \n </body>\n</html>`,
language: "html",
scrollBeyondLastLine: true,
readOnly: false,
automaticLayout: true,
minimap: {enabled: false},
theme: "vs-dark"
});
monaco.editor.create(document.getElementById('css'), {
value: `body {\n background-color: black;\n color: white;\n font-family: Arial;\n}`,
language: "css",
scrollBeyondLastLine: true,
readOnly: false,
automaticLayout: true,
minimap: {enabled: false},
theme: "vs-dark"
});
monaco.editor.create(document.getElementById('js'), {
language: "javascript",
scrollBeyondLastLine: true,
readOnly: false,
automaticLayout: true,
minimap: {enabled: false},
theme: "vs-dark"
});
let editors = window.monaco.editor.getEditors();
editors.forEach(t=>t.getModel().updateOptions({ tabSize: 2 }));
editors.forEach(t=>t.onDidChangeModelContent(()=>{up()}));
});
</script>
</div>
<div id="view">
<div class="render-div">
<iframe id="render" title="Rendered content"></iframe>
</div>
<div class="console" id="console">
<p id="readout"># Console</p>
</div>
</div>
</body>
</html>