diff options
| -rw-r--r-- | .reuse/dep5 | 10 | ||||
| -rw-r--r-- | LICENSES/MIT.txt | 19 | ||||
| -rw-r--r-- | index.html | 106 |
3 files changed, 135 insertions, 0 deletions
diff --git a/.reuse/dep5 b/.reuse/dep5 new file mode 100644 index 0000000..7b3b49b --- /dev/null +++ b/.reuse/dep5 @@ -0,0 +1,10 @@ +Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/ +Upstream-Name: Moji +Upstream-Contact: Ethel Morgan <eth@ethulhu.co.uk> +Source: https://moji.eth.moe + +# Sample paragraph, commented out: +# +# Files: src/* +# Copyright: $YEAR $NAME <$CONTACT> +# License: ... diff --git a/LICENSES/MIT.txt b/LICENSES/MIT.txt new file mode 100644 index 0000000..204b93d --- /dev/null +++ b/LICENSES/MIT.txt @@ -0,0 +1,19 @@ +MIT License Copyright (c) <year> <copyright holders> + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is furnished +to do so, subject to the following conditions: + +The above copyright notice and this permission notice (including the next +paragraph) shall be included in all copies or substantial portions of the +Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS +OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF +OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/index.html b/index.html new file mode 100644 index 0000000..44536a4 --- /dev/null +++ b/index.html @@ -0,0 +1,106 @@ +<!-- +SPDX-FileCopyrightText: 2020 Ethel Morgan + +SPDX-License-Identifier: MIT +--> + +<!DOCTYPE html> +<html lang='en'> +<head> + <meta charset='utf-8'> + <meta name='viewport' content='width=device-width, initial-scale=1.0'> + <title>moji</title> + <style> +:root { + --background-color: hsl(0, 0%, 100%); + --callout-color: hsl(0, 0%, 90%); + + --foreground-color: hsl(0, 0%, 0%); + --link-color: hsl(0, 0%, 50%); + --link-hover-color: hsl(205, 69%, 50%); +} +@media (prefers-color-scheme: dark) { + :root { + --background-color: hsl(0, 0%, 12%); + --callout-color: hsl(0, 0%, 24%); + + --foreground-color: hsl(0, 0%, 82%); + --link-color: hsl(0, 0%, 65%); + --link-hover-color: hsl(259, 49%, 65%); + } +} + +body { + background: var( --background-color ); + color: var( --foreground-color ); +} +@media screen and ( min-width: 40em ) { + body { + margin: 0 auto; + padding: 10% 0; + max-width: 30em; + } +} +table { + table-layout: fixed; + width: 100%; + text-align: center; +} +button { + background-color: var( --link-hover-color ); + color: var( --background-color ); + + border-radius: 5px; + border: solid 3px var( --link-hover-color ); +} + </style> +</head> + +<body> + <main> + <table id='moji'> + <tr> + <td>ᓚᘏᗢ</td> + <td>cat</td> + </tr> + <tr> + <td>¯\_(ツ)_/¯</td> + <td>shruggie</td> + </tr> + <tr> + <td>→</td> + <td>right arrow</td> + </tr> + <tr> + <td>←</td> + <td>left arrow</td> + </tr> + </table> + </main> + <script type='module'> + document.querySelectorAll('#moji tr').forEach( tr => { + const text = tr.firstElementChild.textContent; + + const button = document.createElement( 'button' ); + button.textContent = 'copy'; + button.addEventListener( 'click' , e => { + if ( navigator.clipboard ) { + navigator.clipboard.writeText( text ); + } else { + const setClipboardText = e => { + e.preventDefault(); + e.clipboardData.setData( 'text/plain', text ); + }; + document.addEventListener( 'copy', setClipboardText ); + document.execCommand( 'copy' ); + document.removeEventListener( 'copy', setClipboardText ); + } + } ); + + const td = document.createElement( 'td' ); + td.appendChild( button ); + tr.appendChild( td ); + } ); + </script> +</body> +</html> |