Öncelikle md5 oluşturma kodunu internetten buldum ve tasarım giydirip jquery ile düzenledim benim hoşuma gitti lazım olanlar ya sitemde dursun diyenler olursa diye paylaşmak istedim.

İndirmek için buraya tıklayın.
Demo için burayatıklayın.

HTML KODU

MD5 Şifreleme









Şifrelenmiş Metin







<script></script>
<script></script>
<script></script>
<script></script>

CSS KODU

*{text-decoration:none; list-style:none;margin:0; padding:0;font-weight:bold;}
body{
background: #34495e;
font-size:14px;
}
::selection{
color:#fff;
background:#34495e;
}

.baslik{
width:100%;
height:50px;
background:#ecf0f1;
}
h1{
text-align:center;
color:#e74c3c;
line-height:50px;
}
.kapsayan{
max-width:520px;
width:100%;
margin: 0 auto;

}
.sifre-bilgi{
background:#fff;
border-radius:3px;
padding:20px;
border:1px solid #ccc;
margin-top:25px;
display:none;
}
#sifrelenmis{
padding-top:20px;
font-size:20px;
}


.form-icerik {
padding:20px;
background:#ecf0f1;
margin: 150px 0;
border-radius:5px;
}
#input{
width:100%;
box-sizing:border-box;
padding:15px;
border-radius:5px;
outline:0;
border:1px solid #ccc;
margin-bottom:10px;
transition: all .5s ease;
}
#input:hover, .# input:focus, .#input:active{
border: 1px solid #7f8c8d;
}
#sifrele{
width:100%;
padding:15px;
border-radius:5px;
background:#e74c3c;
color: #fff;
text-transform: uppercase;
font-size:14px;
border:none;
outline:0;
transition: all .3s ease-in-out;
}
#sifrele:hover{
background:rgba(192,57,43 ,0.80)
}
#footer{
position:fixed;
bottom:0;
background:#ecf0f1;
padding:20px;
width:100%;
text-align:center;
font-size:20px;
color:#34495e;
}
#footer a {
color:#e74c3c;
}
#footer a:hover,#footer a:focus,#footer a:active{
text-decoration:underline;
}



Md5 JavaScript Kodu

;(function ($) {
'use strict'

function safe_add (x, y) {
var lsw = (x & 0xFFFF) + (y & 0xFFFF)
var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
return (msw << 16) | (lsw & 0xFFFF)
}

function bit_rol (num, cnt) {
return (num << cnt) | (num >>> (32 - cnt))
}

function md5_cmn (q, a, b, x, s, t) {
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b)
}
function md5_ff (a, b, c, d, x, s, t) {
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t)
}
function md5_gg (a, b, c, d, x, s, t) {
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t)
}
function md5_hh (a, b, c, d, x, s, t) {
return md5_cmn(b ^ c ^ d, a, b, x, s, t)
}
function md5_ii (a, b, c, d, x, s, t) {
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t)
}

function binl_md5 (x, len) {
x[len >> 5] |= 0x80 << (len % 32)
x[(((len + 64) >>> 9) << 4) + 14] = len
var i
var olda
var oldb
var oldc
var oldd
var a = 1732584193
var b = -271733879
var c = -1732584194
var d = 271733878

for (i = 0; i < x.length; i += 16) {
olda = a
oldb = b
oldc = c
oldd = d

a = md5_ff(a, b, c, d, x[i], 7, -680876936)
d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586)
c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819)
b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330)
a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897)
d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426)
c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341)
b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983)
a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416)
d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417)
c = md5_ff(c, d, a, b, x[i + 10], 17, -42063)
b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162)
a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682)
d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101)
c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290)
b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329)

a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510)
d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632)
c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713)
b = md5_gg(b, c, d, a, x[i], 20, -373897302)
a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691)
d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083)
c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335)
b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848)
a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438)
d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690)
c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961)
b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501)
a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467)
d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784)
c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473)
b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734)

a = md5_hh(a, b, c, d, x[i + 5], 4, -378558)
d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463)
c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562)
b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556)
a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060)
d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353)
c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632)
b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640)
a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174)
d = md5_hh(d, a, b, c, x[i], 11, -358537222)
c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979)
b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189)
a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487)
d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835)
c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520)
b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651)

a = md5_ii(a, b, c, d, x[i], 6, -198630844)
d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415)
c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905)
b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055)
a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571)
d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606)
c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523)
b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799)
a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359)
d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744)
c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380)
b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649)
a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070)
d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379)
c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259)
b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551)

a = safe_add(a, olda)
b = safe_add(b, oldb)
c = safe_add(c, oldc)
d = safe_add(d, oldd)
}
return [a, b, c, d]
}

function binl2rstr (input) {
var i
var output = ''
for (i = 0; i < input.length * 32; i += 8) {
output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xFF)
}
return output
}
function rstr2binl (input) {
var i
var output = []
output[(input.length >> 2) - 1] = undefined
for (i = 0; i < output.length; i += 1) {
output[i] = 0
}
for (i = 0; i < input.length * 8; i += 8) {
output[i >> 5] |= (input.charCodeAt(i / 8) & 0xFF) << (i % 32)
}
return output
}

function rstr_md5 (s) {
return binl2rstr(binl_md5(rstr2binl(s), s.length * 8))
}

function rstr_hmac_md5 (key, data) {
var i
var bkey = rstr2binl(key)
var ipad = []
var opad = []
var hash
ipad[15] = opad[15] = undefined
if (bkey.length > 16) {
bkey = binl_md5(bkey, key.length * 8)
}
for (i = 0; i < 16; i += 1) {
ipad[i] = bkey[i] ^ 0x36363636
opad[i] = bkey[i] ^ 0x5C5C5C5C
}
hash = binl_md5(ipad.concat(rstr2binl(data)), 512 + data.length * 8)
return binl2rstr(binl_md5(opad.concat(hash), 512 + 128))
}

function rstr2hex (input) {
var hex_tab = '0123456789abcdef'
var output = ''
var x
var i
for (i = 0; i < input.length; i += 1) {
x = input.charCodeAt(i)
output += hex_tab.charAt((x >>> 4) & 0x0F) +
hex_tab.charAt(x & 0x0F)
}
return output
}

function str2rstr_utf8 (input) {
return unescape(encodeURIComponent(input))
}

function raw_md5 (s) {
return rstr_md5(str2rstr_utf8(s))
}
function hex_md5 (s) {
return rstr2hex(raw_md5(s))
}
function raw_hmac_md5 (k, d) {
return rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d))
}
function hex_hmac_md5 (k, d) {
return rstr2hex(raw_hmac_md5(k, d))
}

function md5 (string, key, raw) {
if (!key) {
if (!raw) {
return hex_md5(string)
}
return raw_md5(string)
}
if (!raw) {
return hex_hmac_md5(key, string)
}
return raw_hmac_md5(key, string)
}

if (typeof define === 'function' && define.amd) {
define(function () {
return md5
})
} else if (typeof module === 'object' && module.exports) {
module.exports = md5
} else {
$.md5 = md5
}
}(this))



Demo JavaSCript Kodu

;(function () {
'use strict'

var input = document.getElementById('input')
document.getElementById('sifrele').addEventListener(
'click',
function (event) {
event.preventDefault()
document.getElementById('sifrelenmis').innerHTML = md5(input.value)
}
)

}())


Jquey İle Düzenelme Kodu

$(function(){
$("#sifrele").click(function(){
var deger = $("input[id=input]").val();
var deger = $.trim(deger);
if (!deger){
$('.sifre-bilgi').css('display', 'none');
alert("Lütfen Boş Bırakmayın!");

}else{
$('.sifre-bilgi').css('display', 'block');
}
});
});