Yadciel
0ce126fbfc
Implementiert ein Einstellungsfenster zur Konfiguration von Lua-Skript-Timeouts und anderen Einstellungen. Ermöglicht die Ausführung von Lua-Skripten in einem separaten Thread mit Abbruchfunktion und Timeout-Mechanismus. Verbessert die Benutzererfahrung durch Hinzufügen der Möglichkeit, das Toolbox-Verzeichnis im Dateisystem zu öffnen. Behebt Fokusprobleme und verbessert die Fensterpositionierung und -größe.
262 lines
7.4 KiB
HTML
262 lines
7.4 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>
|
|
<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;
|
|
}
|
|
|
|
.general {
|
|
flex: 1;
|
|
background: #1e1e2e;
|
|
padding: 15px;
|
|
display: flex; /* Standardmäßig sichtbar */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.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('general')">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()">←</button>
|
|
</div>
|
|
|
|
<!-- Zentraler Editor (Standardmäßig versteckt) -->
|
|
<div class="editor" id="editor">
|
|
<label for="code-editor"></label>
|
|
<textarea id="code-editor" placeholder="Write Lua code here..."></textarea>
|
|
<pre><code id="highlightedOutput" class="language-lua"></code></pre>
|
|
</div>
|
|
|
|
<div class="general" id="general">
|
|
<div style="width: 80%; max-width: 520px;">
|
|
<h3 style="margin: 0 0 10px 0;">Tool</h3>
|
|
<div id="tool-name" style="margin-bottom: 20px; color: #ff79c6;">-</div>
|
|
|
|
<label for="lua-timeout">Lua Timeout (Sekunden)</label>
|
|
<input id="lua-timeout" type="number" min="0" step="1" value="30"
|
|
style="width: 100%; margin-top: 6px; padding: 8px; border-radius: 4px; border: 1px solid #32334a; background: #2b2c3b; color: #fff;">
|
|
<div style="margin-top: 6px; font-size: 12px; color: #aaa;">
|
|
0 = kein Timeout
|
|
</div>
|
|
|
|
<button id="save-settings" class="back-button" style="margin-top: 16px;">Speichern</button>
|
|
<div id="save-status" style="margin-top: 8px; font-size: 12px; color: #aaa;"></div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<!--Schmidti.Digital © 2024-->
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function goBack() {
|
|
saucer.exposed.openIndex();
|
|
}
|
|
|
|
function showContent(option) {
|
|
const general = document.getElementById('general');
|
|
const editor = document.getElementById('editor');
|
|
|
|
if (option === 'editor') {
|
|
editor.style.display = 'flex';
|
|
general.style.display = 'none';
|
|
} else if (option === 'general') {
|
|
general.style.display = 'flex';
|
|
editor.style.display = 'none';
|
|
} else {
|
|
editor.style.display = 'none';
|
|
general.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const editor = document.getElementById('code-editor');
|
|
const output = document.getElementById('highlightedOutput');
|
|
showContent('general');
|
|
|
|
// Synchronisiere den Inhalt von textarea mit dem Codeblock
|
|
editor.addEventListener('input', () => {
|
|
output.innerHTML = ''; // Vorheriges Highlighting entfernen
|
|
output.textContent = editor.value; // Aktuellen Text setzen
|
|
if (window.hljs && typeof hljs.highlightAll === 'function') {
|
|
hljs.highlightAll();
|
|
}
|
|
});
|
|
|
|
const toolName = document.getElementById('tool-name');
|
|
const timeoutInput = document.getElementById('lua-timeout');
|
|
const saveBtn = document.getElementById('save-settings');
|
|
const saveStatus = document.getElementById('save-status');
|
|
|
|
saucer.exposed.getActiveToolName().then(name => {
|
|
toolName.textContent = name || '-';
|
|
});
|
|
|
|
saucer.exposed.getLuaTimeoutSeconds().then(value => {
|
|
timeoutInput.value = value;
|
|
});
|
|
|
|
|
|
saveBtn.addEventListener('click', () => {
|
|
const seconds = parseInt(timeoutInput.value, 10);
|
|
saucer.exposed.setLuaTimeoutSeconds(Number.isFinite(seconds) ? seconds : 0);
|
|
saveStatus.textContent = 'Gespeichert';
|
|
setTimeout(() => {
|
|
saveStatus.textContent = '';
|
|
}, 1500);
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|