-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
309 lines (300 loc) · 9.07 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>TITKOS KÓD GÉP</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<script>
function sendId(theId, theName) {
http = new XMLHttpRequest();
var url = "/anchor";
var params = "<request><id>"+theId+"</id><mothername>"+theName+"</mothername></request>";
document.getElementById("monitor").innerHTML = params;
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
document.getElementById("hash").className="";
if(http.readyState == 4 && http.status == 200) {
document.getElementById("output").innerHTML = http.responseText;
}
if(http.readyState == 4 && http.status == 406) {
var resp=http.responseXML.firstChild.innerHTML
if (resp=="") resp=http.statusText
displayMsg(resp);
}
}
http.send(params);
document.getElementById("hash").className="waiting";
}
function displayMsg(response){
document.getElementById("message").style.display="block";
document.getElementById("message").innerHTML = response;
}
function getHash() {
document.getElementById("output").innerHTML = '';
document.getElementById("message").style.display="none";
input = document.getElementById("input").value;
mothername = normalizeString(document.getElementById("mothername").value);
accept = document.getElementById("accept");
if (accept.checked) {
sendId(input,mothername);
}
}
function normalizeString(val) {
var accented="öüóőúéáűíÖÜÓŐÚÉÁŰÍ";
var unaccented="ouooueauiouooueaui";
var s = "";
for (var i = 0, len = val.length; i < len; i++) {
c = val[i];
if(c.match('[abcdefghijklmnopqrstuvwxyz]')) {
s=s+c;
} else if(c.match('[ABCDEFGHIJKLMNOPQRSTUVXYZ]')) {
s=s+c.toLowerCase();
} else if(c.match('['+accented+']')) {
for (var j = 0, alen = accented.length; j <alen; j++) {
if(c.match(accented[j])) {
s=s+unaccented[j];
}
}
}
}
return s;
}
function convert_mothername() {
var inputElement = document.getElementById( "mothername" );
var outputElement = document.getElementById( "monitor" );
outputElement.innerHTML=document.getElementById( "input" ).value +' - '+ normalizeString(inputElement.value);
}
</script>
<style>
*, *:after, *:before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
color: #606c76;
font-family: "Roboto","Helvetica Neue","Helvetica","Arial",sans-serif;
font-size: 1.6em;
font-weight: 300;
letter-spacing: .01em;
line-height: 1.6;
}
pre, xmp, plaintext, listing {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px 1em;
}
pre {
background: #f4f5f6;
border-left: .3rem solid #4D7ACA;
font-family: "Menlo","Consolas","Bitstream Vera Sans Mono","DejaVu Sans Mono","Monaco",monospace;
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
margin-bottom: 2.5rem;
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
margin-bottom: 2.5rem;
}
input, textarea, select, fieldset {
margin-bottom: 1.5rem;
}
fieldset {
border-width: 0;
padding: 0;
}
label, legend {
font-size: 1.6rem;
font-weight: 700;
display: block;
margin-bottom: .5rem;
}
input[type='email'], input[type='number'], input[type='password'], input[type='search'], input[type='tel'], input[type='text'], input[type='url'], textarea, select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: .1rem solid #d1d1d1;
border-radius: .4rem;
box-shadow: none;
height: 3.8rem;
padding: .6rem 1rem;
width: 100%;
}
.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
background-color: #4D7ACA;
border: .1rem solid #4D7ACA;
border-radius: .4rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1.1rem;
font-weight: 700;
height: 3.8rem;
letter-spacing: .1rem;
line-height: 3.8rem;
padding: 0 3rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
.button:hover, button:hover, input[type='button']:hover, input[type='reset']:hover, input[type='submit']:hover {
background-color: #606c76;
border-color: #606c76;
color: #fff;
outline: 0;
}
.button:active, button:active, input[type='button']:active, input[type='reset']:active, input[type='submit']:active {
background-color: #707c76;
border-color: #606c76;
color: #fff;
outline: 0;
padding-top:1px
}
.wrapper {
position: relative;
display: block;
width: 100%;
overflow: hidden;
}
.container {
margin: 0 auto;
max-width: 112rem;
padding: 0 2rem;
position: relative;
width: 100%;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin-bottom: 0;
max-width: 80.0rem;
}
.form {
max-width: 50.0rem;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
margin-bottom: 2rem;
margin-top: 0;
}
h1 {
font-size: 4rem;
letter-spacing: -0.1rem;
line-height: 1.2;
}
h3 {
font-size: 3rem;
letter-spacing: -0.1rem;
line-height: 1.3;
}
p {
margin-top: 0;
}
.label-inline {
font-weight: normal;
display: inline-block;
margin-left: .5rem;
}
pre {
min-height:5rem;
line-height: 100%;
word-wrap: break-word;
white-space: pre-line;
}
.waiting {
background-image: url("waiting.gif");
background-repeat: no-repeat;
background-position: center;
min-height: 150px;
}
.monitor {
min-width: 100px;
background-color: #F9F6E9;
border-radius: 5px;
display: inline-block;
float: right;
padding: 10px 15px;
font-size: small;
}
#message{
display:none;
width: 100%;
height: 5rem;
border-radius:5px;
border: 1px solid red;
padding:1rem;
color: red;
font-weight:700;
margin-top:2rem;
text-align: center;
}
@media (min-width: 40rem){
h1 {
font-size: 5rem;
}
h3 {
font-size: 3.6rem;
}}
</style>
</head>
<body>
<main class="wrapper">
<section class="container">
<h1 class="title">TITKOS KÓD GÉP</h1>
</section>
<section class="container">
<h3>Mi ez?</h2>
<p>Ez egy számológép. Itt készíthetsz magadnak az alábbi két személyes adatodból egy titkos kódot.</p>
<p>A Személyi azonosítódat a lakcímkártyád hátoldalán találod meg ehhez.</p>
</section>
<section class="container form">
<form>
<fieldset>
<label for="input">Személyi azonosító:</label>
<input type="text" placeholder="" id="input" onkeyup="convert_mothername()">
<label for="mothername">Anyja neve:</label>
<input type="text" placeholder="" id="mothername" onkeyup="convert_mothername()">
<div class="example-send-yourself-copy">
<input type="checkbox" id="accept" name="accept" value="accept">
<label class="label-inline" for="confirmField">A <a href="#feltetelek">Felhasználási Feltételeket</a> megértettem és elfogadom</label>
</div>
<button type="button" onclick="getHash()">A kód előállítása</button><div class="monitor" id="monitor"></div>
<div id="message"></div>
</fieldset>
</form>
</section>
<section class="container">
<label for="output">Titkos Kód:</label>
<pre id="hash"><code id="output"></code></pre>
</section>
<section class="container">
<h3>Mi az a Titkos Kód?</h3>
<ul>
<li>A Titkos Kód a személyes adataidból <a href="https://en.wikipedia.org/wiki/Cryptographic_hash_function">egyirányú titkosítással</a> előállított nem visszafejthető karaktersorozat.</li>
<li>A személyes adataid nem derülnek ki belőle.</li>
<li>A te tulajdonod lesz.</li>
<li>Amire vigyáznod kell, tehát csak olyan weboldalnak személynek add meg, amiben/akiben megbízol</li>
<li>Ugyanakkor bármikor bizonyítani tudod, hogy ez a tiéd, ugyanis ezzel a géppel bármikor előállíthatod újra.</li>
</ul>
</section>
<a name="feltetelek"></a>
<section class="container" >
<h3>Felhasználási Feltételek</h2>
<ul>
<li>Ez egy számológép, tehát semmilyen adatot nem őriz meg rólad. Erről magad is meggyőződhetsz, mert a gép kódja nyilvános, szabadon hozzáférhető <a href="https://github.com/edemo/PDAnchor">itt</a>, a futtató gépen lévő file-okat pedig <a href="/filesystem">itt</a> nézheted meg.</li>
<li>Bármikor használhatod még egyszer az alábbi megkötéssel:</br>
A szolgáltatás egy eszközről (számítógépről, okostelefonról, tabletről) percenként legfeljebb csak egyszer elérhető.
Ezt az IP cím alapján ellenőrizzük.</li>
<li>Csak a saját adataiddal előállított kód a tiéd, ezért csak a saját adataiddal használd!</li>
</ul>
</section>
</main>
</body>
</html>