-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
47 lines (38 loc) · 5.52 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
<!DOCTYPE html>
<html>
<head>
<title>☠ OBFUS ☠</title>
<link rel="stylesheet" href="./assets/main.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<h1 id="header" class="">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="90.497px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 90.497 100" xml:space="preserve">
<path fill="#424242" d="M45.249,0C20.3,0,0,20.296,0,45.248v18.994c0,9.246,7.521,16.764,16.76,16.764 c3.853,0,6.981,3.134,6.981,6.979v9.502c0,1.388,1.124,2.514,2.516,2.514h37.988c1.385,0,2.511-1.126,2.511-2.514v-9.502 c0-3.845,3.134-6.979,6.986-6.979c9.238,0,16.756-7.518,16.756-16.764V45.248C90.497,20.296,70.201,0,45.249,0z M47.195,45.444 L6.463,34.61C11.141,17.582,26.75,5.028,45.242,5.027c22.175,0.001,40.227,18.042,40.227,40.221v10.377L81,54.437 c0.745-2.194,1.171-4.565,1.171-7.052C82.171,37.108,51.105,36.462,47.195,45.444z M57.262,94.968v-6.983 c0-1.384-1.13-2.514-2.519-2.514c-1.388,0-2.514,1.13-2.514,2.514v6.983h-4.465v-6.983c0-1.384-1.128-2.514-2.516-2.514 c0,0-0.001,0-0.002,0s-0.001,0-0.002,0c-1.389,0-2.516,1.13-2.516,2.514v6.983h-4.463v-6.983c0-1.384-1.128-2.514-2.512-2.514 c0,0-0.001,0-0.002,0s-0.001,0-0.002,0c-1.386,0-2.514,1.13-2.514,2.514v6.983h-4.467v-6.983c0-6.617-5.39-12.007-12.009-12.007 c-6.474,0-11.736-5.262-11.736-11.735V45.248c0-2.222,0.189-4.399,0.537-6.523l41.364,11.002 c1.035,9.854,8.494,17.505,17.554,17.505c6.167,0,11.591-3.545,14.757-8.911l6.233,1.658v4.263c0.002,1.523-0.297,2.975-0.826,4.312 c-1.723,4.343-5.958,7.424-10.905,7.424c-6.621,0-12.011,5.39-12.011,12.007v6.983H57.262z"/>
<path fill="#424242" d="M46.774,60.919c-0.337-1.006-1.277-1.688-2.337-1.688c-1.066,0-2.007,0.683-2.344,1.688L37.43,74.906 c-0.249,0.755-0.124,1.581,0.341,2.226c0.466,0.642,1.209,1.027,2,1.027H49.1c0.797,0,1.54-0.386,2.009-1.027 c0.456-0.645,0.587-1.471,0.337-2.226L46.774,60.919z"/>
<path fill="#424242" d="M21.596,45.807c-4.756,0-8.632,3.87-8.632,8.631c0,4.761,3.876,8.63,8.632,8.63 c4.757,0,8.626-3.869,8.626-8.63C30.223,49.676,26.353,45.807,21.596,45.807z"/>
</svg>
<span>OBFUS</span>
</h1>
<div id="app">
<input id="email-input" type="text" tabindex="1" placeholder="secret">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="5.0 -10.0 100.0 135.0" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#424242" d="M16.458,39.898c3.348-0.197,6.033-2.858,6.267-6.195V7.141C22.725,3.197,25.922,0,29.866,0h40.251 c3.944,0,7.141,3.197,7.141,7.141v26.327c0.123,3.442,2.848,6.222,6.267,6.429h4.621l0.384,0.001 c4.988,0.203,8.972,4.317,8.972,9.354c0,2.807-1.237,5.325-3.194,7.04l-36.17,38.959C56.529,98.088,53.483,100,49.99,100 c-3.42,0-6.411-1.834-8.043-4.574L5.132,55.768c-1.631-1.684-2.633-3.984-2.633-6.514c0-5.167,4.189-9.355,9.355-9.355H16.458z"/>
</svg>
<input id="obfuscated" type="text" readonly>
</div>
<div id="info">
<h3>What the flip?</h3>
<p><strong>OBFUS</strong>, short for <a href="http://mas.im/anxf">obfuscate</a>, is an easy way to protect the emails in your <code>mailto</code> links. Using unicode to render the email address helps to cut down on spam, while maintaining UX.</p>
<p>An experiment by <a href="http://matthewsimo.com">Matthew Simo</a> at <a href="http://gotidbit.com">tidbit</a> using <a href="http://electron.atom.io/">Electron</a>.</p>
</div>
<div id="info-toggle">
<svg class="open-icon show" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M49.99,0C22.381,0,0,22.381,0,49.99c0,27.608,22.381,49.99,49.99,49.99S99.98,77.598,99.98,49.99 C99.98,22.381,77.599,0,49.99,0z M55.301,72.969c0,4.048-3.119,7.166-7.335,7.166c-4.217,0-7.336-3.118-7.336-7.166V72.8 c0-4.048,3.119-7.168,7.336-7.168c4.216,0,7.335,3.12,7.335,7.168V72.969z M70.06,37.467c0,10.709-7.421,15.096-16.611,16.951 l-0.253,3.06c-0.339,2.191-2.11,4.131-4.555,4.131h-2.825c-2.446,0-4.217-1.854-4.553-4.131v-7.277 c-0.422-2.783,2.486-4.724,5.187-5.061c7.335-0.926,10.708-3.203,10.708-7.335v-0.169c0-3.794-2.867-5.987-7.759-5.987 c-3.625,0-6.745,1.097-9.78,3.373c-1.013,0.759-2.362,1.35-3.796,1.35c-3.204,0-5.903-2.7-5.903-5.902 c0-1.604,0.675-3.29,2.194-4.555c4.469-3.709,10.118-6.072,17.538-6.072c12.144,0,20.408,6.24,20.408,17.455V37.467z"/>
</svg>
<svg class="close-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M50.433,0.892c-27.119,0-49.102,21.983-49.102,49.102s21.983,49.103,49.102,49.103s49.101-21.984,49.101-49.103 S77.552,0.892,50.433,0.892z M69.879,70.439l-0.05,0.053c-2.644,2.792-7.052,2.913-9.845,0.269l-10.192-9.649l-9.647,10.19 c-2.645,2.793-6.998,2.853-9.845,0.268l-0.053-0.048c-2.847-2.586-2.915-7.052-0.27-9.845l9.648-10.19L28.707,41.149 c-2.793-2.645-2.913-7.052-0.269-9.845l0.05-0.053c2.645-2.793,7.052-2.914,9.845-0.27l10.919,10.337l10.337-10.918 c2.645-2.793,7.053-2.913,9.846-0.27l0.052,0.049c2.793,2.644,2.913,7.053,0.27,9.845L59.418,50.945l10.192,9.65 C72.402,63.239,72.523,67.647,69.879,70.439z"/>
</svg>
</div>
<script src="./assets/main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>