<!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>