|
- <!DOCTYPE html>
- <html lang="en-PH" style="--size-close-button: 2rem;">
- <head>
- <meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
- <meta
- name="description"
- content="Web site created using create-react-app"
- />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
- <!--
- manifest.json provides metadata used when your web app is installed on a
- user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
- -->
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
- <!--
- Notice the use of %PUBLIC_URL% in the tags above.
- It will be replaced with the URL of the `public` folder during the build.
- Only files inside the `public` folder can be referenced from the HTML.
-
- Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
- work correctly both with client-side routing and a non-root public URL.
- Learn how to configure a non-root public URL by running `npm run build`.
- -->
- <link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
- <title>Piano MIDI Monitor</title>
- </head>
- <body>
- <button
- id="close"
- class="theme button"
- style="
- display: block;
- position: fixed;
- line-height: 0;
- top: 0;
- right: 0;
- padding: 0;
- border: 0;
- height: var(--size-close-button, 2rem);
- width: var(--size-close-button, 2rem);
- text-align: center;
- outline: 0;
- "
- >
- <span
- style="
- display: block;
- background-color: currentColor;
- width: 50%;
- height: 0.125rem;
- margin: 0 auto;
- transform: rotate(45deg);
- "
- ></span>
- <span
- style="
- display: block;
- background-color: currentColor;
- width: 50%;
- height: 0.125rem;
- margin: 0 auto;
- margin-top: -0.125rem;
- transform: rotate(-45deg);
- "
- ></span>
- </button>
- <noscript>You need to enable JavaScript to run this app.</noscript>
- <!--
- This HTML file is a template.
- If you open it directly in the browser, you will see an empty page.
-
- You can add webfonts, meta tags, or analytics to this file.
- The build step will place the bundled scripts into the <body> tag.
-
- To begin the development, run `npm start` or `yarn start`.
- To create a production bundle, use `npm run build` or `yarn build`.
- -->
- <script>
- ((window, electron) => {
- const { ipcRenderer, } = electron
- const EVENTS = [
- 'note',
- 'pedal',
- 'spanchange',
- ]
-
- EVENTS.forEach(event => {
- ipcRenderer.on(event, (_, message) => {
- window.postMessage({
- event,
- message
- })
- })
- })
-
- window.document.getElementById('close').addEventListener('click', () => {
- ipcRenderer.send('quit')
- })
- })(window, require('electron'))
- </script>
- </body>
- </html>
|