mirror of
https://github.com/Equicord/Equicord.git
synced 2025-01-18 13:23:28 -05:00
129 lines
No EOL
4.7 KiB
HTML
129 lines
No EOL
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Equicord QuickCSS Editor</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs/editor/editor.main.css"
|
|
integrity="sha256-tiJPQ2O04z/pZ/AwdyIghrOMzewf+PIvEl1YKbQvsZk=" crossorigin="anonymous"
|
|
referrerpolicy="no-referrer">
|
|
<style>
|
|
html,
|
|
body,
|
|
#container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px;
|
|
background: #1e1e1e;
|
|
color: #1e1e1e;
|
|
border-bottom: 1px solid #444;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
|
|
#container {
|
|
margin-top: 45px;
|
|
background-color: #1e1e1e;
|
|
border: 1px solid #1e1e1e;
|
|
}
|
|
|
|
.toolbar button:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div>
|
|
<button id="selectAllButton"
|
|
style="background: #1e1e1e; color: #ffffff; border: 1px solid transparent; padding: 5px 10px; margin-right: 5px; border-radius: 4px; transition: background 0.3s, border 0.3s;">Select
|
|
All</button>
|
|
<button id="saveButton"
|
|
style="background: #1e1e1e; color: #ffffff; border: 1px solid transparent; padding: 5px 10px; margin-right: 5px; border-radius: 4px; transition: background 0.3s, border 0.3s;">Save</button>
|
|
<button id="copyButton"
|
|
style="background: #1e1e1e; color: #ffffff; border: 1px solid transparent; padding: 5px 10px; border-radius: 4px; transition: background 0.3s, border 0.3s;">Copy</button>
|
|
<button id="undoButton"
|
|
style="background: #1e1e1e; color: #ffffff; border: 1px solid transparent; padding: 5px 10px; border-radius: 4px; transition: background 0.3s, border 0.3s;">Undo</button>
|
|
<button id="redoButton"
|
|
style="background: #1e1e1e; color: #ffffff; border: 1px solid transparent; padding: 5px 10px; border-radius: 4px; transition: background 0.3s, border 0.3s;">Redo</button>
|
|
</div>
|
|
</header>
|
|
<div id="container"></div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs/loader.js"
|
|
integrity="sha256-KcU48TGr84r7unF7J5IgBo95aeVrEbrGe04S7TcFUjs=" crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"></script>
|
|
|
|
<script>
|
|
require.config({
|
|
paths: {
|
|
vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs"
|
|
}
|
|
});
|
|
|
|
require(["vs/editor/editor.main"], () => {
|
|
getCurrentCss().then((css) => {
|
|
const editor = monaco.editor.create(document.getElementById("container"), {
|
|
value: css,
|
|
language: "css",
|
|
theme: getTheme()
|
|
});
|
|
|
|
editor.onDidChangeModelContent(() => setCss(editor.getValue()));
|
|
|
|
document.getElementById('selectAllButton').onclick = () => {
|
|
editor.setSelection(editor.getModel().getFullModelRange());
|
|
editor.focus();
|
|
};
|
|
|
|
document.getElementById('saveButton').onclick = () => {
|
|
const css = editor.getValue();
|
|
const blob = new Blob([css], { type: 'text/css' });
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = 'style.css';
|
|
document.body.append(link);
|
|
link.click();
|
|
link.remove();
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
document.getElementById('copyButton').onclick = () => {
|
|
editor.focus();
|
|
const selection = editor.getSelection();
|
|
editor.setSelection(selection);
|
|
document.execCommand('copy');
|
|
};
|
|
|
|
document.getElementById('undoButton').onclick = () => {
|
|
editor.trigger('keyboard', 'undo');
|
|
};
|
|
|
|
document.getElementById('redoButton').onclick = () => {
|
|
editor.trigger('keyboard', 'redo');
|
|
};
|
|
|
|
window.addEventListener("resize", () => {
|
|
editor.layout();
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |