Add "Einstellungen" interface and improve Lua execution flow
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.
This commit is contained in:
215
res/html/einstellungen.html
Normal file
215
res/html/einstellungen.html
Normal file
@@ -0,0 +1,215 @@
|
||||
<!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>
|
||||
@@ -156,6 +156,10 @@
|
||||
<!--Schmidti.Digital © 2024-->
|
||||
</div><script>
|
||||
function runLuaWithId(event) {
|
||||
if (event.target.tagName === 'BUTTON') {
|
||||
// Falls der Button gedrückt wurde, brich die Funktion ab
|
||||
return false;
|
||||
}
|
||||
const button = event.target;
|
||||
|
||||
const toolCard = button.closest('.tool-card');
|
||||
@@ -248,6 +252,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
function openEinst(){
|
||||
event.stopPropagation();
|
||||
console.log('Einst Button geklickt!');
|
||||
saucer.exposed.openEinst();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const toolbox = document.getElementById('toolbox');
|
||||
|
||||
@@ -260,18 +270,18 @@
|
||||
: `data:image/png;base64,${item.icon}`;
|
||||
|
||||
const toolCardHTML = `
|
||||
<a href="${item.url}" class="tool-card"
|
||||
data-tool-id="${item.id}"
|
||||
onclick="runLuaWithId(event)">
|
||||
<img src="${iconSrc}" alt="${item.name}">
|
||||
<div class="tool-info">
|
||||
<h3>${item.name}</h3>
|
||||
<p>${item.description}</p>
|
||||
</div>
|
||||
<div class="tool-action">
|
||||
<button>Einst</button>
|
||||
</div>
|
||||
</a>
|
||||
<a href="${item.url}" class="tool-card"
|
||||
data-tool-id="${item.id}"
|
||||
onclick="runLuaWithId(event)">
|
||||
<img src="${iconSrc}" alt="${item.name}">
|
||||
<div class="tool-info">
|
||||
<h3>${item.name}</h3>
|
||||
<p>${item.description}</p>
|
||||
</div>
|
||||
<div class="tool-action">
|
||||
<button onclick="openEinst(event)">Einst</button>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
toolbox.innerHTML += toolCardHTML;
|
||||
|
||||
Reference in New Issue
Block a user