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.
331 lines
10 KiB
HTML
331 lines
10 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;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
.header {
|
|
background: #1b1b2b;
|
|
padding: 15px 20px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
position: relative; /* Für absolute Positionierung des Buttons */
|
|
}
|
|
|
|
.button {
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
background: #2b2c3b;
|
|
border: none;
|
|
color: #ff79c6;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
#file-system-button {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20px;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#reload-button{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20px;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#option-button {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 80px;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.button:hover {
|
|
background: #32334a;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #ff79c6;
|
|
}
|
|
.main {
|
|
flex: 1;
|
|
padding: 15px;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin; /* Firefox */
|
|
scrollbar-color: #ff79c6 #2b2c3b;
|
|
}
|
|
.main::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.main::-webkit-scrollbar-track {
|
|
background: #2b2c3b;
|
|
border-radius: 4px;
|
|
}
|
|
.main::-webkit-scrollbar-thumb {
|
|
background-color: #ff79c6;
|
|
border-radius: 4px;
|
|
border: 2px solid #2b2c3b;
|
|
}
|
|
.tool-card {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #2b2c3b;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
transition: transform 0.2s;
|
|
color: inherit; /* Vererbt die Textfarbe */
|
|
text-decoration: none; /* Entfernt die Unterstreichung */
|
|
}
|
|
|
|
.tool-card:hover {
|
|
transform: scale(1.02);
|
|
background-color: #32334a;
|
|
}
|
|
|
|
.tool-card img {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-right: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.tool-info {
|
|
flex-grow: 1;
|
|
color: #ff79c6;
|
|
text-align: left;
|
|
}
|
|
|
|
.tool-info h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tool-info p {
|
|
margin: 5px 0 0;
|
|
font-size: 14px;
|
|
color: #bbb;
|
|
}
|
|
|
|
.tool-action {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.tool-action button {
|
|
background: #ff79c6;
|
|
border: none;
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.tool-action button:hover {
|
|
background: #ff47b4;
|
|
}
|
|
|
|
.tool-action button.disabled {
|
|
background: #777;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tool-action button.running {
|
|
background: #ffcc00;
|
|
cursor: progress;
|
|
}
|
|
|
|
.footer {
|
|
background: #1b1b2b;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #aaa;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<button onclick="getNewContent()" class="button" id="reload-button">↻</button>
|
|
<button onclick="openEinst()" class="button" id="option-button">⚙️</button>
|
|
<h1>Toolbox</h1>
|
|
<button onclick="openFileSystem()" id="file-system-button" class="button">📁</button>
|
|
</div>
|
|
<div class="main" id="toolbox">
|
|
<!-- Tool Cards werden hier dynamisch geladen -->
|
|
</div>
|
|
<div class="footer">
|
|
<!--Schmidti.Digital © 2024-->
|
|
</div>
|
|
<script>
|
|
function getNewContent(){
|
|
saucer.exposed.getNewContent();
|
|
}
|
|
|
|
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');
|
|
if (toolCard) {
|
|
const toolId = toolCard.getAttribute('data-tool-id');
|
|
|
|
if (sessionStorage.getItem(`toolButtonDisabled_${toolId}`) !== 'true') {
|
|
console.log(`Disabling button for tool ID: ${toolId}`);
|
|
saucer.exposed.run_lua(parseInt(toolId, 10));
|
|
|
|
// Button deaktivieren
|
|
button.disabled = true;
|
|
button.classList.add('running');
|
|
button.textContent = 'Wird ausgeführt...';
|
|
|
|
// Speichern des Zustands im sessionStorage
|
|
sessionStorage.setItem(`toolButtonDisabled_${toolId}`, 'true');
|
|
} else {
|
|
console.log(`Button is already disabled for tool ID: ${toolId}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
function test(){
|
|
saucer.exposed.debug_print();
|
|
}
|
|
|
|
function openFileSystem() {
|
|
saucer.exposed.open_file_system();
|
|
}
|
|
|
|
function reloadContent() {
|
|
const toolbox = document.getElementById('toolbox');
|
|
|
|
// Toolbox leeren
|
|
toolbox.innerHTML = '';
|
|
|
|
// Toolbox-Daten neu abrufen
|
|
saucer.exposed.getToolboxItems().then(jsonString => {
|
|
const m_toolboxItems = JSON.parse(jsonString);
|
|
|
|
m_toolboxItems.forEach(item => {
|
|
const iconSrc = item.icon.startsWith('data:image/png;base64,')
|
|
? item.icon
|
|
: `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>
|
|
`;
|
|
|
|
toolbox.innerHTML += toolCardHTML;
|
|
});
|
|
|
|
// Überprüfen und Wiederherstellen des Zustands der Buttons
|
|
document.querySelectorAll('.tool-card').forEach(card => {
|
|
const toolId = card.getAttribute('data-tool-id');
|
|
const button = card.querySelector('button');
|
|
if (sessionStorage.getItem(`toolButtonDisabled_${toolId}`) === 'true') {
|
|
button.disabled = true;
|
|
button.classList.add('running');
|
|
button.textContent = 'Wird ausgeführt...';
|
|
}
|
|
});
|
|
}).catch(error => console.error('Fehler beim Abrufen der Toolbox-Elemente:', error));
|
|
}
|
|
|
|
function enableButtonByToolId(toolId) {
|
|
saucer.exposed.debug_print();
|
|
// Finden Sie den Button mit dem entsprechenden data-tool-id
|
|
const button = document.querySelector(`.tool-card[data-tool-id='${toolId}']`);
|
|
if (button) {
|
|
button.disabled = false;
|
|
button.classList.remove('running');
|
|
button.textContent = 'Einst';
|
|
// Speichern des Zustands im sessionStorage
|
|
sessionStorage.setItem(`toolButtonDisabled_${toolId}`, 'false');
|
|
} else {
|
|
console.error('Button mit Tool-ID ' + toolId + ' nicht gefunden.');
|
|
}
|
|
}
|
|
|
|
function openEinst(){
|
|
event.stopPropagation();
|
|
console.log('Einst Button geklickt!');
|
|
saucer.exposed.openEinst();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const toolbox = document.getElementById('toolbox');
|
|
|
|
saucer.exposed.getToolboxItems().then(jsonString => {
|
|
const m_toolboxItems = JSON.parse(jsonString);
|
|
|
|
m_toolboxItems.forEach(item => {
|
|
const iconSrc = item.icon.startsWith('data:image/png;base64,')
|
|
? item.icon
|
|
: `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 onclick="openEinst(event)">Einst</button>
|
|
</div>
|
|
</a>
|
|
`;
|
|
|
|
toolbox.innerHTML += toolCardHTML;
|
|
});
|
|
|
|
// Überprüfen und Wiederherstellen des Zustands beim Laden der Seite
|
|
document.querySelectorAll('.tool-card').forEach(card => {
|
|
const toolId = card.getAttribute('data-tool-id');
|
|
const button = card.querySelector('button');
|
|
if (sessionStorage.getItem(`toolButtonDisabled_${toolId}`) === 'true') {
|
|
button.disabled = true;
|
|
button.classList.add('running');
|
|
button.textContent = 'Wird ausgeführt...';
|
|
}
|
|
});
|
|
}).catch(error => console.error('Error fetching toolbox items:', error));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |