@chordbook/tuner
Version:
The tuner used by ChordBook.app
93 lines (83 loc) • 2.79 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@chordbook/tuner</title>
<style>
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
main {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
color: white;
background: darkslateblue;
padding: 1rem 2rem;
display: flex;
}
header a {
color: inherit;
}
h1 {
font-size: 1.5rem;
margin: 0;
}
#note {
padding: 1rem;
background-color: #eee;
color: #666;
border: 1px solid #ccc;
border-radius: 0.25rem;
height: 200px;
}
#tuner {
flex: 1;
position: relative;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
#visualizer {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
}
button {
font-size: 1rem;
}
</style>
</head>
<body>
<main>
<header>
<h1><a href="https://github.com/chordbook/tuner">@chordbook/tuner</a></h1>
<a href="https://github.com/chordbook/tuner" style="margin-left: auto;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</a>
</header>
<div id="tuner">
<canvas id="visualizer"></canvas>
<div style="position: relative; width: 400px;">
<div style="text-align: center">
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>
<pre id="note" style="height: 200px;">Press start to begin tuning</pre>
</div>
</div>
</main>
<script type="module" src="./demo.ts"></script>
</body>
</html>