1 files changed, 106 insertions, 0 deletions
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>