hjvt.dev
PC Music Generator - a Virtual Modular Synthesizer
1<!DOCTYPE html>
2<html>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4
5<!-- Disable zooming: -->
6<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
7
8<head>
9 <title>PCMG Editor</title>
10
11 <!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
12 <link data-trunk rel="rust" data-wasm-opt="2" data-type="main" />
13
14
15 <!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
16 <base data-trunk-public-url />
17
18 <link data-trunk rel="icon" href="../assets/favicon.ico">
19
20
21 <link data-trunk rel="copy-file" href="../assets/manifest.json" />
22 <link data-trunk rel="copy-file" href="../assets/icon-1024.png" />
23 <link data-trunk rel="copy-file" href="../assets/icon-256.png" />
24 <link data-trunk rel="copy-file" href="../assets/icon_ios_touch_192.png" />
25 <link data-trunk rel="copy-file" href="../assets/maskable_icon_x512.png" />
26
27
28 <link rel="manifest" href="manifest.json">
29 <link rel="apple-touch-icon" href="icon_ios_touch_192.png">
30 <meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
31 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040">
32
33 <style>
34 html {
35 /* Remove touch delay: */
36 touch-action: manipulation;
37 }
38
39 body {
40 /* Light mode background color for what is not covered by the egui canvas,
41 or where the egui canvas is translucent. */
42 background: #909090;
43 }
44
45 @media (prefers-color-scheme: dark) {
46 body {
47 /* Dark mode background color for what is not covered by the egui canvas,
48 or where the egui canvas is translucent. */
49 background: #404040;
50 }
51 }
52
53 /* Allow canvas to fill entire web page: */
54 html,
55 body {
56 overflow: hidden;
57 margin: 0 !important;
58 padding: 0 !important;
59 height: 100%;
60 width: 100%;
61 }
62
63 /* Position canvas in center-top: */
64 canvas {
65 margin-right: auto;
66 margin-left: auto;
67 display: block;
68 position: absolute;
69 top: 0%;
70 left: 50%;
71 transform: translate(-50%, 0%);
72 }
73
74 .centered {
75 margin-right: auto;
76 margin-left: auto;
77 display: block;
78 position: absolute;
79 top: 50%;
80 left: 50%;
81 transform: translate(-50%, -50%);
82 color: #f0f0f0;
83 font-size: 24px;
84 font-family: Ubuntu-Light, Helvetica, sans-serif;
85 text-align: center;
86 }
87
88 /* ---------------------------------------------- */
89 /* Loading animation from https://loading.io/css/ */
90 .lds-dual-ring {
91 display: inline-block;
92 width: 24px;
93 height: 24px;
94 }
95
96 .lds-dual-ring:after {
97 content: " ";
98 display: block;
99 width: 24px;
100 height: 24px;
101 margin: 0px;
102 border-radius: 50%;
103 border: 3px solid #fff;
104 border-color: #fff transparent #fff transparent;
105 animation: lds-dual-ring 1.2s linear infinite;
106 }
107
108 @keyframes lds-dual-ring {
109 0% {
110 transform: rotate(0deg);
111 }
112
113 100% {
114 transform: rotate(360deg);
115 }
116 }
117 </style>
118</head>
119
120<body>
121 <!-- The WASM code will resize the canvas dynamically -->
122 <!-- the id is hardcoded in main.rs . so, make sure both match. -->
123 <canvas id="egui-canvas"></canvas>
124</body>
125
126</html>
127
128<!-- Powered by egui: https://github.com/emilk/egui/ -->