Yadciel
f49d8874c1
Introduced a Cython-based setup to compile Python files for performance improvements. Updated installer scripts with customtkinter modifications for better UI, added support for additional content loading, and enhanced project structure. Adjusted build commands, streamlined file paths, and integrated new UI elements in the HTML resources.
222 lines
5.8 KiB
HTML
222 lines
5.8 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/dark.css" media="all" title="dark">
|
|
<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: none; /* Standardmäßig ausgeblendet */
|
|
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>
|
|
|
|
<!-- 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>
|
|
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');
|
|
|
|
// Synchronisiere den Inhalt von textarea mit dem Codeblock
|
|
editor.addEventListener('input', () => {
|
|
output.innerHTML = ''; // Vorheriges Highlighting entfernen
|
|
output.textContent = editor.value; // Aktuellen Text setzen
|
|
hljs.highlightAll();
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|