Add 'index.html'
このコミットが含まれているのは:
コミット
c33029405e
|
@ -0,0 +1,257 @@
|
|||
<!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>
|
読み込み中…
新しいイシューから参照