Last active
August 18, 2021 12:39
-
-
Save d-a-s-h-o/d8107ab7908b6a4bb278c4beaf18a5ca to your computer and use it in GitHub Desktop.
Saltify can be used to encrypt anything and everything using portable NaCl encryption. Tor friendly.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Made by Dasho | |
// You can generate a good random salt value from the PHP CLI like this: php -r "echo bin2hex(random_bytes(16));" | |
// The resulting string will look like this: 7674ffcd9882e411415ea1ab7726642d | |
define('SALT', sodium_hex2bin('1234567890abcdef1234567890abcdef')); | |
$b91_enctab = array( | |
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', | |
'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', | |
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', | |
'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', | |
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '!', '#', '$', | |
'%', '&', '(', ')', '*', '+', ',', '.', '/', ':', ';', '<', '=', | |
'>', '?', '@', '[', ']', '^', '_', '`', '{', '|', '}', '~', '"' | |
); | |
$b91_dectab = array_flip($b91_enctab); | |
function base91_decode($d) { | |
global $b91_dectab; | |
$n = $b = $o = null; | |
$l = strlen($d); | |
$v = -1; | |
for ($i = 0; $i < $l; ++$i) { | |
$c = $b91_dectab[$d[$i]]; | |
if(!isset($c)) | |
continue; | |
if($v < 0) | |
$v = $c; | |
else { | |
$v += $c * 91; | |
$b |= $v << $n; | |
$n += ($v & 8191) > 88 ? 13 : 14; | |
do { | |
$o .= chr($b & 255); | |
$b >>= 8; | |
$n -= 8; | |
} while ($n > 7); | |
$v = -1; | |
} | |
} | |
if($v + 1) | |
$o .= chr(($b | $v << $n) & 255); | |
return $o; | |
} | |
function base91_encode($d) { | |
global $b91_enctab; | |
$n = $b = $o = null; | |
$l = strlen($d); | |
for ($i = 0; $i < $l; ++$i) { | |
$b |= ord($d[$i]) << $n; | |
$n += 8; | |
if($n > 13) { | |
$v = $b & 8191; | |
if($v > 88) { | |
$b >>= 13; | |
$n -= 13; | |
} else { | |
$v = $b & 16383; | |
$b >>= 14; | |
$n -= 14; | |
} | |
$o .= $b91_enctab[$v % 91] . $b91_enctab[$v / 91]; | |
} | |
} | |
if($n) { | |
$o .= $b91_enctab[$b % 91]; | |
if($n > 7 || $b > 90) | |
$o .= $b91_enctab[$b / 91]; | |
} | |
return $o; | |
} | |
function saltify_encrypt($message, $key) { | |
$nonce = random_bytes(SODIUM_CRYPTO_SECRETBOX_NONCEBYTES); | |
$cipher = base91_encode($nonce.sodium_crypto_secretbox($message, $nonce, $key)); | |
sodium_memzero($message); | |
sodium_memzero($key); | |
return $cipher; | |
} | |
function saltify_decrypt($encrypted, $key) { | |
$decoded = base91_decode($encrypted); | |
if($decoded === false) return false; | |
if(mb_strlen($decoded, '8bit') < (SODIUM_CRYPTO_SECRETBOX_NONCEBYTES + SODIUM_CRYPTO_SECRETBOX_MACBYTES)) return false; | |
$nonce = mb_substr($decoded, 0, SODIUM_CRYPTO_SECRETBOX_NONCEBYTES, '8bit'); | |
$ciphertext = mb_substr($decoded, SODIUM_CRYPTO_SECRETBOX_NONCEBYTES, null, '8bit'); | |
$plain = sodium_crypto_secretbox_open($ciphertext, $nonce, $key); | |
if($plain === false) return false; | |
sodium_memzero($ciphertext); | |
sodium_memzero($key); | |
return $plain; | |
} | |
function saltify_key($key) { | |
$key = sodium_crypto_pwhash(32, $key, SALT, SODIUM_CRYPTO_PWHASH_OPSLIMIT_INTERACTIVE, SODIUM_CRYPTO_PWHASH_MEMLIMIT_INTERACTIVE); | |
return $key; | |
} | |
if(isset($_REQUEST['payload'])) { | |
$payload = $_REQUEST['payload']; | |
$key = $_REQUEST['key']; | |
$saltify_key = saltify_key($key); | |
$pl = $payload; | |
$pl = str_replace('-- BEGIN SALTIFY ENCRYPTED MESSAGE --', '', $pl); | |
$pl = str_replace('-- END SALTIFY ENCRYPTED MESSAGE --', '', $pl); | |
$pl = str_replace("\n", '', $pl); | |
$pl = str_replace("\r", '', $pl); | |
$pl = str_replace(' ', '', $pl); | |
// is the resulting payload something that comes back as valid? | |
$dec = saltify_decrypt($pl, $saltify_key); | |
$result = "\n".'<section id="results"><h2>Results</h2>'; | |
if($dec === false) { | |
$result .= "\n".'<p><span class="detected">🎯 Detected unencrypted plaintext.</span></p>'; | |
$enc = saltify_encrypt($payload, $saltify_key); //generates random encrypted string (Base64 related) | |
$encrypted = str_split($enc, 2); | |
$encrypted = '-- BEGIN SALTIFY ENCRYPTED MESSAGE --'."\n".implode(' ', $encrypted)."\n".'-- END SALTIFY ENCRYPTED MESSAGE --'; | |
$dec = saltify_decrypt($enc, $saltify_key); //generates random encrypted string (Base64 related) | |
$result .= "\n".'<h3>🔐 Shareable cipher</h3>'; | |
$result .= "\n".'<pre>'.htmlentities($encrypted).'</pre>'; | |
$enc2 = saltify_encrypt($payload, $saltify_key); //generates random encrypted string (Base64 related) | |
$result .= "\n".'<h3>🔑 Compressed version</h3>'; | |
$result .= "\n".'<pre>'.htmlentities($enc2).'</pre><p><small><span class="chars">'.strlen($enc2).' chars</span></small></p>'; | |
} | |
else { | |
$result .= "\n".'<p><span class="detected">✅ Detected Saltify cipher.</span></p>'; | |
$result .= "\n".'<h3>Decrypted</h3>'; | |
$result .= "\n".'<pre>'.htmlentities($dec).'</pre>'; | |
} | |
$result .= "\n</section>"; | |
} | |
else { | |
$payload = 'The quick brown fox jumped over the lazy sleeping dog.'; | |
$key = 'hunter2'; | |
$result = null; | |
} | |
?> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Saltify</title> | |
<meta property="og:title" content="Saltify"> | |
<meta property="og:description" content="Portable NaCl-powered encryption"> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | |
/* | |
* | |
* 𝗖 𝗢 𝗟 𝗢 𝗥 | |
* v 1.7.0 | |
* | |
* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ | |
:root { | |
/* General | |
* ─────────────────────────────────── */ | |
--oc-white: #ffffff; | |
--oc-white-rgb: 255, 255, 255; | |
--oc-black: #000000; | |
--oc-black-rgb: 0, 0, 0; | |
/* Gray | |
* ─────────────────────────────────── */ | |
--oc-gray-0: #f8f9fa; | |
--oc-gray-0-rgb: 248, 249, 250; | |
--oc-gray-1: #f1f3f5; | |
--oc-gray-1-rgb: 241, 243, 245; | |
--oc-gray-2: #e9ecef; | |
--oc-gray-2-rgb: 233, 236, 239; | |
--oc-gray-3: #dee2e6; | |
--oc-gray-3-rgb: 222, 226, 230; | |
--oc-gray-4: #ced4da; | |
--oc-gray-4-rgb: 206, 212, 218; | |
--oc-gray-5: #adb5bd; | |
--oc-gray-5-rgb: 173, 181, 189; | |
--oc-gray-6: #868e96; | |
--oc-gray-6-rgb: 134, 142, 150; | |
--oc-gray-7: #495057; | |
--oc-gray-7-rgb: 73, 80, 87; | |
--oc-gray-8: #343a40; | |
--oc-gray-8-rgb: 52, 58, 64; | |
--oc-gray-9: #212529; | |
--oc-gray-9-rgb: 33, 37, 41; | |
/* Red | |
* ─────────────────────────────────── */ | |
--oc-red-0: #fff5f5; | |
--oc-red-0-rgb: 255, 245, 245; | |
--oc-red-1: #ffe3e3; | |
--oc-red-1-rgb: 255, 227, 227; | |
--oc-red-2: #ffc9c9; | |
--oc-red-2-rgb: 255, 201, 201; | |
--oc-red-3: #ffa8a8; | |
--oc-red-3-rgb: 255, 168, 168; | |
--oc-red-4: #ff8787; | |
--oc-red-4-rgb: 255, 135, 135; | |
--oc-red-5: #ff6b6b; | |
--oc-red-5-rgb: 255, 107, 107; | |
--oc-red-6: #fa5252; | |
--oc-red-6-rgb: 250, 82, 82; | |
--oc-red-7: #f03e3e; | |
--oc-red-7-rgb: 240, 62, 62; | |
--oc-red-8: #e03131; | |
--oc-red-8-rgb: 224, 49, 49; | |
--oc-red-9: #c92a2a; | |
--oc-red-9-rgb: 201, 42, 42; | |
/* Pink | |
* ─────────────────────────────────── */ | |
--oc-pink-0: #fff0f6; | |
--oc-pink-0-rgb: 255, 240, 246; | |
--oc-pink-1: #ffdeeb; | |
--oc-pink-1-rgb: 255, 222, 235; | |
--oc-pink-2: #fcc2d7; | |
--oc-pink-2-rgb: 252, 194, 215; | |
--oc-pink-3: #faa2c1; | |
--oc-pink-3-rgb: 250, 162, 193; | |
--oc-pink-4: #f783ac; | |
--oc-pink-4-rgb: 247, 131, 172; | |
--oc-pink-5: #f06595; | |
--oc-pink-5-rgb: 240, 101, 149; | |
--oc-pink-6: #e64980; | |
--oc-pink-6-rgb: 230, 73, 128; | |
--oc-pink-7: #d6336c; | |
--oc-pink-7-rgb: 214, 51, 108; | |
--oc-pink-8: #c2255c; | |
--oc-pink-8-rgb: 194, 37, 92; | |
--oc-pink-9: #a61e4d; | |
--oc-pink-9-rgb: 166, 30, 77; | |
/* Grape | |
* ─────────────────────────────────── */ | |
--oc-grape-0: #f8f0fc; | |
--oc-grape-0-rgb: 248, 240, 252; | |
--oc-grape-1: #f3d9fa; | |
--oc-grape-1-rgb: 243, 217, 250; | |
--oc-grape-2: #eebefa; | |
--oc-grape-2-rgb: 238, 190, 250; | |
--oc-grape-3: #e599f7; | |
--oc-grape-3-rgb: 229, 153, 247; | |
--oc-grape-4: #da77f2; | |
--oc-grape-4-rgb: 218, 119, 242; | |
--oc-grape-5: #cc5de8; | |
--oc-grape-5-rgb: 204, 93, 232; | |
--oc-grape-6: #be4bdb; | |
--oc-grape-6-rgb: 190, 75, 219; | |
--oc-grape-7: #ae3ec9; | |
--oc-grape-7-rgb: 174, 62, 201; | |
--oc-grape-8: #9c36b5; | |
--oc-grape-8-rgb: 156, 54, 181; | |
--oc-grape-9: #862e9c; | |
--oc-grape-9-rgb: 134, 46, 156; | |
/* Violet | |
* ─────────────────────────────────── */ | |
--oc-violet-0: #f3f0ff; | |
--oc-violet-0-rgb: 243, 240, 255; | |
--oc-violet-1: #e5dbff; | |
--oc-violet-1-rgb: 229, 219, 255; | |
--oc-violet-2: #d0bfff; | |
--oc-violet-2-rgb: 208, 191, 255; | |
--oc-violet-3: #b197fc; | |
--oc-violet-3-rgb: 177, 151, 252; | |
--oc-violet-4: #9775fa; | |
--oc-violet-4-rgb: 151, 117, 250; | |
--oc-violet-5: #845ef7; | |
--oc-violet-5-rgb: 132, 94, 247; | |
--oc-violet-6: #7950f2; | |
--oc-violet-6-rgb: 121, 80, 242; | |
--oc-violet-7: #7048e8; | |
--oc-violet-7-rgb: 112, 72, 232; | |
--oc-violet-8: #6741d9; | |
--oc-violet-8-rgb: 103, 65, 217; | |
--oc-violet-9: #5f3dc4; | |
--oc-violet-9-rgb: 95, 61, 196; | |
/* Indigo | |
* ─────────────────────────────────── */ | |
--oc-indigo-0: #edf2ff; | |
--oc-indigo-0-rgb: 237, 242, 255; | |
--oc-indigo-1: #dbe4ff; | |
--oc-indigo-1-rgb: 219, 228, 255; | |
--oc-indigo-2: #bac8ff; | |
--oc-indigo-2-rgb: 186, 200, 255; | |
--oc-indigo-3: #91a7ff; | |
--oc-indigo-3-rgb: 145, 167, 255; | |
--oc-indigo-4: #748ffc; | |
--oc-indigo-4-rgb: 116, 143, 252; | |
--oc-indigo-5: #5c7cfa; | |
--oc-indigo-5-rgb: 92, 124, 250; | |
--oc-indigo-6: #4c6ef5; | |
--oc-indigo-6-rgb: 76, 110, 245; | |
--oc-indigo-7: #4263eb; | |
--oc-indigo-7-rgb: 66, 99, 235; | |
--oc-indigo-8: #3b5bdb; | |
--oc-indigo-8-rgb: 59, 91, 219; | |
--oc-indigo-9: #364fc7; | |
--oc-indigo-9-rgb: 54, 79, 199; | |
/* Blue | |
* ─────────────────────────────────── */ | |
--oc-blue-0: #e7f5ff; | |
--oc-blue-0-rgb: 231, 245, 255; | |
--oc-blue-1: #d0ebff; | |
--oc-blue-1-rgb: 208, 235, 255; | |
--oc-blue-2: #a5d8ff; | |
--oc-blue-2-rgb: 165, 216, 255; | |
--oc-blue-3: #74c0fc; | |
--oc-blue-3-rgb: 116, 192, 252; | |
--oc-blue-4: #4dabf7; | |
--oc-blue-4-rgb: 77, 171, 247; | |
--oc-blue-5: #339af0; | |
--oc-blue-5-rgb: 51, 154, 240; | |
--oc-blue-6: #228be6; | |
--oc-blue-6-rgb: 34, 139, 230; | |
--oc-blue-7: #1c7ed6; | |
--oc-blue-7-rgb: 28, 126, 214; | |
--oc-blue-8: #1971c2; | |
--oc-blue-8-rgb: 25, 113, 194; | |
--oc-blue-9: #1864ab; | |
--oc-blue-9-rgb: 24, 100, 171; | |
/* Cyan | |
* ─────────────────────────────────── */ | |
--oc-cyan-0: #e3fafc; | |
--oc-cyan-0-rgb: 227, 250, 252; | |
--oc-cyan-1: #c5f6fa; | |
--oc-cyan-1-rgb: 197, 246, 250; | |
--oc-cyan-2: #99e9f2; | |
--oc-cyan-2-rgb: 153, 233, 242; | |
--oc-cyan-3: #66d9e8; | |
--oc-cyan-3-rgb: 102, 217, 232; | |
--oc-cyan-4: #3bc9db; | |
--oc-cyan-4-rgb: 59, 201, 219; | |
--oc-cyan-5: #22b8cf; | |
--oc-cyan-5-rgb: 34, 184, 207; | |
--oc-cyan-6: #15aabf; | |
--oc-cyan-6-rgb: 21, 170, 191; | |
--oc-cyan-7: #1098ad; | |
--oc-cyan-7-rgb: 16, 152, 173; | |
--oc-cyan-8: #0c8599; | |
--oc-cyan-8-rgb: 12, 133, 153; | |
--oc-cyan-9: #0b7285; | |
--oc-cyan-9-rgb: 11, 114, 133; | |
/* Teal | |
* ─────────────────────────────────── */ | |
--oc-teal-0: #e6fcf5; | |
--oc-teal-0-rgb: 230, 252, 245; | |
--oc-teal-1: #c3fae8; | |
--oc-teal-1-rgb: 195, 250, 232; | |
--oc-teal-2: #96f2d7; | |
--oc-teal-2-rgb: 150, 242, 215; | |
--oc-teal-3: #63e6be; | |
--oc-teal-3-rgb: 99, 230, 190; | |
--oc-teal-4: #38d9a9; | |
--oc-teal-4-rgb: 56, 217, 169; | |
--oc-teal-5: #20c997; | |
--oc-teal-5-rgb: 32, 201, 151; | |
--oc-teal-6: #12b886; | |
--oc-teal-6-rgb: 18, 184, 134; | |
--oc-teal-7: #0ca678; | |
--oc-teal-7-rgb: 12, 166, 120; | |
--oc-teal-8: #099268; | |
--oc-teal-8-rgb: 9, 146, 104; | |
--oc-teal-9: #087f5b; | |
--oc-teal-9-rgb: 8, 127, 91; | |
/* Green | |
* ─────────────────────────────────── */ | |
--oc-green-0: #ebfbee; | |
--oc-green-0-rgb: 235, 251, 238; | |
--oc-green-1: #d3f9d8; | |
--oc-green-1-rgb: 211, 249, 216; | |
--oc-green-2: #b2f2bb; | |
--oc-green-2-rgb: 178, 242, 187; | |
--oc-green-3: #8ce99a; | |
--oc-green-3-rgb: 140, 233, 154; | |
--oc-green-4: #69db7c; | |
--oc-green-4-rgb: 105, 219, 124; | |
--oc-green-5: #51cf66; | |
--oc-green-5-rgb: 81, 207, 102; | |
--oc-green-6: #40c057; | |
--oc-green-6-rgb: 64, 192, 87; | |
--oc-green-7: #37b24d; | |
--oc-green-7-rgb: 55, 178, 77; | |
--oc-green-8: #2f9e44; | |
--oc-green-8-rgb: 47, 158, 68; | |
--oc-green-9: #2b8a3e; | |
--oc-green-9-rgb: 43, 138, 62; | |
/* Lime | |
* ─────────────────────────────────── */ | |
--oc-lime-0: #f4fce3; | |
--oc-lime-0-rgb: 244, 252, 227; | |
--oc-lime-1: #e9fac8; | |
--oc-lime-1-rgb: 233, 250, 200; | |
--oc-lime-2: #d8f5a2; | |
--oc-lime-2-rgb: 216, 245, 162; | |
--oc-lime-3: #c0eb75; | |
--oc-lime-3-rgb: 192, 235, 117; | |
--oc-lime-4: #a9e34b; | |
--oc-lime-4-rgb: 169, 227, 75; | |
--oc-lime-5: #94d82d; | |
--oc-lime-5-rgb: 148, 216, 45; | |
--oc-lime-6: #82c91e; | |
--oc-lime-6-rgb: 130, 201, 30; | |
--oc-lime-7: #74b816; | |
--oc-lime-7-rgb: 116, 184, 22; | |
--oc-lime-8: #66a80f; | |
--oc-lime-8-rgb: 102, 168, 15; | |
--oc-lime-9: #5c940d; | |
--oc-lime-9-rgb: 92, 148, 13; | |
/* Yellow | |
* ─────────────────────────────────── */ | |
--oc-yellow-0: #fff9db; | |
--oc-yellow-0-rgb: 255, 249, 219; | |
--oc-yellow-1: #fff3bf; | |
--oc-yellow-1-rgb: 255, 243, 191; | |
--oc-yellow-2: #ffec99; | |
--oc-yellow-2-rgb: 255, 236, 153; | |
--oc-yellow-3: #ffe066; | |
--oc-yellow-3-rgb: 255, 224, 102; | |
--oc-yellow-4: #ffd43b; | |
--oc-yellow-4-rgb: 255, 212, 59; | |
--oc-yellow-5: #fcc419; | |
--oc-yellow-5-rgb: 252, 196, 25; | |
--oc-yellow-6: #fab005; | |
--oc-yellow-6-rgb: 250, 176, 5; | |
--oc-yellow-7: #f59f00; | |
--oc-yellow-7-rgb: 245, 159, 0; | |
--oc-yellow-8: #f08c00; | |
--oc-yellow-8-rgb: 240, 140, 0; | |
--oc-yellow-9: #e67700; | |
--oc-yellow-9-rgb: 230, 119, 0; | |
/* Orange | |
* ─────────────────────────────────── */ | |
--oc-orange-0: #fff4e6; | |
--oc-orange-0-rgb: 255, 244, 230; | |
--oc-orange-1: #ffe8cc; | |
--oc-orange-1-rgb: 255, 232, 204; | |
--oc-orange-2: #ffd8a8; | |
--oc-orange-2-rgb: 255, 216, 168; | |
--oc-orange-3: #ffc078; | |
--oc-orange-3-rgb: 255, 192, 120; | |
--oc-orange-4: #ffa94d; | |
--oc-orange-4-rgb: 255, 169, 77; | |
--oc-orange-5: #ff922b; | |
--oc-orange-5-rgb: 255, 146, 43; | |
--oc-orange-6: #fd7e14; | |
--oc-orange-6-rgb: 253, 126, 20; | |
--oc-orange-7: #f76707; | |
--oc-orange-7-rgb: 247, 103, 7; | |
--oc-orange-8: #e8590c; | |
--oc-orange-8-rgb: 232, 89, 12; | |
--oc-orange-9: #d9480f; | |
--oc-orange-9-rgb: 217, 72, 15; | |
} | |
/* Colors */ | |
:root { | |
--background: var(--oc-gray-9); | |
--background-secondary: var(--oc-gray-8); | |
--background-tertiary: var(--oc-gray-7); | |
--foreground: var(--oc-white); | |
--foreground-heavy: var(--oc-white); | |
} | |
*, *::before, *::after { | |
box-sizing: border-box; | |
} | |
a:link, a:visited, a:hover, a:active { | |
color: inherit !important; | |
} | |
html { | |
font-family: 'Inter', sans-serif; | |
font-feature-settings: "calt" 1; | |
font-size: 1.2em; | |
background: var(--background); | |
color: var(--foreground); | |
height: 100%; | |
} | |
* { | |
transition: background .1s; | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
@supports (font-variation-settings: normal) { | |
html { | |
font-family: 'Inter var', sans-serif; | |
} | |
} | |
/* Type */ | |
.centered { | |
text-align: center; | |
} | |
/* Flexbox */ | |
.flex { | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.box { | |
flex-grow: 1; | |
flex-basis: 15em; | |
margin: 0 .5em .5em 0; | |
} | |
.fit { | |
flex-basis: 1em; | |
} | |
.half { flex-basis: calc(50% - (.5em * 2)); } | |
.third { flex-basis: calc(33% - (.5em * 3)); } | |
.fourth { flex-basis: calc(25% - (.5em * 4)); } | |
.fifth { flex-basis: calc(20% - (.5em * 5)); } | |
.clickable:hover { | |
cursor: pointer; | |
} | |
main, header, footer { | |
display: block; | |
margin: auto; | |
padding: 0 2em; | |
max-width: 50em; | |
} | |
header nav { | |
margin: 1em 0 5em 0; | |
padding: 0; | |
background: var(--background); | |
font-size: 80%; | |
} | |
header nav .fa-long-arrow-alt-right { | |
padding: 0 .7em 0 .1em; | |
color: var(--foreground); | |
} | |
header, footer { | |
padding-top: 2em; | |
} | |
footer { | |
text-align: center; | |
padding-bottom: 3em; | |
} | |
footer small { | |
font-size: .8em; | |
} | |
footer small a { | |
text-decoration: none; | |
} | |
footer li a:link, footer li a:visited { | |
color: #333; | |
} | |
footer li a:hover, footer li a:active { | |
color: #555; | |
} | |
footer .fab { | |
font-size: 1.6em; | |
} | |
footer .site { | |
font-size: 80%; | |
margin: 1.5em 0 !important; | |
} | |
footer .site li { | |
padding-right: .5em; | |
} | |
footer .site li a { | |
text-decoration: none; | |
} | |
footer img { | |
width: 4em; | |
margin: 2em 0 1em 0; | |
} | |
/* Headings */ | |
h1, h2, h3, h4, h5, h6 { | |
margin: 2rem 0; | |
font-weight: 500; | |
color: var(--foreground-heavy); | |
} | |
h1 { | |
font-weight: 700; | |
} | |
section h2 { | |
margin: 1rem 0 2rem 0; | |
} | |
p, ul, li, div { | |
line-height: 160%; | |
} | |
ul.horizontal { | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
} | |
ul.horizontal li { | |
display: inline; | |
} | |
.bulletless { | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
} | |
hr { | |
border: 0; | |
height: 1px; | |
background: var(--foreground); | |
margin: 2em 0; | |
} | |
/* Sections */ | |
section { | |
border-left: .5em solid var(--background); | |
padding-left: 1em; | |
padding-top: .5em; | |
padding-bottom: .5em; | |
margin-left: -1.5em; | |
} | |
/* Blockquotes & Code */ | |
.code, pre, code, .monospace { | |
font-family: 'Fira Code'; | |
} | |
pre { | |
white-space: pre-wrap; | |
word-break: break-word; | |
} | |
/* Messages */ | |
.message { | |
display: flex; | |
color: var(--foreground); | |
margin: 1.5em 0; | |
width: 100%; | |
align-items: stretch; | |
align-content: stretch; | |
} | |
.message-icon { | |
background: var(--background-tertiary); | |
align-self: stretch; | |
padding: .5em; | |
border-top-left-radius: .2em; | |
border-bottom-left-radius: .2em; | |
} | |
.message-icon i { | |
font-size: 1.5em; | |
margin: .5em; | |
} | |
.message-text { | |
flex-basis: 100%; | |
margin: 0; | |
padding: 1.25em; | |
overflow: hidden; | |
background: var(--background-secondary); | |
align-self: stretch; | |
border-top-right-radius: .2em; | |
border-bottom-right-radius: .2em; | |
} | |
.confirmation .message-icon { background: var(--oc-green-5); color: var(--oc-black); } | |
.confirmation .message-text { background: var(--oc-green-3); color: var(--oc-black); } | |
.notice .message-icon { background: var(--oc-yellow-5); color: var(--oc-black); } | |
.notice .message-text { background: var(--oc-yellow-3); color: var(--oc-black); } | |
.warning .message-icon { background: var(--oc-orange-5); color: var(--oc-black); } | |
.warning .message-text { background: var(--oc-orange-3); color: var(--oc-black); } | |
.alert .message-icon { background: var(--oc-red-5); color: var(--oc-black); } | |
.alert .message-text { background: var(--oc-red-3); color: var(--oc-black); } | |
/* Nav */ | |
nav { | |
width: 100%; | |
padding: .5em 1em; | |
border-radius: 0.2em; | |
margin: 2em 0; | |
background: var(--background-secondary); | |
} | |
nav a:link, nav a:visited { | |
text-decoration: none; | |
} | |
nav a:hover, nav a:active { | |
text-decoration: none; | |
} | |
nav li { | |
margin-right: .5em; | |
} | |
.smaller { | |
font-size: 90%; | |
} | |
.even-smaller { | |
font-size: 80%; | |
} | |
.larger { | |
font-size: 120%; | |
} | |
.even-larger { | |
font-size: 130%; | |
} | |
.border-solid { | |
border: 1px solid #888; | |
border-radius: .2em; | |
} | |
.border-dashed { | |
border: 1px dashed #888; | |
border-radius: .2em; | |
} | |
.border-dotted { | |
border: 1px dotted #888; | |
border-radius: .2em; | |
} | |
/* Forms */ | |
.required:before { | |
content: "REQUIRED"; | |
font-size: 60%; | |
/*background: #e75757;*/ | |
color: #fff; | |
padding: .25em .5em; | |
border-radius: .25em; | |
margin: 0 0 0 .5em; | |
} | |
.form_note { | |
padding: .5em 1em; | |
margin-top: 2em; | |
border-radius: .2em; | |
} | |
fieldset { | |
margin: 1.5em 0; | |
padding: 1em; | |
border: 0; | |
background: var(--background-secondary); | |
color: var(--foreground); | |
border-radius: .2em; | |
} | |
legend { | |
padding: .7em 1em 2.5em .85em; | |
margin: 0 0 -2.5em -.85em; | |
font-weight: 700; | |
font-size: 120%; | |
background: var(--background-secondary); | |
color: var(--foereground); | |
border-radius: .2em; | |
} | |
input, button, select, option, textarea { | |
font-family: inherit; | |
font-size: inherit; | |
background: var(--background); | |
color: var(--foreground); | |
padding: .5em; | |
border-radius: .2em; | |
} | |
button, select, option { | |
cursor: pointer; | |
} | |
input, select, option, textarea { | |
border: 1px solid #999; | |
} | |
textarea { | |
width: 100%; | |
} | |
select { | |
-webkit-appearance: none; | |
} | |
label { | |
cursor: pointer; | |
display: block; | |
margin: 1em 0 .5em 0; | |
font-weight: normal; | |
} | |
.label { | |
cursor: pointer; | |
margin: .4em 0 .4em 0;; | |
} | |
.radio label, | |
.checkbox label { | |
display: inline; | |
margin: 0; | |
} | |
.group { | |
margin-bottom: 1em; | |
} | |
button, .button, input[type="submit"] { | |
border: 0; | |
padding: .5em 1em; | |
cursor: pointer; | |
border-radius: .2em; | |
background: var(--oc-blue-7); | |
color: var(--oc-white); | |
} | |
input[type="text"], input[type="password"], select { | |
width: 95%; | |
margin-bottom: .5em; | |
} | |
button:hover, | |
button:focus { | |
opacity: .85; | |
} | |
button:active { | |
transform: scale(0.97); | |
transition: transform 0.1s ease-in-out; | |
} | |
form { | |
width: 100%; | |
} | |
.form-reset { | |
margin: 0; | |
} | |
form aside { | |
margin: .2em 0 2em 0; | |
font-size: 80%; | |
} | |
aside { | |
float: right; | |
} | |
aside nav { | |
margin: 0 0 1em 1em; | |
padding: .3em .2em; | |
} | |
.heading-aligned { | |
margin-top: -4em; | |
} | |
/* Toggle Switch */ | |
.switch { | |
--line: #ccc; | |
--dot: var(--oc-violet-4); | |
--circle: var(--oc-yellow-3); | |
--background: #aaa; | |
--duration: .3s; | |
--text: #000; | |
--shadow: 0 1px 3px rgba(0, 9, 61, 0.08); | |
cursor: pointer; | |
position: relative; | |
} | |
.switch:before { | |
content: ''; | |
width: 60px; | |
height: 32px; | |
border-radius: 16px; | |
background: var(--background); | |
position: absolute; | |
left: 0; | |
top: 0; | |
box-shadow: var(--shadow); | |
} | |
.switch input { | |
display: none; | |
} | |
.switch input + div { | |
position: relative; | |
} | |
.switch input + div:before, .switch input + div:after { | |
--s: 1; | |
content: ''; | |
position: absolute; | |
height: 4px; | |
top: 14px; | |
width: 24px; | |
background: var(--line); | |
-webkit-transform: scaleX(var(--s)); | |
transform: scaleX(var(--s)); | |
-webkit-transition: -webkit-transform var(--duration) ease; | |
transition: -webkit-transform var(--duration) ease; | |
transition: transform var(--duration) ease; | |
transition: transform var(--duration) ease, -webkit-transform var(--duration) ease; | |
} | |
.switch input + div:before { | |
--s: 0; | |
left: 4px; | |
-webkit-transform-origin: 0 50%; | |
transform-origin: 0 50%; | |
border-radius: 2px 0 0 2px; | |
} | |
.switch input + div:after { | |
left: 32px; | |
-webkit-transform-origin: 100% 50%; | |
transform-origin: 100% 50%; | |
border-radius: 0 2px 2px 0; | |
} | |
.switch input + div span { | |
padding-left: 60px; | |
line-height: 28px; | |
color: var(--text); | |
} | |
.switch input + div span:before { | |
--x: 0; | |
--b: var(--circle); | |
--s: 15px; | |
content: ''; | |
position: absolute; | |
left: 4px; | |
top: 4px; | |
width: 24px; | |
height: 24px; | |
border-radius: 50%; | |
box-shadow: inset 0 0 0 var(--s) var(--b); | |
-webkit-transform: translateX(var(--x)); | |
transform: translateX(var(--x)); | |
-webkit-transition: box-shadow var(--duration) ease, -webkit-transform var(--duration) ease; | |
transition: box-shadow var(--duration) ease, -webkit-transform var(--duration) ease; | |
transition: box-shadow var(--duration) ease, transform var(--duration) ease; | |
transition: box-shadow var(--duration) ease, transform var(--duration) ease, -webkit-transform var(--duration) ease; | |
} | |
.switch input + div span:not(:empty) { | |
padding-left: 68px; | |
} | |
.switch input:checked + div:before { | |
--s: 1; | |
} | |
.switch input:checked + div:after { | |
--s: 0; | |
} | |
.switch input:checked + div span:before { | |
--x: 28px; | |
--s: 12px; | |
--b: var(--dot); | |
} | |
body .switch + .switch { | |
margin-top: 32px; | |
} | |
/* Checkboxes */ | |
input[type=checkbox] { display: none; } | |
input[type=checkbox] + label:before { | |
font-family: 'Font Awesome 6 Pro'; | |
display: inline-block; | |
width: 1.3em; | |
} | |
input[type=checkbox] + label:before { content: "\f0c8"; } | |
input[type=checkbox]:checked + label:before { content: "\f14a"; } | |
/* Radio Buttons */ | |
input[type=radio] { display: none; } | |
input[type=radio] + label:before { | |
font-family: 'Font Awesome 6 Pro'; | |
display: inline-block; | |
width: 1.3em; | |
} | |
input[type=radio] + label:before { content: "\f111"; } | |
input[type=radio]:checked + label:before { content: "\f192"; } | |
/* Tables */ | |
.table-container { | |
overflow-x: auto; | |
} | |
table { | |
border-collapse: collapse; | |
width: 100%; | |
} | |
th, td { | |
background: var(--background); | |
padding: .5em; | |
} | |
th { | |
border-bottom: 1px solid var(--foreground); | |
background: var(--background-secondary); | |
} | |
tr:nth-child(even) td { | |
background: var(--background-secondary); | |
} | |
th:first-child { border-top-left-radius: 0.2em; } | |
th:last-child { border-top-right-radius: 0.2em; } | |
tr:last-child td:first-child { border-bottom-left-radius: 0.2em; } | |
tr:last-child td:last-child { border-bottom-right-radius: 0.2em; } | |
::selection { | |
color: var(--background); | |
background: var(--foreground); | |
} | |
@media (max-width: 900px) { | |
html { | |
font-size: 1.05em; | |
} | |
main, header, footer { | |
padding: 0 1.5em; | |
} | |
header { | |
padding-top: 2em; | |
} | |
header nav { | |
margin: .5 0 3em 0; | |
} | |
footer { | |
padding-top: 2em; | |
padding-bottom: 3em; | |
} | |
} | |
@media (max-width: 500px) { | |
html { | |
font-size: 1em; | |
} | |
main, header, footer { | |
padding: 0 1em; | |
} | |
header { | |
padding-top: 2em; | |
} | |
header nav { | |
margin: 0 0 2em 0; | |
} | |
footer { | |
padding-top: 2em; | |
padding-bottom: 3em; | |
} | |
} | |
body { | |
font-family: sans-serif; | |
} | |
main { | |
margin: auto; | |
max-width: 50em; | |
line-height: 1.5em; | |
} | |
input, textarea { | |
display: block; | |
width: 100%; | |
} | |
pre { | |
font-family: Courier, monospace; | |
font-size: 14px; | |
white-space: pre-wrap; | |
white-space: -moz-pre-wrap; | |
white-space: -pre-wrap; | |
white-space: -o-pre-wrap; | |
word-wrap: break-word; | |
} | |
</style> | |
</head> | |
<body> | |
<header> | |
<h1>Saltify</h1> | |
</header> | |
<main> | |
<p><em>Portable NaCl-powered encryption for everything</em></p> | |
<p>Saltify makes it easy to send strongly-encrypted messages with a shared key. It uses <a href="https://nacl.cr.yp.to">NaCl</a> for encryption and <a href="http://base91.sourceforge.net">basE91</a> for portability.</p> | |
<form action="<?php echo basename(__FILE__); ?>#results" method="post"> | |
<fieldset> | |
<legend>Use encryption</legend> | |
<p>Enter a payload and provide a key below. Your payload can be unencrypted plaintext or a Saltify-encrypted cipher (detected automatically).</p> | |
<p> | |
<label for="payload">Payload</label> | |
<textarea name="payload" id="payload"><?php echo $payload; ?></textarea> | |
</p> | |
<p> | |
<label for="key">Key</label> | |
<input type="text" name="key" id="key" value="<?php echo $key; ?>"> | |
</p> | |
<input type="submit" value="Go"> | |
</fieldset> | |
</form> | |
<?php | |
echo $result; | |
?> | |
</main> | |
<footer> | |
<ul class="horizontal site"> | |
<li>© Saltify</li> | |
</ul> | |
</footer> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment