-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (120 loc) · 4.12 KB
/
index.html
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hash Functions</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.poppins-regular {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
</head>
<body
class="flex flex-col items-center justify-center gap-4 min-h-screen bg-[#212121] poppins-regular p-4"
>
<!-- Whole Block -->
<div class="bg-[#2B2B2B] p-6 rounded-lg shadow-lg max-w-lg w-full">
<h1 class="text-2xl font-medium text-zinc-50 text-center">
Hash Functions
</h1>
<h2 class="text-base font-medium text-zinc-500 text-center">
Hexadecimal Method
</h2>
</div>
<!-- Encryption Block -->
<div class="bg-[#2B2B2B] p-6 rounded-lg shadow-lg max-w-lg w-full">
<span class="flex flex-col gap-4 mb-4">
<div class="flex items-center gap-4 w-full text-zinc-50">
<span class="flex flex-col w-full">
<label for="inputText" class="text-sm font-medium mb-1">
Message
</label>
<span class="flex items-center justify-center gap-2.5">
<input
type="text"
id="inputText"
placeholder="Type message"
autocomplete="off"
autocapitalize="on"
class="text-sm rounded-md w-full p-2 outline-none bg-[#383838] placeholder-zinc-500 text-zinc-50 focus:ring-2 focus:ring-zinc-500 duration-200 ease-in-out caret-zinc-500 selection:bg-zinc-300 selection:text-zinc-700"
/>
<button
id="generateHash"
class="text-sm duration-200 ease-in-out bg-zinc-700 hover:bg-indigo-800 active:bg-indigo-900 text-white rounded-md px-4 py-2 font-medium outline-none"
>
Generate
</button>
</span>
</span>
</div>
</span>
</div>
<!-- Outputs Block -->
<div
class="bg-[#2B2B2B] p-6 rounded-lg shadow-lg max-w-lg w-full text-center"
>
<p
id="outputHash"
class="text-ellipsis break-words text-zinc-50 text-gray-700 text-sm font-medium select-all"
>
Outputs will show here!
</p>
</div>
<script>
// Simple hash function
function customHash(input, fixedLength) {
const prime1 = 31; // Prime multiplier
const prime2 = 37; // Secondary prime multiplier for mixing
const seed = 0x9e3779b9; // A large seed based on the golden ratio
let hash = seed;
let dynamicSalt = seed;
// Step 1: Basic hash mixing
for (let i = 0; i < input.length; i++) {
const charCode = input.charCodeAt(i);
hash ^= (charCode * prime1 + dynamicSalt) & 0xffffffff; // XOR + multiply
hash = (hash << 7) | (hash >>> 25); // Rotate left by 7 bits
dynamicSalt =
(dynamicSalt * prime2 + charCode) & 0xffffffff; // Update salt
}
// Step 2: Generate intermediate hash values
let intermediate = Array(fixedLength).fill(0);
for (let i = 0; i < fixedLength; i++) {
hash = ((hash + dynamicSalt) ^ (prime1 * i)) & 0xffffffff;
hash = (hash << 5) | (hash >>> 27); // Rotate left by 5 bits
intermediate[i] = hash & 0xff; // Extract lower byte
}
// Step 3: Convert intermediate array to a hex string
return intermediate
.map((value) => value.toString(16).padStart(2, "0")) // Convert to hex
.join("")
.slice(0, fixedLength); // Trim to fixed length
}
// Event listener for the Generate Hash button
document
.getElementById("generateHash")
.addEventListener("click", function () {
const inputText =
document.getElementById("inputText").value;
const fixedLength = 32;
const outputHash = document.getElementById("outputHash");
let hash = "";
if (!inputText || isNaN(fixedLength) || fixedLength <= 0) {
hash = "Please enter something!";
} else {
hash = customHash(inputText, fixedLength);
}
outputHash.innerText = hash;
});
</script>
</body>
</html>