diff --git a/public/ascii.php b/public/ascii.php index 59f9f5c..41cc616 100644 --- a/public/ascii.php +++ b/public/ascii.php @@ -1,406 +1,2 @@ - - - - - US-ASCII Table - - - -
-
-
- -
-
- Type printable for all printable characters, or control for all control characters. -
-
-
$info): - $isPrintable = ($code > 31 && $code < 127); - $print = $isPrintable ? chr($code) : $info[1]; - $attrs = ['data-key-code' => $code, 'data-key-desc' => $info[0], 'data-key-print' => $print, 'data-copy' => $print]; - $attrStr = ''; - - if($isPrintable && isset($info[1])) - $attrs['data-key-html'] = $info[1]; - - foreach($attrs as $name => $value) - $attrStr .= $name . '="' . htmlentities($value) . '" '; - ?>
> -
-
-
-
-
Decimal
-
-
-
-
Octal
-
-
-
-
Hex
-
-
- -
-
HTML
-
&;
-
- -
-
-
- - - +require_once __DIR__ . '/index.php'; diff --git a/public/css/2021.css b/public/css/2021.css index c04c2f4..c994cec 100644 --- a/public/css/2021.css +++ b/public/css/2021.css @@ -15,8 +15,16 @@ html { scrollbar-color: #4a3650 #111; } +pre, code { + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; +} + .hidden { display: none !important; + visibility: hidden !important; +} +.invisible { + opacity: 0; } /* an attempt to replicate scrollbar-color for chromosome */ @@ -51,6 +59,9 @@ body { overflow: hidden; transition: height .5s; } +.header-minimal .header { + height: auto; +} @media (max-width: 700px) { .header { height: auto; } } @@ -90,6 +101,9 @@ body { align-items: flex-end; padding: 10px; } +.header-minimal .header-foreground { + align-items: center; +} @media (max-width: 700px) { .header-foreground { justify-content: center; @@ -135,6 +149,9 @@ body { flex: 0 0 auto; margin-top: 10px; } +.header-minimal .header-menu { + margin-top: 0; +} .index .header-menu, .fullscreen-header .header-menu, .now-playing .header-menu { @@ -1003,3 +1020,104 @@ body { .ob-blog .ob-continue:active { background-color: #191919; } + +.ascii-wrap { + margin-bottom: calc(100vh - 70px); +} +.ascii-chars { + text-align: center; + max-width: 1200px; + margin: 0 auto; +} +.ascii-char { + display: inline-flex; + flex-direction: column; + border: 2px solid #4a3650; + border-radius: 5px; + overflow: hidden; + width: 200px; + text-align: left; + margin: 2px; + background-color: #333; + cursor: pointer !important; + transition: background-color .1s; +} +.ascii-char:hover, +.ascii-char:focus { + background-color: #444; +} +.ascii-char:active { + background-color: #222; +} +.ascii-char-print { + white-space: pre; + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; + font-size: 2.5em; + text-align: center; + padding: 10px; + pointer-events: none; +} +.ascii-char-desc { + text-align: center; + font-size: 1.2em; + padding: 0 5px 5px; + pointer-events: none; +} +.ascii-char-misc { + display: flex; + justify-content: space-evenly; + border-top: 1px solid #4a3650; +} +.ascii-char-misc-item { + flex: 1 1 auto; + padding: 2px 5px; + transition: background-color .1s; + background-color: #444; +} +.ascii-char-misc-item:not(:last-child) { + border-right: 1px solid #4a3650; +} +.ascii-char-misc-item:hover, +.ascii-char-misc-item:focus { + background-color: #666; +} +.ascii-char-misc-item:active { + background-color: #555; +} +.ascii-char-misc-item-head { + font-variant: small-caps; +} +.ascii-char-misc-item-value { + font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; + text-align: right; +} +.ascii-search { + padding-top: 10px; + position: sticky; + top: 0; + z-index: 1000; + background-image: linear-gradient(180deg, #4a3650 51px, transparent); +} +.ascii-search-box { + border: 1px solid #000; + border-radius: 5px; + overflow: hidden; + max-width: 1200px; + margin: 0 auto; +} +.ascii-search-box input { + border-width: 0; + background-color: #111; + color: #fff; + width: 100%; + height: 100%; + font-size: 2em; + padding: 5px; +} +.ascii-search-hint { + font-size: .9em; + padding: 0 5px; + transition: opacity .2s; + max-width: 1200px; + margin: 0 auto; +} diff --git a/public/index.php b/public/index.php index 5c491ab..dfee66a 100644 --- a/public/index.php +++ b/public/index.php @@ -42,6 +42,7 @@ define('MKI_REDIRS', [ '/contact.html' => '/contact', '/nintendo' => '/contact', '/nintendo.php' => '/contact', + '/ascii.php' => '/ascii', ]); $router = new HttpFx; @@ -174,6 +175,10 @@ $router->get('/projects', function() use ($ctx) { ]); }); +$router->get('/ascii', function() use ($ctx) { + return $ctx->getTemplating()->render('ascii'); +}); + $router->get('/ssh.php', function() { $query = ''; diff --git a/tpl/ascii.php b/tpl/ascii.php new file mode 100644 index 0000000..c8c83d0 --- /dev/null +++ b/tpl/ascii.php @@ -0,0 +1,279 @@ +extends('home/master'); + +$self->header_title = 'flash.moe / ascii table'; +$self->header_minimal = true; + +$self->block('container', function($self) { + $table = [ + // Control characters + ['Null character', 'NUL'], + ['Start of heading', 'SOH'], + ['Start of text', 'STX'], + ['End of text', 'ETX'], + ['End of transmission', 'EOT'], + ['Enquiry', 'ENQ'], + ['Acknowledgement', 'ACK'], + ['Bell', 'BEL'], + ['Backspace', 'BS' ], + ['Horizontal tab', 'HT' ], + ['Line feed', 'LF' ], + ['Vertical tab', 'VT' ], + ['Form feed', 'FF' ], + ['Carriage return', 'CR' ], + ['Shift out/X-On', 'SO' ], + ['Shift in/X-Off', 'SI' ], + ['Delta line escape', 'DLE'], + ['Device control 1 (often XON)', 'DC1'], + ['Device control 2', 'DC2'], + ['Device control 3 (often XOFF)', 'DC3'], + ['Device control 4', 'DC4'], + ['Negative acknowledgement', 'NAK'], + ['Synchronous idle', 'SYN'], + ['End of transmit block', 'ETB'], + ['Cancel', 'CAN'], + ['End of medium', 'EM' ], + ['Substitute', 'SUB'], + ['Escape', 'ESC'], + ['File separator', 'FS' ], + ['Group separator', 'GS' ], + ['Record separator', 'RS' ], + ['Unit separator', 'US' ], + + // Printable characters + ['Space'], + ['Excalamation mark'], + ['Double quotes', 'quot'], + ['Hash'], + ['Dollar'], + ['Percent'], + ['Ampersand', 'amp'], + ['Single quote'], + ['Open parenthesis'], + ['Close parenthesis'], + ['Asterisk'], + ['Plus'], + ['Comma'], + ['Hyphen'], + ['Period'], + ['Slash'], + ['Zero'], + ['One'], + ['Two'], + ['Three'], + ['Four'], + ['Five'], + ['Six'], + ['Seven'], + ['Eight'], + ['Nine'], + ['Colon'], + ['Semicolon'], + ['Less than', 'lt'], + ['Equals'], + ['Greater than', 'gt'], + ['Question mark'], + ['At symbol'], + ['Uppercase A'], + ['Uppercase B'], + ['Uppercase C'], + ['Uppercase D'], + ['Uppercase E'], + ['Uppercase F'], + ['Uppercase G'], + ['Uppercase H'], + ['Uppercase I'], + ['Uppercase J'], + ['Uppercase K'], + ['Uppercase L'], + ['Uppercase M'], + ['Uppercase N'], + ['Uppercase O'], + ['Uppercase P'], + ['Uppercase Q'], + ['Uppercase R'], + ['Uppercase S'], + ['Uppercase T'], + ['Uppercase U'], + ['Uppercase V'], + ['Uppercase W'], + ['Uppercase X'], + ['Uppercase Y'], + ['Uppercase Z'], + ['Opening bracket'], + ['Backslash'], + ['Closing bracket'], + ['Caret'], + ['Underscore'], + ['Accent grave'], + ['Lowercase a'], + ['Lowercase b'], + ['Lowercase c'], + ['Lowercase d'], + ['Lowercase e'], + ['Lowercase f'], + ['Lowercase g'], + ['Lowercase h'], + ['Lowercase i'], + ['Lowercase j'], + ['Lowercase k'], + ['Lowercase l'], + ['Lowercase m'], + ['Lowercase n'], + ['Lowercase o'], + ['Lowercase p'], + ['Lowercase q'], + ['Lowercase r'], + ['Lowercase s'], + ['Lowercase t'], + ['Lowercase u'], + ['Lowercase v'], + ['Lowercase w'], + ['Lowercase x'], + ['Lowercase y'], + ['Lowercase z'], + ['Opening curly brace'], + ['Vertical bar'], + ['Closing curly brace'], + ['Tilde'], + + // Delete + ['Delete', 'DEL'], + ]; +?> +
+
+
+ +
+
+ Type printable for all printable characters, or control for all control characters. +
+
+
$info): + $isPrintable = ($code > 31 && $code < 127); + $print = $isPrintable ? chr($code) : $info[1]; + $attrs = ['data-key-code' => $code, 'data-key-desc' => $info[0], 'data-key-print' => $print, 'data-copy' => $print]; + $attrStr = ''; + + if($isPrintable && isset($info[1])) + $attrs['data-key-html'] = $info[1]; + + foreach($attrs as $name => $value) + $attrStr .= $name . '="' . htmlentities($value) . '" '; + ?>
> +
+
+
+
+
Decimal
+
+
+
+
Octal
+
+
+
+
Hex
+
+
+ +
+
HTML
+
&;
+
+ +
+
+
+ + - +
header_offset) && $self->header_offset > 0) echo " style=\"padding-bottom: {$self->header_offset}px\""; ?>>