payload-maker.php (27870B)
1 <?php 2 // Made by Dasho 3 // You can generate a good random salt value from the PHP CLI like this: php -r "echo bin2hex(random_bytes(16));" 4 // The resulting string will look like this: 7674ffcd9882e411415ea1ab7726642d 5 6 /* 7 This is a copy of the script that is used to generate the payload for the verification process on verify.dasho.dev. Use this script alongside with the payload-verifier.php script to make payloads that others can verify. 8 */ 9 10 define('SALT', sodium_hex2bin('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX')); 11 12 $b91_enctab = array( 13 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 14 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 15 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 16 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 17 '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '!', '#', '$', 18 '%', '&', '(', ')', '*', '+', ',', '.', '/', ':', ';', '<', '=', 19 '>', '?', '@', '[', ']', '^', '_', '`', '{', '|', '}', '~', '"' 20 ); 21 22 $b91_dectab = array_flip($b91_enctab); 23 24 function base91_decode($d) { 25 global $b91_dectab; 26 $n = $b = $o = null; 27 $l = strlen($d); 28 $v = -1; 29 for ($i = 0; $i < $l; ++$i) { 30 $c = $b91_dectab[$d[$i]]; 31 if(!isset($c)) 32 continue; 33 if($v < 0) 34 $v = $c; 35 else { 36 $v += $c * 91; 37 $b |= $v << $n; 38 $n += ($v & 8191) > 88 ? 13 : 14; 39 do { 40 $o .= chr($b & 255); 41 $b >>= 8; 42 $n -= 8; 43 } while ($n > 7); 44 $v = -1; 45 } 46 } 47 if($v + 1) 48 $o .= chr(($b | $v << $n) & 255); 49 return $o; 50 } 51 52 function base91_encode($d) { 53 global $b91_enctab; 54 $n = $b = $o = null; 55 $l = strlen($d); 56 for ($i = 0; $i < $l; ++$i) { 57 $b |= ord($d[$i]) << $n; 58 $n += 8; 59 if($n > 13) { 60 $v = $b & 8191; 61 if($v > 88) { 62 $b >>= 13; 63 $n -= 13; 64 } else { 65 $v = $b & 16383; 66 $b >>= 14; 67 $n -= 14; 68 } 69 $o .= $b91_enctab[$v % 91] . $b91_enctab[$v / 91]; 70 } 71 } 72 if($n) { 73 $o .= $b91_enctab[$b % 91]; 74 if($n > 7 || $b > 90) 75 $o .= $b91_enctab[$b / 91]; 76 } 77 return $o; 78 } 79 80 function saltify_encrypt($message, $key) { 81 $nonce = random_bytes(SODIUM_CRYPTO_SECRETBOX_NONCEBYTES); 82 $cipher = base91_encode($nonce.sodium_crypto_secretbox($message, $nonce, $key)); 83 sodium_memzero($message); 84 sodium_memzero($key); 85 return $cipher; 86 } 87 88 function saltify_decrypt($encrypted, $key) { 89 $decoded = base91_decode($encrypted); 90 if($decoded === false) return false; 91 if(mb_strlen($decoded, '8bit') < (SODIUM_CRYPTO_SECRETBOX_NONCEBYTES + SODIUM_CRYPTO_SECRETBOX_MACBYTES)) return false; 92 $nonce = mb_substr($decoded, 0, SODIUM_CRYPTO_SECRETBOX_NONCEBYTES, '8bit'); 93 $ciphertext = mb_substr($decoded, SODIUM_CRYPTO_SECRETBOX_NONCEBYTES, null, '8bit'); 94 $plain = sodium_crypto_secretbox_open($ciphertext, $nonce, $key); 95 if($plain === false) return false; 96 sodium_memzero($ciphertext); 97 sodium_memzero($key); 98 return $plain; 99 } 100 101 function saltify_key($key) { 102 $key = sodium_crypto_pwhash(32, $key, SALT, SODIUM_CRYPTO_PWHASH_OPSLIMIT_INTERACTIVE, SODIUM_CRYPTO_PWHASH_MEMLIMIT_INTERACTIVE); 103 return $key; 104 } 105 106 if(isset($_REQUEST['payload'])) { 107 $payload = $_REQUEST['payload']; 108 $key = $_REQUEST['key']; 109 $saltify_key = saltify_key($key); 110 111 $pl = $payload; 112 113 $pl = str_replace('-- BEGIN VERIFICATION PAYLOAD --', '', $pl); 114 $pl = str_replace('-- END VERIFICATION PAYLOAD --', '', $pl); 115 $pl = str_replace("\n", '', $pl); 116 $pl = str_replace("\r", '', $pl); 117 $pl = str_replace(' ', '', $pl); 118 119 // is the resulting payload something that comes back as valid? 120 $dec = saltify_decrypt($pl, $saltify_key); 121 122 $result = "\n".'<section id="results"><h2>Results</h2>'; 123 124 if($dec === false) { 125 $result .= "\n".'<p><span class="detected">🎯 Payload Created</span></p>'; 126 $enc = saltify_encrypt($payload, $saltify_key); //generates random encrypted string (Base64 related) 127 $encrypted = str_split($enc, 2); 128 $encrypted = '-- BEGIN VERIFICATION PAYLOAD --'."\n".implode(' ', $encrypted)."\n".'-- END VERIFICATION PAYLOAD --'; 129 $dec = saltify_decrypt($enc, $saltify_key); //generates random encrypted string (Base64 related) 130 $result .= "\n".'<h3>🔐 Verification payload</h3>'; 131 $result .= "\n".'<pre>'.htmlentities($encrypted).'</pre>'; 132 $enc2 = saltify_encrypt($payload, $saltify_key); //generates random encrypted string (Base64 related) 133 $result .= "\n".'<h3>🔑 Compressed version</h3>'; 134 $result .= "\n".'<pre>'.htmlentities($enc2).'</pre><p><small><span class="chars">'.strlen($enc2).' chars</span></small></p>'; 135 } 136 else { 137 if(preg_match('/Expires (\d\d\ (January|February|March|April|May|June|July|August|September|October|November|December) \d\d\d\d)/i', $dec, $date)) { 138 $expiry_date = strtotime($date[1]); 139 if(strtotime("now") > $expiry_date){ 140 $result .= "\n".'<p><span class="detected">⛔ Payload cannot verify - Payload expired ⛔</span></p>'; 141 }else{ 142 $result .= "\n".'<p><span class="detected">✅ Payload verifies correctly ✅</span></p>'; 143 $result .= "\n".'<pre>'.htmlentities($dec).'</pre>'; 144 } 145 }else{ 146 $result .= "\n".'<p><span class="detected">✅ Payload verifies correctly ✅</span></p>'; 147 $result .= "\n".'<pre>'.htmlentities($dec).'</pre>'; 148 } 149 } 150 151 $result .= "\n</section>"; 152 153 } 154 else { 155 $payload = 'Enter verification payload here...'; 156 $key = 'Enter your script secret key here...'; 157 158 $result = null; 159 } 160 161 ?> 162 163 <!DOCTYPE html> 164 <html lang="en"> 165 <head> 166 <title>Auth Dasho</title> 167 <link rel="shortcut icon" href="https://cdn.onionz.dev/global/images/favicon.svg" /> 168 <meta property="og:title" content="Auth Dasho"> 169 <meta property="og:description" content="Auth Dasho"> 170 <meta charset="utf-8"> 171 <meta name="viewport" content="width=device-width, initial-scale=1"> 172 <style> 173 174 /* 175 * 176 * 𝗖 𝗢 𝗟 𝗢 𝗥 177 * v 1.7.0 178 * 179 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 180 181 :root { 182 183 /* General 184 * ─────────────────────────────────── */ 185 186 --oc-white: #ffffff; 187 --oc-white-rgb: 255, 255, 255; 188 --oc-black: #000000; 189 --oc-black-rgb: 0, 0, 0; 190 191 192 /* Gray 193 * ─────────────────────────────────── */ 194 195 --oc-gray-0: #f8f9fa; 196 --oc-gray-0-rgb: 248, 249, 250; 197 --oc-gray-1: #f1f3f5; 198 --oc-gray-1-rgb: 241, 243, 245; 199 --oc-gray-2: #e9ecef; 200 --oc-gray-2-rgb: 233, 236, 239; 201 --oc-gray-3: #dee2e6; 202 --oc-gray-3-rgb: 222, 226, 230; 203 --oc-gray-4: #ced4da; 204 --oc-gray-4-rgb: 206, 212, 218; 205 --oc-gray-5: #adb5bd; 206 --oc-gray-5-rgb: 173, 181, 189; 207 --oc-gray-6: #868e96; 208 --oc-gray-6-rgb: 134, 142, 150; 209 --oc-gray-7: #495057; 210 --oc-gray-7-rgb: 73, 80, 87; 211 --oc-gray-8: #343a40; 212 --oc-gray-8-rgb: 52, 58, 64; 213 --oc-gray-9: #212529; 214 --oc-gray-9-rgb: 33, 37, 41; 215 216 217 /* Red 218 * ─────────────────────────────────── */ 219 220 --oc-red-0: #fff5f5; 221 --oc-red-0-rgb: 255, 245, 245; 222 --oc-red-1: #ffe3e3; 223 --oc-red-1-rgb: 255, 227, 227; 224 --oc-red-2: #ffc9c9; 225 --oc-red-2-rgb: 255, 201, 201; 226 --oc-red-3: #ffa8a8; 227 --oc-red-3-rgb: 255, 168, 168; 228 --oc-red-4: #ff8787; 229 --oc-red-4-rgb: 255, 135, 135; 230 --oc-red-5: #ff6b6b; 231 --oc-red-5-rgb: 255, 107, 107; 232 --oc-red-6: #fa5252; 233 --oc-red-6-rgb: 250, 82, 82; 234 --oc-red-7: #f03e3e; 235 --oc-red-7-rgb: 240, 62, 62; 236 --oc-red-8: #e03131; 237 --oc-red-8-rgb: 224, 49, 49; 238 --oc-red-9: #c92a2a; 239 --oc-red-9-rgb: 201, 42, 42; 240 241 242 /* Pink 243 * ─────────────────────────────────── */ 244 245 --oc-pink-0: #fff0f6; 246 --oc-pink-0-rgb: 255, 240, 246; 247 --oc-pink-1: #ffdeeb; 248 --oc-pink-1-rgb: 255, 222, 235; 249 --oc-pink-2: #fcc2d7; 250 --oc-pink-2-rgb: 252, 194, 215; 251 --oc-pink-3: #faa2c1; 252 --oc-pink-3-rgb: 250, 162, 193; 253 --oc-pink-4: #f783ac; 254 --oc-pink-4-rgb: 247, 131, 172; 255 --oc-pink-5: #f06595; 256 --oc-pink-5-rgb: 240, 101, 149; 257 --oc-pink-6: #e64980; 258 --oc-pink-6-rgb: 230, 73, 128; 259 --oc-pink-7: #d6336c; 260 --oc-pink-7-rgb: 214, 51, 108; 261 --oc-pink-8: #c2255c; 262 --oc-pink-8-rgb: 194, 37, 92; 263 --oc-pink-9: #a61e4d; 264 --oc-pink-9-rgb: 166, 30, 77; 265 266 267 /* Grape 268 * ─────────────────────────────────── */ 269 270 --oc-grape-0: #f8f0fc; 271 --oc-grape-0-rgb: 248, 240, 252; 272 --oc-grape-1: #f3d9fa; 273 --oc-grape-1-rgb: 243, 217, 250; 274 --oc-grape-2: #eebefa; 275 --oc-grape-2-rgb: 238, 190, 250; 276 --oc-grape-3: #e599f7; 277 --oc-grape-3-rgb: 229, 153, 247; 278 --oc-grape-4: #da77f2; 279 --oc-grape-4-rgb: 218, 119, 242; 280 --oc-grape-5: #cc5de8; 281 --oc-grape-5-rgb: 204, 93, 232; 282 --oc-grape-6: #be4bdb; 283 --oc-grape-6-rgb: 190, 75, 219; 284 --oc-grape-7: #ae3ec9; 285 --oc-grape-7-rgb: 174, 62, 201; 286 --oc-grape-8: #9c36b5; 287 --oc-grape-8-rgb: 156, 54, 181; 288 --oc-grape-9: #862e9c; 289 --oc-grape-9-rgb: 134, 46, 156; 290 291 292 /* Violet 293 * ─────────────────────────────────── */ 294 295 --oc-violet-0: #f3f0ff; 296 --oc-violet-0-rgb: 243, 240, 255; 297 --oc-violet-1: #e5dbff; 298 --oc-violet-1-rgb: 229, 219, 255; 299 --oc-violet-2: #d0bfff; 300 --oc-violet-2-rgb: 208, 191, 255; 301 --oc-violet-3: #b197fc; 302 --oc-violet-3-rgb: 177, 151, 252; 303 --oc-violet-4: #9775fa; 304 --oc-violet-4-rgb: 151, 117, 250; 305 --oc-violet-5: #845ef7; 306 --oc-violet-5-rgb: 132, 94, 247; 307 --oc-violet-6: #7950f2; 308 --oc-violet-6-rgb: 121, 80, 242; 309 --oc-violet-7: #7048e8; 310 --oc-violet-7-rgb: 112, 72, 232; 311 --oc-violet-8: #6741d9; 312 --oc-violet-8-rgb: 103, 65, 217; 313 --oc-violet-9: #5f3dc4; 314 --oc-violet-9-rgb: 95, 61, 196; 315 316 317 /* Indigo 318 * ─────────────────────────────────── */ 319 320 --oc-indigo-0: #edf2ff; 321 --oc-indigo-0-rgb: 237, 242, 255; 322 --oc-indigo-1: #dbe4ff; 323 --oc-indigo-1-rgb: 219, 228, 255; 324 --oc-indigo-2: #bac8ff; 325 --oc-indigo-2-rgb: 186, 200, 255; 326 --oc-indigo-3: #91a7ff; 327 --oc-indigo-3-rgb: 145, 167, 255; 328 --oc-indigo-4: #748ffc; 329 --oc-indigo-4-rgb: 116, 143, 252; 330 --oc-indigo-5: #5c7cfa; 331 --oc-indigo-5-rgb: 92, 124, 250; 332 --oc-indigo-6: #4c6ef5; 333 --oc-indigo-6-rgb: 76, 110, 245; 334 --oc-indigo-7: #4263eb; 335 --oc-indigo-7-rgb: 66, 99, 235; 336 --oc-indigo-8: #3b5bdb; 337 --oc-indigo-8-rgb: 59, 91, 219; 338 --oc-indigo-9: #364fc7; 339 --oc-indigo-9-rgb: 54, 79, 199; 340 341 342 /* Blue 343 * ─────────────────────────────────── */ 344 345 --oc-blue-0: #e7f5ff; 346 --oc-blue-0-rgb: 231, 245, 255; 347 --oc-blue-1: #d0ebff; 348 --oc-blue-1-rgb: 208, 235, 255; 349 --oc-blue-2: #a5d8ff; 350 --oc-blue-2-rgb: 165, 216, 255; 351 --oc-blue-3: #74c0fc; 352 --oc-blue-3-rgb: 116, 192, 252; 353 --oc-blue-4: #4dabf7; 354 --oc-blue-4-rgb: 77, 171, 247; 355 --oc-blue-5: #339af0; 356 --oc-blue-5-rgb: 51, 154, 240; 357 --oc-blue-6: #228be6; 358 --oc-blue-6-rgb: 34, 139, 230; 359 --oc-blue-7: #1c7ed6; 360 --oc-blue-7-rgb: 28, 126, 214; 361 --oc-blue-8: #1971c2; 362 --oc-blue-8-rgb: 25, 113, 194; 363 --oc-blue-9: #1864ab; 364 --oc-blue-9-rgb: 24, 100, 171; 365 366 367 /* Cyan 368 * ─────────────────────────────────── */ 369 370 --oc-cyan-0: #e3fafc; 371 --oc-cyan-0-rgb: 227, 250, 252; 372 --oc-cyan-1: #c5f6fa; 373 --oc-cyan-1-rgb: 197, 246, 250; 374 --oc-cyan-2: #99e9f2; 375 --oc-cyan-2-rgb: 153, 233, 242; 376 --oc-cyan-3: #66d9e8; 377 --oc-cyan-3-rgb: 102, 217, 232; 378 --oc-cyan-4: #3bc9db; 379 --oc-cyan-4-rgb: 59, 201, 219; 380 --oc-cyan-5: #22b8cf; 381 --oc-cyan-5-rgb: 34, 184, 207; 382 --oc-cyan-6: #15aabf; 383 --oc-cyan-6-rgb: 21, 170, 191; 384 --oc-cyan-7: #1098ad; 385 --oc-cyan-7-rgb: 16, 152, 173; 386 --oc-cyan-8: #0c8599; 387 --oc-cyan-8-rgb: 12, 133, 153; 388 --oc-cyan-9: #0b7285; 389 --oc-cyan-9-rgb: 11, 114, 133; 390 391 392 /* Teal 393 * ─────────────────────────────────── */ 394 395 --oc-teal-0: #e6fcf5; 396 --oc-teal-0-rgb: 230, 252, 245; 397 --oc-teal-1: #c3fae8; 398 --oc-teal-1-rgb: 195, 250, 232; 399 --oc-teal-2: #96f2d7; 400 --oc-teal-2-rgb: 150, 242, 215; 401 --oc-teal-3: #63e6be; 402 --oc-teal-3-rgb: 99, 230, 190; 403 --oc-teal-4: #38d9a9; 404 --oc-teal-4-rgb: 56, 217, 169; 405 --oc-teal-5: #20c997; 406 --oc-teal-5-rgb: 32, 201, 151; 407 --oc-teal-6: #12b886; 408 --oc-teal-6-rgb: 18, 184, 134; 409 --oc-teal-7: #0ca678; 410 --oc-teal-7-rgb: 12, 166, 120; 411 --oc-teal-8: #099268; 412 --oc-teal-8-rgb: 9, 146, 104; 413 --oc-teal-9: #087f5b; 414 --oc-teal-9-rgb: 8, 127, 91; 415 416 417 /* Green 418 * ─────────────────────────────────── */ 419 420 --oc-green-0: #ebfbee; 421 --oc-green-0-rgb: 235, 251, 238; 422 --oc-green-1: #d3f9d8; 423 --oc-green-1-rgb: 211, 249, 216; 424 --oc-green-2: #b2f2bb; 425 --oc-green-2-rgb: 178, 242, 187; 426 --oc-green-3: #8ce99a; 427 --oc-green-3-rgb: 140, 233, 154; 428 --oc-green-4: #69db7c; 429 --oc-green-4-rgb: 105, 219, 124; 430 --oc-green-5: #51cf66; 431 --oc-green-5-rgb: 81, 207, 102; 432 --oc-green-6: #40c057; 433 --oc-green-6-rgb: 64, 192, 87; 434 --oc-green-7: #37b24d; 435 --oc-green-7-rgb: 55, 178, 77; 436 --oc-green-8: #2f9e44; 437 --oc-green-8-rgb: 47, 158, 68; 438 --oc-green-9: #2b8a3e; 439 --oc-green-9-rgb: 43, 138, 62; 440 441 442 /* Lime 443 * ─────────────────────────────────── */ 444 445 --oc-lime-0: #f4fce3; 446 --oc-lime-0-rgb: 244, 252, 227; 447 --oc-lime-1: #e9fac8; 448 --oc-lime-1-rgb: 233, 250, 200; 449 --oc-lime-2: #d8f5a2; 450 --oc-lime-2-rgb: 216, 245, 162; 451 --oc-lime-3: #c0eb75; 452 --oc-lime-3-rgb: 192, 235, 117; 453 --oc-lime-4: #a9e34b; 454 --oc-lime-4-rgb: 169, 227, 75; 455 --oc-lime-5: #94d82d; 456 --oc-lime-5-rgb: 148, 216, 45; 457 --oc-lime-6: #82c91e; 458 --oc-lime-6-rgb: 130, 201, 30; 459 --oc-lime-7: #74b816; 460 --oc-lime-7-rgb: 116, 184, 22; 461 --oc-lime-8: #66a80f; 462 --oc-lime-8-rgb: 102, 168, 15; 463 --oc-lime-9: #5c940d; 464 --oc-lime-9-rgb: 92, 148, 13; 465 466 467 /* Yellow 468 * ─────────────────────────────────── */ 469 470 --oc-yellow-0: #fff9db; 471 --oc-yellow-0-rgb: 255, 249, 219; 472 --oc-yellow-1: #fff3bf; 473 --oc-yellow-1-rgb: 255, 243, 191; 474 --oc-yellow-2: #ffec99; 475 --oc-yellow-2-rgb: 255, 236, 153; 476 --oc-yellow-3: #ffe066; 477 --oc-yellow-3-rgb: 255, 224, 102; 478 --oc-yellow-4: #ffd43b; 479 --oc-yellow-4-rgb: 255, 212, 59; 480 --oc-yellow-5: #fcc419; 481 --oc-yellow-5-rgb: 252, 196, 25; 482 --oc-yellow-6: #fab005; 483 --oc-yellow-6-rgb: 250, 176, 5; 484 --oc-yellow-7: #f59f00; 485 --oc-yellow-7-rgb: 245, 159, 0; 486 --oc-yellow-8: #f08c00; 487 --oc-yellow-8-rgb: 240, 140, 0; 488 --oc-yellow-9: #e67700; 489 --oc-yellow-9-rgb: 230, 119, 0; 490 491 492 /* Orange 493 * ─────────────────────────────────── */ 494 495 --oc-orange-0: #fff4e6; 496 --oc-orange-0-rgb: 255, 244, 230; 497 --oc-orange-1: #ffe8cc; 498 --oc-orange-1-rgb: 255, 232, 204; 499 --oc-orange-2: #ffd8a8; 500 --oc-orange-2-rgb: 255, 216, 168; 501 --oc-orange-3: #ffc078; 502 --oc-orange-3-rgb: 255, 192, 120; 503 --oc-orange-4: #ffa94d; 504 --oc-orange-4-rgb: 255, 169, 77; 505 --oc-orange-5: #ff922b; 506 --oc-orange-5-rgb: 255, 146, 43; 507 --oc-orange-6: #fd7e14; 508 --oc-orange-6-rgb: 253, 126, 20; 509 --oc-orange-7: #f76707; 510 --oc-orange-7-rgb: 247, 103, 7; 511 --oc-orange-8: #e8590c; 512 --oc-orange-8-rgb: 232, 89, 12; 513 --oc-orange-9: #d9480f; 514 --oc-orange-9-rgb: 217, 72, 15; 515 516 } 517 518 /* Colors */ 519 520 :root { 521 --background: var(--oc-gray-9); 522 --background-secondary: var(--oc-gray-8); 523 --background-tertiary: var(--oc-gray-7); 524 --foreground: var(--oc-white); 525 --foreground-heavy: var(--oc-white); 526 } 527 528 *, *::before, *::after { 529 box-sizing: border-box; 530 } 531 532 a:link, a:visited, a:hover, a:active { 533 color: inherit !important; 534 } 535 536 html { 537 font-family: 'Inter', sans-serif; 538 font-feature-settings: "calt" 1; 539 font-size: 1.2em; 540 background: var(--background); 541 color: var(--foreground); 542 height: 100%; 543 } 544 545 * { 546 transition: background .1s; 547 } 548 549 body { 550 margin: 0; 551 padding: 0; 552 } 553 554 @supports (font-variation-settings: normal) { 555 html { 556 font-family: 'Inter var', sans-serif; 557 } 558 } 559 560 /* Type */ 561 562 .centered { 563 text-align: center; 564 } 565 566 /* Flexbox */ 567 568 .flex { 569 display: flex; 570 flex-wrap: wrap; 571 } 572 573 .box { 574 flex-grow: 1; 575 flex-basis: 15em; 576 margin: 0 .5em .5em 0; 577 } 578 579 .fit { 580 flex-basis: 1em; 581 } 582 583 .half { flex-basis: calc(50% - (.5em * 2)); } 584 .third { flex-basis: calc(33% - (.5em * 3)); } 585 .fourth { flex-basis: calc(25% - (.5em * 4)); } 586 .fifth { flex-basis: calc(20% - (.5em * 5)); } 587 588 .clickable:hover { 589 cursor: pointer; 590 } 591 592 main, header, footer { 593 display: block; 594 margin: auto; 595 padding: 0 2em; 596 max-width: 50em; 597 } 598 599 header nav { 600 margin: 1em 0 5em 0; 601 padding: 0; 602 background: var(--background); 603 font-size: 80%; 604 } 605 606 header nav .fa-long-arrow-alt-right { 607 padding: 0 .7em 0 .1em; 608 color: var(--foreground); 609 } 610 611 header, footer { 612 padding-top: 2em; 613 } 614 615 footer { 616 text-align: center; 617 padding-bottom: 3em; 618 } 619 620 footer small { 621 font-size: .8em; 622 } 623 624 footer small a { 625 text-decoration: none; 626 } 627 628 footer li a:link, footer li a:visited { 629 color: #333; 630 } 631 632 footer li a:hover, footer li a:active { 633 color: #555; 634 } 635 636 footer .fab { 637 font-size: 1.6em; 638 } 639 640 footer .site { 641 font-size: 80%; 642 margin: 1.5em 0 !important; 643 } 644 645 footer .site li { 646 padding-right: .5em; 647 } 648 649 footer .site li a { 650 text-decoration: none; 651 } 652 653 footer img { 654 width: 4em; 655 margin: 2em 0 1em 0; 656 } 657 658 /* Headings */ 659 660 h1, h2, h3, h4, h5, h6 { 661 margin: 2rem 0; 662 font-weight: 500; 663 color: var(--foreground-heavy); 664 } 665 666 h1 { 667 font-weight: 700; 668 } 669 670 section h2 { 671 margin: 1rem 0 2rem 0; 672 } 673 674 p, ul, li, div { 675 line-height: 160%; 676 } 677 678 ul.horizontal { 679 list-style-type: none; 680 margin: 0; 681 padding: 0; 682 } 683 684 ul.horizontal li { 685 display: inline; 686 } 687 688 .bulletless { 689 list-style-type: none; 690 margin: 0; 691 padding: 0; 692 } 693 694 hr { 695 border: 0; 696 height: 1px; 697 background: var(--foreground); 698 margin: 2em 0; 699 } 700 701 /* Sections */ 702 703 section { 704 border-left: .5em solid var(--background); 705 padding-left: 1em; 706 padding-top: .5em; 707 padding-bottom: .5em; 708 margin-left: -1.5em; 709 } 710 711 /* Blockquotes & Code */ 712 713 .code, pre, code, .monospace { 714 font-family: 'Fira Code'; 715 } 716 717 pre { 718 white-space: pre-wrap; 719 word-break: break-word; 720 } 721 722 /* Messages */ 723 724 .message { 725 display: flex; 726 color: var(--foreground); 727 margin: 1.5em 0; 728 width: 100%; 729 align-items: stretch; 730 align-content: stretch; 731 } 732 733 .message-icon { 734 background: var(--background-tertiary); 735 align-self: stretch; 736 padding: .5em; 737 border-top-left-radius: .2em; 738 border-bottom-left-radius: .2em; 739 } 740 741 .message-icon i { 742 font-size: 1.5em; 743 margin: .5em; 744 } 745 746 .message-text { 747 flex-basis: 100%; 748 margin: 0; 749 padding: 1.25em; 750 overflow: hidden; 751 background: var(--background-secondary); 752 align-self: stretch; 753 border-top-right-radius: .2em; 754 border-bottom-right-radius: .2em; 755 } 756 757 .confirmation .message-icon { background: var(--oc-green-5); color: var(--oc-black); } 758 .confirmation .message-text { background: var(--oc-green-3); color: var(--oc-black); } 759 760 .notice .message-icon { background: var(--oc-yellow-5); color: var(--oc-black); } 761 .notice .message-text { background: var(--oc-yellow-3); color: var(--oc-black); } 762 763 .warning .message-icon { background: var(--oc-orange-5); color: var(--oc-black); } 764 .warning .message-text { background: var(--oc-orange-3); color: var(--oc-black); } 765 766 .alert .message-icon { background: var(--oc-red-5); color: var(--oc-black); } 767 .alert .message-text { background: var(--oc-red-3); color: var(--oc-black); } 768 769 /* Nav */ 770 771 nav { 772 width: 100%; 773 padding: .5em 1em; 774 border-radius: 0.2em; 775 margin: 2em 0; 776 background: var(--background-secondary); 777 } 778 779 nav a:link, nav a:visited { 780 text-decoration: none; 781 } 782 783 nav a:hover, nav a:active { 784 text-decoration: none; 785 } 786 787 nav li { 788 margin-right: .5em; 789 } 790 791 .smaller { 792 font-size: 90%; 793 } 794 795 .even-smaller { 796 font-size: 80%; 797 } 798 799 .larger { 800 font-size: 120%; 801 } 802 803 .even-larger { 804 font-size: 130%; 805 } 806 807 .border-solid { 808 border: 1px solid #888; 809 border-radius: .2em; 810 } 811 812 .border-dashed { 813 border: 1px dashed #888; 814 border-radius: .2em; 815 } 816 817 .border-dotted { 818 border: 1px dotted #888; 819 border-radius: .2em; 820 } 821 822 /* Forms */ 823 824 .required:before { 825 content: "REQUIRED"; 826 font-size: 60%; 827 /*background: #e75757;*/ 828 color: #fff; 829 padding: .25em .5em; 830 border-radius: .25em; 831 margin: 0 0 0 .5em; 832 } 833 834 .form_note { 835 padding: .5em 1em; 836 margin-top: 2em; 837 border-radius: .2em; 838 } 839 840 fieldset { 841 margin: 1.5em 0; 842 padding: 1em; 843 border: 0; 844 background: var(--background-secondary); 845 color: var(--foreground); 846 border-radius: .2em; 847 } 848 849 legend { 850 padding: .7em 1em 2.5em .85em; 851 margin: 0 0 -2.5em -.85em; 852 font-weight: 700; 853 font-size: 120%; 854 background: var(--background-secondary); 855 color: var(--foereground); 856 border-radius: .2em; 857 } 858 859 input, button, select, option, textarea { 860 font-family: inherit; 861 font-size: inherit; 862 background: var(--background); 863 color: var(--foreground); 864 padding: .5em; 865 border-radius: .2em; 866 } 867 868 button, select, option { 869 cursor: pointer; 870 } 871 872 input, select, option, textarea { 873 border: 1px solid #999; 874 } 875 876 textarea { 877 width: 100%; 878 } 879 880 select { 881 -webkit-appearance: none; 882 } 883 884 label { 885 cursor: pointer; 886 display: block; 887 margin: 1em 0 .5em 0; 888 font-weight: normal; 889 } 890 891 .label { 892 cursor: pointer; 893 margin: .4em 0 .4em 0;; 894 } 895 896 .radio label, 897 .checkbox label { 898 display: inline; 899 margin: 0; 900 } 901 902 .group { 903 margin-bottom: 1em; 904 } 905 906 button, .button, input[type="submit"] { 907 border: 0; 908 padding: .5em 1em; 909 cursor: pointer; 910 border-radius: .2em; 911 background: var(--oc-blue-7); 912 color: var(--oc-white); 913 } 914 915 input[type="text"], input[type="password"], select { 916 width: 95%; 917 margin-bottom: .5em; 918 } 919 920 button:hover, 921 button:focus { 922 opacity: .85; 923 } 924 925 button:active { 926 transform: scale(0.97); 927 transition: transform 0.1s ease-in-out; 928 } 929 930 form { 931 width: 100%; 932 } 933 934 .form-reset { 935 margin: 0; 936 } 937 938 form aside { 939 margin: .2em 0 2em 0; 940 font-size: 80%; 941 } 942 943 aside { 944 float: right; 945 } 946 947 aside nav { 948 margin: 0 0 1em 1em; 949 padding: .3em .2em; 950 } 951 952 .heading-aligned { 953 margin-top: -4em; 954 } 955 956 /* Toggle Switch */ 957 958 .switch { 959 --line: #ccc; 960 --dot: var(--oc-violet-4); 961 --circle: var(--oc-yellow-3); 962 --background: #aaa; 963 --duration: .3s; 964 --text: #000; 965 --shadow: 0 1px 3px rgba(0, 9, 61, 0.08); 966 cursor: pointer; 967 position: relative; 968 } 969 .switch:before { 970 content: ''; 971 width: 60px; 972 height: 32px; 973 border-radius: 16px; 974 background: var(--background); 975 position: absolute; 976 left: 0; 977 top: 0; 978 box-shadow: var(--shadow); 979 } 980 .switch input { 981 display: none; 982 } 983 .switch input + div { 984 position: relative; 985 } 986 .switch input + div:before, .switch input + div:after { 987 --s: 1; 988 content: ''; 989 position: absolute; 990 height: 4px; 991 top: 14px; 992 width: 24px; 993 background: var(--line); 994 -webkit-transform: scaleX(var(--s)); 995 transform: scaleX(var(--s)); 996 -webkit-transition: -webkit-transform var(--duration) ease; 997 transition: -webkit-transform var(--duration) ease; 998 transition: transform var(--duration) ease; 999 transition: transform var(--duration) ease, -webkit-transform var(--duration) ease; 1000 } 1001 .switch input + div:before { 1002 --s: 0; 1003 left: 4px; 1004 -webkit-transform-origin: 0 50%; 1005 transform-origin: 0 50%; 1006 border-radius: 2px 0 0 2px; 1007 } 1008 .switch input + div:after { 1009 left: 32px; 1010 -webkit-transform-origin: 100% 50%; 1011 transform-origin: 100% 50%; 1012 border-radius: 0 2px 2px 0; 1013 } 1014 .switch input + div span { 1015 padding-left: 60px; 1016 line-height: 28px; 1017 color: var(--text); 1018 } 1019 .switch input + div span:before { 1020 --x: 0; 1021 --b: var(--circle); 1022 --s: 15px; 1023 content: ''; 1024 position: absolute; 1025 left: 4px; 1026 top: 4px; 1027 width: 24px; 1028 height: 24px; 1029 border-radius: 50%; 1030 box-shadow: inset 0 0 0 var(--s) var(--b); 1031 -webkit-transform: translateX(var(--x)); 1032 transform: translateX(var(--x)); 1033 -webkit-transition: box-shadow var(--duration) ease, -webkit-transform var(--duration) ease; 1034 transition: box-shadow var(--duration) ease, -webkit-transform var(--duration) ease; 1035 transition: box-shadow var(--duration) ease, transform var(--duration) ease; 1036 transition: box-shadow var(--duration) ease, transform var(--duration) ease, -webkit-transform var(--duration) ease; 1037 } 1038 .switch input + div span:not(:empty) { 1039 padding-left: 68px; 1040 } 1041 .switch input:checked + div:before { 1042 --s: 1; 1043 } 1044 .switch input:checked + div:after { 1045 --s: 0; 1046 } 1047 .switch input:checked + div span:before { 1048 --x: 28px; 1049 --s: 12px; 1050 --b: var(--dot); 1051 } 1052 1053 body .switch + .switch { 1054 margin-top: 32px; 1055 } 1056 1057 /* Checkboxes */ 1058 1059 input[type=checkbox] { display: none; } 1060 input[type=checkbox] + label:before { 1061 font-family: 'Font Awesome 6 Pro'; 1062 display: inline-block; 1063 width: 1.3em; 1064 } 1065 input[type=checkbox] + label:before { content: "\f0c8"; } 1066 input[type=checkbox]:checked + label:before { content: "\f14a"; } 1067 1068 /* Radio Buttons */ 1069 1070 input[type=radio] { display: none; } 1071 input[type=radio] + label:before { 1072 font-family: 'Font Awesome 6 Pro'; 1073 display: inline-block; 1074 width: 1.3em; 1075 } 1076 input[type=radio] + label:before { content: "\f111"; } 1077 input[type=radio]:checked + label:before { content: "\f192"; } 1078 1079 /* Tables */ 1080 1081 .table-container { 1082 overflow-x: auto; 1083 } 1084 1085 table { 1086 border-collapse: collapse; 1087 width: 100%; 1088 } 1089 1090 th, td { 1091 background: var(--background); 1092 padding: .5em; 1093 } 1094 1095 th { 1096 border-bottom: 1px solid var(--foreground); 1097 background: var(--background-secondary); 1098 } 1099 1100 tr:nth-child(even) td { 1101 background: var(--background-secondary); 1102 } 1103 1104 th:first-child { border-top-left-radius: 0.2em; } 1105 th:last-child { border-top-right-radius: 0.2em; } 1106 tr:last-child td:first-child { border-bottom-left-radius: 0.2em; } 1107 tr:last-child td:last-child { border-bottom-right-radius: 0.2em; } 1108 1109 ::selection { 1110 color: var(--background); 1111 background: var(--foreground); 1112 } 1113 1114 @media (max-width: 900px) { 1115 html { 1116 font-size: 1.05em; 1117 } 1118 main, header, footer { 1119 padding: 0 1.5em; 1120 } 1121 header { 1122 padding-top: 2em; 1123 } 1124 header nav { 1125 margin: .5 0 3em 0; 1126 } 1127 footer { 1128 padding-top: 2em; 1129 padding-bottom: 3em; 1130 } 1131 } 1132 1133 @media (max-width: 500px) { 1134 html { 1135 font-size: 1em; 1136 } 1137 main, header, footer { 1138 padding: 0 1em; 1139 } 1140 header { 1141 padding-top: 2em; 1142 } 1143 header nav { 1144 margin: 0 0 2em 0; 1145 } 1146 footer { 1147 padding-top: 2em; 1148 padding-bottom: 3em; 1149 } 1150 } 1151 1152 body { 1153 font-family: sans-serif; 1154 } 1155 main { 1156 margin: auto; 1157 max-width: 50em; 1158 line-height: 1.5em; 1159 } 1160 input, textarea { 1161 display: block; 1162 width: 100%; 1163 } 1164 pre { 1165 font-family: Courier, monospace; 1166 font-size: 14px; 1167 white-space: pre-wrap; 1168 white-space: -moz-pre-wrap; 1169 white-space: -pre-wrap; 1170 white-space: -o-pre-wrap; 1171 word-wrap: break-word; 1172 } 1173 </style> 1174 </head> 1175 <body> 1176 1177 <header> 1178 1179 <h1>Auth Dasho</h1> 1180 </header> 1181 1182 <main> 1183 1184 <form action="#results" method="post"> 1185 <fieldset> 1186 <legend>Authenticate</legend> 1187 <p>Create an authenticated payload below.</p> 1188 <p> 1189 <label for="payload">Payload</label> 1190 <textarea name="payload" id="payload"><?php echo $payload; ?></textarea> 1191 </p> 1192 <p> 1193 <label for="key">Key</label> 1194 <textarea name="key" id="key"><?php echo $key; ?></textarea> 1195 </p> 1196 <input type="submit" value="Go"> 1197 </fieldset> 1198 </form> 1199 1200 1201 <?php 1202 1203 echo $result; 1204 1205 ?> 1206 1207 </main> 1208 1209 <footer> 1210 1211 <ul class="horizontal site"> 1212 <li>© Dasho</li> 1213 </ul> 1214 1215 </footer> 1216 1217 </body> 1218 </html>