Deploying to gh-pages from @ de36c5d 🚀

MaxLaumeister · May 29, 2024 · aa29e16 · aa29e16
1 parent a0421ab
commit aa29e16
Show file tree

Hide file tree

Showing 17 changed files with 313 additions and 0 deletions.
diff --git a/all.js b/all.js
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
diff --git a/browserconfig.xml b/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="mstile-150x150.png"/>
+            <TileColor>#000000</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/clippy.svg b/clippy.svg
diff --git a/favicon-16x16.png b/favicon-16x16.png
diff --git a/favicon-32x32.png b/favicon-32x32.png
diff --git a/favicon-alt.png b/favicon-alt.png
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+	<meta name="viewport" content="width=530, user-scalable=no">
+	<title>ToneMatrix Redux Sequencer - No Flash Required</title>
+	<meta name="description" content="A pentatonic step sequencer. Click tiles and make music.">
+	<meta name="author" content="Maximillian Laumeister">
+	<link rel="canonical" href="https://www.maxlaumeister.com/tonematrix/">
+	<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+	<link rel="manifest" href="site.webmanifest">
+	<link rel="mask-icon" href="safari-pinned-tab.svg" color="#000668">
+	<meta name="apple-mobile-web-app-title" content="ToneMatrix">
+	<meta name="application-name" content="ToneMatrix">
+	<meta name="msapplication-TileColor" content="#000000">
+	<meta name="theme-color" content="#000000">
+	<script>
+	// If there is no trailing slash after the path in the url, add it
+	// Workaround for Netlify trailing-slash rewrite issue
+	// https://community.netlify.com/t/bug-in-non-trailing-slash-rewrite/452/23
+	if (!window.location.pathname.endsWith('/') && !window.location.pathname.split("/").pop().includes(".")) {
+		var url = window.location.protocol + '//' +
+			window.location.host +
+			window.location.pathname + '/' +
+			window.location.search;
+			window.history.replaceState(null, document.title, url);
+	}
+	</script>
+	<style>
+		@font-face {
+			font-family: 'Montserrat';
+			src: url('montserrat-thin-webfont.woff2') format('woff2');
+			font-weight: 100;
+			font-style: normal;
+			font-display: block;
+		}
+	</style>
+	<link rel="stylesheet" href="style.css">
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-24440376-11"></script>
+	<script>
+	window.dataLayer = window.dataLayer || [];
+	function gtag(){dataLayer.push(arguments);}
+	gtag('js', new Date());
+
+	gtag('config', 'UA-24440376-11');
+	</script>
+  </head>
+  <body>
+	<h1>ToneMatrix Redux</h1>
+	<p>A pentatonic step sequencer. Click tiles and make music.</p>
+	<p class="share-wrap">
+		Share Your Song: <input readonly id="clipboard-input"><button class="clipboard" data-clipboard-target="#clipboard-input"><img class="icon" src="clippy.svg" alt="Copy to clipboard"></button>
+	</p>
+	<div class="canvaswrap">
+		<div class="overlay"></div>
+		<a class="play-btn" href="javascript:void(0)"></a>
+	</div>
+	<p><span id="muteButton"></span><a id="clearnotes" class="button" href="javascript:void(0)">Clear Notes</a> Based on <a href="https://tonematrix.audiotool.com/">ToneMatrix</a> - By <a href="https://www.maxlaumeister.com/">Max L</a> - <a href="https://github.com/MaxLaumeister/ToneMatrixRedux">GitHub</a></p>
+	<script src="all.js"></script>
+	<script>
+		const toneMatrixInstance = new ToneMatrix(document.querySelector(".canvaswrap"), document.querySelector("#clearnotes"), document.querySelector("#clipboard-input"), document.querySelector(".clipboard"), document.querySelector("#muteButton"));
+	</script>
+  </body>
+</html>
diff --git a/montserrat-thin-webfont.woff2 b/montserrat-thin-webfont.woff2
diff --git a/mstile-150x150.png b/mstile-150x150.png
diff --git a/safari-pinned-tab.svg b/safari-pinned-tab.svg
diff --git a/site.webmanifest b/site.webmanifest
@@ -0,0 +1,20 @@
+{
+    "name": "ToneMatrix Redux",
+    "short_name": "ToneMatrix",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#000000",
+    "background_color": "#000000",
+    "display": "standalone",
+    "orientation": "portrait"
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,190 @@
+* {
+  user-select: none;
+}
+
+html {
+  height: 100%;
+}
+
+html,
+body {
+  background: #000000;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  min-height: 100%;
+  width: 100%;
+}
+
+body {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overscroll-behavior-y: contain;
+}
+
+body,
+a {
+  color: #777;
+}
+
+h1 {
+  color: #ddd;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 100;
+  margin-bottom: 0;
+}
+
+#clearnotes {
+  margin-right: 10px;
+  padding: 7px;
+}
+
+canvas {
+  margin: -4px 0;
+  cursor: pointer;
+}
+
+.canvaswrap {
+  position: relative;
+  visibility: hidden;
+}
+
+canvas,
+.canvaswrap {
+  height: 500px;
+  width: auto;
+}
+
+#clipboard-input {
+  background-color: #222;
+  border: solid #444 1px;
+  border-radius: 3px 0 0 3px;
+  color: #999;
+  font-size: 0.7em;
+  height: 24px;
+  padding: 0 5px;
+  width: 300px;
+}
+
+.clipboard {
+  border-radius: 0 3px 3px 0;
+  color: #aaa;
+  height: 26px;
+}
+
+#muteButton {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 15px;
+  width: 40px;
+  height: 40px;
+  background-image: url("volume-up.svg");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: invert(1);
+  opacity: 0.6;
+  cursor: pointer;
+}
+
+#muteButton.muted {
+  background-image: url("volume-mute.svg");
+}
+
+button,
+.button {
+  background: #333;
+  border: solid #808080 1px;
+  border-radius: 4px;
+  color: #ddd;
+  display: inline-block;
+  font-weight: bold;
+  text-decoration: none;
+}
+button :hover,
+.button :hover {
+  background: #555;
+  cursor: pointer;
+}
+
+.icon {
+  filter: invert(1);
+  height: 1em;
+  vertical-align: middle;
+}
+
+.share-wrap {
+  font-size: 0.8em;
+}
+
+.share-wrap > * {
+  vertical-align: middle;
+}
+
+body:not(.playing) canvas {
+  filter: blur(5px);
+  opacity: 0.3;
+  overflow: hidden;
+  pointer-events: none;
+}
+body:not(.playing) .canvaswrap {
+  border: solid #444 1px;
+}
+body:not(.playing) .play-btn {
+  background: radial-gradient(rgba(255, 0, 128, 0.8) 60%, rgb(255, 255, 255) 62%);
+  border-radius: 50%;
+  box-shadow: 0 0 25px 3px rgba(255, 0, 128, 0.8);
+  display: block;
+  height: 50px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 50px;
+}
+body:not(.playing) .play-btn::after {
+  border-bottom: 9px solid transparent;
+  border-left: 13px solid #fff;
+  border-top: 9px solid transparent;
+  content: "";
+  height: 0;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateX(-40%) translateY(-50%);
+  transform-origin: center center;
+  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  width: 0;
+  z-index: 100;
+}
+body:not(.playing) .play-btn::before {
+  animation: pulsate1 2s;
+  animation-delay: 0s;
+  animation-direction: forwards;
+  animation-iteration-count: infinite;
+  animation-timing-function: steps;
+  background: rgba(198, 16, 0, 0);
+  border: 5px solid rgba(255, 255, 255, 0.75);
+  border-radius: 50%;
+  content: "";
+  height: 150%;
+  left: -35%;
+  opacity: 1;
+  position: absolute;
+  top: -35%;
+  width: 150%;
+}
+
+@keyframes pulsate1 {
+  0% {
+    box-shadow: inset 0 0 25px 3px rgba(255, 255, 255, 0.75), 0 0 25px 10px rgba(255, 255, 255, 0.75);
+    opacity: 1;
+    transform: scale(0.6);
+  }
+  100% {
+    box-shadow: none;
+    opacity: 0;
+    transform: scale(1);
+  }
+}
diff --git a/volume-mute.svg b/volume-mute.svg
diff --git a/volume-up.svg b/volume-up.svg