Yadciel
f5dd50a9f7
Introduced a new "Einstellungen" (Settings) interface with an HTML page and integrated it into the application workflow. Enhanced Lua execution handling with optional console output and improved UI updates. Adjusted installer UI to better align buttons and icons with user experience.
216 lines
5.7 KiB
HTML
216 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Toolbox</title>
|
|
<link rel="stylesheet" href="../highlight/styles/github-dark.css">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: linear-gradient(to bottom, #1e1e2e, #28293d);
|
|
color: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Linke Sidebar */
|
|
.sidebar {
|
|
width: 200px;
|
|
background-color: #2b2c3b;
|
|
padding: 15px;
|
|
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar h2 {
|
|
color: #ff79c6;
|
|
font-size: 16px;
|
|
margin: 0 0 15px 0;
|
|
}
|
|
|
|
.sidebar ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar ul li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sidebar ul li a {
|
|
text-decoration: none;
|
|
padding: 10px;
|
|
display: block;
|
|
border-radius: 4px;
|
|
background: #32334a;
|
|
color: #fff;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.sidebar ul li a:hover {
|
|
background: #ff79c6;
|
|
color: #000;
|
|
}
|
|
|
|
/* Hauptbereich mit flexibler Anzeige */
|
|
.main-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header {
|
|
background: #1b1b2b;
|
|
padding: 15px 20px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #ff79c6;
|
|
}
|
|
|
|
.back-button {
|
|
background: #2b2c3b;
|
|
border: none;
|
|
color: #ff79c6;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background: #32334a;
|
|
}
|
|
|
|
.editor {
|
|
flex: 1;
|
|
background: #1e1e2e;
|
|
padding: 15px;
|
|
display: none; /* Standardmäßig ausgeblendet */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.editor textarea {
|
|
width: 80%;
|
|
height: 80%;
|
|
background: #2b2c3b;
|
|
color: #fff;
|
|
border: 1px solid #ff79c6;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.editor pre {
|
|
width: 80%;
|
|
margin-top: 10px;
|
|
background: #2b2c3b;
|
|
color: #fff;
|
|
border: 1px solid #32334a;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.footer {
|
|
background: #1b1b2b;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #aaa;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Sidebar für Optionen -->
|
|
<div class="sidebar">
|
|
<h2>Einstellungen</h2>
|
|
<ul>
|
|
<li><a href="#" onclick="showContent('none')">Einstellungen</a></li>
|
|
<li><a href="#" onclick="showContent('editor')">Skript</a></li>
|
|
<li><a href="#" onclick="showContent('none')">Option 3</a></li>
|
|
<li><a href="#" onclick="showContent('none')">Option 4</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Hauptcontainer -->
|
|
<div class="main-container">
|
|
|
|
<!-- Header mit Zurück-Button -->
|
|
<div class="header">
|
|
<h1>Einstellungen</h1>
|
|
<button class="back-button" onclick="goBack()">Zurück</button>
|
|
</div>
|
|
|
|
<!-- Zentraler Editor (Standardmäßig versteckt) -->
|
|
<div class="editor" id="editor">
|
|
<textarea id="code-editor" placeholder="Write Lua code here..."></textarea>
|
|
<pre><code id="highlightedOutput" class="language-lua"></code></pre>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<!--Schmidti.Digital © 2024-->
|
|
</div>
|
|
</div>
|
|
<script src="../highlight/highlight.min.js"></script>
|
|
<script src="../highlight/languages/lua.min.js"></script>
|
|
<script>hljs.highlightAll();</script>
|
|
<script>
|
|
function goBack() {
|
|
saucer.exposed.openIndex();
|
|
}
|
|
|
|
function showContent(option) {
|
|
const editor = document.getElementById('editor');
|
|
|
|
// Editor anzeigen, wenn "Option 2" ausgewählt wird
|
|
if (option === 'editor') {
|
|
editor.style.display = 'flex';
|
|
} else {
|
|
editor.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
const editor = document.getElementById('code-editor');
|
|
const output = document.getElementById('highlightedOutput');
|
|
|
|
editor.addEventListener('input', () => {
|
|
// Update the code block with the content of the textarea
|
|
output.textContent = editor.value;
|
|
// Apply syntax highlighting
|
|
hljs.highlightElement(output);
|
|
});
|
|
|
|
// Optional: Adjust the height of the textarea to match the content
|
|
editor.addEventListener('input', () => {
|
|
// Update the code block with the content of the textarea
|
|
output.textContent = editor.value;
|
|
// Apply syntax highlighting
|
|
hljs.highlightElement(output);
|
|
});
|
|
function adjustTextareaHeight() {
|
|
editor.style.height = 'auto';
|
|
editor.style.height = editor.scrollHeight + 'px';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|