-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (124 loc) · 4.05 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
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lennis-dev's email-obfuscater</title>
<style>
:root {
--background: #181818;
}
body {
background: var(--background);
width: 700px;
margin: auto;
margin-top: 100px;
word-wrap: break-word;
}
a {
color: #2244FF;
}
code {
background: #111;
font-family: monospace;
color: #ccc;
padding: 10px;
border-radius: 8px;
font-size: 16px;
line-height: 36px;
display: block;
margin: 20px;
}
input {
background: #111;
font-family: monospace;
color: #ccc;
padding: 5px 10px;
border-radius: 8px;
font-size: 16px;
line-height: 36px;
margin: 20px;
outline: none;
border: none;
margin-top: none;
width: calc(100% - 60px);
}
.notvalid {
color: #181818;
margin: 0 20px;
font-size: 16px;
font-family: monospace;
transition: .2s;
}
input:invalid~.notvalid {
color: #F00;
}
.infotext {
font-size: 20px;
margin: 20px;
color: #ccc;
font-family: Arial, Helvetica, sans-serif;
}
.coded-with {
position: absolute;
right: 10px;
bottom: 10px;
}
@media screen and (max-width: 700px) {
body {
width: 100%;
}
.coded-with {
position: unset;
margin-top: 20px;
text-align: right;
}
}
</style>
</head>
<body>
<noscript>
<div class="infotext">
<h1>THIS PAGE NEEDS JAVASCRIPT</h1>
</div>
</noscript>
<div class="infotext">
<h1>How does it work?</h1>
This tool encodes your email address in base64 and splits this base64 character string into different sized parts and reverses the order.<br /><br />
the browser splits the string back into the different parts and inverts the sequence again, then decodes the valid base64 code. After that it creates a new link element with the email address and the matching mailto link. finally it inserts this element on the page at the position where the code was.
</div>
<div>
<input id="email" placeholder="please enter your email address here" onkeyup="x(this.value)" type="email">
<div class="notvalid">
this does not look like a real email address
</div>
</div>
<div>
<code><script>var a=atob("<span id="code-mail"></span>".split("?").reverse().join("")),b=document.createElement("a");b.innerText=a;b.href="mailto:"+a;document.currentScript.replaceWith(b);</script></code>
</div>
<div class="infotext coded-with">
Coded With ❤️ by <a href="https://github.com/lennis-dev">lennis-dev</a>
</div>
<script>
function x(input) {
input = btoa(input);
input = input.split('');
var length = input.length;
var offset = length;
let pairs = [];
while (offset > 0) {
var max = Math.min(8, offset);
var rand = Math.floor(Math.random() * (max - 1 + 1) + 1);
var string = "";
for (let i = 0; i < rand; i++) {
string += input[length - offset];
offset -= 1;
}
pairs.push(string);
}
document.getElementById("code-mail").innerText = pairs.reverse().join("?");
}
</script>
</body>
</html>