EngimaMachine/index.html at master · abyshergill/EngimaMachine · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enigma Machine Simulator</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body class="p-4 md:p-8 min-h-screen flex items-center justify-center">
    <div class="bg-gray-800 p-6 md:p-10 rounded-xl shadow-lg w-full max-w-4xl space-y-6">
        <h1 class="text-3xl md:text-4xl font-bold text-center text-indigo-400 mb-6">Enigma Machine Simulator</h1>

        <!-- Input for Text -->
        <div>
            <label for="inputText" class="block text-gray-300 text-sm font-bold mb-2">
                Enter Text (Plaintext for Encoding, Ciphertext for Decoding):
            </label>
            <textarea id="inputText" class="shadow appearance-none border rounded-lg w-full py-3 px-4 bg-gray-700 text-white leading-tight focus:outline-none focus:shadow-outline focus:border-indigo-500 transition duration-300 ease-in-out" rows="5" placeholder="Type your message here..."></textarea>
        </div>

        <!-- Rotor Settings -->
        <div class="bg-gray-700 p-5 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-200 mb-4">Rotor Initial Positions (0-25 for A-Z)</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4">
                <div class="flex flex-col">
                    <label for="rotorPos1" class="text-gray-300 text-sm mb-1">Rotor 1 (Rightmost)</label>
                    <input type="number" id="rotorPos1" value="0" min="0" max="25" class="shadow appearance-none border rounded-lg py-2 px-3 bg-gray-600 text-white leading-tight focus:outline-none focus:shadow-outline focus:border-indigo-500 transition duration-300 ease-in-out">
                </div>
                <div class="flex flex-col">
                    <label for="rotorPos2" class="text-gray-300 text-sm mb-1">Rotor 2</label>
                    <input type="number" id="rotorPos2" value="0" min="0" max="25" class="shadow appearance-none border rounded-lg py-2 px-3 bg-gray-600 text-white leading-tight focus:outline-none focus:shadow-outline focus:border-indigo-500 transition duration-300 ease-in-out">
                </div>
                <div class="flex flex-col">
                    <label for="rotorPos3" class="text-gray-300 text-sm mb-1">Rotor 3</label>
                    <input type="number" id="rotorPos3" value="0" min="0" max="25" class="shadow appearance-none border rounded-lg py-2 px-3 bg-gray-600 text-white leading-tight focus:outline-none focus:shadow-outline focus:border-indigo-500 transition duration-300 ease-in-out">
                </div>
                <div class="flex flex-col">
                    <label for="rotorPos4" class="text-gray-300 text-sm mb-1">Rotor 4</label>
                    <input type="number" id="rotorPos4" value="0" min="0" max="25" class="shadow appearance-none border rounded-lg py-2 px-3 bg-gray-600 text-white leading-tight focus:outline-none focus:shadow-outline focus:border-indigo-500 transition duration-300 ease-in-out">
                </div>
                <div class="flex flex-col">
                    <label for="rotorPos5" class="text-gray-300 text-sm mb-1">Rotor 5 (Leftmost)</label>
                    <input type="number" id="rotorPos5" value="0" min="0" max="25" class="shadow appearance-none border rounded-lg py-2 px-3 bg-gray-600 text-white leading-tight focus:outline-none focus:shadow-outline focus:border-indigo-500 transition duration-300 ease-in-out">
                </div>
            </div>
        </div>

        <!-- Plugboard Settings -->
        <div class="bg-gray-700 p-5 rounded-lg">
            <h2 class="text-xl font-semibold text-gray-200 mb-4">Plugboard Settings (e.g., AZ BW CX - pairs are reciprocal)</h2>
            <input type="text" id="plugboardInput" value="AX BY CZ DW EV FU GT HS IR JO KL NM QP" class="shadow appearance-none border rounded-lg w-full py-2 px-3 bg-gray-600 text-white leading-tight focus:outline-none focus:shadow-outline focus:border-indigo-500 transition duration-300 ease-in-out uppercase" placeholder="e.g., AB CD EF">
            <p class="text-sm text-gray-400 mt-2">Enter pairs of letters separated by spaces. Max 13 pairs. Invalid pairs will be ignored.</p>
        </div>

        <!-- Action Buttons -->
        <div class="flex justify-center space-x-4">
            <button id="encodeBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
                Encode Text
            </button>
            <button id="decodeBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
                Decode Text
            </button>
        </div>

        <!-- Output Text -->
        <div>
            <label for="outputText" class="block text-gray-300 text-sm font-bold mb-2">
                Output:
            </label>
            <textarea id="outputText" class="shadow appearance-none border rounded-lg w-full py-3 px-4 bg-gray-700 text-white leading-tight focus:outline-none focus:shadow-outline cursor-not-allowed" rows="5" readonly></textarea>
        </div>

        <!-- Message Box for alerts/errors -->
        <div id="messageBox" class="hidden bg-red-800 text-white p-4 rounded-lg shadow-md">
            <p id="messageText"></p>
            <button id="closeMessageBox" class="mt-2 bg-red-600 hover:bg-red-700 text-white text-xs font-bold py-1 px-3 rounded-full float-right">Close</button>
        </div>

        <!-- Instructions and Machine Settings Display -->
        <div class="bg-gray-700 p-5 rounded-lg mt-6">
            <h2 class="text-xl font-semibold text-gray-200 mb-4">How to Use & Machine Configuration</h2>
            <p class="text-gray-300 mb-2">This simulator uses an Enigma-like mechanism with 5 randomly generated rotors and a reflector. For successful decryption, the **Rotor Initial Positions** and **Plugboard Settings** must be identical to those used during encryption.</p>
            <p class="text-gray-300 mb-4">The core machine wirings (rotors and reflector) are randomly generated once when the page loads, ensuring a unique machine setup.</p>
        </div>
    </div>

<script src="./js/script.js"></script>
</body>
</html>