Dateien hochladen nach „REST“
Aktualisierung der Oberfläche Auslagerung des Javaskript Codes Anpassung CSS (Ergänzung von Disabled Styles) REST Antworten vereinheitlichenmain
parent
9cf70dc3a5
commit
ee9e73da66
47
REST/app.py
47
REST/app.py
|
|
@ -10,54 +10,67 @@ CORS(app)
|
||||||
|
|
||||||
initialized = False
|
initialized = False
|
||||||
|
|
||||||
|
def create_response(status_code, description):
|
||||||
|
return jsonify({
|
||||||
|
'status': status_code,
|
||||||
|
'description': description
|
||||||
|
})
|
||||||
|
|
||||||
@app.route('/trng/randomNum/init', methods=['GET'])
|
@app.route('/trng/randomNum/init', methods=['GET'])
|
||||||
def initialize_generator():
|
def initialize_generator():
|
||||||
global initialized # Zugriff auf die globale Variable
|
global initialized
|
||||||
|
|
||||||
#parameter 1 und 2 sind default values für Tests
|
|
||||||
result = analyze_data(int(1), int(1), startup=True)
|
result = analyze_data(int(1), int(1), startup=True)
|
||||||
|
|
||||||
if result is True:
|
if result is True:
|
||||||
initialized = True
|
initialized = True
|
||||||
return jsonify({'message': 'successful operation; random number generator is ready and random numbers can be requested'}), 200
|
return create_response(200, 'Successful operation; random number generator is ready and random numbers can be requested')
|
||||||
|
if random_numbers == 400:
|
||||||
|
return create_response(500, 'Tests failed, try again')
|
||||||
|
if random_numbers is False:
|
||||||
|
return create_response(500, 'Unable to generate random numbers. Restart/Reset System')
|
||||||
else:
|
else:
|
||||||
return jsonify({'error': 'Unable to initialize the random number generator within a timeout of 60 seconds.'}), 555
|
return create_response(555, 'Unable to initialize the random number generator within a timeout of 60 seconds')
|
||||||
|
|
||||||
|
|
||||||
@app.route('/trng/randomNum/getRandom', methods=['GET'])
|
@app.route('/trng/randomNum/getRandom', methods=['GET'])
|
||||||
def get_random_numbers():
|
def get_random_numbers():
|
||||||
global initialized # Zugriff auf die globale Variable
|
global initialized
|
||||||
quantity = request.args.get('quantity')
|
quantity = request.args.get('quantity')
|
||||||
bits = request.args.get('numBits')
|
bits = request.args.get('numBits')
|
||||||
|
|
||||||
if not quantity.isdigit() or not bits.isdigit():
|
if not quantity.isdigit() or not bits.isdigit():
|
||||||
return jsonify({'error': 'Invalid input. Quantity and bits must be numeric.'}), 400
|
return create_response(400, 'Invalid input. Quantity and bits must be numeric.')
|
||||||
|
|
||||||
if int(quantity) <= 0 or int(bits) <= 0:
|
if int(quantity) <= 0 or int(bits) <= 0:
|
||||||
return jsonify({'error': 'Invalid input. Quantity and bits must be positive integers.'}), 400
|
return create_response(400, 'Invalid input. Quantity and bits must be positive integers.')
|
||||||
|
|
||||||
# Überprüfe den Initialisierungsstatus
|
|
||||||
if not initialized:
|
if not initialized:
|
||||||
return jsonify({'error': 'system not ready; try init'}), 432
|
return create_response(432, 'System not ready; try init')
|
||||||
|
|
||||||
random_numbers = analyze_data(int(quantity), int(bits), startup=False)
|
random_numbers = analyze_data(int(quantity), int(bits), startup=False)
|
||||||
|
|
||||||
|
if random_numbers == 400:
|
||||||
|
return create_response(500, 'Tests failed, try again')
|
||||||
if random_numbers is False:
|
if random_numbers is False:
|
||||||
return jsonify({'error': 'Unable to generate random numbers.'}), 500
|
return create_response(500, 'Unable to generate random numbers. Restart/Reset System')
|
||||||
if random_numbers:
|
if random_numbers:
|
||||||
data = {'randomNumbers': random_numbers} # Erstellen des Datenobjekts mit dem JSON-String
|
data = {
|
||||||
return jsonify(data), 200
|
'status': 200,
|
||||||
|
'description': 'Successful operation; HEX-encoded bit arrays (with leading zeros if required)',
|
||||||
|
'randomNumbers': random_numbers
|
||||||
|
}
|
||||||
|
return jsonify(data)
|
||||||
else:
|
else:
|
||||||
return jsonify({'error': 'Unable to generate random numbers.'}), 500
|
return create_response(500, 'Unable to generate random numbers.')
|
||||||
|
|
||||||
@app.route('/trng/randomNum/shutdown', methods=['GET'])
|
@app.route('/trng/randomNum/shutdown', methods=['GET'])
|
||||||
def shutdown_generator():
|
def shutdown_generator():
|
||||||
global initialized # Zugriff auf die globale Variable
|
global initialized
|
||||||
|
|
||||||
initialized = False # Setze den Initialisierungsstatus zurück
|
initialized = False
|
||||||
|
|
||||||
# Beispielantwort
|
return create_response(200, "Successful operation; random number generator has been set to 'standby mode'")
|
||||||
return jsonify({'message': "successful operation; random number generator has been set to 'standby mode'"}), 200
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
|
|
||||||
|
|
|
||||||
152
REST/index.html
152
REST/index.html
|
|
@ -1,6 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
<title>GMTROM - True Random Number Generator</title>
|
<title>GMTROM - True Random Number Generator</title>
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
<link rel="icon" type="image/png href="logomiddle.png">
|
<link rel="icon" type="image/png href="logomiddle.png">
|
||||||
|
|
@ -11,144 +12,27 @@
|
||||||
<form id="randomForm">
|
<form id="randomForm">
|
||||||
<input type="button" value="Initialize" id="initButton"><br><br>
|
<input type="button" value="Initialize" id="initButton"><br><br>
|
||||||
<label for="quantity">Quantity of Random Numbers:</label>
|
<label for="quantity">Quantity of Random Numbers:</label>
|
||||||
<input type="number" id="quantity" name="quantity"><br><br>
|
<input type="number" id="quantity" name="quantity" min="1"><br><br>
|
||||||
<label for="bits">Number of Bits per Random Number:</label>
|
<label for="bits">Number of Bits per Random Number:</label>
|
||||||
<input type="number" id="bits" name="bits"><br><br>
|
<input type="number" id="bits" name="bits" min="1"><br><br>
|
||||||
<input type="button" value="Generate" id="generateButton">
|
<input type="button" value="Generate" id="generateButton">
|
||||||
<input type="button" value="Shutdown" id="shutdownButton">
|
<input type="button" value="Shutdown" id="shutdownButton">
|
||||||
|
|
||||||
|
<div id="status"></div>
|
||||||
|
<div id="description"></div>
|
||||||
</form>
|
</form>
|
||||||
|
<!-- Overlay -->
|
||||||
|
<div id="overlay" class="overlay hidden"></div>
|
||||||
|
|
||||||
|
<div id="loadingSpinner" class="loading-spinner hidden">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
</div>
|
||||||
|
<div id="loadingText" class="loading-text"></div>
|
||||||
|
|
||||||
|
|
||||||
<div id="status"></div>
|
|
||||||
<div id="result"></div>
|
<div id="result"></div>
|
||||||
|
|
||||||
<script>
|
<script src="script.js"></script>
|
||||||
document.getElementById('initButton').addEventListener('click', function() {
|
|
||||||
fetch('https://172.16.78.57:5000/trng/randomNum/init')
|
|
||||||
.then(response => {
|
|
||||||
document.getElementById('status').innerText = 'Status: ' + response.status;
|
|
||||||
if (response.status === 200) {
|
|
||||||
document.getElementById('result').innerText = 'Successful operation; random number generator has been set to "standby mode".';
|
|
||||||
console.log('Initialisierung erfolgreich');
|
|
||||||
} else {
|
|
||||||
console.log('Fehler beim Initialisieren');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Fehler beim Initialisieren:', error);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('generateButton').addEventListener('click', function(event) {
|
|
||||||
var quantity = document.getElementById('quantity').value;
|
|
||||||
var bits = document.getElementById('bits').value;
|
|
||||||
|
|
||||||
var url = 'https://172.16.78.57:5000/trng/randomNum/getRandom';
|
|
||||||
if (quantity && bits) {
|
|
||||||
url += '?quantity=' + quantity + '&numBits=' + bits;
|
|
||||||
}
|
|
||||||
|
|
||||||
fetch(url)
|
|
||||||
.then(response => {
|
|
||||||
document.getElementById('status').innerText = 'Status: ' + response.status;
|
|
||||||
return response.json();
|
|
||||||
})
|
|
||||||
.then(data => {
|
|
||||||
var resultDiv = document.getElementById('result');
|
|
||||||
resultDiv.innerHTML = ''; // Clear previous results
|
|
||||||
|
|
||||||
var table = document.createElement('table');
|
|
||||||
table.classList.add('table');
|
|
||||||
var thead = document.createElement('thead');
|
|
||||||
var tbody = document.createElement('tbody');
|
|
||||||
var trHead = document.createElement('tr');
|
|
||||||
var thNr = document.createElement('th');
|
|
||||||
var thCopy = document.createElement('th');
|
|
||||||
var thRandom = document.createElement('th');
|
|
||||||
var copyAllButton = document.createElement('button');
|
|
||||||
|
|
||||||
thNr.textContent = 'ID';
|
|
||||||
thCopy.textContent = ' ';
|
|
||||||
thRandom.textContent = 'Random Number';
|
|
||||||
|
|
||||||
trHead.appendChild(thNr);
|
|
||||||
trHead.appendChild(thCopy);
|
|
||||||
trHead.appendChild(thRandom);
|
|
||||||
thead.appendChild(trHead);
|
|
||||||
table.appendChild(thead);
|
|
||||||
|
|
||||||
var hexNumbers = JSON.parse(data.randomNumbers);
|
|
||||||
for (var i = 0; i < hexNumbers.length; i++) {
|
|
||||||
var tr = document.createElement('tr');
|
|
||||||
var tdNr = document.createElement('td');
|
|
||||||
var tdCopy = document.createElement('td');
|
|
||||||
var tdRandom = document.createElement('td');
|
|
||||||
var copyButton = document.createElement('button');
|
|
||||||
|
|
||||||
tdNr.textContent = (i + 1).toString();
|
|
||||||
tdRandom.textContent = hexNumbers[i];
|
|
||||||
copyButton.textContent = 'Copy';
|
|
||||||
copyButton.classList.add('copy-button');
|
|
||||||
|
|
||||||
copyButton.addEventListener('click', function() {
|
|
||||||
copyToClipboard(this.parentElement.nextElementSibling.textContent);
|
|
||||||
});
|
|
||||||
|
|
||||||
tdCopy.appendChild(copyButton);
|
|
||||||
tr.appendChild(tdNr);
|
|
||||||
tr.appendChild(tdCopy);
|
|
||||||
tr.appendChild(tdRandom);
|
|
||||||
tbody.appendChild(tr);
|
|
||||||
}
|
|
||||||
|
|
||||||
table.appendChild(tbody);
|
|
||||||
resultDiv.appendChild(table);
|
|
||||||
|
|
||||||
copyAllButton.textContent = 'Copy all';
|
|
||||||
copyAllButton.classList.add('copy-button');
|
|
||||||
|
|
||||||
copyAllButton.addEventListener('click', function() {
|
|
||||||
var allHexNumbers = hexNumbers.join(', ');
|
|
||||||
copyToClipboard(allHexNumbers);
|
|
||||||
});
|
|
||||||
|
|
||||||
resultDiv.insertBefore(copyAllButton, table);
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Fehler beim Abrufen der Daten:', error);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function copyToClipboard(text) {
|
|
||||||
var textArea = document.createElement('textarea');
|
|
||||||
textArea.value = text;
|
|
||||||
document.body.appendChild(textArea);
|
|
||||||
textArea.select();
|
|
||||||
document.execCommand('copy');
|
|
||||||
document.body.removeChild(textArea);
|
|
||||||
|
|
||||||
// Anzeigen eines Popups zur Bestätigung der Kopie
|
|
||||||
window.alert('Der Text wurde in die Zwischenablage kopiert!');
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('shutdownButton').addEventListener('click', function() {
|
|
||||||
fetch('https://172.16.78.57:5000/trng/randomNum/shutdown')
|
|
||||||
.then(response => {
|
|
||||||
document.getElementById('status').innerText = 'Status: ' + response.status;
|
|
||||||
if (response.status === 200) {
|
|
||||||
document.getElementById('result').innerText = 'Successful operation; random number generator has been shut down.';
|
|
||||||
console.log('Shutdown erfolgreich');
|
|
||||||
//document.getElementById('quantity').value = ''; // Textfeld "Quantity" zurücksetzen
|
|
||||||
//document.getElementById('bits').value = ''; // Textfeld "Bits" zurücksetzen
|
|
||||||
//document.getElementById('status').innerText = ''; // Element "status" zurücksetzen
|
|
||||||
//document.getElementById('result').innerText = ''; // Element "result" zurücksetzen
|
|
||||||
} else {
|
|
||||||
console.log('Fehler beim Shutdown');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.error('Fehler beim Shutdown:', error);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,236 @@
|
||||||
|
// Initialisieren der Eingabefelder
|
||||||
|
var quantityInput = document.getElementById('quantity');
|
||||||
|
var bitsInput = document.getElementById('bits');
|
||||||
|
|
||||||
|
// Deaktivieren der Eingabefelder
|
||||||
|
quantityInput.disabled = true;
|
||||||
|
bitsInput.disabled = true;
|
||||||
|
|
||||||
|
/*------------------------------------------Init Button-----------------------------------------------*/
|
||||||
|
document.getElementById('initButton').addEventListener('click', function() {
|
||||||
|
|
||||||
|
//zurücksetzen von status und description
|
||||||
|
document.getElementById('description').innerText = '';
|
||||||
|
document.getElementById('status').innerText = '';
|
||||||
|
document.getElementById('result').innerText = '';
|
||||||
|
|
||||||
|
showLoadingSpinner('Start-up tests and system initialization in progress.');
|
||||||
|
|
||||||
|
fetch('https://172.16.78.57:5000/trng/randomNum/init')
|
||||||
|
.then(response => {
|
||||||
|
document.getElementById('status').innerText = 'Status: ' + response.status;
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
document.getElementById('description').innerText = data.description;
|
||||||
|
console.log('Initialisierung erfolgreich');
|
||||||
|
|
||||||
|
// Deaktiviere Generate und Shutdown Buttons
|
||||||
|
//document.getElementById('generateButton').disabled = false;
|
||||||
|
document.getElementById('shutdownButton').disabled = false;
|
||||||
|
// Aktiviere Initialize Button
|
||||||
|
document.getElementById('initButton').disabled = true;
|
||||||
|
|
||||||
|
// Aktivieren der Eingabefelder
|
||||||
|
quantityInput.disabled = false;
|
||||||
|
bitsInput.disabled = false;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Fehler beim Initialisieren:', error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoadingSpinner();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/*------------------------------------------Generate Button-----------------------------------------------*/
|
||||||
|
document.getElementById('generateButton').addEventListener('click', function(event) {
|
||||||
|
// Zurücksetzen von status und description
|
||||||
|
document.getElementById('description').innerText = '';
|
||||||
|
document.getElementById('status').innerText = '';
|
||||||
|
document.getElementById('result').innerText = '';
|
||||||
|
|
||||||
|
showLoadingSpinner('Generating and testing random numbers.');
|
||||||
|
|
||||||
|
var quantity = document.getElementById('quantity').value;
|
||||||
|
var bits = document.getElementById('bits').value;
|
||||||
|
|
||||||
|
var url = 'https://172.16.78.57:5000/trng/randomNum/getRandom';
|
||||||
|
if (quantity && bits) {
|
||||||
|
url += '?quantity=' + quantity + '&numBits=' + bits;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(url)
|
||||||
|
.then(response => {
|
||||||
|
document.getElementById('status').innerText = 'Status: ' + response.status;
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
document.getElementById('status').innerText = 'Status: ' + data.status;
|
||||||
|
document.getElementById('description').innerText = data.description;
|
||||||
|
|
||||||
|
var resultDiv = document.getElementById('result');
|
||||||
|
resultDiv.innerHTML = ''; // Clear previous results
|
||||||
|
|
||||||
|
if (data.status !== 200) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.status === 200) {
|
||||||
|
var table = document.createElement('table');
|
||||||
|
table.classList.add('table');
|
||||||
|
var thead = document.createElement('thead');
|
||||||
|
var tbody = document.createElement('tbody');
|
||||||
|
var trHead = document.createElement('tr');
|
||||||
|
var thNr = document.createElement('th');
|
||||||
|
var thCopy = document.createElement('th');
|
||||||
|
var thRandom = document.createElement('th');
|
||||||
|
var copyAllButton = document.createElement('button');
|
||||||
|
|
||||||
|
thNr.textContent = 'ID';
|
||||||
|
thCopy.textContent = ' ';
|
||||||
|
thRandom.textContent = 'Random Number';
|
||||||
|
|
||||||
|
trHead.appendChild(thNr);
|
||||||
|
trHead.appendChild(thCopy);
|
||||||
|
trHead.appendChild(thRandom);
|
||||||
|
thead.appendChild(trHead);
|
||||||
|
table.appendChild(thead);
|
||||||
|
|
||||||
|
var hexNumbers = JSON.parse(data.randomNumbers); // JSON-Array parsen
|
||||||
|
|
||||||
|
for (var i = 0; i < hexNumbers.length; i++) {
|
||||||
|
var tr = document.createElement('tr');
|
||||||
|
var tdNr = document.createElement('td');
|
||||||
|
var tdCopy = document.createElement('td');
|
||||||
|
var tdRandom = document.createElement('td');
|
||||||
|
var copyButton = document.createElement('button');
|
||||||
|
|
||||||
|
tdNr.textContent = (i + 1).toString();
|
||||||
|
tdRandom.textContent = hexNumbers[i];
|
||||||
|
copyButton.textContent = 'Copy';
|
||||||
|
copyButton.classList.add('copy-button');
|
||||||
|
|
||||||
|
copyButton.addEventListener('click', function() {
|
||||||
|
copyToClipboard(this.parentElement.nextElementSibling.textContent);
|
||||||
|
});
|
||||||
|
|
||||||
|
tdCopy.appendChild(copyButton);
|
||||||
|
tr.appendChild(tdNr);
|
||||||
|
tr.appendChild(tdCopy);
|
||||||
|
tr.appendChild(tdRandom);
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
}
|
||||||
|
|
||||||
|
table.appendChild(tbody);
|
||||||
|
resultDiv.appendChild(table);
|
||||||
|
|
||||||
|
copyAllButton.textContent = 'Copy all';
|
||||||
|
copyAllButton.classList.add('copy-button');
|
||||||
|
copyAllButton.style.marginBottom = '5px'; // Setze den Abstand nach unten
|
||||||
|
|
||||||
|
copyAllButton.addEventListener('click', function() {
|
||||||
|
copyToClipboard(hexNumbers.join('\n'));
|
||||||
|
});
|
||||||
|
|
||||||
|
resultDiv.insertBefore(copyAllButton, table); // Füge den "Copy all" Button vor der Tabelle ein
|
||||||
|
} else {
|
||||||
|
var errorParagraph = document.createElement('p');
|
||||||
|
errorParagraph.textContent = 'Error: ' + data.message;
|
||||||
|
resultDiv.appendChild(errorParagraph);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Generierung erfolgreich');
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Fehler beim Generieren:', error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoadingSpinner();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/*------------------------------------------Copy to Clipboard-----------------------------------------------*/
|
||||||
|
function copyToClipboard(text) {
|
||||||
|
var textArea = document.createElement('textarea');
|
||||||
|
textArea.value = text;
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
|
||||||
|
// Anzeigen eines Popups zur Bestätigung der Kopie
|
||||||
|
window.alert('The text has been copied to the clipboard!');
|
||||||
|
}
|
||||||
|
|
||||||
|
/*------------------------------------------Shutdown Button-----------------------------------------------*/
|
||||||
|
document.getElementById('shutdownButton').addEventListener('click', function() {
|
||||||
|
//zurücksetzen von status und description
|
||||||
|
document.getElementById('description').innerText = '';
|
||||||
|
document.getElementById('status').innerText = '';
|
||||||
|
//textfelder zurücksetzen
|
||||||
|
document.getElementById('quantity').value = '';
|
||||||
|
document.getElementById('bits').value = '';
|
||||||
|
//result div zurücksetzen
|
||||||
|
document.getElementById('result').innerText = '';
|
||||||
|
|
||||||
|
showLoadingSpinner('Shutting down the system.'); // Zeigt den Lade-Spinner
|
||||||
|
|
||||||
|
fetch('https://172.16.78.57:5000/trng/randomNum/shutdown')
|
||||||
|
.then(response => {
|
||||||
|
document.getElementById('status').innerText = 'Status: ' + response.status;
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
document.getElementById('description').innerText = data.description;
|
||||||
|
console.log('Herunterfahren erfolgreich');
|
||||||
|
|
||||||
|
// Deaktiviere Generate und Shutdown Buttons
|
||||||
|
document.getElementById('generateButton').disabled = true;
|
||||||
|
document.getElementById('shutdownButton').disabled = true;
|
||||||
|
// Aktiviere Initialize Button
|
||||||
|
document.getElementById('initButton').disabled = false;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Fehler beim Herunterfahren:', error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
hideLoadingSpinner(); // Blende den Lade-Spinner aus
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Überprüfungsfunktion für die Eingabefelder
|
||||||
|
function checkInputFields() {
|
||||||
|
var quantity = document.getElementById('quantity').value;
|
||||||
|
var bits = document.getElementById('bits').value;
|
||||||
|
var generateButton = document.getElementById('generateButton');
|
||||||
|
|
||||||
|
if (quantity && bits) {
|
||||||
|
generateButton.disabled = false; // Aktiviere den Button, wenn beide Eingabefelder einen Wert enthalten
|
||||||
|
} else {
|
||||||
|
generateButton.disabled = true; // Deaktiviere den Button, wenn mindestens eines der Eingabefelder leer ist
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Eventlistener für die Eingabefelder, der die Überprüfungsfunktion aufruft
|
||||||
|
document.getElementById('quantity').addEventListener('input', checkInputFields);
|
||||||
|
document.getElementById('bits').addEventListener('input', checkInputFields);
|
||||||
|
|
||||||
|
/*-----------------------------Initiale Deaktivierung von Generate und Shutdown Buttons-----------------------------*/
|
||||||
|
document.getElementById('generateButton').disabled = true;
|
||||||
|
document.getElementById('shutdownButton').disabled = true;
|
||||||
|
|
||||||
|
/*------------------------------------------Loading Spinner-----------------------------------------------*/
|
||||||
|
// Zeige den Lade-Spinner an und blockiere den Inhalt
|
||||||
|
function showLoadingSpinner(loadingText) {
|
||||||
|
document.getElementById('overlay').classList.remove('hidden');
|
||||||
|
document.getElementById('loadingSpinner').classList.remove('hidden');
|
||||||
|
document.getElementById('loadingText').innerText = loadingText;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Blende den Lade-Spinner aus und entsperre den Inhalt
|
||||||
|
function hideLoadingSpinner() {
|
||||||
|
document.getElementById('overlay').classList.add('hidden');
|
||||||
|
document.getElementById('loadingSpinner').classList.add('hidden');
|
||||||
|
document.getElementById('loadingText').innerText = '';
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,267 @@
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #292C35;
|
||||||
|
color: #DCAE52;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
font-family: monospace, Arial, sans-serif;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
background-color: #292C35;
|
||||||
|
color: #DCAE52;
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px solid #DCAE52;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border: 1px solid #DCAE52;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #DCAE52;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled-input {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
background-color: #292C35;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 20px;
|
||||||
|
width: 50%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #DCAE52;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="number"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border: 1px solid #E9E2C9;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #E9E2C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled-input[type="number"]:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
border-color: #cccccc;
|
||||||
|
background-color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="number"]:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
border-color: #cccccc;
|
||||||
|
background-color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"] {
|
||||||
|
background-color: #292C35;
|
||||||
|
border: 1px solid #E9E2C9;
|
||||||
|
/* border: none; */
|
||||||
|
color: #DCAE52;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"]:hover {
|
||||||
|
background-color: #E9E2C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="button"] {
|
||||||
|
background-color: #292C35;
|
||||||
|
border: 1px solid #E9E2C9;
|
||||||
|
/* border: none; */
|
||||||
|
color: #DCAE52;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="button"]:hover {
|
||||||
|
background-color: #E9E2C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
width: 4em;
|
||||||
|
height: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
form {
|
||||||
|
width: 80%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 2em; /* Ändern Sie die Breite des Logos für kleine Bildschirme */
|
||||||
|
height: 2em; /* Ändern Sie die Höhe des Logos für kleine Bildschirme */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 24px; /* Ändern Sie die Schriftgröße der Überschrift für kleine Bildschirme */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#status {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#result {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button {
|
||||||
|
background-color: #292C35;
|
||||||
|
border: 1px solid #E9E2C9;
|
||||||
|
color: #DCAE52;
|
||||||
|
padding: 5px 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button:hover {
|
||||||
|
background-color: #E9E2C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button-row {
|
||||||
|
background-color: #292C35;
|
||||||
|
border: 1px solid #E9E2C9;
|
||||||
|
color: #DCAE52;
|
||||||
|
padding: 5px 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button-row:hover {
|
||||||
|
background-color: #E9E2C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th:first-child,
|
||||||
|
.table td:first-child,
|
||||||
|
.table th:nth-child(2),
|
||||||
|
.table td:nth-child(2) {
|
||||||
|
width: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th:nth-child(3),
|
||||||
|
.table td:nth-child(3) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table thead tr {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2em;
|
||||||
|
background-color: #DCE52;
|
||||||
|
min-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading Spinner */
|
||||||
|
#loadingSpinner {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border: 3px solid rgba(0, 0, 0, 0.1);
|
||||||
|
border-left-color: #DCAE52;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s infinite linear;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loadingText {
|
||||||
|
color: #DCAE52;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px; /* Anpassung des margin-top-Werts auf 20px */
|
||||||
|
position: fixed;
|
||||||
|
top: calc(50% + 45px); /* Anpassung des top-Werts auf calc(50% + 45px) */
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 10000;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"]:disabled,
|
||||||
|
input[type="button"]:disabled {
|
||||||
|
background-color: #999999;
|
||||||
|
border-color: #cccccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.6;
|
||||||
|
color: #666666
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue