258 行
7.2 KiB
HTML
258 行
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>LOS FUNK ENTSCHLÜSSELUNG</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
margin: 50px;
|
|
background-color: #111;
|
|
color: #fff;
|
|
}
|
|
|
|
h1 {
|
|
color: #66ccff;
|
|
}
|
|
|
|
.container {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
background-color: #222;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: 150px;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
background-color: #333;
|
|
color: #fff;
|
|
border: 1px solid #555;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
button {
|
|
padding: 10px 20px;
|
|
background-color: #008080;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #006666;
|
|
}
|
|
|
|
#outputText {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border: 1px solid #66ccff;
|
|
background-color: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
#metadata {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.footer {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #000;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.footer p {
|
|
margin: 0;
|
|
}
|
|
|
|
.footer a {
|
|
color: #66ccff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
#historyButton {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
padding: 5px 10px;
|
|
background-color: #008080;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
#historyButton:hover {
|
|
background-color: #006666;
|
|
}
|
|
|
|
#historyModal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
z-index: 9999;
|
|
}
|
|
|
|
#historyContent {
|
|
max-width: 400px;
|
|
margin: 100px auto;
|
|
background-color: #222;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|
color: #fff;
|
|
}
|
|
|
|
#historyContent h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#historyList {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
#historyList li {
|
|
margin-bottom: 10px;
|
|
border-bottom: 1px solid #66ccff;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
#clearHistoryButton {
|
|
margin-top: 10px;
|
|
padding: 5px 10px;
|
|
background-color: #008080;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
#clearHistoryButton:hover {
|
|
background-color: #006666;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.message-box {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background-color: #444;
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|
|
<script>
|
|
var historyList;
|
|
|
|
function showHistoryModal() {
|
|
document.getElementById("historyModal").style.display = "block";
|
|
}
|
|
|
|
function closeHistoryModal() {
|
|
document.getElementById("historyModal").style.display = "none";
|
|
}
|
|
|
|
function addDecodedMessageToHistory(message) {
|
|
var listItem = document.createElement("li");
|
|
var timestamp = new Date().toLocaleTimeString();
|
|
listItem.textContent = timestamp + ": " + message;
|
|
historyList.insertBefore(listItem, historyList.firstChild);
|
|
|
|
if (historyList.childElementCount > 10) {
|
|
historyList.removeChild(historyList.lastChild);
|
|
}
|
|
}
|
|
|
|
function clearHistory() {
|
|
historyList.innerHTML = "";
|
|
}
|
|
|
|
function decodeText() {
|
|
var inputText = document.getElementById("inputText").value;
|
|
|
|
// Überprüfen, ob das Eingabefeld leer ist
|
|
if (inputText.trim() === "") {
|
|
alert("Bitte gib einen Text ein, um ihn zu entschlüsseln.");
|
|
return;
|
|
}
|
|
|
|
var outputText = "";
|
|
|
|
var startIndex = inputText.indexOf("*:");
|
|
if (startIndex !== -1) {
|
|
startIndex += 3;
|
|
var endIndex = inputText.length;
|
|
|
|
var decodingMap = {
|
|
"a": "x", "b": "y", "c": "z", "d": "a", "e": "b", "f": "c", "g": "d", "h": "e", "i": "f",
|
|
"j": "g", "k": "h", "l": "i", "m": "j", "n": "k", "o": "l", "p": "m", "q": "n", "r": "o",
|
|
"s": "p", "t": "q", "u": "r", "v": "s", "w": "t", "x": "u", "y": "v", "z": "w",
|
|
"ä": "ä", "ö": "ö", "ü": "ü"
|
|
};
|
|
|
|
var decodedMessage = inputText.substr(startIndex, endIndex);
|
|
outputText = Array.from(decodedMessage.toLowerCase(), char => decodingMap[char] || char).join('');
|
|
|
|
document.getElementById("outputText").textContent = outputText;
|
|
document.getElementById("inputText").value = "";
|
|
|
|
addDecodedMessageToHistory(outputText);
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
historyList = document.getElementById("historyList");
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>LOS FUNK ENTSCHLÜSSELUNG</h1>
|
|
<textarea id="inputText" placeholder="Gib hier den zu entschlüsselnden Text ein"></textarea>
|
|
<button onclick="decodeText()">Entschlüsseln</button>
|
|
<div id="outputText"></div>
|
|
<p id="metadata">Unten in der Box ist angegeben, wie der Funk eingetragen werden muss damit er entschlüsselt wird!</p>
|
|
</div>
|
|
<button id="historyButton" onclick="showHistoryModal()">History</button>
|
|
<div id="historyModal">
|
|
<div id="historyContent">
|
|
<h2>Entschlüsselte Nachrichten Verlauf</h2>
|
|
<ul id="historyList"></ul>
|
|
<button id="clearHistoryButton" onclick="clearHistory()">Verlauf löschen</button>
|
|
<button onclick="closeHistoryModal()">Schließen</button>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="footer">
|
|
<p>© 2023 LegionOfSensei</p>
|
|
<p><a href="https://legionofsensei.de/forum/board/70-militaryrp/">Besuche das LegionOfSensei-Forum</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="message-box">
|
|
00.00.00 PM [Verschl. Funk] *Name an Empfänger*: Verschlüsselte Nachricht
|
|
</div>
|
|
</body>
|
|
</html>
|